Lab 3: Hyperlinks & Images


Learn about...

  1. How to add hyperlinks to a web page
  2. How to add images to a web page
  3. Folder hierarchy
  4. Absolute vs. relative urls

Key Concept

Web pages can link to other web pages and external images can be embedded. To link or embed other files, one must understand where files are located and how to reference them with urls.


Pre-lab Reading

Pre-lab Activity

While you can download the Chapter 6 exercise files and extract the jenskitchen folder, I recommend creating the folders yourself and individually saving the files shown below to the specified locations. Understanding file hierarchies is very important and creating the folders yourself will help you greatly. Note: any blue text is a link to the file you will need for this lab.

  1. On a computer (home or lab), create a folder called jenskitchen.
  2. Inside jenskitchen, create two subfolders called, images and recipes
  3. Inside the recipes folder, create a sub-subfolder called pasta
  4. Download about.html and index.html and save them inside the jenskitchen folder you just created.
  5. Download jenskitchen.gif and spoon.gif and save them inside the images folder you just created.
  6. Download salmon.html and tapenade.html and save them inside the recipes folder you just created.
  7. Download couscous.html and linguine.html and save them inside the pasta folder you just created.
  8. Verify that you have created a folder hierarchy that matches Figure 6-4 on page 108.
  9. Read pages 107-115 and complete exercise 6-1 though 6-7.

Use the reading and the activity above to answer the Pre-lab Questions. Be sure to complete the activity and answer the pre-lab questions in Blackboard before the start of the lab period.


Note that these instructions are not always detailed. You must figure out some of the details by reading the textbook and investigating online sources. You can always ask your instructor for help. If your instructor is busy helping others, raise your hand to make sure the instructor sees that you need help, but then put your hand down and go back to work. As you wait for help, try your best to solve the problem on your own by reading the textbook.


  • Always make sure you save your lab file in the appropriate folder.
  • For file names, only use lowercase letter and never use spaces.

Textbook Exercises

It is very important to read the pages as you do the exercises. While you may be tempted to download the solution without doing the reading and actual exercises, the purpose of this work is to learn concepts and details that you will need to know to complete the rest of the lab and to answer exam questions.

  1. Download and saveglossary.html
  2. Read pages 116-118 and complete exercise 6-8 using Notepad++. You only need to create links to A, B, C, and D. And, you only need to create four "Back" links for A, B, C, and D. Remember that cut-and-paste can help you do this quickly.
  3. Show your instructor glossary.html. The links should work.
  4. Download and save and then extract it (right-click --> Extract All...)
  5. Review pages 123-128 and complete exercise 7-1.
  6. Be sure to complete the last part (...a little more practice). .
  7. Show your instructor your index.html, which should now have links to six different image pages.


Using what you learned in the first three labs, organize your csis180 course folder as follows.

  1. Be sure all your lab folders (lab1, lab2, lab3, etc.) are in a subfolder called labs.
  2. Inside of labs, create an index.html file that lists the first three labs and their titles.

    Example: index.html inside your labs folder

  3. Inside of each lab folder (i.e., lab1, lab2, and lab3), make a file called about.html
  4. Each of the hyperlinks in your index.html file should link to the appropriate about.html. For example, HTML: Editing & Document Structure should link to lab1/about.html

    Example: about.html for Lab 1

    Lab 1: HTML Documents & Structure


    Learn about...

    1. The overall structure of HTML documents and how they are different than other types of documents.
    2. Creating HTML documents using Notepad++.
    3. W3C validation of HTML documents.


    index.html - My first complete HTML5 document

    lab1.html - Lab 1 questions as an HTML5 document

  5. Each about.html file should include the lab goals and links to all the lab files you created with descriptions of each file (see example above).


Select your labs folder, create a zip file called, and submit this file to Blackboard. This zip file should contain the entire structure of your folder called labs, i.e., index.html, lab1, lab2, etc., and each lab folder should have an about.html file and all the files you created for that particular lab.