CBLM+-+HTML Make it easier for other people to find your content by providing more information about...

8/13/2019 CBLM+-+HTML Make it easier for other people to find your content by providing more information about it. Make

1/45

COMPETENCY BASEDLEARNING MATERIAL

UNIT OF COMPETENCY:

CREATE WEB PAGES USING HTML

MODULE TITLE:

CREATING WEB PAGES USING HTML

By:

MR. JOSEPH E. NIEGODATAMEX Institute of Computer Tecno!o"y

#$%$

PC OPERATIONS NC IIINFO&MATION AND COMMUNICATION' TEC(NOLO)Y

1


2/45

CONTENTS:

PAGE

INTRODUCTION *

LEARNING OUTCOME 1 (FAMILIARIZE BASIC HTML TAGS) 6INFO&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+# %2'ELF-C(EC. NO+# %3MODEL AN'0E& TO 'ELF-C(EC. NO+# %,

ACTI1ITY '(EET NO+# %4'AMPLE OUTPUT TO ACTI1ITY NO+# %/

LEARNING OUTCOME 3(CUSTOMIZING ISUAL ENHANCEMENTS AND PAGE ORGANIZATION) 2!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) 3"INFO&MATION '(EET NO+2 *5'ELF-C(EC. NO+2 *,MODEL AN'0E& TO 'ELF-C(EC. NO+2 *4

ACTI1ITY '(EET NO+2 */'AMPLE OUTPUT TO ACTI1ITY NO+2 2$

PRELIMINARY E#AMINATION 2#

MIDTERM E#AMINATION 2*

FINAL E#AMINATION 22

INTRODUCTION

2


3/45

0e6 sites 7re m7ny tin"s to m7ny peop!e+ To some8 7 0e6 site is 7n e!ectronic6usiness c7r9 to oters8 7n on!ine storefront to sti!! oters8 7 c!7ssifie9 79;ertisementor 7 f7mi!y poto 7!6um+ Te tric< to cre7tin" 7 successfu! 0e6 site is to fi"ure out =7t7 0e6 site is to you > 7n9 ten to 6ui!9 your site 7n9 m7


4/45

A customer sur;ey+

Lists of freuent!y 7s suc 7s FrontP7"e orDre7m=e7;er >8 you m7y prefer to cre7te your p7"es from scr7tc usin" 7 simp!e teHte9itor 7n9 te (TML


5/45

Tis unit 9efines te competency reuire9 to cre7te =e6 p7"es usin" (TML+

LEARNING OUTCOMES:

At te en9 of te mo9u!e8 te stu9ent or tr7inee is eHpecte9 to:

F7mi!i7rie 67sic (TML t7"s

Form7t (TML p7"es

Customie ;isu7! en7ncements 7n9 p7"e or"7ni7tion

Use (TML forms in =e6 p7"es

PRERE9UISITE NOWLEDGE AND SILLS

Fun97ment7!


6/45

LEA&NIN) OUTCOME %:FAMILIARIZE BASIC HTML TAGS

LEA&NIN) ACTI1ITY

LEA&NIN) 'TEP' &E'OU&CE' &e79 inform7tion seet no+%

FAMILIARIZE BASIC HTML TAGS

Perform se!f-cec< no+%


Comp7re 7ns=ers to mo9e! 7ns=er

to se!f-cec< no+%

Perform 7cti;ity seet no+%


Comp7re output to s7mp!e output of

7cti;ity seet no+%

INFO&MATION '(EET NO+%

'ELF-C(EC. NO+%

MODEL AN'0E& TO 'ELF-

C(EC. NO+%

ACTI1ITY '(EET NO+%

'AMPLE OUTPUT OF ACTI1ITY

'(EET NO+%

6


7/45

INFORMATION SHEET NO.1FAMILIARIZE 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 millioncomputer 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 intorelated 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 IMPORTAT !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'/ an organiation offering access to some or all of the servicesavailable over the internet.

HTM& )!per *e"t &arkup +anguage 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$". )

Container has beginning 07pening and ending 08losing tag and in between is the informationthat is controlled b! the container.

$". old 9

:


8/45

BA#I" #TR)"T)R$

)*&+

)$; u*his statement is underlined.9u

*his statement is underlined.*his statement is underlined.

+i, +-i,+i, +-i, 'talic'talic

$"> i *he whole statement is in 'talic. 9i$"> i *he whole statement is in 'talic. 9i

The whole statement is in Italic.The whole statement is in Italic.

+center, +-center,+center, +-center, 8enter ;lignment8enter ;lignment

+sup, +-sup,+sup, +-sup, uperscriptuperscript

$"> 1@$"> 1@thth A 1@ sup th 9supA 1@ sup th 9sup

+sub, +-sub,+sub, +-sub, ubscriptubscript

$"> "$"> "22 A " sub 2 9sub A " sub 2 9sub

+bloc/0uote,+bloc/0uote,

+-bloc/0uote,+-bloc/0uote, ?sed for long (uotes or citations?sed for long (uotes or citations

$"> block(uote B;n e!e for an e!e, a tooth for a toothCD$"> block(uote B;n e!e for an e!e, a tooth for a toothCD

9block(uote 9block(uote

1nbsp21nbsp2 $(uivalent to 1 space 0%on raking pace$(uivalent to 1 space 0%on raking pace

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

lines, and tabs significant.lines, and tabs significant.

@


9/45

SELF;CHEC NO.1FAMILIARIZE BASIC HTML TAGS

I. A-$, 0, 7745 '8$ ,$


10/45

I+ Ans=er or supp!y te reuire9 inform7tion+

%+ A "!o67! connection of tous7n9s of computer net=or


11/45

ACTIITY TITLE : FAMILIARIZE BASIC HTML TAGS

UNIT : CREATE WEB PAGE USING HTML

READING : INFORMATION SHEET NO.1

OBJECTIES : CREATE A SIMPLE WEB PAGE WITH THEINFORMATION SHOWN ON THE SAMPLEOUTPUT NO.1

LABORATORY WOR : ATE'(A!S 'E)*('E+,

REMOABLE STORAGE MEDIA

E)*(PET 'E)*('E+,

A GOOD WORING PC WITH AN HTML EDITOR(NOTEPAD WORDPAD MS WORD)

P'CE+*'E,

1. REIEW NOTES ON HTML BASIC STRUCTURE AND BASIC COMMANDTAGS.

2. IEW AND ANALYZE THE WEB PAGE SHOWN ON THE SAMPLE OUTPUTNO.1

3. ENCODE THE APPROPRIATE HTML CODES.". IEW AND CHEC YOUR WOR.. SAE IN YOUR REMOABLE STORAGE MEDIA.

SAMPLE OUTPUT TO ACTIITY SHEET NO.1

11


12/45

LEA&NIN) OUTCOME #:FORMAT HTML WEB PAGES

12


13/45

LEA&NIN) ACTI1ITY

LEA&NIN) 'TEP' &E'OU&CE'

&e79 inform7tion seet no+#

FORMAT HTML WEB PAGES

Perform se!f-cec< no+ # FORMAT

HTML WEB PAGES


to se!f-cec< no+#

Perform 7cti;ity seet no+ #

FORMAT HTML WEB PAGES

Comp7re output to s7mp!e output of7cti;ity seet no+#

INFO&MATION '(EET NO+#

'ELF-C(EC. NO+#


C(EC. NO+#

ACTI1ITY '(EET NO+#

'AMPLE OUTPUT OF ACTI1ITY'(EET NO+#

INFORMATION SHEET NO.2FORMAT HTML WEB PAGES

13


14/45

PARA%RAPH &I$ BR$A4# A* HORI5OTA& R)&$

+br, Line Break functions as the $nter Ge!

+p, Paragraph leaves a line 0e(ual to 2 line breakATTRIBUTE

;lign A aligns the paragraph left 0default alignment, center, right

$"> p align A right 9p

+6r, !ori"ontal Rule produces a horiontal line with indented effect

ATTRIBUTE#

ie A n 0in percentage or pi"els *hickness of the line

-idth A n 0in percentage or pi"els pecifies the length of the line

8olor A Bcolor nameD h1 -elcomeC 9h1 h5 align A right -elcome to m! humble homeC 9h5

BO*( ATTRIB)T$#

+body, +-body,

ATTRIBUTE#

bgcolor A Bcolor nameD


15/45

!OT !ORMATTI%

+7ont si8e 9 n, +-7ont, changes the font sieI 1 is the smallest font sie, 3 is the defaultfont sie, and : is the largest sie.

$"> font sie A 5 )ello -orldC 9font

+7ont color 9 color;, +-7ont, changes the font color.

't can be in he"adecimal e(uivalent or the JJ code,and the color name itself.

$"> font color A BgreenD )ello -orldC 9font

7 font color A BKFFLLFFD )ello -orldC 9font

+7ont 7ace 9 7ont type;, +-7ont,changes the font st!le or t!pe.

$"> font face A Btempus sans itcD )ello -orldC 9font

ote:

=ou can oin all the font tags in ust one tag or bracket and terminate it using onl! one

closing tag.

$">

font sie A 4 color A B!ellowD face A Bcomic sans msD )iC 9font

e

Blue Magenta (ellow "yan

15


16/45

SELF;CHEC NO.2FORMAT HTML WEB PAGES

Ans=er te fo!!o=in":

%+ 07t is te (TML t7" for 7 !ine 6re7


17/45


18/45

ACTIITY SHEET NO.2

ACTIITY TITLE : FORMAT HTML WEB PAGES






E)*(PET 'E)*('E+,


P'CE+*'E,





1@


19/45

1E


20/45

LEA&NIN) OUTCOME *:CUSTOMIZING ISUAL ENHANCEMENTS AND PAGE ORGANIZATION

LEA&NIN) ACTI1ITY

LEA&NIN) 'TEP' &E'OU&CE' &e79 inform7tion seet no+*

CUSTOMIZING ISUALENHANCEMENTS AND PAGEORGANIZATION

Perform se!f-cec< no+ *



to se!f-cec< no+*

Perform 7cti;ity seet no+ *



7cti;ity seet no+*

INFO&MATION '(EET NO+*

'ELF-C(EC. NO+*


C(EC. NO+*

ACTI1ITY '(EET NO+*


'(EET NO+*

2F


21/45

INFORMATION SHEET NO.3CUSTOMIZING 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

mar(uee behaviorADalternateD scrollamountA1FF directionADleftD widthA:5H

'nformatics 8omputer 'nstitute 9mar(uee

"OMM$T#

+@ , inserts comment9s that cannot be seen in the page but can be seen in the source

code.

$"> CM*his is the heading.

"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

+ol, +-ol, &r%ere% Lists numbers the items in the listATTRIBUTE

*!pe A Ba 9 ; 9 ' 9 i 9 D8hanges the t!pe of ordinal number used

21


22/45

+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:

html

headtitle &! chedule for *omorrow 9title

9head

bod!*hings to be done ne"t morning> br

ul

li -ake upli rush *eeth

li 8hange 8lothes

li $at reakfast

li Jo to -ork

9ul9bod!

9html

7r !ou can change the 'ul( ')ul(into 'ol( ')ol(to change the bullets into ordinal numbers.

1. *hings to be done ne"t morning>

2. -ake up

3. rush *eeth

4. 8hange 8lothes5. $at reakfast

6. Jo to -ork

You can also change the type of numbering you want:

ol t!peADaD *his will change the numbers to a, b, c, N

ol t!peAD;D *his will change the numbers to ;, , 8, Nol t!peADiD *his will change the numbers to i, ii, iii, N

ol t!peAD'D *his will change the numbers to ', '', ''', N

22


23/45

$#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$"HO&O%(

'. 8ertified 'nternet /rofessional /rogram 08'//;. 'nternet $ssentials

. asic -ebpage


24/45

the sample is encoded like the following:

htmlhead

title


25/45

*$!IITIO &I#T

+dl, +-dl, *%e+inition list,produces automaticall! a 2 column list with items on theleft and definition on the right.

+dt, *%e+ine% term,te"t is a term to be defined # should be displa!ed in the left handcolumn of a definition list.

+dd, te"t is a definition of a term and should be displa!ed in the righthand column of

a definition list.$">

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:

html

head

title g src 9 7ilena>e;, used to place an image in a document

ATTRIBUTE#-idth A changing the sie of the image in terms of pi"el or H of the browser 0horiontal

)eight A changing the sie of the image in terms of pi"el or H of the browser 0vertical

;lign A Bleft 9 rightD;lt A alternate words will be replaced if the image fails to load

$"> img src A Bm!picture.gifD alignA BrightD altA Bpicture koD width A B1FHDheightAD2FHD

25


26/45

&I4#

Wit6in a page

+a 6re7 9 Dna>e;, (our lin/ na>e 6ere +-a,

-)$$> %ame an! label or name !ou want to BumpD fromI positioned at the point suchthat 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 BumpD to.

$">

*able of 8ontents-y Personal In+ormation

-y A++iliationA u%$y /ote

&! /ersonal 'nformation

&! name is Quan dela 8ru. ' live at &arikina with m! parents,


27/45

&! name is Quan dela 8ru. ' live at &arikina with m! parents,


28/45

TAB&$#

+table, +-table, tag that defines the table

ATTRIBUTE#

-idth A in percentage or pi"el of the browser specifies the sie of the table 0horiontalsie

)eight A in percentage or pi"el of the browser specifies the sie of the table 0vertical sie

;lign A left 9 right 9 center alignment alignment of the table in the screen

order A nI thickness 9 sie of the table borderI a binder around the tablegcolor A colorI background color of the entire table

ackground A ?+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 border8ellpadding A nI


29/45

;lign A left 9 right 9 center alignment

gcolor A BcolorD, sets the background color

ackground A ?+, specifies the background pictureordercolor 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

owspan 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 ?+, specifies the background picture

ordercolor A BcolorD, sets the color of the border and must be used with theborder attribute

!RAM$#

+7ra>eset, +-7ra>eset, takes the place of bod! or a frame

formatted bod! and divides the screen according to the specified rows or columns

ATTRIBUTE#

ows A BnH, nH, NDpecifies the percentage of the bod! to be covered b! the rowt!pe of frame

8ols A BnH, nH, ND

pecifies the percentage of the bod! to be covered b! the columnt!pe of frame

OT$: ows and cols in frameset can also be declared in pi"els.

+7ra>e, defines what document to be labeledI name for the frame

ATTRIBUTE#

8 A B?+Dpecifies the e"act location of the file to be called

%ame A Bwindow nameD%ame given to the window

crolling A BnoD


30/45

SELF;CHEC NO.3CUSTOMIZING ISUAL ENHANCEMENTS AND PAGE ORGANIZATION

'upp!y te inform7tion 7s


31/45

MODEL ANSWER TO SELF;CHEC NO.3

'upp!y te inform7tion 7s


32/45

ACTIITY SHEET NO.3

ACTIITY TITLE : CUSTOMIZE ISUAL SETTING AND PAGEORGANIZATION






E)*(PET 'E)*('E+,


P'CE+*'E,




32


33/45


33


34/45

LEA&NIN) OUTCOME 2:USE HTML FORMS IN WEB PAGES

LEA&NIN) ACTI1ITYLEA&NIN) 'TEP' &E'OU&CE'

&e79 inform7tion seet no+2 USE

HTML FORMS IN WEB PAGES

Perform se!f-cec< no+ 2 USE



to se!f-cec< no+2

Perform 7cti;ity seet no+ 2 USE



7cti;ity seet no+2

INFO&MATION '(EET NO+2

'ELF-C(EC. NO+2


C(EC. NO+2

ACTI1ITY '(EET NO+2


'(EET NO+2

34


35/45

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

ie A sie specifies the sie of control 0in characters

&a"length A length0'ndicates the ma" no. of characters that can be

entered into a te"t control

/;-7

. W8' HTML ' 80 4&' 0+ *80&*$ &- $&'8$, 707;7 =$- 0, *,044%4$ 4&'>

3:


38/45

MODEL ANSWER TO SELF;CHEC NO."

Ans=er te fo!!o=in":

%+ 07t is te (TML t7" t7t 9efines 7 form in 7 =e6 p7"e+0,=+0,=

#+ 07t is te sin"!e (TML t7" option for "7terin" inform7tion&-7'&-7'

*+ 07t 7re te siH ?3@ 7ttri6utes of te (TML t7" of te 7ns=er in 'ELF-C(EC.NO+2

T$@' 70,/ *8$*%0@ ,/&0 (,/&0 %''0-) ,$$' -/ %=&'

2+ 07t (TML t7" pro;i9es 7 fie!9 t7t en76!es =e6 p7"e ;isitors to enter mu!tip!e!ines of inform7tion

'$@',$'$@',$

5+ 07t (TML t7" so=s 7 !ist of coices in eiter 7 pop-up menu or 7 scro!!76!e!ist

$4$*'$4$*'

3@


39/45


40/45

SAMPLE OUTPUT TO ACTIITY SHEET NO."

4F


41/45

AN'0E&:

K(TMLK(EADKTITLE'ur;ey: (o= to )et te C7tsKTITLEK(EAD

KBODYK(%'ur;ey: (o= to )et te C7tsK(%K(& 'IVES5 co!orSW6!7c


42/45

DATAME# INSTITUTE OF COMPUTER TECHNOLOGY(BRANCH)

PRELIMINARY E#AMINATION IN CREATING WEB PAGE USING HTMLNAME DATE COU&'E &ATIN)

I.I/$-'&+&*'&0-%+ A "!o67! connection of tous7n9s of computer net=or


43/45

DATAME# INSTITUTE OF COMPUTER TECHNOLOGY

(BRANCH)

MIDTERM E#AMINATION IN CREATING WEB PAGE USING HTMLNAME DATE COU&'E &ATIN)

(7n9s On ?2$pts@'7mp!e output:

43


44/45

Jnote:

ADD DESIGN AND ISUAL ENHANCEMENTS WITH THE FOLLOWING:1. MARQUEE2. 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 COU&'E

DATE &ATIN)

(AND'-ON

A+ 'AMPLE OUTPUT:?2$ pts@

44


45/45

B+ Cre7te your o=n =e6 site =it te fo!!o=in" inform7tion:?proect@

%+ person7! inform7tion#+ scoo! inform7tion ?97t7meH: course8 su6ect8 semester8 instructor@*+ !in

CBLM+-+HTML Make it easier for other people to find your content by providing more information about...

Documents

Transcript of CBLM+-+HTML Make it easier for other people to find your content by providing more information about...