OverviewFor this exercise, we'll create links in an existing file. We'll practice with several kinds of links, including those that point to locations in the same file, the same directory, and on different servers. We'll create links to send email, and links that open new windows.
The basis of the exercise is the file you created for exercise W22k, "Creating HTML Lists". This file should contain an outline of the files in an INP student's Web site. The INP Department asks its students to create a separate directory for each class on their Web site. Here is a diagram showing what the outline represents:
Diagram Notes:
- The Private File Space (green) is not part of the Web site, though it is part of each student's space on the server. It may contain a folder called mail, but having a mail folder is not necessary.
- Several directories and files are shown in blue. They are not necessary for completing this exercise. For example, if you have not taken INP 152 or 220, you probably do not have folders for them; if you have folders for them, the files in those folders may be different from the ones shown here. None of the files in blue are needed, though you will be asked to make links to them.Make the links, but don't expect them to work.
- The inp directory (shown in orange) is actually on the main WCC server. Though it's shown in this position in the outline, the links will be complete URLs to external files. The URLs are given below.
Open the Lists fileUsing a text editor, open the file you created for exercise W22k, " Creating HTML Lists". Save it as sitemap.htm.Preview
Here's a picture of what the page should look like when you're done. Instructions form making it look like this will be given in detail...
Prepare the PageYou'll need to make a few changes before adding links to the page:
- In the first line, change the word "organization" to "map".
- Directly under the first line, add a new section called "Contents". The word Contents should be an <H2> heading.
- Under the word Contents put an ordered list using upper-case roman numerals. Each entry in the list should correspond to one of the top-level pages in the site:
- Home Page
- Resume
- INP 150 Directory
- INP 152 Directory
- INP 220 Directory
- Close off the list, and put in another <H2> heading which says "Details".
- Delete the Unordered lists. Leave the Ordered lists which should be at the end of the file.
- At the end of the Body section, put in a line like this:
Email your comments to Sarah Strong.
(It should have your name, unless yours is Sarah Strong.)
Put in AnchorsPut anchors in front of each of the major sections of the outline - the sections that have the roman numerals. To keep the anchors simple (the "KISS" principle!) let each name be the roman numeral for that section. (You'll have to look at a printout or Web page, since the HTML code doesn't have the numbers in it.)Here's what the anchor on the Home Page entry in the Details section would look like:
<li><a name=I>Home Page</li>
Link the Contents to the AnchorsEach of the lines in the Contents section should be linked to the corresponding anchors in the Details section.Here's what the link from the Contents section to the Detail section's Home Page line will look like:
<li><a href="#I">Home Page</a></li>
Link each Top-Level Entry to
a Web PageEach of the top-level pages in the detailed listing should be linked to a page (which may not exist yet). Here's what the files may be called:Example - linking to the home page of your site:
- Home Page: index.html
- Resume: resume.htm
- INP 150 Directory: inp150/index.html
- INP 152 Directory: inp152/index.html
- INP 220 Directory: inp220/index.html
<li><a name=I><a href="index.html">Home Page</a></li>
Link the INP 150 Entries to their
Web PagesSeveral files are listed in the INP 150 directory. Some of them are ones you should already have created, but others do not yet exist. However, you can create a link to each. Make the link so that each page opens in a blank target window. Here is an example of the entry for the Formats file:<li><a href="inp150/formats.htm" target=_blank>Formats page</a></li>
Link
to INP pages on the WCC ServerUnder the INP 152 section of the site map is a heading for an Internet Professional site. Although these pages are a project which some INP152 students may create themselves, for now we'll link them to the actual INP pages on the WCC server. These are the entries to link:Here's how the link to the INP home page would look in HTML:
- INP Home Page
- Courses page
- Job prospects page
- FAQ page
<li><a href="http://inp.wccnet.org/">INP Home Page</a></li>URLs of the other information sources are:
- Courses page: http://inp.wccnet.org/index.php?section=courses&content=index
- Job prospects page: http://inp.wccnet.org/index.php?section=careers&content=salary
- Testout FAQ page: http://inp.wccnet.org/index.php?section=faq&content=testouts
Create an Email LinkAt the bottom of the Body section, you should find the line you entered earlier in this exercise, inviting comments to be sent to you. Create an email link using your name (not the whole sentence) that will send email to your personal or WCC email account, whichever you check most often. Consult your favorite HTML reference to make sure you've done it correctly.In WCC labs, these links will not send mail because, for security reasons, the browsers are configured to return an error message when you try to send email. However, you can test the link to see if it will let you create an email message to yourself, even though you won't be able to actually send it.
Getting Ready to Publish on the
Web This assignment is submitted by publishing it on your Web space. Putting it on the Web is a separate assignment, in conjunction with exercise module W55h. Here's how you can get ready for publishing your sitemap:
- The best way to prepare for creating a Website is to create an exact mirror of what your site will look like, on your own workstation ( hard drive, Zip® disk, or other personal storage medium). "Mirroring" is discussed in module W50c under the heading, "On Your Own Computer".
- If you don't already have a public_html directory on your student server directory, you'll need to create one. You can do that most easily on your own workstation. public_html should contain exactly what needs to go on the Website - no more, and no less.
- Name this file sitemap.htm and put it in the root of your Website, the folder public_html. (Ordinarily, files for a particular class should be put in the subdirectory for that class, such as inp150, but this is an exception because it represents a map for your entire Website.)
- Inside public_html create a folder for each class that asks you to put files on the student Web serve. For example,
inp150
Remember the rules for naming files on the Web (W50c) - in particular:
- No spaces
- All lower-case (keep it simple!)
- In your inp150 directory, put all the HTML files you have created for that class so far. If necessary, change their names - in addition to following naming convention, they need to match the files names in your sitemap links.
- For this class, it's helpful to rename your "home page" to be home.htm rather than index.htm. This allows your instructor a view of your file structures and names, which can be useful if you run into difficulties and need her/his help.
- Test all the links on your sitemap. All links to files that actually exist should work on your workstation. If they don't work on your workstation, they won't work on the server either. Problems? Here are some things to check:
- Is the sitemap directly in the public_html directory (not in inp150)?
- Are the directory names in the links, the same as the directory names on the disk?
- Are your HTML class files in the inp150 directory?
- Are the names of the files in the links, the same as the names of the files on the disk?
- You'll need to be on-line to check the links to the INP Website, since they aren't on your own workstation.
If you complete these preparations, it will be very easy to get your site up and running correctly on the server. However, many people find it confusing to understand the relationship between your files and those on the server. If you're confused, you're in good company! Don't worry - it will become clear when you've had a chance to work with it for a bit. :-)
For W23h, you don't need to submit anything unless your instructor specifically asks you to.
Audience: This is for people who are familiar
with links in HTML and wish to practice creating them...
Objectives: When you successfully complete
this lesson, you will be able to...
About this document...
Module W23h: This
document is part of a modular instruction series in computer technology.
For more information, see the overview
or the list of modules in this series, W:
World Wide Web. This document has been used in the following classes:
