HTML_Final notes_with_header_and_footer.pdf
AluminicompSRESCoeKo
11 views
33 slides
Oct 28, 2025
Slide 1 of 33
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
About This Presentation
This presentation provides a complete overview of fundamental web development concepts for beginners and students. It covers the structure and working of the web, including the World Wide Web (WWW), web browsers, HTML basics, and the use of tags, attributes, lists, tables, and forms.
You’ll learn...
Slide Content
1
Unit1:IntroductiontoWebTechnologies
IntroductiontoHTML:
HTMLstandsforHyperTextMarkupLanguage,whichisusedforcreatingwebpages
andwebapplications.
HyperTextis"textwithintext."It'stextthathasalinkinit.
Whenyouclickonalinkthattakesyoutoanewwebpage.
HyperTextconnectstwoormorewebpages(HTMLdocuments)together.
Markuplanguageisacomputerlanguageusedtoformatandarrangetextina
document.
Itmakestextmoreinteractiveanddynamic.
Withmarkuplanguage,youcanturntextintoimages,tables,links,andmore.
Hence,HTMLisamarkuplanguageusedtocreateattractivewebpageswithstyling
thatlooksgoodinawebbrowser.AnHTMLdocumentismadeupofmanyHTML
tags,eachcontainingdifferentcontent.
HistoryofHTML
Inthelate1980s,TimBerners-Lee,aphysicistworkingatCERN,proposedasystemfor
CERNresearchers.In1989,hewroteamemosuggestinganinternet-basedhypertextsystem.
TimBerners-LeeisknownasthefatherofHTML.ThefirstdescriptionofHTMLwasa
documentcalled"HTMLTags,"proposedbyTiminlate1991.ThelatestversionofHTML
isHTML5.
HTMLVersion:
HTML1-1993
HTML2-1995
HTML3-1997
HTML4-1999
HTML4.01–2012
HTML5-2014(currentlybeingused)
CharacteristicsofHTML:
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
Unit1:IntroductiontoWebTechnologies
IntroductiontoHTML:
HTMLstandsforHyperTextMarkupLanguage,whichisusedforcreatingwebpages
andwebapplications.
HyperTextis"textwithintext."It'stextthathasalinkinit.
Whenyouclickonalinkthattakesyoutoanewwebpage.
HyperTextconnectstwoormorewebpages(HTMLdocuments)together.
Markuplanguageisacomputerlanguageusedtoformatandarrangetextina
document.
Itmakestextmoreinteractiveanddynamic.
Withmarkuplanguage,youcanturntextintoimages,tables,links,andmore.
Hence,HTMLisamarkuplanguageusedtocreateattractivewebpageswithstyling
thatlooksgoodinawebbrowser.AnHTMLdocumentismadeupofmanyHTML
tags,eachcontainingdifferentcontent.
HistoryofHTML
Inthelate1980s,TimBerners-Lee,aphysicistworkingatCERN,proposedasystemfor
CERNresearchers.In1989,hewroteamemosuggestinganinternet-basedhypertextsystem.
TimBerners-LeeisknownasthefatherofHTML.ThefirstdescriptionofHTMLwasa
documentcalled"HTMLTags,"proposedbyTiminlate1991.ThelatestversionofHTML
isHTML5.
HTMLVersion:
HTML1-1993
HTML2-1995
HTML3-1997
HTML4-1999
HTML4.01–2012
HTML5-2014(currentlybeingused)
CharacteristicsofHTML:
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
2
1.Easytounderstand:HTMLisverystraightforwardandeasytolearn.
2.Flexibility:Youcancreateavarietyofwebpageswithdifferentdesignsandtext.
3.Linkable:Youcancreatelinksthatconnectonepagetoanotherortodifferent
websites.
4.Limitlessfeatures:Youcanaddvideos,GIFs,pictures,andsoundstomakeyour
websitemoreattractiveandinformative.
AdvantagesofHTML:
1.Easytolearnandapply:HTMLissimpletopickup,use,andit'scompletelyfree.
Youonlyneedatexteditorandabrowser.
2.Browsersupport:HTMLworkswithallbrowsersandissearchenginefriendly.
3.Integration:HTMLcaneasilyintegratewithotherlanguagesandisstraightforward
todevelop.
4.Foundation:Itisthebasisofallweblanguagesandisverylightweight.
5.Responsivedisplay:HTMLadjuststhedisplaybasedonwindowordevicesize,
makingituser-friendly.
DisadvantagesofHTML:
1.Staticcontent:HTMLcanonlycreatestaticwebpages,notdynamicones.
2.Security:ThereisalackofsecurityinHTML.
3.Complexity:Creatingevenasimplewebpagerequiresmanytags.
4.Non-centralized:EachwebpageneedstobedesignedseparatelyunlessusingCSS.
5.Scalability:HTMLbecomescomplexwhencreatinglargewebsites.
StructureofanHTMLDocument
AnHTMLdocumentismainlydividedintotwoparts:
1.HEAD:ContainsinformationabouttheHTMLdocument,includingthetitleofthe
page,versionofHTML,metadata,etc.
2.BODY:Containseverythingyouwanttodisplayonthewebpage.
DescriptionofHTMLbasictags:
<!DOCTYPE>:Definesthedocumenttypeandinstructsthebrowseraboutthe
HTMLversion.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
1.Easytounderstand:HTMLisverystraightforwardandeasytolearn.
2.Flexibility:Youcancreateavarietyofwebpageswithdifferentdesignsandtext.
3.Linkable:Youcancreatelinksthatconnectonepagetoanotherortodifferent
websites.
4.Limitlessfeatures:Youcanaddvideos,GIFs,pictures,andsoundstomakeyour
websitemoreattractiveandinformative.
AdvantagesofHTML:
1.Easytolearnandapply:HTMLissimpletopickup,use,andit'scompletelyfree.
Youonlyneedatexteditorandabrowser.
2.Browsersupport:HTMLworkswithallbrowsersandissearchenginefriendly.
3.Integration:HTMLcaneasilyintegratewithotherlanguagesandisstraightforward
todevelop.
4.Foundation:Itisthebasisofallweblanguagesandisverylightweight.
5.Responsivedisplay:HTMLadjuststhedisplaybasedonwindowordevicesize,
makingituser-friendly.
DisadvantagesofHTML:
1.Staticcontent:HTMLcanonlycreatestaticwebpages,notdynamicones.
2.Security:ThereisalackofsecurityinHTML.
3.Complexity:Creatingevenasimplewebpagerequiresmanytags.
4.Non-centralized:EachwebpageneedstobedesignedseparatelyunlessusingCSS.
5.Scalability:HTMLbecomescomplexwhencreatinglargewebsites.
StructureofanHTMLDocument
AnHTMLdocumentismainlydividedintotwoparts:
1.HEAD:ContainsinformationabouttheHTMLdocument,includingthetitleofthe
page,versionofHTML,metadata,etc.
2.BODY:Containseverythingyouwanttodisplayonthewebpage.
DescriptionofHTMLbasictags:
<!DOCTYPE>:Definesthedocumenttypeandinstructsthebrowseraboutthe
HTMLversion.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
3
<html>:InformsthebrowserthatitisanHTMLdocument.Itcontainsallother
HTMLelementsexcept<!DOCTYPE>.
<head>:Thefirstelementinsidethe<html>element,containingmetadata
(informationaboutthedocument).Itmustbeclosedbeforethe<body>tagopens.
<title>:AddsatitletotheHTMLpagethatappearsatthetopofthebrowserwindow.
Itmustbeplacedinsidethe<head>tagandshouldcloseimmediately.(Optional)
<body>:ContainsthemaincontentoftheHTMLdocumentthatisvisibletotheend
user.
<h1>:Describesthefirstlevelheadingofthewebpage.
<p>:Describesaparagraphofthewebpage.
<!DOCTYPEhtml>
<html>
<head>
<title>MySamplePage</title>
</head>
<body>
<h1>Hello,World!</h1>
<p>Thisisaparagraph.</p>
</body>
</html>
HTMLHeading:
AnHTMLheadingtagdefinestheheadingsofapage.Therearesixlevelsofheadingsin
HTML.These6headingelementsareh1,h2,h3,h4,h5,andh6;withh1beingthehighest
levelandh6beingthelowest.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
<html>:InformsthebrowserthatitisanHTMLdocument.Itcontainsallother
HTMLelementsexcept<!DOCTYPE>.
<head>:Thefirstelementinsidethe<html>element,containingmetadata
(informationaboutthedocument).Itmustbeclosedbeforethe<body>tagopens.
<title>:AddsatitletotheHTMLpagethatappearsatthetopofthebrowserwindow.
Itmustbeplacedinsidethe<head>tagandshouldcloseimmediately.(Optional)
<body>:ContainsthemaincontentoftheHTMLdocumentthatisvisibletotheend
user.
<h1>:Describesthefirstlevelheadingofthewebpage.
<p>:Describesaparagraphofthewebpage.
<!DOCTYPEhtml>
<html>
<head>
<title>MySamplePage</title>
</head>
<body>
<h1>Hello,World!</h1>
<p>Thisisaparagraph.</p>
</body>
</html>
HTMLHeading:
AnHTMLheadingtagdefinestheheadingsofapage.Therearesixlevelsofheadingsin
HTML.These6headingelementsareh1,h2,h3,h4,h5,andh6;withh1beingthehighest
levelandh6beingthelowest.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
4
<h1>isusedforthemainheading(biggestinsize).
<h2>isusedforsubheadings.
Iftherearefurthersectionsunderthesubheadings,thenthe<h3>elementsareused.
<h6>isusedforthesmallestheadings(smallestinsize).
Browsersdisplaythecontentsofheadingsindifferentsizes.
ImportanceofHeadings:
1.SearchEngineIndexing:Searchenginesuseheadingstoindexandorganizethe
contentofthewebpage.
2.HighlightingImportantTopics:Headingsareusedtohighlightimportanttopics.
3.DocumentStructure:Theyprovidevaluableinformationandhelpoutlinethe
structureofthedocument.
HorizontalRule
The<hr>tagstandsfor"horizontalrule"andisusedtodefineathematicbreakinan
HTMLpage.Itisanemptytag,meaningitdoesnotrequireanendtag.
The<hr>tagismainlyusedtoseparatecontent.
ParagraphTag
The<p>tagisusedtocreateaparagraphin
HTML.
Itneedsbothanopeningtag(<p>)andaclosing
tag(</p>).
Anythingbetween<p>and</p>willbeshown
asaparagraphonthewebpage.
Browsersmightstillshowaparagraphevenif
youforgettheclosingtag(</p>),butit'sbestto
alwaysuseittoavoidproblems.
KeyPointsAboutthe<p>Tag:
AutomaticSpacing:The<p>tagautomaticallyaddsspacebeforeandafterparagraphs,
whichactslikemarginsaddedbythebrowser.
<p>Thisisthefirstparagraph.</p>
<p>Thisisthesecondparagraph.</p>
<p>Thisisthethirdparagraph.</p>
OUTPUT:
Thisisthefirstparagraph.
Thisisthesecondparagraph.
Thisisthethirdparagraph.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
<h1>isusedforthemainheading(biggestinsize).
<h2>isusedforsubheadings.
Iftherearefurthersectionsunderthesubheadings,thenthe<h3>elementsareused.
<h6>isusedforthesmallestheadings(smallestinsize).
Browsersdisplaythecontentsofheadingsindifferentsizes.
ImportanceofHeadings:
1.SearchEngineIndexing:Searchenginesuseheadingstoindexandorganizethe
contentofthewebpage.
2.HighlightingImportantTopics:Headingsareusedtohighlightimportanttopics.
3.DocumentStructure:Theyprovidevaluableinformationandhelpoutlinethe
structureofthedocument.
HorizontalRule
The<hr>tagstandsfor"horizontalrule"andisusedtodefineathematicbreakinan
HTMLpage.Itisanemptytag,meaningitdoesnotrequireanendtag.
The<hr>tagismainlyusedtoseparatecontent.
ParagraphTag
The<p>tagisusedtocreateaparagraphin
HTML.
Itneedsbothanopeningtag(<p>)andaclosing
tag(</p>).
Anythingbetween<p>and</p>willbeshown
asaparagraphonthewebpage.
Browsersmightstillshowaparagraphevenif
youforgettheclosingtag(</p>),butit'sbestto
alwaysuseittoavoidproblems.
KeyPointsAboutthe<p>Tag:
AutomaticSpacing:The<p>tagautomaticallyaddsspacebeforeandafterparagraphs,
whichactslikemarginsaddedbythebrowser.
<p>Thisisthefirstparagraph.</p>
<p>Thisisthesecondparagraph.</p>
<p>Thisisthethirdparagraph.</p>
OUTPUT:
Thisisthefirstparagraph.
Thisisthesecondparagraph.
Thisisthethirdparagraph.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
5
Example:
SpaceReduction:Ifyouaddmultiplespacesorlines,thebrowserreducesthemtoa
singlespaceorline.
<br>Tag
The<br>tagisusedtoinsert
alinebreakinHTML,telling
thebrowserwheretostarta
newline.
Itdoesnothaveaclosingtag;
justthesingleopeningtag
(<br>)isenoughtocreatea
linebreak.
<pre>tag
The<pre>tagisessentialforpreservingtheexactformattingoftextwithinawebpage.
Keypointsaboutthe<pre>tag:
Preserveswhitespace:Spaces,tabs,
andlinebreaksaredisplayedasthey
arewrittenintheHTMLcode.
Fixed-widthfont:Textistypically
renderedinamonospacedfontfor
consistentcharacterspacing.
Commonusecases:
oDisplayingcodesnippets(often
combinedwiththe<code>tag)
oShowingsampleoutputs
oPreservingtextlayoutfor
specificformattingneeds
Imagetag:Imagineapicturebook.Eachpagehaswordsandpictures.Ina
webpage,theimagetagislikeaplaceholderforapicture.Ittellsthecomputerwhere
tofindthepictureandhowtodisplayit.
Thisisthefirstline.<br>Thisisthesecondline.
OUTPUT:
Thisisthefirstline.
Thisisthesecondline.
Example:
<pre>
Thisisapreformattedtextblock.
Itpreservesspacesandline
breaks.
Indentationisalsomaintained.
</pre>
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
Example:
SpaceReduction:Ifyouaddmultiplespacesorlines,thebrowserreducesthemtoa
singlespaceorline.
<br>Tag
The<br>tagisusedtoinsert
alinebreakinHTML,telling
thebrowserwheretostarta
newline.
Itdoesnothaveaclosingtag;
justthesingleopeningtag
(<br>)isenoughtocreatea
linebreak.
<pre>tag
The<pre>tagisessentialforpreservingtheexactformattingoftextwithinawebpage.
Keypointsaboutthe<pre>tag:
Preserveswhitespace:Spaces,tabs,
andlinebreaksaredisplayedasthey
arewrittenintheHTMLcode.
Fixed-widthfont:Textistypically
renderedinamonospacedfontfor
consistentcharacterspacing.
Commonusecases:
oDisplayingcodesnippets(often
combinedwiththe<code>tag)
oShowingsampleoutputs
oPreservingtextlayoutfor
specificformattingneeds
Imagetag:Imagineapicturebook.Eachpagehaswordsandpictures.Ina
webpage,theimagetagislikeaplaceholderforapicture.Ittellsthecomputerwhere
tofindthepictureandhowtodisplayit.
Thisisthefirstline.<br>Thisisthesecondline.
OUTPUT:
Thisisthefirstline.
Thisisthesecondline.
Example:
<pre>
Thisisapreformattedtextblock.
Itpreservesspacesandline
breaks.
Indentationisalsomaintained.
</pre>
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
6
TheImageTag:<img>
1.ImageintheSameFolder
WhenyourimageisinthesamefolderasyourHTMLfile,youcanuseasimplerelative
pathtoreferenceit:
<imgsrc="image.jpg"alt="Adescriptionoftheimage">
2.ImageinaDifferentFolder
Ifyourimageisinadifferentfolder,you'llneedtospecifythepathtothatfolder:
<imgsrc="images/image.jpg"alt="Descriptionofimage">
src="images/image.jpg":Thistellsthebrowsertolookforanimagenamed
"image.jpg"insideafoldernamed"images"inthesamedirectoryastheHTMLfile.
Important:
Alwaysuselowercaselettersforfolderandfilenames.
Double-checkthespellingandcapitalizationofthefileandfoldernames.
Makesuretherearenoextraspacesorspecialcharactersinthepath.
VisualRepresentation:
your_project_folder/
├──index.html
├──images/
│└──image.jpg
Inthiscase,youwouldusesrc="images/image.jpg"inyourindex.htmlfile.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
TheImageTag:<img>
1.ImageintheSameFolder
WhenyourimageisinthesamefolderasyourHTMLfile,youcanuseasimplerelative
pathtoreferenceit:
<imgsrc="image.jpg"alt="Adescriptionoftheimage">
2.ImageinaDifferentFolder
Ifyourimageisinadifferentfolder,you'llneedtospecifythepathtothatfolder:
<imgsrc="images/image.jpg"alt="Descriptionofimage">
src="images/image.jpg":Thistellsthebrowsertolookforanimagenamed
"image.jpg"insideafoldernamed"images"inthesamedirectoryastheHTMLfile.
Important:
Alwaysuselowercaselettersforfolderandfilenames.
Double-checkthespellingandcapitalizationofthefileandfoldernames.
Makesuretherearenoextraspacesorspecialcharactersinthepath.
VisualRepresentation:
your_project_folder/
├──index.html
├──images/
│└──image.jpg
Inthiscase,youwouldusesrc="images/image.jpg"inyourindex.htmlfile.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
7
3.UnderstandingRelativePathsforImagesinNestedFolders
Scenario:
Youhaveamainprojectfolder(let'scallit"project").
Inside"project",there'safoldercalled"folder1".
Inside"folder1",there'safoldercalled"folder2".
YourHTMLfileisin"folder2".
Theimageisinthe"project"folder.
RelativePath:
ToreferencetheimagefromyourHTMLfilein"folder2",you'llneedtousearelativepath
thatgoesuponelevel(outof"folder2")andthentotheimage:
<imgsrc="../image.jpg"alt="Descriptionofimage">
../meansgouponedirectory.
image.jpgisthenameofyourimagefileinthe"project"folder.
VisualRepresentation:
project/
├──image.jpg
└──folder1/
└──folder2/
└──index.html
<sub>and<sup>
Imagineyou'rewritingamathequationorachemicalformula.Sometimes,youneedto
writesomenumbersorlettersslightlyaboveorbelowthenormallineoftext.That'swhere
thesubandsuptagscomeinhandy.
Subscript(<sub>)
Thesubtagisusedtomaketextappearslightlybelowthenormalline.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
3.UnderstandingRelativePathsforImagesinNestedFolders
Scenario:
Youhaveamainprojectfolder(let'scallit"project").
Inside"project",there'safoldercalled"folder1".
Inside"folder1",there'safoldercalled"folder2".
YourHTMLfileisin"folder2".
Theimageisinthe"project"folder.
RelativePath:
ToreferencetheimagefromyourHTMLfilein"folder2",you'llneedtousearelativepath
thatgoesuponelevel(outof"folder2")andthentotheimage:
<imgsrc="../image.jpg"alt="Descriptionofimage">
../meansgouponedirectory.
image.jpgisthenameofyourimagefileinthe"project"folder.
VisualRepresentation:
project/
├──image.jpg
└──folder1/
└──folder2/
└──index.html
<sub>and<sup>
Imagineyou'rewritingamathequationorachemicalformula.Sometimes,youneedto
writesomenumbersorlettersslightlyaboveorbelowthenormallineoftext.That'swhere
thesubandsuptagscomeinhandy.
Subscript(<sub>)
Thesubtagisusedtomaketextappearslightlybelowthenormalline.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
8
Example:
H₂O(water)-The'2'isasubscript.
Superscript(<sup>)
Thesuptagisusedtomaketextappear
slightlyabovethenormalline.
Example:
x²(xsquared)-The'2'isasuperscript.
HTMLElement
AnHTMLelementismadeupofthreeparts:
OpeningTag:Indicateswherethe
contentbegins.Forexample,<p>.
Content:Theactualtextorelements
placedbetweentheopeningandclosing
tags.
ClosingTag:Indicateswherethecontent
ends.Forexample,</p>.
HTMLLists
Alistisasimplewaytoshowrelatedpiecesofinformationordataonawebpage.
Listshelporganizeitemssotheyareeasytofind.
Listsmakeinformationclearandeasytoread.
TypesofLists
HTMLsupportsthreemaintypesoflists:
1.OrderedList(ol)
<p>Water:H<sub>2</sub>O</p>
<p>Xsquare:x<sup>2</sup></p>
Output:Water:H2O
Xsquare:x
2
Example:
<p>Thisisaparagraph.</p>
Inthisexample:
<p>istheopeningtag.
</p>istheclosingtag.
Thisisaparagraph.isthecontent.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
Example:
H₂O(water)-The'2'isasubscript.
Superscript(<sup>)
Thesuptagisusedtomaketextappear
slightlyabovethenormalline.
Example:
x²(xsquared)-The'2'isasuperscript.
HTMLElement
AnHTMLelementismadeupofthreeparts:
OpeningTag:Indicateswherethe
contentbegins.Forexample,<p>.
Content:Theactualtextorelements
placedbetweentheopeningandclosing
tags.
ClosingTag:Indicateswherethecontent
ends.Forexample,</p>.
HTMLLists
Alistisasimplewaytoshowrelatedpiecesofinformationordataonawebpage.
Listshelporganizeitemssotheyareeasytofind.
Listsmakeinformationclearandeasytoread.
TypesofLists
HTMLsupportsthreemaintypesoflists:
1.OrderedList(ol)
<p>Water:H<sub>2</sub>O</p>
<p>Xsquare:x<sup>2</sup></p>
Output:Water:H2O
Xsquare:x
2
Example:
<p>Thisisaparagraph.</p>
Inthisexample:
<p>istheopeningtag.
</p>istheclosingtag.
Thisisaparagraph.isthecontent.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
9
oDisplaysitemsinanumberedformat.
oUsefulforlistswheretheorderofitemsisimportant.
2.UnorderedList(ul)
oDisplaysitemswithbullets.
oSuitableforlistswheretheorderdoesnotmatter.
3.DescriptionList(dl)
oDisplaystermsandtheirdescriptions.
oUsefulforglossariesorname-valuepairs.
HTMLOrderedList
The<ol>tagisusedtocreateanorderedlist.
Youcanrepresentitemsindifferentformats,suchasnumericaloralphabeticalorder,
oranyformatwhereanorderisimportant.
TypesofNumberedLists:
Numeric(1,2,3)
UppercaseRomanNumerals(I,II,III)
LowercaseRomanNumerals(i,ii,iii)
Attributesofthe<ol>Tag
InHTML,the<ol>tagisusedfororderedlists,andithas
severalattributestocustomizehowthelistisdisplayed:
reversed:Makesthelistnumberindescendingorder.
ThisisanewattributeinHTML5.Forexample,ifyou
havealistwithreversed,itwillcountdownfrom7to1.
start:Setsthestartingnumberorletterforthelist.Itallowsyoutobeginnumberingor
letteringfromaspecificpoint.
type:Specifiesthetypeofnumberingforthelistitems.Optionsinclude:
o"1":Numeric(1,2,3)
o"A":Uppercaseletters(A,B,C)
o"a":Lowercaseletters(a,b,c)
o"I":UppercaseRomannumerals(I,II,III)
o"i":LowercaseRomannumerals(i,ii,iii)
Example:
<ol>
<li>Firstitem</li>
<li>Seconditem</li>
<li>Thirditem</li>
</ol>
OUTPUT:
1.Firstitem
2.Seconditem
3.Thirditem
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
oDisplaysitemsinanumberedformat.
oUsefulforlistswheretheorderofitemsisimportant.
2.UnorderedList(ul)
oDisplaysitemswithbullets.
oSuitableforlistswheretheorderdoesnotmatter.
3.DescriptionList(dl)
oDisplaystermsandtheirdescriptions.
oUsefulforglossariesorname-valuepairs.
HTMLOrderedList
The<ol>tagisusedtocreateanorderedlist.
Youcanrepresentitemsindifferentformats,suchasnumericaloralphabeticalorder,
oranyformatwhereanorderisimportant.
TypesofNumberedLists:
Numeric(1,2,3)
UppercaseRomanNumerals(I,II,III)
LowercaseRomanNumerals(i,ii,iii)
Attributesofthe<ol>Tag
InHTML,the<ol>tagisusedfororderedlists,andithas
severalattributestocustomizehowthelistisdisplayed:
reversed:Makesthelistnumberindescendingorder.
ThisisanewattributeinHTML5.Forexample,ifyou
havealistwithreversed,itwillcountdownfrom7to1.
start:Setsthestartingnumberorletterforthelist.Itallowsyoutobeginnumberingor
letteringfromaspecificpoint.
type:Specifiesthetypeofnumberingforthelistitems.Optionsinclude:
o"1":Numeric(1,2,3)
o"A":Uppercaseletters(A,B,C)
o"a":Lowercaseletters(a,b,c)
o"I":UppercaseRomannumerals(I,II,III)
o"i":LowercaseRomannumerals(i,ii,iii)
Example:
<ol>
<li>Firstitem</li>
<li>Seconditem</li>
<li>Thirditem</li>
</ol>
OUTPUT:
1.Firstitem
2.Seconditem
3.Thirditem
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
10
UnorderedList
Displaysitemswithbullets,usedwhenthe
orderofitemsdoesn’tmatter.
<ul>isusedtocreateanunorderedlist,
and
<li>isusedforeachlistitem.
Bydefault,itemsinanunorderedlistare
markedwithsmallblackcircles(bullets).
TypesofBullets:
1.disc:Defaultstylewithfilledcircles.
2.circle:Hollowcircles.
3.square:Squares.
4.none:Nobullets.
DescriptionList
Usedforlistswhereeachitemhasatermandadescription,likeaglossary.
Tags:
1.<dl>:Definesthestartofthedescriptionlist.
2.<dt>:Definesaterm.
3.<dd>:Definestheterm’sdescription.
Example:
<dl>
<dt>Coffee</dt>
<dd>Blackhotdrink.</dd>
<dt>Milk</dt>
<dd>Whiteliquidfood.</dd></dl>
Output:
Coffee
Blackhotdrink.
Milk
Whiteliquidfood.
Example:
<ul><li>Item1</li>
<li>Item2</li>
<li>Item3</li></ul>
Output:
Item1
Item2
Item3
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
UnorderedList
Displaysitemswithbullets,usedwhenthe
orderofitemsdoesn’tmatter.
<ul>isusedtocreateanunorderedlist,
and
<li>isusedforeachlistitem.
Bydefault,itemsinanunorderedlistare
markedwithsmallblackcircles(bullets).
TypesofBullets:
1.disc:Defaultstylewithfilledcircles.
2.circle:Hollowcircles.
3.square:Squares.
4.none:Nobullets.
DescriptionList
Usedforlistswhereeachitemhasatermandadescription,likeaglossary.
Tags:
1.<dl>:Definesthestartofthedescriptionlist.
2.<dt>:Definesaterm.
3.<dd>:Definestheterm’sdescription.
Example:
<dl>
<dt>Coffee</dt>
<dd>Blackhotdrink.</dd>
<dt>Milk</dt>
<dd>Whiteliquidfood.</dd></dl>
Output:
Coffee
Blackhotdrink.
Milk
Whiteliquidfood.
Example:
<ul><li>Item1</li>
<li>Item2</li>
<li>Item3</li></ul>
Output:
Item1
Item2
Item3
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
11
HTMLTables
HTMLtablesareessentialfordisplayingstructureddatainarowandcolumnformat.
Theyhelpinorganizing,presenting,andcomparinginformationinaclearandorderly
way,suitableforvariousapplicationslikereports,schedules,andproductlistings.
BasicStructureofanHTMLTable:
TocreateatableinHTML,usethe<table>tagalongwithseveralothertagstodefinethe
structure:
<table>:Thistagwrapstheentiretablestructure.
<tr>:Definesatablerow.
<th>:Definesaheadercellinthetable.Textinheadercellsistypicallyboldand
centered.
<td>:Definesastandarddatacellinthetable.
TableTagsandTheirFunctions
<caption>:Providesatitleordescriptionfortheentiretable.Thisisdisplayedabove
thetable.
<thead>:Groupstheheadercontentinatable,whichhelpsindistinguishingcolumn
headersfromtherestofthedata.
<tbody>:Groupsthemaincontentofthetable,separatingitfromtheheaderand
footer.
<tfoot>:Groupsthefootercontent,suchassummariesortotals,providingadditional
informationaboutthedata.
<colgroup>:Groupsasetofcolumnsforstylingpurposes,makingiteasiertoapply
formattingtomultiplecolumnsatonce.
AddingBorderstoTables
1.UsingHTMLBorderAttribute:
oNote:Theborderattributeisnowobsoleteandnotrecommended.
2.UsingCSSBorderProperty:
oRecommended:Providesmoreflexibilityandcontrol.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
HTMLTables
HTMLtablesareessentialfordisplayingstructureddatainarowandcolumnformat.
Theyhelpinorganizing,presenting,andcomparinginformationinaclearandorderly
way,suitableforvariousapplicationslikereports,schedules,andproductlistings.
BasicStructureofanHTMLTable:
TocreateatableinHTML,usethe<table>tagalongwithseveralothertagstodefinethe
structure:
<table>:Thistagwrapstheentiretablestructure.
<tr>:Definesatablerow.
<th>:Definesaheadercellinthetable.Textinheadercellsistypicallyboldand
centered.
<td>:Definesastandarddatacellinthetable.
TableTagsandTheirFunctions
<caption>:Providesatitleordescriptionfortheentiretable.Thisisdisplayedabove
thetable.
<thead>:Groupstheheadercontentinatable,whichhelpsindistinguishingcolumn
headersfromtherestofthedata.
<tbody>:Groupsthemaincontentofthetable,separatingitfromtheheaderand
footer.
<tfoot>:Groupsthefootercontent,suchassummariesortotals,providingadditional
informationaboutthedata.
<colgroup>:Groupsasetofcolumnsforstylingpurposes,makingiteasiertoapply
formattingtomultiplecolumnsatonce.
AddingBorderstoTables
1.UsingHTMLBorderAttribute:
oNote:Theborderattributeisnowobsoleteandnotrecommended.
2.UsingCSSBorderProperty:
oRecommended:Providesmoreflexibilityandcontrol.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
12
AdvancedTableFeatures
SpanningCells
colspan:Allowsacelltospanmultiplecolumns.
rowspan:Allowsacelltospanmultiplerows.
CommonUsesofHTMLTables
Reports:Displayingdetaileddataandsummaries.
Schedules:Showingtimelinesandappointments.
ProductListings:Organizingproductdetailsandcomparisons.
tag Description
<table> Definesthetable.
<tr> Definesarowwithinthetable.
<th> Definesaheadercell;textisusuallyboldandcentered.
<td> Definesastandarddatacell.
<caption> Providesatitleordescriptionforthetable.
<thead> Groupstheheadercontentinatable.
<tbody> Groupsthemainbodycontentofthetable.
<tfoot> Groupsthefootercontent,suchassummariesortotals.
<colgroup>Groupsasetofcolumnsforstylingorformatting.
<col> Definesattributesforcolumnswithina<colgroup>.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
AdvancedTableFeatures
SpanningCells
colspan:Allowsacelltospanmultiplecolumns.
rowspan:Allowsacelltospanmultiplerows.
CommonUsesofHTMLTables
Reports:Displayingdetaileddataandsummaries.
Schedules:Showingtimelinesandappointments.
ProductListings:Organizingproductdetailsandcomparisons.
tag Description
<table> Definesthetable.
<tr> Definesarowwithinthetable.
<th> Definesaheadercell;textisusuallyboldandcentered.
<td> Definesastandarddatacell.
<caption> Providesatitleordescriptionforthetable.
<thead> Groupstheheadercontentinatable.
<tbody> Groupsthemainbodycontentofthetable.
<tfoot> Groupsthefootercontent,suchassummariesortotals.
<colgroup>Groupsasetofcolumnsforstylingorformatting.
<col> Definesattributesforcolumnswithina<colgroup>.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
13
Example
<!DOCTYPEhtml>
<html>
<head>
<title>HTML Tablewith colspan and
rowspan</title>
</head>
<body>
<tableborder=”1”>
<caption>ProductInformation</caption>
<thead>
<tr><throwspan="2">Product</th>
<thcolspan="2">Dimensions</th>
<throwspan="2">Price</th></tr>
<tr><th>Width</th>
<th>Height</th></tr>
</thead>
<tbody>
<tr><td>ProductA</td>
<td>10cm</td>
<td>15cm</td>
<td>$20</td></tr>
<tr><td>ProductB</td>
<td>12cm</td>
<td>$15</td></tr>
</tbody>
</table>
</body>
</html>
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
Example
<!DOCTYPEhtml>
<html>
<head>
<title>HTML Tablewith colspan and
rowspan</title>
</head>
<body>
<tableborder=”1”>
<caption>ProductInformation</caption>
<thead>
<tr><throwspan="2">Product</th>
<thcolspan="2">Dimensions</th>
<throwspan="2">Price</th></tr>
<tr><th>Width</th>
<th>Height</th></tr>
</thead>
<tbody>
<tr><td>ProductA</td>
<td>10cm</td>
<td>15cm</td>
<td>$20</td></tr>
<tr><td>ProductB</td>
<td>12cm</td>
<td>$15</td></tr>
</tbody>
</table>
</body>
</html>
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
14
TypesofHTMLTags
SemanticTags:
Thesetagshaveclearmeanings.
Theydescribethetypeofcontenttheycontain.
Examplesinclude:
<header>:Representstheheaderofapageorsection.
<footer>:Representsthefooterofapageorsection.
<nav>:Representsnavigationlinks.
<article>:Representsastandalonepieceofcontentlikeanewsarticle.
Non-SemanticTags:
Thesetagsdonotprovideanymeaningaboutthecontenttheyenclose.
Theyareusedmoreforstylingandlayout.
Examplesinclude:
<div>:Agenericcontainerwithnospecificmeaning.
<span>:Agenericinlinecontainerwithnospecificmeaning.
SemanticTags
InHTML,semanticelementsaretagsthatclearlydefinethecontenttheyenclose,
makingiteasierforbothbrowsersanddeveloperstounderstandtheirpurpose.
WhyUseSemanticElements?
InolderversionsofHTML(likeHTML4),developersusedgenerictagsandhadtoadd
customnames(id/class)tostyleandidentifydifferentpartsoftheirpages.Thismadeit
harderforsearchenginesandothertoolstounderstandthestructureofthecontent.
WithHTML5,newsemanticelementsmakethiseasier:
ImprovedStructure:Tagslike<header>,<footer>,and<nav>makeitclearwhat
eachpartofthepageisfor,improvingtheorganization.
BetterAccessibility:Semantictagshelpscreenreadersandotherassistive
technologiesunderstandthecontentbetter.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
TypesofHTMLTags
SemanticTags:
Thesetagshaveclearmeanings.
Theydescribethetypeofcontenttheycontain.
Examplesinclude:
<header>:Representstheheaderofapageorsection.
<footer>:Representsthefooterofapageorsection.
<nav>:Representsnavigationlinks.
<article>:Representsastandalonepieceofcontentlikeanewsarticle.
Non-SemanticTags:
Thesetagsdonotprovideanymeaningaboutthecontenttheyenclose.
Theyareusedmoreforstylingandlayout.
Examplesinclude:
<div>:Agenericcontainerwithnospecificmeaning.
<span>:Agenericinlinecontainerwithnospecificmeaning.
SemanticTags
InHTML,semanticelementsaretagsthatclearlydefinethecontenttheyenclose,
makingiteasierforbothbrowsersanddeveloperstounderstandtheirpurpose.
WhyUseSemanticElements?
InolderversionsofHTML(likeHTML4),developersusedgenerictagsandhadtoadd
customnames(id/class)tostyleandidentifydifferentpartsoftheirpages.Thismadeit
harderforsearchenginesandothertoolstounderstandthestructureofthecontent.
WithHTML5,newsemanticelementsmakethiseasier:
ImprovedStructure:Tagslike<header>,<footer>,and<nav>makeitclearwhat
eachpartofthepageisfor,improvingtheorganization.
BetterAccessibility:Semantictagshelpscreenreadersandotherassistive
technologiesunderstandthecontentbetter.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
15
EasiertoReadandMaintain:Theclearmeaningofthesetagsmakesthecodeeasier
toreadandmanage.
KeySemanticHTMLElements
Tag Description
<article> Definesacompletepieceofcontent,likeablogpostornewsarticle.
<aside> Containscontentthatisrelatedtothemaincontentbutissecondary,likea
sidebar.
<details> Providesadditionaldetailsthatuserscanexpandorhide.
<figcaption>Addsacaptiontoa<figure>element,likeanimageordiagram.
<figure> Containsmediaorillustrationsalongwithoptionalcaptions.
<footer> Containsfooterinformation,suchascontactdetailsorcopyright.
<header> Containstheheaderforasectionortheentirepage,oftenwithnavigationand
titles.
<main> Specifiesthemaincontentofthepage,excludingheaders,footers,and
navigation.
<mark> Highlightstexttoshowitsrelevanceorimportance.
<nav> Providesnavigationlinksforthesite.
<section> Definesasectionofcontent,suchasachapterorgroupofrelatedtopics.
<summary>Providesavisibleheadingfora<details>element.
<time> Representsaspecifictimeordate.
ExampleUsingSemanticElements
Here’showyoumightusetheseelementsinasimplewebpage:
<!DOCTYPEhtml>
<html>
<head>
<title>SimpleWebpage</title>
<style>
body{
font-family:Arial,sans-serif;
}
header,footer{
background-color:#f1f1f1;
padding:10px;
}
aside{
background-color:#e1e1e1;
padding:10px;
}
section{
margin-bottom:20px;
}
figure{
border:1pxsolid#ddd;
padding:10px;
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
EasiertoReadandMaintain:Theclearmeaningofthesetagsmakesthecodeeasier
toreadandmanage.
KeySemanticHTMLElements
Tag Description
<article> Definesacompletepieceofcontent,likeablogpostornewsarticle.
<aside> Containscontentthatisrelatedtothemaincontentbutissecondary,likea
sidebar.
<details> Providesadditionaldetailsthatuserscanexpandorhide.
<figcaption>Addsacaptiontoa<figure>element,likeanimageordiagram.
<figure> Containsmediaorillustrationsalongwithoptionalcaptions.
<footer> Containsfooterinformation,suchascontactdetailsorcopyright.
<header> Containstheheaderforasectionortheentirepage,oftenwithnavigationand
titles.
<main> Specifiesthemaincontentofthepage,excludingheaders,footers,and
navigation.
<mark> Highlightstexttoshowitsrelevanceorimportance.
<nav> Providesnavigationlinksforthesite.
<section> Definesasectionofcontent,suchasachapterorgroupofrelatedtopics.
<summary>Providesavisibleheadingfora<details>element.
<time> Representsaspecifictimeordate.
ExampleUsingSemanticElements
Here’showyoumightusetheseelementsinasimplewebpage:
<!DOCTYPEhtml>
<html>
<head>
<title>SimpleWebpage</title>
<style>
body{
font-family:Arial,sans-serif;
}
header,footer{
background-color:#f1f1f1;
padding:10px;
}
aside{
background-color:#e1e1e1;
padding:10px;
}
section{
margin-bottom:20px;
}
figure{
border:1pxsolid#ddd;
padding:10px;
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
16
margin:10px0;
}</style>
</head>
<body>
<header>
<h1>MyWebsite</h1>
<nav>
<ul>
<li><ahref="#">Home</a></li>
<li><ahref="#">About</a></li>
<li><ahref="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>AboutUs</h2>
<p>Weprovidehigh-quality
productstoourcustomers.</p>
</section>
<section>
<h2>OurProducts</h2>
<p>Exploreourrangeof
productsincludingelectronics
andfashion.</p>
<figure>
<imgsrc="product.jpg"
alt="OurProduct">
<figcaption>Our
featuredproduct.</figcaption>
</figure>
</section>
<aside>
<h2>RelatedLinks</h2>
<ul>
<li><ahref="#">Link1</a></li>
<li><ahref="#">Link2</a></li>
<li><ahref="#">Link3</a></li>
</ul>
</aside>
</main>
<footer>
<p>©2024My
Website.Allrightsreserved.</p>
</footer>
</body>
</html>
Block,Inline,andInline-Block
HTMLelementsarecategorizedbasedonhowtheydisplayonawebpage.Here’saclear
guidetounderstandthedifferences:
1.BlockElements
Characteristics:
oFullWidth:Theytakeuptheentirewidthoftheircontainer.
oNewLine:Theyalwaysstartonanewline.
oMargins:Theyhavespace(margins)aboveandbelowthem.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
margin:10px0;
}</style>
</head>
<body>
<header>
<h1>MyWebsite</h1>
<nav>
<ul>
<li><ahref="#">Home</a></li>
<li><ahref="#">About</a></li>
<li><ahref="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>AboutUs</h2>
<p>Weprovidehigh-quality
productstoourcustomers.</p>
</section>
<section>
<h2>OurProducts</h2>
<p>Exploreourrangeof
productsincludingelectronics
andfashion.</p>
<figure>
<imgsrc="product.jpg"
alt="OurProduct">
<figcaption>Our
featuredproduct.</figcaption>
</figure>
</section>
<aside>
<h2>RelatedLinks</h2>
<ul>
<li><ahref="#">Link1</a></li>
<li><ahref="#">Link2</a></li>
<li><ahref="#">Link3</a></li>
</ul>
</aside>
</main>
<footer>
<p>©2024My
Website.Allrightsreserved.</p>
</footer>
</body>
</html>
Block,Inline,andInline-Block
HTMLelementsarecategorizedbasedonhowtheydisplayonawebpage.Here’saclear
guidetounderstandthedifferences:
1.BlockElements
Characteristics:
oFullWidth:Theytakeuptheentirewidthoftheircontainer.
oNewLine:Theyalwaysstartonanewline.
oMargins:Theyhavespace(margins)aboveandbelowthem.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
17
oContainOtherElements:Youcanincludeotherblockorinlineelements
insidethem.
Examples:
o<h1>-<h6>:Headingsofdifferentsizes.
o<div>:Acontainertogroupcontent.
o<hr>:Ahorizontallinetoseparatecontent.
o<li>:Alistitem.
o<ul>:Anunordered(bulleted)list.
o<ol>:Anordered(numbered)list.
o<p>:Aparagraphoftext.
o<table>:Atablefororganizingdata.
SemanticBlockElements:
o<header>:Containsintroductorycontentlikelogosornavigationmenus.
o<nav>:Containsnavigationlinks.
o<footer>:Containsinformationlikecontactdetailsorcopyright.
o<main>:Themaincontentofthepage.
o<section>:Definesasectionofcontent.
o<article>:Representsanindependentpieceofcontent,suchasablogpost.
o<aside>:Containscontentrelatedtothemaincontent,likeasidebar.
2.InlineElements
Characteristics:
oWidth:Theyonlyuseasmuchwidthasnecessary.
oSameLine:Theydonotstartonanewline;theyflowalongwithotherinline
elements.
oNoMargins:Theydonothavetoporbottommargins.
Examples:
o<a>:Createshyperlinks.
o<br>:Insertsalinebreak.
o<script>:IncludesJavaScriptcode.
o<input>:Collectsuserinputinforms.
o<img>:Displaysimages.
o<span>:Agenericcontainerthatdoesnotaffectlayout.
o<b>:Makestextbold.
o<label>:Labelsformcontrols.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
oContainOtherElements:Youcanincludeotherblockorinlineelements
insidethem.
Examples:
o<h1>-<h6>:Headingsofdifferentsizes.
o<div>:Acontainertogroupcontent.
o<hr>:Ahorizontallinetoseparatecontent.
o<li>:Alistitem.
o<ul>:Anunordered(bulleted)list.
o<ol>:Anordered(numbered)list.
o<p>:Aparagraphoftext.
o<table>:Atablefororganizingdata.
SemanticBlockElements:
o<header>:Containsintroductorycontentlikelogosornavigationmenus.
o<nav>:Containsnavigationlinks.
o<footer>:Containsinformationlikecontactdetailsorcopyright.
o<main>:Themaincontentofthepage.
o<section>:Definesasectionofcontent.
o<article>:Representsanindependentpieceofcontent,suchasablogpost.
o<aside>:Containscontentrelatedtothemaincontent,likeasidebar.
2.InlineElements
Characteristics:
oWidth:Theyonlyuseasmuchwidthasnecessary.
oSameLine:Theydonotstartonanewline;theyflowalongwithotherinline
elements.
oNoMargins:Theydonothavetoporbottommargins.
Examples:
o<a>:Createshyperlinks.
o<br>:Insertsalinebreak.
o<script>:IncludesJavaScriptcode.
o<input>:Collectsuserinputinforms.
o<img>:Displaysimages.
o<span>:Agenericcontainerthatdoesnotaffectlayout.
o<b>:Makestextbold.
o<label>:Labelsformcontrols.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
18
FeatureInlineElements BlockElements
Width Occupyonlythewidthnecessaryfor
theircontent.
Occupythefullwidthoftheircontainer.
LineBehaviorDonotstartonanewline. Alwaysstartonanewline.
Placement Allowotherinlineelementstosit
besidethem.
Donotallowotherelementstositbeside
them;theytakeupthefullwidth.
Margins Donothavetopandbottommargins.Havetopandbottommargins.
HTMLLinks
HTMLlinksarecrucialfornavigatingbetweendifferentwebpagesandresources.Here’sa
simpleguideonhowHTMLlinksworkandhowtousethem:
1.BasicStructureofanHTMLLink
Tocreatealink,youusethe<a>(anchor)tag.Here’sthebasicsyntax:
<ahref="https://www.example.com">VisitExample</a>
<a>:Theanchortagthatcreatesalink.
href:SpecifiestheURLwherethelinkpoints.
LinkText:Theclickabletextbetweenthe<a>tags.
2.LinkAttributes
href:Defineswherethelinkgoes.
oAbsoluteURL:AcompleteURL,e.g.,https://www.example.com.
oRelativeURL:Apathrelativetothecurrentpage,e.g.,about.html.
target:Determineswherethelinkopens.
o_self:Opensinthesamewindow(default).
o_blank:Opensinanewtaborwindow.
o_parent:Opensintheparentframe(ifinsideaframe).
o_top:Opensinthefullwindow.
title:Showsadditionalinfowhenyouhoveroverthelink.
rel:Definestherelationshipbetweenthecurrentandlinkeddocument.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
FeatureInlineElements BlockElements
Width Occupyonlythewidthnecessaryfor
theircontent.
Occupythefullwidthoftheircontainer.
LineBehaviorDonotstartonanewline. Alwaysstartonanewline.
Placement Allowotherinlineelementstosit
besidethem.
Donotallowotherelementstositbeside
them;theytakeupthefullwidth.
Margins Donothavetopandbottommargins.Havetopandbottommargins.
HTMLLinks
HTMLlinksarecrucialfornavigatingbetweendifferentwebpagesandresources.Here’sa
simpleguideonhowHTMLlinksworkandhowtousethem:
1.BasicStructureofanHTMLLink
Tocreatealink,youusethe<a>(anchor)tag.Here’sthebasicsyntax:
<ahref="https://www.example.com">VisitExample</a>
<a>:Theanchortagthatcreatesalink.
href:SpecifiestheURLwherethelinkpoints.
LinkText:Theclickabletextbetweenthe<a>tags.
2.LinkAttributes
href:Defineswherethelinkgoes.
oAbsoluteURL:AcompleteURL,e.g.,https://www.example.com.
oRelativeURL:Apathrelativetothecurrentpage,e.g.,about.html.
target:Determineswherethelinkopens.
o_self:Opensinthesamewindow(default).
o_blank:Opensinanewtaborwindow.
o_parent:Opensintheparentframe(ifinsideaframe).
o_top:Opensinthefullwindow.
title:Showsadditionalinfowhenyouhoveroverthelink.
rel:Definestherelationshipbetweenthecurrentandlinkeddocument.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
19
onoopener:Preventsthenewpagefromaccessingtheoriginalpage’swindow
object.
onoreferrer:Preventssendingthereferringpage’sURL.
3.TypesofLinks
InternalLinks:Linktoanotherpageonthesamewebsite.
<ahref="contact.html">ContactUs</a>
ExternalLinks:Linktoapageonadifferentwebsite.
<ahref="https://www.example.com">VisitExample</a>
AnchorLinks:LinktoaspecificpartofthesamepageusinganID.
<ahref="#section1">GotoSection1</a>
<h2id="section1">Section1</h2>
EmailLinks:Opentheuser’semailclient.
<ahref="mailto:[email protected]">EmailUs</a>
TelephoneLinks:Startaphonecallonmobiledevices.
<ahref="tel:+1234567890">CallUs</a>
DownloadLinks:Letusersdownloadfiles.
<ahref="file.zip"download>DownloadFile</a>
5.BestPractices
UseDescriptiveLinkText:Makesurethetextofthelinkclearlyexplainswhereit
willtaketheuser.
TestLinks:Regularlycheckthatalllinksworkcorrectly.
Accessibility:Improveaccessibilitywitharia-labelorotherARIAattributesforusers
withdisabilities.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
onoopener:Preventsthenewpagefromaccessingtheoriginalpage’swindow
object.
onoreferrer:Preventssendingthereferringpage’sURL.
3.TypesofLinks
InternalLinks:Linktoanotherpageonthesamewebsite.
<ahref="contact.html">ContactUs</a>
ExternalLinks:Linktoapageonadifferentwebsite.
<ahref="https://www.example.com">VisitExample</a>
AnchorLinks:LinktoaspecificpartofthesamepageusinganID.
<ahref="#section1">GotoSection1</a>
<h2id="section1">Section1</h2>
EmailLinks:Opentheuser’semailclient.
<ahref="mailto:[email protected]">EmailUs</a>
TelephoneLinks:Startaphonecallonmobiledevices.
<ahref="tel:+1234567890">CallUs</a>
DownloadLinks:Letusersdownloadfiles.
<ahref="file.zip"download>DownloadFile</a>
5.BestPractices
UseDescriptiveLinkText:Makesurethetextofthelinkclearlyexplainswhereit
willtaketheuser.
TestLinks:Regularlycheckthatalllinksworkcorrectly.
Accessibility:Improveaccessibilitywitharia-labelorotherARIAattributesforusers
withdisabilities.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
20
UnderstandingandusingHTMLlinksproperlyhelpsincreatingawell-organizedanduser-
friendlywebsite.
HTMLForms
HTMLFormsarerequiredwhenyouwanttocollectsomedatafromthesitevisitor.For
exampleduringuserregistrationyouwouldliketocollectinformationsuchasname,email
address,creditcard,etc.
TheHTML<form>tagisusedtocreateanHTMLformandithasfollowingsyntax:
<form>
<!--formelements-->
</form>
FormElements
TheHTML<form>comprisesseveralelements,eachservingauniquepurpose.
ElementsDescriptions
<label>Itdefineslabelsfor<form>elements.
<input>
Itisusedtogetinputdatafromtheforminvarioustypessuchastext,
password,email,etcbychangingitstype.
<button>
Itdefinesaclickablebuttontocontrolotherelementsorexecutea
functionality.
<select>Itisusedtocreateadrop-downlist.
<textarea>Itisusedtogetinputlongtextcontent.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
UnderstandingandusingHTMLlinksproperlyhelpsincreatingawell-organizedanduser-
friendlywebsite.
HTMLForms
HTMLFormsarerequiredwhenyouwanttocollectsomedatafromthesitevisitor.For
exampleduringuserregistrationyouwouldliketocollectinformationsuchasname,email
address,creditcard,etc.
TheHTML<form>tagisusedtocreateanHTMLformandithasfollowingsyntax:
<form>
<!--formelements-->
</form>
FormElements
TheHTML<form>comprisesseveralelements,eachservingauniquepurpose.
ElementsDescriptions
<label>Itdefineslabelsfor<form>elements.
<input>
Itisusedtogetinputdatafromtheforminvarioustypessuchastext,
password,email,etcbychangingitstype.
<button>
Itdefinesaclickablebuttontocontrolotherelementsorexecutea
functionality.
<select>Itisusedtocreateadrop-downlist.
<textarea>Itisusedtogetinputlongtextcontent.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
21
ElementsDescriptions
<fieldset>
Itisusedtodrawaboxaroundotherformelementsandgrouptherelated
data.
<legend>Itdefinesacaptionforfieldsetelements
<datalist>Itisusedtospecifypre-definedlistoptionsforinputcontrols.
<output>Itdisplaystheoutputofperformedcalculations.
<option>Itisusedtodefineoptionsinadrop-downlist.
<optgroup>Itisusedtodefinegroup-relatedoptionsinadrop-downlist.
CommonlyUsedInputTypesinHTMLForms
InHTMLforms,variousinputtypesareusedtocollectdifferenttypesofdatafromusers.
Herearesomecommonlyusedinputtypes:
InputType Description
<inputtype=”text“>Definesaone-linetextinputfield
<input
type=”password“>
Definesapasswordfield
<inputtype=”submit“>Definesasubmitbutton
<inputtype=”reset“>Definesaresetbutton
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
ElementsDescriptions
<fieldset>
Itisusedtodrawaboxaroundotherformelementsandgrouptherelated
data.
<legend>Itdefinesacaptionforfieldsetelements
<datalist>Itisusedtospecifypre-definedlistoptionsforinputcontrols.
<output>Itdisplaystheoutputofperformedcalculations.
<option>Itisusedtodefineoptionsinadrop-downlist.
<optgroup>Itisusedtodefinegroup-relatedoptionsinadrop-downlist.
CommonlyUsedInputTypesinHTMLForms
InHTMLforms,variousinputtypesareusedtocollectdifferenttypesofdatafromusers.
Herearesomecommonlyusedinputtypes:
InputType Description
<inputtype=”text“>Definesaone-linetextinputfield
<input
type=”password“>
Definesapasswordfield
<inputtype=”submit“>Definesasubmitbutton
<inputtype=”reset“>Definesaresetbutton
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
22
InputType Description
<inputtype=”radio“>Definesaradiobutton
<inputtype=”email“>Validatesthattheinputisavalidemailaddress.
<input
type=”number“>
Allowstheusertoenteranumber.Youcanspecifymin,max,and
stepattributesforrange.
<input
type=”checkbox“>
Usedforcheckboxeswheretheusercanselectmultipleoptions.
<inputtype=”date“>Allowstheusertoselectadatefromacalendar.
<inputtype=”time“>Allowstheusertoselectatime.
<inputtype=”file“>Allowstheusertoselectafiletoupload.
BasicHTMLFormsExample:
Example:ThisHTMLformscollectstheuserpersonalinformationsuchasusernameand
passwordwiththebuttontosubmittheform.
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>HtmlForms</title>
</head>
<body>
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
InputType Description
<inputtype=”radio“>Definesaradiobutton
<inputtype=”email“>Validatesthattheinputisavalidemailaddress.
<input
type=”number“>
Allowstheusertoenteranumber.Youcanspecifymin,max,and
stepattributesforrange.
<input
type=”checkbox“>
Usedforcheckboxeswheretheusercanselectmultipleoptions.
<inputtype=”date“>Allowstheusertoselectadatefromacalendar.
<inputtype=”time“>Allowstheusertoselectatime.
<inputtype=”file“>Allowstheusertoselectafiletoupload.
BasicHTMLFormsExample:
Example:ThisHTMLformscollectstheuserpersonalinformationsuchasusernameand
passwordwiththebuttontosubmittheform.
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>HtmlForms</title>
</head>
<body>
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
23
<h2>HTMLForms</h2>
<form>
<labelfor="username">Username:</label><br>
<inputtype="text"id="username"name="username"><br><br>
<labelfor="password">Password:</label><br>
<inputtype="password"id="password"name="password"><br><br>
<inputtype="submit"value="Submit">
</form>
</body>
</html>
Output:
FormAttributes
Herearesomeofthekeyattributesthatcanbeusedwiththe<form>element:
1.action:Thisattributespecifieswheretosendtheform-datawhenaformis
submitted.ThevalueofthisattributeistypicallyaURL.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
<h2>HTMLForms</h2>
<form>
<labelfor="username">Username:</label><br>
<inputtype="text"id="username"name="username"><br><br>
<labelfor="password">Password:</label><br>
<inputtype="password"id="password"name="password"><br><br>
<inputtype="submit"value="Submit">
</form>
</body>
</html>
Output:
FormAttributes
Herearesomeofthekeyattributesthatcanbeusedwiththe<form>element:
1.action:Thisattributespecifieswheretosendtheform-datawhenaformis
submitted.ThevalueofthisattributeistypicallyaURL.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
24
2.method:ThisattributedefinestheHTTPmethodusedtosendtheform-data.The
valuescanbe“get”or“post”.
3.target:Thisattributespecifieswheretodisplaytheresponsereceivedafter
submittingtheform.Thevaluescanbe“_blank”,“_self”,“_parent”,“_top”,orthe
nameofaniframe.
4.enctype:Thisattributeisusedwhenmethod=“post”.Itspecifieshowtheform-data
shouldbeencodedwhensubmittingittotheserver.Thevaluescanbe“application/x-
www-form-urlencoded”,“multipart/form-data”,or“text/plain”.
5.autocomplete:Thisattributespecifieswhetheraformshouldhaveautocompleteon
oroff.Whenautocompleteison,thebrowserautomaticallycompletesvaluesbasedon
valuesthattheuserhasenteredbefore.
6.novalidate:ThisBooleanattributespecifiesthattheform-datashouldnotbe
validatedonsubmission.
7.accept-charset:Specifiesthecharacterencodngusedfortheformsubmission.
8.name:Specifiesthenameoftheform.
9.rel:Specifiestherelationshipbetweenalinkedresourceandthecurrentdocument.
MediaElements
Multimediaonthewebissound,music,videos,movies,andanimations.
MediaTags:
MediaTag Description
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
2.method:ThisattributedefinestheHTTPmethodusedtosendtheform-data.The
valuescanbe“get”or“post”.
3.target:Thisattributespecifieswheretodisplaytheresponsereceivedafter
submittingtheform.Thevaluescanbe“_blank”,“_self”,“_parent”,“_top”,orthe
nameofaniframe.
4.enctype:Thisattributeisusedwhenmethod=“post”.Itspecifieshowtheform-data
shouldbeencodedwhensubmittingittotheserver.Thevaluescanbe“application/x-
www-form-urlencoded”,“multipart/form-data”,or“text/plain”.
5.autocomplete:Thisattributespecifieswhetheraformshouldhaveautocompleteon
oroff.Whenautocompleteison,thebrowserautomaticallycompletesvaluesbasedon
valuesthattheuserhasenteredbefore.
6.novalidate:ThisBooleanattributespecifiesthattheform-datashouldnotbe
validatedonsubmission.
7.accept-charset:Specifiesthecharacterencodngusedfortheformsubmission.
8.name:Specifiesthenameoftheform.
9.rel:Specifiestherelationshipbetweenalinkedresourceandthecurrentdocument.
MediaElements
Multimediaonthewebissound,music,videos,movies,andanimations.
MediaTags:
MediaTag Description
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
25
MediaTag Description
<audio>
Aninlineelementisusedtoembedsoundfiles
intoawebpage.
<video> Usedtoembedvideofilesintoawebpage.
<source>
Usedtoattachmultimediafileslikeaudio,
video,andpictures.
<embed>
Usedforembeddingexternalapplications,
generallymultimediacontentlikeaudioor
video,intoanHTMLdocument.<
<track>
Specifiestexttracksformediacomponents,
specificallyforaudioandvideoelements.
AdvantageofMediatag:
Pluginsarenolongerrequired
Speed–anythingnaturallyintegratedintoabrowserwillberenderedandexecuted
inafasterfashionthanimportedthird-party
Native(built-in)controlsareprovidedbythebrowser.
Accessibilities(keyboard,mouse)arebuilt-inautomatically
SVG(ScalableVectorGraphics)
SVGdefinesvector-basedgraphicsinXML,whichcanbedirectlyembeddedinHTML
pages.SVGgraphicsarescalable,anddonotloseanyqualityiftheyarezoomedorresized.
WhatisSVG?
SVGstandsforScalableVectorGraphics
SVGisusedtodefinevector-basedgraphicsfortheWeb
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
MediaTag Description
<audio>
Aninlineelementisusedtoembedsoundfiles
intoawebpage.
<video> Usedtoembedvideofilesintoawebpage.
<source>
Usedtoattachmultimediafileslikeaudio,
video,andpictures.
<embed>
Usedforembeddingexternalapplications,
generallymultimediacontentlikeaudioor
video,intoanHTMLdocument.<
<track>
Specifiestexttracksformediacomponents,
specificallyforaudioandvideoelements.
AdvantageofMediatag:
Pluginsarenolongerrequired
Speed–anythingnaturallyintegratedintoabrowserwillberenderedandexecuted
inafasterfashionthanimportedthird-party
Native(built-in)controlsareprovidedbythebrowser.
Accessibilities(keyboard,mouse)arebuilt-inautomatically
SVG(ScalableVectorGraphics)
SVGdefinesvector-basedgraphicsinXML,whichcanbedirectlyembeddedinHTML
pages.SVGgraphicsarescalable,anddonotloseanyqualityiftheyarezoomedorresized.
WhatisSVG?
SVGstandsforScalableVectorGraphics
SVGisusedtodefinevector-basedgraphicsfortheWeb
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
26
SVGdefinesgraphicsinXMLformat
EachelementandattributeinSVGfilescanbeanimated
SVGisaW3Crecommendation
SVGintegrateswithotherstandards,suchasCSS,DOM,XSLandJavaScript
The<svg>Element
TheHTML<svg>elementisacontainerforSVGgraphics.
SVGhasseveralmethodsfordrawingpaths,rectangles,circles,polygons,text,andmuch
more.
WaystouseSVGinHTML:
TherearetwowaysofembeddingtheSVGfilesinHTML
1)Using<img>tag
2)Using<svg>tag
Using<img>tag:
WecandirectlyembedtheSVGfilesinsideourwebpageusingthesrcattributeof<img>
tagasshownbelow.Wecanpasseitherthepathoranonlinelinktothesvgimage.
<imgsrc="yourfilename.svg"/>
Using<svg>tag:
HTMLallowsembeddingSVGdirectlyusing<svg>...</svg>tagwhichhasthefollowing
syntax
<svg>
<!--codetocreategraphics--></svg>
TagsinsideSVGElement:
TherearesomepredefinedSVGelementsthatareusedtodrawvariousshapeslikecircles,
rectangles,linesandsoon.Theyareasfollows:
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
SVGdefinesgraphicsinXMLformat
EachelementandattributeinSVGfilescanbeanimated
SVGisaW3Crecommendation
SVGintegrateswithotherstandards,suchasCSS,DOM,XSLandJavaScript
The<svg>Element
TheHTML<svg>elementisacontainerforSVGgraphics.
SVGhasseveralmethodsfordrawingpaths,rectangles,circles,polygons,text,andmuch
more.
WaystouseSVGinHTML:
TherearetwowaysofembeddingtheSVGfilesinHTML
1)Using<img>tag
2)Using<svg>tag
Using<img>tag:
WecandirectlyembedtheSVGfilesinsideourwebpageusingthesrcattributeof<img>
tagasshownbelow.Wecanpasseitherthepathoranonlinelinktothesvgimage.
<imgsrc="yourfilename.svg"/>
Using<svg>tag:
HTMLallowsembeddingSVGdirectlyusing<svg>...</svg>tagwhichhasthefollowing
syntax
<svg>
<!--codetocreategraphics--></svg>
TagsinsideSVGElement:
TherearesomepredefinedSVGelementsthatareusedtodrawvariousshapeslikecircles,
rectangles,linesandsoon.Theyareasfollows:
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
27
TagsDescription
<rect>
Usedtodefinearectangleinvectorgraphicsforgivenwidthandheightas
attribute.
<circle>Usedtodefinecircleforgivencoordinatesoftop-leftcornerandradiusasattribute.
<ellipse>
Usedtodefineellipseforgivencoordinatesoftop-leftcorner,lengthofmajoraxis
andlengthofminoraxisasattribute.
<line>Usedtodrawlineforforgiventwocoordinatesasattribute
<polyline>Usedtodefineapolylineforgivencoordinatesofseriesofconnectedpoints
<polygon>Usedtodefineapolygonforgivencoordinatesthatjoinsinstraightline.
The<svg>tagisthetoplevel(root)elementoftheabovementionedtags.Theyaredefined
insidethesvgelement.
AttributesofSVGElements
ThefollowingtablecontainsalistofattributesofSVGElements:
AttributeDescription
X Thetop-leftx-axiscoordinate.
Y Thetop-lefty-axiscoordinate.
width Thewidthofrectanglefigure.
height Theheightofrectanglefigure.
rx Thex-axis'roundnessofellipse.
ry They-axis'roundnessofellipse.
style Indicateaninlinestyle.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
TagsDescription
<rect>
Usedtodefinearectangleinvectorgraphicsforgivenwidthandheightas
attribute.
<circle>Usedtodefinecircleforgivencoordinatesoftop-leftcornerandradiusasattribute.
<ellipse>
Usedtodefineellipseforgivencoordinatesoftop-leftcorner,lengthofmajoraxis
andlengthofminoraxisasattribute.
<line>Usedtodrawlineforforgiventwocoordinatesasattribute
<polyline>Usedtodefineapolylineforgivencoordinatesofseriesofconnectedpoints
<polygon>Usedtodefineapolygonforgivencoordinatesthatjoinsinstraightline.
The<svg>tagisthetoplevel(root)elementoftheabovementionedtags.Theyaredefined
insidethesvgelement.
AttributesofSVGElements
ThefollowingtablecontainsalistofattributesofSVGElements:
AttributeDescription
X Thetop-leftx-axiscoordinate.
Y Thetop-lefty-axiscoordinate.
width Thewidthofrectanglefigure.
height Theheightofrectanglefigure.
rx Thex-axis'roundnessofellipse.
ry They-axis'roundnessofellipse.
style Indicateaninlinestyle.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
28
FollowingistheSVGexamplewhichwoulddrawarectangleusing<rect>tag.Weuse
heightandwidthattributestomakearectangle
<!DOCTYPEhtml>
<html>
<head>
<title>SVGRectangle</title>
</head>
<body>
<h2>HTMLSVGRectangle</h2>
<svgheight="200">
<rectwidth="300"height="100"fill="red"/></svg>
</body>
</html>
Canvas
TheHTML<canvas>elementisusedtodrawgraphicsonawebpage.
The“canvas”elementisonlyacontainerforgraphics.
OnemustuseJavaScripttoactuallydrawthegraphics.
Canvashasseveralmethodsfordrawingpaths,boxes,circles,text,andaddingimages.
ThecanvaswouldbearectangularareaonanHTMLpage.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
FollowingistheSVGexamplewhichwoulddrawarectangleusing<rect>tag.Weuse
heightandwidthattributestomakearectangle
<!DOCTYPEhtml>
<html>
<head>
<title>SVGRectangle</title>
</head>
<body>
<h2>HTMLSVGRectangle</h2>
<svgheight="200">
<rectwidth="300"height="100"fill="red"/></svg>
</body>
</html>
Canvas
TheHTML<canvas>elementisusedtodrawgraphicsonawebpage.
The“canvas”elementisonlyacontainerforgraphics.
OnemustuseJavaScripttoactuallydrawthegraphics.
Canvashasseveralmethodsfordrawingpaths,boxes,circles,text,andaddingimages.
ThecanvaswouldbearectangularareaonanHTMLpage.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
29
Bydefault,acanvashasnoborderandnocontent.
Syntax:
<canvas>
Content...
</canvas>
Hereisanexampleofabasic,emptycanvas:
<!DOCTYPEhtml>
<html>
<body>
<canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#000000;">
</canvas>
</body>
</html>
DragandDrop
DragandDropisaveryinteractiveanduser-friendlyconceptthatmakesiteasierto
moveanobjecttoadifferentlocationbygrabbingit.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
Bydefault,acanvashasnoborderandnocontent.
Syntax:
<canvas>
Content...
</canvas>
Hereisanexampleofabasic,emptycanvas:
<!DOCTYPEhtml>
<html>
<body>
<canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#000000;">
</canvas>
</body>
</html>
DragandDrop
DragandDropisaveryinteractiveanduser-friendlyconceptthatmakesiteasierto
moveanobjecttoadifferentlocationbygrabbingit.
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
30
Thisallowstheusertoclickandholdthemousebuttonoveranelement,dragitto
anotherlocation,andreleasethemousebuttontodroptheelementthere.
DragandDropEvents
Events Description
ondrag
Itisusedtousewhentheelementortext
selectionisbeingdraggedinHTML.
ondragstart
Itisusedtocallafunction,drag(event),that
specifieswhatdatatobedragged
ondragenter
Itisusedtodeterminewhetherornotthedrop
targetistoacceptthedrop.Ifthedropistobe
accepted,thenthiseventhastobecanceled.
ondragleave
Itoccurswhenthemouseleavesanelement
beforeavaliddroptargetwhilethedragis
occurring.
ondragover
Itspecifieswherethedraggeddatacanbe
dropped.
ondrop
Itspecifieswherethedrophasoccurredatthe
endofthedragoperation.
ondragend
Itoccurswhentheuserhasfinisheddragging
anelement.
TheDataTransferObject
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
Thisallowstheusertoclickandholdthemousebuttonoveranelement,dragitto
anotherlocation,andreleasethemousebuttontodroptheelementthere.
DragandDropEvents
Events Description
ondrag
Itisusedtousewhentheelementortext
selectionisbeingdraggedinHTML.
ondragstart
Itisusedtocallafunction,drag(event),that
specifieswhatdatatobedragged
ondragenter
Itisusedtodeterminewhetherornotthedrop
targetistoacceptthedrop.Ifthedropistobe
accepted,thenthiseventhastobecanceled.
ondragleave
Itoccurswhenthemouseleavesanelement
beforeavaliddroptargetwhilethedragis
occurring.
ondragover
Itspecifieswherethedraggeddatacanbe
dropped.
ondrop
Itspecifieswherethedrophasoccurredatthe
endofthedragoperation.
ondragend
Itoccurswhentheuserhasfinisheddragging
anelement.
TheDataTransferObject
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
31
ThedatatransferpropertyisusedwhenthewholeprocessofDragandDrophappens.Itis
usedtoholdthedraggeddatafromthesourceanddropittothedesiredlocation.Theseare
thepropertiesassociatedwithit:
Property Description
dataTransfer.setData(format,data) Setsthedatatobedragged.
dataTransfer.clearData(format)
Clearsdata,ifaformatisspecified,it
removesonlythatspecificdata.
dataTransfer.getData(format)
Returnsdataofthespecifiedformat;returns
anemptystringifnodata.
dataTransfer.types
Returnsanarrayofallformatssetduring
dragstart.
dataTransfer.files Returnsallfilestobedropped.
dataTransfer.setDragImage(element,x,y)
Displaysanexistingimageduringdrag,with
coordinatesfordroplocation
dataTransfer.addElement(element)
Addsthespecifiedelementasadragfeedback
image.
dataTransfer.effectAllowed(value)
Specifiesallowedoperationsfortheuser:
none,copy,link,move,etc.
dataTransfer.dropEffect(value)
Controlsfeedbackduringdragenter/dragover
events,indicatingoperationtype:none,copy,
link,move.
Theexamplebelowisasimpledraganddropexample;todraganimageintotherectangle:
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
ThedatatransferpropertyisusedwhenthewholeprocessofDragandDrophappens.Itis
usedtoholdthedraggeddatafromthesourceanddropittothedesiredlocation.Theseare
thepropertiesassociatedwithit:
Property Description
dataTransfer.setData(format,data) Setsthedatatobedragged.
dataTransfer.clearData(format)
Clearsdata,ifaformatisspecified,it
removesonlythatspecificdata.
dataTransfer.getData(format)
Returnsdataofthespecifiedformat;returns
anemptystringifnodata.
dataTransfer.types
Returnsanarrayofallformatssetduring
dragstart.
dataTransfer.files Returnsallfilestobedropped.
dataTransfer.setDragImage(element,x,y)
Displaysanexistingimageduringdrag,with
coordinatesfordroplocation
dataTransfer.addElement(element)
Addsthespecifiedelementasadragfeedback
image.
dataTransfer.effectAllowed(value)
Specifiesallowedoperationsfortheuser:
none,copy,link,move,etc.
dataTransfer.dropEffect(value)
Controlsfeedbackduringdragenter/dragover
events,indicatingoperationtype:none,copy,
link,move.
Theexamplebelowisasimpledraganddropexample;todraganimageintotherectangle:
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
32
<!DOCTYPEHTML>
<html>
<head>
<style>
#div1{
width:350px;
height:70px;
padding:10px;
border:1pxsolid#aaaaaa;
}
</style>
<script>
functionallowDrop(ev){
ev.preventDefault();
}
functiondrag(ev){
ev.dataTransfer.setData("text",ev.target.id);
}
functiondrop(ev){
ev.preventDefault();
vardata=ev.dataTransfer.getData("text");
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
<!DOCTYPEHTML>
<html>
<head>
<style>
#div1{
width:350px;
height:70px;
padding:10px;
border:1pxsolid#aaaaaa;
}
</style>
<script>
functionallowDrop(ev){
ev.preventDefault();
}
functiondrag(ev){
ev.dataTransfer.setData("text",ev.target.id);
}
functiondrop(ev){
ev.preventDefault();
vardata=ev.dataTransfer.getData("text");
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
33
ev.target.append-child(document.getElementById(data));
}
</script>
</head>
<body>
<p>DragtheW3Schoolsimageintotherectangle:</p>
<divid="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></div>
<br>
<imgid="drag1"src="img_logo.gif"draggable="true"ondragstart="drag(event)"
width="336"height="69">
</body>
</html>
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
ev.target.append-child(document.getElementById(data));
}
</script>
</head>
<body>
<p>DragtheW3Schoolsimageintotherectangle:</p>
<divid="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></div>
<br>
<imgid="drag1"src="img_logo.gif"draggable="true"ondragstart="drag(event)"
width="336"height="69">
</body>
</html>
Prepared By: Kale J. N. (AP, Computer Department, Sanjivani College of Engineering, Kopargaon)
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 11
- Slides 33
- Age 36 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
48 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
47 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
37 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
35 views
21
Know for Certain
DaveSinNM
23 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
26 views