Lab 2 - Part 1: HTML practice, images and URLs
Goal: Create a web page about Wellesley college.
- Practice writing basic HTML
- Working with images, including:
- downloading images from the Web
- displaying images using the
- specifying relative and absolute URLs
- Practice uploading work to the cs.wellesley.edu server
Download lab materials
Use your FTP program to connect to the
After you connect, navigate to your
Download folder, which is where you'll find materials you'll need for labs and assignments.
Download a copy of the
lab02 folder by dragging it to your Desktop. This folder contains materials you will use in lab today:
lab02 folder is your starting point. All the work you do in today's lab will happen in this folder.
Download 2 additional images
Visit Wellesley College Images
and save one additional image into
Visit Wellesley Alumnae and save one additional image into
Prep the template
lab02/wellesley/template.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: Sep 8, 2016 PURPOSE: CS115 Lab 2 Practice -->
Rename this file, saving it as
Images and URLs
wellesley.html file so it contains the following:
(Remember to check your work often, by saving and opening the local version of the file you are working on into your browser)
<h1>element that says
Wellesley: Women Committed to Making a Difference.
Wellesley College is known for its excellent education, beautiful setting, gifted faculty, and a unique campus culture. But perhaps most of all, Wellesley is known for the thousands of accomplished, thoughtful women it has sent out into the world for over 100 years.
lake-waban.jpgimage from inside the
<h2>element that says
Some famous Wellesley Alumnae.
An unordered list of three Wellesley Alumnae, with a link to their Wikipedia pages.
- Below the list (not part of it), include three images of three alumnae of your choice.
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.).
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.
More on relative addressing
As time permits, or outside of lab time, you can try the following:
Move one of the images you are using in your
wellesley.html document, up to the same level as
Now try to fix the link to that image within your
wellesley.html, so you can see the image again.
Create a second HTML document, add some images to it, and link to it from your
Often times, as you are creating a web page, you need to edit an image so it can fit better in your page. There are many different pieces of software available for that purpose. Here is an introduction to using Pixlr for image editing.