html unique book

7/18/2019 HTML unique book

http://slidepdf.com/reader/full/html-unique-book 1/1074



Copyrights and Trademarks

No part of this document may be reproduced, stored in a retrieval system, ortransmitted in any form or by any means – electronic, mechanical, recording, or

otherwise – without the prior written consent of the publisher.

Netscape Navigator is a trademark of Netscape Communications Corp. Windows

3.1, Windows !, Windows N", and #nternet $%plorer are trademarks of &icrosoft

Corporation.

'll trademarks and brand names are acknowledged as belonging to their

respective owners.

(ublished by

)traNet

1*+ 'ttwell r., -uite 13+ "oronto, ntario, Canada &W /'

(hone0 1/2/!21**1 4a%0 1/2/!251 $2mail0 info6%nu.com



Copyright © 1 by )traNet

'll 7ights 7eserved

8anuary 1

4irst $dition 1 5 3 ! / *

-hare these 47$$ Courses9

Why stuff your friend:s mailbo% with a copy of this when we can do it for you9

8ust e2mail them the link info – http0;;www.trainingtools.com

&ake sure that you visit the site as well0

&7$ 47$$ C<7-$-

Weekly "ool "ips

<pdated course versions

New courses added regularly

-o don:t copy files or photocopy 2 -hare9

$nd <ser =icense 'greement

<se of this package is governed by the following terms0

=icense

"raining"ools.com #nc, >?we?, ?us? or ?our?@, provides the =icensee >?you? or ?your?@ with a set of digital files in electronic

format >together called ?the (ackage?@ and grants to you a license to use the (ackage in accordance with the terms of this

'greement. <se of the package includes the right to print a single copy for personal use.

#ntellectual (roperty

wnership of the copyright, trademark and all other rights, title and interest in the (ackage, as well as any copies,

derivative works >if any are permitted@ or merged portions made from the (ackage shall at all times remain with us or

licensors to us. "his (ackage is protected by local and international intellectual property laws, which apply but are not

limited to our copyright and trademark rights, and by international treaty provisions.

-ingle2<ser =icense 7estrictions

Aou may not make copies of the files provided in the (ackage

Aou may not translate and;or reproduce the files in digital or print format

Aou may not rent, lease, assign or transfer the (ackage or any portion thereof

Aou may not modify the courseware



"able of Contents

Chapter 1 2 B"&= #ntroduction 1

=inear &edia 5

Bypermedia 5

What is B"&= &arkup 3

ocument -tructure

' asic ocument

7eview Duestions /

-ummary

Chapter 5 2 verview of B"&= (age Creation *

Choosing a "e%t $ditor,

-tarting Note(ad,

Creating a asic -tarting ocument, 1+

-etting ocument (roperties, 11

Color Codes, 11

"he A $lement, 15

A "e%t Color, 15

=#NE, F=#NE and '=#NE, 13

ody #mage ackgrounds, 13

B"&= "ip0 #mage ackgrounds 1

(reviewing Aour Work, 1!

$dit, -ave G Fiew Cycle1!

<sing Netscape Navigator 1!

<sing &icrosoft #nternet $%plorer 1/

$%ercise 1

7eview Duestions 1*

-ummary 1

Chapter 3 2 Beadings, (aragraphs and reaks5+

Beadings, HB%I H;B%I 51

(aragraph, H(I H;(I 55

B"&= "ip0 &ultiple -paces 55

reak, H7I H;7I 53

BoriJontal 7ule, HB7I 5

$%ercise – Beadings 5!

$%ercise – BoriJontal 7ules 5/

$%ercise – (aragraphs G reaks 5

7eview Duestions 5*



-ummary 5

Chapter 2 Character 4ormatting 3+

old G #talic and other Character 4ormatting 31

'lignment 35

-pecial Characters G -ymbols 35

'dditional Character 4ormatting $lements 33

-trike "hrough "e%t 33

ig "e%t 33

-mall "e%t 33

-ubscript "e%t 33

-uperscript "e%t 33

efining instance of enclosed term 33

4ormatting e%tracts of program code 33

4ormatting sample output from programs 33

4ormatting Eeyboard te%t 33

4ormatting variables 33

asefont 3

B"&= "ip0 lockDuotes 3

$%ercise 1 3!

$%ercise 5 3/



ptional $%ercise 3/

7eview Duestions 3

Bo"&eta= (7 /.+ the ultimate web development tool www.hotmetalpro.com i

"able of Contents

-ummary 3*

Chapter ! 2 =ists 3

=ist $lements +

<nordered =ist +

rdered =ist 1

efinition =ist 5

Nesting =ists 5

$%ercise – rdered =ist 3

ptional $%ercises

7eview Duestions !

-ummary /

Chapter / 2 #mages

-upported #mage 4ormats *

K#4 *

K#4 #nterlacing *

K#4 "ransparency *

K#4 'nimated *

8($K

=imited -upport or Non2-upported #mage 4ormats

#nserting #mages H#&KI!+

'dditional #mage 'ttributes !+

BoriJontal -pace B-('C$ !+

Fertical -pace F-('C$ !+

B"&= "ip0 #mages !+

$%ercise 1 !1

ptional $%ercise !1

7eview Duestions !5

-ummary !3

Chapter 2 'nchors, <7=s and #mage &aps !

=ink $lements H' BrefLI H;'I !!

=ink "ypes !!

#nternal =inks !!

=ocal =inks !!

$%ternal =inks !!

<7=s – <niform 7esourced =ocators !/

B""( – Byper"e%t "ransport (rotocol !/

4"( – 4ile "ransfer (rotocol !/



News – News Kroups !/

Kopher !

$2mail !

"elnet – 7emote "erminal $mulation !

#nternal =inks !*

B"&= "ip0 =inks !*

#mage &aps !

-erver2side #mage &aps !

Client2side #mage &aps /+

$%ercise – &ailto and B""( =ink /1

7eview Duestions /5

-ummary /3

Chapter * 2 "ables /

"ables H"'=$I H;"'=$I /!

"able 'ttributes //

"able Captions /

"able Beader /



B"&= "ip0 Centering "ables /

$%ercise – 'dd and customiJe a table +

7eview Duestions 1

-ummary 5

ii =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net

"able of Contents

Chapter 2 4rames 3

4rames

4rames 'rchitecture !

Creating a 4rames (age /

4rameset /

ther 'ttributes of the 47'&$-$" $lement

4rame *

Noframes

"argets *1

-pecial "argets *5

$%ercise – <sing a 4ramed page *3

$%ercise – Creating a link in a framed environment *3

7eview Duestions *

-ummary *!

Chapter 1+ 2 4orms */

4orms H47&I H;47&I *

4orm 'ttributes **

B"&= "ip0 4orms**

4orm $lements *

"e%tbo%es *

(assword bo%es +

Check bo%es 1

7adio;ption utton 1

4ile <pload 5

(ush button 5

-ubmit button 3

#mage submit button 3

7eset utton 3

"e%t area

-elect !

rop down list !

=ist bo% !

ptions !

Common Kateway #nterface 2 CK# /



CK# -cripts /

-ection 3.5.a0 -imple CK# (rogram

-ection 3.5.b0 "hree2"ier Web 'pplication evelopment *

-ection 3.5.c0 4our2"ier Web 'pplication evelopment

$%ercise – Creating an rder 4orm 1++

7eview Duestions 113

-ummary 11

Chapter 11 2 8'F' and 8'F'-cript #ntroduction 11!

8'F' 11/

'pplet 11/

'pplet 'ttributes 11/

H('7'&I $lement 11/

8'F'-cript 11*

$%ercise – #nserting a 8'F' 'pplet 15+

ptional $%ercise 151


-ummary 153

Chapter 13 2 'ctive) bMects and F-cript introduction 15

'ctive) -upport15!

H8$C"I 15!

F-cript 15*

$%ercise – 'dding an 'ctive) bMect to a page 15

ptional $%ercise – 'dding F-cript to a page 13+




Bo"&eta= (7 /.+ the ultimate web development tool www.hotmetalpro.com iii

"able of Contents

-ummary 135

Chapter 1 2 -pecial $lements 133

<ses of the &eta $lement 13

Client (ull, -erver (ush 13

escription 13

Eeywords13

'uthor 13

Company 13!

Copyright 13!

'dding sound to an B"&= page 13/

$mbed 13/

K-ound13/

&aruee 13

link 13

$%ercise – 'dding Client (ull, -erver (ush 13*



ptional $%ercise 13

7eview Duestions 1+

-ummary 11

Chapter 1! 2 (age =ayout and esign Considerations 15

"echnical esign Considerations 13

-creen 7esolution 13

Color epth 13

ocument -iJe vs. ownload "ime 1

(age =oading – B""( 1.+ vs. B""( 1.1 1!

rowser Compatibility G Duirks 1!

(age layout 1/

(age =ayout Kuidelines 1/

-ite esign 4actors and Criteria 1*

-ite =ayout and Navigation 1*

7eview Duestions 1

-ummary 1!+

Chapter 1/ 2 Cascading -tyle -heets 1!1

#ntroduction to Cascading -tyle -heets 1!5

#nline -tyles 1!3



$mbedded -tyle -heets1!

=inked -tyle sheets 1!/

Classes 1!

#s 1!*

#F and -('N 1!

Cascading and #nheritance 1/+

$%ercise – #nline -tyles 1/5

$%ercise – $mbedded -tyles 1/3

$%ercise – =inking in a Cascading -tyle -heet 1/

$%ercise – $diting a Cascading -tyle -heet 1/!

7eview Duestions 1//

-ummary 1/



iv =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net

1B"&= #ntroduction

#n this chapter you will be introduced to the concepts of linear media and

hypermedia. Aou will learn about B"&= and the basics of document structure.

bMectives

<pon completing this section, you should be able to

$%plain hypermedia vs. linear media

efine B"&=



escribe the asic ocument -tructure

#dentify the sub2elements of the header



Bo"&eta= (7 /.+ the ultimate web development tool www.hotmetalpro.com

1



=inear &edia

=inear media is a term used to describe any media where there is a definedbeginning and a linear progression to the end. 4orms of linear media such as

movies, audio and videotapes, and most books are organiJed with this

e%pectation. "he World Wide Web, however, is organiJed very differently.

Bypermedia

Bypermedia is where the user simply selects the ne%t item of interest and is

immediately transported to that new location. ' good e%ample is an audio C

where you can choose song ! and listen to it almost immediately. Contrast this

with an audiotape where you would have to scan through from your current

location on the tape to the beginning of the song.

When this concept is applied to te%t you get hypertext, where by {Clicking} on a

link or hotspot >hyperlink@ you are immediately transported to a new locationwithin the same page or to a new page altogether.

When you interlink a large number of pages of te%t on different computers all

over the world, you get a spider web2like system of links and pages. "his is



known as the World Wide Web – a system whereby pages stored on many

different web servers, connected to the #nternet, are linked together.

"he system is useful because all of the pages are created in the same format.

"his format or OlanguageP is called B"&=, >Byperte%t &arkup

=anguage@ a subset of an international standard for electronic document

e%changed called -K&= >-tandard KeneraliJed &arkup =anguage@.

#n this class you will be introduced to the format of an B"&= page, you will learn

about the components that make up B"&=, and how to create pages that can be

published on the World Wide Web.

5 =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net

What is B"&= &arkupQ

B"&= is a set of logical codes >markup@ in parentheses that constitute theappearance of a web document and the information it contains.

$.g. "his te%t would appear bold in the browser 

"he codes are enclosed by less than O<P, and greater than O>P brackets. "hese

bracketed codes of the markup are commonly referred to as tags.

B"&= codes are always enclosed between brackets and are not case2sensitiveR

meaning, it does not matter whether you type them in upper case or lower case.

Bowever, tags are easier to recogniJe in a web document if they are capitaliJed.

&ost elements have an opening element >tag@ and a closing element >tag@

distinguished by the O /P inside the O.

Words that follow the element and are contained inside the O>P bracket of the

opening tag are called attributes. 'ttributes are not repeated or contained in the

closing element >tag@. ConfusedQ 'ttributes are another way of describing the

element:s properties. 4or instance, a t2shirt can have several properties or

OattributesP – the t2shirt:s color, siJe, material etc. are all attributes.

'ttributes that appear to the right of the element are separated by a space, and

followed by an eual sign. "he value of the attribute is contained in uotes. #n

the following e%ample the element is 4N", the attribute is C=7, and the

value of that attribute is =<$.

$.g. "his te%t would be blue

&ost B"&= elements have more than one attribute.

$.g. "his te%t would be blue and one siJe

larger than normal




3



ocument -tructure

"he way a document is marked up with elements and their attributes is accordingto a ocument "ype efinition >"@. "hese are the rules that govern the way in

which a document can be marked up.

"he authoritative source for information about B"&= and the B"&= " is the

World Wide Web Consortium >W3C@ at http0;;www.w3.org. "he World Wide Web

Consortium is a not2for2profit organiJation that coordinates the evolution of the

Web. #t includes the #nternet $ngineering "ask 4orce, the group of people who

make recommendations for new markup.

' asic ocument

'n element called +T, surrounds the whole document. "his element contains

two sub2elements, +%-. and BO.. "hese elements are reuired to form any

B"&= document.



=& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net

<+T,>

<+%-.> has sub2elements that define header material0

<T'T%> document title. "he title of your document is what appears in a web

browser:s 4avorite or ookmark list. Aour document:s title should be as

descriptive as possible. -earch engines on the

#nternet use the document:s title for inde%ing purposes. </T'T%>

<B-&%> can be used to record the documentSs location in the form of a <7=.

"he <7= recorded here may be used to resolve a relative <7= >necessary if the

document is not accessed in its original location@. </B-&%>

<'&'N.%0> indicates to the browser that the document is an inde% document.

"his is used only if the document is on a server that does inde%ing. </'&'N.%0>

<'N1> indicates a relationship between this document and some other obMect

on the Web. </'N1>

<,%T-> provides information such as the page:s keywords and description that

appears in B""( headers. </,%T->

<&C!'2T> contains either 8'F' -cript or F -cript </&C!'2T>

<&T%> contains information used by cascading style sheets

</&T%>

</+%-.>

<BO.> the remaining B"&= elements are contained within these tags.

</BO.>

</+T,>

Note3 a framed document is formatted differently than a basic document and is

discussed in the advanced section of this course.




!



7eview Duestions

What does B"&= stand forQ

What is an $lementQ

What are the 'ttributes of an $lementQ

What are the three basic elements of an B"&= documentQ



What are the elements that can be contained in the header of the documentQ



/ =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net



-ummary

's a result of this chapter, you should be able to

$%plain hypermedia vs. linear media

efine B"&=

escribe the asic ocument -tructure

#dentify the sub2elements of the header



2B"&= (age Creation G $diting

#n this chapter you will learn to create B"&= pages with a standard te%t editor.

bMectives


Choose a "e%t $ditor.

Create a asic -tarting ocument.

<nderstand and -et ocument (roperties.

Fiew Aour 7esults in a rowser.



* =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net



Choosing a "e%t $ditor

"here are many different programs that you can use to create web documents."e%t editors are basic word processing programs without all of the Obells and

whistlesP of full2blown word processors. "he advantage of using a te%t editor is

that the files are created and saved with few if any invisible formatting codes,

which could drastically effect your document when, saved as a web page and

displayed in a browser. 4or this reason, te%t editors can be used uite effectively

to create web documents.

B"&= $ditors enable users to create documents uickly and easily by pushing a

few buttons. #nstead of entering all of the B"&= codes by hand, these programs

will generate the B"&= Tsource code: for you. B"&= $ditors are e%cellent tools

for e%perienced web developersR however, it is important that you learn and

understand the B"&= language so that you can edit code and fi% Tbugs: in your

pages.

"he current versions of both &icrosoft Word and Corel Word(erfect also have

the abilities to create web pages.

4or this course, we will focus on using the standard &icrosoft Windows te%t

editor, Note(ad. Aou can apply the same concepts using any te%t editor on any

platform.



&tarting Note2ad

Note(ad is the standard te%t editor that comes with both 1/ and 352bit versions

of the &icrosoft Windows operating system. "o start Note(ad in Windows !

follow the steps below0

Click on the O-tartP button located on your Windows task bar.

Click on O(rogramsP and then click on the directory menu labeled O'ccessoriesP.

=ocate the shortcut called ONote(adP and click the shortcut once.

Creating a asic -tarting ocument

's stated in Chapter ne, there are certain elements that are reuired in a webdocument:s structure. "he easiest way to create and develop a document is to

type the reuired elements in as a starting point. "his way you can add to your

document by inserting elements and adding content between the starting and

ending tags of e%isting elements and you won:t have to try to remember if you

have typed in the closing tag or not.

#n Note(ad you would start with0

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

't this point your page has a B$' and a A section inside the B"&= tags.

Aou also have a "#"=$ element, inside the B$' element, which you should fill

in. "he te%t in the "#"=$ element is used by the surfer:s browser and also by

search engines.

"he "#"=$ of your document appears in the very top line of the user:s browser. #f

the user chooses to OookmarkP your page or save as a O4avoritePR it is the "#"=$

that is added to the list.

"he te%t in your "#"=$ should be as descriptive as possible because this is what

many search engines, on the #nternet, use for inde%ing your site.

"he following is an e%ample of a document title0

<HTML>

<HEAD>

<TITLE>XtraNet University: HTML, ava!"ri#t, Nets"a#e,

Mi"r$s$%t an& !$%t'(a& Trainin)</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>



1+ =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net



-etting ocument (roperties

ocument properties are controlled by attributes of the A element. 4or

e%ample, there are color settings for the background color of the page, the

document:s te%t and different states of links.

Color Codes

Colors are set using O7KP color codes, which are, represented as he%adecimal

values. $ach 52digit section of the code represents the amount, in seuence, of

red, green or blue that forms the color. 4or e%ample, an 7K value with ++ as

the first two digits has no red in the color. -ee the chart below for a listing of

some of the commonly used colors0

7K Color

Be%adecimal Falue

White

U444444

lack



U++++++

7ed

U44++++

Kreen

U++44++

lue

U++++44

&agenta

U44++44

Cyan

U++4444

Aellow

U4444++

'uamarine

U+3

akerSs Chocolate

U!C331

Fiolet

U4!44

rass

U!'/5

Copper

U*333

(ink

U44/$C



range

U444++

"here are several resources available on the #nternet that chart colors and theirhe%adecimal values. #f you reuire more information about color values, there is

an e%cellent site entitled OFKesign:s #nteractive Color

CubeP that displays the background color code when you put your cursor over a

small color sample. "he web address is0 http0;;www.vgdesign.com;color.html


11



The BO. %lement

"he A $lement of a web page is an important element in regards to thepage:s appearance. "his element contains information about the page:s

background color, the background image, as well as the te%t and link colors.

#f the A $lement is left blank, web browsers will revert to their default colors.

#n older browsers, if the A element is left blank, the page:s background color

will be a light gray. "he newer browsers, #$ V and Netscape V, default to using

the client:s Windows colors settings.

#t is very common to see web pages with their background color set to white or

some other color. "o set your document:s background color, you need to edit the

HAI element by adding the KC=7 attribute. "he following e%ample

would display a document with a white background color0

HA KC=7LPU444444PIH;AI

T%0T Color

"he "$)" attribute is used to control the color of all the normal te%t in the

document. "his will affect all of the te%t within the document that is not being



colored by some other element, such as a link. "he default color for te%t is black.

"he "$)" attribute would be added as follows0

HA KC=7LPU444444P "$)"LPU44++++PIH;AI

#n this e%ample, the document:s page color is white and the te%t would be red. 's

suggested earlier, it is important to ensure that your document:s te%t is a color

that will stand out from your background color.




hosting.olm.net



'N14 5'N14 and -'N1

"hese attributes control the colors of the different link states0

=#NE 2 initial appearance – default L lue

F=#NE 2 visited link – default L (urple

'=#NE 2 active link being clicked – default L 7ed

&any web developers will set the link colors of their documents to flow with the

color scheme of the site. "he format for setting these attributes is0

HA KC=7LPU444444P "$)"LPU44++++P =#NELPU++++44P

F=#NELPU44++44P '=#NELP4444++PI

"he results of the above A element would be a white background with linksbeing blue, visited links as magenta and active links colored in yellow.

$sing 'mage Ba6kgrounds

"he A element also gives you the ability of setting an image as the

document:s background. ackground images are OtiledP in the web browserR

which means that they are replicated and positioned below and beside each

other until the browser screen is filled. "o create a professional look, images

must be Tseamless:. &eaning that when the copies are placed below and beside

each other the seams are invisible.

<sing background images can be very effective if used properly. 4or instance,

you may want your company:s logo as your background or you could also create

a border background so that it appears as though your page is divided into two

columns. ' background image must be either in the form of a .gif or .Mpg file.

"here will be more information on image files provided in Chapter /.

'n e%ample of a background image:s B"&= code is as follows0

HA 'CEK7<NLPlogo.gifP KC=7LPU444444PI

#n this e%ample, we have set the document:s background image to Tlogo.gif:. We

have also added the KC=7 attribute as well so that the browser window will

have a white background during the process of loading the background image.


13

+T, Tip

When using a background image for your document, keep in mind that your te%twill appear on top of the image. ackground images should be a light color so

that your te%t is readable.

efore you set the color properties of your document, keep in mind that not every

user who visits your page will have their display colors set to the same as yours.

-ome users still work on computers that can only display 1/ colors. <se caution

when setting your document:s properties if you are concerned about how the

page will appear.




hosting.olm.net



(reviewing Aour Work

nce you have created your basic starting document and set your documentproperties it is a good idea to save your file. -ince you are publishing for the

#nternet, you must save your files in a format that web browsers can interpret. '

standard web page:s file e%tension is usually

O.htmP. -ome developers name their files with the e%tension O.htmlP but this

format is not compliant on all platforms. #n our e%amples we will use the

.htm file e%tension.

"o save a file, in Note(ad, follow these steps0

=ocate and click on the menu called O4ile ..P

-elect the option under 4ile &enu labeled O-ave 's P

#n the O4ile NameP te%t bo%, type in the entire name of your file >including the

e%tension .html@. i.e. inde%.html



#n Note(ad you have to type the entire filename including its e%tension. #f you do

not type in the file:s e%tension, Note(ad will assume that you want your

document to be a te%t document with the e%tension .t%t.

$dit, -ave G Fiew Cycle

's you continue to add to your web document>s@, it is important to preview your

work in a browser such as Netscape Navigator or &icrosoft #nternet $%plorer.

"o preview your work, open a web browser and do the following0

'n Nets6ape Navigator3

Click on the menu labeled O4ile P

=ocate the menu option, Open (age P




1!



#n the Open (ageP dialog bo%, click on the OChoose 4ile P button and locate

your web document. $nsure that the ONavigatorP button option is clicked as you

want to preview the work in the browser window.

nce you have chosen the file click on OpenP

'n ,i6roso7t 'nternet %xplorer3

Click on the menu labeled O4ile P

=ocate the menu option, Open P



#n the OpenP dialog bo%, click on the Orowse P button and locate your web

document. Click OEP once you have selected your file.

nce you have opened and previewed your work in a web browser, you can

continue working by adding to and editing the html file, saving the file with the

changes and then viewing the changed file.

Aou will be more productive if you do not close your web browsersR simply

minimiJe them and continue working. When you want to preview your work

again0

save your html file:s changes

switch to one of your browsers

hold down the X-B#4"Y key

in Netscape, click on the button labeled O7$='P

in #$ click on the button labeled O7$47$-BP

"he web browser will load the same document but with the new revisions. "his

process is the $dit, -ave and Fiew cycle.



1/ =& World Class Web Bosting $2commerce and Custom #nternet -olutionshosting.olm.net



Chapter 5 – $%ercise 1

"he goal of this e%ercise is to familiariJe you with using the concepts discussedin Chapter 5.

2ro6edure

-tart Notepad.

Create the following B"&= page0

HB"&=I

HB$'I

H"#"=$I)AZ CorporationH;"#"=$I

H;B$'I

HA KC=7L?U444444?I H;AI

H;B"&=I



"his will set your documents background color to white. >lder browsers default

to gray@

-ave your file – call it inde%.htm. -ave it in the C0[B"&=4#=$-[$%ercises

directory.

(review your file. Fiew your file in Navigator, #$ and any other browser that you

have installed and are using.




1



7eview Duestions

What are the advantages of using a te%t editor instead of a full2blown word

processorQ

What does the "#"=$ element doQ

What attribute controls the document:s background colorQ

Bow are colors e%pressed as attribute valuesQ

What does the 'CEK7<N attribute doQ



1* =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net



-ummary


Choose a te%t editor

Create a basic document

-et the document:s properties

Fiew the results of your work




1

*Beadings, (aragraphs, reaks G BoriJontal

7ules

#n this chapter you will add headings to your page, insert paragraphs, add some

breaks, and add horiJontal rules.

bMectives


=ist and describe the different Beading elements.

<se (aragraphs to add te%t to a document.



#nsert breaks where necessary.

'dd a BoriJontal 7ule.



5+ =& World Class Web Bosting $2commerce and Custom #nternet -olutionshosting.olm.net



Beadings, (aragraphs, reaks and BoriJontal 7ules

Beadings, HB x I H;B x I

#nside the A element, heading elements B1 through B/ are generally used

for maMor divisions of the document. Beadings are not mandatory. Beadings are

permitted to appear in any order, but you will obtain the best results when your

documents are displayed in a browser if you follow these guidelines0

B10 should be used as the highest level of heading, B5 as the ne%t highest, and

so forth.

Aou should not skip heading levels0 e.g., an B3 should not appear after an B1,

unless there is an B5 between them.

"he siJe of the te%t surrounded by a heading element varies from very large in an

HB1I tag to very small in an HB/I tag.

HB"&=I 's displayed by the browser.



HB$'I

H"#"=$I$%ample (ageH;"#"=$I

H;B$'I

HAI

HB1IBeading 1H;B1I

HB5IBeading 5H;B5I

HB3IBeading 3H;B3I

HBIBeading H;BI

HB!IBeading !H;B!I

HB/IBeading /H;B/I

H;AI

H;B"&=I




51



(aragraph, H(I H;(I

(aragraphs allow you to add te%t to a document in such a way that it willautomatically adMust the end of line to suit the window siJe of the browser in

which it is being displayed. $ach line of te%t will stretch the entire length of the

window.


HB$'I


H;B$'I

HAI

HB1IBeading 1H;B1I

H(I(aragraph 1, ... H;(I

HB5IBeading 5H;B5I


HB3IBeading 3H;B3I




HBIBeading H;BI

H(I(aragraph , ... H;(I

HB!IBeading !H;B!I

H(I(aragraph !, ... H;(I

HB/IBeading /H;B/I

H(I(aragraph /, ... H;(I

H;AI

H;B"&=I

+T, Tip

#f you insert multiple empty paragraphs in succession, you will notice the

browsers display these with only one blank line between them.

#f you try to type two words separated by five spaces, only one space will display

in the browser

rowsers ignore multiple spaces between words, within paragraphs and within

tables. #f you have areas where you would like e%tra spaces or you want your

empty paragraphs to give you e%tra line spacing, you will want to insert a N-(

>non2breaking space@. ' N-( is an invisible character that takes up one space.

"o insert a N-( type GnbspR




hosting.olm.net



reak, H7I

=ine breaks allow you to decide where the te%t will break on a line or continue tothe end of the window. "here may be instances where you want the te%t to

appear on the ne%t line. $%ample0 a return address 2 contained in one (aragraph

but on multiple lines or te%t in a Beader, such as a title for the document.

Aou can insert a 4orced =ine reak H7I


HB$'I


H;B$'I

HAI

HB1IBeading 1H;B1I

H(I(aragraph 1, H7I

=ine 5 H7I

=ine 3 H7I



... H;(I

.

.

' H7I is an $mpty $lement, meaning that it may contain attributes but it does

not contain content. "he H7I element does not have a closing tag.

"he closing tag, H;7I, is not reuired as this element marks a position and

does not contain content.

"he H7I element uses one attribute – C=$'7 which can have a value of =$4",

7#KB" or '==. "he C=$'7 attribute forces a line downR if an image is located at

the page:s left margin, the clear =$4" attribute will move the cursor down to the

first line that is cleared at the left margin. "he same applies with the option of the

clear 7#KB" attribute. #f an image is at either the left or right margins, the clear

'== attribute will force a line break until both margins are cleared.




53



BoriJontal 7ule, HB7I

"he HB7I element causes the browser to display a horiJontal line >rule@ in yourdocument. "his element does not use a closing tag, H;B7I. -imply type HB7I to

insert a horiJontal line >rule@ element into your document.

Eey attributes for use with the HB7I element0

-ttribute

.es6ription

.e7ault 5alue

-#Z$

height of the rule in pi%els

5 pi%els

W#"B

width of the rule in pi%els or

1++\

percentage of screen width



N-B'$

draw the rule with a flat look

not set

instead of a 3 look

>3 look@

'=#KN

aligns the line >=eft, Center,

Center

7ight@

C=7

sets a color for the rule >#$ 3.+ or

not set

later@

HB"&=I

HB$'I 's displayed by the browser.


H;B$'I



HAI HB1IBeading 1H;B1I H(I(aragraph 1, H7I

=ine 5 H7I

HB7I

=ine 3 H7I

... H;(I



Chapter 3 – $%ercise 1 2 Beadings

#n this e%ercise you will add headings to your document.

2ro6edure

'dd an B1 to your page. #nside the tags key in 8our Company

Name9:

'dd an B5 after the B1 on your page. #nside the tags key in 8our

.ivision or .ept: Name:9

'dd an B3 after the B5 on your page. #nside the tags key in 8- 2ro;e6t Name9e.g. #ntranet (roMect.

'dd an B after the B3 on your page. #nside the tags key in 82ro;e6t Name9

(lan.




5!



Chapter 3 – $%ercise 5 – BoriJontal 7ules

#n this e%ercise you will add B7:s to your document.

2ro6edure

'dd a BoriJontal 7ule after the B1 and before the B5.

&ake the BoriJontal 7ule only !+\ of the width of the screen.

>7emember elements have attributes.@

'dd a BoriJontal 7ule after the last B on the page.

Aour document should look similar to this now0




HB$'I


H;B$'I

HA KC=7L?U444444?I

HB1I)AZ CorporationH;B1I

HB7 W#"BL?!+\?I

HB5I#- epartmentH;B5I

HB3I#ntranet (roMectH;B3I

HBI#ntranet (roMect (lanH;BI

HB3I#nternet (roMectHB3I

HBI#nternet (roMect (lanH;BI

HB7I

H;AI

H;B"&=I



5/ =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net



Chapter 3 – $%ercise 3 – (aragraphs G reaks

#n this e%ercise you will add paragraphs and a break to your document.

2ro6edure

'dd a (aragraph between each one of the Beadings. We will add content

between the paragraph tags later.

'dd a 7 in the first (aragraph so your fill looks similar to this one0

HB"&=I 's di splayed by the browser.

HB$'I


H;B$'I

HA KC=7L?U444444?I

HB1I)AZ CorporationH;B1I



HB7 W#"BL?!+\?I

HB5I#- epartmentH;B5I

H(IH7IH;(I


H(IH;(I


H(IH;(I

HB3I#nternet (roMectHB3I

H(IH;(I

HBI#nternet (roMect (lanH;BI

H(IH;(I

HB7I

H;AI

H;B"&=I




5



7eview Duestions

Bow do browsers handle multiple spacesQ

Bow do paragraphs format te%tQ

Bow many Beadings are thereQ

When would you use a reakQ



Bow would you insert a B7 that is centered and half a page wideQ




hosting.olm.net

-ummary


=ist and describe the different Beading elements.

<se paragraphs to add te%t to a document.

#nsert breaks were necessary.

'dd a BoriJontal 7ule.




5

+Character 4ormatting

#n this chapter you will learn how to enhance your page with old, #talics, and

other character formatting options.

bMectives


Change the color and siJe of your te%t.

<se Common Character 4ormatting $lements.

'lign your te%t.

'dd special characters.

<se other character formatting elements.



3+ =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net

<%,> Emphasis </%,> browsers usually display this as italics.

<&T!ON=> &T!ON= </&T!ON=> browsers display this as bold.

<TT> TELETYE </TT> "e%t is displayed in a mono2spaced font.

<C'T%> Citation </C'T%> represents a document citation.

&ample Coding3

H(IH4N" -#Z$L?V1?Ine -iJe =argerH;4N"I 2 Normal 2 H4N" -#Z$L?

21?Ine -iJe -mallerH;4N"IH7I HIoldH;I 2 H#I#talicsH;#I 2

H<I<nderlinedH;<I 2

H4N" C=7L?U44++++?IColoredH;4N"IH7I

H$&I$mphasiJedH;$&I 2 H-"7NKI-trongH;-"7NKI 2 H""I"ele

"ypeH;""IH7I

HC#"$ICitationH;C#"$IH;(I

Nets6ape Navigator &ample




31

'lignment

-ome elements have attributes for alignment >'=#KN@ e.g. Beadings, (aragraphsand BoriJontal 7ules. "he three alignment values are0 =$4",

7#KB", C$N"$7.

'lignment of many other elements is not well supported, meaning that you can:t

rely on getting the desired results. (roper positioning of all of the components in

a web page can be achieved by using other elements to control alignment0

<.'5 -'=N"value></.'5> 7epresents a division in the document and can

contain most other element types. "he alignment attribute of the #F element is

well supported.

<C%NT%!></C%NT%!> Will center elements.

<T-B%></T-B%> #nside a "'=$, alignment can be set for each individual

cell.

-pecial CharactersG -ymbols

-pecial Characters and -ymbols not found on the average keyboard can be

inserted using special character entities. "hese special characters are specified

in an internationally accepted character set known as the #-2=atin21 >#-2**!2

1@.

"hese characters are recogniJed in B"&= as they begin with an ampersand and

end with a semi2colon e.g. ?value@ "he value will either be an entity name or a

standard '-C## character number.

"he following table represents some of the more commonly used special

characters. 4or a comprehensive listing, visit the W3C:s section on special

characters at0 http0;;www.w3.org;&ark<p;B"&=(lus;htmlplus]13.html

&pe6ial Chara6ter

%ntity Name

&pe6ial Chara6ter

%ntity Name

ampersand

GampR

greater2than sign

GgtR

asterisk

GlowastR

less2than sign

GltR

cent sign

GcentR



non2breaking space

GnbspR

copyright

GcopyR

uotation mark

GuotR

fraction one tr

Gfrac1R

registration mark

GregR

fraction one half

Gfrac15R

trademark sign

GtradeR


hosting.olm.net

"hese special formatting elements are used for technical documentationapplications0

<.FN> defining instance of the enclosed term </.FN>

<CO.%> used for e%tracts of program code </CO.%>>

<&-,2> used for sample output from programs, scripts, etc. </&-,2> <1B.>

used for te%t to be typed by the user </1B.>

<5-!> used for variables or arguments to commands </5-!>

%xample3

H(IH4NI defining instance of the enclosed term H;4NIH7I HC$I used for e%tracts of

program code H;C$IH7I

H-'&(I used for sample output from programs, scripts, etc. H;-'&(IH7I HEI used for

te%t to be typed by the user H;EIH7I

HF'7I used for variables or arguments to commands H;F'7IH7IH;(I

!esults3 >viewed in Navigator @




33

"he address element specifies information such as authorship and contact

details for the current document. "here is no support for an alignment attribute

with the H'7$--I element. Aou will need to use some other method if you

want the address displayed differently from left aligned.

</-..!%&&>

H(IH=CED<"$I"his is the first day of the rest of your life, make it

count.H;=CED<"$I

HC$N"$7IH'7$--I1*+ 'ttwell r. -uite 13+H7I"oronto, NH7I&W

/'H;'7$--IH;C$N"$7IH;(I HB/IBeading /H;B/I

H(I(aragraph /, ... H;(I

!esults3



+T, Tip

lockDuotes can be OnestedP – inserted multiple times in succession – to indent

a section significantly. "his techniue also helps you to create more white space

on the sides of your pages.


hosting.olm.net



Chapter – $%ercise 1

#n this e%ercise you will add special characters and formatting elements.

2ro6edure

elow the bottom BoriJontal 7ule, add ^ )AZ Corporation, and center it on the

page.

't the end of the line you Must added, insert a trade mark symbol using GU1!3R.

'fter the information you Must added, add an address element and enter in your

company:s address.

Aour document should look similar to this sample0

H( '=#KNL?C$N"$7?IGcopyR )AZ Corporation GU1!3RH;(I H'7$--I

1*+ 'ttwell r. -uite 13+H7I"oronto, NH7I&W /'

H;'7$--I



!. -ave your file and then (review your document in a browser.




3!

#n this e%ercise you will work with more formatting elements.

2ro6edure

'dd a lock Duote under each B3 and describe a bit about the proMect.

Change the color of the te%t in the lock Duote to blue.

ecrease the siJe of the te%t in the block uote.

Aour document should look similar to this0


H=CED<"$IH4N" C=7L?U++++44? -#Z$L?21?I"he #ntranet (roMect

plays a

very important role in increasing the communication between departments

and employees here at )AZ Corp.H;4N"IH;=CED<"$I


Chapter – ptional $%ercise

"his e%ercise provides additional practice.

2ro6edure

'dd some te%t about the ivision or epartment in the (aragraph below the B5,

and try some of the other character formatting elements.

Center the address at the bottom of the page.



3/ =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net



7eview Duestions

What are si% elements for formatting charactersQ

What are two methods for centering te%tQ

Bow would you add the copyright symbol to a pageQ

What are the steps reuired to change te%t colorQ




3

-ummary


Change the color and siJe of your te%t.

<se common character formatting elements.

'lign your te%t.

'dd special characters and symbols.

<se additional character formatting elements.




hosting.olm.net



.=ists

#n this chapter you will learn how to create a variety of lists.

bMectives


Create an unordered list

Create an ordered list



Create a definition list

Nest =ists




3

=ist $lements

B"&= supplies several list elements. &ost list elements are composed of one ormore H=lI >list item@ elements.

<=0 <nordered =ist. #tems in this list start with a list mark such as a bullet.

rowsers will usually change the list mark in nested lists.

H<=I

H=#I=ist item...H;=#I H=#I=ist item...H;=#I

H=#I=ist item...H;=#I H;<=I

Aou have the choice of three bullet types0 isc >default@, Circle, -uare. "hese

are controlled in Netscape Navigator by the O"A($P attribute for the H<=I

element.

H<= "A($L?-D<'7$?I

H=#I=ist item...H;=#I H=#I=ist item...H;=#I H=#I=ist item...H;=#I H;<=I

Note3 Changing the bullet type is not supported in #nternet $%plorer 3.+ or below.



+ =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net



=0 rdered =ist. #tems in this list are numbered automatically by the browser.

H=I

H=#I=ist item...H;=#I H=#I=ist item...H;=#I

H=#I=ist item...H;=#I H;=I

Aou have the choice of setting the "A($ 'ttribute to one of five numbering styles.

"A($

Numbering -tyle

1

'rabic numbers

1, 5, 3,

a

=ower alpha

a, b, c, W

'

<pper alpha

', , C,

i

=ower roman

i, ii, iii, W

#

<pper roman

#, ##, ###,

Aou can also specify a starting number for an ordered list. "he value of the

-"'7" 'ttribute is always an 'rabic number >1,5,3,@. Changing the starting

number may be useful in a situation where your list items are separated by an

image or by te%t unrelated to the list.

H= "A($L?i?I H=#I=ist item...H;=#I H=#I=ist item...H;=#I H;=I

H(I<nrelated te%t ... H;(I

H= "A($L?i? -"'7"L?3?I H=#I=ist item...H;=#I

H;=I


1



=0 efinition =ist. "his kind of list is different from the others. $ach item in a =

consists of one or more efinition "erms >" elements@ , followed by one or more

efinition escriptions > elements@.

H=I

H"IB"&=H;"I

HIByper "e%t &arkup =anguageH;I H"IogH;"I

HI' humanSs best friend9H;I

H;=I

Note the format 2 the definition is always placed indented on the ne%t line to

emphasiJe the relationship.

Nesting =ists

Aou can nest lists by inserting a <=, =, etc., inside a list item >=#@.

%xample3

H<= "A($L?-D<'7$?I H=#I=ist item...H;=#I

H=#I=ist item...

H= "A($L?i? -"'7"L?3?I H=#I=ist item...H;=#I

H;=I

H;=#I

H=#I=ist item...H;=#I H;<=I

!esults3




hosting.olm.net

#nsert another ordered list after your paragraph, and start numbering where your

first list left off.

Aour work should look something like the following0

H<= "A($L?-D<'7$?I

H=#I(urchase the ?#mplementing an #ntranet 2 "he * -tep Kuide?H;=#I

H=#IChoose a Web -erver (latform

H= "A($L?i?I H=#I<ni%H;=#I H=#IWindows N"H;=#I H;=I

H;=#I

H=#Iuild an alpha #ntranet site.H;=#I H;<=I

-ave and (review your work. #t would be a shame to loose it, and you have to

take a look at the great page you are creating.




3



Chapter ! – ptional $%ercises

#n this e%ercise you can practice creating and editing another list.

2ro6edure

1. Create another list this time under the second (roMect (lan.




hosting.olm.net



7eview Duestions

Can you nest listsQ

When would you use an ordered list instead of an unordered listQ

Why would you use a definition listQ




!



-ummary


Create an unordered list

Create an ordered list

Create a definition list

Nest your lists




hosting.olm.net



#mages

#n this chapter you will learn about images and how to place images in your

pages.

bMectives


istinguish between supported graphics formats and unsupported graphics

formats.



etermine which graphic format for the type of image.

'dd images to your pages.



-upported #mage 4ormats

='F3 Kraphic #nterchange 4ormat uses a ma%imum of 5!/ colors, and usescombinations of these to create colors beyond that number. "he

K#4 format is best for displaying images that have been designed using a

graphics program, like logos, icons, and buttons.

K#4 images come in two different versions and have some e%tra functionality that

8($Ks do not. Aou can save K#4 images in K#4 * or K#4 *a format. K#4 *a isnewer and has the following features that K#4 * and 8($K files do not0

'nterla6ing3 if you save a K#4 *a image as interlaced, the browser will be able

to display the image as it loads, getting gradually crisper and clearer until it is

finished. #nterlaced K#4s have slightly larger file siJes than non2interlaced K#4s,

so you will have to decide whether the interlacing effect is worth the e%tra

download time for your images.

Transparen6y3 with K#4 *a format images you can set a single color to be

transparent, that is, it will allow the background color or image to show through it.

"ransparency is most commonly used to make the rectangular background

canvas of an image invisibleR this feature can be very effective in Web page

design.

-nimated ='Fs3 K#4 *a images can also be animated using special software.

'nimated K#4 images are simply a number of

K#4 images saved into a single file and looped. Netscape Navigator and

&icrosoft #nternet $%plorer can both display animated K#4s, but many other

browsers cannot, and may not be able to display even the first image in the loop.

<se animated

K#4s with caution.




hosting.olm.net



2=4 2%=3 8oint (hotographic $%pert Kroup, is a good format for photographs

because 8($K files can contain millions of colors.

8($K images donSt give you the option of including transparency or of interlacing

images, but they do allow you to specify the degree of file compression so that

you can create a balance between image uality and file siJe.

' new addition to the 8($K format is (rogressive 8($K. (ro28($Ks boast

superior compression to regular 8($Ks. "hey also give you a wider range of

uality settings. (ro28($Ks also support interlacing.

=imited -upport or Non2-upported #mage 4ormats

"he following image formats are supported by some client computers but not all,

and as such are not recommended to be included in your B"&= pages. Aou

should first convert them to a supported format using a graphics editor, such as

Corel (hoto (aint or 'dobe (hotoshop.

2N=3 (ortable Network Kraphics, is good for combinations of te%t and graphics

within one image. (NK permits truecolor images, variable transparency,

platform2independent display, and a fast 5 interlacing scheme. Currently only

supported by #nternet $%plorer.



B,23 &- Windows it&a(

T'FF3 "agged #mage 4ile 4ormat

2C03 riginally developed by Z-4" for its (C (aintbrush program, (C) is a

graphics file format for graphics programs running on (Cs.

#mage creation is beyond the scope of this course. Bowever, there are some

e%cellent tutorials on creating images for the web at a web site called O'ndy:s 'rt

'ttackP >http0;;www.andyart.com;P@.


#nserting #mages

<',=></',=> "his element defines a graphic image on the page. #t is typicallyused for inline images

'mage File &!CD3 "his value will be a <7= >location of the image@ $.g.

http0;;www.domain.com;dir;file.e%t or ;dir;file.e%t.

-lternate Text -TD3 "his is a te%t field that describes an image or acts as a

label. #t is displayed when people turn the graphics off in their browsers, or whenthey position the cursor over a graphic image >now supported in most browsers@.

#t is also helpful as an accessibility feature.

-lignment -'=ND3 "his allows you to align the image on your page.

"he options include ottom, &iddle, "op, =eft, 7ight, "e%t"op, '-&iddle,

aseline, and '-ottom.

Eidth E'.T+D3 is the width of the image in pi%els. "his value can be obtained

from a graphics program or can be left unspecified.

+eight +%'=+TD3 is the height of the image in pi%els. "his value can be

obtained from a graphics program or can be left unspecified.

Border BO!.%!D3 is for a border around the image, specified in pi%els.

#f you use an image in an anchor you will want to set the border value to Jero so

that it is not outlined.

'dditional #mage 'ttributes

+&2-C%3 is for BoriJontal -pace on both sides of the image specified in pi%els.

' setting of ! will put five pi%els of invisible space on both sides of the image.

5&2-C%3 is for Fertical -pace on the top and bottom of the image specified in

pi%els. ' setting of ! will put five pi%els of invisible space above and below the

image.

+T, Tip3

"ry to keep your image file siJes small.

onSt rely e%clusively on images to convey your information.

<se alternate te%t for images.

-ome background images make it difficult to read the te%t of the page.



!+ =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net



Chapter / – $%ercise 1

Aou will need the files located on the diskette shipped with your materials for this

e%ercise.

#n this e%ercise you will add an image to your document.

2ro6edure

#n your page add the following

H#&K -7CL? file0;;;c_;htmlfiles;images;teddy5.Mpg ? '="L?"ed the dog?I

"he contents your -7C may be different depending on where you placed your

image file. "he value of the -7C must be a Oweb accessibleP address.

The example above uses a 7ormat that is NOT a66eptable 7or the eb but

ill ork on your lo6al orkstation:



"ry changing the F-pace and B-pace attribute to see the affect.

"ry adding a border.

Chapter / – ptional $%ercise

&ore practice.

2ro6edure

"ry adding an animated graphic image, from the graphics located in

C0[B"&=files[#mages[ directory. >Omad]hack.gifP or Oteethani.gifP@




!1



7eview Duestions

Why should you describe the image in the '=" parameterQ

Why do you use transparency for your graphicsQ

Why would you reduce the number of colors in a graphic imageQ



!5 =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net



-ummary


istinguish between supported graphics formats and unsupported graphics

formats.

etermine which graphic format for the type of image.

'dd images to your pages.




!3

0 'nchors, <7=s and #mage &aps

#n this chapter you will learn about <niform 7esource =ocators, and how to add

them as 'nchors or =inks inside your web pages.

bMectives


#nsert links into documents

efine =ink "ypes

efine <7=

=ist some commonly used <7=s

(lan an #mage &ap



! =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net

=ink $lements

#t is normal for B"&= documents to contain links to other documents, which canbe located anywhere on the Web. "hese links are provided by

<7=s ><niform 7esource =ocators@ , which give the location and filename of a

document, and the method used to access it.

"he following elements represent links to other documents0

<- +!%F"$!> </->3 "he B7$4 attribute of the anchor element specifies a

<7=. #f this attribute has a value, the contents of the <-> </-> element will be

highlighted when the document is displayed in a browser window, and {Clicking}

on this content will cause the browser to attempt to open the file specified by the

<7=.

$.g.H' B7$4Lhttp0;;www.%nu.comI)traNet <niversityH;'I. #n this e%ample the

te%t O)traNet <niversityP represents the contents that would be highlighted as a

link to the file named as the value of the B7$4.

ink Types

"here are three maMor types of links0

'nternal inks3 are links within a document. "hey help in the navigation of large

documents.

o6al inks3 are links to documents on the local web server. =ocal links can be

the full <7= >Complete e.g. http0;;www.yourdomain.com;sales;report.htm@ or

partial

>7elative to your current directory e.g. ;sales;report.htm@.

%xternal inks3 links to pages on other web servers. $%ternal links are alwaysthe full <7=.

N"$0 7emember that the colors of the links to be displayed in the browser are

controlled by attributes of the body element. $.g.

HA KC=7LPU444444P "$)"LPU44++++P =#NELPU++++44P

F=#NELPU44++44P '=#NELP4444++PI




!!

<7=s 2 <niform 7esource =ocators

' <7= is a standard way of referencing a -ervice, a Bost name, a (ort, and airectory2path.

-ervice3// Bost name 3 (ort ; irectory2path

$.g. http0;;www.1stvirtual.com0*+;default.htm

Not all of these components appear in each <7=, as you will see when you learn

about the different types of <7=s for different services. ut the preceding

e%ample is a good general guide.

B""( – Byper"e%t "ransport (rotocol

$.g. http0;;www.1stvirtual.com;default.htm

"he type of service is identified as http. #t is the standard protocol for linking to

web pages with multimedia content.

"he Bost name is www, in the domain 1stvirtual, in the Jone com >that identifies it

as a <- commercial site.@

default.htm is the actual web page.

4"( – 4ile "ransfer (rotocol

$.g. ftp0;;ftp.1stvirtual.com;priJes;brkbrk.wav

"he type of service is identified as ftp. "his service is used to create links to files

to be downloaded from ftp servers.

"he Bost name is ftp.1stvirtual.com.

"he subdirectory is priJes.

"he file is brkbrk.wav

News – News Kroups

$.g. news0alt.internet.services

"he type of service is identified as news, for the <senet newsgroup service.

"he newsgroup is alt.internet.services.

"his will invoke a clients newsreader program.



!/ =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net



Kopher

$.g. gopher0;;owl.trc.purdue.edu;

"he type of service is identified as gopher. > a predecessor to the World Wide

Web @

"he Bost name is owl.trc.perdue.edu.

$2mail – $lectronic &ail

$.g. mailto0 webmaster61stvirtual.com

"he type of service is identified as the mail client program. "his type of link will

launch the users mail client.

"he recipient of the message is webmaster61stvirtual.com

"elnet – 7emote "erminal $mulation



$.g. telnet0;;media.mit.edu

"he type of service is identified as the telnet client program.

"he Bost name is media.mit.edu.




!



#nternal =inks

=inks can also be created inside large documents to simplify navigation. "odaySsworld wants to be able to get to the information uickly, and move around easily.

#nternal links can help you meet these goals.

-elect some te%t at a place in the document that you would like to create a link

to, then add an anchor to link to like this0

H' N'&$L?bookmark]name?Iook &arkH;'I

"he N'&$ attribute of an anchor element specifies a location in the documentthat we will link to shortly. 'll N'&$ attributes in a document must be uniue.

Ne%t select the te%t that you would like to create as a link to the location created

above. 'dd the following anchor around the te%t link. H'

B7$4L?Ubookmark]name?IKoto ook &arkH;'I

"he surfer will only see the link created in step two, they will not see the anchor

created in step one.

+T, Tip



Aou can combine a link to another page with an internal link inside that page. H'

B7$4Lhttp0;;www.whatever.com;pagename.htmUlocationI "his will link to a

specified location on that page. "his is commonly used to reference a particular

area of a large document.



!* =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net

#mage &aps

#mage maps are images, usually in gif format that have been divided into regionsRclicking in a region of the image causes the web surfer to be connected to a new

<7=. #mage maps are a graphical form of creating links between pages.

"here are two types of image maps0

client2side

server2side

oth types of image maps involve a listing of co2ordinates that define the

mapping regions and which <7=s those co2ordinates are associated with. "his is

known as the map file.

-erver2side #mage &aps

-erver2side image maps >called #-&'(@ involve a separate map file that is linked

to the image by a program running on a Web server. -erver2side image maps are



one of two flavors NC-' 2 National Center for -upercomputer 'pplications or

C$7N 2 Conseil $uropean pour la 7echerche Nuc=aire.

H' B7$4LPhttp0;;sitename;picture.mapPI

H#&K #-&'( -7CLP(icture.gifP 7$7L+I H;'I

C$7N -tyle0 picture.map file

default filename.htm

circle >153,1/+@ 5+ ne%t.htm

NC-' -tyle0 picture.map file

default filename.htm

circle ne%t.htm 153,1/+ 153,1*+

-upported -hapes0

Circle – Center2point radius or, for NC-' center, edge point

(oly – =ist of vertices, ma%. 1++, that define an irregular space

7ect – <pper2left, and =ower2right

(oint – single spot, coordinates are %,y


!

Client2side #mage &aps

Client2side image maps ><-$&'(@ use a map file that is part of the B"&=document >in an element called &'(@, and is linked to the image by the

Web browsers.

H#&K -7CLP(icture.gifP <-$&'(LPUmap1PI

H&'( N'&$LPmap1PI

H'7$' -B'($LP7$C"P C7-LP,15+, !/,1P B7$4LPwhatever.htmPI

H'7$' -B'($LP7$C"P C7-LP1++,5++, 1!/,5P B7$4LPwherever.htmPI

H;&'(I

-hapes0

7$C", or 7$C"'NK=$0 reuire four coordinates0 )1, A1, )5, and A5

C#7C, or C#7C=$0 reuires three coordinates center%, centery, and radius



(=A, or (=AKN0 reuires three or more pairs of coordinates

Note3 "here are a number of image map creation tools available for downloadfrom the web. "hey can greatly simplify the Mob of creating image maps by

calculating the C7- attributes >coordinates@ for the '7$' elements.



/+ =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net

#n this e%ercise you will create a link in your document.

2ro6edure

elow the address element add the e2mail address0 webmaster6%yJcorp.com.

(ut the e2mail address inside an anchor tag.

4or the <7= type in Omailto08your eGmail address9.

Center the link.

HC$N"$7I H' B7$4Lmailto0your6email.addressI webmaster6%yJcorp.com

H;'I H;C$N"$7I




/1

7eview Duestions

What are the components of a <7=Q

What protocols are supported by <7=sQ

What is the difference between an internal and e%ternal linkQ

What is the difference between complete and relative <7=sQ



Bow do you set the link colorsQ



/5 =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net

-ummary


#nsert links into documents

efine =ink "ypes

efine <7=

=ist some commonly used <7=s

Work with #mage &aps




/3



"ables

#n this chapter you will learn that tables have many uses in B"&=. "he most

obvious is a table of data, but tables can also be used to place graphics on a

page at Must the right spot or to format te%t and form input bo%es, or simulate

columns.

bMectives


#nsert a table.



$%plain a table:s attributes.

$dit a table.

'dd a table header.




hosting.olm.net



"ables

"he H"'=$I H;"'=$I element has four sub2elementsR "able 7owH"7IH;"7I, "able Beader H"BIH;"BI, "able ata H"I H;"I, and

Caption HC'("#NI H;C'("#NI. "he "able 7ow elements usually contain

"able Beader elements or "able ata elements. "he "able

Beader and "able ata elements can contain several of the body elements,

which allows for rich formatting of the data in the table. ' brief B"&= code

sample follows0

H"'=$ 7$7L?1?I

H"7I

H"BIColumn 1 BeaderH;"BI H"BIColumn 5 BeaderH;"BI

H;"7I

H"7I

H"I7ow 1 2 Col 1 H;"I H"I7ow 1 2 Col 5 H;"I H;"7I

H"7I

H"I7ow 5 2 Col 1 H;"I H"I7ow 5 2 Col 5 H;"I H;"7I

H"7I



H"I7ow 3 2 Col 1 H;"I

H"I7ow 3 2 Col 5 H;"I H;"7I

H;"'=$I

7esults in Navigator0

"ables are used a great deal in the creation of web pages. "hey allow you to

create boundaries that make positioning easier. "hey are great for formatting

forms, a topic you will study later in the course.




/!



"able 'ttributes

B=Color3 -ome browsers support background colors in a table. "he color youselect will be e%pressed as a he%adecimal red2green2blue value. Aou can enter

this value directly or you can enter one of the standard Windows color names.

>these color names are currently supported only by &icrosoft

#nternet $%plorer@.

Eidth3 you can specify the table width as an absolute number of pi%els or apercentage of the document width. "he width corresponds to the W#"B attribute

of the "'=$ element. Aou can set the width for table cells as well.

Border3 the lines that form the boundary of each table cell when the file is

displayed in a browser. Aou can choose a numerical value for the border width,

which specifies the border in pi%els, or S7$7S >causing the browser to draw

the default border@. "he table border corresponds to the 7$7 attribute of the

"'=$ element. ' setting of 7$7LP+P will make the border disappear.

-ome browsers do not draw borders around empty table cells. Aou may want to

insert a N-( in each cell when you create the table so that each cell will display

border and background color.

Cell&pa6ing3 Cell -pacing represents the space between cells and is specified

in pi%els.

Cell2adding3 Cell (adding is the space between the cell border and the cell

contents and is specified in pi%els.

-lign3 tables can have left, right, or center alignment. "he alignment attribute of

the <T-B%> is not well supported and you will want to use <.'5> or

<C%NT%!> to control the position of your table in your document.

Ba6kground3 ackground #mage, will be tiled in #nternet $%plorer 3.+ and above.

BorderColor3 "he color of the border around the table. "his is supported

properly by Navigator .+, and #nternet $%plorer 3.+ and above.

BorderColoright3 =ight color used to outline two sides of a cell or the table,

only supported in #nternet $%plorer 5.+ and above.

BorderColor.ark3 ark color used to outline two sides of a cell or the table, only

supported in #nternet $%plorer 5.+ and above.

// =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net



"able Caption

' "able caption allows you to specify a line of te%t that will appear centeredabove or below the table. "his can act like a title for the table.

H"'=$ 7$7L?1? C$==('#NKL?5?I

HC'("#N '=#KNL?""&?I=abel for my "ableH;C'("#NI H"7I

"he caption element has one attribute '=#KN that can be either "( >above the

table@ or ""& >below the table@. Aou can use standard character formatting

codes inside the C'("#N element.



"able Beader

"able ata cells are represented by the " element. Cells can also be "B >"able

Beader@ elements which results in the contents of the "able

Beader cells appearing centered and in bold te%t.

#f you simply wish to bold the te%t, we suggest that you insert a or -"7NK

element inside the table cell>s@ instead of changing the table cell element.




/



"able ata and "able Beader 'ttributes

Colspan3 -pecifies how many cell columns of the table this cell should span.

!ospan3 -pecifies how many cell rows of the table this cell should span.

-lign3 cell data can have left, right, or center alignment.

5align3 cell data can have top, middle, or bottom alignment.

Ba6kground3 ackground #mage, will be tiled in #nternet $%plorer 3.+ and above.

B=Color3 -ome browsers support background colors. "he color you select will

be e%pressed as a he%adecimal red2green2blue value.

Eidth3 you can specify the width as an absolute number of pi%els or a

percentage of the document width.

+eight3 you can specify the height as an absolute number of pi%els or a

percentage of the document height.



' table e%ample using 7W-('N and C=-('N. Notice that in the case of the

C=-('N that there is only one " tag set. #n the case of the 7W-('N, the

row below is less one " tag set.

H"'=$ 7$7L?1? C$==('#NKL?5?I

HC'("#N '=#KNL?""&?I=abel for my "ableHC'("#NI

H"7I

H"BIColumn 1 BeaderH;"BI

H"BIColumn 5 BeaderH;"BI H;"7I

H"7I

H" C=-('NL?5?I7ow 1 2 Col 1 H;"I

H;"7I

H"7I

H" 7W-('NL?5?I7ow 5 2 Col 1 H;"I H"I7ow 5 2 Col 5 H;"I

H;"7I

H"7I

H"I7ow 3 2 Col 5 H;"I H;"7I

H;"'=$I

/* =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net



"he results in Navigator0

+T, Tip

"he following method of centering a table is supported by many browsers.

4irst you insert the <C%NT%!> </C%NT%!> element, then drag the table inside

the <C%NT%!> </C%NT%!> element.




/



Chapter * – $%ercise 1

#n this e%ercise you will work with a "able element.

2ro6edure

Create a table above the bottom BoriJontal 7ule.

Change its background color to yellow.

#ncrease its border to ! pi%els.

Change the "op 7ow to a table Beading, and add some headings.

'dd some te%t;data to your table.

Center the table using the Center element.

Center the address using the Center element >if not already done@.



-ave and (review.




hosting.olm.net



7eview Duestions

Bow would you create a "'=$ with no borderQ

What is Cell -pacingQ

What is Cell (addingQ

Bow would a row of "able Beader cells be formattedQ




1



-ummary


#nsert a table.

$%plain a table:s attributes.

$dit a table.

'dd a table header.




hosting.olm.net



4rames

4rames are a relatively new addition to the B"&= standard, having been included

in release 3.+ and therefore not all browsers support this group of elements.

(opular browsers, such as Netscape and #nternet $%plorer releases 3.+ and

higher do provide full frames support.

bMectives


Create a 4rames based page.

Work with the 4rameset, 4rame, and Noframes elements.

<se the attributes of the 4rames elements to control the display.

-et "argets appropriately.

(rereuisites

#nternet $%plorer 3.+ or greater

Navigator 5.+ or greater

4rames are (latform #ndependent




3



4rames

' framed page is actually made up of multiple B"&= pages. "here is one B"&=document that describes how to break up the single browser window into multiple

windowpanes. $ach windowpane is filled with an B"&= document.

4or e%ample to make a framed page with a windowpane on the left and one on

the right reuires three B"&= pages. oc1.html and oc5.html are the pages

that contain content. 4rames.html is the page that describes the division of the

single browser window into two windowpanes.



#n this chapter we will describe the tags that are used to create the 4rames.html

page that will break up the browser window into multiple windowpanes.


hosting.olm.net



4rame (age 'rchitecture

' H47'&$-$"I element is placed in the B"&= document before the

HAI element. "he H47'&$-$"I describes the amount of screen real

estate given to each windowpane by dividing the screen into 7W- or C=-.

"he H47'&$-$"I will then contain H47'&$I elements, one per division of the

browser window.

HB"&=I

HB$'I

H"#"=$I4ramed (ageH"#"=$I

H;B$'I

H47'&$-$" C=-L?53\,\?I



H47'&$ -7CL?doc1.htm? N'&$L?left]pane? -C7==#NKL?N?I H47'&$

-7CL?doc5.htm? N'&$L?right]pane? -C7==#NKL?A$-?I

HN47'&$-I

HAI

H922 ocument for browsers that do not support 4rames 22I H;AI

H;N47'&$-I

H;47'&$-$"I

H;B"&=I

lder browsers are written to ignore tags;elements that they don:t understand sothey will ignore the H47'&$-$"I, H47'&$I, and

HN47'&$-I tags. 's a result older browsers will be able to display the

contents placed between the HAIH;AI tags. &any authors use a

message indicating that the site is built using frames and that the surfer should

upgrade their browser. Aou can actually put content in the HAI tags such as

navigation to a non2frames version of your site.

"he diagram below is a graphical view of the document described above.

47'&$-$" C=-LP53\, \P



F!-,%

F!-,%

Name L

Name L right]pane

left]pane



&!C L doc5.htm

&!C L doc1.htm




!



Creating a 4rames (age

H47'&$-$"I

"he 47'&$-$" element creates divisions in the browser window in a single

direction. "his allows you to define the divisions as either rows or columns.

!OE&3

etermines the siJe and number of rectangular rows within a

H47'&$-$"I. "hey are set from top of the display area to the bottom.

(ossible values are0

absolute pi%el units, i.e. O3/+,15+P

a percentage of screen height, e.g. O!\,5!\P



proportional values using the asterisk >`@. "his is often combined with a value in

pi%els e.g. O3/+,`P

"he latter enables the developer to allocate all unassigned vertical space

proportionately. Falues are given within uotation marks and separated by

commas in B"&= source.

CO&3

etermines the siJe and number of rectangular columns within a

H47'&$-$"I. "hey are set from left to right of the display area.

(ossible values are0

absolute pi%el units, i.e. O*+.1/+P

a percentage of screen height, i.e. O!\,5!\P

proportional values using the asterisk >`@. "his is often combined with a value in

pi%els e.g. O*+,`P

"he latter enables the developer to allocate all unassigned vertical space

proportionately. Falues are given within uotation marks and separated by

commas in B"&= source.




hosting.olm.net



ther Eey 'ttributes of the 47'&$-$" $lement3

F!-,%BO!.%!3

(ossible values +, 1, A$-, N. ' setting of Jero will create a borderless frame.

F!-,%&2-C'N=3

"his attribute is specified in pi%els. #f you go to borderless frames you will need to

set this value to Jero as well, or you will have a gap between your frames where

the border used to be.

BO!.%!3

(ossible values +, 1. ' setting of Jero will create a borderless frame.

BO!.%!COO!3



"his attribute is allows you choose a color for your border. "his attribute is rarely

used.

H47'&$I

"his element defines a single frame within a frameset. "here will be a 47'&$element for each division created by the 47'&$-$" element.

"his tag has the following attributes0

&!C3

7euired, as it provides the <7= for the page that will be displayed in the frame.

N-,%3

7euired for frames that will allow targeting by other B"&= documents. #n order

for a link to display the retrieved file in a frame other than the frame in which the

link was Clicked in, the targeted frame must be referenced by its name.

Works in conMunction with the "'7K$" attribute of the H'I, H'7$'I, H'-$I,

and H47&I tags. 'll names must begin with an alphanumeric value and not the

underscore character. "he e%ception is the special target names illustrated later

in this chapter.



,-!='NE'.T+3

ptional attribute stated in pi%els. etermines horiJontal space between the

H47'&$I contents and the frameSs borders.

,-!='N+%'=+T3

ptional attribute stated in pi%els. etermines vertical space between the

H47'&$I contents and the frameSs borders.

&C!O'N=3

isplays a scroll bar>s@ in the frame. (ossible values are0

yes – always display scroll bar>s@

no – never display scroll bar>s@

auto – browser will decide based on frame

contents

"he default value for this attribute is OautoP.

NO!%&'(%3

ptional 2 prevents viewers from resiJing the frame. y default the user can

stretch or shrink the frameSs display by selecting the frameSs border and moving it

up, down, left, or right.




hosting.olm.net

HN47'&$-I

4rame2capable browsers ignore all B"&= within this tag including the contents of the A element. rowsers that don:t support frames will ignore all frame

elements, and interpret the HN47'&$-I content, beginning with the HAI

element.

"his element does not have any attributes.

HB"&=I

HB$'I

H"#"=$I4ramed (ageH"#"=$I H;B$'I

H47'&$-$" C=-L?53\,\?I

H47'&$ -7CL?doc1.htm? N'&$L?left]pane? -C7==#NKL?N?I H47'&$

-7CL?doc5.htm? N'&$L?right]pane? -C7==#NKL?A$-?I HN47'&$-I

HAI

H(I"his is a 4ramed page. <pgrade your browser to support frames.H;(I



H;AI

H;N47'&$-I

H;47'&$-$"I

H;B"&=I



Compound 47'&$-$" ivisions

Aou may want to create a frames design with a combination of rows andcolumns.

anner 4ile

=inks

Contents 4ile

4ile

#n this case a second 47'&$-$" element will be inserted in the place of the

47'&$ element that would describe the second row. "he second



47'&$-$" will divide the remaining screen real estate into 5 columns.

"his OnestedP 47'&$-$" will then be followed by 5 47'&$ elements to

describe each of the subseuent frame divisions created.

HB"&=I

HB$'I

H"#"=$ICompound 4rames (ageH"#"=$I

H;B$'I

H47'&$-$" 7W-LP15+,`PI H47'&$ -7CLPbanner]file.htmPI H47'&$-$"

C=-LP15+,`PI

H47'&$ -7CLPlinks]file.htmPI

H47'&$ -7CLPcontent]file.htmP N'&$LPcontentPI

HN47'&$-IHAIdefault messageH;AIH;N47'&$-I

H;47'&$-$"I

H;47'&$-$"I

H;B"&=I



*+ =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net



"argets

When you are creating links for use in a frames environment you will need tospecify an additional attribute called "'7K$". "he "'7K$" attribute uses the

N'&$ attribute of the 47'&$ element.

4or e%ample if we were to place a link in doc1.htm that linked to doc3.htm and

we wanted doc3.htm to be displayed in the right windowpaneR the B"&= code

would appear in doc1.htm as follows0

H' B7$4LPdoc3.htmP "'7K$"LPright]panePI=ink to ocument 3H;'I

Earning: #f you fail to specify a "'7K$" frame name the linked document will be

displayed in the current frame.

Earning: 4rame N'&$s and "'7K$" values are case sensitive and must

match e%actly to work. #f they don:t match it will create a new browser window

like with the special target O]blankP. >see special targets@

"he following elements have "'7K$" attributes0

<-> sample 2 H' B7$4L?file.htm? "'7K$"L?4rame2window2name?I

<-!%-> sample 2 H'7$' -B'($L?7$C"? C7-L?!,/,5,?B7$4L?file.htm? "'7K$"L?4rame2window2name?I

<B-&%> sample 2 H'-$ "'7K$"L?4rame2window2name?I

<FO!,> sample 2 H47& 'C"#NL?cgi2bin;script? "'7K$"L?4rame2

window2name?I




*1

-pecial "argets

"here are special target names that cannot be assigned by the N'&$ attributeof the 47'&$ tag. $ach of these reserved names serves a special function when

used with the "'7K$" attribute. "hese special names and functions are0

"'7K$"L?]top?

"his loads the linked document into the full browser window with the <7=

specified by the B7$4 attribute. "his is particularly useful for moving between aframes environment and a non2frames environment.

"'7K$"L?]blank?

pens a new browser window and loads the document specified in the <7=

attribute into that new window. "he window is not named.

"'7K$"L?]self?



=oads the document in the same window where the anchor was {Clicked}. "his is

the default setting for linking elements. "his attribute would generally be used to

override the "'7K$" attribute of the H'-$I tag.

"'7K$"L?]parentP

"he ]parent frame is a prior frameset that the current frameset was

OspawnedP from. #f there isn:t one then it is the browser window.

HB"&=I

HB$'I

H"#"=$Iocument 1, doc1.htmH;"#"=$I H;B$'I

HAI

H(I

=inksH7I

H' B7$4L?doc3.htm? "'7K$"L?right]pane?Iocument 3 in the right

paneH;'IH7I

H' B7$4L?doc.htm? "'7K$"L?]top?Iocument in topH;'IH7I

H' B7$4L?doc.htm? "'7K$"L?]blank?Iocument in blankH;'IH7I H'

B7$4L?doc.htm? "'7K$"L?]self?Iocument in selfH;'IH7I H;(I

H;AI

H;B"&=I



*5 =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net




#n this e%ercise you will work with a frames based page.

2ro6edure

#n your broser open the file called frames.htm, it is located in the

c0[B&"=files[4rames[ directory.

Click on the links on in the frame on the left, notice how the content on the right

changes.


#n this e%ercise you will add a link to the page in the frame on the left.

2ro6edure



#n Notepad, open the =inks.htm page in the c0[B"&=files[4rames[ directory.

(lace the following anchor tag set around the word -uccess. H'

B7$4L?success.htm? "'7K$"L?&ain?I H;'I

-ave the file, and reload the frames.htm document in your browser. {Click} on

the word -uccess and observe what happens.




*3



7eview Duestions

What is the "'7K$" attribute used forQ

What are two attributes of the 47'&$-$" elementQ

What is the N47'&$- element used forQ

What does the -7C attribute of the 47'&$ element specifyQ




hosting.olm.net

-ummary


Create a 4rames based page.

Work with the 4rameset, 4rame, and Noframes elements.

<se the attributes of the 4rames elements to control the display.

-et "argets appropriately.




*!



134orms

4orms add the ability to web pages to not only provide the person viewing the

document with dynamic information but also to obtain information from the

person viewing it, and process that information.

bMectives


Create a 47&.



'dd elements to a 47&.

efine CK#.

escribe the purpose of a CK# 'pplication.

-pecify an action for the 47&.

(rereuisites

4orms work in all browsers

4orms are (latform #ndependent



*/ =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net

4orms

"o insert a form we use the H47&I H;47&I tags. "he rest of the formelements must be inserted in between the form tags.

N"$0 "he 47& element has no formatting attributes.

4or e%ample0

HB"&=I

HB$'I

H"#"=$I-ample 4ormH;"#"=$I H;B$'I

HA KC=7LP444444PI

H47& 'C"#NL?http0;;www.%nu.com;formtest.asp?I H(I4irst Name0 H#N(<"

"A($L?"$)"? N'&$L?fname? &')=$NK"BL?!+?IH7I

=ast Name0 H#N(<" "A($L?"$)"? N'&$L?lname? &')=$NK"BL?!+?IH;(I

H(IH#N(<" "A($L?-<&#"? N'&$L?-ubmit1? F'=<$L?-end

#nfo?IH;(I



H;47&I

H;AI

H;B"&=I




*

"he attributes of the H47&I element are0

-CT'ON3 is the <7= of the CK# >Common Kateway #nterface@ program that isgoing to accept the data from the form, process it, and send a response back to

the browser.

,%T+O.3 K$" >default@ or (-" specifies which B""( method will be used

to send the form:s contents to the web server. "he CK# application should be

written to accept the data from either method.

%NCT2%3 determines the mechanism used to encode the form contents. Aou

can leave this attribute as default >unspecified@ unless you are creating a file

upload field.

N-,%3 is a form name used by F or 8'F' scripts.

T-!=%T3 is the target frame where the response page will show up.

"he rest of the form elements are used to create the form seen in the browser

and collect the data to be sent to the application.



+T, Tip

' good way to format a 47& and its sub elements is to use a table. With atable you have more control over the layout of your page. "he table can be

created inside the H47&IH;47&I tags.



** =& World Class Web Bosting $2commerce and Custom #nternet -olutions

hosting.olm.net

4orm $lements

4orm elements have properties0 "e%t bo%es, (assword bo%es, Checkbo%es,ption >7adio@ buttons, -ubmit, 7eset, 4ile, Bidden and

#mage. "he properties are specified in the "A($ 'ttribute of the B"&= element

H#N(<"I H;#N(<"I.

<'N2$T> %lementHs 2roperties

"A($ L "ype of #N(<" entry field

N'&$ L Fariable name passed to CK# application

F'=<$ L "he data associated with the variable name to be passed to the CK#

application

CB$CE$ L utton;bo% checked by default

-#Z$ L Number of characters in te%t field

&')=$NK"B L &a%imum number of characters accepted

Text boxes3 <sed to provide input fields for te%t, phone numbers, dates, etc.

H#N(<" "A($LP"$)"PI rowser will display

"e%tbo%es use the following attributes0

"A($0te%t

-#Z$0 determines the siJe of the te%tbo% in

characters. efault L 5+ characters

& ') -# Z$ 0 d et er mi ne s th e m a% im um n um be ro f c ha ra cte rs

that the field will accept.

N'&$0 is the name of the variable to be sent to the

CK# application.

F'=<$0 will display its contents as the default value.




*

2assord3 <sed to allow entry of passwords

H#N(<" "A($LP('--W7PI

rowser will display

"e%t typed in a password bo% is starred out in the browser display.

(assword bo%es use the following attributes0

"A($0password

-#Z$0 determines the siJe of the te%tbo% in

characters.

&')-#Z$0 determines the ma%imum siJe of the password

in characters.


CK# application.

F'=<$0 is usually blank.

+idden3 <sed to send data to the CK# application that you don:t want the web

surfer to see, change or have to enter but is necessary for the application to

process the form correctly.

H#N(<" "A($LPB#$NPI Nothing is displayed in the browser.

Bidden inputs have the following attributes0

"A($0hidden


CK# application.

F'=<$0 is usually set to a value e%pected by the CK#

application.




hosting.olm.net

Che6k Box3 Check bo%es allow the users to select more than one option.

H#N(<" "A($LPCB$CE)PI

rowser will display

Checkbo%es have the following attributes0

"A($0checkbo%

CB$CE$0 is blank or CB$CE$ as the initial status


CK# application.

F'=<$0 is usually set to a value.

!adio Button3 7adio buttons allow users to select only one option.

H#N(<" "A($LP7'#PI rowser will display

7adio buttons have the following attributes0

"A($0radio

CB$CE$0 is blank or CB$CE$ as the initial status. nly

one radio button can be checked.


CK# application.

F'=<$0 usually has a set value.




1

File $pload3 Aou can use a file upload to allow surfers to upload files to your

web server.

H#N(<" "A($LP4#=$PI

rowser will display

4ile <pload has the following attributes0

N'&$0 is the name of the variable to be sent to the CK#

application.

-#Z$0 is the siJe of the te%t bo% in characters.

&')-#Z$0 is the ma%imum siJe of the input in the te%tbo% in

characters.

$NC"A($0 is a list of >&#&$@ types that the field can be used to

upload.

"his type of input is a valid B"&= 3.5 constructR however, it is not widely used.

Aou will also have to change the $NC"A($ attribute of the H47&I element to

Omultipart;form2dataP

2ush Button3 "his element would be used with either 8ava-cript or

F-cript to cause an action to take place.

H#N(<" "A($LP<""NPI rowser will display

(ush utton has the following attributes0

"A($0utton

N'&$0 is the name of the button to be used in

scripting.

F'=<$0 determines the te%t label on the button.

Note3 Aou will see an application of a (ush utton in some of the following

chapters.



5 =& World Class Web Bosting $2commerce and Custom #nternet -olutionshosting.olm.net

&ubmit3 $very set of 4orm tags reuires a -ubmit button. "his is the element

that causes the browser to send the names and values of the other elements to

the CK# 'pplication specified by the

'C"#N attribute of the 47& element.

H#N(<" "A($LP-<&#"PI

"he browser will display

-ubmit has the following attributes0

"A($0submit

N'&$0 value used by the CK# script for processing

F'=<$0 determines the te%t label on the button, usually

-ubmit Duery.

'mage &ubmit Button3 'llows you to substitute an image for the standard

submit button.

H#N(<" "A($LP#&'K$P -7CLP<7=PI

#mage submit button has the following attributes0

"A($0#mage

N'&$0 is the name of the button to be used in

scripting.

-7C0 <7= of the #mage file.

!eset3 #t is a good idea to include one of these for each form where users are

entering data. #t allows the surfer to clear all the input in the form.

H#N(<" "A($LP7$-$"PI rowser will display

7eset buttons have the following attributes0

"A($0reset

F'=<$0 determines the te%t label on the button, usually

7eset.




3

ther $lements used in 4orms

Text -rea

H"$)"'7$'I H;"$)"'7$'I is an element that allows for free form te%t entry.

rowser will display

"e%tarea has the following attributes0


application.

7W-0 the number of rows to the te%tbo%.

C=-0 the number of columns to the te%tbo%.

W7'(0 defaults to 44. Aou should set wrap to OF#7"<'=P

or O(BA-#C'=P so that the te%t wraps in the browser

display as the surfer types.




hosting.olm.net

&ele6t

"he two following e%amples are H-$=$C"I H;-$=$C"I elements, where theattributes are set differently.

"he -elect element:s attributes are0


application.

-#Z$0 "his sets the number of visible choices.

&<="#(=$0 "he presence of this attribute signifies that the user

can make multiple selections. y default only one

selection is allowed.

.rop .on ist3

N'&$0 is the name of the variable to be sent to the CK# application.

-#Z$0 1

ist Box3

N'&$0 is the name of the variable to be sent to the CK# application.

-#Z$0 is greater than one.

Option

"he list items are added to the H-$=$C"I element by inserting

H("#NI H;("#NI elements.

"he ption $lement:s attributes are0

-$=$C"$0 When this attribute is present, the option is selected when the

document is initially loaded. #t is an error for more than one option to be selected.

F'=<$0 -pecifies the value the variable named in the select element.

H(IH-$=$C" -#Z$L?1?I

H("#N F'=<$L?1? -$=$C"$L?-$=$C"$?I#tem 1H;("#NI

H("#N F'=<$L?5?I#tem 5H;("#NIH;-$=$C"IH;(I


!

Common Kateway #nterface >CK#@

When the user has finished filling in the form and presses O-ubmitP the data issent to the application on the server specified in the 'C"#N attribute of the form

element.

"he application is commonly referred to as a CK# application;program. #t resides

and runs on the web server. #t is typically but not always stored in a directory

called cgi2bin.

"he application can be written in any languageR however, it must be one

supported by your webserver:s operating system and webserver software. ' very

popular language for creating CK# applications is ($7= >(ractical $%traction

7eport =anguage@.

($7= is an interpreted language with rich te%t manipulation characteristics.

ecause it is interpreted its performance compared to a compiled CK# application

is slower, thus negatively affecting server performance. #t has been ported to

most popular operating systems and is currently available for most versions of

<N#), Windows N", and Windows

!. "he actual application is commonly referred to as a script.



CK# -cripts

CK# -cripts process the formSs data, and send a response back to the user.

"hey can be written to calculate numbers as in a sales order. "hey can format

data and put it into a database such as a mailing list or guest book.

epending on the situation, a CK# -cript can be written to do almost anything.



/ =& World Class Web Bosting $2commerce and Custom #nternet -olutionshosting.olm.net



#ntranet 'pplication evelopment 'rchitectures

1. -imple CK# (rogram

1



I



rowser

Web -erver



Client

-erver

"he client fills out an B"&= document containing the H47&I element and presses the submit

button. "his sends the data the user entered to the web server.



"he web server receives the data and passes it to the program specified in the 'C"#N attribute

of the H47&I element. "his program is called a CK# >Common Kateway #nterface@ program. #t

can be written in a number of languagesR F-cript, 8ava-cript, ($7=, CVV, etc. #t can perform a

number of different functions.

"he CK# program creates a new B"&= document on the fly and sends it to the client.

rowser

Web -erver

CK# (rogram

Netscape Navigator

Netscape $nterprise -erver

2

N-'(# 2CVV

2

($7=

2

-erver side 8ava-cript

&icrosoft #nternet $%plorer

&icrosoft #nternet

2

#-'(# 2CVV



#nformation -erver

2

($7=

2 'ctive -erver (ages >'-(@

8-cript or F-cript




5. "hree2"ier Web 'pplication evelopment

1

J

I

rowser

Web -erver

atabase -erver

Client

-erver





"he web server receives the data and passes it to the program specified in the 'C"#N attribute of the

H47&I element. "his program is called a CK# >Common Kateway #nterface@ program. #t can bewritten in a number of languagesR F-cript, 8ava-cript, ($7=, CVV, etc.

The program in this case creates a command and issues it to the database server.

The Database Server receives the command and issues it against the database. The data

returned from the command is then sent back to the CGI application running on the web

server.

"he CK# program creates a new B"&= document on the fly with the data returned from the

database server and sends it to the client.

rowser

Web -erver

CK#

Database

(rogram

Server

Netscape Navigator

Netscape

2

N-'(# 2CVV

- Oracle



$nterprise -erver

2

($7=

- Informi

2

-erver side

- S!base

8ava-cript

- "icrosoft S#$

- Other OD%C

&icrosoft #nternet

&icrosoft #nternet

2

#-'(# 2CVV

compliant

$%plorer

#nformation -erver



2

($7=

2

'ctive -erver (ages

>'-(@

8-cript or F-cript




hosting.olm.net



3. 4our2"ier Web 'pplication evelopment

1

I

J

K

L

J

rowser

Web -erver



"ransaction -erver

atabase -erver

Client -erver



"he web server receives the data and passes it to the program specified in the 'C"#N attribute

of the H47&I element. "his program is called a CK# >Common Kateway #nterface@ program.

In this case the program invokes a transaction on the transaction server.

The Database Server receives a command from the transaction server and issues it

against the database.

The data returned from the command is then sent back to the transaction& this c!cle will

continue until the transaction fails or completes.

'hen the transaction completes successfull! or unsuccessfull! it passes the result to the

web server.



"he CK# program running on the web server then creates a new B"&= document on the fly with

the data returned from the transaction server and sends it to the client.

"ransaction -erver Choices0

&icrosoft "ransaction -erver

Netscape 'pplication -erver

racle 'pplication -erver

Chapter 1+ 2 $%ercise 1 2 Creating an rder 4orm

#n this e%ercise, you will create a partial order form0

2ro6edure

#n steps 1 through ! you will add the form element, and put in a hidden field.

#n Notepad, open a new file.

#nsert the basic elements – B"&=, B$' and A.

#nsert a 47& element inside the A element

#nsert a OBiddenP #N(<" element

#n the OBiddenP #N(<" set the N'&$ attribute as O-ecret(asswordP and the

F'=<$ as Open-esameP.

Aour code should look like this0

HB"&=I

HB$'I

H"#"=$I(artial rder 4ormH;"#"=$I H;B$'I

HA KC=7L?U444444?I

H47&I

H(IH#N(<" "A($L?B#$N? N'&$L?-ecret(assword?

F'=<$L?pen-esame?IH;(I

H;47&I

H;AI

H;B"&=I



1++ =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net



#n steps / through you will add a select element, and add the option elementsthat make up a drop down list of Kreetings.

"ype ?Kreeting0? after the end of the hidden #nput tag.

(ut a space after the colon and insert a Orop own o%P >-elect

$lement with -#Z$ set at 1@ Kive your -elect element a N'&$ of OKreetingP

#nsert ("#N elements to specify the list items as follows0

=ist #tem0 ,r: Falue0 ,r:

=ist #tem0 ,rs: Falue0 ,rs:

=ist #tem0 ,s: Falue0 ,s:

=ist #tem0 .r: Falue0 .r:

. #nsert a reak after the -elect element.

&ample Code0

H(I

H#N(<" "A($L?B#$N? N'&$L?-ecret(assword?

F'=<$L?pen-esame?IKreeting0

H-$=$C" N'&$L?Kreeting? -#Z$L?1?I H("#N F'=<$L?&r.?I&r.H;("#NI

H("#N F'=<$L?&rs.?I&rs.H;("#NI

H("#N F'=<$L?&s.?I&s.H;("#NI H("#N

F'=<$L?r.?Ir.H;("#NI H;-$=$C"I

H7I

H;(I




1+1



#n steps 1+ through 13 you will add a "e%t o%, for the user to enter their 4irst

Name.

'fter the 7, type in O4irst Name0P

#nsert a "e%t bo%

-et the "e%t o% attributes0

Name0 FirstName

-iJe0 M

&a%. =ength0 L

13. #nsert a reak after the "e%t o%

&ample Code0

H(I



H-$=$C" N'&$L?Kreeting? -#Z$L?1?I

H("#N F'=<$L?&r.?I&r.H;("#NI


H("#N F'=<$L?&s.?I&s.H;("#NI

H("#N F'=<$L?r.?Ir.H;("#NI H;-$=$C"I

H7I

4irst Name0H#N(<" "A($L?"$)"? N'&$L?4irstName? -#Z$L?5+?

&')=$NK"BL?5!?I

H7I

H;(I



1+5 =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net



#n steps 1 through 1 you will add a "e%t o%, for the user to enter their =ast

Name.

'fter the 7, type in O=ast Name0P

#nsert a "e%t bo%


Name0 astName

-iJe0 IM

&a%. =ength0 IL

1. #nsert a reak after the "e%t o%.

&ample Code0

H(I




H("#N F'=<$L?&r.?I&r.H;("#NI


H("#N F'=<$L?&s.?I&s.H;("#NI

H("#N F'=<$L?r.?Ir.H;("#NI

H;-$=$C"I

H7I


&')=$NK"BL?5!?IH7I

=ast Name0H#N(<" "A($L?"$)"? N'&$L?=astName? -#Z$L?3+?

&')=$NK"BL?3!?I

H7I

H;(I




1+3



#n steps 1* through 51 you will add a "e%t o%, for the user to enter their e2mailaddress.

'fter the 7, type in O$2mail 'ddress0P

#nsert a "e%t bo%


Name0 %mail

-iJe0 IM

&a%. =ength0 LM

#nsert a reak after the "e%t o%.

#nsert another reak.

&ample Code0

H(I




H("#N F'=<$L?&r.?I&r.H;("#NI


H("#N F'=<$L?&s.?I&s.H;("#NI

H("#N F'=<$L?r.?Ir.H;("#NI H;-$=$C"I

H7I


&')=$NK"BL?5!?I

H7I


&')=$NK"BL?3!?I

H7I

$2mail 'ddress0H#N(<" "A($L?"$)"? N'&$L?$mail? -#Z$L?3+?

&')=$NK"BL?!+?I

H7I

H7I

H;(I



1+ =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net



#n steps 53 through 3 you will add 7adio uttons, for the user to select apreferred method of follow up.

"ype in OWhat type of response would you preferQP

#nsert a 7adio utton.

-et the 7adio utton attributes0

Name0 !esponse

Falue0 2hone

Checked0 Che6ked

"ype O(honeP



#nsert another 7adio utton


Name0 !esponse

Falue0 Fax

"ype O4a%P

#nsert another 7adio utton


Name0 !esponse

Falue0 %mail

"ype O$2mailP

#nsert a reak.





1+!

&ample Code0

HB"&=I

HB$'I


HA KC=7L?U444444?I H47&I

H(I

H#N(<" "A($L?B#$N? N'&$L?-ecret(assword?F'=<$L?pen-esame?IKreeting0


H("#N F'=<$L?&r.?I&r.H;("#NI


H("#N F'=<$L?&s.?I&s.H;("#NI

H("#N F'=<$L?r.?Ir.H;("#NI H;-$=$C"I

H7I


&')=$NK"BL?5!?I

H7I

&')=$NK"BL?3!?I

H7I


&')=$NK"BL?!+?I

H7I

H7I

What type of response would you preferQH#N(<" "A($L?7'#?

N'&$L?7esponse?

F'=<$L?(hone? CB$CE$L?CB$CE$?I (hone

H#N(<" "A($L?7'#? N'&$L?7esponse? F'=<$L?4a%?I4a%

H#N(<" "A($L?7'#? N'&$L?7esponse? F'=<$L?$mail?I$2mailH7I

H7I

H;(I

H;47&I

H;AI

H;B"&=I



1+/ =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net



#n steps 3! through * you will add Check o%es, for the user to select theoptions they would like to purchase.

"ype O# would like the following options0P

#nsert a reak.

"ype O=eather interiorP

#nsert a Check o%

-et the Check o% attributes0 Name0 eather

#nsert a reak.

"ype OC (layerP



-et the Check o% attributes0

Name0 C.

#nsert a reak.

"ype O-unroofP

#nsert a Check o%

-et the Check o% attributes0

Name0 &unroo7

#nsert a reak.





1+

&ample Code0

HB"&=I

HB$'I


HA KC=7L?U444444?I H47&I



H-$=$C" N'&$L?Kreeting? -#Z$L?1?IH("#N

F'=<$L?&r.?I&r.H;("#NI

H("#N F'=<$L?&rs.?I&rs.H;("#NIH("#N

F'=<$L?&s.?I&s.H;("#NI

H("#N F'=<$L?r.?Ir.H;("#NIH;-$=$C"I H7I


&')=$NK"BL?5!?IH7I


&')=$NK"BL?3!?IH7I


&')=$NK"BL?!+?IH7I

H7I

What type of response would you preferQH#N(<" "A($L?7'#?

N'&$L?7esponse?

F'=<$L?(hone? CB$CE$L?CB$CE$?I (hone

H#N(<" "A($L?7'#? N'&$L?7esponse? F'=<$L?4a%?I4a%

H#N(<" "A($L?7'#? N'&$L?7esponse? F'=<$L?$mail?I$2mailH7I

H7I

# would like the following options0H7I

=eather interior H#N(<" "A($L?CB$CE)? N'&$L?=eather?I H7I

C (layer H#N(<" "A($L?CB$CE)? N'&$L?C?IH7I

-unroof H#N(<" "A($L?CB$CE)? N'&$L?-unroof?IH7I H7I

H;(I

H;47&I

H;AI

H;B"&=I



1+* =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net



#n steps through !3 you will add a "e%t 'rea, for the user to make commentsabout their purchase.

"ype OComments0P

#nsert a reak.

#nsert a "e%tarea element

-et the attributes of the "e%tarea element0

Name0 Comments

Width0 IM

7ows0 J

Wrap0 virtual

!3. #nsert a reak.

&ample Code0

H7I

# would like the following options0H7I

=eather interior H#N(<" "A($L?CB$CE)? N'&$L?=eather?I H7I C

(layer H#N(<" "A($L?CB$CE)? N'&$L?C?IH7I

-unroof H#N(<" "A($L?CB$CE)? N'&$L?-unroof?IH7I

H7I

Comments0H7I

H"$)"'7$' N'&$L?Comments? 7W-L?? C=-L?3+?

W7'(L?Firtual?IH;"$)"'7$'I

H7I




1+

#n steps ! through !! you add the -ubmit utton.

#nsert a -ubmit utton

-et the attributes of the -ubmit utton0

Falue0 &ubmit !euest

&ample Code0

H"$)"'7$' N'&$L?Comments? 7W-L?? C=-L?3+?

W7'(L?Firtual?IH;"$)"'7$'I

H7I

H#N(<" "A($L?-<&#"? N'&$L?-ubmit 7euest?I

#n steps !/ through ! you will specify the 'ction for the H47&I, and test it.

Now set up where the form will go.

-et the attributes of the 47& element0

4or testing purposes, you may use the ?4orm "est? CK# -cript located on )traNet

<niversity Web -erver. #n the 'C"#N 'ttribute type0

http0;;www.%nu.com;formtest.asp

-ave the file.

&ample Code0

HA KC=7L?U444444?I

H47& 'C"#NL?http0;;www.%nu.com;formtest.asp?I



H-$=$C" N'&$L?Kreeting? -#Z$L?1?IH("#N

F'=<$L?&r.?I&r.H;("#NI

H("#N F'=<$L?&rs.?I&rs.H;("#NIH("#N

F'=<$L?&s.?I&s.H;("#NI

H("#N F'=<$L?r.?Ir.H;("#NIH;-$=$C"I




111



(review your document in the browser and try filling out and submitting the orderform.



7esults0



Note3 When using forms on your #ntranet, a CK# script is reuired to process the

information submitted.

115 =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net



7eview Duestions

When would you use Check bo%es over ption;7adio uttonsQ

o you need a submit buttonQ

Where does the data entered in the 47& goQ




113



-ummary


Create a 47&.

'dd elements to a 47&.

efine CK#.

escribe the purpose of a CK# 'pplication.

-pecify an action for the 47&.



118'F' and 8'F'-cript #ntroduction

#n this chapter you will be introduced to what 8'F' is, and how to add 8'F'

'pplets to your web pages. Aou will also be introduced to 8'F' -cript, and how

to add it to your web pages.

bMectives


escribe 8'F'.



'dd a 8'F' 'pplet to a page.

escribe 8'F'-cript.

'dd 8'F'-cript to an B"&= page.

(rereuisites

#nternet $%plorer 3.+ or greater >#$ 3.+ -upports 8'F' with limited support for

8'F'-cript @

Navigator 5.+ or greater

8ava is (latform #ndependent




11!

8'F'

"he 8ava programming language was developed by -un &icrosystems. #t wasdeveloped to be cross2platform and device2independent, meaning the compiled

program should run on &acs, (Cs, and <ni% machines. #t is a powerful, full2

featured obMect oriented programming language. "he browser creates an

environment for 8'F' applets to run in called a 8'F' Firtual &achine. "his

provides platform independence for 8'F' 'pplets.

'n applet, for those not familiar with the term, is the name of the mini2

applications created with the 8'F' programming language. "he creation of

applets is beyond the scope of this course. 'pplets are separate compiled

programs with the file e%tension of OclassP. "hey are downloaded with the page

through the use of the H'((=$"I tag. "he B"&= synta% for the '((=$" tag,

and its associated ('7'& tag is as follows0

H'((=$"I

esignates a 8ava applet. #nstead of containing the code necessary to perform a

task, this tag contains a reference to the code needed to perform the task.

"he 'pplet element has one sub2element, the H('7'&I element, which passes

values to the applet that affect the operation of the program.

'pplet has the following attributes0 I

CO.%B-&%3 irectory or folder where the applet>s@ are located.

CO.%3 efines the compiled applet that is to be loaded.

E'.T+3 etermines the width of the area, in pi%els, reserved to display the

applet in the browser.

+%'=+T3 etermines the height of the area, in pi%els, reserved to display the

applet in the browser.

<2-!-,I

"his tag passes a parameter to the applet. #t has two attributes0

N'&$0 Names the parameter for recognition by the applet.

F'=<$0 efines a value for the parameter specified by the N'&$ attribute. 'll

data is passed to the applet as a string variable.

</2-!-,>

H;'((=$"I



11/ =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net



When using 8ava in your pages, it is important to be aware that its support is not

universal. #f, like many authors, you are showcasing your use of 8'F' on the

page, it is advisable to include te%t in the document that alerts viewers to this

fact. "his is especially true when the applet itself is the centerpiece of thedocument.

-ince 8'F' applets must be downloaded with your B"&= page they increase

download time. nce downloaded, the 8'F' Firtual &achine must be started and

the applet will then start to run. "his is usually indicated in the status line of most

browsers.




11

8'F'-cript

8ava-cript is a programming language that allows scripting of events, obMectsand actions to create #nternet applications. #t uses two elements the H-C7#("I

H;-C7#("I and H922 the comment 2 2I. "he script element lets the browser know

what type of script it is with its ='NK<'K$ attribute. "he comment tags enclose

the actual 8ava-cript code so that browsers will ignore the code if they don:t

support scripting.

-ince 8ava-cript is embedded in the B"&= page it is interpreted at the client

when the page is loaded. "his is in contrast to 8'F' applets that are compiled

programs that are downloaded from the web server to the browser and run inside

the browser.

HB"&=I

HB$'I

H"#"=$I8ava-cript $%ampleH;"#"=$I H-C7#(" ='NK<'K$L?8'F'-C7#("?I

H922 hide 8ava-cript code from browsers that are not 8ava-cript enabled function

getanswer>@

var % L parse#nt>document.47&1.4irstNum.value@R var y L

parse#nt>document.47&1.-econdNum.value@R var sum L % V yR

alert>?"he answer is0 ? V sum@R

;;end hiding of 8ava-cript code 22I H;-C7#("I

H;B$'I

HAI

H47& N'&$L?47&1?I

H#N(<" "A($L?"$)"? N'&$L?4irstNum?IH7I H#N(<" "A($L?"$)"?

N'&$L?-econdNum?IH7I H#N(<" "A($L?<""N? F'=<$L?'nswer?

NC=#CEL?getanswer>@R?I

H;47&I

H;AI

H;B"&=I



11* =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net



"his code takes two numbers from the te%tbo%es, adds them together and pops

up the result.

7esult in browser0

Note3 'ctual 8ava-cript programming is outside the scope of this course.




11



Chapter 11 2 $%ercise 1 2 #nserting a 8ava 'pplet

#n this e%ercise, you will insert a 8ava applet that displays the time, on an analogclock, in the browser.

2ro6edure

Create a new file with the basic elements. "ype O8'F' Clock $%ampleP into your

"#"=$ element

#nsert a set of '((=$" tags inside the A0 H'((=$"IH;'((=$"I

'dd attributes to the '((=$" element0

C$'-$LP..;MavaP

C$LPclock5.classP

#LPC=CE5P

B$#KB"LP1*+P



W#"BLP1*+P

'="LP"he Current "ime #sP

-ave the file as 8clock.htm in the C0[B"&=4#=$-[e%ercises directory.

(review the file in different browsers. #t should look similar to this0

&ample Code0

HB"&=I

HB$'IH"#"=$I8'F' Clock $%ampleH;"#"=$I H;B$'I



HAI

H'((=$" C$L?Clock5.class? C$'-$L?..;8'F'? #L?Clock5? '="L?"he

Current "ime? W#"BL?1*+? B$#KB"L?1*+?IH;'((=$"I

H;AI

H;B"&=I


Chapter 11 – ptional $%ercise

#n this e%ercise you will create a file as illustrated in the e%ample, and test in bothbrowsers0

&ample Code0

HB"&=I

HB$'I

H"#"=$I8ava-cript $%ampleH;"#"=$I H-C7#(" ='NK<'K$L?8'F'-C7#("?I

H922 hide 8ava-cript code from browsers that are not 8ava-cript enabled function

getanswer>@

var % L parse#nt>document.47&1.4irstNum.value@R var y L

parse#nt>document.47&1.-econdNum.value@R var sum L % V yR

alert>?"he answer is0 ? V sum@R

;;end hiding of 8ava-cript code 22I

H;-C7#("I

H;B$'I

HAI

H47& N'&$L?47&1?I

H#N(<" "A($L?"$)"? N'&$L?4irstNum?IH7I

H#N(<" "A($L?"$)"? N'&$L?-econdNum?IH7I

H#N(<" "A($L?<""N? F'=<$L?'nswer? NC=#CEL?getanswer>@R?I

H;47&I

H;AI

H;B"&=I




151



7eview Duestions

Who created the 8'F' programming languageQ

What does the ('7'& element doQ

Why is the actual 8'F'-cript code placed within a comment elementQ



-ummary


escribe 8'F'.

'dd an '((=$" to a web page.

escribe 8'F'-cript.

'dd 8'F'-cript to an B"&= page.




153



12 'C"#F$) bMects, and F-cript #ntroduction

#n this chapter you will learn about 'ctive), and add an obMect to a web page.

bMectives


escribe 'ctive).

'dd an 'ctive) to a web page.



escribe F-cript.

'dd some F-cript to an B"&= page.

(rereuisites

#nternet $%plorer 3.+ or greater

Navigator 3.+ or greater with (lug2in >4or 'ctive) support, Navigator does not

support F-cript@



'ctive) -upport

'ctive) controls;components can be added to your B"&= pages using the8$C" element. =ike the '((=$" element the ('7'& element is a sub2

element of 8$C" that controls the way the 'ctive) control functions.

'ctive) controls are compiled programs. "hey have been derived from the =$

>bMect =inking and $mbedding@ standard. "here are a large number of controls

currently available from &icrosoft and other vendors.

"he big advantage over 8'F' 'pplets is that 'ctive) controls are only

downloaded once. "he controls integrate themselves with the operating system,

making their e%ecution e%tremely fast, and their display characteristics sharp and

crisp. "his makes them e%tremely valuable on #ntranets for applications such as

graphing.

"he big disadvantage of 'ctive) controls is their lack of portability compared to

8'F' 'pplets that will run on any platform.

'ctive) control creation is beyond the scope of this course and reuires

knowledge of CVV or Fisual asic programming.

H8$C"I

"he H8$C"I tag has a number of attributes that define the obMect, its location,

and how it is presented on the B"&= page.

Class '.

'ctive) controls, which are binary files, are installed on a userSs computer and

registered in the system registry with a uniue class #. "he C='--# attribute of

the H8$C"I tag contains a <7= that uniuely identifies the obMect.7eferencing the class # of the registered control in the H8$C"I tag inserts it

into the B"&= page, and then the control displays itself.

'ctive) controls are identified by a <7= that uses a class # identifier. "he format

for this <7= is0

?clsid0153!/*2153215321532153!/*+15?

"his e%ample shows the H8$C"I tag for the Calendar control. "he C='--#

is the only attribute that is reuired by the H8$C"I tag.

H8$C" classidL?clsid0*$5C5215/21+1C2*'542

++55++C+5?I

H;8$C"I




15!



"he class # for an 'ctive) control is placed in the registry when a control is

installed. "here are a number of tools you can use to retrieve this value.

!egistry %ditor !eg%ditD "his tool enables you to change settings in your

system registry. Aou can also use it to view and copy the class # for an obMect.

O% 5ieer "his utility is installed with the Win35 -oftware

evelopment Eit >-E@. Aou can select the Copy B"&= H8$C"I "ag to

Clipboard command from the bMect menu to copy the tag and the class # to the

Clipboard.

-6tive0 Control 'nsertion .evi6e "his utility can also build the

H8$C"I tag for you and copy it to the Clipboard.

'.

"he # attribute in the H8$C"I tag is synonymous with the

N'&$ attribute for standard controls. Aou can use the # to refer to the obMect

from F-cript.

H8$C" classidL?clsid0*$5C5215/21+1C2*'542

++55++C+5?

idLcldCalendar5I

H;8$C"I

CodeBase3

"his attribute is a <7= that points to a file containing the implementation of an

obMect. >#t is e%plained in detail in the ne%t topic.@

Name3

"his parameter is reuired when the obMect is on a form and needs to be included

with other form fields when information is sent to the server.

Eidth4 +eight4 -lign4 +&pa6e4 and 5&pa6e

"hese attributes affect the way an obMect is positioned and siJed within an B"&=

page.

CodeBase

#f the obMect specified by the C='--# parameter is not available on the userSscomputer, the browser will use the C$'-$ parameter to determine where

the obMect is located on the #nternet server, and download the files reuired to

render the obMect. 's with all files that can be downloaded, you should provide

the user with the option of downloading the obMect and an alternative to the

obMect, if possible.

4or e%ample, the browser will try to locate an 'ctive) control on the local

computer by first searching the registry. #f the control is not registered, the

browser will download the obMect from the location specified in the C$'-$

parameter.

-pecifying the C$'-$ <7=

"he C$'-$ parameter for the H8$C"I tag contains a <7= pointing to

the implementation files for a given obMect. "his <7= is critical for downloading

components, because it must specify all files necessary to implement a particular obMect.

"his e%ample downloads an 'ctive) control by referencing the



.oc% file0

H8$C"

#L?NewControl?

C='--#L?clsid01532153215321532? C$'-$L?http0;;server;control.oc%?I

H;8$C"I

B"&= authors can set the C$'-$ attribute to point to one of three file types,

which are typically supplied by the developer of the control.

2ortable exe6utable 7ile "his is a single e%ecutable file, such as an .oc% file or

==, that is downloaded, installed, and registered by the browser.

:C-B 6abinetD 7ile "his file contains one or more files, all of which are

downloaded together in a compressed cabinet.

:'NF 7ile "his file specifies various files that need to be downloaded and set up

for the .oc% to run.




15

F-cript

F-cript is a programming language that allows scripting of events, obMects andactions to create #nternet applications. #t uses two elements the H-C7#("I

H-C7#("I and H922 the comment 2 2I. "he script element lets the browser know

what type of script it is with its ='NK<'K$ attribute. "he comment tags enclose

the actual F-cript code so that browsers that don:t support scripting will ignore

the code.

-ince the F-cript is embedded in the B"&= page it is interpreted at the client

when the page is loaded, and activated by an event like pressing a button. #t can

also be used in the creation of 'ctive -erver (ages, for developers using

&icrosoft:s #nternet #nformation -erver as their web server platform.



"he above code takes two numbers from the te%tbo%es, adds them together and

pops up the result.

'ctual F-cript programming is outside the scope of this course.



Note3 F-cript is currently not supported in Navigator.


Chapter 15 – $%ercise 1 – 'dding an 'ctive) bMect

#n this e%ercise you will add the Calendar Control to a page and view it in&icrosoft:s #nternet $%plorer.

2ro6edure

<sing &- #nternet $%plorer browser 2 pen the webpage O'ctive).htmP >located

in the C0[B"&=files[ 'ctive) directory@. Aou may need to adMust your browser

settings to a lower security level in order to get the page to open in the browser.

#n Notepad, start a new document and add the basic tags.

#nsert a set of 8$C" tags inside the A0 H8$C"IH;8$C"I

'dd attributes to the 8$C" element0

C='--#L ?C=-#0*$5C5215/21+1C2*'542++55++C+5?

>"he Class # value can be found using a tool such as 7eg$dit.@

B$#KB"LP++P

W#"BLP++P

'="LPKraphical CalendarP

-ave your file and view it in #nternet $%plorer.

NOT%3 "his code will only work on a system that has the Calendar Control in its

registry. "o create a page that will allow the control to download to a machine that

doesn:t have the control resident, you must also use the C$'-$ attribute

where the value of C$'-$ is a <7=, specifying where the obMect is locatedon the #nternet server. >Fiew the source of the file Oactive%.htmP@




15

#n this e%ercise you will create a file as illustrated in the e%ample, and test in bothbrowsers0

&ample Code0

H-C7#(" ='NK<'K$L?F-cript?I

H922 beginning of script -ub add]5]num>@

a ]str L document.4orm1."e%t1.value b]str L document.4orm1."e%t5.value

a]int L C#nt>a]str@

b ]int L C#nt>b]str@ c L +

c L a]int V b]int

&sgo% ?"he answer is0 ? G c $nd -ub

H922 end of script 22I

H;-C7#("I

H47& N'&$L?4orm1?I

H(I 'LH#N(<" "A($L?"$)"? N'&$L?"e%t1?IH7I LH#N(<" "A($L?"$)"?N'&$L?"e%t5?IH7I

H#N(<" "A($L?<""N? N'&$L?utton1? F'=<$L?' V L?

NC=#CEL?add]5]num>@?I H;(I H;47&I



7eview Duestions

What element is used to support 'ctive) controlsQ

Why should you specify the Codease attributeQ




131



-ummary


escribe 'ctive).

'dd an 'ctive) obMect to a web page.

escribe F-cript.

'dd some F-cript to an B"&= page.



1*-pecial $lements

#n this chapter you will learn how to create animated pages using a &eta element

and how to use the &eta element to help inde% your website on the #nternet. Aou

will also learn how to use some additional elements that allow you to add

background sound, scrolling te%t, and blinking te%t.

bMectives


Create animated pages using the &eta element.

<se the &eta element to add information relevant to #nternet search engines and

people viewing your source code.

'dd background sound to B"&= pages.

'dd a &aruee.

'dd linking te%t.

(rereuisites

"he reuirements are described with each element.




133

<ses of the &eta $lement

*: Client 2ull ? 2age -nimation

Client pull describes a scenario where the B"&= page has a &$"' element

inside the B$' element of the document, which instructs the browser to

7$47$-B the view of that page. ther attributes of the refresh instruction

specify the time interval and the <7= to be used. #n this way, a series of pages

can be presented without the user reuesting the new pages to be loaded.

H&$"' B""(2$D<#FLP7efreshP

CN"$N"LP1R<7=L..;directory;filename.htmPI

: .es6ription

Aou can use the &eta element to embed information in the Bead of your page

that the search engines will use to display a description of your site.



H&$"' N'&$LPdescriptionP CN"$N"LP"his is my company:s web site. "he

site contains information on our products and services.PI

I: 1eyords

Aou can use the &eta element to embed information in the Bead of your page

that the search engines will use for keywords when people are searching for your

site.

H&$"' N'&$LPkeywordsP CN"$N"LPproduct name, service name, company

name, country, province;state, industry, etc.PI

J: -uthor

Aou can embed the author:s name in a &eta element

H&$"' N'&$LPauthorP CN"$N"LPAour NamePI



L: Company

-imilarly you can embed the company name.

H&$"' N'&$LPcompanyP CN"$N"LPCompany NamePI

K: Copyright

H&$"' N'&$LPcopyrightP CN"$N"LPCopyright ^ 1 Aour Name orCompany name. 'll rights reserved.PI

%xample3

HB"&=I

HB$'I

H"#"=$I&y B"&= ocumentH;"#"=$I



H&$"' N'&$LPdescriptionP CN"$N"LP"his is my company:s web site. "he

site contains information on our products and services.PI

H&$"' N'&$LPkeywordsP CN"$N"LPproduct name, service name, company

name, country, province;state, industry, etc.PI

H&$"' N'&$LPauthorP CN"$N"LPAour NamePI H&$"' N'&$LPcompanyP

CN"$N"LPCompany NamePI

H&$"' N'&$LPcopyrightP CN"$N"LPCopyright ^ 1 Aour Name or

Company name. 'll rights reserved.PI

H;B$'I

HAI

H;AI

H;B$'I




13!

'dding -ound to an B"&= (age

When sound files are included in web pages the browser must first download theaudio file and then start the player softwareR this can seem to take an e%tremely

long time over some connections. epending on the browser that the client is

using either the $mbed element or the K-ound element will be supported.

%mbed

"he H$&$IH;$&$I element is used to place audio in a web page.

#t is supported by Netscape Navigator, and some 'ctive) e%tensions to #nternet

$%plorer. "he $mbed element has the following attributes0

-7C0 defines the <7= of the sound file.

CN"7=-0 Aou have your choice of several controls including console, small console, play

button, etc.

'<"-"'7"0 when set to true the sound will start once the sound file is downloaded. B#$N0

when set to true it will hide the controls, default is false.

=(0 defines how many times the sound file will play. F=<&$0 sets the default volume when

playing first starts. B$#KB"0 in pi%els depends on choice of controls.

W#"B0 in pi%els depends on choice of controls.

H$&$ -7CLfile0;;;C_;W#NW-;&$#';8ungle\5+$%it.wav W#"BL?1!?

B$#KB"L?/+? '<"-"'7"L?"7<$? F=<&$L?1++?

CN"7=-L?CN-=$? B#$NL?"7<$?I

"he following sound formats are supported0 .W'F or .'< audio files, or

.&# midi files.

B=&ound

"he HK-<NIH;K-<NI element is used to place background audio in a

page, it is supported by #nternet $%plorer. K-ound has the following the

following attributes0

-7C0 defines the <7= of the sound file.

=(0 defines how many times the sound file will play.

$='A0 defines the delay between loops.

"#"=$0 the te%t that describes the sound.

HK-<N -7CLfile0;;;C_;W#NW-;&$#';8ungle\5+-tart.wav =(L?5?

"#"=$L?8ungle theme? $='AL?!?I

"he following sound formats are supported0 .W'F or .'< audio files, or

.&# midi files.

'nimation $lements

,aruee

"he H&'7D<$$IH;&'7D<$$I element defines te%t that is displayed in an

animated region of the browser.

W#"B0 of the maruee in pi%els.

B$#KB"0 of the maruee in pi%els.

=(0 defines how many times the te%t will travel through the space.

KC=70 defines the background color of the maruee.

$B'F#70 defines how the te%t should move in the maruee.

-C7==$='A0 sets the number of milliseconds before refreshes.

H&'7D<$$ $B'F#7L?'lternate? KC=7L?U4444*+? =(L?!?I"his"e%t is 'nimated9H;&'7D<$$I

"he &aruee element is currently only supported by #nternet $%plorer, Navigator

Must displays the te%t between the H&'7D<$$I and H;&'7D$$I tags.



Blink

"he H=#NEIH;=#NEI element is supported by Navigator. #t will cause te%t to

blink. Aou can combine it with most te%t formatting for the desired effect. "he

element has no attributes.

H=#NEI"his "e%t will blinkH;=#NEI

' word of caution this element should be used very cautiously as it will become

annoying to repeat visitors.




13

Chapter 13 – $%ercise 1 – 'dding Client (ull

#n this e%ercise, you are going to modify a series of html pages so that each pagecontains a &$"' element that causes the browser to load another page in a

specific period of time.

2ro6edure

#n Notepad open the file called c0[B"&=files[-pecial[h.htm

#nsert a &$"' tag inside the B$'0 H&$"'I

'dd attributes to the &$"' element0

B""(2$D<#FLP7$47$-BP

CN"$N"LP1R<7=Lht.htmP

Note3 Notice that the document h.htm points to ht.htm.



-ave the file.

#nsert a &$"' tag in ht.htm that points to htm.htm and save the file.

#nsert a &$"' tag in htm.htm that points to html.htm and save the file.

#nsert a &$"' tag in html.htm that points to web.htm and save the file.

(review the file h.htm.

#n this e%ercise you can e%periment with animation elements and their attributesettings.

2ro6edure

Create a new file to test &'7D<$$ and =#NE.

'dd some of the other &$"' tags to your page.

'dd a &'7D<$$ element

'dd a =#NE element

&ake the te%t in both larger and colored

-ave your file and view in both Navigator G #nternet $%plorer

$%periment with some of the other attributes of the &'7D<$$ element

&ample Code0

HB"&=I

HB$'I

H"#"=$I&aruee and linkH;"#"=$I H&$"' N'&$L?C&('NA?

CN"$N"L?)AZ Corporation web site with samples of &aruee and

link as animation.?I

H&$"' N'&$L?E$AW7-? CN"$N"L?"e%t 'nimation, &aruee, link?I

H;B$'I

HA KC=7L?U444444?I

H(IH&'7D<$$ $B'F#7L?'="$7N'"$? KC=7L?U*+44++?

=(L?1+? B$#KB"L?+?IH4N" -#Z$L?V3? C=7L?U44++++?I"his "e%t is

'nimated9H;4N"IH;&'7D<$$I

H;(I

H(IH=#NEIH4N" -#Z$L?V3? C=7L?U44++++?I"his "e%t is

'nimated9H;4N"IH;=#NEI

H;(I

H;AI

H;B"&=I




13



7eview Duestions

Where do the &eta tags go in the B"&= ocumentQ

Name three uses for the &eta element information.

Bow can you add sound to an B"&= pageQ

Bow do you set the attributes of the link elementQ

-ummary


Create animated pages using the &eta element.

<se the &eta element to add information to your pages that is relevant to #nternetsearch engines and people viewing your source code.

'dd background sound to an B"&= page.

'dd a &aruee.

'dd linking te%t.




11

1+(age =ayout, and esign Considerations

"his chapter will teach you to use B"&= elements in an effective manner to

control page layout. Aou will also be introduced to the different design

considerations that you will have to make.

bMectives


<se "echnical esign Considerations in planning an B"&= page or proMect



iscuss $ffective (age =ayout

(lan a successful web site

Create a web site that is easily navigated

(rereuisites

&ultiple browsers to ensure that your page looks the same in different browsers.



"echnical esign Considerations

&6reen !esolution

-creen resolution is dependent on the hardware and the settings on the

computer that is going to view your page. #t is measured in pi%els. When

designing your pages you should make sure that they look good at the lowest

resolution. "he ma%imum guaranteed viewable area on a (C is /++ ) 5*+. "his

takes into account that the browser is actually using some of the viewable space.



/+ ) *+

*++ ) /++

1+5 ) /*

15*+ ) 1+5

thers, &ac and Web "F

Color .epth

'nother factor that is determined by the hardware of the surfer:s computer, is the

number of colors supportedR the video card or the current video settings can limit

this. n a (C, the video driver defaults to 1/ colors and in many cases, older

video cards only support 1/ colors. esigners should develop their graphics with

a 51/2color palette or the Netscape supported palette, and all graphics should be

viewed at 1/ colors to ensure that they look good.

1/ colors

5!/ colors

51/ colors

7educing the colors used in graphics has the additional benefit of reducing the

file siJe, which allows faster downloading.




13



.o6ument &ie vs: .onload Time

(robably the biggest technical design consideration is the overall siJe of thepage versus the time it takes to load on the surfer:s computer. -everal things

affect the speed at which a browser receives your page. "he primary one is the

speed of the user:s connection to the #nternetR usually controlled by the surfer:s

modem speed. "his is another factor that is out of the control of the designer.

's a designer you should add up the following components to calculate the

overall siJe of your web page0

"he siJe of the html page in bytes.

"he siJe of any graphics in bytes.

"he siJe of any embedded audio files in bytes.

"he siJe of any 'ctive) obMects or 8'F' applets

(age -iJe L B"&= page V Kraphics V audio V other >'ctive) and;or 8ava@

1. Ebps represents Eilobits per second or 1++ bps or >1++;*@ 1*++ ps

>bytes per second@. ' !+ E >Eilo yte@ graphics file will take >!++++;1*++@ 5

seconds to download. 't 5*.* Ebps it will take half that time 1321 seconds. 't

33.3 Ebps it will take appro%imately 15 seconds.

Kiven that modem speed is a big limitation for most surfers you should not

overload your pages. Aou should give the surfer the option to go to pages that

are heavy with graphics, sound or 8'F' applets. 7ecogniJing that many people

surf with their graphics off you will also want to ensure that you effectively use the

'lt "e%t attribute for graphics that you are using.

"echnical esign Kuidelines for #nternet 'pplications

<se plug2ins and applets sparingly

Eeep total page siJe less than !E >! seconds 6 1.@

=et users choose to view graphics intensive pages

Eeep graphics less than !+E usually

<se interlaced graphics >don:t use for backgrounds@



2age oading P +TT2 *:M .i77eren6es ith +TT2 *:*

&any uestions come up over how a page is loaded, and a lot of that can beanswered by the way the protocol that transports the page from the server to the

web client works.

"he B"&= page is retrieved. "his is done through one connection to the server.

"he content of the page is then parsed, by the browser, for other elements that

need to be downloaded like graphics, sound, 'ctive) obMects, or 8'F' applets.

-eparate connections to the server are created for the other elements in the

page, and each element is downloaded individually. $ach one of these

connections would be considered a hit by the web server, and entered into the

web server log.

-ince the "C(;#( protocol can have several connections open at once between

the server and the web client, more than one element is downloaded at a time.

"his is why the status bar at the bottom of the browser shows the percentage of

the file downloaded. "he status alternates between different siJes as theinformation for each connection reaches the browser.

4uture web servers and web client software will support B""( 1.1, which has

several enhancements over B""( 1.+. "he maMor enhancement is that only one

connection will be established for the page and all the elements that need to be



downloaded. "his will reduce the number of connections that must be opened

and maintained, at the server and will decrease download time.

Broser Compatibility ? Auirks

Web client software is written by a number of companies and as such there are a

number of differences between the browsers in the way that they interpret

standard B"&= code.

ne difference is the way in which the browsers draw tables. #nternet $%plorerwill redisplay the table as new elements fill in the cells. Navigator downloads all

the elements before displaying the table and so does not perform multiple

redraws as the table fills with data.


1!



(age layout

'n B"&= page starts in the top left corner and grows to the right with no fi%edboundary, and grows down with no fi%ed boundary. "his means a page can be

infinitely long and wide.



Eeep in mind that people reading $nglish are trained to start in the top left of a

page and finish at the bottom right. #t is a good idea to start the theme of the

page in the top left or center at the top of the page for this reason.

(age navigation controls should be located at the bottom right hand side of the

page to make it easy to select the ne%t page, or return to the previous page.

(age =ayout Kuidelines

#n most cases your pages should not reuire the viewer to scroll to the right. "he

ma%imum width of a page should be /++ pi%els in order to be displayed properly,

regardless of the display resolution.

7ecommended components of a home page0

$2mail address >i.e. webmaster6whatever.com@

&ailing address

(hone numbers >*++ numbers plus local area code and number. 7emember not

everyone one in the world has access to your *++ number@

#nteractive component that encourages repeat visits by your target audience

=ook, feel and message should reflect the organiJation

#nformation that is relevant to the target audience

irections to what your target audience wants to know or do >

(7$ and;or (ost -ale@

"o control a page you may want to create a table with a ma%imum siJe of /++

pi%els and contain the page inside the table.

When deciding to use a ackground #mage that has a distinct left side youshould make sure it is 15*+ pi%els wide, because the browser tiles the

background image, and anything smaller will appear again on the right of the

page when viewed at high resolutions.

<se the #F and C$N"$7 element to control layout. >iv creates divisions within

the document that do not have preformatted spacing associated with them, like

paragraphs@ Aou can control the alignment of obMects with the alignment attribute

of the #F element.

"o create attractive looking forms you should use a table to control the layout and

alignment of the form elements.

Web pages should use white space at the borders. "his makes the pages easier

to look at and to read. (rinted pages usually have white space at the left and

right hand sidesR as well, at the top and bottom of the page. "his effect can be

achieved by centering the contents of the page.

4rames are good for keeping people in your site. Careful consideration must be

given to using 4rames, as they reuire 4rames2capable browsers. 'lways

remember to provide valuable information in the

No4rames section of the 4rameset.

Aou should be consistent in your layout across multiple pages, people becomecomfortable with the format, and begin to e%pect it.

igger is better. #f things are too small they will strain the viewer:s eyes and it will

not be comfortable for them. Keneral te%t areas should be 1+ pt. or larger as this

appro%imates a similar reading e%perience as a newspaper.

Aou should vary siJes for te%ture. When everything is the same siJe it becomesvery boring.

linking te%t should only be used in situations where the information is changing

freuently.

e sure to use case properly. &i% upper and lower case as reuired or for effect.

ocuments done in all <(($7 case are hard to read.


1



-ite esign 4actors and Criteria

When developing a web site from scratch you should first answer the uestionsrelated to why people will be visiting the site in the first place. #s it for pre or post

sale support, to purchase something, or find out more about the company. Aour

web site should be part of your business plan or marketing plan and there should

be established goals and obMectives for what it is to accomplish. nce you know

what problem you are trying to solve with the web site you can then start your

design.

#n general a site should be intuitive for the person visiting it. #t should be very

easy for them to contact your organiJation at any time and they should be able to

locate the information they are looking for in three to five mouse clicks.

"he Bome page should be simple and fast.

"he Bome page should answer some basic uestions for the surfer0

#s this the organiJation # was looking forQ

o they have what # am looking forQ

Bow can # contact themQ

Bow do # get what # want nowQ



-ite =ayout and Navigation

Navigation controls should be located across the top or the right hand side of the

page. "his will locate your navigation controls close to the browser:s controls for

movement and up and down scrolling.

's previously mentioned you should only have 3 to ! mouse clicks to move from

start to destination. (eople do not like to hunt for an answer.

Create sub sites to simplify navigation, and for marketability. $.g.education.novell.com, insight.netscape.com



7eview Duestions

What is the ma%imum guaranteed viewable area on a (CQ

Kive two reasons why you would want to reduce colors in graphicsQ

What components do you add together to find your page siJeQ

Bow many ytes per second can a 1. modem receiveQ



Name three methods of controlling the positioning of te%t and obMects on a pageQ

What must you be check for when using a background imageQ

Bow many mouse clicks are reasonable for surfers to make to get to the

information they are afterQ




1

-ummary


<se "echnical esign Considerations in planning an

B"&= page or proMect

iscuss $ffective (age =ayout

(lan a successful web site

Create a web site that is easily navigated



1!+ =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net



1.Cascading -tyle -heets

"his chapter will help you make use of a powerful feature in B"&= page creation

called Cascading -tyle -heets.

bMectives


escribe how to use a Cascading -tyle -heet.

'dd an #nline -tyle.

'dd an $mbedded -tyle -heet.

'dd =inked -tyle -heets.

<se the #F and -('N $lements to add style.

efine and use a Class.

efine and use an #.

(rereuisites

Cascading -tyle -heets are currently supported by0

Netscape Navigator .+ or greater

&icrosoft #nternet $%plorer 3.+ or greater.




1!1



#ntroduction to Cascading -tyle -heets

Cascading style sheets are a recent addition to B"&= pages. Web pagedesigners have long been frustrated at the lack of control they have, over how a

page will appear. Cascading -tyle -heets are a way of controlling the way the

browser displays the page. 4or the e%perienced designer,

Cascading -tyle -heets will be a welcome feature that will save a lot of time

normally spent on repetitive style formatting commands. Aou can specify a

particular font siJe in points or pi%els and control the spacing and indentation,

etc. Cascading -tyle -heets will give you much more control over the te%t on the

page.

"here are three ways to add -tyle information to you web page0

#nline styles

$mbedded style sheets

=inked style sheets

We will cover the concepts behind all three.



&icrosoft #nternet $%plorer >3.+ and above@ and Netscape Communicator

.+ provide the most e%tensive support for cascading style sheets at this time.

"he specifications for the evolving C-- standard can be found at the W3C

ConsortiumSs Web page at http0;;www.w3.org;. Aou will need to use the

C-- standard section of the site or some other C-- reference to see all of the

details for writing style commands. "his chapter will focus on showing you how to

apply style commands to your documents.



1!5 =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net



#nline -tyles

"he first method of adding -tyle to a web page is to use the -"A=$ attribute of aselected element. "o use an inline style, you add a -"A=$ attribute to a specific

instance of an element, using the following synta%0

H$=$&$N" -"A=$L?property0valueR property0valueR ?IH;$=$&$N"I

4or e%ample0 H -"A=$L?color0navyR?I'n the navy:H;I "his te%t would appear

bold and navy in a browser.

'n inline style may be applied to any B"&= element, from H'I to HF'7I, and

modifies only the specific instance >occurrence in the document@ of the element

to which you apply it.

&ample Code0

HB"&=I

HB$'I



H"#"=$I-tyle -amplesH;"#"=$I

H;B$'I

HA KC=7L?U444444?I

HB5 -"A=$LPC=707$PI"his Beading has -tyle9H;B5I HB5I"his Beading

has -tyle9H;B5I

HB5I#ntroductionH;B5I

HB5I-ales and &arketingH;B5I H(I"his is normal te%t.H;(I

HB5IperationsH;B5I HB5I-ummaryH;B5I

H;AI

H;B"&=I

When viewed in a browser you can see that in this file the -"A=$ command only

affects the element that it is applied to.

#nline -tyles are used rarely because they are as much work as using the

H4N"I tag. "hey are sometimes used to override styles from embedded style

sheets or from a linked cascading style sheetR this will be demonstrated later.




1!3



$mbedded -tyle -heets

"o use an embedded style sheet, you define a style block >delimited by theH-"A=$I and H;-"A=$I tags@, which should be placed in the HB$'I section

of the document. "his block consists of a set of style rules, where each rule

defines a style for an B"&= element or group of elements.

HB$'I

H"#"=$I $mbedded -tyle -heet $%ample H;"#"=$I H-"A=$ "A($L?te%t;css?I

H;-"A=$I

HB$'I

HAI

' reuired attribute of the -tyle element is "A($ and it should be set to te%t;css.

' disadvantage of $mbedded -tyle sheets is that the style commands only apply

to the document they are embedded in.

-ome browsers are not C--2compliant and will display the contents of the



-"A=$ element in the document window. 4or this reason it is a good idea to

surround an embedded style sheet with an B"&= comment. "his will cause the

content to be ignored by non2C-- browsers, but still interpreted by C--

compliant browsers.

"ype H922S Must after the -"A=$ start2tag, but before the style sheet information.

"ype 22IS Must before the -"A=$ end2tag, but after the style sheet information.

' style rule has two parts0

' selector that identifies an B"&= element or group of elements ' declaration ofthe style properties to be applied to that selector

"he generic synta% for a style rule is as follows0

selector property0valueR property0valueR

$ach style rule must start with a selector or group of selectors, followed by an

open brace >@, followed by a set of declarations. $ach of these declarations ends

with a semi2colon and each property is separated from its value>s@ by a colon >0@,

ending with a close brace >@.

1! =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net

'dd the following -"A=$ element to the previous code sample0

H-"A=$ "A($L?te%t;css?IH922

B5 color0 blueR 22IH;-"A=$I

<sing the $mbedded -tyle -heet will make all of the HB5I elements in the

document display in blue, e%cept for the HB5I that still contains the inline style

command. "his illustrates that the inline style command is a higher priority and

takes precedence over the embedded commands if they are in conflict.




1!!

=inked -tyle sheets

"he easiest method for adding style to multiple B"&= documents is to use=inked -tyle -heets. ' =inked -tyle -heet is a separate file that contains all of

the style information.

"his is an e%ample of a Cascading -tyle -heet.

B5

color0 fuchsiaR te%t2decoration0 line2throughR

"o link the style sheet to the B"&= page you use a =#NE element in the head of

your document. "he reuired attributes are B7$4LP<7=P and

7$=LP-"A=$-B$$"PR both the "#"=$ and "A($ are optional. ut "#"=$ mustmatch the "itle0 property in the -tyle -heet@, and "A($ should be set to

Ote%t;cssP.

"o create a linked style sheet you can use Notepad and save the file with the file

e%tension .css $.g. h5]styles.css



"o have the style sheet work with your B"&= file you need to link the file using a

=#NE element.

-ample Code added to previous file0

HB$'I

H"#"=$I-tyle -amplesH;"#"=$I

H=#NE 7$=L?-"A=$-B$$"? B7$4L?h5]styles.css?I

H-"A=$ "A($L?te%t;css?IH922 B5

color0 blueR

22IH;-"A=$I H;B$'I

Fiew the file in your browsers and you will see that the colors are still controlled

by the higher priority inline and embedded style commands but because the te%t

decoration command does not conflict with anything, it is applied to all of the

HB5I elements in the document.



1!/ =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net



Classes

#f you e%pect to have formatting variations for different instances of a singleelement, or you would like to have different elements share the same format,

using a class name as a selector is a good approach. "his is often referred to as

?sub2classing? an element. C='-- is an B"&= attribute that has no display

characteristics and that you can apply to any element, like this0

HB5 C='--LPsalesPI-tyles applied to the sales sectionHB5I

"he style rule for sales could be declared as follows0

H-"A=$I H922

.sales color0limeR te%t2decoration0noneR

22I H;-"A=$I

Note3 that the selector begins with a period >.@, which is the reuired synta% for

class names as selectors.



' class is simply a group of elements, possibly scattered throughout a document,

all of which have the same value for their C='-- attribute.

"o apply a class to a group of elements, set the C='-- attribute for all that apply0

HB5 C='--LPsalesPI -ales and &arketingH;B5I H( C='--LPsalesPI"his is

normal te%t.H;(I

#n the browser, notice how the styles associated with the C='-- value are

applied to the tagged elements and also notice that they override the other

conflicting style commands.




1!



#s

=ike C='--, # is an B"&= attribute that does not affect the display of anelement and can be applied to any element. #n general, while class names are

usually given to groups of element instances sharing some common function or

format >relative importance, conte%t, and so on@, # is used to identify one

specific instance of an element. -tyle rules selected by the # attribute are

declared using the pound sign >U@ to precede the selector, as follows0

H-"A=$I H922

Umainhead color0yellowR te%t2decoration0italicR 22I H;-"A=$I

Note3 While many elements can have the same C='-- attribute value, only one

element in any document can have a particular # attribute value.

#s are intended to be uniue identifiers for elements in a document. Cascading

style sheets let you associate an # attribute with a set of style properties and

values, so that you can format a particular element instance in a certain way.

Note3 Class and # attribute values must start with a letter and can contain only

letters, numbers, and 2S >hyphen@.



1!* =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net



#F and -('N

8ust as C='-- and # appear to have little use beyond setting styles >andscripting@, the two B"&= elements H#FI and H-('NI are almost e%clusively

used as containers for C-- properties. H#FI and H-('NI, like C='-- and #

22 but unlike other B"&= elements 22 have no inherent display characteristics,

with one e%ception each. H#FI defines a block consisting of te%t and B"&=

tags, and separates this block from surrounding content by line breaks, while

H-('NI is an inline element which ?flows? in with surrounding content.

H-"A=$I H922

#F background2color0 blackR color0redR font2weight0boldR

-('N background2color0 royalblueR color0whiteR 22I

H;-"A=$I

H(I-ome te%t about to run into a big #F tagH;(I

H#FI# am a #FH;#FI

H(Iand narrowly escape.H;(I

H(I-ome te%t about to flow seamlessly into a -('N tag H-('NI# am a

-('NH;-('NI and make a smooth getaway.H;(I




1!



Cascading and #nheritance

"he style sheets we are discussing are called Cascading -tyle -heets. -implystated, ?cascading? in C-- specifies how an element instance may properly be

affected by styles of different types >inline style, embedded style sheet, linked

style sheet, imported style sheet@ and selected in a number of ways >element tag,

class, #@. "he logic is simple0 C-- cascades from general to specific, and from

top to bottom.

HB$'I

H-"A=$I

H922

( margin2left05+p%R

.clsCode font2family0?Comic -ans &-?R font2siJe01+ptR color0navyR

Uid(1 te%t2align0leftR font2weight0boldR 22I

H;-"A=$I

H;B$'I

HAI



H( #L?id(1? C='--L?clsCode?I&ultiple styles, no conflicts.H;(I H;AI

id(1Ss formatting is affected by the style rules for HAI, H(I, clsCode, andid(1. "hese potentially conflicting styles are resolved through the laws of

cascading and inheritance.

"his means that first, the HAI2selected style >background2color@ is applied,

followed by the H(I2selected style, clsCode, and finally, id(1, with each style

taking precedence over the previous one. #f we had an inline style defined as

well, it would have been applied last, overriding all others. #n the cascade, for the

same element, a rule with # as the selector takes precedence over a rule withC='-- as the selector. C='--, in turn, takes precedence over the B"&=

element name as selector. "his is referred to as ?specificity? of the selector. "he

order of specificity, from greatest to least, is0

inline styles

#

C='--

B"&= element



1/+ =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net



"here were no conflicting style assignments 22 for e%ample, the background color

for the paragraph was set only in the HAI rule, and the font siJe was set

only in the clsCode style rule so the styles ?trickled down? to the ne%t selector

unaltered.

#n the case of conflicting assignments with identical selectors, a style selected by

a selector of greater specificity takes precedence. 4or e%ample, letSs apply a

color value >white@ to the Uid(1 declaration. "his will

?conflict? with the color value specified in the .clsCode specification. -ince Uid(1

has greater specificity, its color >white@ will win out over the previously set color

>navy@.




1/1



Chapter 1! – $%ercise 1 – #nline -tyles

#n this e%ercise, you will add an #nline -tyle to a document.

2ro6edure

pen C0[B"&=files[css[oc1.htm.

'dd a -"A=$ attribute to the HB1I element

-et the value of the -"A=$ attribute0 type 6olor3 yello

-ave and preview your document in #nternet $%plorer or Navigator v.



1/5 =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net

Chapter 1! – $%ercise 5 – $mbedded -tyles

#n this e%ercise, you will add $mbedded -tyles to a document.

2ro6edure

pen C0[B"&=files[css[oc5.htm.

#nsert a -"A=$ element in the head of your document. -et the "A($ attribute ofthe -"=A$ element to Qtext/6ss

#nside the -"A=$ tags type0

<RGG

+ 86olor3 green@9

2 86olor3 red@ 7ontGsie3 *pt@ 7ontG7amily3 -rial@9

22I




&ample Code0

HB$'I

H"#"=$I$mbedded -tyle -heetH;"#"=$I

H-"A=$ "A($L?te%t;css?I

H922 B5

color0 greenR

(

color0 redR font2siJe0 15ptR font2family0 'rialR

22I H;-"A=$I

H;B$'I




1/3



Chapter 1! 2 $%ercise 3 – =inking a Cascading -tyle -heet

#n this e%ercise, you will create and link a style sheet to a document.

2ro6edure

Create a new file in Notepad

"ype the following style commands0

:red 86olor3 red@9

:blue 86olor3 blue@9

-ave the document as stylesht.css in the C0[htmlfiles[css directory.

pen the file C0[htmlfiles[css[doc3.htm

#nsert -('N element tags around the word OredP $.g. H-('NIredH;-('NI



-et the C='-- attribute of the -('N element to OredP $.g. H-('N

C='--LPredPIredH;-('NI

#nsert a -('N element around the word OblueP and set the C='-- attribute to

OblueP

#nsert a =#NE element in the B$' element and set the following attributes0

7$=LPstylesheetP

"A($LPte%t;cssP

B7$4LPstylesht.css


Aou have successfully created an e%ternal style sheet that uses classes and

linked it to your document that uses the -('N element to apply those classes.



Chapter 1! 2 $%ercise – $diting the -tyle -heet

#n this e%ercise, you will edit the style sheet you created in $%ercise 3.

2ro6edure

pen the file Ostylesht.cssP

'dd the style commands0

Uorder border2color0blackR border2style0solidR border2width0thinR background2

color0yellowR

-ave the file with the changes

pen the file C0[htmlfiles[css[doc3.htm

Change the ('7'K7'(B tags to #F tags



-et the # attrbute of the #F to OorderP

-ave and preview your document in #nternet $%plorer and Navigator v. Aou

have successfully edited an e%ternal style sheet that uses #s and linked it to

your document that uses the #F element to leverage those #s. Aou will also

notice that the support for the border style commands is different in Navigator

and #$ as is the way that the 5 browsers apply the background to the #F

element.

&icrosoft #nternet $%plorer .%

Netscape Navigator .%

ptional $%ercises

$%periment with the additional .css files in the sample files directories.




1/!



7eview Duestions

What are three ways to add style information to your web pagesQ

Kive two disadvantages of $mbedded -tyle -heets.

Bow is a -tyle -heet linked to an B"&= documentQ

escribe two applications for -tyle -heets.



1// =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net



-ummary


escribe how to use a Cascading -tyle -heet.

'dd an #nline -tyle.

'dd an $mbedded -tyle -heet.

'dd =inked -tyle -heets.

efine and use a Class.

efine and use an #.




1/

#nde%

A

'ctive) 15!

'ddress H'7$--I

H;'7$--I 3

'lignment 35

'lignment, HC$N"$7I 35

'lignment, H#FI 35

'lignment, H"'=$I 35

'nchor, H'I H;'I !!

'pplet, H'((=$"I H;'((=$"I ..11/

'rea $lement H'7$'I /+

B

ase, H'-$I *

ig H#KI H;#KI 33

lockuote H=CED<"$I

H;=CED<"$I 3

&(

A HAI $lement 15

A $lement, "e%t 'ttribute 15

ody, HAI H;AI , !

old HI H;I 31

ookmarks !*

reak, =ine H7I 53

rowsers 1!

C

Caption $lement HC'("#NI /

C$N"$7, see 'lignment

HC$N"$7IH;C$N"$7I 35

CK# /

Citation HC#"$I H;C#"$I 31

Class #, 'ctive) 15!

Classes 1!

Color epth 13

Comments 11*, 15*

C-- – Cascading -tyle -heets

1!5

C--, Cascading and #nheritance 1/+

C--, Classes 1!

C--, #F and -('N 1!

C--, $mbedded -tyle -heets

1!

C--, #s 1!*

C--, #nline -tyles 1!3

C--, =inked -tyle sheets 1!/

D

HI efinition escriptions,

-ee =ists 5

#F 1!

= H=I efinition =ist, -ee =ists 5

ocument (roperties 11

ocument (roperties, Color Codes

11

ocument -iJe 1

ownload "ime 1

" H"I efinition "erm, -ee =ists

5

E

$lement 3

$2mail !

$mbedded -tyle -heets 1!

$mphasis H$&I H;$&I 31

F

4ont H4N"I 31

4orm, attributes **

4orm, $lements *

4orms, H47&I H;47&I *

4orms, Check bo%es 1

4orms, 4ile <pload 5

4orms, #mage -ubmit button 3



4orms, ption button 1

4orms, (assword bo%es +

4orms, (ush button 5

4orms, 7eset button 3

4orms, -elect !

4orms, -elect options !

4orms, -ubmit button 3

4orms, "e%t area

4rames

4rames, H47'&$I H;47'&$I *

4rames, H47'&$-$"I

H;47'&$-$"I /

4rames, HN47'&$-I

H;N47'&$-I

4rames, 'rchitecture !

4rames, Creating /

4rames, ther 'ttributes

1/* =& World Class Web Bosting $2commerce and Custom #nternet -olutions hosting.olm.net



#nde%

4rames, ther 'ttributes, 7$7

4rames, ther 'ttributes,

7$7C=7


47'&$7$7


47'&$-('C#NK

4rames, -pecial "argets *5

4rames, "argets *1

4"( !/

G

K#4 *

K#4, 'nimated *

K#4, #nterlacing *

K#4, "ransparency *

Kopher !

H

Bead, H'-$I H;'-$I !

Bead, HB$'I H;B$'I , !

Bead, H#-#N$)I H;#-#N$)I !

Bead, H=#NEI H;=#NEI !

Bead, H&$"'I H;&$"'I !

Bead, H-C7#("I H;-C7#("I !

Bead, H-"A=$I H;-"A=$I !

Bead, H"#"=$I H;"#"=$I !

Beadings, HB%I H;B%I 51

BoriJontal 7ule, HB7I 5

B"&= "ables/

B"&= "ip, lockDuotes 3

B"&= "ip, 4orms **

B"&= "ip, #mage ackgrounds 1

B"&= "ip, #mages !+

B"&= "ip, =inks !*

B"&= "ip, &ultiple -paces55

B"&=, HB"&=I H;B"&=I

B""( !/

B""( -pecification 1!

Bypermedia 5

hyperte%t 5

I

#s 1!*

#mage ackgrounds13

#mage &aps !

#mage &aps, H'7$'I /+

#mage &aps, H&'(I H;&'(I /+

#mage &aps, Client2side /+, 15

#mage &aps, -erver2side !

#mages, H#&KI !+

#mages, 'lignment !+

#mages, 'lternate "e%tH'="I !+

#mages, order 'ttribute !+

#mages, Beight 'ttribute !+

#mages, B-('C$ !+

#mages, -7C attribute !+

#mages, F-('C$ !+

#mages, Width 'ttribute !+

#nline -tyles 1!3

#N(<" H#N(<"IH;#N(<"I*

#-#N$) H#-#N$)IH;#-#N$)I .. !

#talic H#I H;#I 31

J

8ava 11/

8ava, H('7'&I H;('7'&I

11/

8ava, 'ttributesH'((=$"I

H;'((=$"I 11/

8avascript 11*

8($K

8(K

L

=inear &edia 5

=ink Colors H=#NEI HF=#NEI

H'=#NEI 13

=ink $lement H' B7$4L !!

=inked -tyle -heets 1!/

=inks, $%ternal !!

=inks, #nternal !!, !*

=inks, =ocal !!

=ist #tem H=#I H;=#I +

=ists, efinition =ist H=I H;=I .. 5

=ists, Nesting 5

=ists, rdered =ist H=I H;=I 1

=ists, <nordered =ist H<=I H<=I . +

M

mailto !

&aruee, H&'7D<$$I

H;&'7D<$$I 13

&eta 13


1/

#nde%

N

N-( 55

News !/

N47'&$- HN47'&$-I

ption utton;7adio utton, 4orms

1

rdered =ist, =ists H=IH;=I 1

!

(age =ayout 1/

(age =ayout Kuidelines 1/

(aragraph, H(I H;(I 55

('7'& H('7'&I H;('7'&I

11/

(C)

(NK

(7$, H(7$IH;(7$I 31

(reformatted "e%t H(7$I H;(7$I31

(reviewing Aour Work 1!

<sing &icrosoft #nternet $%plorer

1/

<sing Netscape Navigator 1!

"

-creen 7esolution 13

-cript H-C7#("I H;-C7#("I15*

-cript, H-C7#("I H;-C7#("I

11*

-ection 3.5

#ntranet 'pplication evelopment

'rchitecture

-ection 3.5.a

-imple CK# (rogram

-ection 3.5.b

"hree2"ier 'pplication

evelopment*

-ection 3.5.c

4our2"ier Web 'pplication

evelopment

-elect, 47&-

H-$=$C"IH;-$=$C"I !

-ite esign 4actors 1*

-ite =ayout and Navigation1*

-mall H-&'==I H;-&'==I 33

-ound13/

-ound, HK-<NI 13/

-ound, H$&$I H;$&$I

13/

-('N, H-('NIH;-('NI 1!

-pecial Characters 31, 35

-pecial Characters,

H'-$4N"IH;'-$4N"I .. 3

-pecial Characters, Code $lement

HC$IH;C$I 33

-pecial Characters, efinition

$lement H4NIH;4NI 33

-pecial Characters, Eeyboard "e%t

HEIH;EI 33

-pecial Characters, -ample $lement

utput H-'&(IH;-'&(I 33

-pecial Characters, Fariable

$lement HF'7IH;F'7I 33

-trike H-"7#E$I H;-"7#E$I 33

-trong H-"7NKI H;-"7NKI . 31

-tyle, H-"A=$IH;-"A=$I !

-ubscript H-<I H;-<I 33

-uperscript H-<(I H;-<(I 33

-ymbols 35

#

"able ata H"IH;"I /!

"ables H"'=$IH;"'=$I/!

"ables, 'ttributes //, /*

"ables, Caption HC'("#NI

H;C'("#NI/

"ables, Beader H"BI H;"BI /

"eletype H""I H;""I 31

"elnet !

"e%t Color H4N"I 31

"e%t -iJe H4N"I 31

"e%tarea

H"$)"'7$'IH;"$)"'7$'I

"#44

"itle H"#"=$IH;"#"=$I !

$

<nderline H<I H;<I31

<nordered =ist H<=IH;<=I +

<7= !!, !/

%

value 3

F-cript 15*

Web Bosting

Online ,arketing

Duality Web Bosting www.olm.net

12*25/!2//3*

'ccess

Conne6t -meri6a

#nternational ial <p -ervices

www.connectamerica.com

+2*23/+

FlashNet ,arketing4 'n6:

#nternet access products and services

available for resale and promotion

www.flashopportunity.com

12*255!2!3/ %*+

#nternet -hows

NetTalk ive



Cool9 nline and on cable9

www.nettalklive.com

Newsletters

Tri6ks and Trinkets

' very cool news letter9

www.tricksandtrinkets.com

html unique book

Documents