Computer language - HTML tags
iumamaheswari
343 views
33 slides
Nov 29, 2020
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
HTML tags, Tags, Empty tag, Container tag, Attributes, Structure of HTML document, Head section, body section, comment tags, Font tag, attribute of font tag, More tags on formatting, heading tags, paragraph tag, the paragraph attribute 'align', line break, horizontal tag, line break, backgro...
Slide Content
Tags
•Tagsalsocalledasmarkups,instructthe
browserhowtodisplayHTMLdocument.
•Itconsistsofakeyword(whichhaspre–
definedmeaning)enclosedwithin
angularbrackets(<>).
•HTMLusestwotypesoftagelement
1.Emptytag
2.Containertag
•Tagsalsocalledasmarkups,instructthe
browserhowtodisplayHTMLdocument.
•Itconsistsofakeyword(whichhaspre–
definedmeaning)enclosedwithin
angularbrackets(<>).
•HTMLusestwotypesoftagelement
1.Emptytag
2.Containertag
Empty tag
•Emptytagrepresentstheformatting
optionsoftextsuchaslinebreak,
horizontalruler,paragraphsettingetc.
•Thesetagshaveonlybeginningtag(start
tag)
•Eg.<BR>,<HR>,<P>
•Emptytagrepresentstheformatting
optionsoftextsuchaslinebreak,
horizontalruler,paragraphsettingetc.
•Thesetagshaveonlybeginningtag(start
tag)
•Eg.<BR>,<HR>,<P>
Container tag
•Containertagshaveasectionoftext,
whichspecifiestheformattingconstruction
foralltheselectedtext.
•ContainertaghasbothstarttagandEnd
tag.
•Theendtagissameasthestarttagwith
anadditionofaforwardslash.
•Eg<B>…………..</B>
<body>……..</body>
•Containertagshaveasectionoftext,
whichspecifiestheformattingconstruction
foralltheselectedtext.
•ContainertaghasbothstarttagandEnd
tag.
•Theendtagissameasthestarttagwith
anadditionofaforwardslash.
•Eg<B>…………..</B>
<body>……..</body>
Attributes
•Attributesareadditionalinformationgiven
toatag.
•Theyareusedforspecificpurposeonly.
•Attributesareaddedonlyto‘start’tagsand
notto‘end’tags.
•Attributesarenotenclosedwithinangular
bracket.
•Attributesareadditionalinformationgiven
toatag.
•Theyareusedforspecificpurposeonly.
•Attributesareaddedonlyto‘start’tagsand
notto‘end’tags.
•Attributesarenotenclosedwithinangular
bracket.
Structure of HTML document
•HTML document has two sections
1.Head Section
2.Body Section
<HTML>
<HEAD>
Head section <TITLE> …………… </TITLE>
</HEAD>
<BODY>
Body section
</BODY>
</HTML>
•HTML document has two sections
1.Head Section
2.Body Section
<HTML>
<HEAD>
Head section <TITLE> …………… </TITLE>
</HEAD>
<BODY>
Body section
</BODY>
</HTML>
Head section
•Containsalldocumentheaderinformationliketitle
ofthedocument.
•Thissectionbeginsandendswith<HEAD>…….
</HEAD>tags.
•Thedocumenttitleisdisplayedwiththehelpof
<title>…..</title>tagswhichisenclosedwithin
<head>……</head>tags.
•Thistitleisdisplayedinthetitlebaroratthetopof
thedocument.
•ItisaquickreferencetoWWWbrowsersandother
applicationthataccessHTMLfiles.
•Containsalldocumentheaderinformationliketitle
ofthedocument.
•Thissectionbeginsandendswith<HEAD>…….
</HEAD>tags.
•Thedocumenttitleisdisplayedwiththehelpof
<title>…..</title>tagswhichisenclosedwithin
<head>……</head>tags.
•Thistitleisdisplayedinthetitlebaroratthetopof
thedocument.
•ItisaquickreferencetoWWWbrowsersandother
applicationthataccessHTMLfiles.
Eg.,1
<HTML>
<HEAD>
<TITLE> Computer Education </TITLE>
</HEAD>
</HTML>
Eg., 2
<HTML>
<HEAD>
<TITLE> Introduction to HTML </TITLE>
</HEAD>
</HTML>
<HTML>
<HEAD>
<TITLE> Computer Education </TITLE>
</HEAD>
</HTML>
Eg., 2
<HTML>
<HEAD>
<TITLE> Introduction to HTML </TITLE>
</HEAD>
</HTML>
Body Section
•Thebodysectioncomesafterhead
section.
•Itincludestext,object,imagesandsound
thatgetsdisplayedinthebrowserwindow.
•Thebodysectionisenclosedwith<body>
….</body>tags.
•Thebodysectioncomesafterhead
section.
•Itincludestext,object,imagesandsound
thatgetsdisplayedinthebrowserwindow.
•Thebodysectionisenclosedwith<body>
….</body>tags.
Comment tags
•Commentsareaddedtothedocumentsforthe
benefitofthewriter,whichhelpstounderstand
thedocument.
•Itisalsousedtospecifytheauthor’sname,copy
rightmessageetc.
•Commentsareincludedanywhereinthe
program.
•Thesecommentstatementsareignoredbythe
browser.
•Theyaregivenwithin<!--and-->tags
•eg.<!--Thisisatitleofthewebpage-->
•Commentsareaddedtothedocumentsforthe
benefitofthewriter,whichhelpstounderstand
thedocument.
•Itisalsousedtospecifytheauthor’sname,copy
rightmessageetc.
•Commentsareincludedanywhereinthe
program.
•Thesecommentstatementsareignoredbythe
browser.
•Theyaregivenwithin<!--and-->tags
•eg.<!--Thisisatitleofthewebpage-->
Tags
•<BIG> ….. </BIG> -displays the text in a font
larger than the font currently being used.
•<small> …… </small> -displays the text in a
font smaller than the font currently being used.
Eg.<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<BIG> ELECTIVE </BIG>
<SMALL> COMPUTERS IN EDUCATION </SMALL>
</BODY>
</HTML>
•<BIG> ….. </BIG> -displays the text in a font
larger than the font currently being used.
•<small> …… </small> -displays the text in a
font smaller than the font currently being used.
Eg.<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<BIG> ELECTIVE </BIG>
<SMALL> COMPUTERS IN EDUCATION </SMALL>
</BODY>
</HTML>
<FONT>
•<font>tagisusedtospecifythefont
style,sizeandcolourforacharacter,
phraseorarangeortexttobe
displayed.
•<font>……..</font>tags,enclosesthe
text.
•<font>tagisusedtospecifythefont
style,sizeandcolourforacharacter,
phraseorarangeortexttobe
displayed.
•<font>……..</font>tags,enclosesthe
text.
Attributes of font
FACE
•Fontstylesdisplayedinthebrowsercan
bechangedusingthefaceattribute.
•Faceattributehasavaluewhichisafont
name,enclosedwithindoublequotes.
•Ifthespecifiedfontisnotavailableinthe
system,thendefaultfontwillbeassumed.
FACE
•Fontstylesdisplayedinthebrowsercan
bechangedusingthefaceattribute.
•Faceattributehasavaluewhichisafont
name,enclosedwithindoublequotes.
•Ifthespecifiedfontisnotavailableinthe
system,thendefaultfontwillbeassumed.
Size
•Thesizeattributeisenclosedwithinthefonttag
thatindicatesthesizeinwhichthefonthastobe
displayed.
•Thevaluesofsizeattributesare1to7,where3
isthedefaultsize.
Colour
•Thisattributeisusedforchangingthecolourof
thetext.
•Thevalueofcolourattributeiseitheracolour
nameoraRGBcode(000000toFFFFFF).
•Thesizeattributeisenclosedwithinthefonttag
thatindicatesthesizeinwhichthefonthastobe
displayed.
•Thevaluesofsizeattributesare1to7,where3
isthedefaultsize.
Colour
•Thisattributeisusedforchangingthecolourof
thetext.
•Thevalueofcolourattributeiseitheracolour
nameoraRGBcode(000000toFFFFFF).
Example
<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<FONT FACE = “ Arial” SIZE = “5” COLOR = “BLUE”>
ELECTIVE
</FONT>
<SMALL> COMPUTERS IN EDUCATION </SMALL>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<FONT FACE = “ Arial” SIZE = “5” COLOR = “BLUE”>
ELECTIVE
</FONT>
<SMALL> COMPUTERS IN EDUCATION </SMALL>
</BODY>
</HTML>
More tags on formatting
Bold-The<B>tagisusedtodisplaythetextthicker
anddarkerthannormal.Theendtagis</B>
Italics-TodisplaythetextinItalics,<I>tagisused.
Theendtagis</I>
Underline-The<U>tagisusedtounderlinethetext
inthedocument.</U>istheendtag.
Center-Thetextenclosedwithin<center>…….
</center>tagwillbedisplayedinthecenterofthe
line.
Bold-The<B>tagisusedtodisplaythetextthicker
anddarkerthannormal.Theendtagis</B>
Italics-TodisplaythetextinItalics,<I>tagisused.
Theendtagis</I>
Underline-The<U>tagisusedtounderlinethetext
inthedocument.</U>istheendtag.
Center-Thetextenclosedwithin<center>…….
</center>tagwillbedisplayedinthecenterofthe
line.
Example
<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<FONT SIZE = “5””>
<B>ELECTIVE </B><BR>
<U>ELECTIVE </U><BR>
<I>ELECTIVE </I><BR>
<Center>ELECTIVE </Center><BR>
</FONT>
<SMALL> COMPUTERS IN EDUCATION </SMALL>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<FONT SIZE = “5””>
<B>ELECTIVE </B><BR>
<U>ELECTIVE </U><BR>
<I>ELECTIVE </I><BR>
<Center>ELECTIVE </Center><BR>
</FONT>
<SMALL> COMPUTERS IN EDUCATION </SMALL>
</BODY>
</HTML>
Heading tags
•There are six levels of headings from
heading 1 to heading 6 in HTML.
•The heading tags has a start tag and an
end tag.
•H1, H2, H3, H4, H5, H6 are the six levels,
each having its own appearance.
•The headings tags are used to set apart
document text and section subtitles.
•There are six levels of headings from
heading 1 to heading 6 in HTML.
•The heading tags has a start tag and an
end tag.
•H1, H2, H3, H4, H5, H6 are the six levels,
each having its own appearance.
•The headings tags are used to set apart
document text and section subtitles.
Example
<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<H1>ELECTIVE </H1><BR>
<H2>ELECTIVE </H2><BR>
<H3>ELECTIVE </H3><BR>
<H4>ELECTIVE </H4><BR>
<H5>ELECTIVE </H5><BR>
<H6>ELECTIVE </H6><BR>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<H1>ELECTIVE </H1><BR>
<H2>ELECTIVE </H2><BR>
<H3>ELECTIVE </H3><BR>
<H4>ELECTIVE </H4><BR>
<H5>ELECTIVE </H5><BR>
<H6>ELECTIVE </H6><BR>
</BODY>
</HTML>
Paragraph
•Theparagraphtag<P>isusedtobreak
thetextintoparagraphs.
•The<P>tagisplacedatthebeginningof
eachnewparagraph,andthebrowser
separatesthetextintoparagraphs.
•Theendtag</P>isoptional.
•Theparagraphalignmentisalsopossible
inHTML
•Theparagraphtag<P>isusedtobreak
thetextintoparagraphs.
•The<P>tagisplacedatthebeginningof
eachnewparagraph,andthebrowser
separatesthetextintoparagraphs.
•Theendtag</P>isoptional.
•Theparagraphalignmentisalsopossible
inHTML
The paragraph attribute ‘align’
<P align = “left”> -aligns paragraphs to the
left
<P align = “right”> -aligns paragraphs to the
right
<P align = “center”> -aligns paragraphs to
the center
<P align = “justify”> -justifies the paragraphs
to the page
<P align = “left”> -aligns paragraphs to the
left
<P align = “right”> -aligns paragraphs to the
right
<P align = “center”> -aligns paragraphs to
the center
<P align = “justify”> -justifies the paragraphs
to the page
Example
<HTML>
<HEAD>
<TITLE>Myfirsthtmlcoding</TITLE>
</HEAD>
<BODY>
<Palign=“left”>TowriteaHTMLdocumentcodewe
needatexteditororawordprocessorwhichsavesthedocumentsin
plain,flat,unstyledASCIIstyletext.
<Palign=“right”>HTMLrequiresawebbrowserto
displaythedocument(webpage)createdusingtexteditor.
<Palign=“center”>TheBrowsersareMSInternet
Explorer,NetscapeNavigator,Mosaic,Netcruiser,MacWebetc.
<Palign=“justify”>TowriteaHTMLdocumentcodewe
needatexteditororawordprocessor
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Myfirsthtmlcoding</TITLE>
</HEAD>
<BODY>
<Palign=“left”>TowriteaHTMLdocumentcodewe
needatexteditororawordprocessorwhichsavesthedocumentsin
plain,flat,unstyledASCIIstyletext.
<Palign=“right”>HTMLrequiresawebbrowserto
displaythedocument(webpage)createdusingtexteditor.
<Palign=“center”>TheBrowsersareMSInternet
Explorer,NetscapeNavigator,Mosaic,Netcruiser,MacWebetc.
<Palign=“justify”>TowriteaHTMLdocumentcodewe
needatexteditororawordprocessor
</BODY>
</HTML>
Line Break
•Thebrowsersnormallydisplaysthetextin
onelinethatareincludedinthebody
section.
•Thewhitespacesandcarriagereturnsthat
areusedinthetexteditorwillbeignored.
•Thedocumentthatmaybeperfectly
alignedinthehtmldocumentwillnotbe
alignedinthebrowserwhileitisdisplayed.
•Toavoidthislinebreakisneeded.
•Thebrowsersnormallydisplaysthetextin
onelinethatareincludedinthebody
section.
•Thewhitespacesandcarriagereturnsthat
areusedinthetexteditorwillbeignored.
•Thedocumentthatmaybeperfectly
alignedinthehtmldocumentwillnotbe
alignedinthebrowserwhileitisdisplayed.
•Toavoidthislinebreakisneeded.
•The<BR>tagisusedtogivealinebreak.
•Thetextplacednexttoitwillbeforcedto
startfromtheleftmarginofthenextline
onthescreen.
•Thelinebreakelementdoesnotgiveany
blanklinesbetweenthetext.
•Multiple<BR>tagsallowmultipleline
breaks.
•Itdoesnothaveanendtag.
•Thetextplacednexttoitwillbeforcedto
startfromtheleftmarginofthenextline
onthescreen.
•Thelinebreakelementdoesnotgiveany
blanklinesbetweenthetext.
•Multiple<BR>tagsallowmultipleline
breaks.
•Itdoesnothaveanendtag.
Example
<HTML>
<HEAD>
<TITLE>Myfirsthtmlcoding</TITLE>
</HEAD>
<BODY>
<H1>youcan</H1>
Doallthegoodyoucan,<BR>
Inalltheplacesyoucan,<BR>
Toallthepeopleyoucan.
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Myfirsthtmlcoding</TITLE>
</HEAD>
<BODY>
<H1>youcan</H1>
Doallthegoodyoucan,<BR>
Inalltheplacesyoucan,<BR>
Toallthepeopleyoucan.
</BODY>
</HTML>
Horizontal tag
•Todrawahorizontallinethe<HR>tagisused.
•Itdoesnothaveanendtag.
•<HR>tagautomaticallyintroducesahorizontal
linebreak.
•The<HR>taghastwoattributes“size”and
“noshade”.
•Thesizeattributeisusedtospecifythethickness
ofthelinewhichisintermsofnumbersand
enclosedwithindoublequotesandthenoshade
attributedisplaysthelineindarkgrey.
•Todrawahorizontallinethe<HR>tagisused.
•Itdoesnothaveanendtag.
•<HR>tagautomaticallyintroducesahorizontal
linebreak.
•The<HR>taghastwoattributes“size”and
“noshade”.
•Thesizeattributeisusedtospecifythethickness
ofthelinewhichisintermsofnumbersand
enclosedwithindoublequotesandthenoshade
attributedisplaysthelineindarkgrey.
Example
<HTML>
<HEAD>
<TITLE>horizontallinecoding</TITLE>
</HEAD>
<BODY>
<H1>youcan</H1>
<HRsize=“3”>
<HRsize=“25”noshade>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>horizontallinecoding</TITLE>
</HEAD>
<BODY>
<H1>youcan</H1>
<HRsize=“3”>
<HRsize=“25”noshade>
</BODY>
</HTML>
Background colour
•Thebackgroundcolourofthepagecanbe
changedbyusingthe“bgcolor”attribute.
•Bgcolourisoneoftheattributeof<body>
tag.
•HtmlallowsspecifyingcoloursinRGB
colourcode(000000toFFFFFF).
•Thefirsttwodigitrepresentred,thenext
twogreencomponentandthelasttwo
representsbluecomponent.
•Thebackgroundcolourofthepagecanbe
changedbyusingthe“bgcolor”attribute.
•Bgcolourisoneoftheattributeof<body>
tag.
•HtmlallowsspecifyingcoloursinRGB
colourcode(000000toFFFFFF).
•Thefirsttwodigitrepresentred,thenext
twogreencomponentandthelasttwo
representsbluecomponent.
•Somebrowserallowstheusertousethe
colournamedirectly.
•Theyallowustouseupto16colour
namessuchasaqua,black,blue,fuchsia,
green,grey,lime,maroon,navy,olive,
purple,red,silver,teal,whiteandyellow.
•Ifthebackgroundcolourisnotspecified,
thebrowserassumesdefaultcolour
specifiedwhileinstallation.
Eg.,<bodybgcolour=“RED”>…</body>
colournamedirectly.
•Theyallowustouseupto16colour
namessuchasaqua,black,blue,fuchsia,
green,grey,lime,maroon,navy,olive,
purple,red,silver,teal,whiteandyellow.
•Ifthebackgroundcolourisnotspecified,
thebrowserassumesdefaultcolour
specifiedwhileinstallation.
Eg.,<bodybgcolour=“RED”>…</body>
Text attribute
•Thetextattributeisanotherattributeof
<body>tag.
•Itisusedtospecifythecolourinwhichthe
texthastobedisplayedonthebrowser.
•Thecoloursusedinbackgroundcolour
canalsobeappliedinthisattribute.
Eg.,<bodytext=“yellow”bgcolor=“red”>
……….</body>
•Thetextattributeisanotherattributeof
<body>tag.
•Itisusedtospecifythecolourinwhichthe
texthastobedisplayedonthebrowser.
•Thecoloursusedinbackgroundcolour
canalsobeappliedinthisattribute.
Eg.,<bodytext=“yellow”bgcolor=“red”>
……….</body>
•Whenthecolourofthetextischanged
usingTEXTattributeof<body>tag,then
thechangeaffectsallthetext.
•Whenthecolourofthetextischanged
usingCOLORattributeof<FONT>tag,
thenthechangeaffectsonlythetextthat
areenclosedwithinthe<FONT>tag.
usingTEXTattributeof<body>tag,then
thechangeaffectsallthetext.
•Whenthecolourofthetextischanged
usingCOLORattributeof<FONT>tag,
thenthechangeaffectsonlythetextthat
areenclosedwithinthe<FONT>tag.
Marquee tag
•Thetextenclosedwithinthe<MARQUEE> and
</MARQUEE>tagmakesthetexttoscrollfrom
oneendofthewindowtotheotherend.
•BGCOLOR andDIRECTION arethetwo
attributesofMARQUEEtag.
•BGCOLOR specifiesthebackgroundcolourof
thepageandDIRECTIONspecifiesthedirection
towhichthetextshouldscroll.
•Left(or)right(or)upanddown(or)downandup
arethedirections
•<Marguee>tagworksonlyininternetexplorer
•Thetextenclosedwithinthe<MARQUEE> and
</MARQUEE>tagmakesthetexttoscrollfrom
oneendofthewindowtotheotherend.
•BGCOLOR andDIRECTION arethetwo
attributesofMARQUEEtag.
•BGCOLOR specifiesthebackgroundcolourof
thepageandDIRECTIONspecifiesthedirection
towhichthetextshouldscroll.
•Left(or)right(or)upanddown(or)downandup
arethedirections
•<Marguee>tagworksonlyininternetexplorer
Example
<HTML>
<HEAD>
<TITLE>marqueecoding</TITLE>
</HEAD>
<BODY>
<MARQUEEDirection=“right”>
Wishyousuccessincomingyears
</MARQUEE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>marqueecoding</TITLE>
</HEAD>
<BODY>
<MARQUEEDirection=“right”>
Wishyousuccessincomingyears
</MARQUEE>
</BODY>
</HTML>
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 343
- Slides 33
- Favorites 1
- Age 1827 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
44 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
44 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
36 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
33 views
21
Know for Certain
DaveSinNM
19 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
23 views