Lab 2: Creating web pages with images

A wintry view of Beebe Hall

Today you will practice with the following:

1. More basic HTML, including hyperlinks and images
2. Working with images:
   • Downloading images from the Web
   • Displaying images using IMG tag.
3. Relative addresses
4. Using Fetch (again!). To review instructions on using Fetch, please click here

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 is not important for this lab. What's important is that you get practice with links, images, relative URLs and uploading your work to puma. We have a collection of images that you can use for this lab.

• Wellesley College images
• Famous Alumnae images

Basic infrastructure and basic HTML

Create a new folder called images on your Desktop (on your local computer). Within 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 into your Desktop (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 web site
5. at least one relative link to one of the images

When you are ready to upload your stuff to the server, create a new directory, named lab2, into your public_html directory. Use Fetch to upload your wellesley.html document, as well as your images folder, and all of its contents, from your Desktop into your lab2 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

1. Create a folder on your Desktop, 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, 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 wellesley.html page, and the images it contains, over the web.

Still have some time left?

• 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.

Introduction | Syllabus | Assignments | Documentation | Project

Computer Science 110
Date Created: Sept 2002
Date Modified: Spring 2008