This document provides information about various HTML body tags including:
- The <body> tag identifies the content section of a web page and can be customized using attributes like bgcolor to change the background color.
- Heading tags (<h1>-<h6>) are used to provide headings in the body and can be centered or styled.
- Other common body tags discussed are paragraphs (<p>), breaks (<br>), bold (<b>), underline (<u>), italic (<i>), center (<center>), font, image (<img>), anchor (<a>), and lists.
- More advanced tags covered are tables (<table>), forms (<form>), and frames (
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Body Section in HTML - R.D.Sivakumar
1. 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
2. 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
3. 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>
4. 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>
5. 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>
<h2>Computer</h2><p>
<h3>Computer</h3><p>
<h4>Computer</h4><p>
<h5>Computer</h5><p>
<h6>Computer</h6><p>
</body>
</html>
output
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
6. 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.
7. 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>
8. Body Section - Other HTML tags
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
Body Section - Other HTML tags
9. Body Section - Other HTML tags
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
Body Section - Other HTML tags
10. 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
Body Section - Other HTML tags
11. 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>
Body Section - Other HTML tags
12. 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>
Body Section - Other HTML tags
13. 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>
Body Section - Other HTML tags
14. 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”>.
Body Section - Other HTML tags
15. 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 - Other HTML tags
16. 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
17. 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
Body Section - Advanced HTML tags
18. 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>
Body Section - Advanced HTML tags
19. 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”>
Body Section - Advanced HTML tags
20. 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>
21. 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.
Body Section - Advanced HTML tags
22. 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 - Advanced HTML tags