Html

HTML And Its Capabilities
• It is a document-layout and hyperlink-
specification language
• It tells the browser how to display the
contents of a hypertext document.
• It is neither a word processing tool nor a DTP
tool ; not even a programming language. It is
just a page-layout and hyperlink specification
language.

HTML
• The instructions are not compiled by a
traditional compiler but by a WWW
browser.
• It stands for Hyper Text MarkUp Language.
• It is a language that supports multimedia
and new page layout features.
• Def: It is a simple web page layout language used to design web pages.

Software for HTML coding
• Text Editor like
1. Notepad
2. Wordpad
• HTML file Extension
Files can be saved with .htm or .html extension.

HTML Documents
• HTML is made up of elements or tags and
attributes which work together to identify
document parts and tell browsers how to
display them.
• The elements are arranged into sections
according to where the elements can be
used .

Group of Elements
• The HEAD Elements – Only elements that are
allowed in HEAD section of the documents like
Title element.
• The BODY Elements – Only elements that are
allowed in the BODY section of the document.
In this section , elements are broken into
groups like Font element, P element.

Naming Convention
• All elements are enclosed in < > brackets.
• The element names are not case
sensitive.

Tags and Attributes
• Tags : It is a coded HTML command that
indicates how part of web page should
be displayed ex: <Title>
• Attributes : It is a special word used
inside tag to specify additional
information to tag such as color,
alignment.

Two Categories of Tags
• Container Tag: This type of HTML
elements require pair tags i.e. a starting
as well as ending tag eg : <Title>…
</Title>.
• Empty Tag : This type of HTML elements
require just a starting tag and not an
ending tag eg : , <IMG>,<HR>

HTML Document Structure
• <HTML>
<HEAD>
<TITLE> ……..</TITLE>
</HEAD>
<BODY>….
….. Body Section(Compulsory Part)
</BODY>
</HTML>
Head Section
(Optional Part)

HTML Tags
• <HTML> It encloses the entire HTML
document. It is a container tag.
• <HEAD> It encloses the head section of the
document. It is a container tag. The title is
always in the head section. It is optional.

Head Section
This section consists of Head Element ,Title tag , meta tag , BASE tag. <head> and
<title> tags are strongly recommended tags.
Starting Tag Description Closing Tag
<head> It begins head section of HTML document and used to
display header of the document.
</head>
<title> It is a parameter tag of <head>. It contains information that
display in title bar of web browser
</title>
Try it : Open Notepad, write the
following code:
<html>
<head>
<title>
HTML
</title>
Welcome to HTML programming
</head>
</html>
Save it as first.html then open it in
Internet Explorer , see the output

Title of the web page
Path and file name
Header of the document

Body Section
Tag Description Example
<Body> Body of web
document </Body>
It contains all the contents of a
document and also various parameter
tags.
Attributes of body tag Its attributes value is applicable to
whole document.
Bgcolor = color-name Used to set background color of web
page. Default background color is
White.
<body bgcolor = green>
Background = “Path” Used to insert an image in the
background of web page.
<body background =
“D:im1.jpg”>
Text = color-name Used to set foreground or text color of
web page. Default text color is Black.
<body text = red>
Link = color- name Used to set color of unvisited link.
Default color is blue.
<body link = teal>
Alink = color – name Used to set color of active link. Default
color is red.
<body alink = maroon>
Vlink = color –name Used to set color of visited link. Default
color is purple.
<body vlink = yellow>

Topmargin = n
Where n is a
number
It specify the distance between the top of the
document and the top of the browser window.
<body topmargin = 10>
Leftmargin = n
where n is a
number
It specify the distance between the left side of
the document and the left edge of the browser
window.
<body leftmargin = 20>
Body Section contd…
Try it
<html>
<head>
<title>
HTML
</title>
</head>
<body bgcolor = green text = red topmargin = 20 leftmargin = 10>
This is a demo program.
</body>
</html>
Save it as second.html then open it in Internet
Explorer , see the output

Font Tag and Basefont Tag
… 
<basefont>…</basefont>
It is used to give specification of the size, color and typeface of the enclosed text.
It is used to give specification of the size, color and typeface of the enclosed text.
It occurs only once in a web document.
Attributes of font tag Its attributes value is applicable to portion of document enclosed
between and .
face = typeface Used to set typeface of enclosed text of web page. 
size = n Used to set the relative size of the text. The default value is 3. The valid
value ranges from 1-7 where 1 is the smallest and 7 is the largest.

color= color-name Used to set text color of web page. Default text color is Black. 
Try it
<html>
<head>
<title>
HTML
</title>
</head>
 Demonstrate
</body>
</html>
Save it as third.html then open it in
Internet Explorer , see the output
Note:Try basefont tag in same example

Center Tag
<center>…</center> It is used to center the content between the current left and right margins.It is
used to center text, image or any other embedded object.
Try it
<html>
<head>
<title>
HTML
</title>
</head>
<body bgcolor = green text = red topmargin
= 20 leftmargin = 10>
<center> Demonstrate</center>
</body>
</html>
Save it as four.html then
open it in Internet

BR Tag
 It stands for Break and it is an empty element. It is used to insert single carriage
return in a web document
Try it
<html>
<head>
<title>
HTML
</title>
</head>
= 20 leftmargin = 10>
This is a demo program. 
</body>
</html>
Save it as five.html then
open it in Internet

HR Tag
<hr> It stands for Horizontal Rule and it is an empty element. It is used to insert
horizontal line for dividing information or section
Attributes of <HR>
size It indicates thickness of the lines in pixels. Default is 2 pixels. <hr size = 3>
width It defines the horizontal width of the line. Default is page width. It is
measure in pixel or can be given in %age of the page width
<hr width = 5>
align It is used to align line at left, center and right <hr align = center>
color It is used to change color of rule <hr color = purple>
noshade It is used to display a solid black line that has no shading <hr noshade>
Try it
<html>
<head>
<title>
HTML
</title>
</head>
<hr size = 3 width = 50% align = center color = purple > Use of Horizontal Rule
<hr noshade>
</body>
</html>
Save it as six.html then
open it in Internet

Comment Tag
<comment>…</comment>
<!--- comment -
It is ignored by web browser. It is used to explain code and also helps in editing
code later. It is used to include multiline comment
It is used for single line comment.
Try it
<html>
<head>
<title>
HTML
</title>
</head>
= 20 leftmargin = 10><comment> This is a first
web program to explain different tags used in
HTML</comment>
This is a demo program. 
</body>
</html>
Save it as six.html then
open it in Internet

Paragraph Tag
… It stands for Paragraph. It is used to insert a line break with extra space in the
beginning and for dividing HTML document in paragraphs.
hello
friend
Attributes has only one attribute that is align
Align = left|center|right This attribute is used to align paragraph left, center or right.. Default alignment
is left.
…
Try it
<html>
<head>
<title>
HTML
</title>
</head>
<body bgcolor = green text = red topmargin = 20
leftmargin = 10>
<Hr>Use of paragraph tag</hr>
 It is used to divide HTML document in paragraphs
</body>
</html>
Save it as seven.html then
open it in Internet

Heading Tag
<Hn>…</Hn> where n is
from 1 to 6
It stands for Heading. It defines six levels of headings. It is used to give document
heading or section heading . H1 is the biggest heading and H6 is the smallest one
Attributes <Hn> has only one attribute that is align
Align = left|center|right This attribute is used to align paragraph left, center or right.. Default alignment
is left.
<H1 align =
right>…</H1>
Try it
<html>
<head>
<title>
HTML
</title>
</head>
<body bgcolor = green text = red topmargin = 20
leftmargin = 10>
<Hr><h1>Use of paragraph
tag</h1></hr>
 It is used to divide HTML document in paragraphs
</body>
</html>
Save it as eight.html then
open it in Internet

Tag Description Attributes
<UL>…</UL>
<OL>…</OL>
<DL>…</DL>
It stands for Unordered List. Also known as Bulleted List or Unnumbered List
It stands for Ordered List.. Also known as Numbered List.
It stands for Definition List.
Type
Type and Start.
<LH>
<LI>
<DT> and <DD>
It stands for list header . It identify list header . It is used with Ordered &
Unordered List . It is used just after <OL> and <UL>.
It stands for list item. It identify the items of the list . It is used with Ordered
& Unordered List . It is used just after <OL> and <UL>.
& list Item used with Ordered and Unordered list.
It stands for definition term and data definition used with Definition List
Using Lists In HTML
To display list item in your document ,HTML provides several ways to display a list of
items.
Attributes Explanation Example
Type= disc/square/circle In unordered list , it specifies the bullet style to use. The
style can be a disc, square or circle.
<ul type = disc>
Type = 1/A/a/i/I
Start = value
In ordered list, it specifies the style of number. 1 stands for
arabic number(1,2,3…) , A stands for capital alphabet
(A,B,C…), a stands for small alphabet(a,b,c…), i stands for
small roman numerals (i,ii…) and I stands for capital roman
numerals (I,II…)
It is used to reset the sequence number of the list.
<ol type = I start = 3>

Examples:
Try it :
<html>
<head>
<title>
HTML
</title>
</head>
<comment > Unordered list</comment
<ul type = disc>
<lh> list heading</lh>
<li> One</li>
<li> Two</li>
<li> Three</li>
</ul>
<comment> Ordered List</comment>
<ol type = I start = 3>
<lh>ordered list</lh>
<li> One</li>
<li> Two</li>
<li> Three</li>
</ol>
<!—Definition list
<dl>
<dt> input device</dt>
<dd>it is used to enter data</dd>
<dt> output device</dt>
<dd> it is used to display data</dd>
</dl>
</body>
</html>

Style Tags
Font Style Html Tag
Bold …
Italic …
Underline …
Strikeout <Strike> …</Strike> or <S>…</S>
Big <BIG>…</BIG>
Small …
Teletype <TT>…</TT>

Html

More Related Content

What's hot (13)

Viewers also liked (20)

Similar to Html (20)

Recently uploaded (20)

Html