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

Lab 1 © 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.
 •NOTE: Do NOT use curly quotation marks, such as ; only use straight quotation marks, such as ".

     • Note: If you need to stop work on a web page:
          Save your changes in your text editor (Notepad)
          When ready to resume, double click web page to open browser
          If using IE, choose View\Source to open Notepad for editing

   •Document tags introduced in Lab 1 (link to documentation part of lab)
     (You will later transfer this information into a D2L quiz)
     •Tags to document must include: <ol> and <ul>, <img>, <hr>, <p>, and
       how to form special characters, such as é
You may download an acrobat or word processing document to help you with this.   
   •Begin coding and testing Lab 1 (link to web page construction requirements)
   •Answer questions concerning topics covered in Lab 1
     (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: <ol> and <ul>*, <img>*, <hr>, <p>, and
how to form special characters, such as é

I have created a template that you can use below, to help make sure you are getting everything I am looking for; I have even done part of <ol> & <ul> and <img> to get you started.
You may also wish to open and copy sample documentation from the bottom of My first web page

Tag: <ol> </ol> or <ul> </ul> Ordered List or Unordered List (numbered list or bullet list)
Syntax (required and [optional attributes]) <ol> <li> [</li>] </ol>
What does it do?: Automatically numbers or bullets items in a list
Example:
<ol>
<li>Item One
<li>Item Two
</ol>

Notes: <ol> begins the list, <li> is inserted every place an automatically number list item is to display, </ol> ends the list

Tag: <img> Image (updates the documentation given in My First Web Page)
Syntax (required and [optional attributes]) <img src=" " [alt=" "]>
What does it do?: Displays an image
Attribute src=" " required, used to identify the location of the source file to be displayed
Attribute alt=" " optionally can display an alternative text message if the image isn't visible
Example:
<img src="dube.jpg " alt="Photo of Mr. Dubé">
Notes: no ending </img> is required. Can also use self terminating tag <img src=" " alt=" " />

• <p> (10 points),
Tag: <p> </p>
Syntax (required and [optional attributes])
What does it do?:
Example:
Note: in this class, as with using <img ...> or <img ... /> you may use <br> or <br .../> if instead of creating a paragraph, you simply wish to insert a line break.

• <hr> (10 points)
Tag: <hr>
Syntax (required and [optional attributes])
What does it do?:
Example:

Optional Notes:

and
 • how to form special characters, such as for the acute e (é) in Dubé, (10 points)


Part 2, Activity (40%):
 • Create a folder called lab1.
 • Using the class text and a text editor, create Mr. Dubé's Chemistry Web Page, chem.htm in the lab1 folder.
   • The process begins on 1.10; the final product, and the code required, are on p. 1.41 and 1.42

     •See also making chem.htm, if you don't have your text yet.

The image required is dube.jpg, which can be copied to your lab1 folder by:
right clicking the image below, and choose Save Picture As...
Make sure the file is saved as dube.jpg

dube.jpg

To Zip, browse to the the location of lab1 folder (don't open the folder)
Right click the lab1 folder
Choose Send To...
Choose Compressed (Zipped) Folder
 
You may rename the new zip by right clicking it.
The file name should be yourname-lab1.zip

Grading Points

  • Is html the same as the original in the book? (35 points, 3 points for each typo or change)
  • Does the web page look the same as the original in the book, including the image? (5 points)
  • (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 does the <ol> tagset do?
  • What does the <li> tag do?
  • What does the <ul> tagset do?
  • What does the <img> tagset do?
  • The tag that displays a graphic requires an attribute to points to the location of the graphic file; that attribute is ____
  • The tag that displays a graphic requires an attribute for ADA compliance to display alternate text. This text is available in case the image doesn't download, when you point to the image, and when visually impaired users have the web page electronically read to them; that attribute it is __
  • Do the <p> tag set works identically to the <br> tag?
  • In this class, can you use either <br> or <br /> to create line breaks?
  • What does the <hr> tag do?
  • To display special characters, such as é, you start with the __ symbol,
    and end with the ;    such as __#233; to make the é
Lab 1 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 lab1 directory, and rename to yourname-lab1.zip.
       •Example: yourname-lab1 or yourname-lab1.zip (if your extensions are visible)
Log into Desire2Learn, choose this class, choose Dropbox, and select Lab 1.
Browse to yourname-lab1.zip and upload it. (Scroll down to see detailed instructions)

You will then transfer your answers to the D2L Quiz for lab 1. You may use your notes for this part of lab.
Choose the Quizzes menu, and locate Dubé Lab 1.
      • 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