Foundation Tags | Document Tags | Lists | Links

As I have already mentioned, HTML is nothing more than a series of codes contained by the < and the > symbols. Any UVa user who has created a home page through the UMenu system will notice that the file home.html is scattered with coded text. These terms are called tags, and each one contains information which the browser reads to identify the structure and layout of the HTML document. The symbols < > and the terms within them are read as code and do not appear on the graphical display of the page. Anyone using Netscape can learn how a page was made by using the toolbar which stretches across the top of the screen. By clicking on the "View" option, and then the "by Document Source" option, Netscape will display the HTML source of the document you are viewing. Try it with this page. You can even save this information by highlighting it, copying it to the clipboard, and then pasting it into a blank document which you can edit and tailor for your own use. If you're out surfing and you can't figure out how someone made their page, just use the view source feature.

HTML is not a complicated computer language; it is easy to understand and even easier to use. The trick behind mastering HTML is understanding that its tags must be arranged in a specific order and exact syntax to operate properly. It is a forgiving medium, but as the official HTML people at CERN, the institute that created the World Wide Web, continue to refine and expand the properties of this language, effective programming requires more exacting attention to detail. The best way to keep up with HTML developments is to grasp the structure of the language and adhere to it as you write your documents. By doing so, you will be able to produce a document that maintains a consistent appearance on the variety of web browsing software currently available.

In this section, you'll learn the basic HTML tags and how they operate within a document. Where possible, we'll include a few of the tags supported by the Netscape browser so that you'll be able to maximize the impact of your document on the most popular web browser available--also the one currently used at UVa.

Four Foundational Tags

All HTML documents contain four essential structural tags which define the layout of the page. These are the <html>, <head>, <title>, and <body> tags.

The <html> tag:
Defines the document as a Hyper Text Markup Language document and always appears at the beginning of any HTML page.

The <head> tag:
Defines the header bar of the page as it appears on the browser. The header is the top bar of the display window where the name of the document appears.

The <title> tag:
Defines the title of the page as it will appear in the header bar. The title tag must be contained within the tag.

The <body> tag:
Defines the body of the document. All text, hyperlinks, images, and any materials which are part of the information you are putting in your web document are a part of the body. The body has many other attributes which we'll discuss shortly, but its basic function is to announce to the browser that all information which follows the tag is to be presented on the web.

EXAMPLE 1

If we make a web page using only the four structural tags, we will see, well, nothing at all. First of all, after the body tag, we have no information to present, and second, these four structural tags, like many others in HTML, work in pairs. When we announce at the beginning of our document that it is an <html> page, we must also tell the browser when to stop reading it as HTML. For this, we use the </html> tag, where the slash means "close." Likewise, we must tell the browser when we're finished with the header and title information by using the tags </title> and </head>. And when the entire document is finished, we must tell the browser that the body information is complete by inserting </body> at the end of the page. In addition to working in pairs, these tags work by being nested within each other in the order in which they are to be executed. <html> and </html> come first and last, respectively, and within these tags, in order, would come the <head>, <title>, </title>, </head>, <body>, and </body> tags, with the information you wish to display falling within the proper pair of tags:

<html>
<head> <title>Example 1</title> </head>
<body>
This is Example 1
<body>
</html>

Click here to view this example.
Return to Top of Page

Document Tags

Pretty boring page, isn't it? Nonetheless, you've just seen the basis of HTML in action. No web page is ever complete or set in stone, however, and that's one of the finest features of this medium. If you change your mind or learn new skills you'd like to incorporate into your page, it's as easy as plugging them in to your existing document. Let's advance the evolution of our sample page by looking at a few body tags which can begin to transform it. In order to do that, start building your own page through the examples which follow in this workshop. I'll provide examples using everyone's friend John Doe to make a bland but functional page for you to follow, but insert your own information (and hopefully your own sense of style and panache) to these examples. By the time you've completed the next three sections, you should not only have some good knowledge of the web, but also a fine home page to show for it.

The first three tags you need to know are the line break tags <p>, <br>, and <hr>. These tags are a part of the HTML features known as autowrapping and autoflowing. Autowrapping describes HTML's ability to "wrap" the text so that it will fit the computer screen displaying it. The Web browser wraps anything that doesn't fit on the current line and puts it on the next line. For example, a paragraph that appears six lines long on a monitor window that is eight inches wide rewraps to about twelve lines on a four-inch window. Autoflowing refers to the way the browser "flows" the contents of a paragraph together from left to right and from top to bottom given the current window or display size. Any line breaks you use while writing text are irrelevant to the browser--unless you use HTML code to break them.

The <p> tag is the most common HTML tag: the paragraph. This tag is currently supported as a single tag placed at the beginning of the text you want displayed as a paragraph, but will soon require a </p> tag, just like the four foundational tags. Paragraph tags are used to mark a block of text and also to insert a "double-spaced" return between paragraphs, images, or other graphics.

The <br> tag works like the paragraph tag, but it only provides a single-spaced return and should not be used to mark up paragraphs.

The <hr> tag, or horizontal rule (sometimes called hard return), is used to display a return as a single line on the browser. This tag is handy when you are delineating sections of your page or are trying to separate two items of information visually. It's a very easy way to add a bit of interest to a plain document. Netscape supports a little enhancement of the horizontal rule by allowing you to specify how wide the bar is and how far across the page it stretches. These specifications are called attributes, and many HTML tags have them. The size attribute defines the vertical width of the bar and the width attribute describes the horizontal length, or percent of the total width of the screen occupied by the bar. Size is represented by values from 1-7 and width as a percentage from 1-99. If, for example, you wanted a line that was size 4 and width 50%, you would phrase the command like this:

<hr size=4 width=50%>

The <hr> tag does not require a close tag--it stands alone and cannot contain any information other than the size and width attributes. I have used this particular <hr> in this document, and you can see it below this text. We'll use it in our sample page in a moment, but first let's look at a few more document tags.


Header Tags

The Header Tags are special mark-up tags that define the size and boldness of special text on your page. HTML cannot control the font size and appearance of your text--these are determined by your browser. HTML can, however, define headers. The header tag consists of an h followed by a number from 1-6, 1 being the largest and boldest of the headings. Header tags work in pairs, with the heading text inserted between the open and close tag. These tags provide structure to your document and are useful when you are presenting information that follows an outline format. They make good guideposts within your document and help to organize your material hierarchically.

This is <H1>, good for page titles and primary headings


This is <H2>, which makes a great subheading size


This is <H3>


This is <H4>


This is <H5>

This is <H6>

As a general rule, use these headings consistently to help add structure and interest to your document. Heading levels should be used in increments or decrements of one size when used together in a document. In other words, using H1 as the title of your page followed by H2 with your name and email and then h3 as the header for the contents of your page would be a tasteful use of headings. Using all six on one page with no apparent logic to their use and arrangment would probably be considered bad style. Headers are good for Outlines, Essays, and Tables of Contents.


Text Tags

You can use HTML to emphasize text just as you would in a word processor. Official HTML tags can italicize, make bold, change font style, and preserve preformatted text in its original form. Each of these tags works in pairs, with an open and close tag, as follows:

Bold Text: <b> text </b>
Italics: <i> text </i>
Typewriter Text: <tt> text </tt>
Citation Markup: <cite> text </cite>

Blockquote text is handy for quotations
and paragraphs which you are positioning alongside
images in the document. The code for this is
<blockquote> text </blockquote>.

This is preformatted text.
  It reads tabs and returns the way you enter them and 
	can also read tables or column lists without distorting them.
		Command code is <pre> area you want to preformat </pre>.

Centering is not an official HTML command yet, but Netscape does support it. The code is <center> text </center>.

These are the basic text commands, although there are others and there are also alternate commands for some of the above, but as long as you remember these, you'll be able to make web documents. Now that you've got a handle on these commands, let's return to our bare bones page and see if we can't spice it up a bit.

EXAMPLE 2

<html>
<head><title>Example 2</title></head>
<body>
<center>
<h1>John F. Doe</h1>
</center>
<p></p>
<hr>
<p>
Welcome to my home page. This page is only the beginning of what will <i>soon</i> be a knock 'em dead web site. This site will constantly be <b>UNDER CONSTRUCTION</b>, so please drop by and check out the latest developments. </p>
<p></p>
<center>
<h2>Contents</h2>
<hr size=4 width=50%>
</center>
<p></p>
<h3>
<pre>
Resume<br>
Portfolio<br>
Personal<br>
Web Links<br>
</pre>
</h3>
<p></p>
<center>
<hr size=4 width=50%>
Maintained by John F. Doe<br>
Last Update: February 20, 1996<br>
</center>
</body>
</html>

View this example
Return to Top of Page

Lists

HTML provides the opportunity to create special kinds of lists so that you can emphasize special information and present it in an organized format separate from the text paragraphs. The three principal list formats are the Ordered List, the Unordered List, and the Definition List.

The ordered list is signalled by the command <ol> list items, each preceded by <li>, and the entire list is closed with the </ol> command. Each separate list item will be identified by a number, as the following indicates:

<ol>
<li>This is
<li>an ordered
<li>list
</ol>

Which then appears as

  1. This is
  2. an ordered
  3. list

The Unordered List works exactly the same way, except the numbers are replaced by bullets. The unordered list command is <ul>, list items, each marked again with<li>, then closed with the </ul> command. It appears like this:

If you have a list of data or terminology of any kind which requires explanation or elaboration, the Definition List provides a perfect layout. It has a few more terms and steps than the simple lists above, but may be better suited to some work than the ordered and unordered lists. The three commands you need to know for this list are the opening command for definition list, which is <dl>; the introduction of the term you want to define or explain, or defintion term, <dt>term</dt>; and finally, the command for the indented definition, or datum description, <dd>definition</dd>. The completed list is then closed with the </dl> command.

<dl>
<dt>Term X</dt>
<dd>Definition of Term X</dd>
<dt>Term Y</dt>
<dd>Definition of Term Y</dd>
<dt>Term Z</dt>
<dd>Definition of Term Z</dd>
</dl>

Which appears as:

Term X
Definition of Term X
Term Y
Definition of Term Y
Term Z
Definition of Term Z

It is important to close each command because as you can see, the definition list reformats the page to accomodate the terms and descriptions. You will find that not closing the terms will distort the remainder of your page. You can put any of these lists on your home page, or any subsequent pages, where they may be appropriate for your information. I'll add a list to one of my sample pages in a moment, but first you may want to know one more crucial piece of HTML: the art of the hyperlink.

Linking

The link is the primary feature of hypertext and is central to the organizing principle of the World Wide Web. The link allows users to travel from one document or information site to related (or sometimes completely unrelated) sites with the click of the mouse. You can link from one page, site, server, or continent to another through the structure of the hyperlink, and all this travelling power comes through one simple command, the Anchor tag.

External Linking

You have already done some linking on this site, and if you check the source of this document, you will see that the various links strewn throughout this workshop consist of nothing more than text confined within a tag that looks like this:

<A HREF="name.html">text or word that is highlighted as link</A>

This tag is known as the anchor tag, and it is the key command to linking. The HREF, or hypertext reference can be another web site, a document or image in your own public_html file, or even another place on the same page. For instance, when you clicked on a choice at the top of this page, a HREF command brought you to one of these tag sections. Typically, the anchor tag encloses a word, phrase, or image that will serve as a link, but it can enclose as much text as you feel is appropriate. The structure of the tag is simple. The initial A in the tag denotes that what follows are instructions to link to another location, anchored by the A and the /A tags. The HREF announces the web address, which must fall between the quotes. The address, if it is another site, for example, the Yahoo Search page, would appear like this:

<A HREF="http://www.yahoo.com/">Yahoo Search Engine</A>

When the web address is one that is outside of your own files, the address must begin with the proper protocol, which in this case is http. If you were linking to one of the other parts of the Internet, such as newsgroups or gopher document archives, you would begin the address with their protocols, "news:" and "ftp://" respectively. If the address is simply another page in your own files, "resume.html", for example, the browser assumes that this file is on your server and in your account. The link could be written like this:

<A HREF="resume.html">Resume</A>

The Netscape "Mailto" Tag

One more HREF feature is actually a Netscape extension called the mailto tag, used to highlight your name or a particular line of text as a mail tag. The user can click on this text and, if the Netscape Mail Preferences have been configured (under the Options selection on the toolbar), a mailbox will open up, already addressed to you. This feature allows people to respond to your page or make comments and suggestions while they're on your site. It's so useful that it's almost a requirement for a good web page. The command works just as any HREF command, but you need the mailto: tag, followed by your email address:

<A HREF="mailto: your address@email.here">Your Name, Company Name, or other text here</A>

Internal Linking

Linking within the same page requires a few extra commands. As with external linking, you need to establish an anchor tag around your link. Your targeted page, however, is the same page on which the link appears. Therefore, if you have a page called "links.html," which is a page of your favorite internet sites and resources, divided by category. At the top of the page, you want to list the categories and allow users to link directly to the category without scrolling through the page. In order to establish these links, you need to know another command, called the NAME command. The NAME command allows you to, well, name the place on the page you want to people to reach through the link. If, in our links.html page, we divide the categories into Page Building, Cultural Sites, and Fun Sites, then we have to name each one of these places on the page.

The best place to give each spot its own name is at the title of each category on the page. When we type the heading "Page Building," we should also insert the NAME command around it. Let's call this category "page." We would enter the name like this:

<A NAME="page"><h2>Page Building</h2></A>

We can do the same for Cultural Sites, which we'll call "culture," and Fun Sites, which we'll call "fun." Now we've got all of our categories named, we need to name the link properly so that it takes people to the right place on the page. In your HREF command, you need to tell the browser the page it has to find--it does not automatically assume that the link can be found on the current page. Therefore, we must tell it to look on the "links.html" page for an item with the name "page." The way we phrase that in HTML looks like this:

<A HREF="links.html#page"><h2>Page Building</h2></A>

This command will tell the browser which page to search for the location called(#) "page." You may have noticed that I have put "Return to Top of Page" links on this page. This works the same way. I named the list of page contents (underneath the red image at the top) "top," and just used that in the NAME command. When I linked back to the top, I just made my HREF="html3.html#top", therefore allowing you to move where you need to go on the page by having access to that navigation list.

The HREF commands are simple ones, but as with any HTML command, syntax is crucial to the smooth operation of your pages. Every bracket, slash, and quotation mark must be in the proper place or the browser won't read your information correctly. Be careful as you write your documents.

MISSION 1

You're ready to put all this knowledge to the test!

Course Assignment Suggestion
Return to Top of Page



Sponsored by the American Studies Group at UVA ©1996
Maintained by Joshua Johns