Print this document out for reference!
The following web map contains the titles and filenames to use for this exercise. If you wish to use different topics, by all means do so. On your printout, stroke out any titles and filenames you wish to change, and pencil in new ones . You now have an updated web map ready to use for this exercise. Remember that titles are meant to be properly capitalized for people to read. The filenames however are all lowercase without any spaces or special characters in them, ever .
In case you have forgotten, here is a copy of the HTML template of necessary tags. Replace the cues for the title and content with your own material.
<HTML>
<HEAD>
<TITLE>
Your Title goes here
</TITLE>
</HEAD>
<BODY>
Your content goes here
</BODY>
</HTML>
Web Page Linking Exercise
- Create the HTML files indicated in your web map using the HTML template ensuring all necessary HTML code is included. Don't forget to save them as .html files in your WWW folder. Be very careful to use the titles and filenames I have provided or those you have amended.
- Let’s add links on our Index Page to take users to the four pages we want in our web site. Open your index page in Notepad. Press "Enter" twice (in between the body tags) to start the links on a new line. When you put content above the links, they will move closer to the bottom of the page. Type on one line:
Hobbies – My Job – Music - Internet
- Center this line of links. Your code should now look like this:
<center>Hobbies – My Job – Music - Internet</center>
- To make Hobbies into a link, add the anchor linking it to the hobbies.html file, like so:
<a href="hobbies.html">Hobbies</a>
To review, when you click on the word Hobbies in your web page, you will be taken to the file hobbies.html. This is why the web map is critical to have the file names close at hand.
- To make My Job into a link, add the anchor linking it to the job.html file, like so:
<a href="job.html">My Job</a>
- To make Music into a link, add the anchor linking it to the music.html file, like so:
<a href="music.html">Music</a>
- To make Internet into a link, add the anchor linking it to the internet.html file, like so:
<a href="internet.html">Internet</a>
- Now your code should look like this:
<center><a href="hobbies.html">Hobbies</a> - <a href="job.html">My Job</a> - <a href="music.html">Music</a> - <a href="internet.html">Internet</a></center>
It does not matter if it all appears on one line, however do not press the enter key anywhere on the line to force it to a new line.
- Now save your web page, minimize Notepad, open or restore your browser, open your index.html file or if it is already loaded, press the RELOAD button (Netscape) or the REFRESH button (Internet Explorer). If all five files exist and have the correct filenames, you can click to go to them one by one. There are no return links however, so you will need to press the back button to return to the Index Page.
- Now we will make the return links. Open the hobbies.html page in Notepad. Press enter twice to start a new line. Type in the following to center the return link to your Index Page:
<center><a href="index.html">Index Page</a></center>
- Save hobbies.html, and open job.html
Press enter twice to start a new line. Type in the following to center the return link to your Index Page:
<center><a href="index.html">Index Page</a></center>
- Save job.html, and open music.html
Press enter twice to start a new line. Type in the following to center the return link to your Index Page:
<center><a href="index.html">Index Page</a></center>
- Save music.html, and open internet.html
Press enter twice to start a new line. Type in the following to center the return link to your Index Page:
<center><a href="index.html">Index Page</a></center>
Save internet.html and minimize Notepad. Go to your browser and load (or refresh/reload) your Index Page. Click each link in turn and then refresh/reload each page to make the return link visible if it does not show automatically. You may need to edit your links if they are do not work.
Congratulations, just add meaningful content and you have a five page web site.
|
