To Temple College Class  logo R. Craig Collins > Web Page Design > Lab 5

Lab 5 © 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 "
.

   •Document tags introduced in Lab 5 (link to documentation part of lab)
     (You will later transfer this information into a D2L quiz)
     •Tags to document must include: <table>, <tr>, <td>
You may download an acrobat or word processing document to help you with this.   
   •Begin coding and testing Lab 5 (link to web page construction requirements)
   •Answer questions concerning topics covered in Lab 5
     (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.

Tags to document must include: <table> , <tr>, and <td>

Tag: <table> </table> Table
Syntax (required and [optional attributes]; including bgcolor=, border=, and width=)
What does a table do?:
What does border= do?
What does bgcolor= do?
What does width= do?
Example:

Notes: requires the use of < > and < > tag sets.

Tag: <tr> </tr> Table Row
Syntax (required and [optional attributes];)
What does a tr do?: :
Example:

Notes:

Tag: <td> </td> Table Detail
Syntax (required and [optional attributes]; including width=, background=, bgcolor=, and align=)
What does a td do?:
Example:

Notes:

Also, make sure to update:

Tag: <ol>
Syntax (required and [optional attributes];)
What does ol do?:

Example:

Notes: requires the use of < >

Tag: <ul>
Syntax (required and [optional attributes];)
What does ul do?:

Example:

Notes: requires the use of < >

Tag: <li>
Syntax (required and [optional attributes];)
What does li do?:

Example:

Notes:

 

 

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

 • Create a folder named lab5
    (QUICKSTART ALTERNATIVE: copy your lab4 FOLDER, and rename the copy to lab5)
    (remove the large version of your image for page2.htm though, it is no longer needed)

  • Create a new file of your own design called resume.htm inside of the pages folder
    (why not copy a template with a simple table into lab5 as a starting point, renaming it resume.htm?)
  • Add a link from index.html to resume.htm
    folder \
           folderlab3
              |
              |
           folderlab4
              |
              |
           folderlab5
              |
              |----index.html
              |
              |---- folderpages
              |          |-  page1.htm
              |          |-  page2.htm
              |          |-  resume.htm
              |     
              |         
              |---- folderimages
                         |- pink_fabric.gif
                         |- yellow_fabric.gif
                         |- yourimage.jpg

  • Update your default document (index.html) to link to this file.
  • Be sure to include the following in your résumé:
    Grading Points
    • (5 points) Your name, address
      phone, and email
    • (5 points) Spell résumé
    • (3 points) Section labels: Goals or Objectives, Experience, Education, and References
    • (5 points) Appropriate Title, Control of default text/link colors, background color and background image
      (Make backgrounds) (Free background images)
    • (5 points )At least a 2x3 table
    • (5 points) Use of a list (see Lab 1 )
    • (2 points) Use of Formatting (bolds, etc)
    • (5 points) Links: link from index to résumé, link from résumé to index, and one relevant link on résumé:
      Examples:
      convert email address to working mailto
      add link to Temple College
      add link to Employer
      etc
      (see Paths)
    • (5 points) Appropriately coded
  • (How to check for HTML errors)
  • Lab 5 design cheat

 

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. (6 points each)

  • Tag typically surround text, so you can't leave <td></td> empty. What can you put in a detail if you don't wish anything to display?
  • In <Table width=" "...> width= can use a pixel value or a percentage. Discuss when each could be used.
  • If you set a detail width, <td width=" "...>, what happens to the detail if you put something wider in that detail?
  • If you set a detail width, <td width=" "...>, what happens to the column, if you put something wider in any detail?
  • You could control the height of a row, but normally this is left alone. what do you suppose sets the default height of a row?
Lab 5 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 lab5 directory, and rename to yourname-lab5.zip.
       •Example: yourname-lab5 or yourname-lab5.zip (if your extensions are visible)
Log into Desire2Learn, choose this class, choose Dropbox, and select Lab 5.
Browse to yourname-lab5.zip and upload it. (Scroll down to see detailed instructions)

You will then transfer your answers to the D2L Quiz for lab 5. You may use your notes for this part of lab.
Choose the Quizzes menu, and locate IMED Lab 5: tables.
      • 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 D2L Dropbox notes D2L Quizzes Notes D2L Discussion Notes
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 [Submit]. (To upload and submit you will always click 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.