Web Design Unit.doc

Web Design Unit
Purpose:
The Purpose of this activity is to help students know and how the World Wide Web
works and how to design their own functional pages by understanding html coding and
design principles.

Standards Addressed:

Standard(s):

1. Standard 10:

Benchmark(s):

Research and Development

Multidisciplinary Approach

2. Standard 12: Use and Maintain Technological Products and Systems

Benchmark(s):

Use computers to communicate

3. Standard 17: Information and Communication Technologies

Benchmark(s):

Many ways of communicating

Information and Communication Systems

State Standards Addressed:

Essential Questions for Students to be able to Answer:

Assessment:

Each student will maintain his or her own "electronic portfolio" on the school's server

Prior Knowledge:

There is not any previous knowledge needed.

Resources:

Each student will use the following peripherals

o Digital Camera
o Scanner

Each student will use the following software
o PaintShop Pro and/or Adobe PhotoShop
o Macromedia Dreamweaver and/or Microsoft FrontPage
o NotePad
o Internet Explorer
o Netscape
o Microsoft Office 2000 (Word, PowerPoint, Excel)
o FTP Pro

Time:

Four to six weeks

Course Topics:

The Internet
Layout and Design
Available Resources
Graphics
HTML
Web Page Editors
JavaScript
JAVA

Unit Plan

These lesson plans are adjusted from the Multimedia class from the Whitewater High
School, Whitewater, Wisconsin.
(http://www.whitewater.k12.wi.us/whs/webpagedesign/index.html)

Course Outline:

1. Develop a knowledge of how the Internet works (How the Internet Works

Qualities of a Good Web Page)
o Explain the structure of the Internet and how information is sent
from place to place
o Explain the difference between common file formats found on the
web (graphics, audio, video)
o Describe/define the languages used to design web pages
o Explain how browsers interpret web pages

Use on-line resources
o Use File Transfer Protocol
o Use common plug-ins and describe their purposes
o Use email and on-line forms to communicate with the instructor

Develop quality layouts for web pages
o List qualities of a good web page layout
o Understand that differences in browsers and differences in
individual user’s equipment should be considered when designing
a layout
o Use tables and frames to control the placement of information
o Acknowledge that content is the most important feature of a web
page
o Evaluate work and make suggestions for improvement
o Organize material in a manner appropriate for the subject matter

Create original graphics/images and modify existing images
o Use a digital camera to capture images and video
o Use a scanner
o Design a graphics and map coordinates for an image map

Code web pages in HTML
o Create a new original web page starting with a blank NotePad
document
o Control the face, color, size, and emphasis of fonts
o Display graphics and use an image as a background

o Create links within the same document, to another document, to
another web site, and to an email address
o Set up a page using frames to organize the desktop
o Implement an original image map
o Implement a form which emails the responses to an individual
o Display information using tables to control the layout
o Display information in numbered lists, bulleted lists, and definition
lists
o Include sound

Use web page editing software
o Create a web page using Macromedia Dreamweaver or Microsoft
FrontPage
o Create web pages using Office 2000 products (Word, PowerPoint,
Excel)

Use JavaScript and JAVA to add functionality to web pages
o Display alert boxes and additional windows
o Implement mouseovers
o Display scrolling text
o Display dates and times
o Create interactive forms
o Write original functions
o Generate cookies
o Modify existing applets
o Create original interactive applets

Use technology in a responsible manner
o Explain copyright and intellectual property rights as they relate to
the web (http://groton.k12.ct.us/mts/pt2a.htm)
o Respect intellectual property rights
o Abide by the school’s computer/internet use agreement at all times

Lab Assignments

1. Good Sites / Bad Sites
2. Lab #1 Fonts, Images, & Backgrounds
3. Lab #2
4. Lab #3
5. Lab #4 PhotoshopGraphics
6. Lab #5 Client Side Image Maps
7. Lab #6 Tables
8. Lab #7 Frames
9. Lab #8 Forms
10. Lab #9 Cascading Style Sheets
11. Lab #10 Alert Boxes and Windows

12. Lab #11 Pop-Up Menus
13. Lab #12 Mouseovers
14. Lab #13 Scrolling Text
15. Lab #14 Dates and Times
16. Lab #15 Interactive Forms
17. Lab #16 More Functions

LAB ASSIGNMENTS

1. HTML: Fonts, Images, and Backgrounds
 Create a new original web page starting with a blank Notepad document
 Control the face, size, color, and emphasis of fonts
 Control the placement of text
 Display special (non-alphabetic) characters
 Save a graphic from the web
 Display an image on a web page
 Use alternate text with images
 Use a graphic as a background for a web page

Lab #1
HTML: Fonts, Images, and Backgrounds

1. Open a blank NotePad document and enter a basic set of HTML tags (html, head,
title, body). Save the document to your webpagedesign folder on the network
using an html extension.

2. Save the following two graphics to your webpagedesign folder on the network.

3.

4. Add the gray paper graphic to your page as the background.

5. Enter the text and display it as it appears on the screenshot at the bottom of this
page.
o Display the title using a heading of size 1 in the default font.
o Make the color of the rest of the text green.
o Make the font Arial size 5.
o Underline every letter "P" that begins a word.

o Italicize every occurance of the phrase "Pickled Peppers."
o Bold the words "how many."
o Display every occurance of the name "Peter Piper" in size 6 red arial text.
o Display the last line using italicized black arial text size 3.
o Use the special code required to display the fraction properly.
o Center the text on the screen (except for the last line).
o Display a blank line between lines of text.

6. Add the other image to the page in the appropriate place using the img tag.
Specify a proper height and width for the image. Use the alt attribute to specify
alternate text if the image is not displayed. Align the image to the left side of the
page. Allow text placement next to the image.

2. HTML: Lists
 Numbered lists
 Bulleted lists
 Multi-Level lists
 Definition lists

Lab #2
HTML: Lists

1. Create a new HTML document in Notepad. Choose an appropriate background.
Set appropriate text sizes and colors throughout the document.

2. Display a numbered list that shows your class schedule for today.

3. Nest bulleted lists inside of the numbered list to show what you did during each
class period today. Include at least three bullets for each class period. Set the
bullet type to square.

4. Include a link to a second HTML document which uses a definition list to give a
one or two sentence description of each course on your schedule.

3. HTML: Links
 Create links using text
 Create links using graphics
 Create links to a web page on another server
 Create links to another document on the same server
 Create links to another location on the same page
 Create links to email addresses
 Implement redirection

Lab #3
HTML: Links

1. Save the red asterisk clipart shown below to your webpagedesign folder.

2. Create a new HTML document using NotePad and enter the basic set of starting
tags. Save the document to your webpagedesign folder.

3. Add the following information to the body tag.
o Set the background color to an off-white.
o Set the default text color to red.
o Set the color of links to purple.
o Set the color of active links to blue.
o Set the color of visited links to green.

4. Recreate the page as it appears in the screenshot shown below making
modifications so that the page really does reflect your favorite links.
o Set the face for the font to arial.
o Center the title using heading size 1.
o Set the font size to 4.
o List at least 10 links to other web sites. (The list needs to be more than one
screenful.) Each link must be accessible by clicking on either the red
asterisk in front of the text or by clicking on the text itself. Web sites that
are blocked through the school server may not be used.
o Make sure that there are no borders around the asterisks.
o Make sure that the link for the asterisk and the link for the text are
separate from each other.
o Leave a blank line between each item in the list.

5. Add three more links at the bottom of the list. (NOTE: These links are not
displayed in the screenshot.)
o Link to a document that you have created for another lab. Label it "My
Favorite Lab."
o Link to your school email address. Label it "Please Send Me Comments
About This Page."
o Link to the top of the page. Label it "Back to the Top."

6. Create another new HTML document and save it to your webpagedesign folder.
Display a friendly greeting on the page. Have the page automatically redirect you
to the first document you created for this lab (the page titled "My Favorite Links")
after 10 seconds. (NOTE: When you link to lab 3 from your electronic portfolio
please be sure that it links to this document first so the redirection can be
demonstrated.)

7. Email Miss Masbruch to tell her that she can grade lab 3. After this point it is
assumed that you will email every time you complete a lab and have added it to
your index page.

4. Photoshop: Graphics
 Create an original image with a transparent background
 Create an original animated gif
 Fit text to a curve
 Change the color of an existing graphic

Lab #4
Photoshop: Graphics

1. Visit an on-line clipart site and choose a piece of clipart that represents something
about you such as your favorite animal or food. The clipart should be a still
image, not an animated gif. Save the clipart to your webpagedesign folder.

2. Open Photoshopand replace one of the major colors in the clipart with another
appropriate color. Save the clipart image under a different name in your
webpagedesign folder.

3. Create a new image in Photoshopthat measures 200 pixels by 200 pixels.

4. Create a gif that results in something very similar to the Willie the Whippet
design shown below.

o Draw a circle slightly smaller
than the new image (so that your text
will fit between the circle and the
outer edge of the image).
o Create text that includes your
name and something about the
clipart you have chosen.
o Fit the text to the curve.
o Rotate the image so that the
text is positioned logically around
the circle.
o Place your clipart image
(with its new color) in the center of
the circle.
o Set the background color of
the image to transparent.
o Save the image in your
webpagedesign folder as a gif.

5. Start Animation Shop and open your newly created gif (it will become the first
frame of the animation).
Insert an image effect of your choice (compress, explode, pinch, etc.).
Design the effect to last for approximately 3 seconds at roughly 5 frames
per second.
Display each frame for an equal amount of time. Set the animation to loop
3 times.
Save the new animated gif by a new name in your webpagedesign folder.

6. Create an HTML document to display the original clipart image, the new gif, and
the new animated gif. Use the height, width, and alt attributes for each of the
images. (HINT: Change the background color of the page to make sure that your
image backgrounds are transparent.)

5. HTML: Client Side Image Maps
 Use graphics software to locate the coordinates for an image map
 Implement an image map using circles
 Implement an image map using rectangles
 Implement an image map using polygons

Lab #5
HTML: Client Side Image Maps

1. Save the following graphic to your webpagedesign folder.

2. Use Photoshop to open the graphic and map the coordinates for the major shapes
(1 circle, 4 polygons, 2 rectangles).

3. Create an HTML document to display the graphic. Create a client side image map
which links each of the major shapes in the graphic to an appropriate document.

6. HTML: Tables
 Control alignments within a table
 Control the column width and row height in a table
 Control the column span and row span of cells in a table
 Control the cell padding and cell spacing in a table
 Control the borders and background colors of a table

Lab #6
HTML: Tables

1. Create a new HTML document in Notepad.

2. Recreate the table shown below. Pay special attention to alignments, fonts,
borders, background colors, and cells that span multiple columns or rows.
Estimate the row heights, column widths, cell padding and cell spacing.

7. HTML: Frames and Targets
 Set up a frames page using two rows
 Set up a frames page using two columns
 Set up a frames page using a combination of rows and columns
 Display a linked document in a particular frame
 Display a linked document using the full screen
 Display a linked document in a new window

Lab #7
HTML: Frames and Targets

1. Create five HTML documents that contain only a background color. Use red,
blue, yellow, purple, and orange.

2. Create a starting HTML page that contains links to four other pages (PageA,
PageB, PageC, and PageD).

3. Create PageA so that it diplays information in frames using only two rows.
Display the page with the red background in the top frame and the page with the
blue background in the bottom frame. Display a border between the frames.

4. Create PageB so that it displays information in frames using only two columns.
Display the page with the red background on the left and the page with the blue
background on the right. Do not display any borders or spacing between the
frames.

5. Create PageC so that it displays information in frames using both rows and
columns. Recreate the layout of the screen so it is similar to the graphic below.
Do not display any borders or spacing between the frames.

6. Create PageD so that it displays information in frames using both rows and
columns. Recreate the layout of the screen so it is similar to the graphic below.
Display a border between the frames.

7. Modify the document with the purple background used on PageD so that it
contains three links:

o Clicking on the first link places the document with the yellow background
where the orange document is currently located in the bottom left hand
corner.
o Clicking on the second link opens the yellow document in a new window.
o Clicking on the third link opens the yellow document using the full screen.

8. HTML: Forms
 Organize choices using radio buttons
 Organize choices using check boxes
 Create a password field
 Create a text box
 Create a text area
 Implement a drop down list
 Submit responses to the form using email

Lab #8
HTML: Forms

1. Create a new HTML document and recreate the student information survey as
shown in the three screenshots below. Layout the screen exactly as shown using
tables.

2. Use radio buttons for questions 1 and 3.

3. Use drop down lists for questions 2 and 9.

4. Use checkboxes for question 4.

5. Use a textarea for question 5.

6. Use password fields for questions 6 and 7.

7. Use a text field for question 8.

8. Implement the submit button so that it emails the responses to your school email
account. When you have completely finished the lab change the submit button so
that it sends the information to Miss Masbruch's email and submit ONE complete
copy of the survey to her. Change the submit button back to your email.

9. DHTML: Cascading Style Sheets
 Use styles to control the appearance of fonts
 Use styles to control the appearance of links
 Create a separate stylesheet that contains formatting information
 Refer to the stylesheet from several pages in the same web site

Lab #9
DHTML: Cascading Style Sheets

1. Create a style template (external style sheet) that contains classes for the
following items:
o Background image - fixed
o At least two different fonts
o At least one unique link action
o A horizontal rule
o A box/border
o An unordered list using a graphic for the bullet

2. Modify your index page for your portfolio to incorporate the styles listed above.
ALL of the style information should come from the style sheet...there should be
no font/graphic/color information left embedded in the code for the index page.

3. Create an additional document that refers to the same external style sheet. This
document should contain biographical information about you. You can design it
like a resume or just include random facts about yourself. There should be no
font/graphic/color information embedded in the code for this page...all style
information should come from the external style sheet. You can use the digital
camera or scanner to include a picture of yourself if you would like. Place a link
to this page on your index page for lab #9.

10. JavaScript: Alert Boxes and Windows
 Display an alert box
 Display an additional window when a page opens

Lab #10
JavaScript: Alert Boxes and Windows

1. Create a new HTML document that lists the top five reasons why your favorite
web site is your favorite.

2. Use JavaScript to display an alert box when your page loads. The contents of the
alert box should warn the user that there will be two browser windows open.

3. Use JavaScript to open a second browser window after the user clicks "ok" in the
alert box. The window should display your favorite web site. Its dimensions
should be 640 pixels wide by 200 pixels high. It should have a URL bar, but no
toolbar or menubar.

11. JavaScript: Pop-Up Menus

Lab #11
JavaScript: Pop-Up Menus

1. Create a new HTML document which will display two pop-up menus as shown in
the screenshot below.

2. Use size 1 for the first pop-up menu so that only one line is displayed until the
user pulls down the list. Use the onChange event handler so that the new site is
visited as soon as the user chooses it. Include the following active links in the list:
o Whitewater Unified School District Home Page
o Whitewater High School
o Whitewater Middle School
o Lakeview Elementary School
o Lincoln Elementary School
o Washington Elementary School
o WUSD Central Office
o WUSD School Board

3. Use size 9 for the second pop-up menu so that all choices are visible on the
screen. Use the onChange event handler so that the new site is visited as soon as
the user chooses it.

12. JavaScript: MouseOvers
 Change text color
 Replace a graphic

Lab #12
JavaScript: MouseOvers

1. Save the following three graphics to your webpagedesign folder.

2.

3. Recreate the HTML document shown below, using the bubble graphic as the
background and displaying one of the fish centered on the screen. Enter the text
centered on the screen in arial blue size 7 font.

4. Implement a JavaScript mouseover inside the img tag that will display the fish
facing the opposite way when the mouse is placed over the image. The fish should
return to its starting position when the mouse pointer is no longer on top of the
graphic.

5. Implement JavaScript mouseovers inside of font tags that will change the color of
a word from blue to red when the mouse pointer is placed over that word. The text
should return to blue when the mouse pointer is no longer positioned over the
word. Each word must change color independently of the others.

13. JavaScript: Scrolling Text
 Display scrolling text in a text box
 Display scrolling text on the status bar

Lab #13
JavaScript: Scrolling Text

1. Create a new HTML document that displays a weather report for today. Include
appropriate text and graphics.

2. Use the onload event handler in the body tag to call a function which displays a
scrolling message in the status bar. The message should read "Severe
Thunderstorm Warning for Dane County until 9:00 pm."

3. Use a text box in a form to display a scrolling message in the center of the screen.
(See Shelly Cashman JavaScript textbook pages 2.7 - 2.17) The message should
read "Severe weather is likely for our area this evening. Please stay alert for
updates."

14. JavaScript: Dates and Times
 Display the current date and time
 Display the date and time of the last page update
 Display a countdown to an upcoming event

Lab #14
JavaScript: Dates and Times

1. Create a new HTML document which will display the information as shown in
the screenshot below.

2. Manipulate the date object to show the date and time that the page was loaded in
the format shown in the example.

3. Write a JavaScript routine to calculate and display the number of days left until
Christmas.

4. Use JavaScript to display the date and time that the document was last modified.

15. JavaScript: Interactive Forms

Lab #15
JavaScript: Interactive Forms

1. Save the following four graphics to your folder:

2.

3. Recreate the web page exactly as shown in the screenshot below.

4. Write three javascript functions: ClearForm, CalcRating, and DoMath. (HINT:
Use the Mortgage Calculator problem in the JavaScript text as an example.)

5. When the user clicks on the calculate button call function CalcRating to check
each of the entries to make sure that they are integers. If an entry is not an integer
display an alert box, clear the text box, and position the cursor in text box.

6. Once all entries are validated call function DoMath to calculate the quarterback
rating. The formula is as follows:

(50 + 2000(Comp / Att) + 8000(TD / Att) - 10000(Int / Att) +
100(Yards / Att)) / 24

Display the result rounded to one decimal place. (HINT: Multiply the answer by
10, make it an integer, and then divide it by 10.)

7. When the user clicks the clear button call function ClearForm which empties each
of the text boxes and positions the cursor in the first box.

16. JavaScript: More Functions

Lab #16
JavaScript: More Functions

1. Begin by saving the code for lab #16 under a different name.

2. Add a table that includes a series of checkboxes from which the user can choose
their favorite team (list at least six teams) and an additional empty text box as
shown in the first screenshot below.

3. Locate a suitable graphic for each of the teams in your list. Keep the graphics
comparable in size to the footballs already on the page. You will also need the
address of the team's official web site, the name of the starting quarterback, and a
knowledge of the team colors.

4. Write a function that will do the following when the user chooses a team and
clicks submit:

o Display the confirm dialog box to ask them if they are really sure. (Once
the dialog box appears, if they select "cancel" then clear the form and
display nothing else.)
o Change the background color of the document to one of the team colors.
o Change all of the yardmarker graphics to the team graphic you selected.
o Display the team name and quarterback in the text box.
o Open the team web site in a new window.
o Clear the checkmark in front of the selected team.

See the screenshot at the bottom of the page to see the effect of choosing the
Packers.

5. If the user clicks the submit button with nothing selected revert to the original
background color and set of graphics.

WEB PAGE DESIGN USING HTML

THE BASICS

HTML stands for HyperText Markup Language. HTML is a basic language for creating
web pages. HyperText refers to words that can take you to other places via links. Markup
refers to the fact that the document in which you create your web page with HTML is
"marked up" with tags enclosed in angle brackets.

There are two kinds of tags used in HTML, open and close. Both open and close tags use
a pair of angle brackets, but close tags have a forward slash after the first bracket. Tags
most often appear in pairs, with the information between the tags being effected by them.

Web pages can be created using HTML in a simple text editor, like NotePad. After
entering the information that will make up your web page, save the document with a
.html extension. After entering Internet Explorer, choose to open your document and the
web page will be displayed. As you make additions or changes to your document in
NotePad, simply save it and then click the refresh button on the Internet Explorer toolbar
to see the changes take effect.

Following is a sample of an HTML document showing a basic set of starting tags:

The open and close HTML tags tell the web browser when to start and stop processing
your web page.

The open and close HEAD tags offer a place to put notes and information about your web
page. Information located here is typically not displayed on your web page.

The pair of TITLE tags allow you to place a title in the title bar at the top of the web
page. Title tags are located between the head tags.

The BODY tags enclose all information that will be seen on your web page. The open
body tag can include attributes for the entire page such as the background and the color of

links.

It is important to note that when entering information in NotePad, pressing the enter key
has no effect on the appearance of the page in the web browser, so the tags can be
arranged in a way that will best help you keep track of what you are working on. Special
tags are needed to start new lines on the web page.

Many tags have attributes, additional formatting information placed within the open tag,
that will enhance the appearance of the web page. Most attributes are completely
optional; the tag will function with or without them.

CENTERING TEXT

Text in HTML is automatically left justified unless you provide other instructions.

BREAKS

The web browser typically ignores any hard returns in your document. In order to start a
new line on your web page, you must use a break tag. The break tag does not have a
matching close tag.

PARAGRAPHS

The paragraph tag is a break tag. It tells the web browser to start a new line after leaving
a blank line. It does not have a matching close tag. (Note: Two br tags in a row will have
the same effect.)

UNORDERED LISTS

Unordered lists are marked by bullets. The unordered list tag has a close tag, with each
item in the list set off by a list tag. Lists can contain as many items as you wish. (Note: If
the li tags are left out, items on this list will simply be indented without the bullets.)

Following is the output from the previous example.

Apples
Oranges
Bananas

MULTILEVEL LISTS

Unordered lists may be nested inside one another in order to create the appearance of an
outline. Each "level" will be marked by a different type of bullet.


Printers
o Impact
 Benefits
 Drawbacks
o InkJet
o Laser
Monitors
o TouchScreen
o Standard

ORDERED LISTS

Ordered lists are numbered lists. The same rules apply as for unordered lists.


1. Wash Dishes
2. Do Laundry
3. Take Out Garbage
4. Clean Bathroom

ANCHORS

HyperText links are words (or graphics) that you can click that will take you to another
page of your own, somewhere within the same page, or to an entirely different web site.
Text between the tags will appear underlined and in a different color. HREF stands for
HyperText Reference. The attribute target="_top" is optional and will allow you to jump
out of the frames and view the new page using the full screen. (Note: Creating a link to a
place within the same document requires another anchor tag at the destination point with
a matching name.)


Visit Mickey
Go To The Top of This Page
Visit Another Page on This Same Site

SENDING EMAIL

A HyperText reference can include an e-mail address so that when the link is
activated, an e-mail message can be created and sent.


E-Mail Me

ADDING COLOR

Attributes for color can be added to tags such as body. Colors can be referred to by
name or by six digit hexadecimal number. In the following example, only the
opening body tag is shown. The bgcolor attribute controls the background color of
the entire page. The text attribute controls the color of text not already specified
through other tags. The link attribute will affect the initial color of the anchor tags,
the alink attribute will affect the anchor tags when the mouse pointer is on top of
them, and the vlink attribute will affect the color of visited links. The three link
attributes do not work with all web browsers.

Click Here to See Hexadecimal Values for Selected Colors

HORIZONTAL LINES

The horizontal rule tag, which does not have a close tag, displays a horizontal line
on your web page. The hr tag has several attributes including width (number of
pixels long or percent of the screen width), size (thickness in pixels), align (left, right,
center), and color.


CHANGING FONTS

The font size, face, and color can be changed throughout a web page using the font
tags. The face selected should be something typically available on most computers,
although a list of fonts can be specified as back-up choices. The size can range from
one through seven, where seven is the largest. Pairs of open and close tags should be
used.


Red Arial Text Size 7
CREATING HEADINGS

HTML uses six basic heading tags. Each uses the letter H followed by a number one
through six. The larger the number, the smaller the text.

This heading is written using size one.
This heading is written using size two.

This heading is written using size three.

This heading is written using size four.

This heading is written using size five.

This heading is written using size six.

PROVIDING EMPHASIS

Text in HTML can be italicized, bolded, or underlined.


Text Written Here Will Be Underlined
Text Written Here Will Be Bolded
Text Written Here Will Be Italicized

SPECIAL CHARACTERS

Certain characters that are not available on the standard keyboard or are a part of
HTML tags may require special codes in order to display them on a web page.
These codes begin with an & and have a ; at the end. For example in order to print a
less than sign, you must type an &, then the letters lt, and then put a ; at the end.

CODE CHARACTER
(remove spaces) DISPLAYED
& lt ; <
& gt ; >
& nbsp ; (blank space)
& cent ; ¢
& copy ; ©
& deg ; °
& frac14 ; ¼

Consult an HTML reference book for a full list of codes including codes used for
foreign languages.

ADDING GRAPHICS

Graphics or images with a .jpg or .gif extension can easily be included in your web
page using the image source tag. There is no close tag associated with the image
source tag. Height, width, alignment, and border for the image can be set within the
tag. Only include the path for the location of the graphic if it is in a different folder
than the html code. The hspace attribute (not shown in the example) allows you to
specify the number of pixels of space that should be left on either side of the graphic.
A graphic can be used as a link to another location by placing the image source tag
where the text would normally go between the anchor tags.


CREATING A BACKGROUND

A graphic image can be used as the background for your web page by including the
background attribute in the body tag. Only the opening body tag is shown in this
example.

ADDING SOUND

Certain types of sound files may be played while your page is being viewed (.wav,
au, midi). The sound can be programmed to play once or several times using the
loop attribute. The autostart and hidden attributes allow the option for either the

page designer or the person viewing the page to have control over the sound. The
width and height specified are standard for the playbar.


SCROLLING MARQUEES

Text (or graphics) can be forced to move across the screen in one of three ways:
slide, scroll, or alternate. Slide forces the text to stop when it hits the edge of the
marquee. Scroll forces the text to continually move in a "circle." Alternate forces
the text to bounce from side to side within the marquee. The height, width, and
background color of the area in which the text is moving can be controlled. The
length of the time for which the text moves can be controlled (seconds), as can the
speed at which it moves (milliseconds). Font tags will have an effect on the text in
the marquee. Center tags will have an effect on the placement of the marquee.


T e x t w r i tte n h e r e w i l l b e i n th e m a r q u e e .

TABLES

A table can be used to arrange text and graphics in rows and columns. A table can
be created with or without borders around the cells and with or without a separate
background from the rest of the page. Tables are made up of pairs of table row tags.
Each table row is made up of pairs of table data tags. Attributes used in the table
data tags can include align (left, center, right), valign (top, middle, bottom), colspan,
rowspan, width, bgcolor, and background. Center tags around the table can have an
effect on the position of the table. Font tags inside the table data tags can have an
effect on the font for the text in each cell.


Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Centered Across Columns Font Change

FRAMES

Frames allow the screen to be divided in to several smaller areas, each of which will
display a separate HTML document. One HTML document is needed to control the
layout and identify the filenames for the other documents to be displayed. If you are
currently using Internet Explorer, pull down the "view" menu and choose "source"
to see the document that controls the frames on this page. The graphic below
demonstrates a frame setup very similar to the current page.

The frameset tags can contain an attribute to describe either the size of the columns
or the size of the rows. The measurements can be given in pixels or in a percentage
of the screen. The asterisk is used to state that whatever part of the screen is left
over will be used for the last frame.

The frame tags located between the frameset tags specify the name of the html
document to be displayed, whether the user should be able to change the widths of
the frames, and whether the frames should have a border. The frame tags also
establish a target name so that other documents can be loaded in to the frames. The
bordercolor attribute may also be used.

The noframe tags specify what should be displayed if an older browser is being
used.

Nesting one pair of frameset tags inside of another allows the creation of more than
two distinct areas on the screen. The code below divides the screen in to three
frames as shown in the diagram following the example.

If a page is being displayed in frames, any anchor tag on that page can include a
target attribute which controls where the new page is displayed.

Target="bottom" in the case of the above example will display the new page
in the area named "bottom."

Target="_top" will take the user out of the frames and display the new page
on a full screen.

Target="new" will open another window to display the new page.

If you are using Internet Explorer, right click on the background of the left hand
frame on this page and choose "view source" to see the target attributes in use.

D Y N A M I C H T M L

THE BASICS

Dynamic HTML (DHTML) is a generic name for all types of
scripting. Scripting allows for small amounts of programming code to be run in the
viewer's browser in order for style, positioning, and content to appear dynamic
rather than static. Scripting improves the level of interactivity on a web page
without increasing the amount of work required by the web server.

The use of styles and cascading style sheets allows for the separation of style
information from formatting information. Style sheets make it extremely easy to
maintain consistency of style (colors, fonts, etc...) in a web site and to change the
appearance of a set of pages without having to search through the code for all of the
pages to find every occurance of a certain color or font.

STYLE (CSS)

The following three methods for including style information on a web page are all
valuable tools to know and use.
In-line Style:
Style information is mixed with the formatting information.

EXAMPLE (text changes from blue to red and back again):
<font color=blue onmouseover="javascript:this.style.color='red'"
onmouseout="javascript:this.style.color='blue'"> Hello </font>

Embedded Style:
Style information is included between the head tags.

EXAMPLE:
<head>
<style type="text/css">

</style>
</head>

A style can be created by using the name of a tag (such as font) and assigning
it a class name of your choice (such as examp). Following the names will be a
list of attributes and their values enclosed in braces. A colon is used to
separate an attribute from its value and a semicolon is used to separate
attributes. For example:
tagname.classname {attribute1 : valueofattribute1 ; attribute2 :
valueofattribute2}

This style can be referenced in the document by using the name of the class
in the tag that it was designed for. For example:
<font class=examp>

A style can also be created by using the pound sign (#) in front of the class
name (such as heading1 in the example above). To access styles declared in
this way use the class name as the id in a div tag. For example:
<div id=heading1>
Dynamic HTML
</div>

External Style:
Style information is included in a separate file (cascading style sheets).

EXAMPLE:
<link rel=stylesheet href="mystyles.css" type="text/css">

To use an external cascading style sheet create a document that contains only
the style tags and save it with a .css extension. Include a link tag between the
head tags of any document in which you want to access the styles. Refer to
the styles in your html code just as you would if the styles were embedded.

TEXT ATTRIBUTES

The following is a partial list of attributes that may be used with any form of text
including styles for the font tag and the anchor tag. All of the fonts and links on this
page are controlled with styles.

Name of Attribute Possible Values Example
font-style normal {font-style : normal}
oblique
italic

font-weight extra-light {font-weight : bold}
demi-light
light
medium
bold
demi-bold
extra-bold

font-size The following units of {font-size : 14pt}
measurement may be used:

points (pt)
pixels (px)
inches (in)
centimeters (cm)

font-family Names of specific fonts or font {font-family : "comic sans",
families may be listed in the order "arial", "times new roman"}
of preference.
text-decoration none {text-decoration : line-
underline through}
italic
line-through
overline
blink

color Any hexadecimal value or color {color : CC33CC}
word that could be used normally
may be used as part of a style.
letter-spacing Any unit of measurement that may {letter-spacing : 0.5cm}
be used for fonts may be used to
determine the spacing between
letters.
vertical-align sub {vertical-align : sub}

super

text-transform capitalize {text-transform : uppercase}
uppercase
lowercase
none

line-height The distance between two lines of {line-height : 1.5}
text can be set by using a
multiplication factor on the current
font size.

To use these properties to create a mouseover for a link refer to the three actions
that can occur with a link: link, visited, and hover. Typically the properties for link
and visited are set the same, but the properties for hover are changed slightly so that
the appearance of the link changes as the mouse passes over it. The classnames for
all three actions must be the same so that they work together properly. Note that in
the following example the link is initially red 8 point arial text. When the mouse
passes over it it will become blue 8 point arial text and then return to its original
state when the mouse is no longer over it.

a:link.mine, a:visited.mine {color:red; font-size:8pt; font-family:arial}
a:hover.mine {color:blue; font-size:8pt; font-family:arial}

LIST ATTRIBUTES

The following is a partial list of attributes that may be used with unordered lists.

list-style-type disc {list-style-type : upper-alpha}
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none

list-style-image An image may be specified as the {list-style-image :
bullet. url(redbullet.gif)}

list-style-position inside {list-style-position : inside}
outside

BACKGROUND ATTRIBUTES

The following is a partial list of attributes that may be used with the body tag to set
background colors and images.

background-color Any standard color word or {background-color : blue}
hexadecimal value may be used for
the color.
background-image The filename of any image may be {background-image :
used. url(graypaper.jpg)}
background-repeat repeat {background-repeat : no-
repeat-x repeat}
repeat-y
no-repeat

background- scroll {background-attachment :
attachment fixed fixed}

background-position This method of positioning the {background-position : 50%
background matches the 50%}
percentage coordinates of the
image with the same percentage
coordinates of the window.

BOX/BORDER ATTRIBUTES

The following is a partial list of attributes that may be used with any "box" on the
screen. The thick purple borders around the scroll areas on this page are created
using box and border attributes with the div tag.

border-style The border-style attribute must be {border-style : solid}
set to solid in order to make the

border visible.

solid
none

border-width If one measurement is listed the {border-width : 1px 2px 2px
width of the entire border may be 1px}
specified. If four measurements are
listed in order they determine the
width of the top, right, bottom, and
left. Px, pt, cm, and in may be
used.
border-color Any standard color word or {border-color : blue}
hexadecimal value may be used.
One value indicates the same color
should be used on all four sides.
Four colors listed will follow the
same sequence as border-width.
padding One measurement may be given to {padding : 1cm 2cm 1cm
specify the amount of padding on 2cm}
all four sides of the box. Four
measurements may be used to
provide different amounts of
padding on each side of the box.

FILTERS

The following is a partial list of filters that may be used to enhance type styles.
Please note that although it appears to have no effect on the size of the text, the
height attribute must be used in order to activate the filters. The heading "Dynamic
HTML" at the top of this page was created using filters.

Name of Filter Example
drop shadow {height : 14pt; filter : dropshadow(color=#ff33cc)}
shadow {height : 14pt; filter : shadow(color=#cccccc)}
glow {height : 14pt; filter : glow(color=#ff0000)}
fliph {height : 14pt; filter : fliph}
flipv {height : 14pt; filter : flipv}

POSITIONING

The following is a partial list of attributes that may be used to position elements on a
page. The DHTML graphic in the top right corner of this page was placed using
absolute positioning so that it could sit on top of the horizontal rule. Also, note that
the graphic disappears when your mouse is positioned over top of it. This was done
using the visibility attribute. The mini scroll areas on the screen were created using
the height, width, and overflow attributes.

position static {position : absolute}
absolute
relative

top The position from the top of the {top : 40px}
page can be specified as a distance
or a percentage of the screen.
left The position from the left edge of {left : 50%}
the page can be specified as a
distance or a percentage of the
screen.
width The width of the element can be {width : 5cm}
specified as a percentage of the
screen or by using pixels, points,
inches, or centimeters.
height The height of an element can be {height : 30%}
specified using a percentage of the
screen or by using pixels, points,
inches, or centimeters.
z-index The z-index is an integer which {z-index : -1}
specifies the number of the layer
on which the element is located.
The smaller the number the lower
the layer is positioned (i.e. the
lowest numbered layers are in the
back with other elements on top of
them).
overflow visible {overflow : auto}
auto
hidden
scroll

visibility hidden {visibility : hidden}
visible

REVEAL TRANSITIONS

The following is a list of values that may be used to create transitions from one page
to the next.

Name of Transition Value
Box in 0
Box out 1
Circle in 2
Circle out 3
Wipe up 4
Wipe down 5
Wipe right 6
Wipe left 7
Vertical blinds 8
Horizontal blinds 9
Checkerboard across 10
Checkerboard down 11
Random dissolve 12
Split vertical in 13
Split vertical out 14
Split horizontal in 15
Split horizontal out 16
Strips left down 17
Strips left up 18
Strips right down 19
Strips right up 20
Random bars horizontal 21
Random bars vertical 22

Random 23

Use these properties to create a transition for entering or exiting a page. Place the
META tag between the head tags and specify the http-equiv parameter as "Page-
Exit" or "Page-Enter." Specify the duration of the transition in seconds. Use the
integer constant for the transition to specify the type of transition. The code in the
example below displays a random transition which takes 3 seconds to completely
reveal the page whenever the page is visited.

<META HTTP-EQUIV="Page-Enter"
CONTENT="RevealTrans(Duration=3, Transition=23)">

A sample of the effect can be seen by clicking here.

WEB PAGE DESIGN USING JAVASCRIPT

THE BASICS

JAVASCRIPT uses a subset of the programming language JAVA to provide a high
level of interactivity on a web page. JavaScripts are stored within an HTML
document and are interpreted by the web browser.

JavaScripts may be located within the HTML code at the point in the page where
they are to appear on the screen or they may be written using functions. Functions
are small subprograms that are stored between the head tags of an HTML
document and are called on to be executed when a particular event occurs.

Whether the script is stored between the head tags or within the body of the HTML
document, it must be enclosed in script tags. Also, a set of HTML comment tags are
typically used inside the script tags so that older browsers that do not support
JavaScript will ignore the script and continue to process the page without errors.

Following is an example of the script and comment tags:
<script language="javascript">

</script>

Be aware that JavaScript is case sensitive...the difference between a working script
and an error message can be one capital letter.

ALERT BOXES

To pop up an alert box include the following line of code inside of script tags in the
body of your HTML document. Please note that the processing of the page will stop
until the viewer responds to the alert box.

alert ("Place the text to be displayed in the alert box between these quotes.")

Other types of pre-made dialog boxes are available such as the prompt and confirm
boxes. In order to take full advantage of the features of these dialog boxes you must
write more JavaScript code which can use the values that are returned by the dialog
boxes.

The following statements will pop up a dialog box that requires a yes or no answer
(OK or Cancel). If the answer is OK then the variable named answer has a value of
true and if the answer is Cancel then the variable named answer has a value of false.
You can then use an if statement in the JavaScript code to respond appropriately.

var answer = confirm ("Are you sure you want to quit?")
if (answer==true)
{
window.close()
}
The following code will pop up a dialog box that asks the user to enter some sort of
information. If the user clicks OK the information they entered is stored in the
variable. The second set of quotation marks inside of the prompt statement make
the contents of the text box blank when the dialog box is displayed.

var response = prompt ("What is your name?" ,"")
document.write ("<font size=7 color=red face=arial>Hello " + response +
"!")
Notice that in the last two examples the window and document objects were used.
Window refers to the browser window and document refers to the page being
displayed. The use of a dot after the name of the object allows actions to be
performed on that object or properties of that object to be modified. In this next
example, the navigator object is referenced in order to display the browser name
and version.

alert ("You are using " + navigator.appName + " version " +
navigator.appVersion + ".")

POP-UP WINDOWS

An additional browser window may be opened using a simple JavaScript. The open
method contains three parts as in the following example: the name of the document
or url of the web site to be displayed in the new window, the name that may be used
to refer to the browser window (requires more code than is shown here), and the
properties of the new window. Please note that the properties are all listed in one set
of quotation marks and are separated by commas.

open ("myfile.html", "mywin", "height=200, width=200, titlebar=false")
The following properties may be used to control the appearance of the new window:

Feature Example Description
height height = 200 determines the height of the new window in pixels
width width=200 determines the width of the new window in pixels
titlebar titlebar=false removes the title bar from the new window
includes the url / address text box in the new
location location
window
menubar menubar includes a menu bar in the new window
resize resize=off makes the new window a fixed size
scrollbars scrollbars adds scrollbars to the new window
status status includes a status bar for the new window
toolbar toolbar=yes adds a toolbar for the new window

WRITING FUNCTIONS

Functions are small subprograms that are located within script tags between the
head tags of an HTML document. Functions are executed when they are called by
name from an event handler within the body of an HTML document.

The basic structure of a function is as follows:

function NameOfFunction( )
{
Include JavaScript Code Here
}

EVENT HANDLERS

The following example demonstrates the use of event handler onclick as well as the
use of styles to control the appearance of buttons. Note that instead of using
type=submit for the button the code simply says type=button. Copy and paste this
entire set of code in to a new document and test it out.

<html>
<head>
<title>Sample</title>
<style type="text/css">
#bigbutton {background-color : yellow; font-family : arial; color : blue;

font-size :18px; height : 50px; border-width : 0.2cm; border-color : red}
</style>
</head>
<body>
<form name=myform>
<input type=button name=mybutton id=bigbutton value="CLICK ME!"
onclick="window.location='http://www.disney.com'">
</form>
</body>
</html>
Changing the code for the button to read onclick="myfunction( )" will result in
exactly the same thing as the previous example if the following function is included
in a script between the head tags. Typically, you would write a function only if the
event required more than one thing to happen.

function myfunction( )
{
window.location = "http://www.disney.com"
}
The following are some of the event handlers that exist in javascript:

onfocus onblur onselect onchange
onsubmit onclick onmouseover onmouseout
onload onunload onabort onerror
onreset onkeypress onkeyup onmousedown
onmousemove onmouseup onmove onresize

POP-UP MENUS

Pop-Up Menus can be quickly created by using the select tag as it was used in forms
to create a drop down list. Set the value of each of the options in the select tag to the
url of the new page to be displayed. Use the onchange event handler to set the
location of the window to the selected value in the drop down list. For example, if
the form is named myform, the select tag is named mychoices, and the value of each
option is a url then the statement window.location =
document.myform.mychoices.value will take you to the new page that was selected
from the drop down list.

By default only one item in a list is displayed by a select statement until the viewer
clicks on the down arrow to expose the rest of the list. To display more that one item
at a time (and create a text box with a vertical scrollbar) include the size attribute in

the select tag. For example, size=5 will display the first five items in the list and add
a vertical scroll bar to the box if there are more than 5 items in the list.

MOUSEOVERS

A mouseover refers to the effect that occurs when the properties of an object are
changed if the mouse is positioned over the top of the object and then again if the
mouse is removed from the object. The quickest way to generate a mouseover is to
use the onmouseover and onmouseout event handlers in a form of in-line style.

Visit the style section of the DHTML page of this web site to see an example of
mouseovers used with text as an in-line style. Any style property that applies to a
particular object can be changed as the result of a mouseover.

Performing mouseovers with a graphic is not much different than with text. When
the desired event occurs (onmouseover, onmouseout) change the source of the
graphic as in the example that follows:

<img src="pic1.jpg" onmouseover="src='pic2.jpg'"
onmouseout="src='pic1.jpg'">

SCROLLING TEXT

Since the marquee tag is only supported by Internet Explorer it is a good idea to
avoid it as much as possible and use a JavaScript to generate scrolling text instead.
With this JavaScript it is also quite easy to place the scrolling text on the status bar
instead of in the document itself by using window.status as the destination for the
message. The following function will generate a scrolling message in a text box
named mymessagebox which is part of a form named myform. The event handler
onload must also be used in the body tag to call the function when the page loads.

var message = "This is a test... "
var position = 0
function mymessage( )
{
document.myform.mymessagebox.value=
message.substring(position, message.length) +
message.substring(0, position)
position = position + 1
if (position > message.length)
{
position = 0
}

window.setTimeout("mymessage( )", 300)
}

DATES AND TIMES

Dates and times are often displayed on web pages to indicate when a page was last
updated, when a page was loaded, or to display a countdown to a particular event.
Displaying the date and time of the last update is a good practice to get in to for all
of your pages because frequent updates are one sign of a quality site. The date/time
stamp lets the viewer know how recent the information is and therefore provides
one indication of validity. To display the date and time of the last update (the last
time the document was saved) use the following one line inside of script tags:

document.write ("This page last updated " + document.lastModified)
To display the current time and date on a web page you must declare a variable of
type Date ( var now = new Date). The variable can then be used to access various
parts of the date and time including day of the week, month, day of the month, year,
hours (in military time), minutes, and seconds. Assuming that now is the variable
declared of type Date the following table describes how to access the parts of the
date and time. Each of the function calls may be used in a document.write statement
to display the result.

Function Call Description
Returns a number between 0 and 6 for the day of the
now.getDay( )
week (Sunday is 0, Monday is 1,...)
Returns a number between 0 and 11 for the month
now.getMonth( )
(January is 0, February is 1,...)
now.getDate( ) Returns the number of the day in the month (1 - 31)
now.getFullYear( ) Returns the four digit year
now.getHours( ) Returns the number of hours on the clock (0 - 23)
now.getMinutes( ) Returns the number of minutes on the clock (0 - 59)
now.getSeconds( ) Returns the number of seconds on the clock (0 - 59)

One way to convert the numbers for the month and day of week in to words is to use
if statements. Using a lot of if statements is not the most efficient way to display the
words, but it is the method that requires the least amount of programming
knowledge. Examine the following example. Notice the condition that follows the
word if is in parentheses and that a double equal sign is used for the comparison. A

single equal sign will actually make the condition true no matter what so January
would always be displayed.

if (now.getMonth( ) == 0)
document.write ("January")
The following function would display a working clock if your page contained a form
called myform which contained a text box named mybox and the function was called
using the onload event handler in the body tag. More code would need to be added
to assure that the minutes and seconds always used two digits.

function myclock( )
{
var now = new Date
document.myform.mybox.value=
now.getHours( )+":"+now.getMinutes( )+":"+now.getSeconds( )
window.setTimeout ("myclock( )",1000)
}
To display a countdown to a future date, you will need two variables of type new
Date. One of them will need to be set to the date that you are targeting with your
countdown. The declarations would look as follows if you were going to count down
to New Year's Day.

var now = new Date
var then = new Date("January 1, 2002")
The variable now in the above example actually holds the number of milliseconds
that have passed since the computer started counting until now. The variable then in
the above example actually holds the number of milliseconds that will have passed
between the time the computer started counting and January 1, 2002. By subracting
the two amounts and storing the answer in a new variable you will know the
number of milliseconds between now and your target date. With a little division, this
number can be converted to the number of days between now and your target date.
In order to display the result as an integer, you will need to use the Math.ceil
function as in the following example which uses the variable numdays to hold the
number of days to be displayed. Ceil is short for ceiling which implies that the
number will be rounded up to the nearest whole number.

document.write("Only " + Math.ceil(numdays) + " days until New Year's!")

INTERACTIVE FORMS

Forms can be used for a lot more than just submitting information through email.
Forms can be made to perform all sorts of actions when buttons are clicked.
Attached is a document containing the code for a complete web page which you can
view as you learn about writing functions to create interactive forms. Save a copy of
the document sample.txt to your folder as an html document and study how all

three of the included functions work together to produce the desired results. Pay
particular attention to the following items:

1. In function dowork the library function isNaN is used. The name of this
function means "is not a number." This is used to identify whether or not the
viewer has accidently entered text in the box where they were supposed to
enter a number.

2. In the same if statement the line document.myform.mybox.focus( ) is used to
place the cursor in the desired text box. Focus is also used to place the cursor
in the first box when the page loads by using the onload event handler in the
body tag.

3. The if statement has been extended to form an if...else statement. If the
condition following the if is not true then the browser will execute the
statements listed after the else. Notice that braces have been used to include
more than one statement after both the if and the else.

4. One of the statements listed after the else uses the library function parseInt
to chop off everything that comes after the decimal point in the variable ans.
The multiplication and division by the number 100 allow the decimal point to
be moved two places in each direction so that the number can be rounded to
two decimal places.

5. When function dowork calls function squareme it passes the value of the
variable num as a parameter. The function heading for the function
squareme is set up to receive this value and store it in the variable thisone.
The variable thisone can then be used to do the math.

6. The return statement in function squareme sends the result of the math back
to the statement that originally called the function. The answer is therefore
stored in the variable ans inside of function dowork.

7. The type for each of the buttons is listed as button instead of submit or reset.
This implies that the buttons are performing actions other than the standard
actions associated with submitting or resetting a form.

Planning for a Variety of Browsers

What’s the Problem?
Every browser contains a program called a parser that interprets the markup tags
in an HTML file and displays the results. The logic for interpreting the tags varies
from browser to browser.

What is and isn’t Supported? (a few examples)
 Only newer browsers support Cascading Style Sheets.
 Netscape Navigator does not support the marquee tag, but Internet
Explorer does.
 Internet Explorer does not support the blink tag which is supported by
Netscape Navigator.
 Newer versions of Internet Explorer may not support some JAVA applets
(Microsoft is promoting its own version of JAVA called J++).
 Lynx is a text only browser used in many academic environments.
 America Online (AOL) uses a completely different environment than
standard web browsers.
 Some browsers do not recognize blank spaces in the URL.
 The font tag has been designated as a deprecated element in HTML 4.0
by the W3C. This means that eventually browsers will stop supporting the
tag. (W3C is attempting to separate structure from style.)

How do Designers Deal With This? (3 different approaches)
 Code to the lowest common denominator. Do not use any HTML that is
part of the latest standard…stick to the next-to-latest standard.
 Code on the cutting edge. Force the visitors to your web site to keep up
with you. Be prepared to lose visitors because they aren’t willing to upgrade.
 Code for a specific browser. Warn your visitors that they need a specific
browser to best view your site. This method works best on an intranet rather
than on the internet as a whole.

A Few Tips
 Use browser-safe colors (see the colors page for more information).
 Test your page in as many browsers as possible. Although you have
followed the “rules” for all of the browsers you might still get some surprises.
 Plan for multiple versions of a browser, not just the latest release. Many
people do not upgrade their browsers just because a newer version has been

released. Sometimes older computers do not have the processing power or
disk space required for a newer version of a browser.
 Know your audience. If your page is geared to highly technologically
literate people then it is probably ok to code on the cutting edge.
 Test your page with the graphics turned off. Always use the alt attribute.
 Use a browser sniffer that detects the user’s browser type when they
access your site. This requires extra coding in order to plan for all of the
possibilities.
 Plan for multiple screen resolutions as well as multiple browsers. Allow
the amount of white space to vary with the resolution or code for the lowest
common denominator (640 x 480). Avoid the possibility of horizontal scroll
bars appearing.

Checking Out the Browsers
The following web sites provide information on a variety of browsers.
 www.browsers.com
 www.browserwatch.com
 www.whichbrowser.com
 www.operasoftware.com (Opera is popular in Europe.)

Another Interesting Tidbit
Visit www.cast.org/bobby and download Bobby, a tool that checks your web page
code for compatibility with the World Wide Web Consortium’s (W3C) guidelines
for accessibility by physically challenged people. At the bottom of its report
Bobby also provides information on browser compatibility and download time.

USEFUL LINKS

Layout Tips

Yale Web Style Guide
Web Design Guide
Web Pages That Suck

HTML
A Beginner's Guide to HTML
Here's Wilbur
HTML: An Interactive Tutorial for Beginners
Advanced HTML Tutorial
HTML Goodies

DHTML
The Dynamic Duo
Dynamic Drive

JAVAScript
JavaScript Tutorials

Clip-Art
AAA Clip-Art Gallery

Common Plug-ins / Helper Applications

Symbol Plug-in Description Web Site URL
Acrobat View, navigate, and print www.adobe.com
Reader Portable Document Format
(PDF) files – documents
formatted to look just as
they look in print
SVG Viewer The Scalable Vector www.adobe.com
Graphics (SVG) format is
an open-standard vector
graphics language that lets
you design Web pages with
high-resolution graphics
that can contain
sophisticated elements,
such as gradients,
animation, and filter
effects, using plain text
commands.

Cosmo Player View 3-D and other virtual www.cosmosoftware.com
reality applications written
in Virtual Reality Modeling
Language (VRML)
Flash Player View dazzling graphics and www.macromedia.com
animation, hear outstanding
sound and music; display
Web pages across entire
screen
Liquid Player Listen to and purchase CD- www.liquidaudio.com
quality music tracks and
audio CDs over the
Internet; access MP3 files
QuickTime View animation, music, www.apple.com
audio, video, and virtual
reality panoramas and
objects directly in a Web
page
RealJukebox Play MP3 files; create www.real.com
music CDs
RealPlayer Live and on-demand near- www.real.com
CD-quality audio and
newscast-quality video;

stream audio and video
content for faster viewing
RealDownload Pause and resume www.real.com
downloads; If your
download gets cut off,
reconnect and continue
from where it left off;
Schedule downloads when
you're not using your
computer or when the
network isn't so busy;
Never misplace a download
thanks to the special "My
Download Files" folder
Shockwave Experience dynamic www.macromedia.com
interactive multimedia,
graphics, and streaming
audio
Stamps.com Print postage from you www.stamps.com
computer onto envelopes
and labels

Common File Formats on the Internet

GRAPHICS FILE FORMATS
FILE
ACRONYM NAME EXTENSION DESCRIPTION
JPEG (pronounced JAY- Joint .jpg Saved using lossy
peg) Photographic compression techniques to
Experts Group reduce the file size for
faster downloading; Often
used for scanned photos,
artwork, and other images
that include smooth color
variations; May be used as
a progressive graphic
GIF (pronounced jiff) Graphics .gif Saved using lossless
Interchange compression techniques to
Format reduce file size for
downloading; Works best
for images with only a few
distinct colors like line
drawings and simple
cartoons; The compression
technique known as LZW
compression which is used
to make gifs is patented
and requires that people
making products to
produce gifs acquire a
license; Allows for
transparency, interlacing,
and animation; Allows a
maximum of 256 colors (8-
bit)
PNG (pronounced ping) Portable .png Patent-free replacement for
Network the gif; Compresses to
Graphics smaller sizes than gif, but
not as small as jpg;
Compression is lossless;
Supports transparency and
interlacing but not
animation; Not all browsers
support this format as of
yet
MNG Multiple-image .mng An improvement on the
Network PNG format which will
Graphics support animation; Still
exists as a “draft standard”
TIFF Tagged Image .tif
File Format
PCX PC Paintbrush .pcx
BMP Bitmap .bmp Saved by storing

information about each
pixel; Requires a large
amount of storage space
AUDIO FILE FORMATS
FILE
WAV (pronounced wave) Waveform .wav Straightforward recording
of sound; Often must be
compressed –otherwise 1
minute of audio can take
up to 1 MB of storage
space
MIDI (pronounced mid- Musical .mid Standard that defines how
dee) Instrument sounds are represented
Digital electronically by digital
Interface musical devices; Sounds
are created from digital
instructions
MP3 .mp3 Near CD-quality
compressed audio that
requires 4 to 5 MB of
storage for 3 minutes of
audio
AU .au
VIDEO FILE FORMATS
FILE
MPEG Moving Picture .mpg Popular video compression
Experts Group standard which only
records key frames and
then predicts what the
missing frames should look
like
AVI Audio Video .avi Makes a record of one
Interleave complete frame and then
only records the
differences in the frames
that follow
DOCUMENT FILE FORMATS
FILE
PDF Portable .pdf Requires Adobe Acrobat
Document Reader; Displays a
Format document exactly as it will
be printed
PS PostScript .ps Adhere to the PostScript
page description language;
contain information about
how to format and print the
file
ASCII (pronounced ask- American .txt Plain text file which can be
ee) Standard Code read with almost any text

for Information editor or word processor
Interchange
OTHER FILE FORMATS
FILE
ZIP PKZIP .zip Compression routine for
PC software

Some of the Languages of the Web

FORMATTING LANGUAGES
ACRONYM FULL NAME DESCRIPTION
HTML Hypertext Markup Basic language for creating web pages;
Language HyperText refers to words that can take you to
other places via links; Markup refers to the fact
that the document in which you create your web
page with HTML is "marked up" with tags
enclosed in angle brackets
XML Extensible Markup A text based syntax especially designed to
Language describe, deliver, and exchange structured data;
Not meant as a replacement for HTML but as a
way to extend its power; Follows four basic rules:
(1) All elements must have start and end tags, (2)
All elements must be nested correctly, (3) All
attribute values must appear with quotation
marks, (4) All empty elements must be self-
identifying by ending with />; Known as a meta-
language because it lets you describe the
characteristics of a mark-up language
XHTML Extensible Hypertext Draft specification from the World Wide Web
Markup Language Consortium to recast HTML 4.0 as XML
PROGRAMMING LANGUAGES
JAVA JAVA Object-oriented programming language that runs
over the Internet on multiple platforms; Similar to
C++; Developed by Sun Microsystems in the mid
1990’s who gave it away in order to gain support
for it; Not guaranteed to be supported by later
versions of Internet Explorer due to problems
between Microsoft and Sun; Run using applets
SQL Structured Query Allows the selection of information from a
Language database
Perl Practical Extraction The most popular language for writing CGI scripts
and Reporting
Language
SCRIPTING LANGUAGES
JAVAScript JAVA Script Subset of the JAVA programming language;
Compatible with most web browsers
VBScript Visual Basic Script Microsoft’s adaptation of the Visual Basic
programming language for the web; Not
universally compatible
CGIScript Common Gateway Used to collect data that a user has entered in an
Interface HTML form and then pass it to an application for
processing; CGI programs can be written in a
variety of programming languages including C++
and Visual Basic

DHTML Dynamic HTML Generic name for all innovations in scripting which
allow web pages to respond to and interact with
the user by changing their appearances based on
user actions
STYLE LANGUAGES
CSS Cascading Style Allows complete specifications of style for HTML
Sheets documents; Uses over 50 properties that affect
the display of web pages; Information can be
contained either within the HTML document or in
a separate stylesheet
XSL Extensible Style Created for use with XML documents
Language
OTHER LANGUAGES
VRML (pronounced Virtual Reality Defines how 3-D images display on the web; Can
ver-mal) Modeling Language be used to create a VR world which contains
infinite space and depth; Requires a VRML
browser or plug-in
CONVERSION SOFTWARE
PRODUCT NAME DESCRIPTION
Microsoft Office (Word, Excel, PowerPoint, Many office applications now convert their
…) documents to HTML; Not quite WYSIWYG;
Creates less than standard HTML code that is
Lotus Freelance Graphics difficult to update and debug; May produce
compatibility problems with different browsers
AUTHORING SOFTWARE
Adobe GoLive
Adobe PageMill WYSIWYG Editors allow someone inexperienced
Microsoft FrontPage with HTML to layout a web page; Still must tweak
NetObjects Fusion the page using HTML
Macromedia Dreamweaver
HTML EDITORS
Allaire HomeSite HTML Editors include features that NotePad lacks
Hot Dog Pro such as syntax checking

Web Design Unit.doc

More Related Content

Similar to Web Design Unit.doc

More from butest

Web Design Unit.doc