HTML: A Basic Guidesheet

By Peter J. Kastor

Topics (click on any topic to proceed directly to that subject):
  • HTML Basics
  • Advanced Tags Linking Documents

    HTML Basics

    Introduction: What is HTML

    HTML stands for "HyperText Markup Language." This is, in fact, a deceptive title. HTML is not so much a computer language as a set of conventions, a way that you can mark of text in such a way that it can be interpreted through the World Wide Web. You can create HTML documents on any computer using any word processor.

    Important Terms for Understanding HTML

    HTML involves a few terms that are unfamiliar or occasionally confusing. They are important, however, for understanding the relationship between HTML and the World Wide Web:

    Viewer or Browser: These terms mean the same thing, and they refer to a piece of software that enables you to look at things on the World Wide Web. Netscape is the most famous browser. Another common one is Mosiac, which works in much the same way. Independent companies like America On-Line and Compuserve have their own Web browsers. Text or ASCII: Another pair of synonymous terms, they refer to the basic set of characters that people use to write documents. Although you can create HTML documents on any word processor, you must always save them as ASCII, which preserves the letters that you have typed, but looses all of the special coding from your particular word processor. Each word processor does this in a slightly different way. But all start with the same action. Click on "Save As". Most word processors include a window that says "Type", and usually lists the name of the word processor. If you click on this window, you will see a series of options. One of them will be ASCII text, Text, or Text only with line breaks. Select any one of these, but "Text only with line breaks" works the best, since it preserves the basic margins of the document.

    Principles of Tagging

    Word processors have ways for you to mark text. Function keys, buttons, and menus enable you to indicate font changes, special characters, etc. HTML requires you to type that information manually. Every tag resides between the < and> keys. Whenever a viewer sees those two keys, it assumes that they contain a tag. If the viewer does not understand the tag, it will ignore it. Tags never appear on the screen, whether the viewer understands them or not.

    Tags fall into two categories: open and closed. Open tags are a one-shot deal, a single tag indicating a single action. Closed tags are far more common and come in pairs. One tag tells the viewer when to begin an action, the other tells it when to stop.

    Tags can be upper or lower case. They can come one after another, or they can appear on separate lines. The viewer will not show the tags, and will ignore any extra hard returns that you insert. Instead, it will look for specific tags that tell it when to begin paragraphs.

    Basic Tags

    Mandatory tags for all documents

    Every HTML document begins and ends the same way. It must start with a tag that says < html> and end with one that says < /html>. This is a classic example of closed tagging. The first tag tells the viewer that this is an HTML document. The second tag tells the viewer that the document is finished.

    The next required are as follows:

    < head>
    < title></title>
    < /head>
    < body>

    Whatever you type between the <title> and </title> tags will appear in the bar at the top of your viewer. It will not appear in the document itself. Everything after the <body> tag will appear on the screen.

    Common Formatting Tags

    Once you are in the document itself, you are most likely to use the following tags:

    < p> < /p> Beginning and end of paragraphs. These tags will put a double-return between each paragraph.
    <b> < /b> Bold text
    <i> < /i> Italicized text
    < hr> A solid horizontal line running the width of the screen
    < br> A break from one paragraph to another, without the double-return in the <p> </p> construction.

    Here are some examples:

    This is bold text
    This is italicized text
    This is a horizontal rule:

    Another common formatting tag is a "header" tag. These tags are written as < h1> through < h6>. They indicate particular font sizes. < h1> is a big, bold font, while < h3> is slightly bigger than standard bold text. < h4> through < h6> are smaller than standard text.

    This is H1

    This is H2

    This is H3

    Advanced Tags

    Inserting Images

    You can insert an image at any point. The tag is simple: <img src="">. Most Web browsers will show two, cryptically-named image formats, designated by the suffix ".gif" and ".jpg". Only gifs can appear on the screen along with text, and all gifs must include a .gif suffix. So in order to show an image on the screen, you would type:

    <img src="image.gif">

    You must use the quotation marks, and the image name is case- sensitive.

    Ordered and Unordered Lists (Outlines and Bullets)

    "Lists" in HTML take two forms: bulleted lists and numbered outlines. Both use the same conceptual framework.

    Every list begins with one of the following tags:


    <ol> stands for "ordered list," and refers to a numbered outline.

    <ul> stands for "unordered list," and refers to a bulleted list.

    These tags begin the process. By themselves, however, they are not enough. You need a tag that tells Netscape where each line begins. To do this, you will use the following tags:

    <li>Line number 1
    <li>Line number 2

    Notice that you do not need a </li> tag at the end of each line, but you do need a </ol> or </ul> tag at the end of the list. The <li> tag will indent the line and insert a number. In this case, for example, it would actually appear as follows:

    1. Line number 1
    2. Line number 2
    You do not need to manually indent each line. Netscape will do that for you. If you did this list with bullets, you would write it as follows:

    <li>Line number 1
    <li>Line number 2

    It would appear as follows:

    You can make these lists as long or elaborate as you wish. You can include subsections, just as you would with any outline. In order to do this, you will simply create concentric circles, as one lists exists within another. For example, if you wanted to show the outline for a paper, you could write the following:

    <li>First section
    <li>Thesis statement
    <li>Second section
    <li>Discu ssion of illustrations

    In order to make this work, the critical thing to keep in mind is that every <ol> must have an accompanying </ol>. Otherwise, Netscape will not be able to indent properly.

    This list would look this way on Netscape:

    1. Introduction
    2. First section
      1. Thesis statement
      2. Examples
      3. Conclusion
    3. Second section
      1. Illustrations
      2. Discussion of illustrations
    4. Conclusion
    You could do the same with an unordered list. Instead of using numbers, letters, and roman numerals to describe different levels of the outline, and unordered list would use bullets, squares, and circles. 


    Tables work in much the same way as ordered an unordered lists; one tag begins the process, while other tags indicate other elements. Every table begins with < table> and ends with < /table>. All of the material for the table must exist between those tags. The standard <table> tag will put a thin line around the table. You can add special formatting, however, but adding specifications to the tag. For example, a tag stating <table border=4> will add a four-pixel border around each element on the table. The </table> tag remains the same regardless of what you put in the <table> tag.

    Each line of the table then begins with < tr> and ends with < /tr>. Finally, each element within that line is preceded by a < td> tag. You do not need to use a < /td> tag.

    For example, if you're creating a table that lists the name, age, and eye color of three people, the HTML would appear as follows:

    < table>
    < tr> < td> Joe < td> 40 < td> blue < /tr>
    < tr> < td> Sue < td> 38 < td> gray < /tr>
    < tr> < td> Dave < td> 43 < td> brown < /tr>
    < table>

    This is how the table will appear on the Web:
    Joe 40 blue
    Sue 38 gray
    Dave 43 brown

    Linking Documents

    One of the most dynamic elements of HTML is the ability to connect documents. The connections are called "links" and they fall into three general categories: connecting two documents in the same directory, connecting two documents in different directories, connecting one part of a document to another

    The tags for links begin the same way: < a href=". The "href" stands for "hypertext reference", and is a reference to some other document or part of a document. What follows varies from case to case. The < a href=" tag begins the hotwiring process. Everything that appears after this tag will be blue and underlined, and will continue to be so until you type a < /a> tag.

    All links are case-sensitive. Whatever you type in the quotation marks must replicate the upper- or lower-case characters you use in the name of the other document.

    Anything can form the clickable part of a link. You can use text, images, or a combination of the two.

    Connecting Two Documents in the Same Directory

    This is the simplest kind of link. The refer tag simply refers to a file name. For example, if you were writing a "home.html" document and you wanted a link to a file called "file.html", you might write it this way:

    Click < a href="file.html"> here< /a> to see another file.

    Notice that you do not need to say "home.html" anywhere. Netscape already knows what it is on the screen. It just needs to know where to go.

    Connecting Two Documents in Different Directories

    This kind of link works in much the same way as a link within one directory. You simply need to provide more information. Suppose you wanted a link to the main UVa Web page. The tagging would look like this:

    Click < a href=""> here< /a> to go to the main UVa Web page.

    This structure works for any location. You can link documents in different directories of your own account, or link your document to something in another country. All you need is the full URL address.

    Connecting One Part in a Document to Another

    This is the most complicated form of link, since it involves two steps. First, you must create a link, something that people can click. Second, you must create an anchor, something that tells the link where to go. Other links do not require an anchor, because they automatically go to the beginning of a document.

    This sort of link is at work in this very document. It connects the table of contents at the beginning to the subsequent sections. For example, the first link is for "HTML Basics". The full tagging structure appears as follows:

    < a href="#basics">HTML Basics< /a>

    The critical element in this tag is the #. It tells Netscape to look for a particular location. More specifically, it will look for the following tag:

    < a name=basics> < /a>

    Note that this tag does not require quotation marks. More importantly, it cannot include a # symbol. Instead, the tag simply repeats whatever you typed after the # in the link tag. When someone clicks on "HTML Basics", Netscape will take them to the < a name=basics> < /a> tag.

    Go to the beginning of this document and try the links to see how the link-and-anchor system works.