Lab: Inter-Linked Web Pages, Relative URLs, and Validation
Solutions
Here are the two main files we worked on in the lab, plus an example of one more. If you want to see the code, click on the links below, and then, in your browser, View ==> Developer ==> View Source.
Overview
Create a small web site about Wellesley college and a couple of its alums.
Goals:
- Practice writing basic HTML tags
- Practice with relative addressing
- Practice with segments (#)
- Validating HTML code
- Practice downloading from, and uploading to, the cs.wellesley.edu server (again)
Download lab materials
Use your FTP program to connect to the cs.wellesley.edu
server.
Download a copy of the lab02
folder, from the Download folder, by dragging it to your Desktop. This folder contains
materials you will use in your work.
The home page
Open lab02/pages/wellesley.html
in your code editor.
Fill in the appropriate details in the comment section at the top of the page.
Example:
<!--
FILE NAME: wellesley.html
WRITTEN BY: Wendy Wellesley
DATE: Sept 12, 2018
PURPOSE: CS115 Lab 2 Practice
-->
Save this file.
The wellesley.html
file will be the opening page to the little web site that you start creating,
often times referred to as home page
. Look at it in your browser. Also examine its html code.
At the bottom of the page there is a section listing some of the in-the-news alums. Feel
free to add the name(s) of your favorite alums there.
The First Alum's page
Create a new web page which will present information about one of the listed in the home page alums. Do not spend much time looking for real information. Some text, any text, would be just fine for now.
At the top of the page include a title
to indicate what the web site is about. It is a good idea to keep
this title consistent in all pages of the site.
Then add a hyper link to point back to the home page
.
Include an image
from the images folder.
When you're done editing, upload your lab02
folder to your public_html
directory on the cs.wellesley.edu server.
Load your live page in the browser (https://cs.wellesley.edu/~yourusername/lab02/pages/wellesley.html
)
and make sure it's fully functional (i.e. no broken images, links, etc.).
The Second and the Third
Now that you have the page for one alum ready, it should be easy to create a couple more, each one about a different alumna.
Interconnect those pages
Go back to the page you made for the first alumna and add links to the pages for the other alums. Test those links. Then, in a similar way, connect each of the other alum pages to each other.
Here is how one of my alum pages looks like:
Validate your code
The W3C (the organization that controls HTML) provides an online tool you can use to determine if you've written valid HTML5 code.
Visit the validator at https://validator.w3.org and check your work from today's lab to see if you have any issues.
Some web developers like to give their pages the “WC3 HTML5 Valid” stamp of approval by displaying this little icon with a quick link to re-validate the page:
It's like a badge of honor.
To display the WC3 HTML5 Valid icon on your page, paste this code right before the closing </body>
tag:
<p>
<a href="https://validator.w3.org/check?uri=referer">
<img
src="https://cs.wellesley.edu/~cs110/Icons/valid-html5v2.png"
alt="Valid HTML 5"
title="Valid HTML 5"
height="31" width="88">
</a>
</p>
Once you've added the validation icon, re-upload to the server.
Internal to the page links: segments (Optional Task)
Go back to the homepage, and add a couple of links to point to places within the page. Like it shows here: