• welcome
• administration
• schedule
• project
• documentation
• HTML Reference
• HTML validator
• CSS Reference
• CSS validator
• HTML Examples
• JS & DOM ref

Laboratory on Creating web pages with images and validating HTML

A wintry view of Beebe Hall

Today you will practice the following:

1. More basic HTML, including hyperlinks and images
2. Working with images:
   • Downloading images from the Web
   • Displaying images using the <img> tag.
3. Relative addresses
4. Using Fetch (again!). As a review, these are instructions on using Fetch
5. Validating your HTML code

What you need to do

Your goal is to create a web page about Wellesley college. You can choose any aspect of the college or your college experience to write about.

The contents of the page are not important for this lab. What's important is that you get practice with links, images, relative URLs and uploading your work to the cs server.

We have a collection of images that you can use for this lab:

• Wellesley College images
• Famous Alumnae images

Basic infrastructure and basic HTML

First create a folder named lab2 on your Desktop (on your local computer). Inside your lab2 folder, create a new folder called images to store the images for your web page. Inside this images folder, create subfolders as you need them (perhaps one folder called places and another called people that are both contained inside the images folder). Download the images that you want to use and place them in the appropriate folder(s).

Call your web page wellesley.html and save it in your lab2 folder (same level as your images folder). Your folders should look like this:

Your page should contain the following:

1. a couple of (small) paragraphs of text
2. several different HTML tags
3. at least two images located in two different folders (for instance, one directly in images and the other in places or people)
4. at least one absolute link to your favorite website
5. at least one relative link to one of the images

When you are ready to upload your stuff to the server, use Fetch to upload your lab2 folder to your public_html directory.

Note that you may upload only the images that you are using, but make sure you preserve the folder/file structure (for instance, Albright.jpg should still be in the folder people which is in the folder images) so you don't have any broken links!

Relative URLs

For practice with relative URLs (which are important for your project), follow these steps to create this structure:

1. Create a folder inside your lab2 folder, named documents
2. Move your wellesley.html document into the documents folder
3. View the wellesley.html document in a browser again, locally.
   Are your images still shown? Why not?
4. Now, try to fix your image tags within your wellesley.html document, so you can see the images again. Test your document in a browser, locally.
5. Upload your documents folder to puma (the cs server), under lab2, and make sure you can view your new wellesley.html page, and the images it contains, over the Web.

Validating your HTML code

We'll practice validating our lab web pages so that you can add this icon: to your HTML pages (look at the bottom of this page). Click for validation guidance.

Practice relative URLs

As time permits, you can experiment more with relative addressing:

• Move one of the images you are using in your wellesley.html document, into the same level as lab2, in your account. Then 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 wellesley.html document.

Remember the <link> tag you briefly saw in lecture? Add a <link> tag to your page, pointing to the CSS document we use for the cs110 web pages.