Pre-lab

Pre-lab Reading

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

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.

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 recipies 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 recipies 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 excercise 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.

In-lab

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.

Preparation

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

Image Editing with GIMP

GIMP Topic: Cropping, resizing, transforms, exporting.

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

Activity

You can work together with your partner during lab. But after the lab session is over, you must complete this activity independently. Be sure to email your partner relevant files before the end of the lab session. 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 Notepad++.
   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).