Course Lab

R. Craig Collins > Web Page Design > Lab 3

Lab 3 © R. Craig Collins, 2005/6

General Lab Directions
Note: There is not enough time in lecture to cover all the material; read your book BEFORE you begin the lab
Note: Typically labs will require you to invest some time in the lab, outside of class lecture hours

•Note: Please read the related overview material before continuing
Check with your Instructor for due date, typically Friday, 11:59PM (see due dates)

•NOTE: Do NOT use CAPITAL letters OR spaces in file names, or add extra spaces between quotation marks.
•NOTE: Do NOT use curly quotation marks, such as ”; only use straight quotation marks, such as ".

•See a video on Lab 3.

   •Document tags introduced in Lab 3 (link to documentation part of lab)
     (You will later transfer this information into a D2L quiz)
     •Attributes to document must include: target=, which modifies <a>, and background=, which modify <body>
You may download an acrobat or word processing document to help you with this.

•Begin coding and testing Lab 3 (link to web page construction requirements)

   •Answer questions concerning topics covered in Lab 3
     (You will later transfer this information into a D2L quiz)
You may download an acrobat or word processing document to help you with this.

At the end of this process,
1) you will submit the web page files by zipping them, and placing them in the Desire2Learn dropbox area. Instructions on zipping are below.
2) you will be 'turning in' your documentation and Q&A by taking the IMED Lab 1: Dubé quiz in the Quizzes area of Desire2Learn. So, to get the best score, complete the documentation and Q&A as directed below, first.

     • Optional: Open/save an Acrobat pdf document to help with documentation and questions
       (get Adobe Acrobat Reader free, here)
     • Optional: Right click/save a Word doc document to help with documentation and questions
     • Optional: Right click/save a Rich Text rtf document to help with documentation and questions

Part 1: Documentation, (30%)
You may download an acrobat or word processing document to help you with this.

At the end of this process, you will be turning in answers using the Quizzes area of Desire2Learn, based on the following. So, to get the best score, fill in all the answers in this document first.

Attributes to document must include: target
(modifies the anchor tag, as in <a target="something">)

background
(modifies the anchor tag, as in <body background="filename">)

Fill in what goes in the blank, based on the situation

Folder Image
(05 points) If both pages are in the same folder, to link to the other web page, page2.html, use
<a href="__________________">

(05 points) The web page is in lab3/pages, the images are in a lab3/images, to display one of the images, bike.gif, use <img src="__________________">

Update your documentation of the <a> tag to include the name= and target= attributes, etc., and expand documentation of the <body> tag to include the background= attribute

Tag: Body <body> </body> (10 points)
Syntax (required and [optional attributes]; include text=, bgcolor=, link=, vlink=, and background=)
What does each of these do?:
Example:
<body >

</body>
Notes:

Tag: Anchor <a> </a> (10 points)
Syntax (required and [optional attributes]; include href= name= and target=)
What does each of these do?:
Example:
<a >

</a>
Notes:

Part 2, Activity (40%):
You may download an acrobat or word processing document to help you with this.

• Create a folder named lab3
• Using a text editor, create two pages, page1.htm and page2.htm in the lab lab3 folder
(QUICKSTART ALTERNATIVE: copy your lab2 FOLDER, and rename the copy to lab3)

page1.htm page2.htm

Page One

Link test 1

To Page 2
to bottom

to top

Page Two

Link test 2

To Page 1
to bottom
To TC

my pic

to top

From Lab 2, if you copy lab2, this is already done

Set titles to 'Page One' and 'Page Two' (do not use the file name of page1.htm or page2.htm)
Set page1 to bgcolor="white", Set page2 to a yellow background
Set page1 to link="black", Set page2 to link="black"
Set page1 to vlink="navy", Set page2 to vlink="navy"
Add a heading (head line) size 2 to each page, as shown in the illustration, saying 'Link test 1 (or 2)'
Link page1 to page2 and Link page2 to page1
Place each link on a separate line, using <br> (or <br />)
Add a LOT of <br> (or <br />) to the middle of both pages to put space between the links, and so that the pages are taller than the browser window
In both pages, add a book mark at the top of the page, name="very-top" (Do not make the book mark visible)
In both pages, add a book mark at the bottom of the page, name="very-bottom" (Do not make the book mark visible)
In both pages, add a link from the bottom of the page which will jump to the top of the page
In both pages, add a link from the top of the page which will jump to the bottom of the page
On page2, add a link to the class web site

Grading Points (Lab 3)

10 points Make Folders
Create a folder in lab3 named pages
Create a folder in lab3 named images
10 points File placement
move page1.htm and page2.htm into pages
copy pink_fabric.gif to images
copy yellow_fabric.gif to images

Reminder: to copy a file, right click.
You did this with dube.jpg in lab 1...
So, either
right click the images above and choose
Save Background As
or
right click the links above and choose
Save Target As

make sure you save the files in the images folder
10 points add backgrounds
To the page1.htm body add background="../images/pink_fabric.gif"
To the page2.htm body add background="../images/yellow_fabric.gif"
10 points Add image
Copy a picture, preferably of you, to the images folder (you may use class pics if you don't have a better image)
On page2.htm, include this picture;
use img with src and alt parameters.

You may also want to use the
width=,
if your picture displays very large, perhaps width="144"
(72 pixels to an inch on most monitors)

Click here for a similar img example
As above, you will have to adjust the path so the web page can locate the file.

(How to check for HTML errors)

We'll discuss modifying the picture during the next tutorial

Part 3: Hands On (30%): Be prepared to show the functionality of your web page, and discuss/demonstrate new tags and attributes used in this lab.

You may download an acrobat or word processing document to help you with this.

At the end of this process, you will be turning in answers using the Quizzes area of Desire2Learn, based on the following questions. So, to get the best score, fill in all the answers in this document first.

Posers, could you answer the following on the test? (Specific Lab questions below.)

Answer the following questions

Previously, we used body bgcolor=; now we add background=. Why use both?
Why didn't we have to change the a href statements from lab 2?
If we had an img src in lab 2, why would we have to change the img src statements in lab 3?
What is an absolute address?
What is a relative address?
You can also link to an ftp server. How do you change the URL?
By the way, what is ftp?
What is added to the URL if you want your link to send email?
What are the problems with using a link to an email?
By default, a href will open the linked document in the same window (similar to target="_self"). What does target="_blank" do?

Lab 3 Questions

Problems? Zip the entire folder and attach to an email:
       •Send the mail to your instructor, cc yourself
       •The subject line should include your name, your class, your section, and what you are submitting
       •Make sure you attach the zipped file

SUBMITTING THE LAB

In Windows, zip the entire lab3 directory, and rename to yourname-lab3.zip.
•Example: yourname-lab3 or yourname-lab3.zip (if your extensions are visible)
Log into Desire2Learn, choose this class, choose Dropbox, and select Lab 3.
Browse to yourname-lab3.zip and upload it. (Scroll down to see detailed instructions)

You will then transfer your answers to the D2L Quiz for lab 3. You may use your notes for this part of lab.
Choose the Quizzes menu, and locate IMED Lab 3: backgrounds/paths.
• Using D2L dropbox • Using D2L Quizzes • Logon to D2L

To submit by Temple College Desire2Learn:
       •Log into D2L, scroll to the bottom, and choose the correct course
       •When the Course Home Page appears, click on the Dropbox link.
              •You may click on Discussions, Dropbox, or Quizzes below, for more info

        D2L navigation

Dropbox directions

1. Choose the class for which you want to drop off an assignment.
2. Find the Dropbox tool, click on it.
3. Choose the appropriate Dropbox folder, click on it.
4. Choose [Add a File], then choose [Browse]; you may need to choose (My) Computer first
5. Find the file that you would like to upload and click open, then choose [Upload]
6. Type in a short description or comment about the file, if you like.
7. Select [Add] for any additional files that may be pertinent, and repeat
8. After your files have been selected, click [Upload]. (You will always click upload at least twice)
9. Some files may take a long time to upload (especially if there are graphics in the file).
Did my file get through?
1. Go to the Dropbox tool
2. Click the number under Submissions
3. All of the assignments that have been submitted will be listed.