Lab: Multiple 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.

wellesley.html

isheau-wong.html

desiree-rogers.html

 

Overview

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 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 (http://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:

isheau wong page
 

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="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 (Optional Task)

Go back to the homepage, and add a couple of links to point to places within the page. Like it shows here:

home page internal links