Course Lab

R. Craig Collins > Web Page Design > Lab 4

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

     Video on Counting, Powers of 2 Number line
     Video on Starting Windows Calculator
     Video on Using Windows Calculator
     Video on editing images with Photoshop
     Video on editing images with GIMP

   •Document tags introduced in Lab 4 (link to documentation part of lab)
     (You will later transfer this information into a D2L quiz)
     •Tags to document must include: <font>, and height=, width= and align=, which modify <img>
You may download an acrobat or word processing document to help you with this.

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

   •Answer questions concerning topics covered in Lab 4
     (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 and Attributes to document must include: <font>

height, width, and align
(modifies the image tag, as in <body align="center">)
Tag: <font> </font> font
Syntax (required and [optional attributes]; including face=, size=, and color=)
What do these do?:
Example:

Notes:

Tag: <img> Image
Syntax (required and [optional attributes]; including src=, alt=, and height= width= align=)
What do these 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 lab4
• Using a text editor, create two pages, page1.htm and page2.htm in the lab lab4 folder
(QUICKSTART ALTERNATIVE: copy your lab3 FOLDER, and rename the copy to lab4)

page1.htm page2.htm

Page One

Link test 1

To Page 2
to bottom
Hi

to top

Page Two

Link test 2

To Page 1
to bottom
To TC

my pic

to top

Grading Points (Lab 3)

Create a folder in lab3 named pages
Create a folder in lab3 named images
Copy page1.htm and page2.htm to pages
copy pink_fabric.gif to images
copy yellow_fabric.gif to images
To the page1 body add background="../images/pink_fabric.gif"
To the page2 body add background="../images/yellow_fabric.gif"
Copy a picture, preferably of you, to the images folder
On page two, include this picture, and
use all the img parameters.

Grading Points (Lab 4)

10 points: Create a new file of your own design called index.html
inside of lab4, [but not in pages]
(why not copy your template.htm into lab4 as a starting point, renaming it index.html?)

Keep scrolling down to get all the info

\
       lab3
          |
          |
       lab4         (note demo image on left for organization)
          |
          |----index.html
          |
          |---- pages
          |          |-  page1.htm
          |          |-  page2.htm
          |
          |
          |---- images
                     |- pink_fabric.gif
                     |- yellow_fabric.gif
                     |- yourimage.jpg
                     |
                     |- yournewimage.jpg

Definition: index web page or default web page:
The page that opens when no other page is specified.
Example, you go to http://www.google.com
Since you did not specify any special page, the default opens

*index.html must properly coded with appropriate title, and use of body tag attributes

*Link from index.html to page1.htm & page2.htm
You will have to adjust the path so the web page can locate the file. To lab4 path example
5 points Index design
*Make this page your own design; you do need to choose backgrounds, colors, etc.
•(Make backgrounds) (Free background images)
10 points: On page1.htm, add the word Hi, and using one font tag:
*make it red,
*make it arial, and
*make it one size larger
• To Font tag
10 points: To your image file that displays on page2.htm:
*Crop the excess part of the picture, using GIMP, Photoshop, etc., (You may also adjust the brightness, contrast, etc. )

*Save the new version of your image to a different name, leaving the original in place.
*Optimize the new file
   • Using Photoshop
       • Video on editing images with Photoshop
         • Image Maps will be discussed more with lab 9
   • Using GIMP
       • Video on editing images with GIMP

*Correct the img src="../images/
to open the new, optimized file
5 points: All pages correctly coded
(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

Section 1 Numbers and Colors (Overview 6)

How many counting symbols, or digits are in Base₁₀? Base₂? Base₁₆?
What do we call Base₂? What do we call Base₁₆?
How do you count to 16 in Base₁₀? Base₂? Base₁₆?
What is 256₁₀ in Base₁₆? What is 255₁₀ in Base₁₆?
(You may use a Scientific View Calculator. Set starting base, enter number, then select target base.

First, go to View menu, and choose Scientific View.
$Calc, View\Scientific$

If the starting number is in base 10, set the button to dec,
enter the number to convert,
then click to bin, oct, or hex.

Example 128₁₀=?₁₆

)
Color representation in monitors uses what three colors?
256 shades of each color yields 2⁸ for Red x ⁸ for green x ⁸ for blue, which =2²⁴, or the ability to represent about ___________ colors using RRGGBB.
Open Windows calculator, choose View/Scientific and use the x^y function;
Type in 2
then click the x^y button
then type the exponent, 24
then press =, or hit the enter key to calculate
Using word colors, What is the syntax to change the body text to white, and the body background color to black?
<

>
Using hex colors, What is the syntax to change the body text to white, and the body background color to black?
<

>
What is the hex code for blue (try to use just 0's and F's)
What is the hex code for green (try to use just 0's and F's)
What is the hex code for red (try to use just 0's and F's)
What is the hex code for yellow (look at a color chart, if you like, but try to use just 0s and F's)
What is the hex code for purple (magenta) (try to use just 0s and F's)
Convert the following color from decimal representation to hex representation
(you may use a calculator: covert the red, green, and blue components separately, then combine into the 6 digit hex value)
126 126 126= #_ _ _ _ _ _
What color is this? You may add this number to the <body bgcolor= ...> section of a web page to test

Section 2 Fonts and Images (Overview 7)
Describe a serif font.
Describe a sans-serif font.
Describe a monospace font.
From Tutorial 3 font notes
From my Tutorial three notes, what does <tt> </tt> do?
From my Tutorial three notes, what does <pre> </pre> do?
From my Tutorial three notes, what does   do?
What is a .gif? What is it well suited for?
What is a .jpeg (or .jpg)? What is it well suited for?
What is a png? What is it well suited for?
Which format supports animation?
Which format supports transparency?
Does the book mention any other image format that supports animation?
List some of the align= options for the img tag.
Image maps will be included in a future lab, but some theory questions.
What is an image map?
What is a hot spot?
What are the hotspot shapes?

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

You will then transfer your answers to the D2L Quiz for lab 4. You may use your notes for this part of lab.
Choose the Quizzes menu, and locate IMED Lab 4: fonts/graphics.
• 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.