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.
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
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:
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
<title>Enter the URL title here</title>
<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
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.
<li> Begin each line to be indented and numbered or bulleted with
the <li> tag.
<li> If you don't use the <p> command to insert a blank line
between entries they will appear flush against each other.
<li> The hunter carries a <a
bag of tricks</a>containing a handy
collection of tools.
When you are finished with the list, turn off the list command.
The text inside a <pre> tag will appear in a courier font.
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
Here's how to allow people to send you email right off of your web page.
Send email to <a
This URL: http://www.cs.unca.edu/~edmiston/htstart.html <br>
Return to <a
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
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.
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.
Goes at the top, encloses the <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.
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
The reader of the page will see this:
The hunter gazes out over the endless stretches of the
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
And is seen as ...
Return to Paula Edmiston
Where the bold words are the hyperlink.
<hr> Centers a ruler line on the screen.
<hr align="right" width="25%">
<hr width="25%" noshade size=5>
The paragraph mark. Inserts a blank line.
Line break. Inserts a line break, ie, starts a new line
with the following text. Does not insert a blank line.
A blank space. You can repeat this tag for more space.
You can make the paragraph tag into a paired tag by including
<p align="center">centered text here</p>
Used to indent both left and right
Indents the text from both left and right. You can nest this tag to
increase the indentation.
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.
Boldface in a graphics browser; underlined in a text browser. I prefer
this tag to <b> </b> because the strong tag is recognized by
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>
Centers text in some browsers.
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
<!-- 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>
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)
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.
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
Syllabus</a> contains links to required readings.
The person browsing the page will see:
The Internet Class Syllabus contains links to
The boldfaced words are the link.
About Graphics: Entering a Picture
Making a graphic image appear on your page is called setting an
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
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.
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.
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, 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!
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.
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!
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.
07 Apr 2012
[an error occurred while processing this directive]