Body Section in HTML - R.D.Sivakumar

R.D.SIVAKUMAR, M.Sc.,M.Phil.,M.Tech.,
Assistant Professor of Computer Science &
Assistant Professor and Head, Department of M.Com.(CA),
Ayya Nadar Janaki Ammal College,
Sivakasi – 626 124.
Mobile: 099440-42243
e-mail : sivamsccsit@gmail.com
website: www.rdsivakumar.blogspot.in
Body Section

Body Section
Body tag
A pair of body tags <body> and </body> is used to identify the body section.
 Some tags are used to insert in body section like images, tables, and forms and links.
The opening body tag is <body> and closing tag is </body>.
The body tag contains several attributes.
 To change the background color of a web page, the bgcolor attribute
is used.
Example: 1
<body bgcolor =#FFFFFF>
</body>
<body bgcolor=blue></body>
The color values range from 0 to 255 .
The ranges is 00(decimal) to FF(hexadecimal)
It should be mentioned six digits like FFFFFF, 000000, 99BDFF.
The # symbol is predetermined like #FFFFFF, #000000, #99BDFF.
Example: 2
The RBG values indicate some basic colors.
For example black, red, blue, pink, green is a RBG values.
Value
attribute

Body Section
Body tag
Example:3 <style>
body {
background-color: #99BDFF;
}
</style>
<body background=imagename.jpg>
The background color of the web page can also be modified using <style> tag.
Using the selector as<body> and property as<background color>
Example: 4
The body text is used to change the text color.
Images are supported by browser
The extension of image is .gif, .jpg, .png.
<body text = red>

Body Section
Heading tag
Heading tags in the body section are used to provide a heading of the web document.
There are six heading tags are <h1>,<h2>, <h3>, <h4>, <h5>,<h6>.
Example: 1
<html><body>
<h1>Computer</h1><p>
</body>
</html>
output
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

Body Section
Heading tag
To centre the heading in a webpage use “align” attribute.
Example: 2 <h1 align=center>Computer</h1>
Example: 3
<h2 style=”color:pink”>This text will be rendered in pink</h2>
The heading content will be displayed in pink color use color attribute.

Body Section - Other HTML tags
Paragraph Tag
The paragraph tag <p>defines a paragraph.
It starts a new paragraph in a new line.
Opening paragraph tag is <p>, and closing tag is</p>.
To align the paragraph use “align” attribute.
Align the paragraph to right, center, left and justify.
Example: 2 <p align=center>Computer</p>
Break Tag
The break tag<br> is used to insert a line break.
The break tag has no closing tag.
The Opening tag of break tag is <br>

Body, underline, Italic Tags
The bold tag is used to bold the font <b>……</b>.
The Underline tag is used to underline the text <u>……</u>
The italic tag is used to italicizes or slanting the text <i>…..</i>
Example: 2
<b>Computer</b>
<u>Computer</u>
<i>Computer</i>
Center and Horizontal ruler Tags
The center tag is used to center the image or text.
The opening center tag is <center>
The closing center tag is </center>
Computer
Computer
Computer

Font Tag
The font tag is used to specialize the font type, size and color.
The attribute of font tag is face, color, size
The opening font tag is <font> and closing tag is </font>
Example: 2 <font face=”arial” size=4pt color=#000000>font tag</font>
Image Tag
The image tag is used to insert the image in the web document.
The image tag must have an attribute “src”
The “src” stands for “source”
The opening image tag is <img> and the closing tag is </img>.
attribute

Image Tag
Example: 1
To control the size of the image, the attribute is width and height
<img src=image name.gif></img>
Example: 2 <img src=image name.gif width=100 height=120>
Text message can be followed by image.
Example: 1 <img src=tnlogo.gif>Government of Tamil Nadu Emblem
Output
Aligning images within the text

To align the text in the middle or at the top which follows the image.
Example: 2
Output
Aligning images within the text
<img src=tnlogo.gif align=middle>Government of Tamil Nadu Emblem</img>
<img src=tnlogo.gif align=top>Government of Tamil Nadu Emblem</img>

Try the following codes for aligning image
<html>
<body>
<p>
<img src =”tnlogo.gif” align =”left” width=”100"
height=”50">
The align attribute of the image is set to “left”. The image will
go to the left of this text. </p>
<br>
<p>
<img src =”tnlogo.gif” align =”right” width=”100"
height=”50">
The align attribute of the image is set to “right”. The image
will go to the right of this text.
</p>
</body>
</html>

Anchor tag
The anchor tag is used to create a hyperlink to another document
When the user click the content it will open another document
The opening anchor tag is <a> and closing tag is </a>
The anchor tag have attribute is “href”
The “href” attribute indicates the URL for the hyperlink.
<a href =”homepage.html”> Home Page</a>
The target window can be identified as _blank, _top, _self, or _parent.
Example-1
Example-2 A hypertext link can consist of text, an image, or a combination of both.
<body>
To view Government of Tamil Nadu Home Page, click the
Government’s logo.
<p>
<a href = “http://www.tn.gov.in” > <img src=tnlogo.gif></a>
</p>
</body>

Anchor tag
It is also possible to create links to different parts of the same Web document
 First we must place a pointer in the document where we want to link to.
The name attribute of <a> tag is used for this purpose.
<a name=”Department”>
Then <a href=”#Department”> tag can be used to link to that part.
Example-3
Example-4 <a href=”#Department”>.
The # symbol tells the browser to look for the link within the same
document instead of looking for another file.
For example, you want to have a link from the University section to the
Department section on the same Web page.
 Right before “Department” you need to type <a name=”Department”>.

Bgsound tag
The bgsound <bgsound> tag directs the browser to play a sound file.
The audio file should be specified using the src attribute.
The acceptable audio file formats are: .au, .wav, and .mid.
<bgsound src=music.au loop=”infinite”>
The loop attribute specifies the number of times the audio file is played.
The value “infinite” directs the browser to play the sound indefinitely.
Example-1
Example-2
<img dynsrc=music.dat width=150 height=150>
To play a movie in the browser, the <img> tag can be used with dynsrc attribute.
The music.dat is a video file. The player width and height are specified as attributes
of the <img> tag.

Body Section - Advanced HTML tags
Lists There are three kinds of lists in HTML:
 Unordered lists <ul> …. </ul>
Ordered lists <ol> …. </ol>
Definition lists <dl> …. </dl>
Example-1
Unordered Lists
This list starts with an opening list <ul> tag and ends the list with a closing list
</ul> tag.
Between the <ul> and </ul>, you enter the <li> (list item) tag followed by the
individual item.
 The <li> tag identifies an item in a list. No closing </li> tag is needed
<ul type=“square”>
<li> Name
<li> Phone
<li> ID
</ul>
 Name
 Phone
 ID
Output

Ordered Lists
An order list used to list out the contents like numbers, alphabets or roman letters
<ol type=“1”>
<li>Primary School
<li>Elementary School
<li>High School
</ol>
Example-2
1. Primary School
2. Elementary School
3. High School
Output
Definition Lists
A definition list starts with <dl> and ends with </dl>.
 It creates a list with no bullets or numbers.
The definition list consists of a definition term <dt> tag and a definition-definition <dd> tag.
<dl>
<dt>Keyboard</dt>
<dd> It is an input device</dd>
<dt>Printer</dt>
<dd>It is an output device</dd>
</dl>
Example-3 Output
Keyboard
It is an input device
Printer
It is an output device

Table Tag
The <table> tag is used to create a table on a Web document.
The table row tag (<tr>) is used to insert a new row in the table.
 The table header tag (<th>) is used to insert a new cell inside a table row
to represent the column heading.
The table data (<td>) tag inserts a new cell inside a table row to represent an entry
(value) in the table.
The cellspacing attribute refers to the space between cells and should be in pixels.
The cellpadding attribute refers to the spacing within the cell in pixels (the space
between the cell walls and the contents of the cell).
Example:1
<table border=2 cellspacing=10 cellpadding=10>
<tr>
<td width=50 align=center>Rama</td>
<td width=50 align=center>Sita</td>
</tr>
</table>
Example:2
<table border=2>
<tr><th>RollNo</th>
<th>Name</th></tr>
<tr><td>1001</td>
<td>Rama</td></tr>
<tr><td>1002</td>
<td>Sita</td></tr>
</table>

Form Tag
Forms are used to receive information from the user
The <form> tag is used to create a form.
 Forms contain many types of form elements, such as text boxes, radio buttons, check boxes,
buttons and drop-down lists.
The form has a special element, which is submit button, which will submit the entries of a
form to a server application to process the
entries.
The important attributes used with the <form> tag are method and action attributes.
The method attribute of the form tag is used to identify how the form element names and
values will be sent to the server.
The get method will append the names of the form elements and their values to the URL.
 The post method will send the names and values of the form elements as packets.
<form method=get action=”serverscript”>

Form Tag
The name attribute is used to name the input element.
The type attribute identifies the format of the input tag.
The possible type attributes are text, password, hidden, checkbox, submit, reset, file,
image and button.
The type “text” attribute creates a text box field.
 The type “hidden” attribute creates a form field that is not visible in the browser.
The type “submit” attribute creates a submit button and when user clicks this button,
the form elements’ names and their corresponding values are sent to the server side
program specified in the action attribute of the form tag.
 The value attribute provides a default value for the input tag.
 The value will be displayed with the form element in the browser.
<form method=post action=”server side program name”>
<input type=text name=empname value=rama>
<input type=text name=age value=23>
<input type=submit>
</form>

Frame Tag
Frames divide a web page into sections that each has a different HTML source page
and their own set of scroll bars.
With frames, we can put a number of HTML pages into a single window; each of
frames can display a page.
Frames are defined using <frameset>… </frameset> tags.
The <frameset> tag has two modifiers: rows and cols to define the size of each frame.
 A Web page with frames should not have body section.
 The <body> tag and <frameset> tag cannot come together.
<html>
<frameset rows=”64,*”>
<frame src=”top.html” name=”banner” scrolling=”no” noresize>
<frameset cols=”150,*”>
<frame src=”menu.html” name=”contents”>
<frame src=”home.html” name=”main”>
</frameset>
</frameset>
</html>
The attribute rows=”64,*” means that the first frame will take up 64 rows of the
window and the second frame will take up the rest.

Frame Tag
If the files top.html, menu.html and home.html have the following
code (each line in one file respectively),
<h2>TOP</h2> <!—top.html —>
<h2>MENU</h2> <!—menu.html —>
<h2>HOME</h2> <!— home.html —>
the above frame based web page will be displayed as follows:

Body Section in HTML - R.D.Sivakumar

More Related Content

What's hot

Similar to Body Section in HTML - R.D.Sivakumar

More from Sivakumar R D .

Recently uploaded

Body Section in HTML - R.D.Sivakumar