Publicaciones en la Internet (Publishing on the Internet)

OBJECTIVE: Create a simple HTML Document

Creating an HTML Document

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.

TAGDescription
<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

Table 1 - HTML tags

Designing a Good HTML Document

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?

To Internet GuideGuide to the Internet