SlideShare a Scribd company logo
1 of 33
HTML Tags
By
Dr. I. Uma Maheswari
iuma_maheswari@yahoo.co.in
Tags
• Tags also called as markups, instruct the
browser how to display HTML document.
• It consists of a keyword (which has pre –
defined meaning) enclosed within
angular brackets (< >).
• HTML uses two types of tag element
1. Empty tag
2. Container tag
Empty tag
• Empty tag represents the formatting
options of text such as line break,
horizontal ruler, paragraph setting etc.
• These tags have only beginning tag (start
tag)
• Eg. <BR>, <HR>, <P>
Container tag
• Container tags have a section of text,
which specifies the formatting construction
for all the selected text.
• Container tag has both start tag and End
tag.
• The end tag is same as the start tag with
an addition of a forward slash.
• Eg <B> ………….. </B>
<body> …….. </body>
Attributes
• Attributes are additional information given
to a tag.
• They are used for specific purpose only.
• Attributes are added only to ‘start’ tags and
not to ‘end’ tags.
• Attributes are not enclosed within angular
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>
Head section
• Contains all document header information like title
of the document.
• This section begins and ends with <HEAD> …….
</HEAD> tags.
• The document title is displayed with the help of
<title> ….. </title> tags which is enclosed within
<head> …… </head> tags.
• This title is displayed in the title bar or at the top of
the document.
• It is a quick reference to WWW browsers and other
application that access HTML files.
Eg., 1
<HTML>
<HEAD>
<TITLE> Computer Education </TITLE>
</HEAD>
</HTML>
Eg., 2
<HTML>
<HEAD>
<TITLE> Introduction to HTML </TITLE>
</HEAD>
</HTML>
Body Section
• The body section comes after head
section.
• It includes text, object, images and sound
that gets displayed in the browser window.
• The body section is enclosed with <body>
…. </body> tags.
Comment tags
• Comments are added to the documents for the
benefit of the writer, which helps to understand
the document.
• It is also used to specify the author’s name, copy
right message etc.
• Comments are included anywhere in the
program.
• These comment statements are ignored by the
browser.
• They are given within <!- - and - -> tags
• eg. <!- - This is a title of the web page - ->
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>
<FONT>
• <font> tag is used to specify the font
style, size and colour for a character,
phrase or a range or text to be
displayed.
• <font> …….. </font> tags, encloses the
text.
Attributes of font
FACE
• Font styles displayed in the browser can
be changed using the face attribute.
• Face attribute has a value which is a font
name, enclosed within double quotes.
• If the specified font is not available in the
system, then default font will be assumed.
Size
• The size attribute is enclosed within the font tag
that indicates the size in which the font has to be
displayed.
• The values of size attributes are 1 to 7, where 3
is the default size.
Colour
• This attribute is used for changing the colour of
the text.
• The value of colour attribute is either a colour
name or a RGB code (000000 to FFFFFF).
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>
More tags on formatting
Bold - The <B> tag is used to display the text thicker
and darker than normal. The end tag is </B>
Italics - To display the text in Italics, <I> tag is used.
The end tag is </I>
Underline - The <U> tag is used to underline the text
in the document. </U> is the end tag.
Center - The text enclosed within <center> …….
</center> tag will be displayed in the center of the
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>
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.
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>
Paragraph
• The paragraph tag <P> is used to break
the text into paragraphs.
• The <P> tag is placed at the beginning of
each new paragraph, and the browser
separates the text into paragraphs.
• The end tag </P> is optional.
• The paragraph alignment is also possible
in HTML
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
Example
<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<P align = “left”> To write a HTML document code we
need a text editor or a word processor which saves the documents in
plain, flat, un styled ASCII style text.
<P align = “right”> HTML requires a web browser to
display the document (web page) created using text editor.
<P align = “center”> The Browsers are MS Internet
Explorer, Netscape Navigator, Mosaic, Net cruiser, Mac Web etc.
<P align = “justify”> To write a HTML document code we
need a text editor or a word processor
</BODY>
</HTML>
Line Break
• The browsers normally displays the text in
one line that are included in the body
section.
• The white spaces and carriage returns that
are used in the text editor will be ignored.
• The document that may be perfectly
aligned in the html document will not be
aligned in the browser while it is displayed.
• To avoid this line break is needed.
• The <BR> tag is used to give a line break.
• The text placed next to it will be forced to
start from the left margin of the next line
on the screen.
• The line break element does not give any
blank lines between the text.
• Multiple <BR> tags allow multiple line
breaks.
• It does not have an end tag.
Example
<HTML>
<HEAD>
<TITLE> My first html coding </TITLE>
</HEAD>
<BODY>
<H1> you can</H1>
Do all the good you can, <BR>
In all the places you can, <BR>
To all the people you can.
</BODY>
</HTML>
Horizontal tag
• To draw a horizontal line the <HR> tag is used.
• It does not have an end tag.
• <HR> tag automatically introduces a horizontal
line break.
• The <HR> tag has two attributes “size” and
“noshade”.
• The size attribute is used to specify the thickness
of the line which is in terms of numbers and
enclosed within double quotes and the noshade
attribute displays the line in dark grey.
Example
<HTML>
<HEAD>
<TITLE> horizontal line coding </TITLE>
</HEAD>
<BODY>
<H1> you can</H1>
<HR size = “3”>
<HR size = “25” noshade>
</BODY>
</HTML>
Background colour
• The background colour of the page can be
changed by using the “bgcolor” attribute.
• Bgcolour is one of the attribute of <body>
tag.
• Html allows specifying colours in RGB
colour code (000000 to FFFFFF).
• The first two digit represent red, the next
two green component and the last two
represents blue component.
• Some browser allows the user to use the
colour name directly.
• They allow us to use upto 16 colour
names such as aqua, black, blue, fuchsia,
green, grey, lime, maroon, navy, olive,
purple, red, silver, teal, white and yellow.
• If the background colour is not specified,
the browser assumes default colour
specified while installation.
Eg., <body bgcolour = “RED”> … </body>
Text attribute
• The text attribute is another attribute of
<body> tag.
• It is used to specify the colour in which the
text has to be displayed on the browser.
• The colours used in background colour
can also be applied in this attribute.
Eg., <body text = “yellow” bgcolor = “red”>
……….</body>
• When the colour of the text is changed
using TEXT attribute of <body> tag, then
the change affects all the text.
• When the colour of the text is changed
using COLOR attribute of <FONT> tag,
then the change affects only the text that
are enclosed within the <FONT> tag.
Marquee tag
• The text enclosed within the <MARQUEE> and
</MARQUEE> tag makes the text to scroll from
one end of the window to the other end.
• BGCOLOR and DIRECTION are the two
attributes of MARQUEE tag.
• BGCOLOR specifies the background colour of
the page and DIRECTION specifies the direction
to which the text should scroll.
• Left (or) right (or) up and down (or) down and up
are the directions
• <Marguee> tag works only in internet explorer
Example
<HTML>
<HEAD>
<TITLE> marquee coding </TITLE>
</HEAD>
<BODY>
<MARQUEE Direction = “right”>
Wish you success in coming years
</MARQUEE>
</BODY>
</HTML>

More Related Content

What's hot (20)

Chapter 6 html
Chapter 6 htmlChapter 6 html
Chapter 6 html
 
Html
HtmlHtml
Html
 
Html Study Guide
Html Study GuideHtml Study Guide
Html Study Guide
 
H T M L Tutorial
H T M L TutorialH T M L Tutorial
H T M L Tutorial
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
HTML Tags
HTML TagsHTML Tags
HTML Tags
 
Html tags
Html tagsHtml tags
Html tags
 
Html 5
Html 5Html 5
Html 5
 
Css 1
Css 1Css 1
Css 1
 
Web Development Using CSS3
Web Development Using CSS3Web Development Using CSS3
Web Development Using CSS3
 
Web Development Using CSS3
Web Development Using CSS3Web Development Using CSS3
Web Development Using CSS3
 
Html, xml and java script
Html, xml and java scriptHtml, xml and java script
Html, xml and java script
 
Session4
Session4Session4
Session4
 
html tags
 html tags html tags
html tags
 
Html 2
Html   2Html   2
Html 2
 
Intro to html revised2
Intro to html revised2Intro to html revised2
Intro to html revised2
 
html
htmlhtml
html
 
php 1
php 1php 1
php 1
 
Html Study Guide - Heritage
Html Study Guide - HeritageHtml Study Guide - Heritage
Html Study Guide - Heritage
 
Learning html & dhtml
Learning html & dhtmlLearning html & dhtml
Learning html & dhtml
 

Similar to Computer language - HTML tags (20)

Standard html tags
Standard html tagsStandard html tags
Standard html tags
 
Html tutorials
Html tutorialsHtml tutorials
Html tutorials
 
Html tutorials
Html tutorialsHtml tutorials
Html tutorials
 
HTML-INTRO.pptx
HTML-INTRO.pptxHTML-INTRO.pptx
HTML-INTRO.pptx
 
HTML Text formatting tags
HTML Text formatting tagsHTML Text formatting tags
HTML Text formatting tags
 
introduction to html.ppt
introduction to html.pptintroduction to html.ppt
introduction to html.ppt
 
Html basic
Html basicHtml basic
Html basic
 
HTML.pdf
HTML.pdfHTML.pdf
HTML.pdf
 
Positioning text
Positioning textPositioning text
Positioning text
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html (1)
Html (1)Html (1)
Html (1)
 
Basics ogHtml
Basics ogHtml Basics ogHtml
Basics ogHtml
 
Week-1_PPT_WEBAPPS-done.pptx
Week-1_PPT_WEBAPPS-done.pptxWeek-1_PPT_WEBAPPS-done.pptx
Week-1_PPT_WEBAPPS-done.pptx
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 
Introduction to HTML Communication Skills
Introduction to HTML Communication SkillsIntroduction to HTML Communication Skills
Introduction to HTML Communication Skills
 
Html
HtmlHtml
Html
 
html
htmlhtml
html
 
Html
HtmlHtml
Html
 
html tutorial
html tutorialhtml tutorial
html tutorial
 

More from Dr. I. Uma Maheswari Maheswari

2h. Pedagogy of mathematics part II (numbers and sequence - ex 2.8)
2h. Pedagogy of mathematics   part II (numbers and sequence - ex 2.8)2h. Pedagogy of mathematics   part II (numbers and sequence - ex 2.8)
2h. Pedagogy of mathematics part II (numbers and sequence - ex 2.8)Dr. I. Uma Maheswari Maheswari
 
2g. Pedagogy of mathematics part II (numbers and sequence - ex 2.7)
2g. Pedagogy of mathematics   part II (numbers and sequence - ex 2.7)2g. Pedagogy of mathematics   part II (numbers and sequence - ex 2.7)
2g. Pedagogy of mathematics part II (numbers and sequence - ex 2.7)Dr. I. Uma Maheswari Maheswari
 
2f. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.6)
2f. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.6)2f. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.6)
2f. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.6)Dr. I. Uma Maheswari Maheswari
 
2e. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.5)
2e. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.5)2e. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.5)
2e. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.5)Dr. I. Uma Maheswari Maheswari
 
2d. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.4)
2d. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.4)2d. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.4)
2d. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.4)Dr. I. Uma Maheswari Maheswari
 
2c. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.3)
2c. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.3)2c. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.3)
2c. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.3)Dr. I. Uma Maheswari Maheswari
 
2b. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.2)
2b. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.2)2b. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.2)
2b. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.2)Dr. I. Uma Maheswari Maheswari
 
2a. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.1)
2a. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.1)2a. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.1)
2a. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.1)Dr. I. Uma Maheswari Maheswari
 
X std maths - Relations and functions (ex 1.5 &amp; 1.6)
X std maths -  Relations and functions (ex 1.5 &amp; 1.6)X std maths -  Relations and functions (ex 1.5 &amp; 1.6)
X std maths - Relations and functions (ex 1.5 &amp; 1.6)Dr. I. Uma Maheswari Maheswari
 

More from Dr. I. Uma Maheswari Maheswari (20)

2h. Pedagogy of mathematics part II (numbers and sequence - ex 2.8)
2h. Pedagogy of mathematics   part II (numbers and sequence - ex 2.8)2h. Pedagogy of mathematics   part II (numbers and sequence - ex 2.8)
2h. Pedagogy of mathematics part II (numbers and sequence - ex 2.8)
 
2g. Pedagogy of mathematics part II (numbers and sequence - ex 2.7)
2g. Pedagogy of mathematics   part II (numbers and sequence - ex 2.7)2g. Pedagogy of mathematics   part II (numbers and sequence - ex 2.7)
2g. Pedagogy of mathematics part II (numbers and sequence - ex 2.7)
 
2f. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.6)
2f. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.6)2f. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.6)
2f. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.6)
 
2e. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.5)
2e. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.5)2e. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.5)
2e. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.5)
 
2d. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.4)
2d. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.4)2d. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.4)
2d. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.4)
 
2c. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.3)
2c. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.3)2c. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.3)
2c. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.3)
 
2b. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.2)
2b. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.2)2b. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.2)
2b. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.2)
 
2a. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.1)
2a. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.1)2a. Pedagogy of Mathematics -  Part II (Numbers and Sequence - Ex 2.1)
2a. Pedagogy of Mathematics - Part II (Numbers and Sequence - Ex 2.1)
 
Computer language - Html forms
Computer language - Html formsComputer language - Html forms
Computer language - Html forms
 
computer language - Html frames
computer language - Html framescomputer language - Html frames
computer language - Html frames
 
Computer language - Html tables
Computer language - Html tablesComputer language - Html tables
Computer language - Html tables
 
Pedagogy - teaching models
Pedagogy - teaching modelsPedagogy - teaching models
Pedagogy - teaching models
 
Computer language - html links
Computer language - html   linksComputer language - html   links
Computer language - html links
 
Computer language - html images and sounds
Computer language - html   images and soundsComputer language - html   images and sounds
Computer language - html images and sounds
 
computer language - html lists
computer language - html listscomputer language - html lists
computer language - html lists
 
Computer language - HTML (Hyper Text Markup Language)
Computer language - HTML (Hyper Text Markup Language)Computer language - HTML (Hyper Text Markup Language)
Computer language - HTML (Hyper Text Markup Language)
 
X std maths - Relations and functions (ex 1.5 &amp; 1.6)
X std maths -  Relations and functions (ex 1.5 &amp; 1.6)X std maths -  Relations and functions (ex 1.5 &amp; 1.6)
X std maths - Relations and functions (ex 1.5 &amp; 1.6)
 
X std maths - Relations and functions (ex 1.4)
X std maths - Relations and functions  (ex 1.4)X std maths - Relations and functions  (ex 1.4)
X std maths - Relations and functions (ex 1.4)
 
X std maths - Relations and functions (ex 1.3)
X std maths -  Relations and functions  (ex 1.3)X std maths -  Relations and functions  (ex 1.3)
X std maths - Relations and functions (ex 1.3)
 
X std mathematics - Relations and functions (Ex 1.2)
X std mathematics - Relations and functions  (Ex 1.2)X std mathematics - Relations and functions  (Ex 1.2)
X std mathematics - Relations and functions (Ex 1.2)
 

Recently uploaded

An Overview of the Odoo 17 Discuss App.pptx
An Overview of the Odoo 17 Discuss App.pptxAn Overview of the Odoo 17 Discuss App.pptx
An Overview of the Odoo 17 Discuss App.pptxCeline George
 
Open Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPointOpen Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPointELaRue0
 
Navigating the Misinformation Minefield: The Role of Higher Education in the ...
Navigating the Misinformation Minefield: The Role of Higher Education in the ...Navigating the Misinformation Minefield: The Role of Higher Education in the ...
Navigating the Misinformation Minefield: The Role of Higher Education in the ...Mark Carrigan
 
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45MysoreMuleSoftMeetup
 
philosophy and it's principles based on the life
philosophy and it's principles based on the lifephilosophy and it's principles based on the life
philosophy and it's principles based on the lifeNitinDeodare
 
How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17Celine George
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Mohamed Rizk Khodair
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxheathfieldcps1
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文中 央社
 
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17Celine George
 
size separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticssize separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticspragatimahajan3
 
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdfDanh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdfQucHHunhnh
 
....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdfVikramadityaRaj
 
Discover the Dark Web .pdf InfosecTrain
Discover the Dark Web .pdf  InfosecTrainDiscover the Dark Web .pdf  InfosecTrain
Discover the Dark Web .pdf InfosecTraininfosec train
 
ppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyesppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyesashishpaul799
 
Morse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptxMorse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptxjmorse8
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...Nguyen Thanh Tu Collection
 
The Ball Poem- John Berryman_20240518_001617_0000.pptx
The Ball Poem- John Berryman_20240518_001617_0000.pptxThe Ball Poem- John Berryman_20240518_001617_0000.pptx
The Ball Poem- John Berryman_20240518_001617_0000.pptxNehaChandwani11
 

Recently uploaded (20)

An Overview of the Odoo 17 Discuss App.pptx
An Overview of the Odoo 17 Discuss App.pptxAn Overview of the Odoo 17 Discuss App.pptx
An Overview of the Odoo 17 Discuss App.pptx
 
Open Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPointOpen Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPoint
 
Navigating the Misinformation Minefield: The Role of Higher Education in the ...
Navigating the Misinformation Minefield: The Role of Higher Education in the ...Navigating the Misinformation Minefield: The Role of Higher Education in the ...
Navigating the Misinformation Minefield: The Role of Higher Education in the ...
 
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
 
philosophy and it's principles based on the life
philosophy and it's principles based on the lifephilosophy and it's principles based on the life
philosophy and it's principles based on the life
 
How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptx
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
 
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
 
size separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticssize separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceutics
 
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdfDanh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
 
....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf
 
Discover the Dark Web .pdf InfosecTrain
Discover the Dark Web .pdf  InfosecTrainDiscover the Dark Web .pdf  InfosecTrain
Discover the Dark Web .pdf InfosecTrain
 
ppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyesppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyes
 
Morse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptxMorse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptx
 
“O BEIJO” EM ARTE .
“O BEIJO” EM ARTE                       .“O BEIJO” EM ARTE                       .
“O BEIJO” EM ARTE .
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
 
The Ball Poem- John Berryman_20240518_001617_0000.pptx
The Ball Poem- John Berryman_20240518_001617_0000.pptxThe Ball Poem- John Berryman_20240518_001617_0000.pptx
The Ball Poem- John Berryman_20240518_001617_0000.pptx
 
Word Stress rules esl .pptx
Word Stress rules esl               .pptxWord Stress rules esl               .pptx
Word Stress rules esl .pptx
 

Computer language - HTML tags

  • 1. HTML Tags By Dr. I. Uma Maheswari iuma_maheswari@yahoo.co.in
  • 2. Tags • Tags also called as markups, instruct the browser how to display HTML document. • It consists of a keyword (which has pre – defined meaning) enclosed within angular brackets (< >). • HTML uses two types of tag element 1. Empty tag 2. Container tag
  • 3. Empty tag • Empty tag represents the formatting options of text such as line break, horizontal ruler, paragraph setting etc. • These tags have only beginning tag (start tag) • Eg. <BR>, <HR>, <P>
  • 4. Container tag • Container tags have a section of text, which specifies the formatting construction for all the selected text. • Container tag has both start tag and End tag. • The end tag is same as the start tag with an addition of a forward slash. • Eg <B> ………….. </B> <body> …….. </body>
  • 5. Attributes • Attributes are additional information given to a tag. • They are used for specific purpose only. • Attributes are added only to ‘start’ tags and not to ‘end’ tags. • Attributes are not enclosed within angular bracket.
  • 6. 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>
  • 7. Head section • Contains all document header information like title of the document. • This section begins and ends with <HEAD> ……. </HEAD> tags. • The document title is displayed with the help of <title> ….. </title> tags which is enclosed within <head> …… </head> tags. • This title is displayed in the title bar or at the top of the document. • It is a quick reference to WWW browsers and other application that access HTML files.
  • 8. Eg., 1 <HTML> <HEAD> <TITLE> Computer Education </TITLE> </HEAD> </HTML> Eg., 2 <HTML> <HEAD> <TITLE> Introduction to HTML </TITLE> </HEAD> </HTML>
  • 9. Body Section • The body section comes after head section. • It includes text, object, images and sound that gets displayed in the browser window. • The body section is enclosed with <body> …. </body> tags.
  • 10. Comment tags • Comments are added to the documents for the benefit of the writer, which helps to understand the document. • It is also used to specify the author’s name, copy right message etc. • Comments are included anywhere in the program. • These comment statements are ignored by the browser. • They are given within <!- - and - -> tags • eg. <!- - This is a title of the web page - ->
  • 11. 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>
  • 12. <FONT> • <font> tag is used to specify the font style, size and colour for a character, phrase or a range or text to be displayed. • <font> …….. </font> tags, encloses the text.
  • 13. Attributes of font FACE • Font styles displayed in the browser can be changed using the face attribute. • Face attribute has a value which is a font name, enclosed within double quotes. • If the specified font is not available in the system, then default font will be assumed.
  • 14. Size • The size attribute is enclosed within the font tag that indicates the size in which the font has to be displayed. • The values of size attributes are 1 to 7, where 3 is the default size. Colour • This attribute is used for changing the colour of the text. • The value of colour attribute is either a colour name or a RGB code (000000 to FFFFFF).
  • 15. 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>
  • 16. More tags on formatting Bold - The <B> tag is used to display the text thicker and darker than normal. The end tag is </B> Italics - To display the text in Italics, <I> tag is used. The end tag is </I> Underline - The <U> tag is used to underline the text in the document. </U> is the end tag. Center - The text enclosed within <center> ……. </center> tag will be displayed in the center of the line.
  • 17. 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>
  • 18. 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.
  • 19. 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>
  • 20. Paragraph • The paragraph tag <P> is used to break the text into paragraphs. • The <P> tag is placed at the beginning of each new paragraph, and the browser separates the text into paragraphs. • The end tag </P> is optional. • The paragraph alignment is also possible in HTML
  • 21. 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
  • 22. Example <HTML> <HEAD> <TITLE> My first html coding </TITLE> </HEAD> <BODY> <P align = “left”> To write a HTML document code we need a text editor or a word processor which saves the documents in plain, flat, un styled ASCII style text. <P align = “right”> HTML requires a web browser to display the document (web page) created using text editor. <P align = “center”> The Browsers are MS Internet Explorer, Netscape Navigator, Mosaic, Net cruiser, Mac Web etc. <P align = “justify”> To write a HTML document code we need a text editor or a word processor </BODY> </HTML>
  • 23. Line Break • The browsers normally displays the text in one line that are included in the body section. • The white spaces and carriage returns that are used in the text editor will be ignored. • The document that may be perfectly aligned in the html document will not be aligned in the browser while it is displayed. • To avoid this line break is needed.
  • 24. • The <BR> tag is used to give a line break. • The text placed next to it will be forced to start from the left margin of the next line on the screen. • The line break element does not give any blank lines between the text. • Multiple <BR> tags allow multiple line breaks. • It does not have an end tag.
  • 25. Example <HTML> <HEAD> <TITLE> My first html coding </TITLE> </HEAD> <BODY> <H1> you can</H1> Do all the good you can, <BR> In all the places you can, <BR> To all the people you can. </BODY> </HTML>
  • 26. Horizontal tag • To draw a horizontal line the <HR> tag is used. • It does not have an end tag. • <HR> tag automatically introduces a horizontal line break. • The <HR> tag has two attributes “size” and “noshade”. • The size attribute is used to specify the thickness of the line which is in terms of numbers and enclosed within double quotes and the noshade attribute displays the line in dark grey.
  • 27. Example <HTML> <HEAD> <TITLE> horizontal line coding </TITLE> </HEAD> <BODY> <H1> you can</H1> <HR size = “3”> <HR size = “25” noshade> </BODY> </HTML>
  • 28. Background colour • The background colour of the page can be changed by using the “bgcolor” attribute. • Bgcolour is one of the attribute of <body> tag. • Html allows specifying colours in RGB colour code (000000 to FFFFFF). • The first two digit represent red, the next two green component and the last two represents blue component.
  • 29. • Some browser allows the user to use the colour name directly. • They allow us to use upto 16 colour names such as aqua, black, blue, fuchsia, green, grey, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. • If the background colour is not specified, the browser assumes default colour specified while installation. Eg., <body bgcolour = “RED”> … </body>
  • 30. Text attribute • The text attribute is another attribute of <body> tag. • It is used to specify the colour in which the text has to be displayed on the browser. • The colours used in background colour can also be applied in this attribute. Eg., <body text = “yellow” bgcolor = “red”> ……….</body>
  • 31. • When the colour of the text is changed using TEXT attribute of <body> tag, then the change affects all the text. • When the colour of the text is changed using COLOR attribute of <FONT> tag, then the change affects only the text that are enclosed within the <FONT> tag.
  • 32. Marquee tag • The text enclosed within the <MARQUEE> and </MARQUEE> tag makes the text to scroll from one end of the window to the other end. • BGCOLOR and DIRECTION are the two attributes of MARQUEE tag. • BGCOLOR specifies the background colour of the page and DIRECTION specifies the direction to which the text should scroll. • Left (or) right (or) up and down (or) down and up are the directions • <Marguee> tag works only in internet explorer
  • 33. Example <HTML> <HEAD> <TITLE> marquee coding </TITLE> </HEAD> <BODY> <MARQUEE Direction = “right”> Wish you success in coming years </MARQUEE> </BODY> </HTML>