3. WWW and HTML

3.1 Why Bother?

Although decades old, the Internet has only recently come of age. This is easily illustrated by the prevalent use of World Wide Web (WWW) addresses in advertisements and business cards. It could be argued that the current public awareness is rooted in the over hyped ‘Information Superhighway’. The tool that has made the Internet accessible to many users is Netscape. As with many Internet tools, this software is available free, and is supported for UNIX, MacIntosh, and IBM PC platforms. Even more important is the fact that Netscape supersedes previously popular Internet interfaces (i.e., gopher, netnews, ftp, archie, etc.). Within minutes of your first exposure to Netscape, you can retrieve pictures, sounds, movies, and software from around the world.

3.2 Where to Find Netscape

Netscape software can be obtained free, but you will need an Internet connection directly, or a PPP connection through the phone lines. On campus the computers in all labs are already connected. In widows open an internet or similar program group. The netscape icon should be visible. After picking this icon the program should start and some home page will be displayed. If you are at home and you have an Internet connection you should have netscape, or an equivalent.

3.3 How to Get Your Own Home Page

You must create an HTML file (HyperText Markup Language) using a word processor, such as Wordperfect. Some points to consider.

1. To edit files, you must first download them using ‘ftp’ or netscape gold. They will exist in the ‘public_html’ directory in your directory. The ‘indxe.html’ file in this directory is the default start file.

2. Edit the file using Netscape Gold, Microsoft Word, or with a text editor.

3. Upload the modified files, and any new pictures, sounds, etc. using ‘ftp’ or netscape gold.

4. If necessary ‘login’ to the server and modify file permissions. Type the command,

chmod 755 ~/.. ~/public_html ~/public_html/*

5. You can get to your home page with addesses. Use a browser to check your HTML files. My main home page is given below,

http://claymore.engineer.gvsu.edu/~jackh

3.4 How to Create a file

This section will present a sample html file that can be used as an example when creating your own html file (this must be typed into a word processor). The example begins with an example homepage displayed in Mosaic. The Mosaic file that created this page is given after.

 

<HTML>

 

<HEAD> <TITLE> A Sample HTML Document </TITLE> </HEAD>

 

<BODY>

<H1> My First Home Page </H1>

<H2>

But Not My Last

<IMG SRC = “picture.gif” ALIGN=MIDDLE>

</H2>

<HR>

<P> This is a simple example of a paragraph entered into

Mosaic using a simple text editor, and with the lines

roughly scattered. For example I can <U> underline </U>

or make the text <I> italic </I> or I can even make

it <B> bold </B>. If I want a new line without a

paragraph spacing I can break it <BR> or I can start a

new paragraph.

</P>

<P> In other things I can also use point form </P>

<UL>

<LI> One

<LI> Two

</OL>

<P> Or numbered lists </P>

<OL>

<LI> Buckle

<LI> My

<LI> Shoe

</OL>

<P> Finally I will use a hypertext link to connect me to

another document. In this case it will be the main

page for <A HREF=”http://acs.ryerson.ca”> Ryerson </A>.

If you point to Ryerson and click, it will show you

the main campus home page.

</P>

<HR>

 

<ADDRESS> hjack@acs.ryerson.ca </ADDRESS>

 

</BODY>

</HTML>

In this file the instructions basically indicate where typesetting should occur (much like viewing the control codes in Wordperfect). There are some commands that should always be used. First the <HTML> and </HTML> pair should always be used at the beginning and end of the document. Within this there should be a <HEAD> and </HEAD> to define overall information. Notice that in the <HEAD> section there is a <TITLE> ____ </TITLE> pair that define the name of the document in the top of the Mosaic window. After the <HEAD> section comes the <BODY> section (this is followed by </BODY>). Within the section we define the Mosaic document. In this example there are defined heading (i.e., <H1>___</H1> and <H2>____</H2>). There is also a picture file included (i.e., <IMG SRC=”______”>). The preferred file format is GIF, but others are sometimes supported. A rule line is included to visually separate parts of the page (i.e., <HR>: Note this command does not need a second mate such as </HR>). Paragraphs are defined using <P> and </P>, so that the text will be kept in a block, and extra lines are added between paragraphs. A nice feature of Mosaic is the ability to create indented lists. Using the <UL> </UL> commands unordered lists with bullets can be made. Numbered lists can be made using <OL> and </OL>. Each point in any type of list begins with <LI>. At the end of the document is an <ADDRESS>_______</ADDRESS> definition where you can put your email address, or other contact information.

There are some control codes buried inside the HTML document that be used for various purposes. For example <I>__</I> gives italics, <U>___</U> gives underlines, and <B>___</B> gives bold text. The most powerful tool in Mosaic is the anchor <A>___<A>. In general this is how hypertext links are created. In the example given above the command used is <A HREF=”____”>____</A>. The effect this has is that the work displayed (i.e. Ryerson) will appear differently on the screen, and if a user clicks on it the Mosaic viewer will now try to open the new document (i.e. http://acs.ryerson.ca, this will call up Ryerson’s home page). These anchors can also refer to other locations in the same document.

3.5 Resources

Etherware:

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

http://www.ncsa.uiuc.edu/demoweb/url-primer.html

http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html

http://info.cern.ch/hypertext/WWW/MarkUp/MarkUp.html

http://info.cern.ch/hypertext/WWW/Provider/Style/Overview.html

http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html

http://info.cern.ch/hypertext/WWW/TheProject.html

http://info.cern.ch/hypertext/WWW/MarkUp/ISOlat1.html

Software:

ftp://ftp.ncsa.uiuc.edu/Web/html/hotmetal/Windows/hotmetal.exe

ftp://ftp.einet.net/einet/pc/winweb/winweb.zip

ftp://ftp.ncsa.uiuc.edu/PC/MOSAIC

ftp://ftp2.cc.ukans.edu/pub/www/lynx

http://www.netscape.com

Sites:

http://www.yahoo.com

http://gnn.com/GNNhome.html

http://rubens.anu.edu.au/

http://cybersight.com/cgi-bin/cs/s?main.gmml