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.
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.