Course Lab

R. Craig Collins > Web Page Design > Lab 2

Lab 2 © 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 2

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

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

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

•When creating booking bookmarks, please refer to my links page; the book introduces a different method that is addressed in Web Design II. For now, we will stick with traditional HTML.

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: name
(modifies the anchor tag, as in <a name="something">)
and
link and vlink
(modifies the anchor tag, as in <body link="some color" vlink="some color">)

Refer to My First Web Page to update the <a> tag and its attributes, and to update the <body> tag and its attributes, based on new information in this lab..

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

</a>
Notes:

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

</body>
Notes:

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

• Create a folder named lab2
• Using a text editor, create two pages, page1.htm and page2.htm
• The end result should look similar to the images below.

•See also Step by step directions (Adobe Acrobat file)

Lab 2 illustration

Grading Points
(1 point per item, per page, unless otherwise noted)

Set titles to 'Page One' and 'Page Two' (do not use the file names of page1.htm or page2.htm for your titles)
Set page1.htm to bgcolor="white", Set page2.htm to a yellow background
Set page1.htm to link="black", Set page2.htm to link="black"
Set page1.htm to vlink="navy", Set page2.htm 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.htm to page2.htm and Link page2.htm to page1.htm
Place each link on a separate line, using (or )
Add a LOT of (or ) 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, that is, place no text between the anchor tags)
In both pages, add a book mark at the bottom of the page, name="very-bottom" (Do not make the book mark visible, so no text between the the anchor tag set. <a name=".."></a>)
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 college web site
Pages should appear similar to the illustration
All links work properly
Correctly coded (10 points)
See coding help below
Click here for step by step directions
(How to check for HTML errors)

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

What attribute changes the color of a web page's background?
What attribute changes the color of a web page's text?
What attribute changes the color of a web page's link color?
What attribute changes the color of a web page's visited link color?
What tag creates a break?
What tag set surrounds a paragraph?
What tag creates a link?
What attribute must be used to point to the link's hyper-text reference? Describe the three types (how they are similar, how they differ.
What tag set creates a bookmark called verytop?
What tag set creates the largest headline? The smallest? A line across the page?

Lab 2 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 lab2 directory, and rename to yourname-lab2.zip.
•Example: yourname-lab2 or yourname-lab2.zip (if your extensions are visible)
Log into Desire2Learn, choose this class, choose Dropbox, and select Lab 2.
Browse to yourname-lab2.zip and upload it. (Scroll down to see detailed instructions)

You will then transfer your answers to the D2L Quiz for lab 2. You may use your notes for this part of lab.
Choose the Quizzes menu, and locate IMED Lab 2: links.
• 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). After the upload is complete the File Upload dialog box should appear. See the steps below to verify that your file went through.
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.

Coding help... you html should have similar features as those shown below. The  explain the nearby html.

<html>
<head>
<title>Change this to your title</title>
</head>

<a name="change"></a>

change this to your headline

<a href="change">To ???</a>

<a href="#change">To ??? </a>

<a href="#change">To ??? </a>

<a name="change"></a>
</body>
</html>