Tutorial on Creating Hypertext Documents


Introduction

HyperText Markup Language (HTML) is the formatting language used for creating hypertext documents on the World Wide Web, which can be displayed by Web browsers such as Mosaic. This tutorial will guide you through creating a hypertext document which you can use as the your personal "home page", which is the top-level page in your personal hypertext hierarchy.

This tutorial should be considered as a complement to the Beginner's Guide to HTML. Note that throughout the tutorial it is assumed that NCSA Mosaic for X is being used as the HTML viewer, although most of the tutorial is independent of the specifics of the viewer.

There is also a Beginner's Quick Reference Guide to HTML listing the most commonly used features of HTML, which is a handy reference card once you have read through the Beginner's Guide.

HTML

The first thing you should realize about HTML is that it is quite simple. It only has the bare minimum of formatting functions, so it is simpler to learn than a fancy word processing package or a typesetting language like TeX.

HTML is based on plain (ASCII) text. In order for the HTML viewer (e.g. Mosaic) to distinguish between the formatting commands and the text to be displayed, the formatting commands are placed within angled brackets. For example, to specify that a certain section of text is going to be the title of the document, the text is placed between two formatting commands: <TITLE> to mark the beginning of the text specifying the title, and </TITLE> to mark the end of the title. This is the standard syntax for most HTML commands. Note that HTML is not case sensitive, so you could also write this as <title>.

Title

So, let's get started on writing an HTML document. The first thing to do is to make a directory called public_html and move into it. This is your "home directory" as far as the Web is concerned. (Note that although this directory is the default home directory name for the Web, another directory could be used -- it depends on how the Web server you are using is set up). Now start up your favorite text editor and create a file called index.html (this is the default name for a top level document on the Web), which will be your "home page" on the World Wide Web The file extension .html tells Mosaic that the file is a hypertext document and should be displayed as such. Even so, it is good practice to enclose the contents of the file in formatting tags which specify that the enclosed text is HTML. Let's start our home page by putting the title in between those two tags:
<HTML>
<TITLE> Paul's Home Page </TITLE>
</HTML>
Type this in (preferably using your own name) and save it to the file index.html. Now display it under Mosaic. In order to see both your homepage and this tutorial, you will need to run another copy of Mosaic. In this new browser window, go to the File pulldown and choose the option to open a local file. Select the correct directory and file (index.html), and then click on the button that says OK. That should display your home page. However you will notice that it is blank! That's because so far you've only put in the title, which will be displayed up at the top of the browser window.

Note that you will now have to juggle three separate windows to continue this tutorial - one (this one) to display the tutorial, one to run the editor to create your homepage, and one to display your homepage.

Headers

What we need to add next is a header under the title. Headers come in different sizes, from <H1> (very large) down to <H6> (very small). Let's start with a large one:
<H1> Paul's Home Page </H1>
Add the new text to your home page file, save the changes, and redisplay the document under Mosaic by clicking on the Reload button (this tells Mosaic that the file has been changed and should be reloaded and redisplayed). Now you should see the text in large bold letters in the Mosaic window.

Now let's try using a smaller header, and writing some plain text. This is your own personal home page, so why not start by telling everyone (well, everyone on the Internet at least) a little bit about yourself, like I've done below:

<H2> Background </H2>

I am a research scientist at the Northeast Parallel Architectures 
Center (NPAC) at Syracuse University in Syracuse, New York. 
I am working on applications of high performance computing and
communications, parallel computing, computational science,
and the World Wide Web.

I like hiking, canoeing, whitewater kayaking, rock climbing, 
traveling, photography, fossils, alternative music, mammals,
old buildings, and kitsch.
Again, save the changes to the file and redisplay the document under Mosaic. It should look something like this. It is a good idea to check your HTML document periodically as you are creating it, in order to pick up any mistakes, typos or syntax errors you may have made. For example, you may want to check out what happens if your miss out the slash / in the closing tag </H2>, which is a common mistake that's all too easy to do.

If during the course of this tutorial you find that your document seems wrong (it doesn't look like the examples) and you can't figure out why, then check your HTML against the HTML in the example documents. You can do this by displaying the HTML source in the example document, which can be done by choosing the View Source option in the browser (in Mosaic this is under the File pulldown, in Netscape it is under View). This is also a very useful trick for looking at other people's HTML documents and figuring out how they do various things.

Paragraphs

Notice that even though there is a blank line in the sample home page above, the lines all run together when the HTML is displayed. This is because blank space and blank lines are ignored in HTML. To separate two sections into different paragraphs, you need to use a paragraph marker <P>. This is one of the cases in HTML where there is no corresponding "closing" tag like </P> (this closing tag will be defined in future versions of HTML, but it will not be mandatory).

Add a paragraph marker between the "work" and "play" sections of your homepage (assuming they are separable). It should now look something like this.

Lists

HTML has some basic text formatting capabilities, one of which is creating lists. There are 3 types of lists - an ordered list <OL>, an unordered list <UL>, and a descriptive list <DL>.

Let's try creating an unordered list of subjects that interest us, for example:

<H2> Interests </H2>

<UL>
<LI> Parallel algorithms 
<LI> Graphics and visualization
<LI> Computational physics
<LI> Computational science education
</UL>
Ordered lists are virtually the same, except that the items in the list will be numbered instead of bulleted. This could be used for something like a "top ten" list (or for brevity, the condensed top five list in the following example).
<H2> Favorite Bands </H2>

<OL>
<LI> Yo La Tengo 
<LI> The Jesus and Mary Chain
<LI> The Clean
<LI> The Cocteau Twins
<LI> The Breeders
</OL>
Make an ordered or unordered list (or both). Note that if you miss out one of the closing tags like </UL> (or miss out the slash), then the rest of the text will keep being indented, like this. So you need to check your HTML and find any tell-tale unwanted indentations and identify and fix the problem, so that it looks like this instead.

The final type of list is the descriptive list, which is somewhat different from the other two, in that each item has a brief title followed by a description, which is placed underneath the title and indented. This is handled by the descriptive list, by replacing the <LI> by two tags, <DT> for the title for the item, and <DD> for the description. For example, in my first list on interests, I may want to convert the brief bulleted items to titles, with a more detailed description or explanation of the item underneath, so it would look something like this.

In some cases you also may want to put the titles in boldface type to make them stand out more. This can be done by using the <b> and </b> tags to enclose text to appear in boldface. You could also put paragraph markers between the items to space them out, in which case the list would look like this.

Hyperlinks and URLs

The main feature of hypertext is that it provides a method of setting up links (called hyperlinks) to other documents. For example, NPAC has its own home page. Since I mention NPAC in my personal home page, I probably want to add a hyperlink to the NPAC page, so that people who want to find out about where I work can follow that link.

To add a hyperlink, we need to specify 2 things - the file containing the document you want to link to, and the text in the current document that you want to be highlighted as the hyperlink. In this case I want the words Northeast Parallel Architectures Center to be the highlighted text, so the hyperlink is set up as follows:

I am a research scientist at the 
<A HREF="http://www.npac.syr.edu/index.html">Northeast 
Parallel Architectures Center</A> (NPAC) 
at Syracuse University in Syracuse, New York. 
The <A> tag is called an anchor, and specifies the start of the text to be highlighted as the hyperlink, with </A> marking the end of the hyperlink text.

The string of characters in the HREF field is called a Uniform Resource Locator or URL. It provides a unique identification of any document on the Internet. You can find out more about URLs in the Beginner's Guide to URLs.

Basically the URL specifies the type of information server (here it is http, for HyperText Transfer Protocol, the protocol used by the World Wide Web), the Internet address of the WWW server (www.npac.syr.edu), an optional port number, and finally the pathname of the file containing the document (index.html). In fact, the default file name for the Web is index.html, so in this case we don't actually need to specify a file name. The URL is displayed in the rectangular box marked Document URL in Mosaic (or Location in Netscape), which is located near the top of the browser window.

Note that URLs for hyperlinks are relative to the current document, so that if one HTML file has a link to another in the same directory and on the same computer, only the filename needs to be specified. For example, the hyperlink to an example page in this tutorial is specified by

Your home page should now look something like 
<A HREF="home5.html">this</A>. 

Put in a hyperlink to any Web page you like, for example the home page of your university, company, best friend, or the NPAC home page. Redisplay your home page under Mosaic and test the hyperlink to check that it works. If it doesn't, make sure you have all the right slashes, colons and quotation marks. Your home page should now look something like this. If the URL is incorrect, Mosaic will give an error message saying that it either can't find the document or it can't connect to the server.

One thing you may want to add to your home page is a list of hyperlinks to interesting or fun pages on the Web.

Images

Mosaic lets you include inlined images into an HTML document. People often include a picture of themselves in their home page. That way other Web-enabled people who have similar interests, and so may have seen their homepage on the Web, can recognize them at conferences or parties.

To add your picture next to your name in the header, you need to use the IMG tag, and specify the URL of the file containing the digitized image, as shown below (if you have your own image file, use that, if not just use the URL given in this example). Edit the header line in your home page to be something like the following, by inserting the image display command after the initial header tag <H1> and before the text of the header. This way the text will appear beside the image. If you just put the IMG command separately before the header, the header will appear underneath the image, since headers are always displayed on a separate line. If we do the following, the image will appear as part of the header:

<H1> 
<IMG SRC="http://www.npac.syr.edu/pictures/picture.gif", 
ALT="My picture", ALIGN="bottom"> 
Paul's Home Page </H1>
Only the SRC field specifying the URL of the image is mandatory - the others are optional. ALT gives alternate text for text-based HTML viewers that do not support inlined images (e.g. lynx). ALIGN specifies how the text next to the image (in this case, the header containing your name) is to be aligned relative to the image. This can be top, middle, or bottom (the latter is the default). Proposed extensions used in Netscape allow left and right also.

Note that the digitized picture should be in GIF format to be displayed within the Mosaic window ("inlined"). Some browsers (such as Netscape) can also inline JPEG images, but this is not yet standard. Mosaic can handle other image formats (JPEG, TIFF, etc), but they are displayed outside the Mosaic window by an external image viewing program such as xv, and they are not referenced by the IMG tag, but by standard HREF hyperlinks to the URL of the image file.

Reload the new document and check it out (it should look something like this). If the Web browser can't find the image (i.e. the URL is wrong), it will display the following image instead:

Address

You should always add your address to the bottom of any HTML page you create, so people know how to contact you with questions or comments. There is an <ADDRESS> tag to do this, which in Mosaic just puts the address in italics.

You may also want to separate the address from the body of the document by drawing a horizontal ruled line across the page using the <HR> tag.

<P>
<HR>
<ADDRESS>
Paul Coddington, Northeast Parallel Architectures Center,
paulc@npac.syr.edu
</ADDRESS>
Some browsers support the mailto feature, which provides a hypertext interface to electronic mail. So you could change the line containing your email address to make a hypertext version, as follows:
<A HREF="mailto:paulc@npac.syr.edu">paulc@npac.syr.edu</A> 
Now your home page should look a little like this. Of course this is nothing like how you really want it to look. So go ahead and add whatever you want. Have fun!

You should also check out some tips for writing good HTML documents, and a Style Guide for writing good HTML.


Up to Creating hypertext documents using HTML.
Paul Coddington, Northeast Parallel Architectures Center, paulc@npac.syr.edu. Last updated 24 May 1997.