Introduction to HTML.

HTML is an acronym for HyperText Markup Language. From user's point of view an HTML document is a simple text file that contains usual text and special commands for web browsers. These HTML commands are called tags. All tags are commands inside less than and greater than signs: 
<command>
Most of the tags have corresponding closing tags. Closing tag is exactly the same command with a slash in front of it. So, the closing tag for tag <command> would be 
</command>
Some tags have additional parameters (or attributes) that specifie one or more aspects of the page elements between the opening and closing tags. These parameters are to be specify immediately after the tag name inside the angle brackets when we open the tag. The parameters usually are given in the form 
parameter_name=parameter_value
However, some parameters have no values, just the names. Thus, the general syntax of a HTML command is 
<command [parameter[=value] , ...]>
 pure text and other tags
</command>
For example, the following tag separates the text inside it as a paragraph and centers it:
Code View 
Text before the paragraph.
<p align="center">
This text should be separated and centered.
</p>
Text after the paragraph.
Text before the paragraph.

This text should be separated and centered.

Text after the paragraph.

Note: HTML is not a case sensitive language.

Structure of HTML document.

Each HTML document should begin with the open <html> tag and should end with the close </html>. All the content of the document and all other tags should be between these two tags. The simplest HTML page looks like this: 

<html> </html>
Click here to view the page.

Any HTML document can have two sections the header section and the body section. Each of the sections is embraced with corresponding tags. Tag for the header section is <head> (and closing tag is </head>) and the tag for the body section is <body> (closing tag </body>). Thus an empty document will look like this: 

<html>
 <head>
 </head>

 <body>
 </body>
</html>

Let's try to fill this document with some content. We will start with the header section. This section of the document contains some information about document: title, information about authors, key words for search engines, styles, scripts, etc. Almost all that information is hidden from the user. User usually sees only the title of the document, because it's displayed by browsers in the header of the window.

To add a title to the header, we need to use the special tag <title> with closing </title>. Remember, this tag should be placed inside the header section.

Everything inside the body of the document will be displayed inside the browser window. For now lets just type some text in there:

The <body> tag itself not only groups displayable elements of the page, but also may have some parameters that specify how particular elements should look like. We will discuss these parameters later*.

Formatting text.

As you could see above browsers take a set of spaces or new line symbols just as single space. That is, we cannot format our document by leaving spaces or putting mew lines inside text. We need some HTML commands that ask browsers to do so. Some of such commands are:
  • New line tag <br /> makes a browser to start text output with a new line. (Does not require a closing tag.)
  • New paragraph tag <p> makes a browser to skip an empty line and also leave some empty space between the previous text and the text after the tag. This tag doesn't require the closing tag, but with new standards it's recommended to have it.
  • Horizontal rule tag <hr /> makes a browser to insert two new lines and draw a horizontal line between them. There is no closing tag for this one, but in order to "close" it, we use the back slash within the tag itself.

    Let's apply all these new tags to the previous example:

    There is one more useful tag which is the opposite to the new line tag. This is <nobr> tag. This command prevents browsers from making new lines in your text while browsers display your text. In other words, all text between <nobr> and </nobr> tags will be printed as one big line (unless you manually put new line symbols in it). Because browsers decide where to put new line symbols themselves, based on the client window size and the font, you have very little control over it. For example, this can be useful to keep first name character and the last name together: 
    <nobr>R. Smith</nobr>

    Preformatted text

    Special tag <pre> with its closing tag </pre> also helps with formatting text, but unlike the previous tags that make browsers to do something else. This tag keeps the original format of the document prohibiting the browser to do any formatting, but it also makes the browser to use typewriter font. To illustrate this, we use the text of the first example and include all the text inside the <pre> tag:

    Centering text

    The next tag we are about to present centers the text horizontally on the page. This tag is not recommended to use, though. So, please use other forms (which will be described later instead). This tag will be deleted from future versions of HTML. For now, you can center text, tables, images, etc by placing these objects between <center; and </center> commands:
    Please also note that this tag makes the browsers to insert some empty space before and after the pre-formatted text:
    Code View
    Some text before pre-formatted text.
<pre>
  This is
        PRE     formatted text.
</pre>
Some text after pre-formatted text.
    		Some text before pre-formatted text. 
      This is
        PRE     formatted text.
    Some text after pre-formatted text.

    Text headers

    A very good way of formatting text is to insert headers for section and subsections. HTML has a special tag <h?> that helps to do so. This tag actually has 6 different versions:
  • <h1>
  • <h2>
  • ...
  • <h6>
    The general behavior is very similar text between <h?> and </h?> (put a digit between 1 and 6 instead of question mark) displays with the bold font on new line and is separated from other text with small vertical spaces. The only difference is the size of the font. Tag <h1> displays the header using the biggest font and tag <h6> using the smallest font. This tag also can have an optional parameter align, which can take one of the three values:
  • left (default)
  • center
  • right
    that parameter commands the browser to align the header horizontally by either left or right end, or center it. To use this header tag with a parameter you need to include the desired parameter and its value inside the tag. For example, 
    <h3 align="center">This is a centered header of the third level</h3>
    The following page illustrates usage of the tag:

    Manipulating fonts

    There are other ways to change fonts used in documents but using headers. The tags that allows us to do that are divided into logical formatting tags and physical formatting tags. The logical formatting tags are:
  • <strong> for switching current font to bold font
  • <em> for switching current font to italic font
  • <kbd> for switching current font to typewriter font
    this is a default behavior, which can be redefined by changing browser settings. The following code shows how to use these tags:
    Code View
    This is normal text<br />
<kbd>This is typewriter text</kbd><br />
<em>This is emphasized text (italic)</em><br />
<strong>This is strongly emphasized
      text (bold)</strong>
    		This is normal text
    This is typewriter text
    This is emphasized text (italic)
    This is strongly emphasized text (bold)

    The physical formatting tags that cause the same effect to the document will be removed from HTML standard in the near future and are not recommended to use (however, are still widely used). These tags are:

  • <b> switch to bold font
  • <i> switch to italic font
  • <tt> switch to typewrite font
    The same result as above can be achieved with:
    Code View
    <tt>This is typewriter text</tt>
<i>This is emphasized text (italic)</i>
<b>This is strongly emphasized text (bold)</b>
    		This is typewriter text This is emphasized text (italic) This is strongly emphasized text (bold)

    One more physical formatting tag, which also is not recommended to use,but still very powerful is <font> tag. This tag gives much more control over font to HTML designers. Unlike the previously described font manipulating tags the <font> can have several attributes that allow the designer to set different characteristics of the font. Here a list of them:
    Attribute Description
    size changes the size of the font between. Possible values are:
    Size Appr. font size
    1 8
    2 10
    3 (default) 12
    4 14
    5 16
    6 18
    7 24
    It is highly recommended, however, not to use the absolute values for the font size, unless you absolutely sure you need to do that, because page with absolute font size specified cannot be affected with the browser settings "Text size: medium, larger, largest, etc". Instead of absolute values you can also can use values like +1, +2 to increase the current font by one or two, or -1, -2 for smaller fonts.
    face refers to the name of the font you would like to use. "Would like" because you can not be sure that the desired font is installed on the computer user's running the browser. Some possible values are
    Font name   Example
    color sets the color of the font. You can use either an RGB hexadecimal value or one of the predefined color names:
    Color name   Example
    For example, we can display a portion of the text using blue small Verdana font:
    Code View
    <font face="Verdana, Helvetica, Arial" color="blue" size="-2">
 This text is written by Verdana, Arial, or Helvetica font
 with blue color and smaller.
</font>
    		This text is written by Verdana, Arial, or Helvetica font with blue color and smaller.

    Here you can find a small visual tool to play with all these tags.

    Comments in HTML.

    Comments is a very important part of any programming language. It's very wise idea to use comments to explain non-trivial parts of your code, to make a plan of the document, to separate one part of the document from another, etc. It's also very convenient when you need to hide a part of your code from the browser (it doesn't yet work properly, for example) but you don't want to remove the code from the document. In HTML comments start with <!-- and end with --> everything between these two sequences will be ignored by browsers and will not be displayed. Now we'll hide all text from the first example:

    For more examples and attributes of the tags mentioned in this lecture see these tables.
    Keywords: HTML, tags, attributes, <html>, <head>, <title>, <body>, <br>, <p>, <nobr>, <hr>, <i>, <b>, <tt>, <em>, <kbd>, <strong>, <font>, headers, comments