Learning HTML

About HyperText Markup Language
Structure in an HTML Document
Images, Links and Other Tags
Sample HTML Document
HTML References
Resources on the Web

About HyperText Markup Language

HTML, or HyperText Markup Language, is the method used to change plain text documents into web pages. A markup language is simply a set of tags used to tell the browser how to format the text. In the case of web pages, the browser is a web browser like Netscape or Lynx. The tags are words or letters inside of <> symbols. For example, <BR> is a tag which inserts a carriage return. Most browsers create a blank line where this tag appears.

Many tags come in pairs, with a beginning tag and a closing or ending tag. For example, to make a phrase appear bold, you precede it with <B> and end it with </B>. Tags with a / symbol indicate the end of a section. For example, if you typed:

Only one <B>word</B> will be bold

in a text file, the Web browser would display it like this:

Only one word will be bold

Notice that you never see these tags when viewing pages in Netscape or Lynx. You only see their effect. The text inside tags can be capitalized or lower case or both (<B> is the same as <b>).

Another example of a tag which comes in pairs is the paragraph tag, or <P> </P>. This tag is often confused with the <BR> tag, and is incorrectly used to create carriage returns.

Structure in an HTML Document

HTML documents always should begin with <HTML> and end with </HTML>. Between these two tags, the document should have two sections: the head and the body. The head begins with <HEAD> and ends with </HEAD>, and contains information that does not get displayed on the actual page. The most common element found in the head section is the title, which is the text that gets displayed on the window bar of Netscape or in the upper right corner of the Lynx window. The title is preceded by <TITLE> and followed by </TITLE>. So far, our HTML file should look something like this:

<HTML> <HEAD><TITLE>This is the title</title> </HEAD> <BODY> </BODY> </HTML>

Notice that the different tags do not have to be on different lines or the same line. Spacing does not matter in HTML; four blank lines, one line break, one space, or sixteen spaces all come out looking like one space.

Now we need to fill in the body of the file. The body contains the meat of the page - all the information and images. Usually, the body begins with a headline, so after <BODY> we want to type <H1>Put Some Headline Here</H1>. The H1 tag makes the text as large as possible. We could also use H2 or H3 to make the text slightly smaller.

Images, Links and Other Tags

After the headline we can enter paragraphs, lists, images, and links. Images are stored in separate files (the HTML file is a text file, the image is a gif or jpeg file). You tell the Web browser to load the image using an image tag. Image tags do not come in pairs (there is no closing tag). The format is:

<IMG
SRC="filename.gif" ALT="altnernate text">

. IMG stands for image; SRC stands for source; filename is the name of your gif file; ALT stands for alternate and the text in quotes is the text that appears in place of the image in a non-graphical browser, such as Lynx.

You can link from one document to another using the following format: <A HREF="URL">. A stands for anchor; HREF stands for hyperlink reference; URL is the Uniform Resource Locator of the document you are linking to. For example, <A HREF="http://www.rochester.edu/"> links to the University of Rochester home page. You can link to documents in the same directory by simply giving their filename. For example, <A HREF="index.html"> links to the index file in that directory. The text that follows the anchor tag is underlined and "clickable" up to the closing tag, </A>. For example, a link to the UR home page would probably look like this:

<A HREF="http://www.rochester.edu/">University of Rochester</A>

which would appear as:

University of Rochester

Sample HTML Document

A sample of HTML for a complete web page (using the tags above and some others):

<HTML> <HEAD><TITLE>This goes on the window bar</TITLE></HEAD> <Body> <CENTER><H1>This is an HTML Sampler</H1></center>

<P>Here's some text that will appear normal. Parts of it may be <I>italics</I>. The text will automatically wrap from one line to the next as necessary. Let's start a new paragraph now.</P>

This is some more text, with a link in it to the <A HREF="http://www.rochester.edu">University of Rochester</A>.</P> <UL> <LI>This is an unordered list item. <LI>So is this. <LI>As is this. </UL> <OL> <LI>This is an ordered list item. <LI>So is this. </OL>
</BODY> </HTML>

This would appear as:

This is an HTML Sampler

Here's some text that will appear normal. Parts of it may be italics. The text will automatically wrap from one line to the next as necessary. Let's start a new paragraph now.

This is some more text, with a link in it to the University of Rochester

This is an unordered list item.
So is this.
As is this.

This is an ordered list item.
So is this.

HTML References

There are many, many HTML guides available on the World Wide Web, so I won't try to reinvent the wheel by writing a complete one here. There are also many lists of HTML guides you can refer to, but all of them contain so many guides it is hard to locate the best, most helpful, and most complete. At University IT we recommend A Beginner's Guide to HTML as a very good starting point for beginners. A more complete list of tags and descriptions is presented clearly in the HTML Quick Reference Guide.

It is important to remember that when you are creating Web pages, getting the HTML right is only half the problem. It is just as important to lay out your information logically and clearly. The "look" of your page should not be too busy (it is easy to get carried away with images, backgrounds, and icons). For this reason, it is a good idea to cruise the Web for a while before beginning your actual home page. Decide what you like and dislike about other home pages. Read the University IT style suggestions. Remember that often simpler and shorter is actually better.

When you are in the process of creating your pages, try to look at them on other types of computers. If you usually use a Macintosh, check them out on a PC. Also remember that dial-up modems access pages much slower than computers on the campus network. Many large images make pages painfully slow to load for many people. If you would like someone at University IT to review your pages before making them official, call 275-2811 (Taylor Hall).