Chapter 8: Publishing on the Internet

 

8.1 Introduction

 

The World-Wide Web is the fastest growing area of the Internet.  Publishing on the Internet requires two items.  You need the documents that you wish to display on the Internet and you need a way to provide those documents for others to view.  The documents are collectively referred to as web pages or HTML documents.  To display the documents, you need to place the documents on a computer running a piece of software called a web server.  Each web site running a web server has a homepage. The homepage can contain text about the site or the owner of the site.  The homepage will often contain graphics (in-line images) and hypertext links to other sites on the Internet. A homepage can even contain sound, pictures, forms, access to files and movies.  The homepage is important because it is the first of your web pages a browser will see. 

 

8.2 Creating Your Own Homepage

 

There are many reasons for creating your own homepage. It provides you with an opportunity to grab your five minutes of fame and tell everyone about yourself and your interests.  A homepage is a way for you to guide others to web sites that you find interesting.  But most importantly, a homepage is a chance for you to express your creativity.

 

The key to designing a good home page is to keep it simple.  The page should not be appear crowded and should be limited to one page of information.  Short paragraphs and lots of white space should be used.  Displaying too many images is not a good idea.

 

Before designing your own homepage, spend some time browsing the web; noting down those pages that are good and those that are not.  Get a good idea of what works and what doesn't and try to imagine what you want to include in your own page.

 

There are several ways to create your homepage.  You can write it from scratch using a language called HyperText Markup Language (HTML).  You can copy and then modify someone else's homepage that you like (be careful doing this, there are laws about copying others' creative work).  But the easiest way is to use a homepage generator program that requires no knowledge of HTML.

 


HTML documents are plain ASCII text with tags inserted to create the different effects. The tags are used to format the text. There are tags for underlining text, controlling the size of the text, creating lists of items and most importantly for providing links to other HTML documents.  HTML documents can be created using any editor or word processor like MS-Windows Notepad or WordPerfect. If a word processor is used, you must remember to save the text as an ASCII file or use an HTML Filter program like Internet Publisher or Internet Assistant. Most of the new word processors allow files to be saved as .html documents.  There are also several excellent HTML editors (HoTMetal, HotDog Frontpage, and HomeSite) that simplify the task of creating a homepage.

 

Before you 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?

 

 

8.3 Using Software to Automatically Generate Homepages

 

These programs are very easy to use.  They take less than thirty minutes to create a homepage.  The main limitation is that you are limited by what the author wants placed in the document.  If the programs ask for one image, that is all you will be able to include with these programs.  You must follow the format specified by the program.  These are great programs to start your first homepage with, but you will quickly want to customize the pages using the techniques discussed in the next section.

 

8.3.1 WWW Homepage Creator

 

Many of the web-hosting sites like Geocities now have an automated system for designing a very simple homepage.  You will be able to select a background and text colors.  You can select a style for your lines and include an image.  There is a built-in feature for including lists of search engine links, entertainment links and sports links.  You can also enter your own text and will be asked to enter your name and e-mail address.  Once you are finished, it can be posted as your homepage on their site.

 

8.3.2 Make Your Own Home Page Site

 

A similar site is http://www.goliath.org/makepage/.  This site also asks you fill in a form with your name, e-mail address, the name of an image you want included and any messages you want displayed.  You are also given an opportunity to select which links you would like to include on your page.  Once the page is created and displayed on the screen, you will need to save it with an .htm extension so that you may view it.

 

8.3.3 HomePage Creator to Create Your First HomePage

 

HomePage Creator (HPC) is a shareware program written by Demetris Kafas.  You can find information of the software at http://mars.superlink.net/kafas/. HPC builds a simple homepage using Demetris's homepage as a template [Fig. 8.1].  The program provides the user with a form that allows you to


1) Create a title

2) Add a picture or image

3) Add your name

4) Add your e-mail address

5) Enter up to four paragraphs of text about yourself and/or your interests

6) Create a second page of links to your favorite sites

 

To do all of this takes less than fifteen minutes and provides you with a nice first homepage.  If you create the homepage on one computer and want to display from another, you will need to move the .htm file you created as well as any images associated with your homepage to the other computer.

 

 

1) To use HPC, find the HPC icon.

2) Double-click on the icon.

3) Change any and all of the indicated elements of Demetris's homepage to personalize the page.

4) After you have saved the file, you can test it using Netscape.

a) Start up Netscape.

b)    From the File menu, select Open File to open your file (Make sure you get the path right).

5) It is best to leave HPC open while you are viewing your homepage with Netscape. Once you have closed HomePage Creator, you cannot use it to edit the homepage.

 

8.4 Creating an HTML Document

 

You can start with a page you created using one of the programs discussed above, 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

<ADDRESS>

Your name, e-mail address and version number goes here

</ADDRESS>

</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 that 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 from the file 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.  Everything else is contained within the body of the document.  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. Tags may be nested, but make sure that they are properly nested.

 

 

TAG

 

Description

 

<HTML>...</HTML>

 

Blocks an entire HTML document

 

<HEAD>...</HEAD>

 

Blocks the document's head

 

<BODY>...</BODY>

 

Blocks the document's body

 

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

 

Breaks up text into spaced regions (paragraphs)

 

<B>...</B>

 

Produces bolded text

 

<I>...</I>

 

Produces italicized text

 

<EM>...</EM>

 

Produces emphasized text

 

<BLINK>...</BLINK>

 

Text inside the tags will blink

 

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

 

marks a member of a list

 

<DL>...</DL>

 

Creates a definition list

 

<DT>

 

term to be defined

 

<DD>

 

definition of term

 

<BLOCKQUOTE>...</BLOCKQUOTE>

 

displays text as a quotation

 

<PRE>...</PRE>

 

displays preformatted text

 

<ADDRESS>...</ADDRESS>

 

Author's contact information (displays as italics)

 

<CENTER>...</CENTER>

 

Centers text vertically on lines

 

<BASEFONT=n>

 

specifies a basefont size of n

 

<FONT SIZE=n COLOR=@#rrggbb@> </FONT>

 

specifies font size and color (size can be relative)

 

<TABLE>...</TABLE>

 

container tag pair for an HTML table

 

<TH>...</TH>

 

table header

 

<TR>...</TR>

 

table row designation

 

<TD>...</TD>

 

table data cell

 

<!--...-->

 

Comment

Table 1 - HTML tags

 

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 wherever 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 insert inside quotation marks 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.

 

There are many other features in modern HTML documents that are not discussed here.  These include forms, frames and image maps.  To find more information about these and other new features, read some of the online resources that can be found by searching places like http://www.yahoo.com and http://altavista.digital.com or check out the links at http://csc.ColumbusState.edu/summers/internet/

 

To create an HTML document, you could use simple text editors like Microsoft's Notepad or Wordpad.  You could also use a word processor like WordPerfect of MS-Word, but you must remember to save the document as an ASCII document.  Either of these techniques works fine, but you must remember to insert all the tags.  There are also HTML converters for most of the popular word processors.  These take documents created with a word processor and convert the document to an HTML document.  The latest versions of the word processors, you can save the document as a web or .HTML document. There are also special purpose HTML-editors that create documents without the user seeing any html code.

 

Some of the HTML converters are - 

1.         WordPerfect Internet Publisher for WordPerfect 6.1 for Windows available at: http://wp.novell.com:80/elecpub/inttoc.htm.

2.         Microsoft's Internet Assistant for Microsoft Word 6.0 for Windows available at: http://www.microsoft.com/MSOFFICE/

3.         ANT_HTML 2.2 for Word 6.0 to HTML conversion and an HTML WYSIWYG template used in creating HTML documents with Microsoft Word v6.0. ANT_HTML is designed to work with Word for Windows (3.1x, NT, & 95) and Word for Macintosh in International versions of Word 6.0 or above.  It is available at: http://mcia.com/ant/

4.         HTML Author is an Internationalized HTML WYSIWYG template designed for Microsoft Word v6.0 and is available at:

            http://www.salford.ac.uk/docs/depts/iti/staff/gsc/htmlauth/summary.html

 

The most flexible way to design HTML documents is using one of the many HTML Editors.  There are many good ones that are either freeware or shareware.  Most of the HTML Editors have buttons assigned for many of the common tags and many include features to automate the creation of lists, tables and forms.  Some include options for spell checking, document conversion and background creation.

 

8.4.1 Using HTML Assistant to Create an HTML Document

 

If you do not have a copy of HTML Assistant, you can download a freeware version for education and individual use at: http://fox.nstn.ns.ca/~harawitz/.  This address also has instructions for purchasing the professional version of HTML Assistant.

 

1) To use HTML Assistant, find the HTML Assistant icon.

2) Double-click on the icon and click ok on the introductory screen.

3) Click on the T button below the Quit button (this displays another button bar).

4) Select Open | File from the menu and open the file template.htm [Fig. 8.2].

5) Change the heading "HTML Title" to your own personal heading.

6) Replace "This is the heading" with your own title.

7) Replace my name and address with yours at the bottom of the page.

8) Feel free to add your own text, images, and hyperlinks (IT'S YOUR PAGE).

9) Test your page by pressing the TEST button or switching to Netscape or another browser to view your page.

 

8.4.2 Other HTML Editors

 

A very good editor is HotDog available at http://www.sausage.com/.  It comes in both a regular version and a professional version. Both are available free for a thirty-day renewable evaluation.

 

A very popular HTML Editor is HoTMetaL, which is available at: http://www.hotmetalpro.com/  HoTMetaL has a highly structured graphical interface which is easy to use for creating HTML documents but somewhat difficult to use for modifying HTML tags.

 

Another good HTML editor is HomeSite available at http://www.allaire.com/.  HomeSite is easy to install and use.  HomeSite is a shareware program that reminds you of that each time it is started and gives you fifty uses.  There is also an early version 1.2 that is now freeware.

 

8.5 What Makes a Good HTML Document?

 

                 Pick a good title for your document.  Many of the search engines on the Internet will only look at this.

 

                 Be careful about your spelling and grammar.  Remember that your homepage is the first impression many will have of you.

 

                 Be consistent.  Use table of contents and section headings to ease navigation for the users.

 

                 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 how recent it is.

 

                 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 step‑by‑step 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 document includes menus giving access to other documents, 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 your documents. 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 documents 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 your documents 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.  Do not overwhelm the reader with bright and contrasting colors.  If you use dark colored backgrounds, be sure that the lettering contrasts with the background so it can be easily read.

 

                 Limit the use of different font styles and sizes.  It is easy to get carried away. 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 links wherever possible.

 

                 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 only 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 proof‑read. 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.

 

                 Before you publish your pages on the Internet, have someone else review them for errors, consistency and ease of use.  It may save you some embarrassment later.

 

                 Make it clear whether you will accept criticism or suggestions from your readers, and how they should send comments.

 

 

 

8.5.1 Testing your HTML

 

            Once you written your HTML document, you will want to test it. Many of the HTML editors include spellcheckers and some even include the ability to check for errors in the code. You can also use Doctor HTML at http://www2.imagiware.com/RxHTML/ to test your pages.