HTML II

I. Review
a. File Management b. Editors c. Creating a Page d. Adding Elements e. Posting to the Web

II. Introduction to CSS

a. What is CSS The Internet, HTML and their accompan ing components !ere originall designed "or scienti"ic p#rposes and the comm#nication o" data. The !ere not created as design elements and !ere not intended to e$tend into the %ast in"ormational s stem the ha%e become. As a res#lt, in the da s be"ore CSS, designers !ho !ished to add design elements to a Web page had to #se basic data components to create design as !ell as displa content. Most Web pages, incl#ding man still in #se toda , contained tables, images and characters #sed not as data b#t as "ormatting elements, added to a page solel "or the p#rpose o" ma&ing it loo& 'good(. While the designers are to be commended on their creati%it in #sing data elements to create some ama)ing designs the pages o"ten ha%e some real problems in toda (s Web econom . Accessibilit is a h#ge iss#e and man o" these pages ma&e little to no sense to someone tr ing to access them !ith a screen reader or mobile de%ice. Large sites designed this !a are o"ten #n!ield to manage and #pdate.

The sol#tion to these iss#es !as the inno%ation o" CSS. CSS allo!s the data and design to be completel separate. This separation can impro%e content accessibilit , pro%ide more "le$ibilit and control in the speci"ication o" presentation characteristics, and red#ce comple$it and repetition in the str#ct#ral content. CSS can also allo! the same mar&#p page to be presented in di""erent st les "or di""erent rendering methods, s#ch as on+screen, in print, b %oice, etc.

CSS can be #sed to create "ormatting in t!o !a s, Internal and E$ternal. Internal CSS is located in the HTML code o" an indi%id#al doc#ment. It is #sed solel b the doc#ment !ithin !hich it is located. E$ternal CSS in%ol%es ha%ing a doc#ment that contains onl CSS ,#les. Web pages that need the r#les can then be lin&ed to the CSS doc#ment. - lin&ing to the CSS doc#ment changes or #pdates to the "ormat can be completed on m#ltiple Web pages b ma&ing changes in the single CSS "ile.

*. .pen a Web bro!ser s#ch as Fire"o$, Sa"ari or Internet E$plorer.

/. 0o to !!!.css)engarden.com

1. Loo& thro#gh the %ario#s designs all created #sing CSS b#t #sing the same HTML.

III.

Obtain Course Files

a. .pen a Web bro!ser and na%igate to

http233!!!.s"s#.ed#34doit3train.htm b. Clic& the lin& 'co#rse sample "iles(. c. 5a%igate to the HTML / Co#rse Title and clic& the appropriate lin& to do!nload the "iles. d. 6o#ble clic& the do!nloaded "ile to a#tomaticall e$tract the co#rse "iles to a "older. The "older !ill be named HTML7II and !ill contain a second "older called sha&espeare.
/

IV.

Creating CSS Ready HTML

a. ,e%ie! the HTML
*. 8sing o#r Web bro!ser, go to2

http233#ser!!!.s"s#.ed#34training3sha&espeare3sonnets.h tml.This site consists o" t!o pages that incl#de some o" Sha&espeare(s !or&. -ro!se aro#nd and see !hat is there9 /. From the sha&espeare "older o# do!nloaded open the "ile sonnets.ht l in o#r Web bro!ser. 5otice ho! this is a basic page containing all o" the elements o" the page o# !ere %ie!ing online b#t none o" the "ormatting. This basic page contains elements disc#ssed in the HTML * co#rse2 title, image, lin&, paragraphs and headings. 1. Close o#r bro!ser and open the sonnets.ht l "ile #sing a te$t editor :Windo!s2 5otepad, Mac2 Te$tEdit;. b. What is a 6i%< A 6i% tag de"ines a di%ision or section on a Web page. It can be #sed to create gro#ps o" elements that, once gro#ped, can be "ormatted together. The 6i% tags themsel%es !ill not be %isible !hen %ie!ing the page in a bro!ser.

6i% tags ha%e t!o possible "ormats, I6 and class. I6s are #sed "or #ni=#e elements on a page !hile classes are #sed "or non+#ni=#e elements.

:Technicall , o# can name a 6i% an thing o# !ish as long as there are no spaces, special characters and the name does not start !ith a n#mber. Ho!e%er, "or this co#rse, the other page o" this site has alread been created and !e need to match its 6i% str#ct#re so #sing the same I6 and class names !ill be important.;

c. Add I6 6i% Tags *. Add the 'container( 6i%. This 6i% !ill act as a container "or all o" o#r other 6i% tags and allo! #s to center o#r content b#t !ill not contain an indi%id#al data. i. ii. Add the opening tag !div id"#container#$ >#st a"ter the ?bod @ tag. Place the closing !%div$ tag >#st be"ore the closing ?3bod @ tag.

/. Create the 'header( 6i%. This !ill allo! #s to "ormat all o" the elements in o#r header area separatel . i. Place the opening and closing tags, !div id"&header&$ and !%div$, as sho!n belo!2 !div id"#header#$ ?img srcABimages3!ill.>pgB altABSha&espeare ImageB 3@ ?h*@Sha&espeareCs Most Pop#lar Sonnets?3h*@ ?p@ ?a hre"ABcomplaint.htmlB@Sha&espeareCs A Lo%ers Complaint?3a@?3p@ !%div$ 1. Create the 'content( 6i%. This 6i% !ill hold the main content o" the page. i. ii. Place the opening !div id"&content&$ a"ter the closing ?3di%@ o" the header. Place the closing !%div$ tag >#st be"ore the opening paragraph tag o" the "ooter. See the "#ll, completed te$t at the end o" this doc#ment i" o# are #ns#re !here these sho#ld go.

D. Create the '"ooter( 6i%. This 6i% !ill allo! #s to "ormat all o" the elements in the "ooter area separatel .
D

i.

Add the opening and closing tags aro#nd the "inal paragraph as sho!n2 !div id"#'ooter#$ ?p@This !ebsite has been de%eloped "or the SFS8 6oIT training center. ?br 3@ Please pro%ide credit i" o# #se an element "o#nd on this Web page. ?3p@ !%div$

d. Add Class 6i% Tags *. Add t!o 'clear( 6i%s. A clear 6i% is #sed "or "ormatting. -eca#se not all Web bro!sers displa in"ormation the same !a it can sometimes be challenging to align content correctl . A clear di% is #sed to '"orce( a bro!ser to displa content at a point relati%e to the 6i%. A clear di% does not generall contain an content. i. ii. T pe the line !div class"#clear#$ !%div$ a"ter the opening ?di% idAEcontentE@ tag. T pe the same !div class"#clear#$ !%div$ line be"ore the opening ?"ooter@ tag.

/. Add t!o 'odd( 6i%s. The sonnets.html "ile contains the te$t o" F sonnets !hich !e !ill be arranging into t!o col#mns. In order to align them correctl the paragraphs in the le"t and right col#mns !ill be "ormatted slightl di""erentl . i. Place the opening and closing !div class"&odd&$ and !%div$ tags aro#nd the "irst and third :odd n#mbered; paragraph tags. See the "#ll completed te$t at the end o" this doc#ment i" o# are #ns#re !here these sho#ld go.

1. Add t!o 'e%en( 6i%s.

i.

Place the opening and closing, !div class"&even&$ and !%div$( aro#nd the second and "o#rth :e%en n#mbered; paragraph tags. See the "#ll completed te$t at the end o" this doc#ment i" o# are #ns#re !here these sho#ld go.

D. Add a 'last( 6i%. i. Place the opening and closing 6i% tags, !div class"&last&$ and !%div$, aro#nd the "inal sonnet. - #sing the e%en3odd3last method !e are designing o#r page so more data co#ld be entered !ith relati%e ease in the "#t#re.

F. Add a lin& to the st le sheet !e !ill be creating in the ne$t step. i. Add the line !lin) hre'"#assets%styles.css# rel"#stylesheet# ty*e"#te+t%css# %$ >#st a"ter the closing ?3title@ tag in the doc#ment head. This line lets the bro!ser &no! that there is a st le sheet associated !ith this Web page.

G. Sa%e o#r !or& and close the "ile. I" o# pre%ie! o#r "ile in a bro!ser again o# sho#ld not see an %isible changes9 et.

V. Creating a Style Sheet

a. Create st les.css *. Windo!s #sers open a blan& 5otepad doc#ment 3 Mac #sers open a blan& Te$tEdit doc#ment. /. Sa%e the "ile as styles.css in the assets "older inside the sha&espeare "older o# e$tracted earlier. b. CSS ,#les CSS r#les are #sed to set "ormatting in"ormation and, m#ch li&e HTML tags, m#st be "ormatted correctl . The "ormat "or a CSS r#le is2
G

Selector Class , Propert 2 %al#eH Propert 2 %al#eH Etc. I" o# !ish to create a single r#le "or m#ltiple tags or I6s :selectors; o# can do so b separating them !ith commas.

Ha%ing a class speci"ied in the r#le is optional. 6oing so allo!s "or more speci"ic selection o" page elements b#t ma not be necessar .

Selectors can ha%e more than one r#le applied to them. Ho!e%er i" o# accidentall set the same r#le more than once "or a selector !hiche%er one the bro!ser reads last !ill be the one that gets displa ed. :i.e. i" o# set the bac&gro#nd color to bl#e and then later set it to orange it !ill appear orange on the Web page.;

c. Add Page Formatting Page "ormatting st les !ill appl to the entire Web page. .nce the basic st les are in place !e can re"ine indi%id#al areas #sing the 6i% and other more speci"ic tags. *. Set the bac&gro#nd color. i. Add the "ollo!ing code to o#r st les.css doc#ment. body , bac)ground.color/ 01122''3 I

/. Set the Font i. Set the "ont properties "or the page b adding the "ollo!ing r#le to o#r st le sheet. -e care"#l abo#t capital letters as o# t peJ For more in"ormation on "ont "amilies ta&e the 6ream!ea%er co#rse. body(td(th , 'ont.'a ily/ Verdana( 4rial( Helvetica( sans.seri'3 'ont.si5e/ +.s all3

'ont.style/ italic3 1. Sa%e o#r st le sheet. D. .pen sonnets.html in o#r bro!ser to see the changes. F. Minimi)e the bro!ser. As !e contin#e to add more CSS sa%e the st le sheet and re"resh o#r bro!ser periodicall to see the changes !e are ma&ing. d. Add I6 6i% Formatting When adding a CSS r#le "or a 6i% tag o# !ill need to add the K sign to the selector. *. Center o#r content. The "ollo!ing code sets the !idth o" o#r container 6i% to I/L pi$els and !ill set the le"t and right doc#ment margins to 'a#to( e""ecti%el centering the container. i. Add the "ollo!ing r#le2 0container , width/ 678*+3 argin.to*/ 8*+3 argin.right/ auto3 argin.botto / 8*+3

argin.le't/ auto3
M

/. Align all o" the content in the 'header( 6i% to center. i. Add the "ollo!ing r#le2 0header , te+t.align/ center3 1. Format the '"ooter( 6i%. i. Change the te$t color and alignment. 0'ooter , color/ 0FFFFFF3 te+t.align/ center3 ii. Add the "ollo!ing t!o lines to the "ooter r#le to '"orce( the "ooter to appear belo! the content 6i% :rather than to the side i" the bro!ser !indo! is !ide eno#gh;. clear/ le't3 width/ 678*+3 D. Format the 'content( 6i% i. Set the bac&gro#nd color to !hite b adding the "ollo!ing r#le2 0content , bac)ground.color/ 0FFFFFF3 ii. Add a G pi$el !ide, solid, blac& border to the 'content( 6i% b adding the "ollo!ing to the 'content( r#le2 border/ 1*+ solid 08888883
N

iii.

Witho#t padding a Web bro!ser places content right #p to the edge o" a 6i%. In man instances, this can ma&e things %er hard to read. Add padding to the 6i% b adding the "ollo!ing lines to the 'content( r#le2 *adding.to*/ 78*+3 *adding.right/ 78*+3 *adding.botto / 78*+3

*adding.le't/ 98*+3 F. Add "ormatting that !ill onl a""ect the headers in the content 6i%. i. Add the "ollo!ing r#le so that onl the ?h/@ tags inside the content 6i% !ill change to bl#e. 0content h7 , color/ 01122''3 G. Sa%e o#r st le sheet and then re"resh o#r bro!ser to see !hat the changes o#(%e made ha%e accomplished. e. Add Class 6i% Formatting. *. Set the 'clear( 6i% so that content !ill be '"orced( aro#nd it. - setting this 6i% to ha%e the same !idth as the container 6i% it !ill e""ecti%el create a di%ider "or o#r content. 8sing the 'clear( attrib#te is an e$tra preca#tion to ma&e s#re that this code does !hat !e !ant in m#ltiple bro!sers. i. Add the "ollo!ing r#le to o#r CSS sheet2 0content .clear , width/ 678*+3 clear/ both3 -

*L

/. Set the 'odd( class so that o#r le"t col#mn o" sonnets is 1LL pi$els !ide and is aligned :"loats; to the le"t side o" its containing 'content( 6i%. i. Add the "ollo!ing r#le2 0content .odd , width/ :88*+3 'loat/ le't3 1. Set the 'e%en( class so that it too is 1LL pi$els !ide, !ill "loat against !hate%er is to its le"t and has some e$tra padding so that the col#mns do not appear too close together. i. Add the "ollo!ing r#le2 0content .even , width/ :88*+3 'loat/ le't3 *adding.le't/ 78*+3 D. -eca#se the sonnets are o" #ne%en length there is a possibilit that the 6i% s#rro#nding the last sonnet, i" !e assigned it to the general 'odd( class, might tr and "loat against the other odd class members ma&ing it appear in the second col#mn. To correct this !e !ill add an e$tra r#le "or this 6i% telling it to clear the pre%io#s elements. i. Add the "ollo!ing r#le2 0content .last , width/ :88*+3 'loat/ none3 clear/ both3 *adding.to*/ ;8*+3
**

F. Sa%e o#r st le sheet and then re"resh o#r bro!ser to see !hat the changes o#(%e made ha%e accomplished.

VI. Tables
Tables are a signi"icant iss#e !hen creating accessible Web pages. In the past, tables !ere o"ten #sed "or "ormattingH an accessibilit nightmare. Oo# ha%e no! seen ho! to do basic "ormatting #sing CSS so o# sho#ld not need to #se a table "or "ormatting b#t ho! do o# add a table that displa s data in a "ormat that is accessible<

a. 8sing o#r te$t editor .pen the complaint.html "ile located in the shas&espeare "older. Oo# can also open it in a Web bro!ser to note that it is %er similar to the page o# >#st completed b#t !ith the 'content( 6i% ha%ing no content. b. -egin o#r table b placing the opening and closing, !table$ and !%table$ tags bet!een the t!o 6i%s o" class 'clear(. c. Add table attrib#tes. i. Set the table !idth to NLP o" the !idth o" the containing ob>ect. Add width"&28<& to the opening ?table@ tag so it reads ?table !idthAENLPE@. Align the table to the center b adding align"&center&. In order to be accessibilit compliant all tables m#st ha%e a s#mmar . The s#mmar !ill not be %isible to a general #ser b#t !ill be read allo!ed to an one #sing screen reading so"t!are. In some bro!sers it ma also appear as a tool tip. Add a short s#mmar so that the completed opening table tag is similar to2

ii. iii.

*/

!table width"#28<# align"#center# su ary"#4 table organi5ing Sha)es*eare=s *oe >4 Lovers Co *laint= by verse.#$ d. Add a Table Caption. A table caption is another accessibilit re=#irement. The caption !ill appear aligned to the top or side o" the table and help pro%ide "#rther in"ormation on !hat is being displa ed. i. Add the "ollo!ing line >#st a"ter the opening ?table@ tag. !ca*tion align"#to*#$ !h7$Sha)es*eare?s 4 Lovers Co *laint by Verse!%h7$ !%ca*tion$ e. Add the Header ,o!. i. A"ter the caption add the opening and closing ro! tags, !tr$ and !%tr$.

". Add the Header Cells. i. ii. iii. Add, bet!een the ro! tags o# >#st created, the line2 !th$Verse @u ber!%th$ Add a second line2 !th$Verse!%th$ Add a 'scope( attrib#te so that a screen reader !ill &no! that these cells are the header "or the associated col#mn. In each o" the opening ?th@ tags add sco*e"&col& so the "#ll tags read ?th scopeAEcolE@.

g. Add a 6ata ,o!. i. A"ter the closing ?3tr@ tag o" the pre%io#s ro! add another set o" ro! tags, !tr$ and !%tr$.

h. Add a 6ata Cell. i. Add, bet!een the ro! tags o# >#st created, the line2 !th$;!%th$
*1

ii.

Add a 'scope( attrib#te so that a screen reader !ill &no! that this cell is a header "or the associated ro!. The "#ll tag sho#ld read !th sco*e"&row&$. -elo! the header ro! o# >#st created b#t still !ithin o#r ro! tags add !td%$ !%td$ :5.TE2 This cell !ill contain data onl and does not incl#de an header in"ormation there"ore the ?td@ rather than ?th@ tag is #sed;. Add the te$t Q in the assets "older there is a "ile called complaint*.t$t. This "ile contains three, pre+ "ormatted paragraphs o# can #se as o#r te$t. Cop and paste the "irst paragraph bet!een the ?td@ and ?3td@ tags o# >#st created.

iii.

i%.

i. Add More 6ata Cells. i. ,epeat steps :g; and :h; "or the remaining t!o paragraphs changing the paragraph n#mber as appropriate. ERT,A2 In the assets "older there is a "ile called complaint/.t$t this "ile contains the remainder o" the poem !ith the ro! and cell tags alread in place. Cop and paste it into the correct spot in o#r doc#ment.

ii.

>. ERT,A2 Format o#r table #sing CSS. i. Add the "ollo!ing code to o#r st les.css doc#ment2 Kcontent td S border+bottom+!idth2 *p$H border+bottom+st le2 solidH border+bottom+color2 KGGNN""H %ertical+align2 bottomH T
*D

Kcontent th S te$t+align2 le"tH %ertical+align2 middleH T ii. iii. Ho! did this change o#r table< For more in"ormation on all o" the accessible HTML elements and their attrib#tes o# can add to a !ebpage %isit http233!!!.!1.org3T,3,EC+ htmlDL3inde$3elements.html

VII.

Ao Live
a. FTP Client Trans"erring o#r "iles "rom o#r local comp#ter to the Web re=#ires a FTP :File Trans"er Protocol; client. Altho#gh there are man clients to choose "rom, 6oIT recommends #sing FileUilla beca#se the program is sec#re, a%ailable "or both Mac and PC and is "ree. Oo# can do!nload a cop "rom http233"ile)illa+ pro>ect.org3 b. La#nch the FileUilla application. The !indo! that opens !ill displa o#r local "iles on the le"t and, once connected, the "iles on o#r ser%er to the right. c. Enter the Host, 8sername and Pass!ord in"ormation. :These settings are "or SFS8 i" o# are #sing another host o# !ill need to contact them "or connection in"ormation.; *. Host2 a*ollo.s'su.edu /. 8sername2 e+mail login :i.e. i" o#r e+mail is >anedoeVs"s#.ed# o#r log+in name is >anedoe;. 1. Pass!ord2 o#r email pass!ord. d. Clic& Buic)connect. The top !indo! pane !ill displa connection stat#s. o#r

e. .nce connected #se the center !indo! on the le"t to na%igate to the p#blic7html "older o# created on o#r local comp#ter.

*F

". .pen the p#blic7html "older on the remote3ser%er side. g. 6rag and drop the "iles inde$.html, lin&s.html and the images "older "rom o#r local comp#ter to the remote3ser%er p#blic7html "older. h. .pen a Web bro!ser and go to http233#ser!!!.s"s#.ed#34acctname :!here acctname is o#r acco#nt name;.

VIII. BC4 ID. Co *leted Code

a. Completed Q sonnets.html ?html @ ?head@

?title@Sha&espeareCs Most Pop#lar Sonnets?3title@ ?lin& hre"ABassets3st les.cssB relABst lesheetB t peABte$t3cssB 3@

?3head@

?bod @ ?di% idABcontainerB@ ?di% idABheaderB@ ?img srcABimages3!ill.>pgB altABSha&espeare ImageB 3@ ?h*@Sha&espeareCs Most Pop#lar Sonnets?3h*@ ?p@ ?a hre"ABcomplaint.htmlB@Sha&espeareCs A Lo%ers Complaint?3a@?3p@
*G

?3di%@ ?di% idABcontentB@ ?di% classABclearB@ ?3di%@ ?di% classABoddB@ ?p@ ?h/@*M?3h/@ Shall I compare thee to a s#mmerCs da <?br@ Tho# art more lo%el and more temperate2?br@ ,o#gh !inds do sha&e the darling b#ds o" Ma ,?br@ And s#mmerCs lease hath all too short a date2?br@ Sometime too hot the e e o" hea%en shines,?br@ And o"ten is his gold comple$ion dimmCdH?br@ And e%er "air "rom "air sometime declines,?br@ - chance or nat#reCs changing co#rse #ntrimmCdH?br@ -#t th eternal s#mmer shall not "ade?br@ 5or lose possession o" that "air tho# o!estH?br@ 5or shall 6eath brag tho# !anderCst in his shade,?br@ When in eternal lines to time tho# gro!est2?br@ So long as men can breathe or e es can see,?br@ So long li%es this and this gi%es li"e to thee.?br@ ?3p@
*I

?3di%@ ?di% classABe%enB@ ?p@ ?h/@/N?3h/@ When, in disgrace !ith "ort#ne and menCs e es,?br@ I all alone be!eep m o#tcast state?br@ And tro#ble dea" hea%en !ith m bootless cries?br@ And loo& #pon m sel" and c#rse m "ate,?br@ Wishing me li&e to one more rich in hope,?br@ Feat#red li&e him, li&e him !ith "riends possessCd,?br@ 6esiring this manCs art and that manCs scope,?br@ With !hat I most en>o contented leastH?br@ Oet in these tho#ghts m sel" almost despising,?br@ Hapl I thin& on thee, and then m state,?br@ Li&e to the lar& at brea& o" da arising?br@ From s#llen earth, sings h mns at hea%enCs gateH?br@ For th s!eet lo%e rememberCd s#ch !ealth brings?br@ That then I scorn to change m state !ith &ings.?br@ ?3p@ ?3di%@ ?di% classABoddB@ ?p@ ?h/@**G?3h/@
*M

Let me not to the marriage o" tr#e minds?br@ Admit impediments. Lo%e is not lo%e?br@ Which alters !hen it alteration "inds,?br@ .r bends !ith the remo%er to remo%e2?br@ . noJ it is an e%er+"i$ed mar&?br@ That loo&s on tempests and is ne%er sha&enH?br@ It is the star to e%er !andering bar&,?br@ Whose !orthCs #n&no!n, altho#gh his height be ta&en.?br@ Lo%eCs not TimeCs "ool, tho#gh ros lips and chee&s?br@ Within his bending sic&leCs compass come2?br@ Lo%e alters not !ith his brie" ho#rs and !ee&s,?br@ -#t bears it o#t e%en to the edge o" doom.?br@ I" this be error and #pon me pro%ed,?br@ I ne%er !rit, nor no man e%er lo%ed.?br@ ?3p@ ?3di%@ ?di% classABe%enB@ ?p@ ?h/@*/G?3h/@ . tho#, m lo%el bo , !ho in th po!er?br@ 6ost hold TimeCs "ic&le glass, his sic&le, ho#rH?br@ Who hast b !aning gro!n, and therein sho!Cst?br@ Th lo%ers !ithering as th s!eet sel" gro!CstH?br@
*N

I" 5at#re, so%ereign mistress o%er !rac&,?br@ As tho# goest on!ards, still !ill pl#c& thee bac&,?br@ She &eeps thee to this p#rpose, that her s&ill?br@ Ma time disgrace and !retched min#tes &ill.?br@ Oet "ear her, . tho# minion o" her pleas#reJ?br@ She ma detain, b#t not still &eep, her treas#re2?br@ Her a#dit, tho#gh dela Cd, ans!erCd m#st be,?br@ And her =#iet#s is to render thee.?br@ ?3p@ ?3di%@ ?di% classABlastB@ ?p@ ?h/@*1L?3h/@ M mistressC e es are nothing li&e the s#nH?br@ Coral is "ar more red than her lipsC redH?br@ I" sno! be !hite, !h then her breasts are d#nH?br@ I" hairs be !ires, blac& !ires gro! on her head.?br@ I ha%e seen roses damas&Cd, red and !hite,?br@ -#t no s#ch roses see I in her chee&sH?br@ And in some per"#mes is there more delight?br@ Than in the breath that "rom m mistress ree&s.?br@ I lo%e to hear her spea&, et !ell I &no!?br@ That m#sic hath a "ar more pleasing so#ndH?br@
/L

I grant I ne%er sa! a goddess goH?br@ M mistress, !hen she !al&s, treads on the gro#nd2?br@ And et, b hea%en, I thin& m lo%e as rare?br@ As an she belied !ith "alse compare.?br@ ?3p@ ?3di%@ ?di% classABclearB@ ?3di%@ ?3di%@ ?di% idAB"ooterB@ ?p@This !ebsite has been de%eloped "or the SFS8 6oIT training center.?br 3@ Please pro%ide credit i" o# #se an element "o#nd on this Web page. ?3p@ ?3di%@ ?3di%@ ?3bod @ ?3html@

b. Completed Q complaint.html ?html@ ?head@

/*

?title@Sha&espeareCs A Lo%ers Complaint?3title@ ?lin& hre"ABassets3st les.cssB relABst lesheetB t peABte$t3cssB 3@

?3head@

?bod @ ?di% idABcontainerB@ ?di% idABheaderB@ ?img srcABimages3!ill.>pgB altABSha&espeare ImageB 3@ ?h*@Sha&espeareCs A Lo%ers Complaint?3h*@ ?p@ ?a hre"ABsonnets.htmlB@Sha&espeareCs Most Pop#lar Sonnets?3a@?3p@

?3di%@ ?di% idABcontentB@ ?di% classABclearB@ ?3di%@ ?table !idthABNLPB alignABcenterB s#mmar ABA table organi)ing Sha&espeares poem A Lo%ers Complaint b %erse.B@ ?caption alignABtopB@ ?h/@Sha&espeareCs A Lo%ers Complaint b Werse?3h/@ ?3caption@ ?tr@

//

?th scopeABcolB@?di% alignABle"tB@Werse 5#mber?3di%@?3th@ ?th scopeABcolB@?di% alignABle"tB@Werse?3di%@?3th@ ?3tr@ ?tr@ ?th scopeABro!B@*?3th@ ?td@F,.M o"" a hill !hose conca%e !omb re+!orded ?br@A plaint"#l stor "rom a sistering %ale, ?br@M spirits to attend this do#ble %oice accorded, ?br@And do!n I laid to list the sad+t#nCd taleH ?br@Ere long espied a "ic&le maid "#ll pale,

?br@Tearing o" papers, brea&ing rings a+t!ain, ?br@Storming her !orld !ith sorro!Cs !ind and rain. ?3td@ ?3tr@ ?tr@ ?th scopeABro!B@/?3th@ ?td@?br@8pon her head a platted hi%e o" stra!, ?br@Which "orti"ied her %isage "rom the s#n, ?br@Whereon the tho#ght might thin& sometime it ?br@sa! ?br@The carcass o" a bea#t spent and done2 ?br@Time had not sc thed all that o#th beg#n,
/1

?br@5or o#th all =#itH b#t, spite o" hea%enCs "ell ?br@rage, age. ?3tr@ ?tr@ ?th scopeABro!B@1?3th@ ?td@?br@."t did she hea%e her nap&in to her e ne, ?br@Which on it had conceited characters, ?br@La#ndering the sil&en "ig#res in the brine ?br@That seasonCd !oe had pelleted in tears, ?br@Some bea#t peepCd thro#gh lattice o" searCd ?3td@

?br@And o"ten reading !hat content it bearsH ?br@As o"ten shrie&ing #ndisting#ishCd !oe ?br@In clamo#rs o" all si)e, both high and lo!.?3td@

?3table@ ?di% classABclearB@ ?3di%@ ?3di%@ ?di% idAB"ooterB@ ?p@This !ebsite has been de%eloped "or the SFS8 6oIT training center.?br 3@
/D

Please pro%ide credit i" o# #se an element "o#nd on this Web page. ?3p@ ?3di%@ ?3di%@ ?3bod @ ?3html@

c. Completed Q st les.css bod S bac&gro#nd+color2 KGGNN""H T bod ,td,th S "ont+"amil 2 Werdana, Arial, Hel%etica, sans+seri"H "ont+si)e2 $+smallH "ont+st le2 italicH T Kcontainer S !idth2 I/Lp$H margin+top2 Lp$H margin+right2 a#toH margin+bottom2 Lp$H margin+le"t2 a#toH T
/F

Kheader S te$t+align2 centerH T K"ooter S color2 KFFFFFFH te$t+align2 centerH clear2 le"tH !idth2 I/Lp$H T Kcontent S bac&gro#nd+color2 KFFFFFFH border2 Gp$ solid KLLLLLLH padding+top2 /Lp$H padding+right2 /Lp$H padding+bottom2 /Lp$H padding+le"t2 DLp$H T Kcontent h/ S color2 KGGNN""H T Kcontent .clear S !idth2 I/Lp$H clear2 bothH
/G

T Kcontent .e%en S !idth2 1LLp$H "loat2 le"tH padding+le"t2 /Lp$H T Kcontent .odd S !idth2 1LLp$H "loat2 le"tH T Kcontent .last S !idth2 1LLp$H "loat2 noneH clear2 bothH padding+top2 *Lp$H T Kcontent td S border+bottom+!idth2 *p$H border+bottom+st le2 solidH border+bottom+color2 KGGNN""H %ertical+align2 bottomH T th S
/I

te$t+align2 le"tH %ertical+align2 middleH T

/M