COMPETENCY BASED LEARNING MATERIAL

UNIT OF COMPETENCY:

CREATE WEB PAGES USING HTML

MODULE TITLE:

CREATING WEB PAGES USING HTML

By: MR. JOSEPH E. NIEGO DATAMEX Institute of Computer Tec no!o"y

#$%$ PC OPERATIONS NC II INFO&MATION AND COMMUNICATION' TEC(NOLO)Y

CONTENTS:
PAGE INTRODUCTION LEARNING OUTCOME 1 (FAMILIARIZE BASIC HTML TAGS) INFO&MATION '(EET NO+% 'ELF-C(EC. NO+% MODEL AN'0E& TO 'ELF-C(EC. NO+% ACTI1ITY '(EET NO+% 'AMPLE OUTPUT TO ACTI1ITY NO+% LEARNING OUTCOME 2 (FORMAT HTML WEB PAGES) INFO&MATION '(EET NO+# 'ELF-C(EC. NO+# MODEL AN'0E& TO 'ELF-C(EC. NO+# ACTI1ITY '(EET NO+# 'AMPLE OUTPUT TO ACTI1ITY NO+# LEARNING OUTCOME 3 (CUSTOMIZING ISUAL ENHANCEMENTS AND PAGE ORGANIZATION) INFO&MATION '(EET NO+* 'ELF-C(EC. NO+* MODEL AN'0E& TO 'ELF-C(EC. NO+* ACTI1ITY '(EET NO+* 'AMPLE OUTPUT TO ACTI1ITY NO+* LEARNING OUTCOME " (USE HTML FORMS IN WEB PAGES) INFO&MATION '(EET NO+2 'ELF-C(EC. NO+2 MODEL AN'0E& TO 'ELF-C(EC. NO+2 ACTI1ITY '(EET NO+2 'AMPLE OUTPUT TO ACTI1ITY NO+2 * 6 , / %$ %% %# %* %2 %3 %, %4 %/ 2! #% *$ *% *# ** 3" *5 *, *4 */ 2$

PRELIMINARY E#AMINATION MIDTERM E#AMINATION FINAL E#AMINATION INTRODUCTION

2# 2* 22

0e6 sites 7re m7ny t in"s to m7ny peop!e+ To some8 7 0e6 site is 7n e!ectronic 6usiness c7r9: to ot ers8 7n on!ine storefront: to sti!! ot ers8 7 c!7ssifie9 79;ertisement or 7 f7mi!y p oto 7!6um+ T e tric< to cre7tin" 7 successfu! 0e6 site is to fi"ure out = 7t 7 0e6 site is to you > 7n9 t en to 6ui!9 your site 7n9 m7<e it 7;7i!76!e on t e 0e6 6y fo!!o=in" 7 fe= simp!e steps+ W$% S&'$ B()&*) T e steps you t7<e to cre7te 7n9 publish ?m7<e it 7;7i!76!e on t e 0e6@ 7 0e6 site 7re pretty str7i" tfor=7r9+ T e fo!!o=in" sections "i;e you 7n o;er;ie= of t e 9ifferent <in9s of sites you c7n cre7te8 fo!!o=e9 6y 7 9escription of = 7t you nee9 to 9o to turn your "re7t i9e7 into 7 !i;e 0e6 site t 7t peop!e 7!! o;er t e =or!9 c7n ;ie= 7n9 enAoy+ D&++$,$-' .&-/) 0+ W$% )&'$) T e fo!!o=in" sections 9escri6e t ree ;ery 6ro79 c7te"ories of 0e6 sites+ T e 0e6 site t 7t you inten9 to pu6!is pro676!y f7!!s into one of t ese t ree c7te"ories+ 1. Personal home pages Bust 76out 7nyone =it 7ccess to t e Internet c7n cre7te 7 person7! omep7"e+ T e simp!est person7! ome p7"es cont7in 67sic inform7tion8 suc 7s your n7me8 inform7tion 76out your f7mi!y8 your occup7tion8 your o66ies8 7n9 7ny speci7! interests you m7y 7;e+ You c7n 7!so t ro= in 7 picture+ O 8 7n9 !in<s to your f7;orite p7"es on t e 0e6 7re 7!so common!y inc!u9e9 in person7! ome p7"es+ More e!76or7te person7! ome p7"es c7n inc!u9e pictures from your !7st f7mi!y ;7c7tion8 t e first c 7pter of your soon-to-6e-pu6!is e9 no;e!8 or 7nyt in" e!se you t in< ot ers m7y 6e intereste9 in+ If youCre !oo<in" for 7 Ao68 you s ou!9 7!so inc!u9e your rDsumD on your person7! ome p7"e+ 2. Company Web sites More 7n9 more comp7nies 7re Aoinin" t e 0e6+ E;en piEE7 p7r!ors 7re puttin" up 0e6 p7"es+ T e simp!est corpor7te 0e6 p7"es pro;i9e 67sic inform7tion 76out 7 comp7ny8 suc 7s 7 9escription of t e comp7nyCs pro9ucts or ser;ices8 p one num6ers8 7n9 so on+ A more e!76or7te corpor7te 0e6 site c7n inc!u9e 7ny or 7!! of t e fo!!o=in": An on!ine c7t7!o" t 7t en76!es Internet users to see 9et7i!e9 inform7tion 76out pro9ucts 7n9 ser;ices+ T e c7t7!o" m7y inc!u9e pictures 7n98 if you =7nt8 prices+ On!ine or9erin"8 = ic en76!es Internet users to 7ctu7!!y p!7ce or9ers o;er t e Internet+

 A customer sur;ey+ Lists of freFuent!y 7s<e9 Fuestions ?FAGs@ 76out t e comp7nyCs pro9ucts or ser;ices+ On!ine support8 = ere 7 customer c7n !e7;e 7 Fuestion 76out 7 pro6!em e or s e is 7;in" =it 7 pro9uct 7n9 recei;e 7n 7ns=er =it in 7 97y or t=o+ Artic!es 7n9 re;ie=s of t e comp7nyCs pro9ucts+ Press re!e7ses+ Bio"r7p ies of comp7ny emp!oyees+ 3. Special-interest Web sites M7ny of t e most interestin" 0e6 sites 7re 9e;ote9 to speci7! interests+ For eH7mp!e8 if youCre in;o!;e9 =it 7 yout soccer !e7"ue8 you m7y =7nt to cre7te 7 0e6 p7"e t 7t inc!u9es te7m rosters8 sc e9u!es8 7n9 st7n9in"s+ T e !ist of possi6!e topics for 7 speci7! interest 0e6 site is !imit!ess+ C,$('&-1 ( W$% )&'$: A- 02$,2&$3 1. P4(- 506, W$% )&'$. 2. C,$('$ 506, W$% 7(1$). A 0e6 site is 7 co!!ection of 0e6 p7"es+ An9 7!t ou" 7!! 0e6 p7"es must 6e cre7te9 in 7 speci7! !7n"u7"e c7!!e9 HTML ?= ic st7n9s for (yperTeHt M7r<up L7n"u7"e@8 you 7;e se;er7! options 6esi9es 6ecomin" 7n (TML "uru 7n9 typin" 7!! your (TML co9e into 7 teHt e9itor 6y 7n9+ 3. P6%4&)8 506, W$% 7(1$). Before 7nyone oo<e9 up to t e 0e6 c7n ;ie= your 0e6 site8 you must first publish it > t 7t is8 you must first copy your 0e6 p7"es to 7 0e6 ser;er+

HT ! "HyperTe#t

ar$%p !ang%age&

A!! 0e6 p7"es 7re =ritten in 7 speci7! m7r<up !7n"u7"e c7!!e9 (TML+ A!t ou" you m7y fin9 yourse!f usin" 7 "r7p ic7! (TML e9itor > suc 7s FrontP7"e or Dre7m=e7;er >8 you m7y prefer to cre7te your p7"es from scr7tc usin" 7 simp!e teHt e9itor 7n9 t e (TML <no=!e9"e you fin9 in t is mo9u!e+ ?T e (TML 9et7i!s you fin9 in t is mo9u!e m7y 7!so come in 7n9y if you 9eci9e to t=e7< t e (TML co9e "ener7te9 6y your "r7p ic7! (TML e9itor+@

MODULE DESCRIPTOR:

T is unit 9efines t e competency reFuire9 to cre7te =e6 p7"es usin" (TML+

LEARNING OUTCOMES: At t e en9 of t e mo9u!e8 t e stu9ent or tr7inee is eHpecte9 to: F7mi!i7riEe 67sic (TML t7"s Form7t (TML p7"es CustomiEe ;isu7! en 7ncements 7n9 p7"e or"7niE7tion Use (TML forms in =e6 p7"es

PRERE9UISITE :NOWLEDGE AND S:ILLS Fun97ment7! <no=!e9"e =it t e Internet B7sic <no=!e9"e in 0in9o=s Oper7tin" 'ystem functions En"!is re79in" 7n9 compre ension s<i!!s )oo9 typin" s<i!!s

LEA&NIN) OUTCOME %: FAMILIARIZE BASIC HTML TAGS LEA&NIN) ACTI1ITY LEA&NIN) 'TEP' &e79 inform7tion s eet no+% FAMILIARIZE BASIC HTML TAGS Perform se!f-c ec< no+% FAMILIARIZE BASIC HTML TAGS Comp7re 7ns=ers to mo9e! 7ns=er to se!f-c ec< no+% Perform 7cti;ity s eet no+% FAMILIARIZE BASIC HTML TAGS Comp7re output to s7mp!e output of 7cti;ity s eet no+% &E'OU&CE' INFO&MATION '(EET NO+% 'ELF-C(EC. NO+% MODEL AN'0E& TO 'ELFC(EC. NO+% ACTI1ITY '(EET NO+% 'AMPLE OUTPUT OF ACTI1ITY '(EET NO+%

INFORMATION SHEET NO.1 FAMILIARIZE BASIC HTML TAGS Introduction: Internet a collection of thousands of computer networks throughout the world. World Wide Web (www) consists of countless number of pages held in over a million computer scattered across the world, and all oined together b! h!perte"t links # access through a web browser. Hypertext documents linked so that clicking on a button, icon, or ke!word takes !ou into related document wherever it ma! be. Web Browser program that lets !ou leap between h!perte"t links to read te"t, view graphics, videos, and hear sounds. $". %etscape %avigator &icrosoft 'nternet $"plorer

Webpage a name given to the page that is displa!ed when information is re(uested from www. 3 IMPORTA T !A"TOR# I "R$ATI % W$BPA%$ 1.)*&+ $ditor uses %otepad, an editing tool in creating webpage, or &,-ord. 2.-eb .rowser 3.'nternet ,ervice /rovider 0',/1 an organi2ation offering access to some or all of the services available over the internet. HTM& )!per *e"t &arkup +anguage 3 language used to construct webpages

Document actual )*&+ !ou write Page what !ou see when the document is displa!ed on the screen HTM& TA%# instruction contained within brackets that states the action to perform ' T(P$# O! TA%# Empty does not hold an! value $". 4.56 4)56 Container has beginning 07pening1 and ending 08losing1 tag and in between is the information that is controlled b! the container. $". 4.6 .old 49.6 :

BA#I" #TR)"T)R$ 4)*&+6 4)$;<6 4*'*+$6 /ut the *itle of the page here 49*'*+$6 49)$;<6 4.7<=6 *!pe the content of the page here. 49.7<=6 49)*&+6 BA#I" "OMMA * TA%# +b, +-b, .old $"> *he word 4b6 .rave 49b6 is in bold. *he word Bra.e is in bold. ?nderline $"> 4u6*his statement is underlined.49u6 *his statement is underlined. 'talic $"> 4i6 *he whole statement is in 'talic. 49i6 The whole statement is in Italic.

+u, +-u,

+i, +-i,

+center, +-center, 8enter ;lignment +sup, +-sup, ,uperscript $"> 1@th A6 1@ 4sup6 th 49sup6 +sub, +-sub, ,ubscript $"> "2 +bloc/0uote, +-bloc/0uote, A6 " 4sub6 2 49sub6

?sed for long (uotes or citations $"> 4block(uote6 B;n e!e for an e!e, a tooth for a toothCD 49block(uote6 $(uivalent to 1 space 0%on .raking ,pace1

1nbsp2

+pre, +-pre, /reformatted te"t generate te"t in a fi"ed width font.'t makes spaces, new lines, and tabs significant.

SELF;CHEC: NO.1 FAMILIARIZE BASIC HTML TAGS I. A-)3$, 0, )67745 '8$ ,$<6&,$/ &-+0,=('&0-. 1. A 140%(4 *0--$*'&0- 0+ '806)(-/) 0+ *0=76'$, -$'30,.) &) 38(' 3$ *(44 '8$ ;;;;> 2. W8(' *0-)&)') 0+ *06-'4$)) -6=%$,) 0+ 7(1$) 8$4/ &- 02$, ( =&44&0*0=76'$, )*(''$,$/ (*,0)) '8$ 30,4/ (-/ ?0&-$/ '01$'8$, %5 857$,'$@' 4&-.) (-/ (**$))$/ '8,0618 ( 3$% %,03)$,> 3. T8$)$ (,$ /0*6=$-') 4&-.$/ )0 '8(' *4&*.&-1 0- ( %6''0-A &*0- 0, .$530,/ '(.$) 506 &-'0 ( ,$4('$/ /0*6=$-' 38$,$2$, &- '8$ 3$% &' =(5 %$. ". I' &) ( 7,01,(= '8(' 4$') 506 4$(7 %$'3$$- 857$,'$@' 4&-.) '0 ,$(/ '$@'A 2&$3 1,(78&*)A 2&/$0) (-/ 8$(, )06-/). B. I' &) ( -(=$ 1&2$- '0 7(1$ '8(' &) /&)74(5$/ 38$- &-+0,=('&0- &) ,$<6$)'$/ +,0= '8$ 30,4/ 3&/$ 3$%. 6. I' &) '8$ *044$*'&2$ -(=$ +0, ( *044$*'&0- 0+ &-'$,;,$4('$/ 3$% 7(1$). C. I' &) (- 0,1(-&D('&0- '8(' 0++$,) (**$)) '0 )0=$ 0, (44 '8$ )$,2&*$) (2(&4(%4$ 02$, '8$ &-'$,-$'. E. I' &) ( 4(-16(1$ 6)$/ '0 *0-)',6*' 3$% 7(1$). F. T8$)$ (,$ &-)',6*'&0-) *0-'(&-$/ 3&'8&- (-14$ %,(*.$') '8(' )'('$ (*'&0- '0 7$,+0,= &- HTML. 1!. I' &) (- $/&'&-1 '004 0, 7,01,(= &- *,$('&-1 ( 3$% 7(1$A $.1. N0'$7(/ 0, MS W0,/. II. E-6=$,('&011;12. T30 (2) '57$) 0+ HTML '(1). 13;16. F06, (") HTML '(1) &- '8$ %()&* )',6*'6,$ 0+ (- HTML 3$% 7(1$. 1C;2B. N&-$ (F) B()&* *0==(-/ HTML '(1).

MODEL ANSWER TO SELF;CHEC: NO.1 E

I+ Ans=er or supp!y t e reFuire9 inform7tion+ %+ A "!o67! connection of t ous7n9s of computer net=or<s is = 7t =e c7!! t e ----I INTE&NET #+ 0 7t consists of count!ess num6ers of p7"es e!9 in o;er 7 mi!!ion computer sc7ttere9 7cross t e =or!9 7n9 Aoine9 to"et er 6y yperteHt !in<s 7n9 7ccesse9 t rou" 7 =e6 6ro=serI 0O&LD 0IDE 0EB ?000@ *+ T ese 7re 9ocuments !in<e9 so t 7t c!ic<in" on 7 6utton8 icon or <ey=or9 t7<es you into 7 re!7te9 9ocument = ere;er in t e =e6 it m7y 6e+ (YPE&TEXT 2+ It is 7 pro"r7m t 7t !ets you !e7p 6et=een yperteHt !in<s to re79 teHt8 ;ie= "r7p ics8 ;i9eos 7n9 e7r soun9s+ 0EB B&O0'E& 5+ It is 7 n7me "i;en to p7"e t 7t is 9isp!7ye9 = en inform7tion is reFueste9 from t e =or!9 =i9e =e6+ 0EB PA)E 3+ It is t e co!!ecti;e n7me for 7 co!!ection of inter-re!7te9 =e6 p7"es+ 0EB 'ITE ,+ It is 7n or"7niE7tion t 7t offers 7ccess to some or 7!! t e ser;ices 7;7i!76!e o;er t e internet+ INTE&NET 'E&1ICE P&O1IDE& ?I'P@ 4+ It is 7 !7n"u7"e use9 to construct =e6 p7"es+ (YPE& TEXT MA&.UP LAN)UA)E /+ T ese 7re instructions cont7ine9 =it in 7n"!e 6r7c<ets t 7t st7te 7ction to perform in (TML+ (TML TA)' %$+ It is 7n e9itin" too! or pro"r7m in cre7tin" 7 =e6 p7"e8 e+"+ Notep79 or M' 0or9+ (TML EDITO& II+ Enumer7tion %%-%#+ T=o ?#@ types of (TML t7"s+ JEMPTY JCONTAINE& %*-%3+ Four ?2@ (TML t7"s in t e 67sic structure of 7n (TML =e6 p7"e+ JK(TMLLKM(TMLL JK(EADLKM(EADL JKTITLELKMTITLEL JKBODYLKMBODYL %,-#5+ Nine ?/@ B7sic comm7n9 (TML t7"s+ JK6LKM6L JKuLKMuL JKiLKMiL JKcenterLKMcenterL JKsupLKMsupL JKsu6LKMsu6L JK6!oc<FuoteLKM6!oc<FuoteL JNn6sp: JKpreLKMpreL

ACTI ITY SHEET NO.1

1F

ACTI ITY TITLE UNIT READING OBJECTI ES

: : : :

FAMILIARIZE BASIC HTML TAGS CREATE WEB PAGE USING HTML INFORMATION SHEET NO.1 CREATE A SIMPLE WEB PAGE WITH THE INFORMATION SHOWN ON THE SAMPLE OUTPUT NO.1 ATE'(A!S 'E)*('E+, GREMO ABLE STORAGE MEDIA E)*(P E-T 'E)*('E+, GA GOOD WOR:ING PC WITH AN HTML EDITOR (NOTEPADA WORDPADA MS WORD) P'.CE+*'E,

LABORATORY WOR:

1. RE IEW NOTES ON HTML BASIC STRUCTURE AND BASIC COMMAND TAGS. 2. IEW AND ANALYZE THE WEB PAGE SHOWN ON THE SAMPLE OUTPUT NO.1 3. ENCODE THE APPROPRIATE HTML CODES. ". IEW AND CHEC: YOUR WOR:. B. SA E IN YOUR REMO ABLE STORAGE MEDIA.

SAMPLE OUTPUT TO ACTI ITY SHEET NO.1

11

LEA&NIN) OUTCOME #: FORMAT HTML WEB PAGES

12

LEA&NIN) ACTI1ITY LEA&NIN) 'TEP' &e79 inform7tion s eet no+# FORMAT HTML WEB PAGES Perform se!f-c ec< no+ # FORMAT HTML WEB PAGES Comp7re 7ns=ers to mo9e! 7ns=er to se!f-c ec< no+# Perform 7cti;ity s eet no+ # FORMAT HTML WEB PAGES Comp7re output to s7mp!e output of 7cti;ity s eet no+# &E'OU&CE' INFO&MATION '(EET NO+# 'ELF-C(EC. NO+# MODEL AN'0E& TO 'ELFC(EC. NO+# ACTI1ITY '(EET NO+# 'AMPLE OUTPUT OF ACTI1ITY '(EET NO+#

INFORMATION SHEET NO.2 FORMAT HTML WEB PAGES

13

PARA%RAPH 3 &I $ BR$A4#3 A * HORI5O TA& R)&$ +br, Line Break functions as the $nter Ge! +p, Paragraph leaves a line 0e(ual to 2 line break1 ATTRIBUTE ;lign A aligns the paragraph left 0default alignment1, center, right $"> 4p align A right6 49p6 +6r, !ori"ontal Rule produces a hori2ontal line with indented effect ATTRIBUTE# ,i2e A n 0in percentage or pi"els1 *hickness of the line -idth A n 0in percentage or pi"els1 ,pecifies the length of the line 8olor A Bcolor nameD <efines the color of the line ;lign A left 9 center 9 right alignment /ositions the line $"> 4hr si2e A 5 widthA:5H colorAblue alignAcenter6

H$A*I %# fi"ed bold, automatic 4br6 4h16 49h16 4h26 49h26 4h36 49h36 4h46 49h46 4h56 49h56 4h66 49h66 +argest heading 9 first level heading second level heading third level heading fourth level heading fifth level heading ,mallest heading 9 si"th level heading

$"> 4h16 -elcomeC 49h16 4h5 align A right6 -elcome to m! humble homeC 49h56 BO*( ATTRIB)T$# +body, +-body, ATTRIBUTE# bgcolor A Bcolor nameD <efines the background color te"t A Bcolor nameD <efines the background color and te"t color of all the te"t backgroundADfilenameD defines the background image.

14

!O T !ORMATTI % +7ont si8e 9 n, +-7ont, changes the font si2eI 1 is the smallest font si2e, 3 is the default font si2e, and : is the largest si2e.

$"> 4font si2e A 56 )ello -orldC 49font6 +7ont color 9 :color;, +-7ont, changes the font color. 't can be in he"adecimal e(uivalent or the 55JJ.. code, and the color name itself. $"> 4font color A BgreenD6 )ello -orldC 49font6 75 4font color A BKFFLLFFD6 )ello -orldC 49font6 +7ont 7ace 9 :7ont type;, +-7ont, changes the font st!le or t!pe. $"> 4font face A Btempus sans itcD6 )ello -orldC 49font6 ote: =ou can oin all the font tags in ust one tag or bracket and terminate it using onl! one closing tag. $"> 4font si2e A 4 color A B!ellowD face A Bcomic sans msD6 )iC 49font6 <= BA#I" "O&OR# I HTM& #il.er a.y W6ite Blue %ray Purple Blac/ Magenta Maroon Oli.e Red (ellow %reen Teal &i>e "yan

15

SELF;CHEC: NO.2 FORMAT HTML WEB PAGES Ans=er t e fo!!o=in": %+ 0 7t is t e (TML t7" for 7 !ine 6re7<I #+ 0 7t is t e (TML t7" for 7 p7r7"r7p 6re7<I *+ 0 7t is t e (TML t7" for 7 oriEont7! ru!eI 2+ 0 7t is t e (TML t7" for t e 6i""est e79in" siEeI 5+ 0 7t is t e (TML t7" for t e sm7!!est e79in" siEeI

Enumer7tion 3-/+ )i;e t e four ?2@ 7ttri6utes of t e oriEont7! ru!e+ %$-%%+ )i;e t e t=o ?#@ 7ttri6utes t 7t form7ts 67c<"roun9 co!or 7n9 teHt co!or of =e6 p7"e 6o9y+ %#-%2+ )i;e t e t ree ?*@ 7ttri6utes t 7t form7ts fonts+ %5-*$+ )i;e t e siHteen ?%3@ 67sic co!ors in (TML+

16

MODEL ANSWER TO SELF;CHEC: NO.2 Ans=er t e fo!!o=in": %+ 0 7t is t e (TML t7" for 7 !ine 6re7<I K6rL #+ 0 7t is t e (TML t7" for 7 p7r7"r7p 6re7<I KpLKMpL *+ 0 7t is t e (TML t7" for 7 oriEont7! ru!eI K rL 2+ 0 7t is t e (TML t7" for t e 6i""est e79in" siEeI K %LKM %L 5+ 0 7t is t e (TML t7" for t e sm7!!est e79in" siEeI K 3LKM 3L Enumer7tion 3-/+ )i;e t e four ?2@ 7ttri6utes of t e oriEont7! ru!e+ JsiEe J=i9t Jco!or J7!i"n %$-%%+ )i;e t e t=o ?#@ 7ttri6utes t 7t form7ts 67c<"roun9 co!or 7n9 teHt co!or of =e6 p7"e 6o9y+ J6"co!or JteHt J67c<"roun9 %#-%2+ )i;e t e t ree ?*@ 7ttri6utes t 7t form7ts fonts+ Jfont siEe Jfont co!or Jfont siEe %5-*$+ )i;e t e siHteen ?%3@ 67sic co!ors in (TML+ S&42$,A -(25A 38&'$A %46$A 1,(5A 76,74$A %4(*.A =(1$-'(A =(,00-A 04&2$A ,$/A 5$4403A 1,$$-A '$(4A 4&=$A *5(-

1:

ACTI ITY SHEET NO.2 ACTI ITY TITLE UNIT READING OBJECTI ES : : : : FORMAT HTML WEB PAGES CREATE WEB PAGE USING HTML INFORMATION SHEET NO.2 CREATE A SIMPLE WEB PAGE WITH THE INFORMATION SHOWN ON THE SAMPLE OUTPUT NO.2 ATE'(A!S 'E)*('E+, GREMO ABLE STORAGE MEDIA E)*(P E-T 'E)*('E+, GA GOOD WOR:ING PC WITH AN HTML EDITOR (NOTEPADA WORDPADA MS WORD) P'.CE+*'E, 1. RE IEW NOTES ON HTML BASIC STRUCTURE AND BASIC COMMAND TAGS. 2. IEW AND ANALYZE THE WEB PAGE SHOWN ON THE SAMPLE OUTPUT NO.2 3. ENCODE THE APPROPRIATE HTML CODES. ". IEW AND CHEC: YOUR WOR:. B. SA E IN YOUR REMO ABLE STORAGE MEDIA.

LABORATORY WOR:

SAMPLE OUTPUT TO ACTI ITY SHEET NO.2 1@

1E

LEA&NIN) OUTCOME *: CUSTOMIZING ISUAL ENHANCEMENTS AND PAGE ORGANIZATION LEA&NIN) ACTI1ITY LEA&NIN) 'TEP' &e79 inform7tion s eet no+* CUSTOMIZING ISUAL ENHANCEMENTS AND PAGE ORGANIZATION Perform se!f-c ec< no+ * CUSTOMIZING ISUAL ENHANCEMENTS AND PAGE ORGANIZATION Comp7re 7ns=ers to mo9e! 7ns=er to se!f-c ec< no+* Perform 7cti;ity s eet no+ * CUSTOMIZING ISUAL ENHANCEMENTS AND PAGE ORGANIZATION Comp7re output to s7mp!e output of 7cti;ity s eet no+* &E'OU&CE' INFO&MATION '(EET NO+*

'ELF-C(EC. NO+*

MODEL AN'0E& TO 'ELFC(EC. NO+* ACTI1ITY '(EET NO+*

'AMPLE OUTPUT OF ACTI1ITY '(EET NO+*

2F

INFORMATION SHEET NO.3 CUSTOMIZING ISUAL ENHANCEMENTS AND PAGE ORGANIZATION MAR?)$$ +>ar0uee, +->ar0uee, creates a scrolling or moving te"t from one part of the screen and floats across to the left or right.

ATTRIBUTE# .ehavior A Bslide 9 scroll 9 alternateD <irection A Bleft 9 right 9 up 9 downD ,crollamount A n ,peeds up, in pi"els ,crolldela! A n ,lows down, in pi"els -idth A n +ength where the mar(uee will move towards the screen, in percentage +oop A n %o. of times the te"t will pass across the screen $"> 4mar(uee behaviorADalternateD scrollamountA1FF directionADleftD widthA:5H6 'nformatics 8omputer 'nstitute 49mar(uee6 "OMM$ T# +@AA B AA, code. $"> inserts comment9s that cannot be seen in the page but can be seen in the source 4CM*his is the heading.336

"R$ATI % &I#T# +ul, +-ul, Unnum$ere% Lists list using round, s(uare, or disk bullets. ATTRIBUTE *!pe A s(uare 9 disc 9 circle 8hanges the t!pe of bullet used &r%ere% Lists numbers the items in the list ATTRIBUTE *!pe A Ba 9 ; 9 ' 9 i 9 D 8hanges the t!pe of ordinal number used

+ol, +-ol,

21

+li,

List Item te"t that go in the list $"> *hings to be done ne"t morning> -ake up .rush *eeth 8hange 8lothes $at .reakfast Jo to -ork

The above statements are typed as follows: 4html6 4head6 4title6 &! ,chedule for *omorrow 49title6 49head6 4bod!6 *hings to be done ne"t morning> 4br6 4ul6 4li6 -ake up 4li6 .rush *eeth 4li6 8hange 8lothes 4li6 $at .reakfast 4li6 Jo to -ork 49ul6 49bod!6 49html6 7r !ou can change the 'ul( ')ul( into 'ol( ')ol( to change the bullets into ordinal numbers. 1. 2. 3. 4. 5. 6. *hings to be done ne"t morning> -ake up .rush *eeth 8hange 8lothes $at .reakfast Jo to -ork

You can also change the type of numbering you want: 4ol t!peADaD6 *his will change the numbers to a, b, c, N 4ol t!peAD;D6 *his will change the numbers to ;, ., 8, N 4ol t!peADiD6 *his will change the numbers to i, ii, iii, N 4ol t!peAD'D6 *his will change the numbers to ', '', ''', N 22

$#T$* &I#T %ested lists are lists that performs specific task t!ped b! the user inside another loop. $"> *ATAM$C I #TIT)T$ O! "OMP)T$R T$"H O&O%( '. 8ertified 'nternet /rofessional /rogram 08'//1 ;. 'nternet $ssentials .. .asic -ebpage <esign # <evelopment 0)*&+1 i. .asic )*&+ *ags ii. Lont Lormatting 1. Lont si2e 2. Lont color 3. Lont Lace 8. /erl /rogramming ''. <atabase <evelopment ;. &icrosoft Oisual .asic &odule 1 .. ;dvanced Oisual .asic &odule 2 '''. <iploma in 8omputer ,cience

23

the sample is encoded like the following: 4html6 4head6 4title6 <;*;&$P ,ub ects 49title6 49head6 4bod!6 4b6 <;*;&$P '%,*'*?*$ 7L 87&/?*$5 *$8)%7+7J= 49b6 4ol t!pe A B'D6 4li6 8ertified 'nternet /rofessional /rogram 08'//1 4ol t!pe A B;D6 4li6 'nternet $ssentials 4li6 .asic -ebpage <esign # <evelopment 0)*&+1 4ol t!pe A BiD6 4li6 .asic )*&+ *ags 4li6 Lont Lormatting 4ol6 4li6 Lont ,i2e 4li6 Lont 8olor 4li6 Lont Lace 49ol6 49ol6 4li6 /erl /rogramming 49ol6 4li6 <atabase <evelopment 4ol t!pe A B;D6 4li6 &icrosoft Oisual .asic &odule 1 4li6 &icrosoft Oisual .asic &odule 2 49ol6 4li6 <iploma in 8omputer ,cience 49ol6 49bod!6 49html6

24

*$!I ITIO &I#T +dl, +-dl, +dt, +dd, $"> .rowser 8an interpret the )*&+ tags and then show the formatted document on screen. In HTM document! the above e"ample is typed as shown below: 4html6 4head6 4title6 <efinition +ist 49title6 49head6 4bod!6 4dl6 4dt6 .rowser 4dd6 8an interpret the )*&+ tags and then show the formatted document on screen. 49dl6 49bod!6 49html6 IMA%$# +i>g src 9 :7ilena>e;, used to place an image in a document *%e+inition list, produces automaticall! a 2 column list with items on the left and definition on the right. *%e+ine% term, te"t is a term to be defined # should be displa!ed in the left hand column of a definition list. te"t is a definition of a term and should be displa!ed in the right3hand column of a definition list.

ATTRIBUTE# -idth A changing the si2e of the image in terms of pi"el or H of the browser 0hori2ontal1 )eight A changing the si2e of the image in terms of pi"el or H of the browser 0vertical1 ;lign A Bleft 9 rightD ;lt A alternate words will be replaced if the image fails to load $"> 4img src A Bm!picture.gifD alignA BrightD altA Bpicture koD width A B1FHD heightAD2FHD6

25

&I 4#

Wit6in a page
+a 6re7 9 :Dna>e;, (our lin/ na>e 6ere +-a, -)$5$> %ame an! label or name !ou want to B umpD fromI positioned at the point such that to ump from.

+a na>e 9 :na>e;, (our lin/ na>e 6ere +-a, ump toI fits at the place in the document where !ou want to B umpD to. $"> *able of 8ontents -y Personal In+ormation -y A++iliation A .u%$y /ote &! /ersonal 'nformation &! name is Quan dela 8ru2. ' live at &arikina with m! parents, <omingo and 5osalinda. ' am the fourth of m! parentRs five children. ' am taking up ., 8omputer $ngineering from the ?niversit! of the $ast. &! ;ffiliation ' am the $ditor3in38hief of the universit!Rs student publication, *he <awn. ; Joodb!e %ote *hank !ou for reading m! homepage. .!eC *he document is as follows> 4html6 4head6 4title6 &! )omepageC 49title6 49head6 4bod!6 *able of 8ontents 4br6 4a hrefA BKpersonalD6 &! /ersonal 'nformation 49a64br6 4a hrefA BKaffiliationD6 &! ;ffiliation 49a64br6 4a hrefA BKgudb!D6 ; Judb! %ote 49a64br64br6 4br6 4a nameA BpersonalD6 &! /ersonal 'nformation 49a6 4br64br6

26

&! name is Quan dela 8ru2. ' live at &arikina with m! parents, <omingo and 5osalinda. ' am the fourth of m! parentRs five children. ' am taking up ., 8omputer $ngineering from the ?niversit! of the $ast. 4br64br6 4a nameADaffiliationD6&! ;ffiliation49a6 4br64br6 ' am the $ditor3in38hief of the universit!Rs student publication, *he <awn.4br64br6 4a nameADgudb!D6; Judb! %ote49a64br64br6 *hank !ou for reading m! homepage. .!eC 49bod!6 49html6

Anot6er !ile or Page

+a 6re7 9 :)R&;, (our lin/ na>e 6ere +-a, -)$5$> ?5+ the e"act location of the file !ou are going to call $"> &! Lavorite -ebsites> 0ahoo1 !otmail Unimo$ile E2mail me1 *he document is as follows> 4html6 4bod!6 &! Lavorite -ebsites> 4br6 4a href A Bhttp>99www.!ahoo.comD6 =ahooC 49a6 4br6 4a href A Bhttp>99www.hotmail.comD6 )otmail 49a64br6 4a href A Bhttp>99www.unimobile.comD6 ?nimobile 49a64br64br6 4a href A Bmailto> dcru2Sglobalpino!.comD6 $3mail meC 49a6 49bod!6 49html6

2:

TAB&$# +table, +-table, ATTRIBUTE# -idth A in percentage or pi"el of the browser specifies the si2e of the table 0hori2ontal si2e1 )eight A in percentage or pi"el of the browser specifies the si2e of the table 0vertical si2e1 ;lign A left 9 right 9 center alignment alignment of the table in the screen .order A nI thickness 9 si2e of the table borderI a binder around the table .gcolor A colorI background color of the entire table .ackground A ?5+I ,ets the background picture of the whole table .ordercolor A colorI sets the color of the entire border 8ellspacing A nI spaces between each border 8ellpadding A nI <istance between the edge of the cell # the edge of the content +caption, +-caption, displa!s the heading or title of the table tag that defines the table

ATTRIBUTE ;lign A BbottomD if the caption is placed at the bottom of the table instead of placing it on top +t6, +-t6, *Ta$le !ea%ing, creates a row or column heading in a table. *he element is similar to the 4td6 element but emphasi2es the te"t in the cell or makes the cell content in bold letters and center aligned to distinguish it from te"t in 4td6 cells.

ATTRIBUTE# 8olspan A n -here n A no. of cols to be e"tended or covered 5owspan A n -here n A no. of rows to be e"tended or covered .gcolor A BcolorD sets the background color .ackground A ?5+, specifies the background picture .ordercolor A BcolorD, sets the color of the border and must be used with the border attribute +tr, +-tr, *Ta$le Row or Ta$le Line, specifies the start # end of a line

ATTRIBUTE#

2@

;lign A left 9 right 9 center alignment .gcolor A BcolorD, sets the background color .ackground A ?5+, specifies the background picture .ordercolor A BcolorD sets the color of the border and must be used with the border attribute +td, +-td, *Ta$le Column, specifies the column of the te"t

ATTRIBUTE# ;lign A left 9 right 9 center alignment 8olspan A n 5owspan A n -here n A no. of rows 9 cols to be e"tended or covered .gcolor A BcolorD, sets the background color .ackground A ?5+, specifies the background picture .ordercolor A BcolorD, sets the color of the border and must be used with the border attribute !RAM$# +7ra>eset, +-7ra>eset, takes the place of 4bod!6 or a frame

formatted bod! and divides the screen according to the specified rows or columns ATTRIBUTE# 5ows A BnH, nH, ND ,pecifies the percentage of the bod! to be covered b! the row3t!pe of frame 8ols A BnH, nH, ND ,pecifies the percentage of the bod! to be covered b! the column3t!pe of frame OT$: 5ows and cols in 4frameset6 can also be declared in pi"els. +7ra>e, defines what document to be labeledI name for the frame

ATTRIBUTE# ,58 A B?5+D ,pecifies the e"act location of the file to be called %ame A Bwindow nameD %ame given to the window ,crolling A BnoD <eclared if !ou want !our window not to have a scrolling bar T%oresi2eU <eclared if !ou want !our window maintain its si2e 2E

SELF;CHEC: NO.3 CUSTOMIZING ISUAL ENHANCEMENTS AND PAGE ORGANIZATION 'upp!y t e inform7tion 7s<e9+ %+ )i;e t e (TML t7" t 7t cre7tes 7 scro!!in" or mo;in" teHt from one p7rt of t e screen 7n9 f!o7ts 7cross to t e !eft or ri" t+ #+ Cre7te 7 simp!e comment !ine co9e *+ T is is t e (TML t7" for intro9ucin" 7n unnum6ere9 !ist+ 2+ T is is t e (TML t7" for intro9ucin" 7n or9ere9 !ist+ 5+ T is is t e (TML t7" use9 to i9entify t e items on 7 specifie9 !ist+ 3+ )i;e t e (TML t7" use to p!7ce 7n im7"e in 7 =e6 p7"e+ ,+ )i;e t e (TML t7"s use9 to !in< =it in 7 p7"e O t e PAump fromQ 7n9 t e PAump toQ t7"s+ 4+ )i;e t e (TML t7" use9 to !in< to 7not er fi!e or p7"e+ /+ )i;e t e (TML t7" use9 to insert 7 t76!e in t e =e6 p7"e+ %$+ )i;e t e (TML t7"s use9 to cre7te ro= 7n9 co!umn in 7 t76!e respecti;e!y+ %%+ )i;e t e (TML t7" use9 to cre7te fr7me?s@ in t e =e6 p7"e+ Inc!u9e itCs t=o ?#@ 7ttri6utes+ Enumer7tion %#-%,+ )i;e t e siH ?3@ 7ttri6utes of t e Pm7rFueeQ t7"+ %4-#%+ )i;e t e four ?2@ 7ttri6utes of t e Pim7"eQ t7"+ ##-*$+ )i;e t e nine ?/@ 7ttri6utes of t e Pt76!eQ t7"+ *%-*2+ )i;e t e four ?2@ 7ttri6utes of t e Pt76!e ro=Q t7"+ *5-2$+ )i;e t e siH ?3@ 7ttri6utes of t e Pt76!e co!umnQ t7"+

3F

MODEL ANSWER TO SELF;CHEC: NO.3

'upp!y t e inform7tion 7s<e9+ %+ )i;e t e (TML t7" t 7t cre7tes 7 scro!!in" or mo;in" teHt from one p7rt of t e screen 7n9 f!o7ts 7cross to t e !eft or ri" t+ Km7rFueeLKMm7rFueeL #+ Cre7te 7 simp!e comment !ine co9e KR-t is is 7 simp!e comment !ine co9e-L *+ T is is t e (TML t7" for intro9ucin" 7n unnum6ere9 !ist+ Ku!LKMu!L 2+ T is is t e (TML t7" for intro9ucin" 7n or9ere9 !ist+ Ko!LKMo!L 5+ T is is t e (TML t7" use9 to i9entify t e items on 7 specifie9 !ist+ K!iLKM!iL 3+ )i;e t e (TML t7" use to p!7ce 7n im7"e in 7 =e6 p7"e+ Kim" srcSQfi!en7meQL ,+ )i;e t e (TML t7"s use9 to !in< =it in 7 p7"e O t e PAump fromQ 7n9 t e PAump toQ t7"s+ K7 refSQTn7meQLKM7L K7 n7meSQn7meQLKM7L 4+ )i;e t e (TML t7" use9 to !in< to 7not er fi!e or p7"e+ K7 refSQU&LQLKM7L /+ )i;e t e (TML t7" use9 to insert 7 t76!e in t e =e6 p7"e+ Kt76!eLKMt76!eL %$+ )i;e t e (TML t7"s use9 to cre7te ro= 7n9 co!umn in 7 t76!e respecti;e!y+ KtrLKMtrL Kt9LKMt9L %%+ )i;e t e (TML t7" use9 to cre7te fr7me?s@ in t e =e6 p7"e+ Inc!u9e itCs t=o ?#@ 7ttri6utes+ Kfr7meset ro=sSnU co!sSnULKMfr7mesetL Enumer7tion %#-%,+ )i;e t e siH ?3@ 7ttri6utes of t e Pm7rFueeQ t7"+ BE(A1IO&8 DI&ECTION8 'C&OLLAMOUNT8 'C&OLLDELAY8 0IDT(8 LOOP %4-#%+ )i;e t e four ?2@ 7ttri6utes of t e Pim7"eQ t7"+ 0IDT(8 (EI)(T8 ALI)N8 ALT ##-*$+ )i;e t e nine ?/@ 7ttri6utes of t e Pt76!eQ t7"+ 0IDT(8 (EI)(T8 ALI)N8 BO&DE&8 B)COLO&8 BAC.)&OUND8CELL'PACIN)8 CELLPADDIN) *%-*2+ )i;e t e four ?2@ 7ttri6utes of t e Pt76!e ro=Q t7"+ ALI)N8 B)COLO&8 BAC.)&OUND8 BO&DE&COLO& *5-2$+ )i;e t e siH ?3@ 7ttri6utes of t e Pt76!e co!umnQ t7"+ ALI)N8 COL'PAN8 &O0'PAN8 B)COLO&8 BAC.)&OUND8BO&DE&COLO&

31

ACTI ITY SHEET NO.3 ACTI ITY TITLE UNIT READING OBJECTI ES : : : : CUSTOMIZE ISUAL SETTING AND PAGE ORGANIZATION CREATE WEB PAGE USING HTML INFORMATION SHEET NO.3 CREATE A SIMPLE WEB PAGE WITH THE INFORMATION SHOWN ON THE SAMPLE OUTPUT NO.3 ATE'(A!S 'E)*('E+, GREMO ABLE STORAGE MEDIA E)*(P E-T 'E)*('E+, GA GOOD WOR:ING PC WITH AN HTML EDITOR (NOTEPADA WORDPADA MS WORD) P'.CE+*'E, 1. RE IEW NOTES ON HTML BASIC STRUCTURE AND BASIC COMMAND TAGS. 2. IEW AND ANALYZE THE WEB PAGE SHOWN ON THE SAMPLE OUTPUT NO.3 3. ENCODE THE APPROPRIATE HTML CODES. ". IEW AND CHEC: YOUR WOR:. B. SA E IN YOUR REMO ABLE STORAGE MEDIA.

LABORATORY WOR:

32

SAMPLE OUTPUT TO ACTI ITY SHEET NO.3

33

LEA&NIN) OUTCOME 2: USE HTML FORMS IN WEB PAGES LEA&NIN) ACTI1ITY LEA&NIN) 'TEP' &e79 inform7tion s eet no+2 USE HTML FORMS IN WEB PAGES Perform se!f-c ec< no+ 2 USE HTML FORMS IN WEB PAGES Comp7re 7ns=ers to mo9e! 7ns=er to se!f-c ec< no+2 Perform 7cti;ity s eet no+ 2 USE HTML FORMS IN WEB PAGES Comp7re output to s7mp!e output of 7cti;ity s eet no+2 &E'OU&CE' INFO&MATION '(EET NO+2 'ELF-C(EC. NO+2 MODEL AN'0E& TO 'ELFC(EC. NO+2 ACTI1ITY '(EET NO+2 'AMPLE OUTPUT OF ACTI1ITY '(EET NO+2

34

INFORMATION SHEET NO." USE HTML FORMS IN WEB PAGES !ORM# +7or>, +-7or>, defines the form

+input , +-input, single tag option for gathering information ATTRIBUTE# *!pe A Bte"t 9 password 9 checkbo" 9 radio 9 reset 9 submitD ,ets the t!pe of input field !ou want to displa! I#$%T TY$&': *$P* default t!peI displa!s a simple line of te"t. &ptions ,i2e A si2e specifies the si2e of control 0in characters1 &a"length A length 0'ndicates the ma" no. of characters that can be entered into a te"t control1 /;,,-75< a modified te"t field, displa!s t!ped characters as bullets instead of the characters actuall! t!ped. &ptions %ame A Bvariable nameD ,i2e A si2e &a"length A length 8)$8G.7P displa!s a simple checkbo" that can be checked or empt! use a checkbo" when the choice is !es or no and doesnRt depend on an!thing else. &ptions %ame A Bvariable nameD 8hecked A defaults the checkbo" as checked 5;<'7 more comple" version of checkbo" that allows onl! one of a set 35

to be chosen. &ptions %ame A Bvariable nameD 8hecked A defaults the radio as chosen 5$,$* displa!s a button with the preset function of clearing all the data in the form to its original value. &ption Oalue A provide te"t other than B5esetD for the button ,?.&'* displa!s a button with the preset function of sending data in the form to the server to be processed. &ption Oalue A provide te"t other than B,ubmitD for the button

T$CTAR$A +textarea, +-textarea, ATTRIBUTE# %ame A Bvariable nameD ,ets the name of the te"t area. *his name is used when the element is used within a form element. 8ols A m -here m A no. of characters 9 columns 0width1 5ows A n -here n A no. of rows 0height1 #$&$"T +select, +-select, shows a list of choices in either a pop3up menu or a scrollable list provides a field to enter multiple lines of information. .! default, 4te"tarea6 shows a blank field of 4 rows and 4F characters wide.

ATTRIBUTE# %ame A Bvariable nameD 0<efines the name of the data1 ,i2e A si2e 0<etermines how man! choices to show.1 'f si2e A 1 or omitted, the choices are shown as a pop3up menu. 'f si2e A 2 or higher, choices are shown in a scrollable bo". 'f si2e is larger than the no. of choices !ou have within ,$+$8*, a BnothingD choice is added. -hen the user chooses this, 36

T&ultipleU +option,

itRs returned as an empt! field. ;llows multiple selections.

where the choices are listed ATTRIBUTE# T,electedU indicates that this item is the default.

SELF;CHEC: NO." USE HTML FORMS IN WEB PAGES A-)3$, '8$ +04403&-1: 1. W8(' &) '8$ HTML '(1 '8(' /$+&-$) ( +0,= &- ( 3$% 7(1$> 2. W8(' &) '8$ )&-14$ HTML '(1 07'&0- +0, 1('8$,&-1 &-+0,=('&0-> 3. W8(' (,$ '8$ )&@ (6) ('',&%6'$) 0+ '8$ HTML '(1 0+ '8$ (-)3$, &- SELF; CHEC: NO."> ". W8(' HTML '(1 7,02&/$) ( +&$4/ '8(' $-(%4$) 3$% 7(1$ 2&)&'0,) '0 $-'$, =64'&74$ 4&-$) 0+ &-+0,=('&0-> B. W8(' HTML '(1 )803) ( 4&)' 0+ *80&*$) &- $&'8$, ( 707;67 =$-6 0, ( )*,044(%4$ 4&)'>

3:

MODEL ANSWER TO SELF;CHEC: NO." Ans=er t e fo!!o=in": %+ 0 7t is t e (TML t7" t 7t 9efines 7 form in 7 =e6 p7"eI H+0,=IHJ+0,=I #+ 0 7t is t e sin"!e (TML t7" option for "7t erin" inform7tionI H&-76'IHJ&-76'I *+ 0 7t 7re t e siH ?3@ 7ttri6utes of t e (TML t7" of t e 7ns=er in 'ELF-C(EC. NO+2I T$@'A 7())30,/A *8$*.%0@A ,(/&0 (,(/&0 %6''0-)A ,$)$'A (-/ )6%=&' 2+ 0 7t (TML t7" pro;i9es 7 fie!9 t 7t en76!es =e6 p7"e ;isitors to enter mu!tip!e !ines of inform7tionI H'$@'(,$(IHJ'$@'(,$(I 5+ 0 7t (TML t7" s o=s 7 !ist of c oices in eit er 7 pop-up menu or 7 scro!!76!e !istI H)$4$*'IHJ)$4$*'I

3@

ACTI ITY SHEET NO." ACTI ITY TITLE UNIT READING OBJECTI ES : : : : USE HTML FORMS IN WEB PAGES CREATE WEB PAGE USING HTML INFORMATION SHEET NO." CREATE A SIMPLE WEB PAGE WITH THE INFORMATION SHOWN ON THE SAMPLE OUTPUT NO." ATE'(A!S 'E)*('E+, GREMO ABLE STORAGE MEDIA E)*(P E-T 'E)*('E+, GA GOOD WOR:ING PC WITH AN HTML EDITOR (NOTEPADA WORDPADA MS WORD) P'.CE+*'E, 1. RE IEW NOTES ON HTML BASIC STRUCTURE AND BASIC COMMAND TAGS. 2. IEW AND ANALYZE THE WEB PAGE SHOWN ON THE SAMPLE OUTPUT NO." 3. ENCODE THE APPROPRIATE HTML CODES. ". IEW AND CHEC: YOUR WOR:. B. SA E IN YOUR REMO ABLE STORAGE MEDIA.

LABORATORY WOR:

3E

SAMPLE OUTPUT TO ACTI ITY SHEET NO."

4F

AN'0E&:
K(TMLL K(EADLKTITLEL'ur;ey: (o= to )et t e C7tsKMTITLELKM(EADL KBODYL K(%L'ur;ey: (o= to )et t e C7tsKM(%L K(& 'IVES5 co!orSW6!7c<W 0IDT(S3$U 7!i"nS!eftL KPLK(2LKiL0eC;e 9eci9e9 to t7<e 7 sur;ey 76out t e 6est pr7n<s to p!7y on t e c7ts+ P!e7se comp!ete t e sur;ey 7n9 c!ic< t e 'u6mit 6utton+KMiLKM 2LKMPL KFO&M MET(ODSWPO'TW ACTIONSW ttp:MM===+r7ycomm+comMc"i-6inMem7i!Ir7ycommWL KINPUT 'IVES*5 TYPESTEXT NAMESQn7meQLYour N7meKPL KINPUT TYPESC(EC.BOX NAMESQT ro=Q 1ALUESQT ro=B7!!oonQL T ro= 7 67!!oonRK6rL KINPUT TYPESC(EC.BOX NAMESQ(ur!Q 1ALUESQ(ur!B7!!oonQL (ur! 7 67!!oonRK6rL KINPUT TYPESC(EC.BOX NAMESQLo6Q 1ALUESQLo6B7!!oonQL Lo6 7 67!!oonRKPL KINPUT TYPES&ADIO NAMESQPr7n<Q 1ALUESQDoQ C(EC.EDLDo it--itC!! 6e funnyRKB&L KINPUT TYPES&ADIO NAMESQPr7n<Q 1ALUESQDoNotQLDonCt p!7y 7 pr7n<8 me7nieRKB&L KINPUT TYPES&ADIO NAMESQPr7n<Q1ALUESQDoNotC7reQLI cou!9nCt c7re !ess+T eyCre your c7ts8 7n9 youC!! 7;e to !i;e =it yourse!f+KPL K'ELECT NAMESMet o9L KOPTION 1ALUESsin"!eL'in"!e B7!!oon KOPTION 1ALUESmu!tip!eLMu!tip!e B7!!oons KOPTION 1ALUES oseLBust Use t e (ose KM'ELECTLKPL KTEXTA&EA NAMESQcommentsQ &O0'S* COL'S2$LEnter your comments ere+KMTEXTA&EALKPL KINPUT TYPES'UBMIT 1ALUESW'u6mitWL KINPUT TYPES&E'ET 1ALUESW&esetWL KMFO&ML KMBODYL KM(TMLL

41

DATAME# INSTITUTE OF COMPUTER TECHNOLOGY (BRANCH)

PRELIMINARY E#AMINATION IN CREATING WEB PAGE USING HTML

NAME XXXXXXXXXXXXXXXXXXXX COU&'E XXXXXXXXXXXXXXXXXXXX DATE XXXXXXXXXXXXXXXXXX &ATIN) XXXXXXXXXXXXXXXXXX

I.I/$-'&+&*('&0XXXXXXXXXXXX%+ A "!o67! connection of t ous7n9s of computer net=or<s is = 7t =e c7!! t e --I XXXXXXXXXXXX#+ 0 7t consists of count!ess num6ers of p7"es e!9 in o;er 7 mi!!ion computer sc7ttere9 7cross t e =or!9 7n9 Aoine9 to"et er 6y yperteHt !in<s 7n9 7ccesse9 t rou" 7 =e6 6ro=serI XXXXXXXXXXXX*+ T ese 7re 9ocuments !in<e9 so t 7t c!ic<in" on 7 6utton8 icon or <ey=or9 t7<es you into 7 re!7te9 9ocument = ere;er in t e =e6 it m7y 6e+ XXXXXXXXXXXX2+ It is 7 pro"r7m t 7t !ets you !e7p 6et=een yperteHt !in<s to re79 teHt8 ;ie= "r7p ics8 ;i9eos 7n9 e7r soun9s+ XXXXXXXXXXXX5+ It is 7 n7me "i;en to p7"e t 7t is 9isp!7ye9 = en inform7tion is reFueste9 from t e =or!9 =i9e =e6+ XXXXXXXXXXXX3+ It is t e co!!ecti;e n7me for 7 co!!ection of inter-re!7te9 =e6 p7"es+ XXXXXXXXXXXX,+ It is 7n or"7niE7tion t 7t offers 7ccess to some or 7!! t e ser;ices 7;7i!76!e o;er t e Internet+ XXXXXXXXXXXX4+ It is 7 !7n"u7"e use9 to construct =e6 p7"es+ XXXXXXXXXXXX/+ T ese 7re instructions cont7ine9 =it in 7n"!e 6r7c<ets t 7t st7te 7ction to perform in (TML+ XXXXXXXXXXXX%$+ It is 7n e9itin" too! or pro"r7m in cre7tin" 7 =e6 p7"e8 e+"+ Notep79 or M' 0or9+ XXXXXXXXXXXX%%+ 0 7t is t e (TML t7" for 7 !ine 6re7<I XXXXXXXXXXXX%#+ 0 7t is t e (TML t7" for 7 p7r7"r7p 6re7<I XXXXXXXXXXXX%*+ 0 7t is t e (TML t7" for 7 oriEont7! ru!eI XXXXXXXXXXXX%2+ 0 7t is t e (TML t7" for t e 6i""est e79in" siEeI XXXXXXXXXXXX%5+ 0 7t is t e (TML t7" for t e sm7!!est e79in" siEeI II.H(-/);0- (2B7'))
'7mp!e Output:

42

DATAME# INSTITUTE OF COMPUTER TECHNOLOGY (BRANCH)

MIDTERM E#AMINATION IN CREATING WEB PAGE USING HTML

NAME XXXXXXXXXXXXXXXXXXXXXXXX COU&'E XXXXXXXXXXXXXXXXXXXXXXXX (7n9s On ?2$pts@ '7mp!e output: DATE XXXXXXXXXXXXXXXXXXX &ATIN) XXXXXXXXXXXXXXXXXXX

43

Jnote: ADD DESIGN AND ISUAL ENHANCEMENTS WITH THE FOLLOWING: 1. MARQUEE 2. ADD IMAGE FROM FILE 3. FONT COLORS SI!ES AND FACES"ST#LES $. TA%LE %AC&GROUND AND COLOR

DATAME# INSTITUTE OF COMPUTER TECHNOLOGY (BRANCH)

FINAL E#AMINATION IN CREATING WEB PAGE USING HTML

NAME XXXXXXXXXXXXXXXXXXXX COU&'E XXXXXXXXXXXXXXXXXXXX (AND'-ON A+ 'AMPLE OUTPUT: ?2$ pts@ DATE XXXXXXXXXXXXXXXXX &ATIN) XXXXXXXXXXXXXXXXX

44

B+ Cre7te your o=n =e6 site =it t e fo!!o=in" inform7tion: ?proAect@ %+ person7! inform7tion #+ sc oo! inform7tion ?97t7meH: course8 su6Aect8 semester8 instructor@ *+ !in<s to your pre!im eH7m8 mi9term eH7m8 7n9 fin7! eH7m?7@+

45