Post on 06-Apr-2018
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