HTML (HyperText Markup Language) is used to write the material you have been viewing on the Web. It is a SGML-based markup langauge (SGML= Standard Generalized Markup Language. See ISO 8879).
From an earlier discussion, we mentioned that word processing is done either with a WYSIWYG word processor or a markup language. Web documents fit into the latter category.
A markup language is much like a miniature program. It gives explicit instruction in an established syntax to a machine (in this case the machine is your browser) to display information in certain ways. As an example of HTML code, consider the following.
<html>
<head>
</head>
<body>
This is the text in my HTML document.
</body>
</html>
When formatted you see this.
HTML supports a limited number of formatting options. That makes it relatively easy to learn but limits the looks of the documents you can create. Each Web browser client is responsible for handling the HTML markup language tags correctly. Although there are standards, web brower developers are always pushing the boundaries of the technology past the standards. Thus implementations of tags, especially newer tags will differ among web browsers, and what looks good when viewed with one web browser may not look as nice or the same on another.
Most documents start with the html tag and end with the /html tag.
Material in the head roughly corresponds to the title page of a document. The head and /head commands are used.
The content of the document should appear between the body and /body tags.
Titles are used in the menu bar of the Web Browser window using title and /title. They are coded in the head.
<head> <title>HTML Introduction</title> </head>
When formatted you see this. Notice all this does is title the window.
Headings appear in the body of the document. There are 6 levels of headings available but only the first 3 are generally used. The heading tags are h1 /h1, h2 /h2, etc. The h1 heading is frequently the same as the title.
The six heading tags look like this. Remember the WWW client determines how they will look on your machine.
New paragraphs are started with the p tag. It does not require a closing tag, but you may enclose one for consistency.
Both numbered/ordered lists and bulletted lists are available, and they may be nested. An order list uses 3 tags: ol, li, and /ol. A bulletted list also uses three tags: ul, li, and /ul.
The ol or ul tag starts the list. The actual list items each have their own li tag. The list is terminated with the /ol or /ul tag.
<ol> <li>This is item one. <li>This is item two. </ol>
An ordered list looks like this.
A bulletted list looks like this.
A definition list consists of a term and its definition. The dl, dt, dd, and /dl tags are used.
Here is a sample definition list.
<dl>
<dt>WWW
<dd>The World Wide Web
<dt>Netscape, Internet Explorer, Mosaic
<dd>World Wide Web browsers
</dl>
Words and characters may be highlighted using
These may be combined, but cannot be overlapped.
Text can be forced to a new line with the br tag. It does not have a closing tag.
The WWW client determines the display fonts used. If you have material that must be displayed using a uniform font (an "m" takes the same amount of space as an "i") you can enclose the text in the pre /pre tags. This is useful for tables or programming language source code. Other tags may be used inside the pre /pre tags but results are not always predictable. It is best to get the text lined up correctly and then add the other tags.
You can add a horizontal line to the document with the hr tag.
Images are added to a document with the img tag, (like the U.S. icon at the right). It is a little more complicated than the text tags we have discussed so far.
<img align=top src="name_of_image_file.gif" alt="no picture">
There are two types of document links:
Inter-document links are hyper-links between different documents on the WWW. These are created with the a and the /a tag pair.
<a href="http://machine/directory/file.html">
followed by text that is clickable
</a>
Here is an example.
These links are not limited to text. Gopher or ftp could replace the http above and that type of connection would then be made.
Note that while HTML tags are case insensitive many server operating systems are not, (e.g., UNIX, Mac OS, etc.). Thus file names embedded in links should be identical to the file name as it will be stored on the WWW server machine.
Anchor links are intra-document hyper-links within the same document on the WWW. These are also created with the a and the /a tag pair.
<a href="#anchorName">
followed by text that is clickable
</a>
The named anchor must be created in the current document using the name option of the a /a tag.
<a name="anchorName"> followed by the anchor text that the anchor links to </a>
Physicallyt embedding large files (images, sounds, movies) can drastically increase the transfer time of documents across the net. The solution to this is to include links to the large files in your html document. The method is the same as described previously for adding document links, except that the file.html is replaced by file.ext. The .ext extension is replaced by the appropriate extension for the file type (e.g., .gif or .jpg, .au or .aiff, .mov, .mpeg or .mpg). It is the reader's responsibility to have their WWW browser configured with the appropriate helper application that can read and process the file format.
Tables can be used to present data in rows and columns. Tables may have captions/titles at the top or bottom. In addition, there can be column headings. Tables are enclosed in the TABLE tags. Other tags include the CAPTION, TH (column heading), TR (table row), and TD (cell definition) tags.
Here is a sample table
| Column 1 Heading | Column 2 Heading |
|---|---|
| Cell 1,1 | Cell 1,2 |
|
|
Cell 2,2
|
| Cell 3,1 | |
| Cell ?? | |
and the HTML that created it.
<TABLE border>
<CAPTION> My Table Caption </CAPTION>
<TR>
<TH> Column 1 Heading</TH>
<TH> Column 2 Heading</TH>
</TR>
<TR>
<TD> Cell 1,1 </TD>
<TD> Cell 1,2 </TD>
</TR>
<TR>
<TD ALIGN=CENTER> Cell 2,1 </TD>
<TD ALIGN=RIGHT> Cell 2,2 </TD>
</TR>
<TR>
<TD > Cell 3,1 </TD>
</TR>
<TR>
<TD COLSPAN=2> Cell ?? </TD>
</TR>
</TABLE>
| HTML and Netscape |
|---|
| Netscape HTML Editing Tutorials |
There are many features of HTML not mentioned above. Most WWW clients provide a way for you to download a WWW document with the HTML tags. Find a few pages you think look good, download the document with tags, and see what tags were used.
Explore these references for more information.