HTML documents are plain ASCII text with tags inserted to create the different effects. HTML documents can be created using any editor or wordprocessor like MS-Windows Notepad or Word.
If a wordprocessor is used, you must remember to save the text as an ASCII file or use an HTML Filter program like Internet Assistant. There are also several excellent HTML editors (HTML Assistant, HoTMetal, Easy HTML, FrontPage) that simplify the task of creating a homepage.
You can start with a page you created using HomePage Creator, someone else's page, or from scratch. In all cases, each HTML page should have the following format:
<HTML>
<HEAD>
<TITLE>Your document heading goes here</TITLE>
</HEAD>
<BODY>
<H1> the page heading goes here </H1>
The body of your HTML page goes here
</BODY>
</HTML>
All of the tags in a HTML document are bracketed
by left and right angle brackets, e.g. <HEAD>. Many of
these tags appear as pairs which enclose the affected parts of
the program. The closing tag is the same as the starting tag
with a slash / appended to the word. Some of the tags may include
additional information with the tag, .e.g <IMG SRC="mountain.gif"
ALIGN=MIDDLE> which causes an image to be displayed and the
text to be aligned in the middle of the image.
The heading enclosed by <HEAD> and </HEAD>
is displayed at the top bar of the browser. The body of the document
should contain a page heading at the top and will contain all
of the text and images that you want to display on the page as
well as hyperlinks to other pages.
Table 1 displays many of the more common tags used
in HTML pages.
Images are usually imbedded with the tag: <IMG
SRC="path/file.ext"> where the path is the directory
path to the file and the extension for the file is usually gif.
Some browsers will recognize jpg files also, while other browsers
like lynx will not display any images. The word IMAGE
will be displayed whereever an image is to be displayed.
Hypertext links are enclosed within the <A> and </A> tags, e.g.
<A HREF="http://csc.ColumbusState.edu/summers/notes/note.ch1">
My Chapter 1 Notes </A>
The Universal Resource Locator (URL) follows HREF= and is part of the <A> tag. The text between the <A> and </A> will be displayed by the web browser in a different color to emphasis that it is a hypertext link.
TAG | Description |
<HTML>...</HTML> | Blocks an entire HTML document |
<HEAD>...</HEAD> | Blocks the document's head |
<BODY>...</BODY> | Blocks the document's body |
<BODY BACKGROUND="bk-pc.gif" TEXTCOLOR="#FFFFFF">...</BODY> | adds a background image and makes the text color black |
<TITLE>...</TITLE> | Supplies title for body of document |
<H1>...</H1> | First-level heading |
<H6>...</H6> | Sixth-level heading |
<BR> | Forces a line break |
<HR> | Draws a horizontal line |
<P> ... </P> | Breaks up text into spaced regions (paragraphs) [</P> is optional] |
<B>...</B> | Produces bolded text |
<I>...</I> | Produces italicized text |
<BLINK>...</BLINK> | text inside tags will blink [use sparingly] |
<A HREF=" ">...</A> | Provides a hyperlink address |
<IMG SRC=" "> | Inserts an in-line image |
<OL>...</OL> | Creates a numbered (ordered) list |
<UL>...</UL> | Creates a bulleted (unordered) list |
<LI> </LI> | marks a member of a list [</LI> is optional] |
<CENTER> </CENTER> | Centers the text vertically on a line |
<BLOCKQUOTE> </BLOCKQUOTE> | can be used for indentation |
<BASEFONT=n> | specifies a basefont size of n |
<FONT SIZE=n COLOR="RRGGBB" FACE="Arial"> </FONT> | specifies font size, color and typeface
(size can be relative) |
<TABLE> </TABLE> | container tag pair for an HTML table |
<TH> </TH> | table header |
<TR> </TR> | table row designator |
<TD> </TD> | table data cell |
<PRE>...</PRE> | Preformatted style (best way to include tabs) |
<!-----......----> | Comment for the user/reader |
Before you use any HTML editor to create your document, do a preliminary design:
a) What text will be displayed on this page and how
will it be organized?
b) What images will be displayed and where will they
be displayed?
c) What are the files names for each image?
d) What hypertext links will be needed and how will
they be organized (lists?)?
e) What are the URLs for the hypertext links?