HTML stands for Hyper Text Markup Language. It is used to create multi-media Hyper Text documents. HTML is the primary document type used on the World Wide Web, the global network of Internet connected hyper text servers. Be sure to read chapter 5 to learn more about the World Wide Web.
This chapter will explain some of the basics of HTML and will walk you through creating a few simple multi-media documents. Using these hints and the example documents included with GLACI-HTTPD software, you should be able to quickly and easily enter the exciting, multimedia world of hypertext.
Before we begin, here is a helpful trick. Most HTML viewers allow you to view the source files that generate the formatted documents. For example, If you are viewing a document with Mosaic and wish to see the markup used to create it, go the File menu and select the option View Source. This will display the source text file with all the markup codes. If you are person who learns well from examples, this is an excellent way to learn HTML.
There is nothing magic about an HTML document. In fact, it is really only a text file with some special codes and reserved words (called tags) to indicate the text layout and font selection. You can use almost any text editor to create an HTML document. The real magic occurs when you load the document in an HTML viewer. This is a program which interprets the HTML markup and formats it appropriately on the screen. This type of program is also often called a web browser or a web client. Reserved words and control codes in HTML documents are always enclosed in angle bracket characters '<' and '>', often referred to as the Greater Than and Less Than symbols. For example, the tag "<br>" is used to indicate a line break in your text. Thus the following text in an HTML document:
This is a test<br>of the line break tag.
Would be displayed as:
This is a test
of the line break tag.
HTML codes often come in pairs. For example to indicate the beginning of bold text, you would use the "<b>" tag. To indicate the end of bold text, you use the "</b>" tag. This is another HTML convention; to indicate the end of an HTML format tag, simply use the same bracketed word but with a forward slash character '/' in front of it. Thus the following text in an HTML document:
This is an example of <b> bold text</b> in an HTML document.
Would be displayed as:
This is an example of bold text in an HTML document.
It is also important to note that HTML tags are not case sensitive. We could just as easily written the above text as:
This is an example of <B>bold text</B>in an HTML document.
An HTML document should always consist of a HEAD and a BODY. In actuality, most HTML viewers will let you be sloppy about this, but it is still a good idea to follow correct form and define these components.
The HEAD is at the beginning of the document and is enclosed by the <HEAD> and </HEAD> tags. The HEAD is used to describe attributes of the document such as TITLE, None of the text in the HEAD is displayed on the screen when viewing the document with an HTML viewer.
The BODY always follows the HEAD and contains the actual text displayed in the document. It is enclosed by the <BODY> and </BODY> tags.
Here is an example of a very simple HTML document:
<HEAD>
<TITLE>A Simple HTML Document</TITLE>
</HEAD>
<BODY>
This is a very simple HTML document.
</BODY>
This would display as:
This is a very simple HTML document.
Note that the title is not displayed in the main window of your HTML viewer. Most viewers (such as Mosaic) will display the document title in a small box separate from the body of the document. The title is also used when storing a document in your web browser's hotlist.
HTML supports six levels of headings. A top level heading is indicated with the <H1> and </H1> tags. The <H6> and </H6> tags are used to indicate the lowest level heading. As you may have guessed, <H2>, <H3>, <H4>, and <H5> are used to indicate successively lower level headings between level 1 and 6. Here is an example using the heading tag.
<H1>A Big Heading</H1>
Some example text
<H2>Subsection One</H2>
Text in subsection one
<H2>Subsection Two</H2>
Text in subsection two
This example shows a main heading followed by two subsections introduced with smaller headings. A typical HTML viewer would display it as follows:
Some example text
Text in subsection one
Text in subsection two
The most basic component of an HTML document is a simple paragraph of text. Any text not embedded inside an HTML tag or other special component is considered general text and is formatted by the HTML viewer accordingly. Carriage returns in the source document are ignored when the text is displayed; the paragraph is always line wrapped to fit the size of the viewing window. Carriage returns must be hard coded into the text with the <br> tag or other related markup. As an example, the following source text:
This is an example of
automatic line wrapping in
an HTML
document. You can see that text is automatically
adjusted to
fill each line.
would be displayed as:
This is an example of automatic line wrapping in an HTML document.
You can see that text is automatically adjusted to fill each line.
If you reduce the size of you HTML viewer window, it might then be displayed as:
This is an example of automatic line wrapping in an
HTML document. You can see that text is automatically
adjusted to fill each line.
It is often useful to display information in the form of a list. HTML defines markup for creating both numbered and un-numbered lists. The OL tag is used to indicate an Ordered List, a list with numbered items. The UL tag is used to indicate an Unordered List, a list with bullet items instead of numbered items. The OL and UL lists are terminated with the /OL and /UL tags, respectively. Individual items in the list are always preceded with an LI (List Item) tag. The source text for a simple, unordered list might look like the following:
<UL>
<LI>Item One
<LI>Item Two
<LI>Item Three
</UL>
An HTML viewer would display the above as something like the following:
To indicate an ordered list (one with numbered items), we would replace the UL tag with the OL tag, resulting in the following source text:
<OL>
<LI>Item One
<LI>Item Two
<LI>Item Three
</OL>
Which would be displayed like the following:
There are two more list tags in HTML, the DIR tag and the MENU tag. These function much like the UL tag, but format the items slightly differently. The MENU tag is useful for lists with items containing an entire paragraph of text. The DIR tag is useful for list with very short items (less than 20 characters).
The most powerful feature of HTML is the ability to embed in your document links to other documents. These are called hyperlinks and are created with a special tag called an anchor. An anchor is indicated with the 'A' tag. It includes an HREF field to indicate the linked document and is terminated with the '/A' tag. When the document is viewed in an HTML viewer, the text between the two tags is displayed in a special color or font to indicate it is a clickable hyperlink. Here is an example of a hyperlink markup:
<A HREF="mydoc.html">My own HTML document</A>
This will display the text My own HTML document in a special font or color to indicate it is a hyperlink. When clicked on, the document mydoc.html will be loaded. Because there is no explicit directory path in front of the document name, the HTML viewer assumes the document is in the same directory as the source document that referenced it. You may also specify an explicit path if the document is located in a different directory.
<A HREF="/somedir/mydoc.html">My own HTML document</A>
In the above example, the HTML viewer will look for the document mydoc.html in the directory /somedir on the same web server as the document that referenced it. You can also specify a document on an entirely different server by including a complete URL in the HREF field.
URL stands for Uniform Resource Locator. In general, it consists of three parts; the network protocol used to retrieve the file, the server that the file is stored on, and the directory path and filename of the file. For example, if we want to retrieve the file mydoc.html using the Hyper Text Transfer Protocol (HTTP ) from the server ren.glaci.com in the /somedir directory, we use the following URL:
http://ren.glaci.com/somedir/mydoc.html
Note that the protocol is followed by a colon character, ':' and the server name is preceded by two forward slash characters, '//'. The forward slash character, '/', us used to separate the server name from the document path as well as to separate components of the directory path. Here is another example URL:
ftp://ftp.glaci.com/pub/netware/httpd/readme.txt
This URL indicates that the File Transfer Protocol ( FTP) should be used to download the file readme.txt from the /pub/netware/httpd directory on the anonymous FTP server ftp.glaci.com.
We can include an entire URL in the HREF field of an hyperlink tag. Using our above mydoc.html example, we might construct the following hyperlink.
<A HREF="htttp://ren.glaci.com/somedir/mydoc.html">Link to mydoc.html</A>
This would result in text Link to mydoc.html being displayed as a hyperlink. When clicked on, the file mydoc.html would be downloaded from the /somedir directory on the system ren.glaci.com using the HTTP protocol.
There are tags that allow you to embed images and sound into you HTML documents. These tags contain the names of graphic image files and digitized sound files you want embedded in your document. To include an image in your document, you would use the IMG tag. The IMG tag has an additional SRC field that specifies the name of the image file. Thus the following HTML markup:
<IMG SRC="shirt.gif">
Results in the graphic image file shirt.gif being embedded into that location in the document. Perhaps looking like the following:
Because there is no directory name in front of the file name, the HTML viewer assumes the graphic image file is in the same directory as the document that references it. We could just have easily created markup that explicitly gives the path to the graphic.
<IMG SRC="/graphics/mydir/shirt.gif">
The above markup causes the HTML viewer to search for the file in a specific directory under the web server's root document directory. We can even tell the HTML viewer to pull the graphic from a different web server entirely.
<IMG SRC="http://www.glaci.com/somedir/shirt.gif">
This causes the HTML viewer to connect to system www.glaci.com and download the image file from the /somedir directory.
Images can be scattered through your document much like text, and can even be used as the description for an anchor. For example, the following markup:
<A HREF="http://www.glaci.com/mydoc.html"> <IMG SRC="myimage.gif"></A>
results in an embedded image that, when clicked on, causes the document mydoc.html to be loaded from the web server www.glaci.com.
Support for the ISMAP feature has been added to the GLACI server. An additional configuration option has been added to the HTTPD.CFG file, the keyword 'ImageMapDir' followed by volume and path where image files may be located. The default location is SYS:/ETC/IMAGEMAP. Thus, the new entry in the HTTPD.CFG file would look like the following:
ImageMapDir SYS:/ETC/IMAGEMAP
A map file is used to define the clickable locations within an image. The map file must have a .MAP extension. For example, an image named TEST.GIF might be mapped by a file named TEST.MAP. The TEST.MAP file might contain the following text:
# Test of NCSA style map file default four.html # First rectangle rect one.html 15,14 82,83 # Second rectangle poly two.html 119,14 185,14 119,83 # The circle circle three.html 246,48 246,80The TEST.GIF might look like the following:
The above example defines two squares and a circle within TEST.GIF. A rectangle is defined with two points, the upper left corner and lower right corner. The points are shown as X, Y pairs. The URL associated with that rectangle is listed before the points defining it.
A circle is defined by a center point followed by a point on the edge. The URL associated with the circle is listed before the points. In the above example, clicking within the circle will cause the document three.html to be loaded from the server.
Clicking outside a specified shape will cause the default URL to be loaded.
The test image could be accessed with the following HTML code:
<A HREF="/img/test.map"><IMG SRC="/test/test.gif">
An anchor tag can contain links to file types other than HTML documents. You can embed sound files in your document by placing the name of the digitized sound file in the HREF field of the anchor. The HTML viewer will recognize the .AU extension on the file and will invoke the appropriate audio software. An anchor that will play a digitized sound file of bird songs might look like the following:
<A HREF="birdsong.au">Play Bird Songs</A>
This will display the text Play Bird Songs as a hyperlink that, when clicked on, will play the sound file birdsong.au. As with other hyperlinks, we could specify that the file is in a different directory, or even on a different server.
Included with your GLACI-HTTPD software is an example HTML document named WELCOME.HTM. It contains many of the HTML features discussed above. The source text of WELCOME.HTM follows:
INSERT SOURCE HERE
To see what this looks like in a web browser, Click Here
There are a variety of tools available that can make the creation of an HTML document easier, everything from simple word processor macros to complete WYSIWYG HTML editors. The following list of HTML editors was copied from a web server at CERN in Geneva, Switzerland. To see the complete list and get more in-depth information, you can connect to Mag 's Big List of HTML Editors.
It is not uncommon to have existing data in some word processor format that you wish converted into HTML. A variety of filters and converts exist that can help you with converting your documents. A web page listing many of these filters can be found at W3O's full list of HTML filters.