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.

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

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?

Pick a good title for your homepage.
Be careful about your spelling and grammar. Remember that your homepage is the first impression many will have of you.
Sign your work. Include your name, e-mail address and any other pertinent information.
Date your pages so that the reader will be able to identify whether it is out of date.
Remember the audience for whom you are writing. When you make a reference, qualify it with a clue to allow some people to skip it. For example, "If you really want to know how it works inside, see the Internals guide", or "A stepbystep introduction is in the tutorial".
Choose an appropriate size for your document. Long documents will take longer to transfer and are difficult for a reader to scroll through. If your home page includes menus giving access to other things, it should be small enough to fit on 24 lines (1 screen). Textual documents should be limited to about 5-10 screens.
Be careful about introducing too much graphic material into the home page. Graphics look nice but... Larger graphics tend to slow down significantly the time for a page to load. If you have a lot of large graphics, it is advisable to link them to your home page and give a warning that the site they are about to link to will take some time to load. Use the postage sized .GIF files on the home page if you want to give a preview of the images.
If you link to large graphics and/or sound files, give the viewer an indication of the size of the file.
If you decide to use a different body background for your pages, make sure the background does not distract from the text and graphics found on the pages. The background could also hide the text and make it difficult to read. The background pattern should be low key and subtle, but at the same time attractive and pleasing to the eye.
Color should also be a factor. Unless you are trying to grab people with bright colors, it is preferable to stick with pastel colors. If you do use dark colored backgrounds, be sure that the lettering is contrast to the background so it can be easily read.
Limit the use of different font styles and sizes. It is easy to get carried away and use 6 or more font sizes on the page. There should be no more than three different font sizes on any one page.
When you are setting up a page which refer to information which is available elsewhere, be very careful before taking a copy.
Use navigational icons. It is very effective to have the same consistent icon throughout the work linked back to the top page. This gives consistency to the work, so readers know when they are in it and when they are outside it, and it also gives them a quick way of getting back to the top of it.
Don't put extra spaces or blank lines into your text to pad it out, except in preformatted (PRE) sections.
Don't refer in your text to features available with particular browsers. Asking someone to "click here" won't make sense without a mouse, just as asking someone to "select a link by number" will betray the fact that you were using the line mode browser. Just leave a link. The instructions get boring as the user will normally know how to select a link.
Test your document. In a way your hypertext is like a book, which you should have proofread. In a way, it is like a program which you should have tested. At least get someone from the target group for which you wrote the document to read it and give you some feedback.
Make it clear whether your will accept criticism or suggestions from your readers, and how they should send it.

Guide to the Internet

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