Unit II HTML

transcript

8/3/2019 Unit II HTML

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

UNITII-HTML

• HTMLstandsforHypertextmarkuplanguage.

• Cameintoexistencein1989byTimBernersLee

• HTMLhelpsinlinkingseveralrelatedinformationalreadystoredinacomputerwhichcanbeaccessedanywhereintheworld.

• Includestext,picturesandlinkstootherrelateddocuments.

• Allowsusertopublishinformationforglobaldistributionthroughwww.

• Non-casesensitivelanguage.

INTRODUCTION

TOOLSREQUIRED

• Atexteditor-toedittext(egnotepad)

• Awebbrowser-todisplaythedocument(eginternetexplorer)

• Agraphicstool-togetpicturesinright

format(egadobephotoshop)

• Awebserver-tobeviewed

throughouttheworld.

STARTINGAHTML

DOCUMENT

• STEP1: opennotepad.startprogramsaccessoriesnotepad

• Step2:TypetheHTMLcode.

• Step3:savethecodebygivingafile

namewithanextention.HTML

• Step4:

ToviewthecreatedHTML

documentopeninternetexplorer.

startallprogramsinternetexplorer.

nowI.Ewillbeopened.

• Step5:

toopenthefilethatwehavesavedclickonfileopen.

• Step6:

Adialogboxwillappears.clickonbrowsebutton.After

locatingfile,clickonopenbutton.Then

clickonok.NowtheHTMLpagewill

bedisplayedonthebrowser.

MODIFYINGHTMLCODE

• STEP1:TomodifytheHTML

code,selectviewsource,now

notepadwindowwillbeopened.

• Tagsarealsocalledas

markups,instructthebrowserhowto

displayHTMLdocuments.

• Itconsistsofakeywordenclsedwith

inangularbrackets

• HTMLusestwotypesoftagelements:

1.Emptytag.

2.Containertag.

EMPTYTAG

• Representstheformattingoptions

suchaslinebreaks,horizontal

ruler,paragraphsettingetc.thesetagshaveonlybeginningtag(starttag).

eg: <hr>

CONTAINERTAG

• Containertagshaveasectionoftext.

• Ithasbothstartandendtag.

• Endtagisthesameofstarttagwith

anadditionofforwardslash(/)

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

ATTRIBUTES

• Additionalinformationgiventoatag.

• Usedforspecificpurposeonly.

• Addedonlytostarttagsandnotto

endtags

• Notenclosedinangularbrackets.

STRUCTURE OF HTML

STRUCTUREOFHTML

DOCUMENT

• HTMLdocumenthastwosections

i)Headsection

ii)Bodysection

<html>

<head>

</head>

<body>

</body>

</html>

HEADSECTION

SECTION

HTMLTAGS

• ThefirstandlasttagsofaHTML

documentshouldalwaysbe

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

• Whichtellsthatawebbrowserabout

thebeginningandendingofahtml

document.

NESTINGTABS

• Enclosingatagwithinanothertagis

calledNestingtags

• <html>

<head>

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

</html>

COMMENTTAGS

• Addedforthebenefitofthewriter

• Helpstounderstandthedocument

• Alsousedtospecifytheauthor’s

name,copyrightmessagesetc.

• Canincludedanywhereintheprogram

• <! – -and-->tags

• Thetagisusedtospecifythe

fontstyle,sizecolorfora

character,phraseorarangeoftext

• ………………..

ATTRIBUTESOFFONT

• Face

• Size

• color

• Fontstylescanbechangedusingthis

attribute.

• Ithasavaluewhichisafont

name,enclosedwithindoublequotes.

• <fontface=“arial”>WEBDEMO

• Enclosedwithinthefonttagthat

indicatessizeinwhichthefonthasto

bedisplayed.

• Thevalueofsizeattributesare1to

7,where3isthedefaultsize.

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

DEMO

• Usedforchangingthecolorofthe

• ValueiseithercolornameorRGB

• RGBstandsforred,green&blue.

• Asixdigithexadecimalnumber

representsthesecomponents.

• FFFFFFisthenumberwhich

representswhite.• FF0000isred

• 00FF00isgreen

• 0000FFisblue

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

color=“blue”>WEBDEMO

THANK YOU

Unit II HTML

Documents