8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 1/50

UNITII-HTML

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 2/50

• HTMLstandsforHypertextmarkuplanguage.

• Cameintoexistencein1989byTimBernersLee

• HTMLhelpsinlinkingseveralrelatedinformationalreadystoredinacomputerwhichcanbeaccessedanywhereintheworld.

• Includestext,picturesandlinkstootherrelateddocuments.

•  Allowsusertopublishinformationforglobaldistributionthroughwww.

• Non-casesensitivelanguage.

INTRODUCTION

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 3/50

TOOLSREQUIRED

•  Atexteditor-toedittext(egnotepad)

•  Awebbrowser-todisplaythedocument(eginternetexplorer)

•  Agraphicstool-togetpicturesinright

format(egadobephotoshop)

•  Awebserver-tobeviewed

throughouttheworld.

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 4/50

STARTINGAHTML

DOCUMENT

• STEP1: opennotepad.startprogramsaccessoriesnotepad

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 5/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 6/50

• Step2:TypetheHTMLcode.

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 7/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 8/50

• Step3:savethecodebygivingafile

namewithanextention.HTML

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 9/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 10/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 11/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 12/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 13/50

• Step4:

ToviewthecreatedHTML

documentopeninternetexplorer.

startallprogramsinternetexplorer.

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 14/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 15/50

nowI.Ewillbeopened.

• Step5:

toopenthefilethatwehavesavedclickonfileopen.

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 16/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 17/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 18/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 19/50

• Step6:

Adialogboxwillappears.clickonbrowsebutton.After

locatingfile,clickonopenbutton.Then

clickonok.NowtheHTMLpagewill

bedisplayedonthebrowser.

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 20/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 21/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 22/50

MODIFYINGHTMLCODE

• STEP1:TomodifytheHTML

code,selectviewsource,now

notepadwindowwillbeopened.

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 23/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 24/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 25/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 26/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 27/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 28/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 29/50

TAGS

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 30/50

TAGS

• Tagsarealsocalledas

markups,instructthebrowserhowto

displayHTMLdocuments.

• Itconsistsofakeywordenclsedwith

inangularbrackets

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 31/50

• HTMLusestwotypesoftagelements:

1.Emptytag.

2.Containertag.

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 32/50

EMPTYTAG

• Representstheformattingoptions

suchaslinebreaks,horizontal

ruler,paragraphsettingetc.thesetagshaveonlybeginningtag(starttag).

eg:<br><hr><p>

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 33/50

CONTAINERTAG

• Containertagshaveasectionoftext.

• Ithasbothstartandendtag.

• Endtagisthesameofstarttagwith

anadditionofforwardslash(/)

• Eg<body>……………</body>

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 34/50

 ATTRIBUTES

•  Additionalinformationgiventoatag.

• Usedforspecificpurposeonly.

•  Addedonlytostarttagsandnotto

endtags

• Notenclosedinangularbrackets.

STRUCTURE OF HTML

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 35/50

STRUCTUREOFHTML

DOCUMENT

• HTMLdocumenthastwosections

i)Headsection

ii)Bodysection

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 36/50

<html>

<head>

<title>…………..<title>

</head>

<body>

</body>

</html>

HEADSECTION

BODY

SECTION

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 37/50

HTMLTAGS

• ThefirstandlasttagsofaHTML

documentshouldalwaysbe

• <html>…………..</html>

• Whichtellsthatawebbrowserabout

thebeginningandendingofahtml

document.

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 38/50

NESTINGTABS

• Enclosingatagwithinanothertagis

calledNestingtags

• <html>

<head>

<title>WEBDEMO</title> </head>

</html>

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 39/50

COMMENTTAGS

•  Addedforthebenefitofthewriter

• Helpstounderstandthedocument

• Alsousedtospecifytheauthor’s

name,copyrightmessagesetc.

• Canincludedanywhereintheprogram

• <! – -and-->tags

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 40/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 41/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 42/50

FONT

• The<font>tagisusedtospecifythe

fontstyle,sizecolorfora

character,phraseorarangeoftext

• <font>………………..</font>

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 43/50

 ATTRIBUTESOFFONT

• Face

• Size

• color

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 44/50

FACE

• Fontstylescanbechangedusingthis

attribute.

• Ithasavaluewhichisafont

name,enclosedwithindoublequotes.

• <fontface=“arial”>WEBDEMO

</font>

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 45/50

SIZE

• Enclosedwithinthefonttagthat

indicatessizeinwhichthefonthasto

bedisplayed.

• Thevalueofsizeattributesare1to

7,where3isthedefaultsize.

• <fontface=“arial”size=“5”>WEB

DEMO</font>

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 46/50

COLOR

• Usedforchangingthecolorofthe

text.

• ValueiseithercolornameorRGB

code

• RGBstandsforred,green&blue.

•  Asixdigithexadecimalnumber

representsthesecomponents.

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 47/50

• FFFFFFisthenumberwhich

representswhite.• FF0000isred

• 00FF00isgreen

• 0000FFisblue

• <fontface=“arial”size=“5”

color=“blue”>WEBDEMO</font>

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 48/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 49/50

8/3/2019 Unit II HTML

http://slidepdf.com/reader/full/unit-ii-html 50/50

THANK YOU