DEV Community

Cover image for html command
Ezhil Arasan
Ezhil Arasan

Posted on

html command

#webdev #html #beginners #tutorial

What is command?
A command in computing is a specific instruction given to a computer or software program to perform a particular task. It acts as a direct order, such as telling the system to open a file, delete data, or run a program.

In HTML, "commands" are technically called tags. They are the building blocks used to structure and format web pages.

Basic steps: using tags
HTML uses tags to communicate to the client (browser) how to display text and images. Tags are contained in< >symbols. In most cases you start with the beginning tag, put in the word or words that will be affected by this tag, and at the end of the string of word(s), you place a closing tag.

For example, to create a title for a document you would do the following:

<title>My First HTML Document</title>

The closing tag normally contains a "/" before the directive to indicate the termination of the action.

HTML tags are not case-sensitive, although URLs generally are. In most cases (with the exception of preformatted text) HTML collapses many spaces to one space and does not read blank lines. However, when you write your text you should leave several blank lines between paragraphs to make editing your HTML source document easier.

The HTML tag
Although not currently required by all clients, the <html> tag signals the point where text should start being interpreted as HTML code. It's probably a good idea to include it in all your documents now, so you don't have to go back to your files and add it later.

The <html> tag is usually placed on the first line of your document. At the end of your document you should close with the </html> tag.

The head tag
Just like the header of a memo, the head of an HTML document contains special information, like its title. The head of a document is demarcated by <head> and </head> respectively.

For the purposes of this class, only the title tag, below, should be included in the document head. A typical head section might look like


<html>
<head>
<title>My First HTML Document</title>
</head>
Enter fullscreen mode Exit fullscreen mode

Remember, the title usually doesn't appear in the document itself, but in a title box or bar at the top of the window.

The body tag
Like you might expect, the body tags <body> and </body> define the beginning and end of the bulk of your document. All your text, images, and links will be in the body of the document.

The body should start after the head. A typical page might begin like

`<html>
<head>
<title>My First HTML Document</title>
</head>
<body>`
Enter fullscreen mode Exit fullscreen mode 
<!DOCTYPE html>
<html>
<head>
    <title>Description List</title>
</head>
<body>

<h2>Programming Languages</h2>

<dl>
    <dt>HTML</dt>
    <dd>Used to create web pages</dd>

    <dt>CSS</dt>
    <dd>Used for styling web pages</dd>
</dl>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Headers
There are up to six levels of headers that can be used in your document, h1 through h6. Header 1 is the largest header and they get progressively smaller through header 6. Below are each of the six headers and how they usually appear in relation to one another.

<h1>This is a header 1 tag</h1>
Headers, as you notice, not only vary in size(h1,h2,h3,h4,h5), they are also bold and have a blank line inserted before and after them. It's important to use headers only for headings, not just to make text bold (we cover the bold tag later).

Paragraphs
In HTML, a paragraph tag <p> should be put at the end of every paragraph of "normal" text (normal being defined as not already having a tag associated with it).

`<p>` causes a line break and adds a trailing blank line 
`<br>` causes a line break with no trailing blank line
Enter fullscreen mode Exit fullscreen mode

As a convenience to yourself and others who might have to edit your HTML documents, it's a very good idea to put two or three blank lines between paragraphs to facilitate editing.

Blockquote
The blockquote tag indents the text (both on the left and right) inside the tags. The blockquote tag looks like this:

<blockquote>...</blockquote>

Blockquoted text is often used for indenting big blocks of text such as quotations. The text will be indented until the ending tag is encountered. Again, note that the text here is indented on both the left and the right margins.

list


there are three types of lists:
1) ordered lists: <ol>,</ol>
the elements of the list are introduced by <li> (list item)
the end tag </li>is not optional
to change the current label to 30, use <li value="30">
2) unordered lists: <ul>,</ul>
the elements of the list are introduced by <li> (list item)
the end tag </li> is not optional
3) definition lists: <dl>, </dl>
the elements of the list are pairs term-definition introduced by
<dt>(definition term)
<dd>(definition definition)
the end tags </dt> and </dd> are not optional

<!DOCTYPE html>
<html>
<head>
    <title>Ordered List</title>
</head>
<body>

<h2>Subjects</h2>

<ol>
    <li>Maths</li>
    <li>Science</li>
    <li>English</li>
    <li>Computer</li>
</ol>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Tables

  • <table>, </table>: encloses the table
  • <thead>, </thead>: encloses the table head; this helps the browser display the head on each page, if the table is longer.
  • <tfoot>, </tfoot>: encloses the footer of the table; it must precede the<tbody> -<tbody>, </tbody>: encloses the body of the table
  • <tr>, </tr>: table row
  • <th>, </th>: table header cell; used within <tr>
  • <td>, </td>: table data cell; used within `

    Strike-through

    Should you want it, there is a strike-through tag which displays text with a strike.

    <strike>This is struck through text</strike>

    displays as:

    This is struck through text

    Addresses
    The <address> tag normally appears at the end of a document and is used most frequently to mark information on contacting the author or institution that has supplied this information. Anything contained within the address tag appears in italics. The address tag is another example of a logical tag, and although it currently does nothing but make text appear in italics, this could change as HTML code advances.

    Here is an example of how an address might appear:

    `html

    Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu

    `

    And it would appear as:
    Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu

    Horizontal Rule
    To separate sections in a document, you can insert a horizontal rule tag

    . A horizontal rule is displayed as follows:

    Center

    You can center text, images, and headings with the center tag:

    <center>This is a centered sentence</center>

    The center tag automatically inserts a line break after the closing center tag.

    ** Image**
    <img>
    purpose: inline image
    example: <img src="../picture.jpg" height="20%" alt="campus map">

    Refrence
    https://www.apu.ac.jp/~gunarto/html.html
    https://www.math.uh.edu/~torok/math_6298/html/commands.html

Top comments (0)