The Open Door Web Site : Technology : Backstage Pass to Internet : Get your hands dirty

Before we start a new page from scratch, let's try to edit a page which already exists. Wherever you see the "at work" symbol (

), that means you are expected to use your neurons and get some work done!

Download the .zip file and save it.. Once you have unzipped the folder demo-site you are ready. to continue. Download file

First, we will open a web page entitled "index.htm" which can be found on the diskette. This opens "index.htm" in a new window. You may have to readjust the sizes or positions of the two windows when they are open. Remember that you can switch back and forth between the two open windows by clicking on their boxes in the gray Windows status bar at the bottom of the screen:

Here is the link to click the mouse on: demo_site.

It opens in a new window. Practice switching back and forth between the two windows.

Back in the other window,

The open page is called "index.htm" . Admire its purity and simplicity. Can you find the typographical error?

Try to change the text of index.htm as you would in a word processor.

Click somewhere or select some text and try typing over it. What happens? Why is that so? After you have done it, click this button to find out:

Now that you know why, let's open up the world's simplest word processor, a little program called Notepad (Bloc-notes).

Find it on the hard disk and open it. (It is usually in C:/Windows). Once inside Notepad,

go to the File menu and select Open. Find the web page called "index.htm" and open it. As you can see, it looks very different. We are seeing the HTML code which makes up this page. This is the behind-the-scenes look at the script which determines how the show goes. It is a bit confusing at first but if you look carefully, you should see some text which looks familiar.

In the HTML file open in Notepad, find the line with the text "...picture ofmy favorite animals..." and insert a space between "of" and "my". (In case you hadn't found it, this was the typographical error on the page.)

Go back to the browser and look at the page. Any changes? Is there now a space? No?

This is the slow, manual, laborious but ever-so-enriching-and-satisfying way of editing a web page. Let's have a bit more torture before we move on to the easy way. To change the alignment of text,

find the line of code which looks like this:

<h2 align="center"><font color="#000066">This is a trial page to practice what we are learning about web pages</font></h2>

Can you guess how to change the alignment so it puts the text on the left and not in the center?

Try to make the necessary modifications. If it doesn't work, here is the . What is changed is something called a tag. A tag is an HTML command nestled between two angular brackets. For example, <b> is a tag which means bold. <align="left"> is a tag which means align the text to the left.

10.

Let's change the color of the letters in the first line by changing the <font color="#000066"> tag. The numbers "#000066" mean dark blue to the computer but you can try to use English.

Change "#000066" to "green".

11.

Here's a tricky one: Let's make that text even bigger. To do so, change the command which says to make the text Heading 2 into Heading 1 which is bigger and bolder. In the same line listed above, can you guess which command determines that the text is a heading 2 text? Did you guess the h2 command? Very good.

Let's change h2 to h1. The tricky part is that this is a two-part tag which opens and closes before and after the text. Below, in red, are the two tags to change.

<h2 align="center"><font color="#000066">This is a trial page to practice what we are learning about web pages</font></h2>

Can you find another two-part tag with a beginning and an end? How about at the beginning of the HTML source where it says <title>Home</title>? In passing, notice the ever-so-subtle-yet-effective difference between the opening tag and the closing tag (the slash).

Now change the word "Home" to "My First Page" but don't touch the title tags. Where does the text change on the web page? Even if you got the answer, click on the button for important info.

13.

Find the following line which inserts the image of the e-mail animation:

The < tag means paragraph, and the <img src="__"> (image source) tag tells the browser to insert an image in this space. Remember, images are separate from the web page. You should now begin to be able to decipher some of the rest of the code:

You know that this animation will be placed in the center of the line, for instance.
You know that the slash means that the browser will find this image in a folder called "images".
You also can see that the filename is "email" and that this image in in GIF format because you looked at the extension, right? Right.
Try to change the width and height numbers in the HTML code and see what happens.

14.

One more important thing and then we can move on to the fun stuff. The reason we are doing this painful torture is that there will come a day when you feel you're a real expert because you've published your first page and then

Wham! an image refuses to pop up on the screen leaving an unsightly X or ? in its place just like the diagram on the right. Sometimes going into the HTML code is the only way to figure out what the problem is. Let's create a problem to illustrate.

In the line above for the e-mail animation, change the file extension from .gif to .jpg. Save and refresh the page on the browser. You should see that there is a problem.

Now go back and fix it. Moral of the story: keep track of the filenames and extensions of all your files, both images and HTML files. The key to avoiding headaches later is to practice good file management now!

Backstage Pass to Internet course developed by: Alan Damon

Backstage Pass to Internet
course developed by: Alan Damon