The Body Element
• The BODY element of a web page is an important
element in regards to the page’s appearance.
• Here are the attributes of the body tag to control all
the levels.
• This element contains information about the page’s
background color, the background image, as well as
the text and link colors.
2

Text Color
BGCOLOR attribute of body tag is used to set background color
Syntax:
<BODY BGCOLOR=“ color code”></BODY>
3
Background Color
TEXT attribute is used to control the color of all the normal text in the
document. The default color for text is black.
Syntax:
<BODY BGCOLOR=“ color code” TEXT=“color code”></BODY>

These attributes control the colors of the different link states:
1. LINK – initial appearance – default = Blue.
2. VLINK – visited link – default = Purple.
3. ALINK –active link being clicked–default= Yellow.
4
LINK , ALINK, VLINK
Horizontal Rule , <HR>
 The <HR> element causes the browser to display a horizontal line
(rule) in your document.
 <HR> does not use a closing tag, </HR>.

Headings, <Hx> </Hx>
 Inside the BODY element, heading elements H1 through H6 are
generally used for major divisions of the document.
5
<HTML>
<HEAD>
<TITLE> Example
Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
</BODY>
</HTML>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Paragraphs, <P> </P>
 Paragraphs allow you to add text to a document in such a way that it
will automatically adjust the end of line to suite the window size of
the browser in which it is being displayed. Each line of text will
stretch the entire length of the window.
 Syntax: <p> some text here</p>
6
Break, <BR>
Line breaks allow you to decide where the text will break on a line or
continue to the end of the window.
A <BR> is an empty Element, meaning that it may contain attributes but
it does not contain content.
The <BR> element does not have a closing tag.

 1. <FONT SIZE=“+2”> Two sizes bigger</FONT>
 The size attribute can be set as an absolute value from 1 to 7 or as
a relative value using the “+” or “-” sign. Normal text size is 3 (from -
2 to +4).
 2. <B> Bold </B>
 3. <I> Italic </I>
 4. <U> Underline </U>
 5. <PRE> Preformatted </PRE>
 Text enclosed by PRE tags is displayed in a mono-spaced font.
Spaces and line breaks are supported without additional elements
or special characters.
 6. <EM> Emphasis </EM> Browsers usually display this as italics.
 7. <STRONG> STRONG </STRONG> Browsers display this as
bold.
7
Bold, Italic and other Character
Formatting Elements

 HTML supplies several list elements. Most list elements
are composed of one or more <LI> (List Item) elements.
 UL : Unordered List:
Items in this list start with a list mark such as a bullet.
Browsers will usually change the list mark in nested lists.
<UL>
<LI> List item …</LI>
</UL>
• List item …
• List item …
8
List Elements

 You have the choice of three bullet types: disc(default),
circle, square.
 These are controlled in Netscape Navigator by the
“TYPE” attribute for the <UL> element.
<UL TYPE=“square”>
</UL>
 List item …
 List item …
 List item …
9

 OL: Ordered List: Items in this list are numbered
automatically by the browser.
<OL>
</OL>
1. List item …
2. List item …
3. List item
 You have the choice of setting the TYPE Attribute to
one of five numbering styles.
10

TYPE Numbering Styles
1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……
11
Type Attribute For OL:

 You can specify a starting number for an ordered list.
<OL TYPE =“i”>
</OL>
<P> text ….</P>
<OL TYPE=“i” START=“3”>
</OL>
12
Start Attribute for OL:

 DL: Definition List:
 This kind of list is different from the others. Each item in
a DL consists of one or more Definition Terms (DT
elements), followed by one or more Definition
Description (DD elements).
<DL>
<DT> HTML </DT>
<DD> Hyper Text Markup Language </DD>
<DT> DOG </DT>
<DD> A human’s best friend!</DD>
</DL>
HTML
Hyper Text Markup Language
DOG
A human’s best friend!
13

 You can nest lists by inserting a UL, OL, etc., inside a list
item (LI).
EXample
<UL TYPE = “square”>
<LI> List item …
<OL TYPE=“i” START=“3”>
</OL>
</LI>
</UL>
14
Nesting Lists

 <IMG> This element defines a graphic image
on the page.
 Image File (SRC:source): This value will be
a URL (location of the image).
 Alternate Text (ALT): This is a text field that
describes an image or acts as a label. It is
displayed when they position the cursor over
a graphic image.
 Alignment (ALIGN): This allows you to align
the image on your page.
15
Images

 Width (WIDTH): is the width of the image in pixels.
 Height (HEIGHT): is the height of the image in
pixels.
 Border (BORDER): is for a border around the
image, specified in pixels.
 HSPACE: is for Horizontal Space on both sides of
the image specified in pixels. A setting of 5 will put 5
pixels of invisible space on both sides of the image.
 VSPACE: is for Vertical Space on top and bottom of
the image specified in pixels. A setting of 5 will put 5
pixels of invisible space above and bellow the
image.
16

1) The tags used to produce links are the <A>
and </A>. The <A> tells where the link should start and
the </A> indicates where the link ends. Everything between
these two will work as a link.
2) The example below shows how to make the word
Here work as a link to yahoo.
Click <A HREF="http://www.yahoo.com">here</A> to
go to yahoo.
3)Color of Links
• LINK - standard link - to a page the visitor hasn't been to yet. (standard color
is blue - #0000FF).
• VLINK - visited link - to a page the visitor has been to before. (standard color
is purple - #800080).
• ALINK - active link - the color of the link when the mouse is on it. (standard
color is red - #FF0000).
17
Links – A tag

 Internal Links : Links can also be created inside large
documents to simplify navigation. Today’s world wants to be
able to get the information quickly. Internal links can help you
meet these goals.
 Select some text at a place in the document that you would
like to create a link to, then add an anchor to link to like this:
<A NAME=“bookmark_name”></A>.
 The Name attribute of an anchor element specifies a location
in the document that we link to shortly. All NAME attributes in
a document must be unique.
 Next select the text that you would like to create as a link to
the location created above.
<A HREF=“#bookmark_name”>Go To Book Mark</A>
18
Internal Links

The <TABLE></TABLE> element has four sub-elements:
Table Row<TR></TR>.
Table Header <TH></TH>.
Table Data <TD></TD>.
Caption <CAPTION></CAPTION>.
The table row elements usually contain table header elements,
or table data elements.
19
Tables
Column 1 Header Column 2 Header
Row1, Col1 Row1, Col2
Row2, Col1 Row2, Col2

<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
</tr>
<tr>
</tr>
</table>
20

1. BGColor: Some browsers support background colors in a table.
2. Width: you can specify the table width as an absolute number of
pixels or a percentage of the document width. You can set the
width for the table cells as well.
3. Border: You can choose a numerical value for the border width,
which specifies the border in pixels.
4. CellSpacing: Cell Spacing represents the space between cells
and is specified in pixels.
5. CellPadding: Cell Padding is the space between the cell border
and the cell contents and is specified in pixels.
6. Align: tables can have left, right, or center alignment.
7. Background: Background Image, will be titled in IE3.0 and above.
21
Table Attributes

Table caption
A table caption allows you to specify a line of text that will appear
centered above or bellow the table.
<TABLE BORDER=1 CELLPADDING=2>
<CAPTION ALIGN=“BOTTOM”> Label For My Table </CAPTION>
The Caption element has one attribute ALIGN that can be either TOP
(Above the table) or BOTTOM (below the table).
Table Header
Table Data cells are represented by the TD element. Cells can also be
TH (Table Header) elements which results in the contents of the table
header cells appearing centered and in bold text
22

1. Colspan: Specifies how many cell columns of the table
this cell should span.
2. Rowspan: Specifies how many cell rows of the table
this cell should span.
3. Align: cell data can have left, right, or center alignment.
4. Valign: cell data can have top, middle, or bottom
alignment.
5. Width: you can specify the width as an absolute number
of pixels or a percentage of the document width.
6. Height: You can specify the height as an absolute
number of pixels or a percentage of the document
height.
23
TD & TH Attributes

• The <frame> tag defines one particular window (frame) within a
<frameset>.
• Each <frame> in a <frameset> can have different attributes, such as
border, scrolling, the ability to resize, etc.
• Example of an HTML Frame
• <frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
24
HTML Frames

• HTML forms are used to pass data to a server.
• An HTML form can contain input elements like text fields,
checkboxes, radio-buttons, submit buttons and more. A form can also
contain select lists, textarea, fieldset, legend, and label elements.
• The <form> tag is used to create an HTML form:
• <form>
.
input elements
.
</form>
25
HTML Forms

Html Basic Tags

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Html Basic Tags (20)

More from Richa Singh (8)

Recently uploaded (20)

Html Basic Tags