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.
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.
Inserting Images
You can insert an image at any point. The tag is simple: <img src="image.name">. 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>
<ul>
<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:
<ol>
<li>Line number 1
<li>Line number 2
</ol>
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:
<ul>
<li>Line number 1
<li>Line number 2
</ul>
It would appear as follows:
<ol>
<li>Introduction
<li>First section
<ol>
<li>Thesis statement
<li>Examples
<li>Conclusion
</ol>
<li>Second section
<ol>
<li>Illustrations
<li>Discu ssion of illustrations
</ol>
<li>Conclusion
</ol>
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:
Tables
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 |
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="http://www.virginia.edu/"> 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.