Chapter 4: Basic Web Page Construction -- Elementary HTML (pages !

"- #$%
Learning Objectives Learn ho& to combine basic HTML elements to create Web pages' (n)erstan) ho& to use HTML tags an) tag attributes to control a Web page*s appearance' Learn ho& to a)) absolute (+Ls, relati-e (+Ls, an) name) anchors to your Web pages' .in) out ho& to use tables an) /rames as na-igational ai)s on a Web site' 0et the ans&ers to all you 1uestions about copyright la& an) the Web' Taking Charge 2nyone &ith access to the 3nternet can post a Web page' 4ou can create a Web page &ith 5ust a te6t e)itor' There are Web page construction tools a-ailable that allo& you to create pages &ithout un)erstan)ing the un)erlying machinery' Web Pages and HTML Web bro&sers are )esigne) to )isplay any 27C33 te6t /ile &ith the /ile name e6tension 'htm or 'html ' 4ou can -ie& your Web pages locally on your computer as you )e-elop them' Web bro&sers re&or8 each Web page in an e//ort to )isplay it in the best &ay possible' Web page authors can control ho& much the bro&ser can )ynamically a)5ust the pages' Hyperte6t Mar8up Language or HTML is a mar8up language that gi-es Web page authors control o-er &hat a Web bro&ser can an) can*t )o &hen it )isplays a Web page' 2 mar8up language is not a programming language' 2 mar8up language is a &ay to insert enhancements into a te6t /ile so a bro&ser can ren)er it as specially /ormatte) te6t, te6t &ith special e//ects or &ith graphics Web page authors communicate /ormatting comman)s to Web bro&sers by inserting HTML elements in the Web page' HTML elements gi-e authors control o-er te6t /ormatting an) graphical elements' Tables an) /rames are )e-ices /or controlling the layout o/ a Web page' Web authors must balance &hat they &ant &ith &hat their -isitors* &eb bro&sers can han)le' 2ll Web pages shoul) contain /our basic elements: HTML HE29 T3TLE B:94 4ou can a)) HTML elements to a Web page &ith any te6t e)itor' E6amples: ;otepa) (Win)o&s% 7implete6t (Macintosh% (sing a te6t e)itor instea) o/ a Web page construction tool gi-es you ma6imum control o-er your &eb pages' Web page construction tools inclu)e: Microso/t .rontPage (Win)o&s% Macrome)ia 9ream&ea-er (Macintosh < Win)o&s% (se o/ M7 Wor) is not recommen)e) =no&le)ge o/ HTML is still use/ul e-en &hen using construction tools HTML tags tell a Web bro&ser ho& to ren)er a Web page' HTML tags are use) to )i-i)e a Web page into segments &ith )i//erent 8in)s o/ in/ormation' 4ou can nest HTML tag pairs insi)e other tag pairs to pro)uce a hierarchical structure /or each Web page' Most HTML tags come in pairs, such as >T3TLE? >@T3TLE? C;3T A B Bo&ne Page o/ A

Chapter 4: Basic Web Page Construction -- Elementary HTML (pages !"- #$%
Basic Web Page Formatting The HTML tag pair is use) to mar8 the beginning an) the en) o/ the page While your page &ill still )isplay &ithout this tag pair, you may nee) to use it to )i//erentiate your HTML page /rom another type some)ay The HE29 tag pair contains in/ormation that is use) behin) the scenes but is not )isplaye) in your Web page The T3TLE tag pair is nee)e) to associate a title &ith your Web page The title is )isplaye) in the title bar o/ the bro&ser &in)o& The title bar is not part o/ the page The T3TLE tag pair is insi)e o/ the HE29 tag pair The B:94 tag pair is &here the content o/ the Web page is presente) 3n many pages, the /irst -isible element is the hea)ing The hea)ing element allo&s you to a)) a title to the Web page bo)y' 9o not con/use the hea)ing element &ith the HE29 element The hea)ing element comes in si6 siCes' >H ? >@H ? : -ery large through >H!? >@H!? : -ery small 2n HTML attribute is a property o/ an HTML element that allo&s /or /ine tuning' The paragraph tag >p?>@p? pair brea8s te6t up into bloc8s separate) by blan8 lines' The line brea8 tag >br? is an e6ample o/ a tag that )oes not come in a pair' There are t&o 8in) o/ lists /oun) in Web pages' 2n or)ere) >ol?>@ol? list is an enumerate) list' 2n unor)ere) list >ul?>@ul? is bullete) list' Each list item must be in >li?>@li? tags .ont assignment is )i//icult because )i//erent computers ha-e )i//erent /onts a-ailable on them' 4ou can speci/y a list o/ /ont choices in the /ace attribute o/ the /ont element' 7a/est choices: >/ont /aceDE2rial, 0ene-a, Hel-eticaF? >/ont /aceDETimes ;e& +oman, TimesF? >/ont /aceDECourier ;e&, CourierF? 2-oi) )esigning a page that )epen)s on speci/ic type properties since the user may o-erri)e them in their bro&ser pre/erences'

C;3T A B Bo&ne

Page G o/ A

Chapter 4: Basic Web Page Construction -- Elementary HTML (pages !"- #$%
:ther use/ul tags: >b?Bol)>@b? >i?Italic</i> >/ont siCeDEHGF colorDEre)F? >I-- This is a comment --? ;esting tags This is correct nesting: >b?>i?Bol) an) 3talic>@i?>@b? This is &rong: >b?>i?Bol) an) 3talic>@b?>@i? (sually such errors are /orgi-en by some bro&sers but not by others, so the more mista8es you ma8e the more -ie&ers see your page )istorte) Basic Web Page Graphics JPE0 an) 03. are the most common graphics /ormats on the Web' JPE0 is better suite) /or high-resolution photographs an) comple6 graphics' 03. is better suite) /or line )ra&ings an) simple graphics' The 3M0 HTML element creates an inline image: >img srcDEbutton'5pgF? 2n inline image is an image that is treate) li8e a single alphanumeric character'

C;3T A B Bo&ne

Page A o/ A