Learn about...

• How to add hyperlinks to a web page
• How to add images to a web page
• Folder hierarchy
• Absolute vs. relative urls

• Textbook pp 105-107
• Textbook pp 123-128
• http://en.wikipedia.org/wiki/Uniform_resource_identifier (read the section on Relationship to URL and URN).

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.

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, this activity and your observations 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.

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

1. Download and saveglossary.html
2. Read pages 116-118 and complete exercise 6-8 using a text editor. 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 tuscany.zip 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.
   

You can work together with a partner during lab. But you must complete this part of the lab on your own. You should not collaborate with your partner outside of the designated two-hour lab session.

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

   CSIS-180 Labs

   1. HTML: Editing & Document Structure
   2. HTML: Semantic Text Markup
   3. HTML: Hyperlinks & Images
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

   Goals

   Learn about...

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

   Files

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