INTRODUCTION TO WEB DESIGN USING HTMLThe term HTML stands for:1. Hypertext2. Text3. Markup 4. LanguageHyper document is the one that contains the links to other documents ithin or outside the document. ! link isa general term used to refer to a specially marked place on the screen that ill cause something to happen henits acti"ated.The term text stands for ords that you ant to display on the screen.Markup language comes fro the pu#lishing industry and its proofreader$s marks.Web bro!er! This is a computer program %interface& that you use to explore the 'orld 'ide 'e# %'''&. The #roserstranslate documents containing the HTML language into ords and images on the screen.U!e! o" bro!er!1. (rint the e# pages.2. (ro"ide na"igation line for entering a ne e# address.3. )isplays images.4. )isplays translated HTML documents as e# pages.*. )isplays HTML codes in a document.+. (lays "ideos and sound clips.Exa#ple! o" eb bro!er!1. ,nternet explorer2. -etscape na"igator3. Lynx4. Mosaic*. .raille+. (anda/. Mo00illa fire#oxT$e URL The acronym stands for 1niform 2esource Locator. The 12L descri#es the location of specific resource theuserantstoaccess. The12L canpoint toadifferent e#page3 anotherlocationinthecurrent pageorcomponents of a page.4.g. HTML TUTORI%LSB& '%B% D%NIEL1http:55.git.ac.kehTtp:55.safaricom.com12L format (rotocol:55domainname5path5filenameCo#ponent! o" a proto(ol)* +roto(ol ! protocol identifies the format of the information to #e accessed or #eing retrie"ed. The protocol tellsthe #roser ho the information its recei"ing is organi0ed.Exa#ple! o" proto(ol! HTT( 6T(,* Do#a-n na#e7pecifies the physical location of the information or file resource. This is the computer that runs the e#ser"er softare handling protocols specified in the first part of the 12L.HTML e.-t-ng tool!Theyareprogramsthat areusedtohelpineditingandmodifyingthee#pages. Theyaremanufacturersprograms that help e# designers to prepare e# pages. 1. HTML editor2. 8a"a7cript editor3. 6ront page4. )ream ea"er*. (hp+. 7tyle sheets/. 8a"aHTML (o.-ng tool!Helps the programmers design e# pages.Type! o" (o.e tool!1. Hotdogs2. -otepad3. (age spinner4. !rachnidHTML (on/er!-on progra#!1sed to co"ert existing electronic file into HTML codes)* %nt HTML HTML TUTORI%LSB& '%B% D%NIEL2'orks in ord9processing and indos operating system and in ordprocessing in Macintosh.,* W+,0'orks in 'ord(erfect documents.1* GT2HTML'orks for ord9processing in indos operating systems and Macintosh operating system.3* Cyberlea"'orks in Microsoft3 ordperfect and framemaker.HTML /er-"-er!Helps HTMLe#pages "erifythat e#pages contain"alidlinks andcorrect syntax. Theyincludethefolloing:1. )octor HTML2. 'e#lint3. Momspider!ssignments that MUST #e done #y all class mem#ers.1. 4xplain the term code generators.2. :i"e examples of code generators and explain #riefly.HTML termsa& TagsThey are HTML codes that are enclosed in angle #rackets ; ?D7pecifies the color for the text in a document. 6ace >?D7pecifies the font name for text in a document. ;.asefont?2C? ros>?1C?LHfMstaticMroLLHfMstaticL colspan>L2LLtopLLHfMreHuiredLLL 5LrightL "align>LtopLLHfMreHuiredLLL 5LHfMstaticMroLLHfMstaticL colspan>L2LLHfMheaderMhdrLLtopLLLLLLMsLLMrL selected>LselectedLL(rofLL2e"LL7irLLtopL align>LleftL< ;input si0e>L*CL name>LfirstMnameL type>LtextL "alue>LL 5LrightL "align>LtopLLHfMreHuiredLLrightL "align>LtopLLLLL 5LrightL "align>LtopLLHfMreHuiredLL1+JL selected>LselectedLL1+3LLtopL align>LleftL< ;input si0e>LIL name>LaddressNpcodeOL type>LtextL "alue>LL 5LrightL "align>LtopLLHfMreHuiredLL21*L selected>LselectedLL224LL22+LL22ILL23CLL233LL23*LL23/LL2I*LL2I/LL2IJLL2J1LL2J3LL2J*LL41+LL2JILL3CCLL3C2LL3C4LL3C+LL3CILL31CLL312LL314LL31+LL31ILL31JLL321LL323LL32*LL32/LL32JLL332LL334LL33+LL33ILL33JLL341LL343LL34*LL21+LL34JLL3*1LL3*3LL3**LL3*/LL3*JLL3+1LL3+3LL3+*LL3/*LL3//LL3I1LL3I3LL3I*LL3I/LL3IJLL3J1LL3J3LL3J*LL3J/LL3JJLL4C1LL4C2LL4C4LL4C+LL4CILL41CLL412LL414LLtopLLL??7pecifies the idth of ta#le in a ta#le e.g;ta#le idth>?*CS??2CCS?< .order>??4shta#lishes the outer #oundary on a ta#le e.g.;ta#le #order>?*?< =ellspacing>??4shta#lishes more space in #eteen each cell in ata#le. 4.g.;ta#le cellspacing>?+?< HTML TUTORI%LSB& '%B% D%NIEL22 =ellpadding>??)etermines space ithin each cell in a ta#le. e.g.;ta#le cellpadding>?4??top??#ottom??center??red??yello??green?< ;TH #gcolor>?#lue??2??3??2?3??4??+??*CS??*CS3 *CS?< Exa#ple);html< ;head< ;titleL33S333S333SL< ;frameset ros>LK31CCL< ;frame src>Lpage1.htmlL -!M4>LindexL< ;frame src>Lpage2.htmlL -@247,R4< ;5frameset< ;frameset< ;frame src>Lmain.htmlL -!M4>LmainL< ;5frameset< ;frameset ros>L*CS3*CSL< ;frame src>Lpage3.htmlL< ;frame src>Lpage4.htmlL 7=2@LL,-:>LnoL< ;5frameset< ;5frameset< ;noframes?notes.html? scrolling>?Bes?< ;frame src>?notes.html? scrolling>?-o?< ;frame src>?notes.html? scrolling>?!uto?< Exa#ple );html< ;head< ;titleLhome.htmlL name>LmainframeL< ;5frameset< ;T99 7pecify the file to display in the second ro 99< ;T99 This file contains copyright information 99< ;frame src>Lform.htmlL name>LformL< ;5frameset< ;T99 )efine hat to display to #rosers hich arenPt frames9capa#le 99< ;noframes< ;5noframes< ;5html< HTML TUTORI%LSB& '%B% D%NIEL2ICreat-ng HTML Hyperl-nk!! link is a connection #eteen e# pages in a e#site. ,t links "arious pages to ena#le end users access information on 'orld 'ide 'e#.;un(t-on! o" l-nk! 4na#les users to Fump from one page to another. Links different e# pages in one site Links to another e# page or e# site in the orld ide e#L-nk! tag! ;!? ?2efers to a particular address.Type! o" Hyperl-nk! Links to e# pages Links to 12L Links to 49mails Links to ,mages Links to sound files Links to "ideo clipsa4 L-nk! -t$-n a pageThese are links set #eteen texts in an HTML e# page. 4.g;! Href>?chapter1.html? ?#ottom? ?mailto:Fo#Uyahoo.com??mailto:salesmanagerUkapaoil.comV 7u#Fect product information???(ositions the em#edded o#Fect relati"e to the surrounding en"ironment. Height>?D7pecifies "ertical dimensions of the o#Fect. Hidden>?D7pecifies hether the em#edded sound control #ox is "isi#le in the e# page. -ame>?D:i"es the o#Fect a name #y hich other o#Fects can refer to. 7rc>?D,ndicates the relati"eor a#solute locations of the file contaning the o#Fect. 'idth>?D,ndicates the hori0ontal dimensions of the em#edded o#Fect. !utostart>??,ndicates the sound file opens hen the e# is accessed ;! Href>?music.mp3?L8oePs =ollection of =ool 7ound files for you to use in your home pageL< ;meta name>LkeyordsL content>Lmusic sounds midi a" Foe collectionL< ;5head< ;#ody< ;T99(age :oes Here ;5#ody< ;5html< HTML TUTORI%LSB& '%B% D%NIEL33Meta tags are not "isi#le in the e# page unless the user selects to "ie source.!uto92efreshing!utomatic refreshing is supported #y many "ersions of -etscape -a"igator and Microsoft ,nternet 4xplorer.This also uses a modified form of the 5MET%6 tag. !uto refreshing means that once one page loads3 you canset a certain num#er of seconds and then the #roser ill load another page automatically. The #asic structure isas follos:;meta http9eHui">246247H=@-T4-T>xMsecondsWurl>Lhttp:55.yourhost.co.0a5pagetosendto.htmlL