Open-Source Internship opportunity by OpenGenus for programmers. Apply now.
Pre-requistes: Tags and Attributes of HTML
Well, everything is not difficult to learn, all you need is good internet connection and a cup of coffee to move on with this tutorial!
As the name suggest, body tag defines the body of the webpage. All the basic content of a webpage including heading, paragraph are defined inside the body tag.
Starting from very scratch, body is considered as closing tag, which means it needs to be closed after the work is done. To denote closing tag, we use "/" with angular brackets.
Syntax:
<body>
Required Content
</body>
Let's see a Hello World kinda example:
<html>
<head>
<title> Sample Code </title>
</head>
<body>
<h1> Hello World </h1>
</body>
</html>
As it can be seen, inside body tag, we've used h1 tag as well, which is used to define the heading of the webpage.
Likewise, many other tags can embedded inside body tag.
CSS script using body tag:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
Mostly browser display the body element with the above default values.
Browsers that support body element
Google Chrome
Internet Explorer
Mozilla Firefox
Microsoft Edge
Opera Mini
Body tag explore Event Attributes as well as Global Attributes.
HTML has the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element. Event Attributes embedded in body tag are used to do the same.
Some of the Event Attributes are listed below:
- Onafterprint
- Script to be run after document is printed.
- Onbeforeprint
- Script to be run before document is printed.
- onbeforeunload
- Script to be run when the document is about to be unloaded
- onblur
- Function to call when the document loses focus.
- onerror
- Function to call when the document loses focus.
- onfocus
- Function to call when the document receives focus.
- onhashchange
- Function to call when the fragment identifier part (starting with the hash ('#') character) of the document's current address has changed.
- onlanguagechange
- Function to call when the preferred languages changed.
- onload
- Function to call when the document has finished loading.
- onmessage
- Function to call when the document has received a message.
- onoffline
- Function to call when network communication has failed.
- onpopstate
- Function to call when the user has navigated session history.
- onredo
- Function to call when the user has moved forward in undo transaction history.
- onresize
- Function to call when the document has been resized.
- onstorage
- Function to call when the storage area has changed.
- onundo
- Function to call when the user has moved backward in undo transaction history.
- onunload
- Function to call when the document is going away.
Some of the Global Attributes are listed below:
| Attributes | Description |
|---|---|
| accesskey | Specifies a shortcut key to activate/focus an element |
| class | Specifies one or more classnames for an element (refers to a class in a style sheet) |
| contenteditable | Specifies whether the content of an element is editable or not |
| translate | Specifies whether the content of an element should be translated or not |
| title | Specifies extra information about an element |
| tabindex | Specifies the tabbing order of an element |
Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.
Script including the above Attributes:
<! DOCTYPE html>
<title>Attributes Example</title>
<head>
<style>
body {
background-image: url(https://gooloc.com/wp-content/uploads/2015/10/jtpkps0qht1.jpg);
}
h1{
color: red
}
P { text-align: center }
button{
margin-left: 50%
}
</style>
<script>
function display()
{
document.getElementById("header").innerHTML = "This is a representation of event and global attribute in HTML";
document.getElementById("header").style.color="red";
}
</script>
</head>
<body>
<p id ="header"> Hello World </p>
<button onclick="display()">click here </button>
</body>
</html>
Output of the above script:
fig1
fig2
- The above script is written using HTML and Javascript.
- You can use script tag to embbed Javascript code in Html.
- Attribute tag used in this is .getElementById().
- fig1 shows the output before clicking the button and fig2 is after clicking.
Some specific attributes to be used with body tag are listed below:
- TEXT: Defines the color of the text.
Syntax:
<body text = "#ffff">
- BGCOLOR: Defines the background color of the webpage.
Syntax:
<body bgcolor = "#00ccee">
- BACKGROUND: Defines the background image of the webpage.
Syntax:
<body background = <"image url>" >
- LINK: Defines the default color of the text in all links contained by the element.
Syntax:
<body link = "#0000ff">
- VLINK: Defines the default color for links inside the element, that have already been visited.
Syntax:
<body vlink = "purple">
- ALINK: Defines the default color that all a elements contained by this element will take when the mouse is over them.
Syntax:
<body alink = "red">
Although it is recommended that the above properties of the webpage should be declared in Style Sheets.
Some scripts including the above attributes:
<html>
<head>
<title>Welcome Page"</title>
<style>
body {
background-image: url(https://gooloc.com/wp-content/uploads/2015/10/jtpkps0qht1.jpg);
}
h1{
color: red
}
P { text-align: center }
</style>
</head>
<body alink = 'red', vlink = 'purple'>
<h1 align=center color=red> Hello World </h1>
<p><a href = "https:\\www.google.com\"> Cick here to open Google </a></p>
</body>
</html>
Output of above written script is
- The above written script comprises HTML as well as CSS.
- It is noteworthy that how contents are defined in the html part and its formatting in CSS.
- Jot down the color of the link above. It denotes that link has already been visited once (vlink property).
