Lab: more HTML practice: multiple inter-linked web pages, relative URLs, segments, and validation.
Here are the two files we worked on in the lab. If you want to see the code, click on the links below, and then, in your browser, View ==> Developer ==> View Source.
Goal: Create a web site about Wellesley college and some alums.
- 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)
- Image manipulation using Pixlr
Download lab materials
Use your FTP program to connect to the
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 lab today.
The home page
lab02/pages/wellesley.html in your code editor.
Fill in the appropriate details in the comment section at the top of the page.
<!-- FILE NAME: wellesley.html WRITTEN BY: Wendy Wellesley DATE: FEb 6, 2018 PURPOSE: CS115 Lab 2 Practice -->
Save this file.
wellesley.html file will be the opening page to the little web site that you will create today,
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 recently-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 link to
point back to the home page.
image from the images folder.
Lastly, include a
hyper link, to the area of the home page where the department this alum majored in, appears.
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 (
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 nerd badge of honor.
To display the WC3 HTML5 Valid icon on your page, paste this code right before the closing
<p> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://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)
Go back to the homepage, and add a couple of links to point to places within the page. Like it shows here: