Accessibility, Images, and Forms/CGI Images, and Forms/CGI 5 of 85 3/12/2008 9:57 AM 10 Quick Tips...

Accessibility, Images, and Forms/CGI http://localhost:8080/cocoon/projects/cscie12/slides/20080312/handout.html

1 of 85 3/12/2008 9:57 AM

Table of Contents | All Slides | Link List | Examples | CSCI E-12

Accessibility, Images, and Forms/CGIMarch 13, 2008

Harvard University Division of Continuing Education

Extension School

Course Web Site: http://cscie12.dce.harvard.edu/

Copyright 1998-2008 David P. Heitmeyer

Instructor email: [email protected] Course staff email: [email protected]


2 of 85 3/12/2008 9:57 AM

Examples of Website Evolution

The Internet Archive Wayback Machine

Examples

Southwest Airlines

The BBC

Commonwealth of Massachusetts

Boston.com

Internal Revenue Service

University of Michigan


3 of 85 3/12/2008 9:57 AM

Accessibility

"The power of the Web is in its universality. Access by everyone regardless of disabilityis an essential aspect." -- Tim Berners-Lee , W3C Director and inventor of the World Wide Web

Two initiatives to be aware of:

W3C Web Accessibility Initiative (WAI)

United States Government Section 508


4 of 85 3/12/2008 9:57 AM

W3C Web Accessibility Initiative (WAI)

W3C's Web Accessibility Initiative (WAI) http://www.w3.org/WAI/

WAI Resources on Introducing Web Accessibility

Quick Tips to Make Accessible Web Sites

Web Content Accessibility Guidelines (WCAG) Overview

W3C WAI Guidelines: Themes

Ensuring Graceful Transformation Guidelines 1 to 11

Making Content Understandable and Navigable Guidelines 12 to 14

Three levels of conformance:

Priority 1: must 16 checkpoints

Priority 2: should 30 checkpoints

Priority 3: may 19 checkpoints


5 of 85 3/12/2008 9:57 AM

10 Quick Tips to Make Accessible Web Sites from the W3C

This content taken from WAI, Quick Tips to Make Accessible Web Sites, http://www.w3.org/WAI/References/QuickTips/Overview.php

The links in the Quick Tips below mostly go to the techniques documents that provide implementation guidance - including explanations, strategies, and detailed markup examples.

Images & animations: Use the alt attribute to describe the function of each visual.1.Image maps. Use the client-side map and text for hotspots.2.Multimedia. Provide captioning and transcripts of audio, and descriptions of video.3.Hypertext links.Use text that makes sense when read out of context. For example, avoid "click here."

4.

Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.

5.

Graphs & charts. Summarize or use the longdesc attribute.6.Scripts, applets, & plug-ins. Provide alternative content in case active features areinaccessible or unsupported.

7.

Frames. Use the noframes element and meaningful titles.8.Tables. Make line-by-line reading sensible. Summarize.9.Check your work. Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG

10.

© W3C (MIT, INRIA, Keio) 2001/01


6 of 85 3/12/2008 9:57 AM

Accessibility Implementation

Organizations

W3C WAI

Center for Applied Special Technology (CAST)

Web Accessibility in Mind (WebAIM)

Tools and Resources

Resource List: WAI Resources

Opera Browser: Using Opera to Check for Accessibility

Tool: WAVE from WebAIM


7 of 85 3/12/2008 9:57 AM

Example: ready.gov

Ready.gov

Text View

Opera "Emulate text browser" view:

Two techniques:

Use links that have a negative margin

view plain print ?

<body> 1. <a href="#nav" class="skipnav" title="Skip to navigation">Skip to navigation</a> 2. <a href="#content" class="skipnav" title="Skip to content">Skip to content</a> 3. 4.


8 of 85 3/12/2008 9:57 AM

Use a 1×1px images

view plain print ?

a.skipnav { 1. color:#005825; 2. height:1px; 3. left:-100px; 4. overflow:hidden; 5. position:absolute; 6. top:-100px; 7. width:1px; 8.} 9. 10.

view plain print ?

<body> 1. <a href="#mainnav"><img src="_images/s.gif" alt="Skip to main navigation"></a> 2. <a href="#content"><img src="_images/s.gif" alt="Skip to main content"></a> 3. 4. 5.


9 of 85 3/12/2008 9:57 AM

Images

Two ways of including images:

Markup: img element

alt attribute

height and width attributes

CSS: background-image property

view plain print ?

<img src="images/shield.png" 1.

alt="Harvard Shield, 'Veritas'" height="328" width="281"/> 2.

3.

view plain print ?

#header { 1.

background-image: url(images/shield.png); 2.

repeat: no-repeat; 3.

} 4.

5.


10 of 85 3/12/2008 9:57 AM

Graphics Tools

Adobe Photoshop

Adobe Fireworks

Corel Paint Shop

The Gimp

Graphics: Reminders about FTP and Unix

Use binary mode when transferring graphic files via FTP.

Remember that UNIX is case-sensitive.

image.GIF

image.gif


11 of 85 3/12/2008 9:57 AM

Color Units

256 colors in each channel (Red, Green, Blue). Values can be

decimal numbers (0 to 255) background-color: rgb(153,0,153);

hexadecimal numbers (00 to ff) backgroundcolor: #990099; background-color: #909;

percentages (0 to 100%) background-color: rbg(60%,0%,60%);

Red-Green-Blue (RGB) Color

RGB color is a 24-bit system (16 million colors)8 bits (256 colors) for each channel (red, green, blue).

28x28x28 = 2(8 + 8 + 8) = 224x = 16,777,216

Based on the properties of light not dyes

Each channel can be expressed as a number from 0 to 255.

Specifying values:

Hexadecimal: #RRGGBB

RR is the hexadecimal value of the red channel

GG is the hexadecimal value of the green channel

BB is the hexadecimal value of the blue channel

Percentage (0% - 100%)

Number (0 - 255)


12 of 85 3/12/2008 9:57 AM

Color Depth

Bits Colors

1 21 = 2

2 22 = 4

3 23 = 8

4 24 = 16

5 25 = 32

6 26 = 64

7 27 = 128

8 28 = 256

16 216 = 65,536

24 224 = 1.7 x 106 (millions)

32 232 = 4.3 x 109


13 of 85 3/12/2008 9:57 AM

Image and File Size

Get an acceptable image in the least number of bytes possible.

Overall Image Dimensions

Format (GIF, JPEG, PNG)

Compression

Download Times

Download Time Calculator

How long to download 226 kb on a 56,000 bps ("56k") modem?

226 kb = 226 kb × 1024 bytes/kb × 8 bits/byte = 1,851,392 bits 1,851,392 bits / 56,000 bits/s = 33 s

Download Times for 83kb Page


14 of 85 3/12/2008 9:57 AM


15 of 85 3/12/2008 9:57 AM

Vector Graphics and Bitmap Graphics

Bitmap Graphic

Bitmap Graphic Formats on the Web

JPEG

GIF

PNG

Graphic type in which each pixel that comprises the image is described.

A 100 x 100 pixel bitmap image must encode information about 10,000 pixels. A 200 x 200 pixel bitmap image must encode information about 40,000 pixels.

Vector Graphic

Vector Graphic Formats on the Web

SVG

SWF (Flash)

Graphic type in which the image is described by a mathematical description.

Amount of information encoded is independent of the scale of image. Forexample, a circle is described by the equation

x2 + y2 = r2 whether or not the radius is 100 pixels or 1000 pixels

Original image: Original image:

Magnified (16x) Magnified (16x)


16 of 85 3/12/2008 9:57 AM

Graphics Formats for the Web

Property GIF Graphics Interchange Format

JPEG Joint Photographic Experts

Group

Color System

8 bit indexed (256 colors) RGB (24 bit; millions of colors)8 bit in

RGB (

Compression Lossless Compression (LZW; horizontal repeating units)

"Lossy" Compression (compression optimized for gradual color changes)

Lossless Co

Other Features .gif file extension

Transparency

Animation

.jpg and .jpeg file extensions

No Transparency

No Animation

.png fil

Transp

Anima

Typical UsesIllustrations (logos, icons)

Animated banners and icons

Images with small dimension

Photographs Any

Property GIF Graphics Interchange Format

JPEG Joint Photographic Experts

Group

Photograph 250 × 188 px

29.3 kb 16.8 kb 25.8 kb (inde

Illustration 148 × 179 px

1.47 kb

6.12 kb 1.02 kb (inde


17 of 85 3/12/2008 9:57 AM

Hot Air Balloon image is in the Public Domain and was obtained from PD Photo.

Illustration image from the original works of David Heitmeyer


18 of 85 3/12/2008 9:57 AM

Palettes

Palettes

Exact (if 256 or fewer colors)

Adaptive (weighted based upon colors in document)

Web Palette (216 Web Safe Colors)

System

Windows

Macintosh

Exact Palette

Image Palette

Adaptive Palette

Image Palette


19 of 85 3/12/2008 9:57 AM

Web 216 Palette

Image Palette


20 of 85 3/12/2008 9:57 AM

Adaptive Palette - Dither and Shift

Color Shift

Image (16 colors; Color Shift) C

Dither

Image (16 colors; Dither) C


21 of 85 3/12/2008 9:57 AM

GIF Images and Bit Depth: Color Shift

Properties Image Palette (adaptive)

8 bit

256 colors

46.3 kb

7 bit

128 colors

36.2 kb


22 of 85 3/12/2008 9:57 AM

6 bit

64 colors

28.9 kb

5 bit

32 colors

21.9 kb

4 bit

16 colors

16.5 kb


23 of 85 3/12/2008 9:57 AM

3 bit

8 colors

10.9 kb

2 bit

4 colors

7.31 kb

1 bit

2 colors

2.84 kb


24 of 85 3/12/2008 9:57 AM

GIF Images and Bit Depth: Dither

Properties Image Palette (adaptive)

8 bit

256 colors

64.9 kb

7 bit

128 colors

52.3 kb


25 of 85 3/12/2008 9:57 AM

6 bit

64 colors

43.4 kb

5 bit

32 colors

34.7 kb

4 bit

16 colors

26.7 kb


26 of 85 3/12/2008 9:57 AM

3 bit

8 colors

18.6 kb

2 bit

4 colors

14.2 kb

1 bit

2 colors

5.86 kb


27 of 85 3/12/2008 9:57 AM

Compression for Indexed GIF and PNG

GIF LZW compression operates on horizontal blocks of the same color. Here are two images thatare identical except for a 90 degree rotation. The vertical stripe GIF image is nearly twice as largeas the horizontal stripe GIF image. The PNG images are the same size.

Format Horizontal Vertical

GIF 471 bytes 911 bytes

PNG 232 bytes 221 bytes

Compression and Dithering

A purple shade was created by alternating red and blue pixels. 32× magnification:

GIF PNG (indexed)


28 of 85 3/12/2008 9:57 AM

Dither 200×200px

601 bytes

225 bytes

Solid 200×200px

303 bytes

209 bytes


29 of 85 3/12/2008 9:57 AM

JPEG

The amount of compression (quality of image) for a JPEG image can be chosen (from a scale of 0to 100). The image quality is inversely related to the amount of compression since thecompression algorithm is "lossy".

Properties Image

Quality: 80

34.1 kb

Quality: 70

26.0 kb


30 of 85 3/12/2008 9:57 AM

Quality: 60

22.4 kb

Quality: 50

17.0 kb

Quality: 40

14.3 kb


31 of 85 3/12/2008 9:57 AM

Quality: 30

6.97 kb

Quality: 20

4.80 kb

Quality: 10

3.75 kb


32 of 85 3/12/2008 9:57 AM

Quality: 1

3.21 kb


33 of 85 3/12/2008 9:57 AM

JPEG Compression Artifacts

Typically first appears at boundaries in images. Portions of image can also become "blocky".


34 of 85 3/12/2008 9:57 AM

Aliased and Anti-aliased Text

Aliased Anti-aliased

Format Aliased Anti-alia

GIF 0.79 kb 1.9 kb

PNG (indexed)

0.62 kb 1.7 kb

PNG (24-bit)

1.12 kb 2.6 kb

JPEG 5.5 kb 4.9 kb

JPEG JPEG Compression artifacts:


35 of 85 3/12/2008 9:57 AM


36 of 85 3/12/2008 9:57 AM

Animation: GIF

Loading...

Aside: Banner Advertisements


37 of 85 3/12/2008 9:57 AM

The Interactive Advertising Bureau (IAB) has established guidelines for sizes of banner ads(interactive marketing units; IMUs)A common size is 728 x 90 pixels:

Interactive Advertising Bureau

Ad Unit Guidelines


38 of 85 3/12/2008 9:57 AM

Transparency

With GIF and PNG images, a color in the palette can be designated as "transparent". This lets anybackground colors or background images show through the transparent portions.

Format Background Color Background Image

GIF No transparency

GIF White is transparent

GIF Blue is transparent

PNG No transparency


39 of 85 3/12/2008 9:57 AM

PNG White is transparent

PNG Blue is transparent


40 of 85 3/12/2008 9:57 AM

Cartoon Art

GIF 1,511 bytes

PNG; 8 bit 1,031 bytes

PNG; 24 bit 1,944 bytes

JPEG (Quality 6) 1,530 bytes

JPEG (Quality 100) 14,660 bytes

Original image from the works of David P. Heitmeyer


41 of 85 3/12/2008 9:57 AM

Imagemaps

Image itself. usemap attribute for img

Definition of "hot spots" for image. map element

area element

attributes

shape="circle"

shape="rect"

shape="poly"

coords

Imagemap Example

Image

Map defines the coordinates of "hot spots" and URLs

Example 7.1

Example 7.1 Source:

Example 7.1 Rendered:

Units are in Pixels, (0,0) is the upper left corner of the image.

Circle: center (106, 18); radius = 17

Rectangle: vertices at (1,4), (60,4), (1,32), (60,32)

Triangle: vertices at (170,0), (150,32), (190,32)

view plain print ?

<img src="images/shapes.gif" width="192" height="39" usemap="#shapes" alt="Shapes" s1. 2.<map id="shapes" name="shapes" > 3. <area shape="circle" coords="106,18,17" href="http://en.wikipedia.org/wiki/Circle" a4. <area shape="rect" coords="1,4,60,32" href="http://en.wikipedia.org/wiki/Rectangle" 5. <area shape="poly" coords="150,34,190,34,170,0" href="http://en.wikipedia.org/wiki/Tr6.</map> 7.


42 of 85 3/12/2008 9:57 AM

Site Icons

favicon.ico at root of web site

or "link" element in "head" element of XHTML/HTML document

Formats

Microsoft's ICO format (image/vnd.microsoft.icon

PNG

GIF

Size and Colors: typically 16×16 with 8-bit color (256 colors)

MSIE uses http://example.com/facicon.ico for icons in the bookmark list.

Firefox uses favicon.ico or link element, rel="icon", in the location bar, bookmark list and tabdisplay.

The code in the head of the XHTML would look something like:

view plain print ?

 1.<link rel="icon" href="images/mozilla-16.png" type="image/png"/> 2. 3.<link rel="shortcut icon" href="images/mozilla.ico" type="image/vnd.microsoft.icon"/> 4. 5.


43 of 85 3/12/2008 9:57 AM

Other Image Formats

Bitmap. These are largely non-web based.

TIFF (Tagged Image File Format)

JPEG 2000

Vector. (Relevant to web development.)

Adobe Flash/SWF

Scalable Vector Graphics (SVG)


44 of 85 3/12/2008 9:57 AM

Forms: Introduction

Forms are the "front-end" for the HTTP Client to send information back to the HTTP Server. Thesubmitted information is passed from the HTTP Server to a server-side program that processesthe information and produces a response for the browser.

We are not yet discussing writing CGI programs -- only using them!


45 of 85 3/12/2008 9:57 AM

HTTP Client and Server

HTTP client makes request to server. Server responds to client.

HTTP client makes request to server. Server invokes CGI program; CGI program generatesresponse, returns content to server, which then responds to cl ient.


46 of 85 3/12/2008 9:57 AM

form

Attributes

method (GET|POST)

action (URL of CGI program)

enctype

Each element within a form has a name associated with it. When the information is sent back tothe server, the CGI program will access the information by name. Thus, the front-end form and theback-end program must use the same names.

While exploring forms, it is useful to use a simple "echo" CGI program, which will simply echo back the name/value information your form submitted (http://minerva.dce.harvard.edu/cgi-bin/echo.cgi).

Example 7.2

Example 7.2 Source:


Email Address: Submit Query

view plain print ?

<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="a1. <div> Email Address: 2. <input type="text" name="email" /> 3. <br/> 4. <input type="submit" /> </div> 5.</form> 6.


47 of 85 3/12/2008 9:57 AM

Text Field

Example 7.3

Example 7.3 Source:


Email Address: Year of Birth: Year of Birth:

Proceed

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <div> Email Address: 2. <input type="text" name="email" size="50" /> 3. <br/> Year of Birth: 4. <input type="text" name="year_of_birth" size="50" maxlength="4" /> 5. <br/> Year of Birth: 6. <input type="text" name="year_of_birth_2" size="5" maxlength="4" /> 7. <br/> 8. <input type="submit" name="action" value="Proceed" /> </div> 9.</form> 10.


48 of 85 3/12/2008 9:57 AM

Radio Buttons

Example 7.4

Example 7.4 Source:


Email Address: Please send me spam:

yes no

Proceed

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <div> Email Address: 2. <input type="text" name="email" size="50" /> 3. <br/> Please send me spam: 4. <br/> 5. <input type="radio" name="spam" value="yes" checked="checked" />yes 6. <br/> 7. <input type="radio" name="spam" value="no" />no 8. <br/> 9. <input type="submit" name="action" value="Proceed" /> </div> 10.</form> 11.


49 of 85 3/12/2008 9:57 AM

Checkbox

Example 7.5

Example 7.5 Source:


What ice cream do you like? Chocolate Herrell's Chocolate Pudding Chocolate Peanut Butter Vanilla Strawberry

Proceed

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <div> What ice cream do you like? 2. <br/> 3. <input type="checkbox" name="icecream" value="chocolate" />Chocolate 4. <br/> 5. <input type="checkbox" name="icecream" value="herrell's chocolate pudding" />Herrel6. <br/> 7. <input type="checkbox" name="icecream" value="chocolate peanut butter" /> 8. Chocolate Peanut Butter 9. <br/> 10. <input type="checkbox" name="icecream" value="vanilla" />Vanilla 11. <br/> 12. <input type="checkbox" name="icecream" value="strawberry" />Strawberry 13. <br/> 14. <input type="submit" name="action" value="Proceed" /> </div> 15.</form> 16.


50 of 85 3/12/2008 9:57 AM

Textarea

Example 7.6

Example 7.6 Source:


Comments

Proceed

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <div><strong>Comments</strong> 2. <br/> 3. <textarea rows="10" cols="50" >Please enter comments...</textarea> 4. <br/> 5. <input type="submit" name="action" value="Proceed" /> </div> 6.</form> 7.

Please enter comments...


51 of 85 3/12/2008 9:57 AM

Select and Option

Example 7.7

Example 7.7 Source:


Select your favorite New England states:

Proceed

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <div> Select your favorite New England states: 2. <br/> 3. <select name="state" size="3" multiple="multiple" > 4. <option value="CT" >Connecticut</option> 5. <option value="ME" >Maine</option> 6. <option value="MA" >Massachusetts</option> 7. <option value="NH" >New Hampshire</option> 8. <option value="RI" >Rhode Island</option> 9. <option value="VT" >Vermont</option> 10. </select> 11. <br/> 12. <input type="submit" name="action" value="Proceed" /> </div> 13.</form> 14.

ConnecticutMaineMassachusetts


52 of 85 3/12/2008 9:57 AM

Password

Example 7.8

Example 7.8 Source:


Secret word: Proceed

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <div> Secret word: 2. <input type="password" name="secretword" size="10" /> 3. <br/> 4. <input type="submit" name="action" value="Proceed" /> </div> 5.</form> 6.


53 of 85 3/12/2008 9:57 AM

Hidden

Example 7.9

Example 7.9 Source:


Proceed

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <div> 2. <input type="hidden" name="myhiddenvariable" value="myhiddenvalue" /> 3. <input type="submit" name="action" value="Proceed" /> 4. </div> 5.</form> 6.


54 of 85 3/12/2008 9:57 AM

File Upload

With file uploads, the enctype of the form needs to be multipart/form-data

Example 7.10

Example 7.10 Source:


Upload two files:

Browse...

Browse...

Upload

view plain print ?

<form method="post" enctype="multipart/form-data" action="http://minerva.dce.harvard.ed1. <div> 2. Upload two files:<br/> 3. <input type="file" name="file1" /> 4. <br/> 5. <input type="file" name="file2" /> 6. <br/> 7. <input type="submit" name="action" value="Upload" /> 8. </div> 9.</form> 10.


55 of 85 3/12/2008 9:57 AM

Disabled Form Input Elements

Example 7.11



Your email address: You have selected your favorite ice cream:

Chocolate Herrell's Chocolate Pudding Chocolate Peanut Butter Vanilla Strawberry

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <div>Your email address: 2. <input type="text" name="email" disabled="disabled" value="[email protected]. <div> You have selected your favorite ice cream: 4. <br/> 5. <input type="checkbox" name="icecream" disabled="disabled" checked="checked" valu6. <br/> 7. <input type="checkbox" name="icecream" disabled="disabled" checked="checked" valu8. Chocolate Pudding 9. <br/> 10. <input type="checkbox" name="icecream" disabled="disabled" checked="checked" valu11. Butter 12. <br/> 13. <input type="checkbox" name="icecream" disabled="disabled" value="vanilla" /> Vani14. <br/> 15. <input type="checkbox" name="icecream" disabled="disabled" value="strawberry" />St16. <br/> </div> 17.</form> 18.

[email protected]


56 of 85 3/12/2008 9:57 AM

Label Element

Labels are important for accessible forms.

label element lets us use markup to associate text with an input element.

id attribute for form input

label element for input label

for attribute in label to link label element with input via the value of id

Example 7.12



Do you watch NCAA Basketball?

Yes No

Submit Query

Example 7.13


view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <div> 2. <p>Do you watch NCAA Basketball?</p> 3. <input type="radio" name="basketball" id="basketball_y" value="Y" /> 4. <label for="basketball_y" >Yes</label> 5. <br/> 6. <input type="radio" name="basketball" id="basketball_n" value="N" /> 7. <label for="basketball_n" >No</label> 8. <br/> 9. <input type="submit" /> 10. </div> 11.</form> 12.


57 of 85 3/12/2008 9:57 AM



Proceed

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <div> What ice cream do you like? 2. <br/> 3. <input type="checkbox" name="icecream" id="icecream_chocolate" value="chocolate" /4. <label for="icecream_chocolate" >Chocolate</label> 5. <br/> 6. <input type="checkbox" name="icecream" id="icecream_hcp" value="herrell's chocolat7. <label for="icecream_hcp" >Herrell's Chocolate Pudding</label> 8. <br/> 9. <input type="checkbox" name="icecream" id="icecream_cpb" value="chocolate peanut b10. <label for="icecream_cpb" >Chocolate Peanut Butter</label> 11. <br/> 12. <input type="checkbox" name="icecream" id="icecream_vanilla" value="vanilla" /> 13. <label for="icecream_vanilla" >Vanilla</label> 14. <br/> 15. <input type="checkbox" name="icecream" id="icecream_strawberry" value="strawberry"16. <label for="icecream_strawberry" >Strawberry</label> 17. <br/> 18. <input type="submit" name="action" value="Proceed" /> </div> 19.</form> 20.


58 of 85 3/12/2008 9:57 AM

fieldset and legend

fieldset and legend elements can further help group related input fields.

Example 7.14



Name

First Name Last Name

Sports

Do you enjoy basketball? Yes No

Do you enjoy baseball? Yes No

Submit Query

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <div> 2. <fieldset> 3. <legend>Name</legend> 4. <label for="fname" >First Name </label> 5. <input type="text" name="fname" id="fname" size="30" /> 6. <br/> 7. <label for="lname" >Last Name </label> 8. <input type="text" name="lname" id="lname" size="30" /> 9. <br/> 10. </fieldset> 11. <fieldset> 12. <legend>Sports</legend> 13. <div>Do you enjoy basketball?</div> 14. <input type="radio" name="basketball" id="basketball_yes" value="Y" /> 15. <label for="basketball_yes" >Yes</label> 16. <br/> 17. <input type="radio" name="basketball" id="basketball_no" value="N" /> 18. <label for="basketball_no" >No</label> 19. <br/> 20. <div>Do you enjoy baseball?</div> 21. <input type="radio" name="baseball" id="baseball_yes" value="Y" /> 22. <label for="baseball_yes" >Yes</label> 23. <br/> 24. <input type="radio" name="baseball" id="baseball_no" value="N" /> 25. <label for="baseball_no" >No</label> 26. <br/> 27. </fieldset> 28. <input type="submit" /> 29. </div> 30.</form> 31.


59 of 85 3/12/2008 9:57 AM

fieldset and legend

You can apply CSS rules to fieldset and legend

Example 7.15


In style element (<style type="text/css">) within head element:

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <div> 2. <fieldset> 3. <legend>Name</legend> 4. <label for="fname" >First Name </label> 5. <input type="text" name="fname" id="fname" size="30" /> 6. <br/> 7. <label for="lname" >Last Name </label> 8. <input type="text" name="lname" id="lname" size="30" /> 9. <br/> 10. </fieldset> 11. <fieldset> 12. <legend>Sports</legend> 13. <div>Do you enjoy basketball?</div> 14. <input type="radio" name="basketball" id="basketball_y" value="Y" /> 15. <label for="basketball_y" >Yes</label> 16. <br/> 17. <input type="radio" name="basketball" id="basketball_n" value="N" /> 18. <label for="basketball_n" >No</label> 19. <br/> 20. <div>Do you enjoy baseball?</div> 21. <input type="radio" name="baseball" id="baseball_y" value="Y" /> 22. <label for="baseball_y" >Yes</label> 23. <br/> 24. <input type="radio" name="baseball" id="baseball_n" value="N" /> 25. <label for="baseball_n" >No</label> 26. <br/> 27. </fieldset> 28. <input type="submit" /> 29. </div> 30.</form> 31.


60 of 85 3/12/2008 9:57 AM


With Styles

Without Styles

view plain print ?

fieldset { 1. border: 2px dotted #900; 2. width: 50%; 3. padding: 0.5em; 4. margin: 1em; 5. background-color: #ff9; 6.} 7.legend { 8. font-family: Arial,Helvetica,sans-serif; 9. font-size: 1.1em; 10. font-weight: bold; 11.} 12.


61 of 85 3/12/2008 9:57 AM

optgroup

The optgroup element allows you to group a long select list.

Example 7.16



62 of 85 3/12/2008 9:57 AM

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <select name="school" > 2. <optgroup label="ACC" > 3. <option>Boston College</option> 4. <option>Clemson</option> 5. <option>Duke</option> 6. <option>Florida State</option> 7. <option>Georgia Tech</option> 8. <option>Maryland</option> 9. <option>Miami (FL)</option> 10. <option>North Carolina</option> 11. <option>North Carolina State</option> 12. <option>Virginia</option> 13. <option>Virginia Tech</option> 14. <option>Wake Forest</option> 15. </optgroup> 16. <optgroup label="Big 10" > 17. <option>Illinois</option> 18. <option>Indiana</option> 19. <option>Iowa</option> 20. <option>Michigan</option> 21. <option>Michigan State</option> 22. <option>Minnesota</option> 23. <option>Northwestern</option> 24. <option>Ohio State</option> 25. <option>Penn State</option> 26. <option>Purdue</option> 27. <option>Wisconsin</option> 28. </optgroup> 29. <optgroup label="Big XII" > 30. <option>Baylor</option> 31. <option>Colorado</option> 32. <option>Iowa State</option> 33. <option>Kansas</option> 34. <option>Kansas State</option> 35. <option>Missouri</option> 36. <option>Nebraska</option> 37. <option>Oklahoma</option> 38. <option>Oklahoma State</option> 39. <option>Texas</option> 40. <option>Texas A&M</option> 41. <option>Texas Tech</option> 42. </optgroup> 43. <optgroup label="Ivy League" > 44. <option>Brown</option> 45. <option>Columbia</option> 46. <option>Cornell</option> 47. <option>Dartmouth</option> 48. <option>Harvard</option> 49. <option>Penn </option> 50. <option>Princeton</option> 51. <option>Yale</option> 52. </optgroup> 53. <optgroup label="Pac 10" > 54. <option>Arizona</option> 55. <option>Arizona State</option> 56. <option>California</option> 57. <option>Oregon</option> 58. <option>Oregon State</option> 59. <option>Stanford</option> 60. <option>UCLA</option> 61. <option>USC</option> 62. <option>Washington</option> 63. <option>Washington State</option> 64. </optgroup> 65. </select> 66. <div> 67. <input type="submit" /> 68. </div> 69.</form> 70.


63 of 85 3/12/2008 9:57 AM


Boston CollegeBoston College

Submit Query


64 of 85 3/12/2008 9:57 AM

tabindex

Use the tabindexattribute to control the tabbing order of elements. tabindex can be an attribute of:

a

area

button

input

object

select

textarea

Example 7.17



Red: Green: Blue:

decimal percent hexadecimal

Submit

view plain print ?

<form method="get" action="http://cscie12.dce.harvard.edu/tools/colors.cgi" enctype="ap1. <table> 2. <tr> 3. <td rowspan="1" colspan="1" ><strong>Red:</strong> 4. <input tabindex="3" type="text" name="r" value="0" size="5" maxlength="3" />5. </td> 6. <td rowspan="1" colspan="1" ><strong>Green:</strong> 7. <input tabindex="2" type="text" name="g" value="0" size="5" maxlength="3" />8. </td> 9. <td rowspan="1" colspan="1" ><strong>Blue:</strong> 10. <input tabindex="1" type="text" name="b" value="0" size="5" maxlength="3" />11. </td> 12. </tr> 13. </table> 14. <div> 15. <input tabindex="6" type="radio" name="units" value="decimal" checked="checked" /16. <br/> 17. <input tabindex="5" type="radio" name="units" value="percent" />percent 18. <br/> 19. <input tabindex="4" type="radio" name="units" value="hexadecimal" /> 20. hexadecimal 21. <br/> 22. <input tabindex="7" type="submit" name="submit" value="Submit" /> </div> 23.</form> 24.

0 0 0


65 of 85 3/12/2008 9:57 AM

accesskey

The accesskey attribute can be used to assign an access key to an element:

a

area

button

input

label

legend

textarea

Example 7.18



W3C

Harvard

CSCI E-12

Last name: First name:

Submit Query

See also: Accesskey Standards from clagnut.com

view plain print ?

<ul> 1. <li><a href="http://www.w3.org" accesskey="w" shape="rect" >W3C</a> 2. </li> 3. <li><a href="http://www.harvard.edu/" accesskey="h" shape="rect" >Harvard</a> 4. </li> 5. <li><a href="http://cscie12.dce.harvard.edu/" accesskey="c" shape="rect" >CSCI E-12</6. </li> 7.</ul> 8.<form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" method="post" enctype="a9. <div> Last name: 10. <input type="text" name="last_name" accesskey="l" /> 11. <br/> First name: 12. <input type="text" name="first_name" accesskey="f" /> 13. <br/> 14. <input type="submit" accesskey="s" /> </div> 15.</form> 16.


66 of 85 3/12/2008 9:57 AM

Method: Get vs. Post

get: parameters and values are passed to the HTTP server via the query string in the URL.The query string is everything after the question mark ? in the URL. echo.cgi?name=David&course=CSCIE-12

post: parameters and values are passed to the HTTP server as part of the HTTP exchange,which is not visible to the user.

Example 7.19




Example 7.20




view plain print ?

<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="a1. <div> Email Address: 2. <input type="text" name="email" /> 3. <br/> 4. <input type="submit" /> </div> 5.</form> 6.

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="ap1. <div> Email Address: 2. <input type="text" name="email" /> 3. <br/> 4. <input type="submit" /> </div> 5.</form> 6.


67 of 85 3/12/2008 9:57 AM

Query String

Query string is everything after the question mark (?) in the URL. The query string is made ofparameter=value pairs, separated by an ampersand (&).

echo.cgi?name=David&course=CSCIE-12

echo.cgi?os=WinXP&os=Linux

You may also see parameter/value pairs separated by a semicolon

echo.cgi?name=David;course=CSCIE-12

echo.cgi?os=WinXP;os=Linux


68 of 85 3/12/2008 9:57 AM

URI Escaping

Some characters cannot be passed directly to the server; they must be URI-escaped first.Escaped characters are represented by a triplet consisting of the character % followed by two hexadecimal digits.

Character needing escaping:

Decimal numbers: 0 to 32 Hexadecimal: 00 to 20

# % ; < > ? { } | \ ^ ~ ` [ ]

Decimal numbers 126 to 255 Hexadecimal: 7F to FF

For example, a space has a decimal value of 32 (hexadecimal value of 20. Therefore a space in a URI should be encoded as %20, as in Sever%20Hall. Note: spaces are also sometimes represented as "+", as in "Sever+Hall".

echo.cgi?location=Sever%20Hall

echo.cgi?location=Sever+Hall

Another example is the @sign. It has a decimal value of 64, which is a hexadecimal value of 40, so in query string thisbecomes %40.

echo.cgi?email=david_heitmeyer%40harvard.edu


69 of 85 3/12/2008 9:57 AM

What you need to remember about URI Escaping

Client will take care of encoding of form input elements.

CGI Program will take care of decoding

Your only concern in creating content: if you are writing query strings in URL links.

Don't confuse URI escaping with XHTML/HTML character entities.

But do use XHTML/HTML character entities within URI strings.


70 of 85 3/12/2008 9:57 AM

HTML Character Entities and Query Strings

If you have a URI in X/HTML, you need to use X/HTML character entities for any characters (suchas the ampersand (&) that would normally need character entities. The bottom line is URI strings in href attributes should be treated the same, with respect to using X/HTMLcharacter entities, as text in other parts of X/HTML.

The colors.cgi script expects four parameters: r, g, b, and units. For example:

r=80

g=80

b=00

units=hexadecimal

If I want to create links for some of the colors defined in HTML/XHTML, I can code the URLs in thehref attributes of the a elements; I need to use the HTML character entity for the ampersand (&)that separates the parameter=value pairs.

Black

Silver

Purple

Maroon

Olive


71 of 85 3/12/2008 9:57 AM

Using CGI Programs

Colors

Redirect

Mail

Search

Weather

Maps


72 of 85 3/12/2008 9:57 AM

Colors

action

http://cscie12.dce.harvard.edu/tools/colors.cgi

parameters

r

g

b

units=(hexadecimal|decimal|percent)

Example 7.21



Teal

view plain print ?

<form action="http://cscie12.dce.harvard.edu/tools/colors.cgi" method="get" enctype="ap1. <div> 2. <input type="hidden" name="r" value="00" /> 3. <input type="hidden" name="g" value="80" /> 4. <input type="hidden" name="b" value="80" /> 5. <input type="hidden" name="units" value="hexadecimal" /> 6. <input type="submit" name="color" value="Teal" /> 7. </div> 8.</form> 9.


73 of 85 3/12/2008 9:57 AM

Colors, Part 2

Example 7.22



Red:

Green:

Blue:

decimal percent percent

Submit

view plain print ?

<form method="get" action="http://cscie12.dce.harvard.edu/tools/colors.cgi" enctype="ap1. <table> 2. <tr> 3. <td rowspan="1" colspan="1" ><strong>Red:</strong> 4. </td> 5. <td rowspan="1" colspan="1" > 6. <input type="text" name="r" value="0" size="12" maxlength="3" /> 7. </td> 8. </tr> 9. <tr> 10. <td rowspan="1" colspan="1" ><strong>Green:</strong> 11. </td> 12. <td rowspan="1" colspan="1" > 13. <input type="text" name="g" value="0" size="12" maxlength="3" /> 14. </td> 15. </tr> 16. <tr> 17. <td rowspan="1" colspan="1" ><strong>Blue:</strong> 18. </td> 19. <td rowspan="1" colspan="1" > 20. <input type="text" name="b" value="0" size="12" maxlength="3" /> 21. </td> 22. </tr> 23. <tr> 24. <td rowspan="1" colspan="1" /> 25. <td rowspan="1" colspan="1" > 26. <input type="radio" name="units" value="decimal" id="decimal" checked="checke27. <br/> 28. <input type="radio" name="units" value="percent" id="percent" /><label for="pe29. <br/> 30. <input type="radio" name="units" value="hexadecimal" id="hexadecimal" /><label31. <br/></td> 32. </tr> 33. <tr> 34. <td rowspan="1" colspan="1" /> 35. <td rowspan="1" colspan="1" > 36. <input type="submit" name="submit" value="Submit" /> 37. </td> 38. </tr> 39. </table> 40.</form> 41.

0

0

0


74 of 85 3/12/2008 9:57 AM

Redirect

action

http://minerva.dce.harvard.edu/cgi-bin/redirect.cgi

parameters

URL

The following form uses the parameter: URL

Example 7.23



Select your destination:Select your destination: Go!

The following form uses a parameter (gothere) that the redirect.cgi is not expecting:

Example 7.24


view plain print ?

<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/redirect.cgi" enctyp1. <div> 2. <select name="URL" > 3. <option value="" >Select your destination:</option> 4. <option value="http://www.w3.org/TR/xhtml1" >XHTML 1.0</option> 5. <option value="http://www.w3.org/TR/html401" >HTML 4.01</option> 6. <option value="http://www.w3.org/TR/CSS21" >CSS 2.1</option> 7. <option value="http://www.w3.org/TR/REC-CSS2" >CSS 2</option> 8. <option value="http://www.w3.org/TR/REC-CSS1" >CSS 1</option> 9. <option value="http://www.w3.org/WAI" >Web Accessibility Initiative 10. (WAI)</option> 11. <option value="http://validator.w3.org/" >XHTML/HTML Validator</option> 12. <option value="http://jigsaw.w3.org/css-validator/validator-uri.html" > CSS 13. Validator</option> 14. </select> 15. <input type="submit" value="Go!" /> 16. </div> 17.</form> 18.


75 of 85 3/12/2008 9:57 AM


Select your destination:Select your destination: Go!

view plain print ?

<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/redirect.cgi" enctyp1. <div> 2. <select name="gothere" > 3. <option value="" >Select your destination:</option> 4. <option value="http://www.w3.org/TR/xhtml1" >XHTML 1.0</option> 5. <option value="http://www.w3.org/TR/html401" >HTML 4.01</option> 6. <option value="http://www.w3.org/TR/CSS21" >CSS 2.1</option> 7. <option value="http://www.w3.org/TR/REC-CSS2" >CSS 2</option> 8. <option value="http://www.w3.org/TR/REC-CSS1" >CSS 1</option> 9. <option value="http://www.w3.org/WAI" >Web Accessibility Initiative 10. (WAI)</option> 11. <option value="http://validator.w3.org/" >XHTML/HTML Validator</option> 12. <option value="http://jigsaw.w3.org/css-validator/validator-uri.html" > CSS 13. Validator</option> 14. </select> 15. <input type="submit" value="Go!" /> 16. </div> 17.</form> 18.


76 of 85 3/12/2008 9:57 AM

Mail

FormMail Documentation. Note that this script can be used to send email only to addressesending with .harvard.edu

action

http://minerva.dce.harvard.edu/cgi-bin/FormMail

parameters

recipient

subject

email

redirect

required

sortenv_report

print_config

print_blank_fields

...see documentation for complete list


77 of 85 3/12/2008 9:57 AM

Mail Form

Example 7.25



Your Email Address: Your Name: Subject: Lecture QuestionLecture Question

Message:

Send Email

view plain print ?

<form action="http://minerva.dce.harvard.edu/cgi-bin/FormMail" method="get" enctype="ap1. <div>Your Email Address: 2. <input type="text" name="email" /></div> 3. <div>Your Name: 4. <input type="text" name="realname" /></div> 5. <div>Subject: 6. <select name="subject" > 7. <option value="Lecture Question" >Lecture Question</option> 8. <option value="Assignment Question" >Assignment Question</option> 9. <option value="Syllabus Question" >Syllabus Question</option> 10. <option value="Website Question" >Website Question</option> 11. </select> </div> 12. <div>Message: 13. <br/> 14. <textarea rows="10" cols="60" name="message" >Please type message here... 15. </textarea> </div> 16. <div> 17. <input type="hidden" name="recipient" value="[email protected]" /> 18. </div> 19. <div> 20. <input type="submit" value="Send Email" /> 21. </div> 22.</form> 23.

Please type message here...


78 of 85 3/12/2008 9:57 AM


79 of 85 3/12/2008 9:57 AM

Mail Form

Example 7.26



Your Email Address: Your Name: What ice cream do you like?

Chocolate Vanilla Strawberry

Send Email

view plain print ?

<form action="http://minerva.dce.harvard.edu/cgi-bin/FormMail" method="get" enctype="ap1. <div>Your Email Address: 2. <input type="text" name="email" /></div> 3. <div>Your Name: 4. <input type="text" name="realname" /></div> 5. <div> 6. <input type="hidden" name="subject" value="Favorite Ice Cream" /> What ice 7. cream do you like? 8. <br/> 9. <input type="checkbox" name="icecream" value="chocolate" />Chocolate 10. <br/> 11. <input type="checkbox" name="icecream" value="vanilla" />Vanilla 12. <br/> 13. <input type="checkbox" name="icecream" value="strawberry" />Strawberry 14. <br/> 15. <input type="hidden" name="recipient" value="[email protected]" /> 16. <input type="hidden" name="redirect" value="http://www.herrells.com/" /> 17. <input type="hidden" name="required" value="icecream,realname" /> </div> 18. <div> 19. <input type="submit" value="Send Email" /> 20. </div> 21.</form> 22.


80 of 85 3/12/2008 9:57 AM

Form Data to a Database

FAS IT offers a Data Collection Toolthat allows you to send data submitted via an HTML form to a database. The data can be viewedonline (in HTML) or downloaded in an Excel file. Note that a Harvard HUID and PIN are requiredto use this tool.

Example 7.27




Submit Query

view plain print ?

<form method="post" action="https://www.datacollection.fas.harvard.edu/cgi-bin/form2db.c1. <div> 2. <input type="hidden" name="form2db" value="cscie12_test" /> 3.  4. What ice cream do you like? 5. <br/> 6. <input type="checkbox" name="icecream" id="ic_chocolate" value="chocolate" /> 7. <label for="ic_chocolate" >Chocolate</label> 8. <br/> 9. <input type="checkbox" name="icecream" id="ic_hcp" value="herrell's chocolate pudd10. <label for="ic_hcp" >Herrell's Chocolate Pudding</label> 11. <br/> 12. <input type="checkbox" name="icecream" id="ic_cpb" value="chocolate peanut butter"13. <label for="ic_cpb" >Chocolate Peanut Butter</label> 14. <br/> 15. <input type="checkbox" name="icecream" id="ic_vanilla" value="vanilla" /> 16. <label for="ic_vanilla" >Vanilla</label> 17. <br/> 18. <input type="checkbox" name="icecream" id="ic_strawberry" value="strawberry" /> 19. <label for="ic_strawberry" >Strawberry</label> 20. <br/> 21. <input type="submit" /> </div> 22.</form> 23.


81 of 85 3/12/2008 9:57 AM

Search

Example 7.28



Search CSCIE-12 with Google

view plain print ?

<form method="get" action="http://www.google.com/search" enctype="application/x-www-for1. <div> 2. <input type="text" name="as_q" size="50" /> 3. <br/> 4. <input type="submit" value="Search CSCIE-12 with Google" /> 5. <input type="hidden" name="as_sitesearch" value="cscie12.dce.harvard.edu" /> 6. </div> 7.</form> 8.


82 of 85 3/12/2008 9:57 AM

Weather

Example 7.29



Weather from weather.com:

Cambridge, MA

Coronado, CA

Dallas, TX

Chicago, IL

Example 7.30



Input zip code: Get Forecast

view plain print ?

<div>Weather from <a href="http://www.weather.com" shape="rect" >weather.com</a>:</div> 1.<ul> 2. <li><a href="http://www.weather.com/search/search?where=02138" shape="rect" >Cambridge3. MA</a> 4. </li> 5. <li><a href="http://www.weather.com/search/search?where=92118" shape="rect" >Coronado,6. </li> 7. <li><a href="http://www.weather.com/search/search?where=75201" shape="rect" >Dallas, T8. </li> 9. <li><a href="http://www.weather.com/search/search?where=60601" shape="rect" >Chicago, 10. </li> 11.</ul> 12.

view plain print ?

<form method="get" action="http://www.weather.com/search/search" enctype="application/x1. <div> Input zip code: 2. <input type="text" name="where" /> 3. <br/> 4. <input type="submit" name="submit" value="Get Forecast" /> </div> 5.</form> 6.


83 of 85 3/12/2008 9:57 AM

Maps

http://maps.yahoo.com/

Example 7.31



1 Oxford St, Cambridge, MA 02138

q1

1 Oxford St, Cambridge, MA 02138

view plain print ?

<a href="http://maps.yahoo.com/maps_result?q1=1+Oxford+St,+Cambridge,+MA+02138&mag=5&ard=1. 1 Oxford St, Cambridge, MA 02138 </a> 2. 3.


84 of 85 3/12/2008 9:57 AM

Random Image

Rotating content or images can be an effective way to keep a page "fresh".

Harvard University

Harvard College

CGI program at http://minerva.dce.harvard.edu/cgi-bin/randomimg accepts a dir parameter, and returns the contents of a randomly chosen image from that directory.

The src for the image is:randomimg?dir=/home/staff/dheitmey/public_html/boeing/777/images/

[dheitmey@minerva images]$ pwd; ls -l/home/staff/dheitmey/public_html/boeing/777/images-rw-r--r-- 1 dheitmey teaching 20822 Mar 16 00:10 777200-k58103.jpg-rw-r--r-- 1 dheitmey teaching 36340 Mar 16 00:10 777200-k58224.jpg-rw-r--r-- 1 dheitmey teaching 13155 Mar 16 00:10 777200-k58379.jpg-rw-r--r-- 1 dheitmey teaching 19382 Mar 16 00:10 777200-k58432.jpg-rw-r--r-- 1 dheitmey teaching 25709 Mar 16 00:10 777200-k58533.jpg-rw-r--r-- 1 dheitmey teaching 9310 Mar 16 00:10 777200-k58557.jpg-rw-r--r-- 1 dheitmey teaching 13476 Mar 16 00:10 777200-k58784.jpg-rw-r--r-- 1 dheitmey teaching 14714 Mar 16 00:10 777200-k60629.jpg-rw-r--r-- 1 dheitmey teaching 6410 Mar 16 00:10 777300-k59953.jpg-rw-r--r-- 1 dheitmey teaching 9490 Mar 16 00:10 777300-k59962.jpg-rw-r--r-- 1 dheitmey teaching 5362 Mar 16 00:10 777300-k60026.jpg-rw-r--r-- 1 dheitmey teaching 9525 Mar 16 00:10 777300-k60609.jpg-rw-r--r-- 1 dheitmey teaching 22492 Mar 16 00:10 777-k57216.jpg-rw-r--r-- 1 dheitmey teaching 26874 Mar 16 00:10 777-k58380.jpg

Example 7.32



view plain print ?

<div style="border: thin solid; width: 300px; float: left; margin-right: 1em;" > 1. <img src="http://minerva.dce.harvard.edu/cgi-bin/randomimg?dir=/home/staff/dheitmey/p2. <p style="color: #333; text-align: center; font-size: 0.5em;" >Image 3. courtesy of <a href="http://www.boeing.com/" shape="rect" >Boeing</a> </p> 4.</div> 5.<p style="margin-right: 20%;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 6. tellus facilisis ultrices. Morbi commodo accumsan arcu. Aliquam erat volutpat. 7. Fusce neque tortor, fringilla sit amet, facilisis non, scelerisque nec, nibh. 8. Aliquam eleifend enim quis elit. Vivamus pharetra enim vitae erat. Duis vitae massa 9. ac nibh volutpat molestie. Duis in mi. Sed ultrices enim et ante. Praesent turpis 10. velit, semper ac, sollicitudin nec, consequat sit amet, mauris. Mauris sed felis. 11. Fusce sit amet nunc a urna feugiat cursus. Pellentesque vehicula vestibulum odio. 12. Etiam enim dolor, consectetuer nec, sollicitudin in, placerat et, purus. Sed quis 13. tortor id sapien convallis hendrerit. Cras iaculis purus. Pellentesque nec ante ac 14. massa laoreet ultricies. Donec nulla est, dignissim sit amet, hendrerit in, congue 15. in, lorem. Cras dictum fermentum ante. Aliquam lacus. Proin diam ipsum, venenatis 16. et, tempor eu, ornare id, libero. Curabitur varius semper mauris. Aenean neque nunc, 17. commodo non, posuere non, sagittis quis, massa. Vestibulum blandit. Nam adipiscing 18. semper risus. Nullam nibh lorem, feugiat eget, commodo in, adipiscing et, neque. 19. Proin commodo pharetra orci. Fusce vulputate pede ac eros. Cras massa lorem, 20. vehicula a, nonummy non, dictum quis, mauris. Donec faucibus quam vel quam. 21. Vestibulum sit amet ipsum nec wisi placerat malesuada. Mauris ut pede non enim ornare 22.

condimentum.</p><br style="clear: both;" /> 23.


85 of 85 3/12/2008 9:57 AM

Image courtesy of Boeing

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id urna et tellusfacilisis ultrices. Morbi commodo accumsan arcu. Aliquam erat volutpat. Fusce neque tortor,fringilla sit amet, facilisis non, scelerisque nec, nibh. Aliquameleifend enim quis elit. Vivamus pharetra enim vitae erat. Duis vitae massa ac nibh volutpat

molestie. Duis in mi. Sed ultrices enim et ante. Praesent turpis velit, semperac, sollicitudin nec, consequat sit amet, mauris. Mauris sed felis. Fusce sitamet nunc a urna feugiat cursus. Pellentesque vehicula vestibulum odio.Etiam enim dolor, consectetuer nec, sollicitudin in, placerat et, purus. Sed quis tortor id sapien convallis hendrerit. Cras iaculis purus. Pellentesque necante ac massa laoreet ultricies. Donec nulla est, dignissim si t amet, hendreritin, congue in, lorem. Cras dictum fermentum ante. Aliquam lacus. Proin diamipsum, venenatis et, tempor eu, ornare id, libero. Curabitur varius sempermauris. Aenean neque nunc, commodo non, posuere non, sagittis quis,massa. Vestibulum blandit. Nam adipiscing semper risus. Nullam nibh lorem,feugiat eget, commodo in, adipiscing et, neque. Proin commodo pharetraorci. Fusce vulputate pede ac eros. Cras massa lorem, vehicula a, nonummynon, dictum quis, mauris. Donec faucibus quam vel quam. Vestibulum sitamet ipsum nec wisi placerat malesuada. Mauris ut pede non enim ornarecondimentum.

Table of Contents | All Slides | Link List | Examples | CSCI E-12

Date post:	16-Apr-2018
Category:	Documents
Upload:	duongdieu
View:	213 times
Download:	0 times

Accessibility, Images, and Forms/CGI Images, and Forms/CGI 5 of 85 3/12/2008 9:57 AM 10 Quick Tips...

Documents