Create and Publish Your Own Home Page

The magazine of the Melbourne PC User Group
Create and Publish Your Own Home Page — Part 1
Richard John

This will demonstrate how you can build and publish your personal home page on the Web. Follow the steps in this tutorial, one at a time, and you will learn the basics. You need just a text editor and a Web browser.

In Part 1 you will be writing HTML code. HTML is an acronym for HyperText Markup Language - the language used for creating Web pages. The Markup Codes embedded in your document control how a Web browser displays and otherwise processes your information and those codes are contained in special HTML tags as we will see throughout this article.

In Part 2 you will learn how to use an FTP (File Transfer Protocol) tool named Ws_Ftp Le to send your home page to the Web host. Ws_Ftp Le is available free from Ipswitch Software for home and personal use. As you build up your Web page document you will be constantly editing, saving, uploading (using FTP) and reviewing your changes as shown in the illustration below.

Web Page Design Cycle

When designing and editing a Web Page, everyone follows the cycle in the diagram.

A useful practice when developing a Web page is to have both major browsers open at the same time (yes, you can do that) and viewing the same page (you can do that too). This maximises your audience, ensuring that everyone can see what you intend them to see. Generally, Microsoft Internet Explorer is less strict in enforcing the HTML standard than is Netscape. So if your Web page displays perfectly well in Internet Explorer but not in Netscape, you can be fairly certain that you've made a blooper somewhere in your HTML code.

Special Note

All of the files used in this tutorial - graphics, Java class files, this document - are available in a zip file format and can be obtained from the site http://www.vicnet.net.au/~mpceast/presentation.

The Minimal HTML Document

One important rule you should follow when authoring Web pages is to use all lowercase for HTML tags. In the case of filenames use all lowercase characters and where possible avoid spaces within a filename. Stick to these simple rules and you will seldom be in trouble.

Each document consists of head and body text. The header contains the page title, and the body contains the main content such as paragraphs of text, lists, images, non-displayable notes and comments and so on. Browsers expect specific information because they are programmed according to HTML specifications. The HTML tags within a document are always contained inside angle brackets <like this>. Some browsers will format your HTML file correctly even if these tags are not included but some browsers will not, so be sure to include them.

Tags are used to indicate both the start and end of an HTML document and start and end of each element within that document. The first tag is always <html>, indicating quite simply that this is an HTML document and the last tag is always </html>, indicating the end of the HTML document. Within that document each separate element is surrounded by corresponding start and end tags. The end tag in each case is the same keyword as used in the start tag, prefixed by a slash character. For example you will see the header surrounded by <head> and </head>. Comments are an exception; the start tag for a non-displayable comment is . There are other exceptions but you will become familiar with those as you learn more about HTML. The basics of HTML will emerge for you as you create your document from the samples that follow. To learn more about HTML tags you can browse through the many online references available - some are listed at the end of this article.

Before You Begin

Before you start creating your first Web page, you must first decide upon a text editor. Any text editor will do as long as it can save your work to a plain ASCII text file. You can use the Windows Notepad, provided you remember to save your file as a HTML document - that is, with the file extension .html rather than the default .txt.

Second, create a special folder to store your HTML files (upper or lower case makes no difference)
on a local disk drive (c: or d: or whatever). For the purposes of this article, we will be using
a folder named c:\html\.

Open your chosen text editor and type the HTML code displayed in Listing 1.

<html>
<head>
<title>Home Page for Joe Bloggs</title>
</head>
<body>
<h1>Joe Blogg’s Home Page</h1>

<p> 
Welcome to my Home Page. I am a member of the

<a href="http://www.melbpc.org.au/">
Melbourne PC User Group</a>, the world’s second largest computer user group. </p> 
<p> 
<!-- We will insert a map of Australia and Victoria here later. See "Embedding an Image" -->
I live in the city of Melbourne, the capital of the State of Victoria in Australia. Melbourne is home to the Australian Open Tennis Championship, Formula I Grand Prix and Australian Rules Football. Melbourne hosted the 1956 Olympic Games, was a bidder for the 1996 Olympic Games and is set to host the 2006 Commonwealth Games.
</p>
<p>I am a Web Developer, part-time Tutor and a keen traveller. In my spare time I read books on science, astronomy and fiction (keeps the imagination alive). For exercise I walk
four to six kilometres five days a week. I firmly believe in advance holiday planning - about two hours notice is sufficient.</p>
<p>One of my favourite weekend activities is bush camping in remote locations in the Victorian Alps. The serene surroundings and clean air give me the "space" I want in the city. You do as you wish - swim, bush walk, read, fish - free of muggers, dirty needles and carbon monoxide. On a clear night, and if it is sufficiently warm, you sleep under the stars.
A clear night in the bush, undisturbed by city lights is a sight. It’s like being in a Planetarium. Only, this spectacle is real AND IT’S FREE!!</p>
</body>
</html>

Listing 1. My first document. INDEX.HTML. All markup codes are shown bold.

In the example, please substitute your own information. For example, all the material about holidays, pastimes, professions etc should be about yourself. You could write briefly about your fascination with the planets Jupiter and Venus, or about walking your Pekinese every evening. It's your story!

a.
b.

c.

d.

Save your text document as a file named index.html (in folder c:\html\).
Open and view the document with both Netscape Navigator and Internet Explorer. Netscape and Internet Explorer each have File|Open menu options.
Return to your editor and change the line <h1>Joe Blogg's Home Page</h1> to <h1 align=center>Joe Blogg's Home Page</h1>.
Save the file and view it again in both browsers. See the difference?

Embedding an Image

We will now insert an image and some hyperlinks of interest as part of the Web page. In an earlier paragraph you may have mentioned that you live in Melbourne, Victoria, Australia (Canada also has a state named Victoria, so always fully qualify certain statements to avoid ambiguity). To make your page more interesting, we will insert a map of Australia and Victoria and hyperlinks to other Web pages that give your visitors a more detailed picture of your city. To embed an image in your Web page, follow the changes shown in Listing 2.

<p> 
Welcome to my Home Page. I am a member of the

<a href="http://www.melbpc.org.au/">
Melbourne PC User Group</a>, the world’s second largest computer user group.</p> 

<p> 


<img src="mapofoz.jpg" width="300" height="279" alt="Victoria, Australia">

I live in the city of Melbourne, the capital of the State of Victoria in Australia. Melbourne is home to the Australian Open Tennis Championship, Formula I Grand Prix and Australian

Listing 2. Embedding an image into INDEX.HTML.

Save the file and then view it in your browser. Needs more work? Yes.

Change your IMG tag from <img src="mapofoz.jpg" width="300" height="279" alt="Victoria, Australia"> to
<img src="mapofoz.jpg" width="300" height="279" alt="Victoria, Australia" align="right">

The align="right" attribute places the image to the right of the text. Save and view in browsers. Experiment with left and center alignment. What do you see - if anything?

Now change the start paragraph tag <p> to <p align="right">. Also try "left" and "justify". Save and view in each browser and compare the results.

If you have entered the HTML code as shown in Listing 1, your Web page will look like that in Figure 1.

Figure 1. Joe Blogg’s first cut Web page (displayed in Netscape Navigator)

If you like, substitute a family photo or some other image for the map of Australia, Vic. One difference may be that the family photo could be a different file type. You must enter the complete file name including the correct file extension.

Creating Hyperlinks

You can add more interest to your page by hyperlinking to sites of further interest. We will create a hyperlink to each of Melbourne, The Tennis Open and Grand Prix, each mentioned in an earlier part of the Web page the subject of this article. To do this, modify the second paragraph as shown in Listing 3 below. Save and view your Web page in each browser.

<p> 

<img src="mapofoz.jpg" width="300" height="279" alt="Victoria, Australia" align="right">

I live in the city of <a href="http://tourism.net.au/Victoria/Melbourne/"> Melbourne</a>, the capital of the State of Victoria in Australia. Melbourne is home to the
<a href="http://www.ausopen.org/">Australian Open Tennis Championship</a>,
<a href="http://www.grandprix.com.au/cars/index.html"> Formula I Grand Prix
</a> and Australian Rules Football. Melbourne hosted the 1956 Olympic Games, was a bidder for the 1996 Olympic Games and is set to host the 2006 Commonwealth Games.</p>

<p>I am a Web Developer, part-time Tutor and a keen traveller. In my spare time I read
books on science, astronomy and fiction (keeps the imagination alive). For exercise I walk

Adding a Footer

Return to the your text editor, open index.html and add the information shown in bold in Listing 4 below. We will enter today's date under date created and date modified.

warm, you sleep under the stars. A clear night in the bush, undisturbed by city lights is a sight. It’s like being in a Planetarium. Only, this spectacle is real AND IT’S FREE!!</p>

<hr width=50%>
<div align="center" style=font-size:10px>
Date Created:    Today’s date<br>
Last Modified:     Today’s date (change this regularly)
Author:               your name
Email:                 your e-mail address
&copy                Your SIG
</div>

</body>
</html>

Listing 4. Adding a footer.

Save the changes to index.html and view your document in both Netscape and Internet Explorer.

Why do the last four lines display on the same line? Can you fix it so they each appear on a separate line?

Hyperlinking an E-mail Address

You can make it easy for a reader to send e-mail to a specific person or e-mail alias by including the mailto attribute in a hyperlink. The format is: <a href="mailto:e-mailinfo@host">Name</a>

For example, instead of simply including your e-mail address as static text, you would enter:
<a href="mailto:rij@jeack.com.au">Richard John</a> to create an e-mail hyperlink that is already configured to open an e-mail window for the Richard John alias. (Of course you will enter your own or another e-mail address, won't you).

Now edit index.html once again. Change the e-mail address of the footer you added above, from being static text to a hyperlink. Just modify the Email: line as indicated in Listing 5 and save the change.

<hr width=50%>
<div align="center" style=font-size:10px>
Date Created:       Today’s date<br>
Last Modified:        T oday’s date (change this regularly)
Author:                  your name

Email: <a href="mailto:rij@jeack.com.au">Name</a>

&copy Your SIG
</div>

Notice when you display the changes now, the hyperlinked e-mail address is underlined (see Figure 2). The underlining indicates that an entry is a hyperlink. Test if the hyperlinked e-mail address works simply by clicking on it. This action should automatically start your e-mail program and create a new message.

Animated GIF as a Hyperlink

You can jazz up your Web page further by embedding an inline image (an animated gif in this case) as part of your e-mail hyperlink. This is achieved using the img tag. To do this, change the line:
Email: <a href="mailto:rij@jeack. com.au"> Richard John</a> to the following:
Email: <a href="mailto:rij@jeack.com.au"><img src= "emaileyes.gif" width="53" height="51" align= "center" border="0"> Richard John</a><br>

You can obtain "emaileyes.gif" and a whole lot more from http://www.vicnet.net.au/~mpceast/presentation.

Your page (when displayed in Internet Explorer) should now look similar to Figure 3. From now on you need only copy and paste this footer into other Web page documents and modify the data as necessary, usually only the dates.

Figure 2. Hyperlinking your e-mail address

Figure 3. Hyperlinking an Animated GIF Image

Add a Background Colour

By default, browsers display text in black on a grey background. However, you can change both elements if you wish. Some HTML authors select a background colour and coordinate it with a change in the colour of the text. Always preview changes like this to make sure your pages are readable. For example, many people find red text on a black background difficult to read. In general try to avoid using high contrast images or images that use the colour of your text anywhere within the graphic.

You change the colour of text, links, visited links, and active links (links that are currently being clicked on) by using additional attributes in the <body> tag. Modify the <body> tag as follows to create a window with a green background (bgcolor) and white text (text): <body bgcolor="#008000" text="#ffffff">

Save the document, view your document in both Netscape and Internet Explorer.

The six-digit number and letter combinations represent colours by giving their RGB (red, green, blue) value. The six digits are actually three two-digit numbers in sequence, representing the amount of red, green, or blue as a hexadecimal value in the range 00-FF. For example, 000000 is black (no colour at all), FF0000 is bright red, 0000FF is bright blue, and FFFFFF is white (fully saturated with all three colours). These number and letter combinations are generally rather cryptic. Fortunately online resources are available at: hIdaho ColorCenter http://www.hidaho.com/colorcenter/ and http://www.jeack.com.au/~rij/colours.html.

You can also use the name of the colour instead of the corresponding rgb value. For example, "black", "red", "blue" and "cyan" are all valid for use in place of RGB values. However, while not all browsers will understand all colour names, any browser that can display colours will understand the RGB values, so use them whenever possible.

Embed Background Image

Modify the <body> tag to create a window with a green background colour (bgcolor), black text (text) and a background image called "marble.jpg" (background) in your Web page, using this new body tag:
<body bgcolor="#008000" text="#000000" background="marble.jpg">

Save the document, view your document in both Navigator and Internet Explorer. If you typed the document following this article exactly, your finished text should now be identical to listing 6.

<html>
<head>
<title>Home Page for Joe Bloggs</title>
</head>
<body bgcolor="#008000" text="#000000" background="marble.jpg">
<h1 align=center>Joe Blogg’s Home Page</h1>

<p> 
Welcome to my Home Page. I am a member of the

<a href="http://www.melbpc.org.au/">
Melbourne PC User Group</a>, the world’s second largest computer user group. </p> 
<p> 

<img src="mapofoz.jpg" width="300" height="279" alt="Victoria, Australia" align="right"> I live in the city of <a href="http://tourism.net.au/Victoria/Melbourne/">Melbourne</a>, the capital of the State of Victoria in Australia. Melbourne
is home to the <a href="http://www.ausopen.org/">Australian Open Tennis Championship</a>, <a href="http://www.grandprix.com.au/cars/index.html"> Formula 1 Grand Prix</a> and Australian Rules Football. Melbourne hosted the 1956 Olympic Games, was a bidder for the 1996 Olympic Games and is set to host the 2006 Commonwealth Games. </p>
<p>I am a Web Developer, part-time Tutor and a keen traveller. In my spare time I read books on science, astronomy and fiction (keeps the imagination alive). For exercise I walk
four to six kilometres five days a week. I firmly believe in advance holiday planning — about two hours notice is sufficient.</p>
<p>One of my favourite weekend activities is bush camping in remote locations in the Victorian Alps. The serene surroundings and clean air give me the "space" I want in the city. You do as you wish — swim, bush walk, read, fish — free of muggers, dirty needles and carbon monoxide. On a clear night, and if it is sufficiently warm, you sleep under the stars.
A clear night in the bush, undisturbed by city lights is a sight. It’s like being in a Planetarium. Only, this spectacle is real AND IT’S FREE!!</p>
<hr width=50%>
<div align="center" style=font-size:10px>
Date Created: Today’s date<br>
Last Modified: Today’s date (change this regularly)<br>
Author: your name<br>
Email: <a href="mailto:rij@jeack.com.au"><img src= "
emaileyes.gif" width="53" height="51" align= "center" border="0"> Richard John</a><br>
&copy Your SIG
</div>
</body>
</html>

Almost Finished

This introduction is almost complete. In Part 2 we cover the use of the FTP client, Ws_Ftp Le to transfer your files to and from a Web server. Following that we return to our document and take a brief look at embedding Java applets.

Reprinted from the December 2001 issue of PC Update, the magazine of Melbourne PC User Group, Australia

[About Melbourne PC User Group]