Web Mastering

Home > Exploring the Internet > Module 2: Elements of Design & HTML

Module 2: Elements of Design & HTML

Introduction

Lesson 1: HTML Essentials
Read Lesson 1

Activity 1
My Most Awesome Web Page (save in your periiod folder in a folder named "Awesome")


 Lesson 2: Design Considerations -- How to Be Considerate
Read Lesson 2

Assignment
Resolution Questions (answer in Word, save in your folder, print and turn in)


 Lesson 3: Say It With Tags
Read Lesson 3

Assignment
Web Invitation (save in your folder by this name)


Lesson 4: Layout: First Impressions
Read Lesson 4

Assignment
Formal Layout / Informal Layout
(answer in Word, save in your folder, print and turn in) Remember you answer all 5 questions for both the formal AND the informal site.


Lesson 5: Graphics, Worth 1,000 Words

Assignment
Colors Web Page

 

  1. On the T: drive in your period folder, create and name a folder  ”colorspage.”  This is where you will keep all elements of this project.
  2. Decide which color is your favorite.
  3. Using a digital camera, take pictures of everything you can find that is your favorite color and/or search the web for free pictures.
  4. Save these pictures on your computer in your “colorspage” folder .
  5. Select the eight best pictures. Using Photoshop (on your desktop), make sure all of your pictures are the same size and that they are saved as either .gif-s or .jpg-s.
  6. Think of as many hues (shades) of your favorite color as you can.
  7. Open “Colors” (see Attachments below) to see an example.
  8. Refer to the color chart to help you with your color codes.
  9. Write down the codes for your colors so you can add them to your web page.
  10. Open “Colors”. View the html coding by going to VIEW/SOURCE on the Menu Bar.
  11. Under EDIT choose SELECT ALL
  12. Under EDIT choose COPY
  13. Open Notepad and paste (CONTROL+V) this code in.
  14. Using SAVE AS, save this code by the name “colors” to your period folder on the T: drive in your “colorspage” folder.
  15. Make changes in the code by substituting your pictures and color selections. There are instructions included in the code, please be sure to read them.

 This assignment will be graded on screen.


 Lesson 6: Navigation: Where Am I?
Read Lesson 6

Assignment
University Web Site (save in your folder by this name, also, print and turn in)


Lesson 7: Get "Hyper": Creating Links
Read Lesson 7

Assignment
Links Site
(save in your folder by this name)


 Lesson 8: Tables, the Layout of the Land
Read Lesson 8

Assignment
Table File
(save in your folder by this name)


Lesson 9: Java Script
Read Lesson 9

Activity
The Script (save in your folder by this name)

Assignment 1
Javascript Tutorials -- Primers 1-3
(save in your folder by this name)
Assignment 2
Javascript Tutorials -- Primer 4
(save in your folder by this name)
Assignment 3

Javascript Links Page (save in your folder by this name)

File Attachments:
  1. Assignment 3:  bucking_bronco.gif Assignment 3: bucking_bronco.gif
    If you have not already done so - Create a folder, name it "Web Invitation", save this image in this folder
  2. Assignment 3: shootist.gif Assignment 3: shootist.gif
    Save this image in your "Web Invitation" folder as shootist.gif.
  3. Assignment 3: Web Invitation Coding Page 1 Assignment 3: Web Invitation Coding Page 1
    If you have not already done so - Create a folder, name it "Web Invitation", save this coding as "web_invitation.html" in this folder
  4. Assignment 3: Web Invitation Coding Page 2 Assignment 3: Web Invitation Coding Page 2
    Save this coding in your "Web Invitation" folder, name it web_invitation_page_2.html
  5. Assignment 5:  Colors Assignment 5: Colors
    Right click on file name / Select "Save Target As..." / Navigate to your period folder / Locate or create a folder and name it "Colors" / Click on "Save"
  6. Assignment 5:  Colors Web Page Instructions Assignment 5: Colors Web Page Instructions
Author: Pat Rox
Last modified: 6/1/2011 11:59 AM (EST)