HTML (HyperText Markup Language) is used to code a text document so that it may be viewed from a Web browser (i.e. Lynx, Netscape) and displayed with special attributes. HTML uses markup tags to tell a Web browser how to display the text. HTML tags consist of a left angle bracket (<), (a ``less than'' symbol to mathematicians), followed by a name of the tag, or symbol, and closed by a right angle bracket (>) (i.e. <H1>, </H1>, <P>, <TITLE>). Tags are usually paired so that one tag appears before the text or command it acts upon and a second tag appears after the text or command (i.e.. <H1> and </H1>). The ending tag looks just like the starting tag except a slash (/) precedes the text within the brackets. The slash character (/) denotes that this is the second tag, or end of the command. HTML is not case sensitive; <title> is equivalent to <TITLE> or <TiTlE>.
Here is a barebones example of HTML:
<TITLE>The simplest HTML example</TITLE>
<H1>This is a levelone heading</H1>
Welcome to the world of HTML.
This is one paragraph.<P>
And this is a second.<P>
This example viewed with Netscape:
Figure 1This example viewed with Lynx:
The simplest HTML example
THIS IS A LEVELONE HEADING
Welcome to the world of HTML. This is one paragraph.
And this is a second.
Figure 2
In the example, the <TITLE> tag and corresponding </TITLE> tag surrounds the title text ("The simplest HTML example") and allows the Web browser (Netscape or Lynx in this case) to display it appropriately. The <H1> tag and </H1> surrounds the header text and tells the Web browser to start formatting a levelone heading. The </H1> tag tells the browser where to stop formatting the text. The <P> tag is used to indicate a new paragraph. The primary exception to the pairing rule is the <P> tag. There is no such thing as </P>. There are other HTML tags which are not paired. These are described later in this document.
HTML tags are used to format a text document and to indicate how the text should be displayed. Therefore, any extra lines in the text document will be ignored. HTML tags such as <P> and <BR>) should be used to denote new paragraphs or line breaks respectively.
Title
<TITLE>...</TITLE>
Every HTML document should have a title. A title is generally displayed separately from the document and is used primarily for document identification in other contexts. Choose about half a dozen words that describe the document's purpose.
Headings
<H1>...</H1>, <H2>...</H2>, <H3>...</H3>, <H4>...</H4>, <H5>...</H5>, <H6>...</H6>
HTML has six levels of headings, numbered 1 through 6, with 1 being the most prominent. Headings are displayed in larger and/or bolder fonts than normal body text. The first heading in each document should be tagged <H1>. The syntax of the heading tag is:
<Hy>text of heading</Hy >
where y is a number between 1 and 6 specifying the level of the heading.
For example, the coding for the heading section in the example above is
<H1>This is a level-one heading</H1>
TITLE versus first HEADING
In many documents, the first heading is identical to the title. For multipart documents, the text of the first heading should be suitable for a reader who is already browsing related information (e.g., a chapter title), while the Title tag should identify the document in a wider context (e.g., include both the book title and the chapter title, although this can sometimes become overly long).
Paragraphs
<P>
Unlike documents in most word processors, carriage returns in HTML files aren't significant. Word wrapping can occur at any point in your source file, and multiple spaces are collapsed into a single space (There are a couple of exceptions; spaces following a <P> or <Hy> tag, for example, is ignored). Notice that in the barebones example, the first paragraph is coded as
Welcome to HTML.
This is the first paragraph. <P>
In the source file, there is a line break between the sentences. A Web browser ignores this line break and starts a new paragraph only when it reaches a <P> tag (see Figure 1 and Figure 2).
Important: You must separate paragraphs with <P>. The Web browser ignores any indentations or blank lines in the source text. HTML relies almost entirely on the tags for formatting instructions, and without the <P> tags, the document becomes one large paragraph. (The exception is text tagged as ``preformatted,'' which is explained below.) For instance, the following would produce identical output as the first barebones HTML example:
The simplest HTML example</TITLE><H1>This is a level one heading</H1>Welcome to the world of HTML. This is one paragraph.<P>And this is a second.<P>
However, to preserve readability in an HTML file while you edit it, headings should be on separate lines, and paragraphs should be separated by blank lines (in addition to the <P> tags).
Linking to Other Documents
<A HREF=""> </A>
The chief power of HTML comes from its ability to link regions of text (and also images) to another document. The Web browser highlights these regions (usually with color and/or underlines) to indicate that they are hypertext links (often shortened to hyperlinks or simply links).
HTML's single hypertextrelated tag is <A>, which stands for anchor. To include an anchor in your document:
Start the anchor with <A (There's a space after the A .).
Specify the document that's being pointed to by entering the parameter HREF="filename" followed by a closing right angle bracket: >
Enter the text that will serve as the hypertext link in the current document.
Enter the ending anchor tag: </A>
Here is a sample hypertext reference:
<A HREF="MaineStats.html">Maine</A>
This entry makes the word ``Maine'' the hyperlink to the document MaineStats.html, which is in the same directory as the first document. When the user selects the text "Maine", the first page of the document "MaineStats.html" will be displayed. You can link to documents in other directories by specifying the relative path from the current document to the linked document. For example, a link to a file NJStats.html located in the subdirectory AtlanticStates would be:
<A HREF="AtlanticStates/NJStats.html">New Jersey</A>
Forced Line Breaks
<BR>
The <BR> tag forces a line break with no extra space between lines. (By contrast, most browsers format the <P> paragraph tag with an additional blank line to more clearly indicate the beginning the new paragraph.)
One use of <BR> is in formatting addresses:
National Center for Supercomputing Applications<BR>
605 East Springfield Avenue<BR>
Champaign, Illinois 618205518<BR>
Horizontal Rules
<HR>
The <HR> tag produces a horizontal line the width of the document page
Links to Specific Sections in Other Documents
<A NAME =""> </A>
Anchors can also be used to move to a particular section in a document. Suppose you wish to set a link from document A to a specific section in document B (Call this file documentB.html.). First you need to set up a "named" anchor in document B. For example, to set up an anchor named "Jabberwocky" in document B enter
<A NAME = "Jabberwocky">anchored</A>
at the point in document B where you want the link to take the user.
An example of DocumentB might look like this:
This is DocumentB with the <A NAME = "Jabberwocky">anchored</A> text.
The user comes directly to this paragraph (anchor) after selecting the link in
DocumentA.
HTML DocumentB
Now when you create the link in document A, include not only the filename, but also the named anchor, separated by a hash mark (#). For example:
This is my <A HREF = "documentB.html#Jabberwocky">link</A> to document B.
An example of DocumentA might look like this:
When you select this <A HREF = anchor.html#Jabberwocky">link</A> to documentB
you will be taken to the named anchor in that document. DocumentB is displayed
beginning with the paragraph that contains the named anchor.
HTML DocumentA
Now selecting the word ``link'' in document A sends the reader directly to the words ``anchored text'' in document B.
DocumentA and DocumentB viewed from Lynx:
This is DocumentB with the anchored text. The user comes directly to this paragraph (anchor) after selecting the link in DocumentA.
DocumentB
When you select this link to documentB you will be taken to the named anchor in that document. DocumentB is displayed beginning with the paragraph that contains the named anchor.
DocumentA
Character Formatting
<B>- bold text
<I> - italic text
To apply a character style:
Start with <tag>, where tag is the desired character formatting tag, to indicate the beginning of the tagged text.
Enter the tagged text.
End the passage with </tag>.
Special Characters
Escape Sequences
Four characters of the ASCII character set the left angle bracket (<), the right angle bracket (>), the ampersand (&) and the double quote (") have special meaning within HTML and therefore cannot be used "as is" in text. (The angle brackets are used to indicate the beginning and end of HTML tags, and the ampersand is used to indicate the beginning of an escape sequence.)
To use one of these characters in an HTML document, you must enter its escape sequence instead:
< - the escape sequence for <
> - the escape sequence for >
& - the escape sequence for &
" - the escape sequence for "
NOTE: Unlike the rest of HTML, the escape sequences are case sensitive. You CANNOT, for instance, use < instead of <.
Here is a second, longer example of an HTML document:
<TITLE>A Longer Example</TITLE>
<H1>A Longer Example</H1>
This is a simple HTML document. This is the first paragraph. <P>
This is the second paragraph, which shows special effects. This is a word in <I>italics</I>. This is a word in <B>bold</B>. Here is an inlined GIF image: <IMG SRC = "myimage.gif">.<P>
This is the third paragraph, which demonstrates links. Here is a hypertext link from the word <A HREF = "subdir/myfile.html">foo</A> to a document called "subdir/myfile.html". (If you try to follow this link, you will get an error screen.) <P>
<H2>A secondlevel header</H2>
This is the second example viewed with Netscape:
A Longer Example
Figure 3
This is the second example viewed with Lynx:
A Longer Example
A LONGER EXAMPLE
This is a simple HTML document. This is the first paragraph.
This is the second paragraph, which shows special effects. This is a word in italics. This is a word in bold. Here is an inlined GIF image: [IMAGE] .
This is the third paragraph, which demonstrates links. Here is a hypertext link from the word foo to a document called "subdir/myfile.html". (If you try to follow this link, you will get an error screen.)
A secondlevel header
Figure 4