Images and Forms - Harvard Universitycscie12.dce.harvard.edu/lecture_notes/2006-07/20070313.pdf · 3/13/2007 · Images and Forms 11 of 103 3/13/2007 4:59 PM Download times How long

Images and Forms http://localhost:8080/cocoon/projects/cscie12/slides/20070313/handout.html

1 of 103 3/13/2007 4:59 PM

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

Images and FormsMarch 13, 2007

Harvard University Division of Continuing Education

Extension School

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

Copyright 1998-2007 David P. Heitmeyer

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


2 of 103 3/13/2007 4:59 PM

Images and XHTML

img elements should contain height, width, and alt attributes.

alt: requiredheight and width: helpful

Example 7.1

Example 7.1 Source:

Example 7.1 Rendered:

<img src="shield.png" alt="Harvard Shield, 'Veritas'" height="328" width="281" /> 1. 2.


3 of 103 3/13/2007 4:59 PM

Graphics: Resources

Books

Lynda Weinman

designing web graphics.4, Fourth EditionNew Riders PublishingISBN: 0735710791

Jennifer Niederst

Learning Web Design: A Beginner's Guide to HTML, Graphics, and BeyondO'ReillyISBN: 0596004842

Tools

Adobe PhotoshopAdobe FireworksJasc Paint ShopThe Gimp


4 of 103 3/13/2007 4:59 PM

Graphics: Very Practical Helpful Hints

Use binary mode when transferring graphic files via FTP.Remember that UNIX is case-sensitive.

image.GIFimage.gif


5 of 103 3/13/2007 4:59 PM

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


6 of 103 3/13/2007 4:59 PM

Color Units

Name

As defined in XHTML/HTML:

black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal,aqua

RGB

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

decimal numbers (0 to 255)hexadecimal numbers (00 to ff)percentages (0 to 100%)

Example 7.2

Example 7.2 Source:


Lorem ipsum dolor sit amet, consectetuer adipiscing elit.




<div style="background-color: #990000; color: white; padding: 0.5em; margin: 0.25em; " > 1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 2.<div style="background-color: #900; color: white; padding: 0.5em; ; margin: 0.25em;" > 3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 4.<div style="background-color: rgb(153,0,0); color: white; padding: 0.5em; ; margin: 0.25em5. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 6.<div style="background-color: rgb(60%,0%,0%); color: white; padding: 0.5em; ; margin: 0.257. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 8.


7 of 103 3/13/2007 4:59 PM

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: #RRGGBBRR is the hexadecimal value of the red channelGG is the hexadecimal value of the green channelBB is the hexadecimal value of the blue channel

Percentage (0% - 100%)Number (0 - 255)


8 of 103 3/13/2007 4:59 PM

Decimal and Hexadecimal numbers

Decimal Hexadecimal

0 0

1 1

2 2

3 3

4 4

5 5

6 6

7 7

8 8

9 9

10 A

11 B

12 C

13 D

14 E

15 F

16 10

17 11

18 12

... ...

255 FF

Sample conversion calculation:

Resources

Interactive ColorsUnivox Internet: RGF 2 Hex Tool http://www.univox.com/home/support/rgb2hex.html


9 of 103 3/13/2007 4:59 PM

Web Safe Color Palette

Web Safe Color Palette used to very important, but is increasingly less so for desktopbrowsers. May become more important due to mobile devices.

The Browser-Safe Web Palette from lynda.com

The Web Safe Color Palette consists of 216 colors that are shared by Macintosh and Windows 8-bitsystem palettes. Six values each for R, G, and B are present.

6 red x 6 green x 6 blue = 63 = 216 colors

Decimal Percent Hexadecimal

0 0% 00

51 20% 33

102 40% 66

153 60% 99

204 80% CC

255 100% FF

Web Safe Color PaletteWeb Palette from Web Design in a Nutshell


10 of 103 3/13/2007 4:59 PM

Monitor Calibration and Gamma Correction

Monitor Calibration

Color calibration may differ significantly between monitors.

Gamma Correction

Gamma determines the brightness and contrast of the display. The native gamma settings aredifferent for Macintosh (1.8), PC (2.5), and UNIX. Images displayed on a Macintosh are typicallybrighter than the same image displayed on a PC.


11 of 103 3/13/2007 4:59 PM

Download times

How long does 226 kb of content take to download?

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


12 of 103 3/13/2007 4:59 PM

An aside: Broadband Use

The site websiteoptimization.com publishes Bandwith Reports. that include reports on broadband penetration by country.


13 of 103 3/13/2007 4:59 PM

Vector Graphics and Bitmap Graphics

Bitmap Graphic

Bitmap Graphic Formats on the Web

JPEGGIFPNG

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

SVGSWF (Flash)

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

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

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


14 of 103 3/13/2007 4:59 PM

Zoom: Bitmap & Vector

Bitmap

Original image: Magnified (16x)

Vector

Original image: Magnified (16x)


15 of 103 3/13/2007 4:59 PM

Common Graphic Formats for the Web

Graphics Interchange Format (GIF).gif

Joint Photographic Experts Group (JPEG).jpg.jpeg

Portable Network Graphic (PNG).png


16 of 103 3/13/2007 4:59 PM

Graphics Format for the Web

Graphics Interchange Format: GIF

8 bit indexed (256 colors)LZW Compression (lossless)transparencyanimation

Typically used for:

cartoon images/icons/logosanimated banners/icons

Joint Photographic Experts Group: JPEG

24 bit (17 million colors)"lossy" compression compression works well for gradual color changesno transparencyno animation

Typically used for:

photographsimages with color gradients

Portable Network Graphic: PNG

8 bit indexed24 or 32 bit (4 billion colors)lossless compressiontransparency (color and alpha-channel)no animation (animation supported through MNG extension)


17 of 103 3/13/2007 4:59 PM

Sample Images

GIF 13,452 bytes

JPEG 16,255 bytes

PNG; 8 bit 11,215 bytes


Original image from Macromedia Fireworks tutorial


18 of 103 3/13/2007 4:59 PM

Palettes

Palettes

Exact (if 256 or fewer colors)Adaptive (weighted based upon colorsin document)Web Palette (216 Web Safe Colors)System

WindowsMacintosh


19 of 103 3/13/2007 4:59 PM

GIF Images and Bit Depth

8 bit; 256 colors

67,986 bytesOriginal image from Digital Stock


20 of 103 3/13/2007 4:59 PM


7 bit; 128 colors



21 of 103 3/13/2007 4:59 PM


6 bit; 64 colors



22 of 103 3/13/2007 4:59 PM


5 bit; 32 colors



23 of 103 3/13/2007 4:59 PM


4 bit; 16 colors



24 of 103 3/13/2007 4:59 PM


3 bit; 8 colors



25 of 103 3/13/2007 4:59 PM


2 bit; 4 colors



26 of 103 3/13/2007 4:59 PM


1 bit; 2 colors

8,189 bytes


27 of 103 3/13/2007 4:59 PM

Dither

When converting an image to an 8-bit palette (256 colors) and there are more than 256 colors in theoriginal image, two options are:

shift colorsdither


28 of 103 3/13/2007 4:59 PM

Dither: Example 1

Converting the "Sail boat" image to a 3-bit grayscale GIF image:

Dither 21,283 bytes

Color shift 13,160 bytes


29 of 103 3/13/2007 4:59 PM

Dither: Example 2

As an example, consider a 200 x 200 pixel blue (00E5E5) square. Note that 00E5E5 is midwaybetween the Web safe colors, 00CCCC and 00FFFF.

Color: 00E5E5 2 bit; exact palette 303 bytes

Dithered 2 bit; Web palette; dithered 601 bytes

Zoom in (32x)


30 of 103 3/13/2007 4:59 PM

Aliased and Anti-aliased Text

Aliased

1,569 bytes

Anti-aliased


31 of 103 3/13/2007 4:59 PM

3,960 bytes


32 of 103 3/13/2007 4:59 PM

GIF Compression

LZW compression works on horizontal blocks of the same color. Here are two images that areidentical except for a 90 degree rotation.

464 bytes

1,365 bytes


33 of 103 3/13/2007 4:59 PM

GIF: decreasing file size

use minimum acceptable bit depthdo not dither imagesuse aliased text


34 of 103 3/13/2007 4:59 PM

GIF: Transparency

GIF 87a and 89a formats allow one of the indexed colors to be transparent. Background colors andimages will show through the transparent part of the image. The background of the table is green(00FF00)

Transparency: Size (bytes):

none 9,142 bytes

white 9,299 bytes

crimson 9,340 bytes


35 of 103 3/13/2007 4:59 PM

GIF: animation

271,798 bytes


36 of 103 3/13/2007 4:59 PM

GIF: animation

Banner advertisements

Demonstrations

Icons


37 of 103 3/13/2007 4:59 PM

Aside: Banner Advertisements

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 BureauAd Unit Guidelines


38 of 103 3/13/2007 4:59 PM

JPEG

24 bit (17 million colors)"lossy" compression compression works well for gradual color changesno transparencyno animation

Typically used for:

photographsimages with color gradients


39 of 103 3/13/2007 4:59 PM

JPEG

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

0 Quality 100

smaller file size

larger file size

lower quality

higher quality


40 of 103 3/13/2007 4:59 PM

JPEG: Compression

Quality: 82 (original image)

27,740 bytes

Original image from Digital Stock


41 of 103 3/13/2007 4:59 PM

JPEG: Compression

Quality: 60

20,204 bytes



42 of 103 3/13/2007 4:59 PM

JPEG: Compression

Quality: 50

17,873 bytes



43 of 103 3/13/2007 4:59 PM

JPEG: Compression

Quality: 40

15,485 bytes



44 of 103 3/13/2007 4:59 PM

JPEG: Compression

Quality: 30

12,380 bytes



45 of 103 3/13/2007 4:59 PM

JPEG: Compression

Quality: 20

9,428 bytes



46 of 103 3/13/2007 4:59 PM

JPEG: Compression

Quality: 10

5,928 bytes



47 of 103 3/13/2007 4:59 PM

JPEG: Compression

Quality: 2

2,378 bytes



48 of 103 3/13/2007 4:59 PM

Cartoon Art

GIF 1,511 bytes



JPEG (Quality 6) 1,530 bytes

JPEG (Quality 100) 14,660 bytes

Original image from the works of David P. Heitmeyer


49 of 103 3/13/2007 4:59 PM

Text as Images

Aliased Text

GIF 981 bytes

PNG; indexed 830 bytes

JPEG (Quality: lower) 1,517 bytes

JPEG (Quality: higher) 10,982 bytes

Anti-aliased Text

GIF 2,404 bytes

PNG; indexed 2,317 bytes

JPEG (Quality: lower) 2,853 bytes

JPEG (Quality: higher) 11,014 bytes


50 of 103 3/13/2007 4:59 PM

Photographs

GIF 13,452 bytes

JPEG 16,255 bytes



Original image from Fireworks tutorial


51 of 103 3/13/2007 4:59 PM

Fireworks: Export


52 of 103 3/13/2007 4:59 PM

Images and Links

entire image parts of image (imagemaps)


53 of 103 3/13/2007 4:59 PM

Images and Links: Entire Image

Example 7.3

Example 7.3 Source:


<a href="http://www.college.harvard.edu" ><img src="shield.gif" alt="[Veritas]" border="1. 2.


54 of 103 3/13/2007 4:59 PM

Imagemaps

Server-sideClient-side

Client-side Imagemaps

usemap attribute for imgmap element

area elementattributes

shape=circleshape=rectshape=polycoords


55 of 103 3/13/2007 4:59 PM

Imagemaps I: an example

Example 7.4

Example 7.4 Source:


<img src="imagemap.gif" width="500" height="300" usemap="#harvard" border="0" alt="[H1. <map id="harvard" name="harvard" > 2. <area shape="circle" coords="426,74, 74" href="http://www.harvard.edu/" alt="[Harv3. <area shape="poly" coords="17,286,198,251,101,140" href="http://www.fas.harvard.edu4. <area shape="rect" coords="169,99,347,203" href="http://www.dce.harvard.edu/" alt=5. </map> 6. 7.


56 of 103 3/13/2007 4:59 PM

Imagemaps: II

Image

Client-side Imagemap

Example 7.5

Example 7.5 Source:


Units are in Pixels, (0,0) is the upper left corner of the image.Circle: center (106, 18); radius = 17Rectangle: vertices at (1,4), (60,4), (1,32), (60,32)Triangle: vertices at (170,0), (150,32), (190,32)

<map id="client-side-shapes" name="client-side-shapes" > 1. <area shape="circle" coords="106,18,17" href="http://en.wikipedia.org/wiki/Circle" al2. <area shape="rect" coords="1,4,60,32" href="http://en.wikipedia.org/wiki/Rectangle" a3. <area shape="poly" coords="150,34,190,34,170,0" href="http://en.wikipedia.org/wiki/Tri4.</map> 5.<img usemap="#client-side-shapes" src="shapes.gif" width="192" height="39" align="bott6. 7.


57 of 103 3/13/2007 4:59 PM

Vector Graphics and the Web

Scalable Vector Graphics (SVG)Macromedia's Flash


58 of 103 3/13/2007 4:59 PM

Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG)is a language for describing two dimensional graphics in XML. The language allows for vectorobjects, bitmap images, and text. SVG is sponsored by the W3C.

Adobe's SVG Zonehas information on Adobe's SVG Viewer Plug-in and examples of SVG. Firefox displays SVGnatively.

SVG can be included in pages with the object element or with the non-standard embed element.

object

Example 7.6

Example 7.6 Source:


Massachusetts SVG

<p><a href="ma.svg" >Massachusetts SVG</a></p> 1.<object data="ma.svg" type="image/svg+xml" height="215" width="430" > 2. <object data="ma.png" type="image/png" /> 3.</object> 4.


59 of 103 3/13/2007 4:59 PM

Building XHTML/HTML Forms and Using CGI Programs

Forms are the "front-end" for the HTTP Client to send information back to the HTTP Server. Often,the information is sent to a program running under the Common Gateway Interface (CGI).

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


60 of 103 3/13/2007 4:59 PM

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 client.


61 of 103 3/13/2007 4:59 PM

The "form" element

The form element: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 to theserver, the CGI program will access the information by name. Thus, the front-end form and theback-end process must use the same names.

Example 7.7

Example 7.7 Source:


Email Address: Submit Query

<form method="post" 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.


62 of 103 3/13/2007 4:59 PM

"Echo" program: http://minerva.dce.harvard.edu/cgi-bin/echo.cgi

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

The echo.cgi doesn't really "do" anything. It simply takes input and creates a page that displays theinput that it was given.


63 of 103 3/13/2007 4:59 PM

Form Input Elements: text field

Example 7.8

Example 7.8 Source:


Email Address: Year of Birth: Year of Birth:

Proceed

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <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.


64 of 103 3/13/2007 4:59 PM

Form Input Elements: radio buttons

Example 7.9

Example 7.9 Source:


Email Address: Please send me spam:

yes no

Proceed

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <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.


65 of 103 3/13/2007 4:59 PM

Form Input Elements: checkbox

Example 7.10

Example 7.10 Source:


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

Proceed

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <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" />Herrell6. <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.


66 of 103 3/13/2007 4:59 PM

Form Input Elements: textarea

Example 7.11



Please enter comments:

Proceed

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

comments go here....


67 of 103 3/13/2007 4:59 PM

Form Input Elements: select

Example 7.12



Select your favorite New England stateSelect your favorite New England state Proceed

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div> 2. <select name="state" > 3. <option value="" >Select your favorite New England state</option> 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" /> 13. </div> 14.</form> 15.


68 of 103 3/13/2007 4:59 PM

Form Input Elements: select

Example 7.13



Select your favorite New England states:

Proceed

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <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


69 of 103 3/13/2007 4:59 PM

Form Input Elements: password

Example 7.14



Secret word: Proceed

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <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.


70 of 103 3/13/2007 4:59 PM

Form Input Elements: "hidden"

Example 7.15



Proceed

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


71 of 103 3/13/2007 4:59 PM

Disabled Form Input Elements

Example 7.16



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

Chocolate Herrell's Chocolate Pudding Chocolate Peanut Butter Vanilla Strawberry

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <div>Your email address: 2. <input type="text" name="email" disabled="disabled" value="[email protected]"3. <div> You have selected your favorite ice cream: 4. <br/> 5. <input type="checkbox" name="icecream" disabled="disabled" checked="checked" value6. <br/> 7. <input type="checkbox" name="icecream" disabled="disabled" checked="checked" value8. <br/> 9. <input type="checkbox" name="icecream" disabled="disabled" checked="checked" value10. <br/> 11. <input type="checkbox" name="icecream" disabled="disabled" value="vanilla" /> 12. Vanilla 13. <br/> 14. <input type="checkbox" name="icecream" disabled="disabled" value="strawberry" />Str15. <br/> </div> 16.</form> 17.

[email protected]


72 of 103 3/13/2007 4:59 PM

Accessible Forms

Accessible Forms Tutorials are available from The Web Standards Project.


73 of 103 3/13/2007 4:59 PM

Label Element

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

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

Example 7.17



Do you watch NCAA Basketball?

Yes No

Submit Query

Example 7.18



<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <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.

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <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 chocolate7. <label for="icecream_hcp" >Herrell's Chocolate Pudding</label> 8. <br/> 9. <input type="checkbox" name="icecream" id="icecream_cpb" value="chocolate peanut bu10. <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.


74 of 103 3/13/2007 4:59 PM


Proceed


75 of 103 3/13/2007 4:59 PM

fieldset and legend

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

Example 7.19



Name

First Name Last Name

Sports

Do you enjoy basketball? Yes No

Do you enjoy baseball? Yes No

Submit Query

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <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.


76 of 103 3/13/2007 4:59 PM

fieldset and legend

You can apply CSS rules to fieldset and legend

Example 7.20


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


With StylesWithout Styles

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <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.

fieldset { 1. border: thin dashed #900; 2.} 3.legend { 4. font-family: Arial,Helvetica,sans-serif; 5. font-size: 1.1em; 6. font-weight: bold; 7.} 8.


77 of 103 3/13/2007 4:59 PM

optgroup

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

Example 7.21



78 of 103 3/13/2007 4:59 PM

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="app1. <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.


79 of 103 3/13/2007 4:59 PM


Boston CollegeBoston College

Submit Query


80 of 103 3/13/2007 4:59 PM

tabindex

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

aareabuttoninputobjectselecttextarea

Example 7.22



Red: Green: Blue:

decimal percent hexadecimal

Submit

<form method="get" action="http://cscie12.dce.harvard.edu/tools/colors.cgi" enctype="app1. <table> 2. <tr> 3. <td><strong>Red:</strong> 4. <input tabindex="3" type="text" name="r" value="0" size="5" maxlength="3" /> 5. </td> 6. <td><strong>Green:</strong> 7. <input tabindex="2" type="text" name="g" value="0" size="5" maxlength="3" /> 8. </td> 9. <td><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


81 of 103 3/13/2007 4:59 PM

accesskey

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

aareabuttoninputlabellegendtextarea

Example 7.23



W3CHarvardCSCI E-12

Last name: First name:

Submit Query

See also: Accesskey Standards from clagnut.com

<ul> 1. <li><a href="http://www.w3.org" accesskey="w" >W3C</a> 2. </li> 3. <li><a href="http://www.harvard.edu/" accesskey="h" >Harvard</a> 4. </li> 5. <li><a href="http://cscie12.dce.harvard.edu/" accesskey="c" >CSCI E-12</a> 6. </li> 7.</ul> 8.<form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" method="post" > 9. <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.


82 of 103 3/13/2007 4:59 PM

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. http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?name=David&course=CSCIE-12post: parameters and values are passed to the HTTP server as part of the HTTP exchange,which is not visible to the user.

Example 7.24




Example 7.25




<form method="post" 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.

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


83 of 103 3/13/2007 4:59 PM

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 (&).

http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?name=David&course=CSCIE-12http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?os=WinXP&os=Linux

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

http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?name=David;course=CSCIE-12http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?os=WinXP;os=Linux


84 of 103 3/13/2007 4:59 PM

URI Escaping

Some characters cannot be passed directly to the server; they must be URI-escaped first. Escapedcharacters 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%20Hallecho.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.

http://minerva.dce.harvard.edu/cgi-bin/echo.cgi?email=david_heitmeyer%40harvard.edu


85 of 103 3/13/2007 4:59 PM

What you need to remember about URI Escaping

Client will take care of encoding of form input elements.CGI Program will take care of decodingYour 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.


86 of 103 3/13/2007 4:59 PM

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 stringsin href attributes should be treated the same, with respect to using X/HTML character entities,as text in other parts of X/HTML.

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

r=80g=80b=00units=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 (&) thatseparates the parameter=value pairs.

BlackSilverPurpleMaroonOlive


87 of 103 3/13/2007 4:59 PM

Using CGI Programs

ColorsRedirectMailCounterSearchWeatherMaps


88 of 103 3/13/2007 4:59 PM

Colors

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

parametersrgbunits=(hexadecimal|decimal|percent)

Example 7.26



Teal

<form action="http://cscie12.dce.harvard.edu/tools/colors.cgi" method="get" > 1. <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.


89 of 103 3/13/2007 4:59 PM

Colors, Part 2

Example 7.27



Red:

Green:

Blue:

decimal percent hexadecimal

Submit

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

0

0

0


90 of 103 3/13/2007 4:59 PM

Redirect

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

parametersURL

Example 7.28



Select your destination:Select your destination: Go!

Example 7.29



<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/redirect.cgi" enctype1. <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" > 13. CSS Validator</option> 14. <option value="http://www.w3.org/People/Raggett/tidy/" >HTML 15. Tidy</option> 16. </select> 17. <input type="submit" value="Go!" /> 18. </div> 19.</form> 20.

<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/redirect.cgi" enctype1. <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" > 13. CSS Validator</option> 14. <option value="http://www.w3.org/People/Raggett/tidy/" >HTML 15. Tidy</option> 16. </select> 17. <input type="submit" value="Go!" /> 18. </div> 19.</form> 20.


91 of 103 3/13/2007 4:59 PM

Select your destination:Select your destination: Go!


92 of 103 3/13/2007 4:59 PM

Mail

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

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

parametersrecipientsubjectemailredirectrequiredsortenv_reportprint_configprint_blank_fields...see documentation for complete list


93 of 103 3/13/2007 4:59 PM

Mail Form

Example 7.30



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

Message:

Send Email

<form action="http://minerva.dce.harvard.edu/cgi-bin/FormMail" method="get" > 1. <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...


94 of 103 3/13/2007 4:59 PM

Mail Form

Example 7.31



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

Chocolate Vanilla Strawberry

Send Email

<form action="http://minerva.dce.harvard.edu/cgi-bin/FormMail" method="get" > 1. <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.


95 of 103 3/13/2007 4:59 PM

Form Data to a Database?

FAS Computer Services offers a Data Collection Tool that allows you to send data submitted via an HTML form to a database. The data can be viewed online (in HTML) or downloaded in an Excel file.Note that a Harvard HUID and PIN are required to use this tool.

Example 7.32




Submit Query

<form method="post" action="http://www.datacollection.fas.harvard.edu/cgi-bin/form2db.cgi1. <div> 2. <input type="hidden" name="form2db" value="cscie12_test" /> 3.  4. <div> What ice cream do you like? 5. <br/> 6. <input type="checkbox" name="icecream" value="chocolate" />Chocolate 7. <br/> 8. <input type="checkbox" name="icecream" value="herrell's chocolate pudding" />Herre9. <br/> 10. <input type="checkbox" name="icecream" value="chocolate peanut butter" /> 11. Chocolate Peanut Butter 12. <br/> 13. <input type="checkbox" name="icecream" value="vanilla" />Vanilla 14. <br/> 15. <input type="checkbox" name="icecream" value="strawberry" />Strawberry 16. </div> 17. <input type="submit" /> 18. </div> 19.</form> 20.


96 of 103 3/13/2007 4:59 PM

Count

Count 2.5 Documentation . Note that this script can be used from within the .harvard.edu domain.

actionhttp://minerva.dce.harvard.edu/cgi-bin/Count.cgi

parametersdf (data file)See http://minerva.dce.harvard.edu/Counter#optisrgb, prgb

Example 7.33



<img src="http://minerva.dce.harvard.edu/cgi-bin/Count.cgi?df=sample.dat" alt="counter" /1. 2.


97 of 103 3/13/2007 4:59 PM

Count

Count 2.5 Documentation. Note that this script can be used from within the .harvard.edu domain.

actionhttp://minerva.dce.harvard.edu/cgi-bin/Count.cgi

parametersdf (data file)See http://minerva.dce.harvard.edu/Count/docs/Count.html#optisrgb, prgb

Example 7.34



<img src="http://minerva.dce.harvard.edu/cgi-bin/Count.cgi?df=sample.dat" alt="counter" /1. 2.


98 of 103 3/13/2007 4:59 PM

Count

Changing colors:

Example 7.35



Changing digit styles:

Example 7.36



More examples are given in the documentation.

<img src="http://minerva.dce.harvard.edu/cgi-bin/Count.cgi?df=sample.dat&srgb=00ff00&prgb=1. 2.

<img src="http://minerva.dce.harvard.edu/cgi-bin/Count.cgi?df=sample.dat&dd=C" alt="count1. 2.


99 of 103 3/13/2007 4:59 PM

Search

Example 7.37



Search CSCIE-12 with Google

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


100 of 103 3/13/2007 4:59 PM

Weather

Example 7.38



Weather from weather.com:

Cambridge, MassachusettsLawrence, Kansas

Example 7.39



Input zip code: Get Forecast

<div>Weather from <a href="http://www.weather.com" >weather.com</a>:</div> 1.<ul> 2. <li><a href="http://www.weather.com/search/search?where=02138" >Cambridge, 3. Massachusetts</a> 4. </li> 5. <li><a href="http://www.weather.com/search/search?where=66045" >Lawrence, 6. Kansas</a> 7. </li> 8.</ul> 9.

<form method="get" action="http://www.weather.com/search/search" > 1. <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.


101 of 103 3/13/2007 4:59 PM

Maps

http://maps.yahoo.com/

Example 7.40



1 Oxford St, Cambridge, MA 02138

edQ8ctPOp_0To8Q5ZlXnfuoumjgRwuBGzX

cszCambridge, MA 02138

countryus

new1

name

qty

<a href="http://maps.yahoo.com/maps_result?ed=Q8ctPOp_0To8Q5ZlXnfuoumjgRwuBGzX&csz=Cambrid1. 1 Oxford St, Cambridge, MA 02138 </a> 2. 3.


102 of 103 3/13/2007 4:59 PM

Random Image

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

Harvard UniversityHarvard CollegeHarvard@Home

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.

[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.41



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id urna et tellus facilisis ultrices. Morbicommodo accumsan arcu. Aliquam erat volutpat.

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


103 of 103 3/13/2007 4:59 PM

Image courtesy of Boeing

Fusce neque tortor, fringilla sit amet, facilisis non, scelerisque nec, nibh. Aliquam eleifend enimquis elit. Vivamus pharetra enim vitae erat. Duis vitae massa ac nibh volutpat molestie. Duis in mi.Sed ultrices enim et ante. Praesent turpis velit, semper ac, sollicitudin nec, consequat sit amet,mauris. Mauris sed felis. Fusce sit amet nunc a urna feugiat cursus. Pellentesque vehiculavestibulum odio. Etiam enim dolor, consectetuer nec, sollicitudin in, placerat et, purus. Sed quistortor id sapien convallis hendrerit. Cras iaculis purus. Pellentesque nec ante ac massa laoreetultricies. Donec nulla est, dignissim sit amet, hendrerit in, congue in, lorem. Cras dictum fermentumante. Aliquam lacus. Proin diam ipsum, venenatis et, tempor eu, ornare id, libero. Curabitur variussemper mauris. Aenean neque nunc, commodo non, posuere non, sagittis quis, massa. Vestibulumblandit. Nam adipiscing semper risus. Nullam nibh lorem, feugiat eget, commodo in, adipiscing et,neque. Proin commodo pharetra orci. Fusce vulputate pede ac eros. Cras massa lorem, vehicula a,nonummy non, dictum quis, mauris. Donec faucibus quam vel quam. Vestibulum sit amet ipsumnec wisi placerat malesuada. Mauris ut pede non enim ornare condimentum.

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

Documents

Images and Forms - Harvard Universitycscie12.dce.harvard.edu/lecture_notes/2006-07/20070313.pdf · 3/13/2007 · Images and Forms 11 of 103 3/13/2007 4:59 PM Download times How long