HTML complete study package

8/13/2019 HTML complete study package

1/48

Internet Programming (Basic HTML Programming)

What is Internet programming?

Internet programming includes broad variety of technologies spanning such diverse

areas such as protocols for communication networks, interfacing to databases,

programming of graphical user interfaces, or structuring information. Examples:1. CI, !"# and "ervlets all serve the same basic function. $hey perform server%

side processing.

&. "imilarly C'()!, *C'+ and enterprise ava )eans specify how to talkto distributed ob-ects.

. /ikewise 0+/, $+/, "+/, 0"/ and C"" are all similar tools for marshaling

and displaying data across a network.

What is web application?

Essentially, all web applications do pretty much the same things:

1. #rovide a 2uery Interface % 3eb !pplications provide users with an interface for entering

data.

&. $ransmit 4ser%*efined 2uery % 'nce collected, the user%data is sent to a web server.

. #erform "erver "ide #rocessing % $he web server processes the user%data using some sort

of 5middleware5.

6. 5+assage5 *ata % #rocessing almost always involves playing with data on the server.

7. $ransmit 2uery (esults % $he processed data is now returned to the client.

8. #erform Client "ide #rocessing % 9inally, the returned data is displayed to the user. *isplay

might be as simple as interpreting $+/, or as complex as performing calculations, sorting,

or other manipulations of the data.

Data on the Web

$he most basic part of a web application is the data itself. !ll web applications allow a user to

submit instructions on how the web application should massage a bit of data on the web

server. $his might involve searching a database, creating a shopping cart of products, or

emailing some information to someone, or simply do nothing as in presenting an ordinary text

file.

1


2/48

(egardless, the data which is being manipulated all has some basic characteristics.

1. *ata have values

&. *ata have types

. *ata have descriptions

6. *ata have formats

!ll of the web technologies at the *ata /ayer define, describe, or standardie one or more of

these characteristics.

Some data tpes(aw *ata: (aw data is perhaps the most basic form of data and often the best choice. !s raw

data are considered a plain !"CCI text, images, sound, etc.

$+/: ! markup language. It is an essence of 3orld 3ide 3eb.

0+/: !nother markup language.

HTML ! Hperte"t Mar#$p Lang$age$+/ has a central role in the 3eb

! simple format for describing the structure of hypertext or hypermedia documents %

plain text ;!"CII< files with embedded codes for logical markup

=ot designed to be the language of a 3>"I3> word processor such as 3ord or

3ord#erfect

9ormally an "+/ ;"tandard eneralied +arkup /anguage< application

9rom nothing to a global information utility in -ust ? years

3e are seeing an explosion of new ways to get connected:

*igital $@s, andhelds, #hones, Cars,...

%bo$t HTML&'HTML

$+/ ;yper $ext +arkup /anguage< and its more recent incarnation, 0$+/;Extensible yper $ext +arkup /anguage< is the central core on which all 3eb pages

are built. !lthough there are new types of technology and coding options, including

##, !"#, 0+/ and others, traditional markup language is the place where 5all

2


3/48

things 3eb5 starts.

"ome 3eb editing software publishers claim that it is not necessary to know

$+/ if you use their programs to build 3eb pages. owever, this is rarely thecase. In almost every instance at least some knowledge of $+/ and 0$+/ is

helpful.

In this tutorial we will guide you through the basics of writing $+/A0$+/ code.It is important to realie that there is no better way to learn and understand the codethan to actually write and use it. $his tutorial will get you started on your first stepstoward becoming knowledgeable about the code.

Techni$e

+any people try to write 3eb page code as if they were creating a term paper. $hey startat the beginning and continue on through the middle to the end in a linearfashion.$+/A0$+/ code consists of two types of tags. $here are the container tags

and the single part tags, often called 5noncontainer5 tags.Container tags have an opening part and a closing part with the 5stuff5 that the tagcontrols inside.!n example is the tag that creates bold text, BstrongBAstrong. is the opening part and is the closing part.

If we write a code snippet it might look like this, 5Bstrong$his is boldBAstrong5 andyou can see the bold text in between the tag parts.!n example of a singlepart tag is the line break, Bbr A which merely stops a line of textat a specific point. $his is used where a line must end after a particular word.

Tools

3riting $+/ and 0$+/ code can be done simple word processor. )ut it isimportant to note the average code write should never use a processor such as 3ord,3ord#erfect, 'pen'ffice, or similar. $hese 5high end5 word processors are too smartand will try to insert their own formatting codes.

$he best software to use is also the most basic. =otepad is a perfectly suitable tool forwriting $+/. "ome programs that are specifically designed to create 3eb pages, suchas *reamweaver, have special $+/ writing functions that allow you to create straightcode. $here are also programs such as $+/Dit that function as 5code insertion5programs where the user doesnt necessarily write the code, but rather instructs theprogram to insert blocks of $+/ or 0$+/. Even though these programs make

writing code easier, it is still necessary to know the code.

=ote #ad tool would be used for programming in $+/.

3


4/48

etting Started

$o get started with you 3eb pro-ect you need to set up

your site with the proper structure. "ite structure is very

simple. >our pro-ect has a 5root folder5 that contains allof the files associated with the site. Inside the root

folder ;which, by the way, can have any name you

wish, it doesnt have to be called 5root5< will be sub

folders for specific types of files. 3hile the $+/3eb pages will be 5loose5 in the root folder, all the

images will be in an image folder, #*9 files in a #*9folder, and so on. $he diagram on the right illustrates astandard 3eb site structure with three $+/ pages and

two sub folders.

'ne you have your site set up on your computer with a root folder and the necessary sub

folders you can start to build your first 3eb page. $his will probably be your home page.4nless instructed otherwise, your home page will have one of these names:

inde"*htminde"*html

de+a$lt*htmde+a$lt*html

$he exact name will be specified by your 3eb master maintaining the host server for your

site. +ost 3eb hosting servers have a hierarchy of names. 3hen a site visitor types into

his or her browser the 4(/ of a 3eb site, the browser is directed to the host server. $hehost server automatically looks for the name of the home page based on the order of the

list, and when it is found it sends the page and all of its associated files to the visitors

computer where the browser assembles it on the screen.

If the server doesnt find the preferred home page name in the collection of $+/ files it

automatically looks for the second file name in the hierarchy. If that page isnt found itlooks for the third page name, and so on. It is helpful to give your home page the preferredhome page name on your host server so that the time lost to the search process is reduced.

'pen a new document with =ote#ad ;or whichever program you decide to use< and thensave it in your root folder with one of the home page names noted above

4


5/48

Setting ,p the Basic -ode

! 3eb page consists of two parts, the head and the body. $he head containsinformation about the page, such as +eta tags, when it was made, and the specifications

of the code itself. $he body contains the material that is seen when the page is viewed.

$he data in the head is not visible, although it may specify how the 5stuff5 in the bodyis displayed. !ll the tags, including the head and body tags, are located inside what canbe called the 5ultimate container tags,5 BhtmlBAhtml, which tell the browser that

everything inside them is for a 3eb page.

"tart by typing the opening and closing $+/tags BhtmlBAhtml as shown in theillustration on the right.

BhtmlBAhtml

=ow add the opening and closing tags for the

head of the $+/ page so that the codelooks like the example on the right.

=ow add the body tag.

"ave the file.

=ow add some text into your 3eb page so thatyou have something to see when you test it. Itmust be typed in the body, between theopening and closing body tags.

BhtmlBhead

BAhead

BAhtml

BhtmlBheadBAhead

BbodyBAbody

BAhtml

BhtmlBheadBAhead

Bbody$his is my first 3eb pageF

BAbody

BAhtml

=ow you can start your 3eb browser, Internet Explorer, 9irefox, +oilla, "afari,'pera, or whatever your favorite is. 'pen your new 3eb page and view the file. Inmost browsers you will click 9ile 'pen ;or 'pen 9ile


6/48

$he illustration on the right showswhat your page should look like.

=ow you can add some data to the head part of the 3eb page that will be helpful to yourvisitors.

Inside the head tags, create a title tag and type in a

title for your page. $itles are not names of thefiles. (ather, they appear in the top bar of a

browser and help identify to the visitor which pageis being viewed. $hey may also be used by search

engines

to determine what a page is about.

"ave and view your page again. >ou will seeyour pages title at the very top of the browser.

BhtmlBheadBtitle+y 3eb #ageBAtitle

BAheadBbody

$his is my first 3eb pageFBAbody

BAhtml

NOTE: It isn't necessary to follow the File> Open sequence every time

you view a saved page !ust ma"e sure your page is saved then clic" the#efresh or #eload $utton %depending on which $rowser you are using


7/48

%dding and .ormatting Te"t

In this next series of steps you will discover how to add next to your 3eb page

and format for appearance.

>ou will start by adding a paragraph tag to thebody of your 3eb page. $he code is illustratedon the right.

#aragraphs are one of the elements that $+/is designed to identify. =otice that paragraphs

are specified with the p tag, BpBAp.

NOTE: &hat is that tet( The tetillustrated in the eample on the right is

often called )*T+, ) from thefirst two words in this often quotedsample

Bhtml

BheadBtitle+y 3eb #ageBAtitle

BAheadBbody

BpHTML (Hyper TextMarkup Language) and itsmore recent incarnation,XHTML(Extensi!e Hyper

Text Markup Language) ist"e centra! core on #"ic"a!! $e pages are ui!t%&!t"oug" t"ere are ne#types o' tec"no!ogy andcoding options, inc!udingH,&, XML and ot"ers,traditiona! markup!anguage is t"e p!ace#"ere *a!! t"ings $e*starts%.BApBAbody

BAhtml


8/48

=o doubt by now you have noticed a pattern to

the way container tags are formed. $he closingpart of a container tag always has a forward

leaning slash,A, to it. $his slash is what tells the browser thatthe use of the tag has ended and is closed.

/ets format your text a little bit by adding

some simple bold to the first few words of the

paragraph. Insert the strong tag as shown on theright. ow will this look when viewed in a

browserG "ave the file and test it with your

browser.

=otice that only the words inside the strong tagshow up as bold. $his is how container tagswork.

!nother container tag is the emphasis tag that

is used to display text as italics. $hat tag isBemBAem. $ry applying it to a section of text

other than the part you bolded earlier. $heexample on the right will how you how thismight be done. >ou can see a real 3eb pageusing the emphasis tag by c lic k ing h ere.

Bhtml


BAheadBbody

BpBstrongHTMLBAstrong(Hyper Text MarkupLanguage) and its morerecent incarnation,XHTML(Extensi!e HyperText Markup Language) ist"e centra! core on #"ic"a!! $e pages areui!t%.BAp

BAbodyBAhtml

BhtmlBhead

Btitle+y 3eb #ageBAtitleBAhead

Bbody

BpBstrongHTMLBAstrong(Hyper TextMarkup Language) and itsmore recent incarnation,XHTML(Extensi!e HyperText Markup Language)Bemis t"e centra! core onBAem, #"ic" a!! $e pagesare ui!t%.BApBAbody

BAhtml


9/48

/esting Tags

=esting tags refers to the order in which the opening and closing parts of tags appear

when multiple tags are applied to a single segment of text or another ob-ect. 9or

instance, a portion of text can be both bold and in italics. #roper nesting of the strong

and emphasis tags would look like this:

-strong>-em>This is $old and italics-.em>-.strong>

$he strong tag is on the 5outside5 while the emphasis tag is on the 5inside5 and the textis in the middle.

>ou could also make the tags nest thusly:

-em>-strong>This is $old and italics-.strong>-.em>

Improperly nested tags will not have the outsideinsidemiddle seHuence. !n example ofan improperly nested set of tags is:

-strong>-em>This is $old and italics-.strong>-.em>

In the 5old days5 of the 3eb improperly nested tags usually did not make much

difference. )ut, as the 3orld 3ide 3eb evolved it became increasingly importantfor browsers to adhere to common standards.

%d0anced Te"t .ormatting

In addition to creating bold and italicied text,

you can also use $+/ to control the appearance

in more advanced ways. Included is the ability to

display text in color, control the font, and set thetext sie.

9ont presentation is controlled using the font tag,

BfontBAfont. In the example on the right, fontsie is specified at . 9ont sies are specified 1through

Bhtml


BAheadBbody

BpBfont sieJ55$his textis font sie .BAfontBAp

BAbodyBAhtml


10/48

with 1 as the smallest and the largest.

"ie is the default sie. $hat is the sie that is 5normal5 for most browsers undermost circumstances.

>ou can experiment with the font sies by changing the value using 1 through . $helist below shows what these sies look similar to what is shown below. (emember,

actual font sie will depend on many factors, including the sie of the monitor screen.

9ont sie 1

9ont sie &

9ont sie

9ont sie 6

9ont sie 7

9ont sie 8

9ont sie It is also possible to specify font sies relative to the settings in the browser. $his is

done using font sie attributes that are placed with 5K5 or 55. !n example is on the rightwhere the sie K& is used. $his means that the font should be displayed & sies larger

than the browsers default sie.

!ccording to the rules for $+/, these font

sies should override the settings that are set in a

visitors browser. In other words, if a visitor to

your 3eb page has customied his or her fontsies in the browser, the use of the sie attributein

the font tag will 5take over5 and the text should

appear as you, the page builder, desire. $heexample on the right illustrates how a LfontKsieM attribute could be applied.

BhtmlBhead


BbodyBpBfont sieJ5K&5$his text is

font sie 8.BAfontBAp

BAbody

BAhtml

"o, what is a 5K5 or a 55 exactlyG >ou cant tellF )ecause each browser could have anyfont sie set for default, it is not possible to determine exactly what the text will look

like because it can vary from machine to machine. $he examples below will give you

some idea, but to see how the appearance you may wish to visit this page later withanother browser setting of another machine.


11/48

$his is font sie K1

$his is font sie K&

$his is font sie K

$his is font sie K6

$his is font sie K7

$his is font sie K8

$his is font sie K$his is font sie 1

$his is font sie &

$his is font sie

$his is font sie 6

$his is font sie 7

$his is font sie 8

$his is font sie 8

It is possible that several of the above examples look identical. $his is because some

browsers will limit -ust how large or small font can be displayed. $here is really nopoint in creating text that is unreadable, which can happen if it is too big or too tiny.

!nother way to format text is by using color. Color can be specified by using names,such as red, blue, or 9orestreen. $hey can also be defined using their () ;Red, Green,

Blue< values. $he most common way for colors to be specified on the 3eb is bytheir hexadecimal values. Examples of each method are below.

-font color/)red)>This is red specified as a color name-.font>


12/48

Bfont colorJ5&77,N,N5$his is red specified as an () value.BAfont

Bfont colorJ5ffNNNN5$his is red specified in hexadecimal.BAfont

-olor and the Web

Color plays an important part of 3eb page design. It can be used for decorativepurposes, such as to make something look stylish or flashy, or it can be used to indicate

an action or function. 9or instance, the links on these pages are blue, and that makes

them easier to identify.

Color can be applied to text, backgrounds, and certain kinds of borders. It is importantto understand both the benefits and pitfalls that color can present. 3hile a 3eb page

with a black background and grey letters may look sophisticated, it will be difficult to

read.

$he attribute value type 5color5 ;OColorP< refers to color definitions as specified

inQ"()R. ! color value may either be a hexadecimal number ;prefixed by a hash

mark< or one of the following sixteen color names. $he color names are case%insensitive.-olor names and S1B 0al$es

0lac" / )1222222) 3reen / )1224222)

5ilver / )1626262) ,ime / )122FF22)

3ray / )1424242) Olive / )1424222)

&hite / )1FFFFFF) 7ellow / )1FFFF22)

+aroon / )1422222) Navy / )1222242)#ed / )1FF2222) 0lue / )12222FF)

8urple / )1422242) Teal / )1224242)

Fuchsia / )1FF22FF) 9qua / )122FFFF)

$hus, the color values 5S?NNN?N5 and 5#urple5 both refer to the color purple.

Headings

eadings one of the ob-ects on a 3eb page that $+/ and 0$+/ are intended to

identify. eadings tags that are used to specify importance and are defined by using

the 5h5 tag. $here are six heading tags ranging from 1 to 8 with 1 being the mostimportant and 8 being the least important.

Imagine that you are making a traditional outline for a paper or article you are writing.It might look something like this:

I Introduction
http://www.w3.org/TR/html4/sgml/loosedtd.html#Colorhttp://www.w3.org/TR/html4/references.html#ref-SRGBhttp://www.w3.org/TR/html4/references.html#ref-SRGBhttp://www.w3.org/TR/html4/types.html#case-insensitivehttp://www.w3.org/TR/html4/references.html#ref-SRGBhttp://www.w3.org/TR/html4/types.html#case-insensitivehttp://www.w3.org/TR/html4/sgml/loosedtd.html#Color


13/48

9 &elcome

II +ain +essage

9 8art &hat I did on my summer vacation

3etting to the airport

; Flying on the airplane

a


14/48

3hen the h1 tag is used in a 3eb page, thecode will resemble the example on the right.

It a simple 3eb page the h1 tag

would resemble the illustration on the

right.

BhtmlBheadBtitle+y 3eb #ageBAtitle

BAheadBbody

Bh1$his is an example of theh1 tag.BAh1BAbody

BAhtml


15/48

Lists

/ists are also ob-ects that $+/ and 0$+/ are intended to define. $he code allows

you to specify two types of lists, ordered lists and unordered lists. $he primary

difference between the types is that the ordered lists indicate importance and unordered

lists only indicate that the data is a list, no importance is intended.

$he list tags are container tags, but they each have two parts. #art one indicates whether

the list is ordered or unordered. #art two is the item in the list itself. )elow is an

example of an ordered list.

1. *inner at ?:NN pm.&. /unch at noon.

. "nacks at 11:NN am.

$his list indicates that the most important item is dinner at ?:NN pm, the second most

important is lunch at noon, and the least important item is snacks at 11:NN am. $hecode snippet for this list is shown below.

-ol>-li>inner at 4:22 pm-.li>-li>,unch at noon-.li>-li>5nac"s at :22 am-.li>-.ol>

=otice that each item is inside the list item tag, BliBAli and that the whole set oflist items is within the ordered list tag BolBAol.

!n example of an ordered list is below.

!pples

'ranges grapes

$his unordered list does not indicate which fruit is most important. $he code snippedfor this list shown below.

-ul>

-li>9pples-.li>-li>Oranges-.li>-li>grapes-.li>-.ul>

$he unordered list tag is BulBAul, and as with the ordered list, each item is withinthe list item tag, BliBAli.


16/48


17/48

(elative links leave out all the 5http stuff.5 $hey say that instead of going to the 3orld

3ide 3eb the browser should -ust stay 5in the neighborhood5 and get a page. ! good

example is a link to the previous page of this tutorial. $his is page 7, and lets say thatyou want to create a link to page for. It would be:

-a href/)page?html)>8revious 8age-.a>

$his relative link tells the browser to go to 5page6.html5 without going 5out5 to the3eb and coming back into the 4niversitys 3eb site.

>ou can also link internally to a 3eb page by using the anchor tag. $he anchor tagallows you to -ump to a point on a page. 3e have an anchor called 5top5 installed on

this page. $he code for the anchor point is:

-a name/)top)>-.a>

$he link to it is:

-a href/)1top)>3o to the top of this page-.a>

$he example on the r ight shows how this

might be coded into a 3eb page.

Note: 9n anchor tag always has a)1) at the $eginning

BhtmlBhead


BbodyBa nameJ5top5BAa

Bp3elcome to my 3eb page.>ou can go to the top of thepage by Ba hrefJ5Stop5byclicking hereBAaBApBAbody

BAhtml

>ou can add include an anchor point in an absolute or relative link. $he relative linkto this pages top anchor point is:

-a href/)page@html1top)>Top of 8age @-.a>


18/48

Lao$t and Tables

$he layout of a 3eb page is important. #lacing components, such as text, images, and

headings is critical to not only the appearance of a page, but also how well the visitor

understands the information presented. ! poor layout will look bad, and it will also

make the information on the page hard to find and understand.

3eb pages 5want5 to be displayed with all components aligned vertically on the leftside of the page. Center and align right attributes can be applied to many ob-ects.but

even these alignments do not allow for careful and specific placement of page

components.

$he illustration on the right shows a 3eb page withno formatting of any kind.

4sing attributes to align ob-ect left, center, or rightcan help establish the position of ob-ects on a 3eb

page. !n example is on the right. 3e will be learning

about position attributes and the center tag in detail

later in this tutorial.

$ables are the solution to the problems that caused by

the default left alignment of standard $+/ and

0$+/ code. 'riginally intended to present data in5tabular5 form, that is columns and rows, tables

Huickly became the 3eb page designers 5best friend5

by allowing accurate placement ob-ects on a page.


19/48

'n the right is an example of a3eb page that uses a table tocontrol placement of ob-ects. $hetable is invisible.

'n the right is the same page, but thistime the tableTs borders are shown. $he

tables borders are easily seen and you

will be able to observe how it is usedto position ob-ects on the page.

$he table tag is a container tag with

three main parts. $ables consist of rowsand cells, and there are tags for each.

$ables must have all the tags written in

the proper order for them to work. $hetags are:

$he table tag BtableBAtable $he table row tag BtrBAtr

$he table cell tag BtdBAtd

)elow is an example of a simple table.

$his table has three rows and three columns. $o begin building the table we will

start with the opening and closing table tags.

-ta$le>-.ta$le>

$o make it easier to add the rest of the tags we will put the opening and closing tabletags on two lines.

-ta$le>-.ta$le>


20/48

=ow we add the first table row tags.

-ta$le>-tr>-.tr>-.ta$le>

$he row is not complete until the three table cells are added.

-ta$le>-tr>-td>-.td-td>-.td>-td>-.td>-.tr>-.ta$le>

=ow the table is built like this:

If you are using =otepad, it is a simple 5cut and paste -ob5 to install the other two rows.

-ta$le>-tr>-td>-.td-td>-.td>-td>-.td>-.tr>-tr>-td>-.td-td>-.td>-td>-.td>-.tr>-tr>-td>-.td-td>-.td>-td>-.td>-.tr>-.ta$le>

=ow the table has this structure:

3here is the tableG $he table is really there. )ut we did not apply any attributes to

the table, so although it exists, it is invisible. $o make the table appear an the screen,we must define how it will look. $he first step will be to add borders. $ype in

borderJ515 into the opening table tag as shown below. $his creates table borders 1

pixel thick.

-ta$le $order/))>-tr>-td>-.td-td>-.td>-td>-.td>-.tr>

-tr>-td>-.td-td>-.td>-td>-.td>-.tr>-tr>-td>-.td-td>-.td>-td>-.td>-.tr>-.ta$le>

$he table is now visible. )ut it looks very small because we have not applied anysie attributes.

In addition, there is a curious feature of $+/ and 0$+/ that will cause the tableto look odd. 4nless there is an ob-ect of some kind in a table cell, most browsers will


21/48

not


22/48

display the cell or the border around it. $his can cause some peculiar effects. "omebrowsers will not show the cell, others will. In the table below there is an ob-ect in allcells except the center one. *epending on the browser you are using, you may or maynot see the center cell correctly.

$ext 'b-ect

$ext 'b-ect

='$E: *o you see a center cell, or do you see a 5pillowlike5 effectG $ry viewing this

page with another browser. 3hat do you see thenG

'b-ects in cell can be text, images, or even other tables. $hese are called 5nested tables.5

'b-ects can also be special pieces of code. $he most commonly used one for this

purpose is the 5nonbreaking space.5

$he nonbreaking space is a true ob-ect that is invisible. It is used to create additional

spacing in lines of text and as invisible ob-ects in table cells so that the cells are visible

in all browsers. $he nonbreaking space is installed by typing a simple !"CII code intothe table cell.

=ote: !"CII codes are numerical representations of characters that are found on a

keyboard and other characters for which there are no keys. In computers and the 3ebthey are used to cause a character to display on the screen when either there is no key

or it is not desirable to use the actual keystroke character. "ometimes !"CII codes are

usedto hide email addresses from 3eb robots that collect the addresses for spamming. *etails

and a list of !"CII codes can be found at ww w . a s c iit a b le.c o m.

$he !"CII code for a non breaking space is An$spB )y placing a nonbreaking spacein the center table cell, it will appear correctly on the 3eb page as shown below.

$ext 'b-ect

$ext 'b-ect

!s with the previous example, this will depend on your browser. In some instances

you may not see any change at all because the cell was always properly displayed.

4sing
http://www.asciitable.com/http://www.asciitable.com/


23/48

ob-ects such as the nonbreaking space assures that you tables will always appear onthe page as you intend.

3e can add nonbreaking spaces to the table on which we have been working so that

the code looks like this:

-ta$le $order/))>-tr>-td>An$spB-.td-td>An$spB-.td>-td>An$spB-.td>-.tr>-tr>-td>An$spB-.td-td>An$spB-.td>-td>An$spB-.td>-.tr>-tr>-td>An$spB-.td-td>An$spB-.td>-td>An$spB-.td>-.tr>-.ta$le>

$o cause the table to be displayed larger we will give it a width attribute of NN

pixels. $he example below shows how to do this.

-ta$le width/)=22)$order/))>

-tr>-td>An$sp-.td-td>An$sp-.td>-td>An$sp-.td>-.tr>-tr>-td>An$sp-.td-td>An$sp-.td>-td>An$sp-.td>-.tr>-tr>-td>An$sp-.td-td>An$sp-.td>-td>An$sp-.td>-.tr>-.ta$le>

$he 5NN5 refers to the width of the table in pixels. 4nless specified otherwise,

the default measurements are always in pixels.

%d0anced Table .ormatting

>ou are not limited to formatting a table by specifying only its sie and borders.

$here are many options that you can use to make a table appear the way you want itto.

Cell padding and cell spacing are important attributes that can be assigned to a table.Cell padding is the space between an ob-ect in a table cell and the sides of the table cell.

)elow are two examples that demonstrate what this means.

$here is a table with no cell padding

$here is a table with a cell

padding attribute of 1Npixels.

=otice that in the second example there is more space around the text. It is easier read

and has a more pleasing appearance. $he padding attribute is placed in the openingtable tag. $he code for the table is:


24/48

-ta$le width/);4?) $order/)) cellspacing/)2) cellpadding/)2)>-tr>-td align/)center)>There is a ta$le with a cell padding attri$ute of2 piels-.td>-.tr>

-.ta$le>

Cell spacing refers to the space between cells. ere is an example of a table without

cell spacing:

=ow here is the same table with 1N pixels of cell spacing.

3hile this looks like the borders have increased in sie, in actuality they have not. $o

see what thicker borders look like in a table without cell spacing, examine the samplebelow:

$o make the difference between cell spacing and borders as clear as possible, here isthe same table with 1N pixels cell spacing and 7 pixels for the table borders.

4sing different combinations of cell padding, cell spacing, and borders allows you to

control the appearance of your tables so that they can be as useful as possible. ere is

a table that combines all three attributes:

Cell #adding ?

pixels$able borders are

6 pixels

Cell spacing is $he table is NN


25/48

1N pixels pixels wide

$he code for this table is:

-ta$le width/)=22) $order/)?) cellspacing/)2) cellpadding/)4)>-tr>-td>6ell 8adding 4 piels-.td>-td>Ta$le $orders are ? piels-.td>-.tr>-tr>-td>6ell spacing is 2 piels-.td>-td>The ta$le is =22 piels wide-.td>-.tr>-.ta$le>

=ote: $he d effect of standard table borders is an old fashioned style.

+any 3eb page builders today want to use table borders, but not theoldfashioned 5picture frame5s that we see above. It is possible to create

borders in several styles using Cascading "tyle "heets. )ut, the use of

C"" is beyond the scope of this tutorial.

=ote: C"" tutorial I will provide you later.

Color is added to tables in three different ways:

1. $able background color

&. Cell background color. )order color

)elow is a table with the background color of SUUNN. It has standard 1 pixel borders.

$he code for the table is:

-ta$le width/)=22) $order/)) cellpadding/)2)

cellspacing/)2) $gcolor/)1CC==22)>-tr>-td>An$spB-.td>-td>An$spB-.td>-.tr>-tr>


26/48

-td>An$spB-.td>BtdVnbspPBAtd

BAtrBAtable

)ecause the table background color is an attribute that affects the entire table, the coloris specified within the opening part of the table tag.

ere is a table in which one cell has the background color of SUU88:

$he code for that table is:

-ta$le width/)=22) $order/)) cellpadding/)2) cellspacing/)2)>

-tr>-td $gcolor/)1CC==DD)>An$spB-.td>-td>An$spB-.td>-.tr>-tr>-td>An$spB-.td>-td>An$spB-.td>-.tr>-.ta$le>

=otice that the background color for the table is in the opening part of the table cell

tag. 3e can create a table that has a background color and a cell that has a differentbackground color, such as:

Examine the code for this table closely:

ta$le width/)=22) $order/)) cellpadding/)2)cellspacing/)2) $gcolor/)1CC==22)>-tr>

-td $gcolor/)1CC==DD)>An$spB-.td>-td>An$spB-.td>-.tr>-tr>-td>An$spB-.td>-td>An$spB-.td>-.tr>-.ta$le>


27/48

>ou will see that the background color is applied to the entire table, but the

background color is specified for only one cell. $his is a very important concept that

can be further illustrated with the table below.

$he code for this table is:

-ta$le width/)=22) $order/)) cellpadding/)2)cellspacing/)2) $gcolor/)1CC==22)>-tr>-td $gcolor/)1CC==DD)>An$spB-.td>-td>An$spB-.td>-.tr>-tr>

-td $gcolor/)1FF66==)>An$spB-.td>-td $gcolor/)12222FF)>An$spB-.td>-.tr>-.ta$le>

$hree of the cells have colors specified, one cell does not. $he cell without a color

allows the table background color to show through. $he background cell colors, on the

other hand, have priority over the table background color. $hus, even though the tablebackground color is specified, the cell background colors are displayedF $he example

below illustrates this a bit better.

Cell )ackgroundColor

$able )ackgroundColor

Cell )ackgroundColor

Cell )ackground Color

)ackground images follow the same priority rules as color. )oth tables and tablecells can have background images.


28/48

eres a table with a clock photograph for a background:

=otice that the image repeats. $his repetition is called 5t iling5 because the placement

of the image is similar to how tiles are laid.

)elow is a similar table with two rows and two columns.

=ow one of the cells has a toy duck in the background. It also tiles, but only insidethe cell. $he code for this table is:

-ta$le width/);D) $order/)2) cellpadding/)2)cellspacing/)2) $ac"ground/)images.cloc"D2Gpg)>-tr>-td width/)) $ac"ground/)images.duc"smallGpg)>An$spB-.td>-td width/)CD)> -.td>-.tr>-tr>-td>An$spB-.td>-td>An$spB-.td>-.tr>-.ta$le>

$he backgrounds in both the table and the table cell are added as attributes.

$he last point about tables that must be touched on here is that there are fouralignment attributes for tables. $hey are default, left, center, and right. $he default

causes the table to be aligned to the left side of the page unless the visitors browser

causes it the table to be aligned otherwise. /eft alignment mandates the table appearon to the left side of the page. Center specifies centering. (ight causes the table to be

aligned to the right side of the page. $hese attributes are placed in the opening part of

the table tag. $he syntax is:

-ta$le align/)left)>-ta$le align/)center)>-ta$le align/)right)>


29/48

*efault alignment does not reHuire an attribute.

Images

Images are important parts of 3eb pages. $+/ and 0$+/ allows you to place

images in a 3eb page and assign attributes to control sie and placement. In thisnext section you will learn about image and image coding.

$he image source tag is a singlepart tag. It is:

-img src/)nameofyouimagegif) .>

eres an example of simple image placement:

$he code for the image is:

-img src/)images.dogonhatGpg) alt/)) width/);2@) height/)2) .>

$he information in the code tells us that the image name is 5dogonhat.-pg5 and that itis located in the images folder of the 3eb site. $he code also specifies that the sie of

the image is &N7 pixels wide and 1N pixels high.

NOTE: There are three image file types that can $e used on the &e$They are !83 %!oint 8hotographers Eperiment 3roupH 3IF %3raphicsInterchange FormatH and 8N3 %8orta$le Networ"s 3raphicsH For moreinformation a$out these three types of file formats visit 9ppendi atthe end of this document

Image dimensions are specified as attributes. "pecifying dimensions assures that thebrowser will display the image as you wish. In addition, you can use the dimension

attributes to manipulate an image to your advantage. 9or instance, below is a verysmall image displayed in its 5natural5 sie, & pixels wide by & pixels high:


30/48


31/48

ere is the same

photograph with the

dimension attributesset to 6NN pixels wide

by &8 pixels high.

=ote that the image ishighly pixilated.

Images can have the alignment attributes of left and right. $he syntax for thealignment is:

-img src/)yourimagegif) alt/) align/)left) .>-img src/)yourimagegif) alt/) align/)right) .>

!lt tags are special attributes that are applied to images to explain what the image is and

what it is about. Individuals who are visually impaired often rely upon a screenreading

3eb browser to 5read5 the text of a 3eb page to them out loud. !n images alt tag willbe read by the browser. $his makes in imperative that alt tags were wellformed.

+any search engines also use alt tags as an component in their algorithms that

calculate result placement. !s with screen reading browsers, search engines rely on

properly written alt tags. )elow is an image that has an alt tag applied to it .

$he alt tag for this image is 5reen 1U6N 9ord *eluxe hot rod automobile5 and itthe entire image tag is:


32/48

-img src/)images.green?2Gpg) alt/)3reen C?2 Ford elue hotrod automo$ile) width/)=22) height/);D) .>

P$tting It %ll Together

In this section of the tutorial you will assemble a simple 3eb page. !mong the tasksyou will perform will be placing an image, placing and formatting text, creating a table,

and assigning attributes to various ob-ects.

$he illustration on theright shows what the pageshould look like when

completed.

$hinking back to the beginning of this tutorial, you will remember that you should

create a root folder for your pro-ect. *o that now.

"tart =ote#ad, if you have not already started it, and create a new file. =ame it5index.htm5 and save it in the root folder.

=ow type in the opening and closing $+/ tags. $hey are shown below.

-html>-.html>

!n important component of the opening $+/ tag is the doctype ;document type-html>-.html>


33/48

'ne last technical detail will help make sure your 3eb page is rendered properly by thebrowsers. !ll you have to do is add an attribute to the opening $+/ tag that refers to5name space.5

-JO6T78E html >-html mlns/) h ttp :.. w w w w =or g. C C C. h t m l)>-.html>

=ow all the preparations are completed and you can start 3eb page building.

!dd your opening and closing head tags. $he new code should look like:

-JO6T78E html 8K0,I6 )..&=6..T L*T+, 2 Transitional..EN)) h ttp :.. w w w w = o r g . T #. h t m l . T . h t m l transitionaldtd)>-html mlns/) h ttp :.. w w w w =or g. C C C. h t m l)>-head>-.head>-.html>

=ow add the opening and closing body tags:

-JO6T78E html 8K0,I6 )..&=6..T L*T+, 2 Transitional..EN)) h ttp :.. w w w w = o r g . T #. h t m l . T . h t m l transitionaldtd)>-html mlns/) h ttp :.. w w w w =or g. C C C. h t m l)>-head>-.head>-$ody>-.$ody>-.html>

If this begins to look confusing, add some spaces between the opening and closing tagsof the head and body. $his will help clarify where you will be adding code.
http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtml


34/48

-JO6T78E html 8K0,I6 )..&=6..T L*T+, 2Transitional..EN) ) h t tp :..w w w w =or g.T #. h t m l . T . h t m l transitionaldtd)>-html mlns/) h ttp :.. w w w w =or g. C C C. h t m l)>-head>

-.head>-$ody>

-.$ody>-.html>

"ave your new 3eb page. >ou could view the page in your browser at this point,however because you have not added any viewable data, the page will appear blank. $o

test this, start your browser, click 9ile, and then select 'pen 9ile or 'pen, depending on

which browser you use. =avigate to your new 3eb page, then click 'D or 'pen. !

blank 3eb page will appear on your screen.

%dding %n Image

$he next thing that you will do is to add a header image to your page. >ou must first

download and save the image into your images folder. o to (ight click on the image in

your browser, then click "ave Image or "ave #icture !s ;again, depending on yourbrowser< to save the image in the images folder in your pro-ects root folder.

>ou will want the header image to appear in the center of your 3eb page. !dd thecenter tag as shown below:

-JO6T78E html 8K0,I6 )..&=6..T L*T+, 2 Transitional..EN)) h ttp :.. w w w w = o r g . T #. h t m l . T . h t m l transitionaldtd)>-html mlns/) h ttp :.. w w w w =or g. C C C. h t m l)>-head>

-.head>-$ody>-center>-.center>

-.$ody>

-.html>

=ow add the img src ;image source< tag that will place the header image into your

page. )ecause you have saved that image into your images folder, the code will look

like this:
http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtml


35/48

-JO6T78E html 8K0,I6 )..&=6..T L*T+, 2 Transitional..EN)) h ttp :.. w w w w = o r g . T #. h t m l . T . h t m l transitionaldtd)>-html mlns/) h ttp :.. w w w w = o r g . C C C . h t m l)>-head>

-.head>-$ody>-center>-img src/)images.garageheaderGpg) .>-.center>

-.$ody>-.html>

$he image is ?NN pixels wide and &N? pixels high. !dd the dimensions attributes tothe img src tag. *ont forget to add an alt tag, too. ! suggestion is 5"ammys

arage.5$he code will now look like this:


-.head>-$ody>-center>-img src/)images.garageheaderGpg) alt/)5ammy's3arage) width/)422) height/);24) .>-.center>

-.$ody>-.html>

%dding % Simple Table

=ow you will add a simple table without borders and limited attributes. $his table will

be used to accurately place the hours of operation for "ammys arage on the 3eb page.

>ou will also apply some text formatting.

!dd the table tag, table row tag, and table cell tag to your 3eb page as shown here:
http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtml


36/48

-JO6T78E html 8K0,I6 )..&=6..T L*T+, 2Transitional..EN) ) h t tp :..w w w w =or g.T #. h t m l . T . h t m l transitionaldtd)>-html mlns/) h ttp :.. w w w w =or g. C C C. h t m l)>-head>

-.head>-$ody>-center>-img src/)images.garageheaderGpg) alt/)5ammy's3arage) width/)422) height/);24) .>-.center>-ta$le>-tr>-td>-.td>-.tr>-.ta$le>

-.$ody>-.html>

!dd the text to the table cell that tells about "ammys hours of operation.


-.head>-$ody>-center>-img src/)images.garageheaderGpg) alt/)5ammy's3arage) width/)422) height/);24) .>-.center>-ta$le>-tr>-td>*ours: +onday through Friday 4:22 am to D:22 pm-$r .>5aturday 4:22 am to ;:22 noon -.td>-.tr>-.ta$le>

-.$ody>-.html>

>ou can save your page now and view it with your browser. >ou will notice that the

text and table are on the left side of the screen and does not have a particularly pleasing

appearance. $he next step is to add some attributes to the opening table tag so that it iscentered. $hen set the table to be ?NN pixels wide and add 8 pixels of cell padding. $he

borders should be set to N pixels as should the cell spacing. $he code should look like

this:
http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtml


37/48


-.head>-$ody>-center>-img src/)images.garageheaderGpg) alt/)5ammy's3arage) width/)422) height/);24) .>-.center>-ta$le width/)422) $order/)2) align/)center) cellpadding/)D)cellspacing/)2)>-tr>-td>*ours: +onday through Friday 4:22 am to D:22 pm-$r .>5aturday 4:22 am to ;:22 noon -.td>-.tr>-.ta$le>

-.$ody>-.html>

>ou can save and view your page to see how adding these attributes have change

the appearance of the table and text.

>ou have not formatted the text yet. $hat will be your next step. !dd the opening and

closing font tags 5around5 the text with the attribute to cause the text to be displayed

in !rial. !dd the line break tag, Bbr A so that the line ends after 58:NN pm5 $he codewill look like this:


-.head>-$ody>-center>-img src/)images.garageheaderGpg) alt/)5ammy's3arage) width/)422) height/);24) .>-.center>-ta$le width/)422) $order/)2) align/)center)cellpadding/)D) cellspacing/)2)>-tr>-td>-font face/)9rial>*ours:+onday through Friday 4:22 am to D:22pm-$r .>5aturday 4:22 am to ;:22 noon-.font>-.td>-.tr>-.ta$le>
http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtml


38/48

-.$ody>-.html>

!dd the strong tag around the word 5ours.5


-.head>-$ody>-center>-img src/)images.garageheaderGpg) alt/)5ammy's3arage) width/)422) height/);24) .>-.center>-ta$le width/)422) $order/)2) align/)center)cellpadding/)D) cellspacing/)2)>

-tr>-td>-font face/)9rial>-strong>*ours:-.strong>+onday through Friday4:22 am to D:22 pm-$r .>5aturday 4:22 am to ;:22 noon-.font>-.td>-.tr>-.ta$le>

-.$ody>-.html>
http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtml


39/48

If you save and view your page now you will discover that the text is off to the left.

!dd the align center attribute to the table cell to cause the text to appear in the center.

$he code so far is:

-JO6T78E html 8K0,I6 )..&=6..T L*T+, 2 Transitional..EN)

) h ttp :.. w w w w = o r g . T #. h t m l . T . h t m l transitionaldtd)>-html mlns/) h ttp :.. w w w w =or g. C C C. h t m l)>-head>

-.head>-$ody>-center>-img src/)images.garageheaderGpg) alt/)5ammy's3arage) width/)422) height/);24) .>-.center>-ta$le width/)422) $order/)2) align/)center) cellpadding/)D)cellspacing/)2)>-tr>

-td align/)center)>-fontface/)9rial>-strong>*ours:-.strong>+onday through Friday 4:22 amto D:22 pm-$r .>5aturday 4:22 am to ;:22 noon-.font>-.td>-.tr>-.ta$le>

-.$ody>-.html>

Main Bod In+ormation

In this series of steps you will add the main table for the page that has the

important information about "ammys arage. $he table will have these attributes:

?NN pixels wide 1 pixel border

1N pixel cell padding N pixel cell spacing

white background color centered on the page

$he table cell align attributes should be 5left5 and 5top5

"ee if you can add the necessary code to makethat table appear on your page. If you are not sure

what the code should be, check the box onthe right.

Btable widthJ5?NN5 borderJ515

alignJ5center5cellpaddingJ51N5

cellspacingJ5N5

bgcolorJ5S9999995Btr

Btd alignJ5left5valignJ5top5BAtdBAtr

BAtable
http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtml


40/48


41/48

=ow you can add the text to the table and format it for appearance, with a list,h1 heading, and links. $he illustration below shows how the text should look.

o ahead and try it. If you are not satisfied with the results you can check the code in!ppendix &.

.inishing To$ches

$here is very little left to do to complete the pro-ect. ! simple paragraph at the bottomof the page with the address of "ammys arage will finish it. )e sure to center the

paragrah, apply the strong tag to the text, and make the font !rial. $he code is:

-p align/)center)>-strong>-font face/)9rial>5ammy's 3arageAampB #estoration 5hop-$r .>;=? 9irport 9venue-$r .>,os 9ngeles 69 [email protected]>-.strong>-.p>

!ll 3eb pages should have a title. $his title displays on the top bar of the browser

and may appear in the bookmarks, depending on the browser. It is also used bysearch engines. !dd a title tag to the head part of the 3eb page. $he code is:

-title>5ammys 3arage emo page for I+6 *T+,.L*T+,Tutorial-.title>

$o see the code for the entire page visit !ppendix

. "ave and view your page in your browser.

$hats itF ow does your page lookG


42/48


43/48

9ppendi +mage i!eormats

$here are three types of image files formats that are used on the 3eb. $hey are J#;oint #hotographers Experimental roup


44/48

$he same image is

displayed on the right.)ut, in this example it

has been highlycompressed. >ou willnotice small 5artifacts5

that some times appear

as dots or ghosting.+ore compression

results is smaller file

sies and Huickerdownloads. It is

necessary to select a

compression level that

balances Huality withfile sie and download times.

$he I9 image format isdesigned for images thathave solid colors, such asdrawings and logos. It islimited to no more than &78colors, although mostsoftware allows the user toselect less colors for smallfile sies and Huickerdownloads.

$he I9 format does not handle photographs well because of the limited number of

colors. owever, it does handle solid colors extremely well. $he image on the right isa I9. =otice that the there are no artifacts of pixilation in the solid colors.


45/48

$he photograph on the righthas been saved as a I9. =otice

that there is a banding effectin the sky. )ecause I9images

are limited to no more that &78colors, many of the colors in a

typical sky photo will not beviewable. $hose colors will be

substituted by the closesavailable I9 color. $heresult

will often be banding,stripes, or occasionally a5moire5 or

5wateredsilk5 effect.

$he #= format was originally

intended to replace the I9format. owever, that did not

come to pass. #= images

handle solid colors as well as

I9s do, and they also managethe photographic color well.

=otice that in the photographon the right that the colors are

accurate and the sky does notdisplay any of the bandingeffect that appears in the I9example above.


46/48

9ppendi ;

Bh1 alignJ5center53elcome to "ammys arage ome #ageBAh1

BpBstrongBfont colorJ5SUUNNNN5 sieJ565"ammys arage VampP (estoration

"hopBAfontBAstrong has been in business since 1U7. 3e started in a small building-ust off of /a Cienega )oulevard with only one bay and lift. $oday we occupy a

7,NNN sHuare foot building that is centrally located near the "anta +onica !irport. =o

matter what your automotive needs are, we do it allFBApBul

Bli9ull automobile restorationBAliBli"tandard vehicle serviceBAli

Bli"howHuality detailingBAliBli!ccident repairBAli

BAulBp!lthough we service nearly all makes and models, our restoration shop specialies in

!merican Iron. Included are modern manufacturers, such as BahrefJ 5 h tt p:A A ww w . f o r d . c o m59ordBAa, Ba hrefJ5 h tt p: AAwww .g m . c o m5eneral

+otorsBAa, and Ba hrefJ5 h tt p:AAwww . c h r y s ler . com5ChryslerBAa. /onggone marHuessuch as !merican +otors, 3illys, udson, and "tudebaker also find careful attention

here at "ammys.BApBpBem>ou are invited to inspect our shop anytime during normal business

hours.BAemBAp
http://www.ford.com/http://www.gm.com/http://www.gm.com/http://www.chrysler.com/http://www.ford.com/http://www.gm.com/http://www.chrysler.com/


47/48

9ppendi =

BF*'C$>#E html #4)/IC 5AA3CAA*$* 0$+/ 1.N $ransitionalAAE=55 h tt p:A A ww w . w .o r g A$ ( Ax h t ml 1A* $ * A x h t ml 1transitional.dtd5Bhtml xmlnsJ 5 h tt p:A A ww w . w .o r gA1UU U Ax h t ml5

BheadBtitle"ammys arage *emo page for I+C $+/A0$+/ $utorialBAtitleBAhead

BbodyBcenterBimg srcJ5imagesAgarageheader.-pg5 altJ5"ammys arage5 widthJ5?NN5

heightJ5&N?5 ABAcenterBtable widthJ5?NN5 borderJ5N5 alignJ5center5 cellpaddingJ585 cellspacingJ5N5

BtrBtd alignJ5center5Bfont faceJ5!rial5Bstrongours:BAstrong +onday through

9riday ?:NN am to 8:NN pmBbr A"aturday ?:NN am to 1&:NN noonBAfontBAtd

BAtrBAtable

Btable widthJ5?NN5 borderJ515 alignJ5center5 cellpaddingJ51N5cellspacingJ5N5 bgcolorJ5S9999995

BtrBtd alignJ5left5 valignJ5top5Bh1 alignJ5center53elcome to "ammys arage ome

#ageBAh1BpBstrongBfont colorJ5SUUNNNN5 sieJ565"ammys arage VampP (estoration

"hopBAfontBAstrong has been in business since 1U7. 3e started in a small building-ust off of /a Cienega )oulevard with only one bay and lift. $oday we occupy a7,NNN sHuare foot building that is centrally located near the "anta +onica !irport. =o

matter what your automotive needs are, we do it allFBApBulBli9ull automobile restorationBAli

Bli"tandard vehicle serviceBAliBli"howHuality detailingBAli

Bli!ccident repairBAliBAul

Bp!lthough we service nearly all makes and models, our restoration shop specialiesin !merican Iron. Included are modern manufacturers, such as BahrefJ 5 h tt p:A A ww w . f o r d . c o m59ordBAa, Ba hrefJ5 h tt p: AAwww .g m . c o m5eneral+otorsBAa, and Ba hrefJ5 h tt p:AAwww . c h r y s ler . com5ChryslerBAa. /onggone marHues

such as !merican +otors, 3illys, udson, and "tudebaker also find careful attentionhere at "ammys.BAp

BpBem>ou are invited to inspect our shop anytime during normalbusiness hours.BAemBApBAtdBAtrBAtable

Bp alignJ5center5BstrongBfont faceJ5!rial, elvetica, sansserif5"ammys arageVampP (estoration "hopBbr A
http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.ford.com/http://www.gm.com/http://www.gm.com/http://www.chrysler.com/http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/TR/xhtml1/DTD/xhtml1http://www.w3.org/1999/xhtmlhttp://www.ford.com/http://www.gm.com/http://www.chrysler.com/


48/48

1&6 !irport !venueBbr A/os !ngeles, C! UN6N7BAfontBAstrongBAp

BAbodyBAhtml

Documents

HTML complete study package