Handouts » HTML Handouts » HTML Guide

A Guide to HTML
(HyperText Markup Language)


About Web Pages

The Web Directory Location
These files must reside in your public_html directory. The name of this special directory can vary - it's chose by the system administrator at your web host. But public_html is the most common. Your pages must be placed in this special directory. If they're placed in a different directory, no one can see them.

Naming Files
There are two issues to keep in mind when naming web page files: the filename extension and the home page. The file name of any web page must end with the extension .html and be created as ASCII text (ie, plain text, not containing formatting by any word processor). Some web hosts require the extension .htm as an alternative.

The Home Page is a special concept. A web site Home Page is usually the "introduction" to the site. It's the front door, the first impression and ultimate guide to the site's content. The Home Page must bear a special file name, and this name is usually index.html. Some web hosts choose to use a different file name to identify the Home Page, default.html or welcome.html - it does vary and you'll need to check with your web host to discover which naming convention should be used.

What purpose does this special filename serve? It allows a person to omit a file name from a URL. Compare the following two URLs:

http://theflyingcat.com/
http://theflyingcat/paula.html

The first URL contains no file name, so how does the web server know what file to deliver to you? It knows that if no file name is specified it should "default" to the file named index.html (or whatever default file name has been chosen). The second URL does contain a file name, paula.html, and that file will be delivered to you.

Aside from the Home page, you may name your web pages any way you choose (provided of course that you include the .html extension).


A Sample HTML Document

<html>
<head>
<title>Enter the URL title here</title>
</head>
<body>
<h1>Enter the large heading for the page here</h1>

Enter your text and such here. This will be the main section for your web page.

To make an indented section, use <ol> for a numbered list or <ul> or an unnumbered, bulleted list. It is the <li> tag that causes the number or bullet to appear.

<ol>
<li> Begin each line to be indented and numbered or bulleted with the <li> tag.
<p>
<li> If you don't use the <p> command to insert a blank line between entries they will appear flush against each other.
<p>
<li> The hunter carries a <a href="http://www.cs.unca.edu/~edmiston/tool.html"> bag of tricks</a>containing a handy collection of tools.
</ol>
<p>
When you are finished with the list, turn off the list command.
<p>
<pre> 

The text inside a <pre> tag will appear in a courier font.
</pre>

The <pre> tag allows you to insert a bit of white space on a page. This can be useful to create a sense of separation between sections. The </pre> tag is more traditionally used to freeze text in place which allows you to create easy columns and other specifically spaced text. The down side of </pre> is that it uses a courier font which can be unattractive.
<p>
<hr>

<p>

Here's how to allow people to send you email right off of your web page.
Send email to <a href="mailto:samwise@samwisefish.edu">edmiston@cs.unca.edu</a>
<p>

This URL: http://www.cs.unca.edu/~edmiston/htstart.html <br>
Return to <a href="http://www.cs.unca.edu/~edmiston/">Paula Edmiston</a>

</body>
</html>


About HTML

The first thing to understand about HTML is that is doesn't recognize white space. You can beat on the space bar all day and still wind up with a document that's looks like somebody ripped off all your carriage returns! Web browsers ignore blank spaces and carriage returns. There are a couple of ways to deal with this.

A web page contains two parts: the head and body. The head is used to contain special information about the document. We will address only the title tag inside the head. The body of the document is where all of the content of your page is placed.

To insert a blank line between paragraphs use the paragraph tag: <p>. I generally put it on a line by itself as a visual aid to my human eye when I'm editing the document, and it's very helpful to have it on a line by itself when troubleshooting. You are free to place it at the end of a line as well (or in the middle of a line for that matter).

You can create a simple list with the break tag: <br>. This inserts a break in the line so that the next text you enter will appear in the line directly below. The difference between this <br> tag and the <p> tag (which both break the line) is that the <p> tag inserts a blank line after the break; the <br> does not.

The major problem I've run across in creating a web page is the differences in the way various browsers present web pages. Some browsers produce and effect for every HTML command, some just ignore them. Put special effects in, but don't come to *rely* on them. Always consider the text browsers.


HTML Tags

The basis of HTML is the tag command. These commands are always placed inside pointy brackets: <p>. Some commands are used in pairs, ie, the first command turns on the effect, the second one turns it off. Some commands are not paired. These tags are used in much the same way as formatting commands in word processing programs. The text inside the pointy brackets (<tiTlE> <H1> <htmL>) can be entered as upper case, lower case, or mixed case, it doesn't matter, the web browsers reading the tags are case insensitive. I try to be consistent, I use lower case because it's easier to type.

There are many web browsers in use and they all interpret tag commands differently! Generally speaking, if a browser is unable to use a tag, the tag will be ignored. There are a few tags you must use.


Essential Commands

<html> </html>
This command always goes at the top of the document <html> and at the bottom </html>. It "opens" and "closes" the document. These are the first and last lines.
<head> </head>
Goes at the top, encloses the <title>
<title> </title>
The title is the second item in the document. It is often used in conjunction with the URL and is often a searchable field for webcrawlers and spiders. So be sure to put relevant words here. It will appear in the upper right corner of a lynx screen, along with pagination. It appears at different places on the screen under other browsers. The title tag can contain up to 64 characters.
<body> </body>
The open body tag comes immediately after the close title tag. The close body tag comes at the end of the document just BEFORE </html>. The </body> tag will always be the penultimate line (ie, next to the last). The body tag is an essential tag to understand. This where you set colors for the page and assign a background image.


Subpages and Linked Pages

To make a subpage, just create a new file, with the extension .html and link it to your main page with an ordinary link command:

The hunter gazes out over the endless stretches of the <a href="http://www.cs.unca.edu/~edmiston/dream.html">desert</a>.

The reader of the page will see this:

The hunter gazes out over the endless stretches of the desert.

In this example the file being linked is named desert.html and the highlighted text that is the selectable link is the word desert. Notice that it doesn't matter where the line is broken. All web browsers will see this as a single line. Just be careful to maintain a single blank space between the <a and the href.

All subpages you create should have the traditional footer (see above) and they should include a return link that takes people back to your main page or the page that provided the current link. A Return-To link looks like this:

Return to <a href="http://www.cs.unca.edu/~edmiston/">Paula Edmiston</a>.

And is seen as ...
Return to Paula Edmiston
Where the bold words are the hyperlink.


Unpaired commands

<hr> Centers a ruler line on the screen.

<hr size=5>

<hr size=10>

<hr width="50%">

<hr align="right" width="25%">

<hr noshade>

<hr width="25%" noshade size=5>

<p>
The paragraph mark. Inserts a blank line.
<br>
Line break. Inserts a line break, ie, starts a new line with the following text. Does not insert a blank line.
&nbsp;
A blank space. You can repeat this tag for more space.


Paired Commands

You can make the paragraph tag into a paired tag by including alignment commands:
<p align="center">centered text here</p>
<blockquote> </blockquote>
Used to indent both left and right
<blockquote> </blockquote>
Indents the text from both left and right. You can nest this tag to increase the indentation.
<em> </em>
Italics in a graphics browser and underlined in a text browser. I prefer this command to <i> </i> because the em tag is recognized by more browsers.
<strong> </strong>
Boldface in a graphics browser; underlined in a text browser. I prefer this tag to <b> </b> because the strong tag is recognized by more browsers.
<h1> </h1>
Formats the text as header level 1. In lynx the <h1> tag centers the text in all caps. In other browsers it appears large, bold and centered. These header levels go down to <h6>, the smallest.
You can insert formatting commands into the heading tag:
<h1 align="center"> </h1>
<center></center>
Centers text in some browsers.
<pre> </pre>
Lets you absolutely control text placement. But in a graphics browser the text looks like courier font. Kinda ugly. Pre means 'preformatted'. The browser does not interpret the text, just displays it.
<!-- any text -->
This is a private comment. The frame: <!-- any text --> surrounds the comment, which will not be displayed in a browser.
<font size=9> </font>
The font size tag lets you choose a point size without using the <h2> commands. The advantage of the font command is that, unlike the H commands, it does not insert a blank line above and below the text. Font sizes range from 1 (one), tiny on up past 9, very large.
<font color="#999999> </font>
The font color tag changes the color of plain text in a document. Use this command very little or not at all. Nothing looks worse on a pages than a wild, random selection of colors. I recommend you do not use this command at all, as it makes identifying link colors very difficult.
Combining font tag attributes
You can include several font tag attributes in one tag.
<font face="comic sans ms" size=+1>Funky Text<font>
<tt> </tt>
The tt command makes text appear as in a courier font. This command is often used to format email address and other text where the appearance must be exact. (tt = typewriter font)
<pre> </pre>
Like <tt> formats text with a courier/typewriter font. But this command will format entire files of text, freezing it in place. Useful for adding a lot of blank space to separate sections.


List Commands

There's a rather extensive handout on HTML list commands available to help you sort this out.


Embedding Links in Your Page

A note on link text

The highlighted text that you select to open a link is called the "link text". Choose your link text with care. Never make the link text "click here". Instead, make the link text descriptive of the document, or page, that is about to open. It is important that the text on your web page flow and read as natural language. Never make the link text sit awkwardly in a sentence. It takes practice to craft a sentence that reads well and yet contains appropriate, descriptive link text. Antonio Rossin's page is a good example of appropriate link text.


Entering a hypertext link

The <a href="http://www.cs.unca.edu/~edmiston/csci121.html">Internet Class Syllabus</a> contains links to required readings.

The person browsing the page will see:

The Internet Class Syllabus contains links to required readings.

The boldfaced words are the link.


About Graphics: Entering a Picture

Making a graphic image appear on your page is called setting an inline graphic

<img src = "images/cat.gif" width=102 height=139 align=right alt="The library Cat">

The Library Cat Use the ALT command for browsers that can't display graphics. People in a text browser will see the word(s) associated with the alt: The Library Cat. People with a graphics browser will see your graphic of the cat (which is the file named cat.gif, held in a subdirectory named images). Always make the alt text descriptive of the function of the images, not descriptive of the image.

It is often appropriate to enter a blank alt statement , as in ... alt="". If the image is "eye candy", then it's not appropriate to include text in the alt statement. But if the image adds significantly to the content, enter text inside the double quote marks.

Anytime you include an image on a web page you should also include the width and height attributes as well as an alt statement. How do you determine the width and height of an image? There are many graphics programs that will give you the figures. You can open the image in Netscape and view these figures in the title bar of the window. Click the right mouse button ON the image and select View image.

You can use a graphic image as a hyperlink In the example below, the image the of the cat is a hyperlink to the web page about the Library Cat, named libcat.html.

<a href="libcat.html"><img align=left alt="The Library Cat" width=102 height=139 src="images/cat.gif"></a>

The Library Cat Notice the border around the image; this is a visual indication that this image is a hyperlink. You can omit the border by setting the border attribute to zero:

<a href="libcat.html"><img align=left alt="The Library Cat" width=102 height=139 border=0 src="images/cat.gif"></a>


Entering a gopher

The <a href="gopher://gopher.unca.edu/">UNCA Gopher</a> offers a calendar of on campus events.

People will see the line this way:

The UNCA Gopher offers a calendar of on campus events.


Entering a telnet

Telnet into the Atlanta Fulton Public
Library <a href="telnet://afplpac.af.public.lib.ga.us">Catalog</a> to find something good to read.
This line will appear as:

Telnet into the Atlanta Fulton Public Library Catalog to find something good to read.

A telnet link using a port number:

The oldest, and most famous moo on the Internet is <a href="telnet://lambda.moo.mud.org:8888">LambdaMoo</a>.

The oldest, and most famous moo on the Internet is LambdaMoo


Entering an FTP

Some sample files are available at <a href="ftp://ftp.cs.unca.edu/pub/davidson/class">Paula Edmiston's FTP site</a>.

Some sample files are available at Paula Edmiston's FTP site


Usenet Newsgroups

Usenet Newsgroups follow a different pattern in the URL. The double slashes following the colon are omitted (but the colon is retained). For example

Notices of academic import are made available in the <a href="news:unca.csci">unca.cscil</a> newsgroup.

Notices of academic import are made available in the unca.csci newsgroup.


Mail Links

The following entry will allow people using a variety of browsers to send you an email message directly from your web page. This command is not supported by some web browsers.

Send comments about this web site to <a href = "mailto:samwise@samwisefish.com">samwise@samwisefish.com</a>

The above tag produces

Send mail to paula

Be sure to enter your complete email address where noted. Notice your email address is also used as the link text. It's a good idea to use your email address instead of your name because some people are using web browsers that don't support the mailto tag, or they just prefer to use a different email program. These people will still have an email address they can use in their regular email program.


Remember

Web browsers ignore blank space and carriage returns. You must use <br> or <p> to force end of lines or to add a blank between paragraphs. You cannot really indent text. But you can use the blank space tag, &nbsp; to create a blank space.

The most useful thing I have found is to "view the source" of pages I come across. In lynx you can view the source with the \ (backspace key). It is a toggle; enter \ to view source, enter \ again to return to the formatted version. In Netscape, open the View menu and select "View Source". You can mail documents to yourself; in graphics browsers be sure to select the format you want: text or html code. The default in Netscape is HTML code! So you must select the "attachment" button and correct the option to plain text.


Checking Your Web Page for Accuracy

I've recently discovered and adore a marvelous tool that actually checks web pages for HTML errors! Dr. HTML checks for HTML problems as well as spelling errors and broken links!


Troubleshooting

What if you don't see your changes?
Is the URL correct? Check that to confirm you are on the right page. Did you click on the browser Reload button? Your browser will not be aware of any changes you make. Clicking on the Reload button causes the browser to "refresh" it's view of the page. Sometimes you need an extra strong reload, if so, try Shift-reload. That means, hold down the Shift key while you click on the Reload button.

Blank Page
If your page appears blank, but you know there should be content, you may be using the table tag and have an error in your table tags. The lack of a single tag can cause the entire page to appear blank!

Inappropriate Underlining
Everything underlined and appearing as a hyperlink? This can come from an error in a link tag. Check to be sure the quote marks are in place and the close tag is correctly written.