Step 3: Body

It’s time to really start building the website.

<body>-element

Add the following bold printed section to your sample file:

<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>Whatever title of your file</title>
</head>

<body>

</body>

</html>

Compared to the old HTML course, this is where you begin to really notice a difference in what HTML is used for nowadays. The body-element can now only be used to determine where the body of your page begins and ends. It is assumed you’ll be using CSS to determine styles within your website. So it’s not possible to set a background image or background color within in the <body>-element anymore. Nor will you use the body-element for setting text or link colors. You will have to use CSS instead to set all these.

CSS

Usually you will store this in an external CSS file (a stylesheet). Just to help you along I will show you a sample of adding some styles in what is called “inline CSS”. This is when you provide style settings within an HTML element, like this:

<body style=”background-color:#ffffff;font-color:#000000;font-family:Arial;font-size:11px;”>

Within the attribute “style” you can add as much CSS as you like. In the sample above, I’ve set the background color to white, text (font-color) to black and the font to be used belongs to the family Arial, which should be shown at a size of 11 pixels. Because I’ve added the style attribute to the <body>-element, these settings will apply to all content and nested HTML elements throughout my page. If I would like to switch it up a bit, and use a different font somewhere in the page, I can change it by adding a new style attribute to any other HTML element.

New body attributes

Because HTML is now mostly used to support many scripting languages, it’s assumed you’ll be creating more interactivity between the user and the site. To accommodate this the <body>-element now supports a list of new attributes. Most of these are inherited from JavaScript and are still used to fire (trigger) JavaScripts.

Attribute Description
onafterprint The afterprint event handler: triggers an action after the print job has finished
onbeforeprint The beforeprint event handler: triggers an action before the print job has started
onbeforeunload The beforeunload event handler: triggers an action before the visitor is leaving the page
onhashchange The hashchange event handler: triggers an action when a portion of the URL (anchor) is being changed
onmessage The message event handler
onoffline The offline event handler
ononline The online event handler
onpagehide The pagehide event handler: triggered when traversing from a session history entry
onpageshow The pageshow event handler: triggered when traversing to a session history entry
onpopstate The popstate event handler: triggered when navigating to a session history entry that represents a state object.
onstorage The storage event handler
onunload The unload event handler: triggers an action before the visitor is leaving the page

Go to the next step

Bookmark the permalink.

Comments are closed