Body Tag
<body></body>
The body tag is a required HTML tag.
All code for structuring your HTML page is placed within the opening and closing body tags.
Today, when building web pages, these attributes should be assigned using CSS (Cascading Style Sheets).
Your web page can be easily structured using the following box elements some of which were just added in HTML5.
- Use the following elements:
- Header element
- Nav element
- Main element
- Div element
- Footer element
- Others available:
- Section, Article, Aside, Hgroup
Setting Page Width
You can set tthe maximum body width of the page under the body declarations in your style sheet. body { max-width:1440; }
When the page is viewed on a screen as wide as 1920 pixels or more the document would only spread to a width of 1440 pixels.
Choice of Fonts
Choice of fonts for the entire document and page elements can be set in the style sheet under body declatrations.
body {
max-width:1440;
font-family: arial, tahoma, sans-serif;
font-style: normal;
font-size:20px;
font-weight: 400;
color: #000000;
}
Setting Background Color with Style Sheets
The code for setting background color for the body:
body {background-color: #ff0000}
body {background: #ff0000}
The background-color and background attribute can also be used with the table tag, row tag, cell tag, header tag, paragraph tag, span tag and most others.
Setting Link Colors with Style Sheets
Link colors should be set using Style sheets.
Code for setting link colors:
a:link{ color :#FF0080 }
a:active{ color :#FF00FF }
a:visited{ color :#808000 }
a:hover{ color :#808000 }
How do they do that? Ever wondered how they get links to change color when the mouse is positioned over them? Use the hover selector and assign a fore color.
Note: These colors are set by default. It is not necessary to provide this code unless you want to change the defaults.
Anchor Tag and Class
You may at sometime want to create classes for your anchor tags.
Here's an example of how you would reference them in the style sheet:
<a href="" class="button2"></a>
a.button2 { settings}
a:visited.button2 {settings}
a:hover.button2 {settings}