Interactive Media Center
University Library, University at Albany

About HTML/XHTML
Technique
Tools
Web vs. Print

Getting Started
Setting Up the Basic Code
Adding and Formatting Text
Nesting Tags
Advanced Text Formatting
Color and the Web
Headings
Lists
Links
Layout and Tables
Advanced Table Formatting
Images
Putting It All Together
Adding An Image
Adding A Simple Table
Main Body Information
Finishing Touches
If You Continue On...

Headings

Headings are some of the objects on a Web page that HTML and XHTML are intended to identify. Heading tags that are used to specify importance and are defined by using the "h" tag. There are six heading tags ranging from 1 to 6 with 1 being the most important and 6 being the least important.

Imagine that you are making a traditional outline for a paper or article you are writing. It might look something like this:

I. Introduction

A. Welcome

II. Main Message

A. Part 1 - What I did on my summer vacation.

1. Getting to the airport

2. Flying on the airplane.

a. Visiting Alaska.

b. Seeing a bear.

3. Flying home.

B. Summing my vacation.

III. Conclusion

The most important parts of the outline are in Roman numerals, the second most important parts are noted with capitalized letters, and so on. Headings follow a similar pattern. The most important h1 would be comparable to the Roman numerals, the h2 would would be second most important as is the capitalized letters. This continues on down through the h6 tag.

Heading tags are container tags, and their format is illustrated below.

<h1>This is heading H1</h1>

 

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>This is an example of the h1 tag.</h1>
</body>
</html>

When the h1 tag is used in a Web page, the code will resemble the example on the right. You can see what the it looks like on a actual page by clicking here.

 

Lists

Lists are also objects that HTML and XHTML are intended to define. The code allows you to specify two types of lists, ordered lists and unordered lists. The primary difference between the types is that the ordered lists indicate importance and unordered lists only indicate that the data is a list, no importance is intended.

The list tags are container tags, but they each have two parts. Part one indicates whether the list is ordered or unordered. Part two is the item in the list itself. Below is an example of an ordered list.

  1. Dinner at 8:00 pm.
  2. Lunch at noon.
  3. Snacks at 11:00 am.

This list indicates that the most important item is dinner at 8:00 pm, the second most important is lunch at noon, and the least important item is snacks at 11:00 am. The code snippet for this list is shown below.

<ol>
<li>Dinner at 8:00 pm.</li>
<li>Lunch at noon.</li>
<li>Snacks at 11:00 am.</li>
</ol>

Notice that each item is inside the list item tag, <li></li> and that the whole set of list items is within the ordered list tag <ol></ol>.

An example of an ordered list is below.

This unordered list does not indicate which fruit is most important. The code snipped for this list shown below.

<ul>
<li>Apples</li>
<li>Oranges</li>
<li>grapes</li>
</ul>

The unordered list tag is <ul></ul>, and as with the ordered list, each item is within the list item tag, <li></li>.

Many people will use the ordered and unordered list tags for presentational purposes. In other words, when they are not interested in actual lists, but want a group of items with bullets in front of them they will use the unordered list tag. When they want numbers instead of bullets they will use the ordered list. This is not good Web practice. List tags are specifically intended to specify lists and not how something looks. This may seem like a trivial point, but there are situations (such as with search engines) that using a list tag incorrectly can cause problems.

In the examples above, if the ordered list tag is used inappropriately, the code would be telling a search engine that oranges are the most important thing on the list when that is perhaps not the message that was desired. It may be that the page designer merely wanted a set of lines with numbers in front of each and had no intention of indicated the importance of oranges. This could cause the page to come up unsatisfactorily when a search is performed.

Links

Links are the most important part of the Web. In fact, the whole premise of the World Wide Web is the ability to link from one document to another. Now, of course, links lead from one site to another, and to specific points within a site.

There are two types of links, absolute and relative. All link tags are container tags.

The way to think of an absolute tag is that it tells exactly where a browser should go by following all the necessary paths. They are used when you link from one Web site to another. Relative links (sometimes called "local links") just tell the shortcuts.

Let's say that we want to make an absolute link to the University at Albany's Web site. The link is inside the A tag and would look like this:

<a href="http://www.albany.edu">Link to UAlbany</a>

Roughly translated the link says that the browser should use hyper text transfer protocol (that what the "http" in a Web URL means) to go to the World Wide Web and find the Web site of called "albany.edu."

You can try it by clicking here.

Relative links leave out all the "http stuff." They say that instead of going to the World Wide Web the browser should just stay "in the neighborhood" and get a page. A good example is a link to the previous page of this tutorial. This is page 5, and let's say that you want to create a link to page 5. It would be:

<a href="page4.html">Previous Page</a>

This relative link tells the browser to go to "page4.html" without going "out" to the Web and coming back into the University's Web site. You can try it by clicking right here.

You can also link internally to a Web page by using the anchor tag. The anchor tag allows you to jump to a point on a page. We have an anchor called "top" installed on this page. The code for the anchor point is:

<a name="top"></a>

The link to it is:

<a href="#top">Go to the top of this page</a>

Try it! Go to the top of this page.

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<a name="top"></a>
<p>Welcome to my Web page. You can go to the top of the page by <a href="#top">by clicking here</a></p>
</body>
</html>

The example on the right shows how this might be coded into a Web page.

Note: An anchor tag always has a "#" at the beginning.

 

 

 

You can add include an anchor point in an absolute or relative link. The relative link to this page's top anchor point is:

<a href="page5.html#top">Top of Page 5</a>