- A heading for the title or the logo of the site.
- A menu for the surfing in the site.
- A content that is the most important division which generally needs a lot of space.
- A foot for the copyright or the e-mail adresses.
Competences: To organize the web page by divisions.
Contents: The DIV tag and the id attribute
The <div> tag defines a division/section in a HTML document, but, instead of other specific tags, as paragraphs, tables or headings, the div tag hasn't got any peculiarity and, so a division whitout style is not evident in the document.
| Css code | HTML code | Output |
| <div> This is a division without style </div> |
This is a division without style | |
div.example1 {margin:10px; padding:5px;
background-image:url(image/reticpiccolo.gif);
text-align: left; height:50px;
width: 300px; color: #666633; font-family: Arial;} |
<div class="example1"> This is a division class esempio1 </div> | This is a division class example1 |
div.example2 {width: 200px; padding:20px;
background-color:blue;
text-align: center;
color: white; font-family: lucida console;} |
<div class="example2"> This is a division class example2 </div> | This is a division class example2 |
If you write .example1 or .example2 only (instead of div.example1 or div.example2) in the css code, you can apply the style class to other elements (as paragraphs, or table cells).
More informations about some style properties:
You can have more divisions of the same class in a web page: for instance
more divisions of class example1 or class example2.
Instead of class, the id attribute marks out only one division
in the web page.
Look at the division with red background placed in a fixed point of the page. This is the code for it:
| Css code | HTML code |
#example3 { position:absolute; left:800px; top:800px;
background-color:red; padding:5px;
height:100px; width: 100px;} |
<div id="esempio3">This is a division id example3 UNIQUE in the page</div> |
In the css code, the # symbol denotes the id.
The position property places a division anywhere on a page. The div position is specified by left (the pixels on the left of the division) or by top (the pixels above the division).
This property isn't easy to use because not all the browsers interpret it
in the same way.
It's better to try and verify the output on different browsers.
Why unique elements in the web page? Certainly not in order to hang up
strange and confused divisions!
A well structured web page should be planned by paper and pencil
before editing the code. Each page should have specific divisions
to improve the usability (to help the users to surf the Internet).
|
Here there are the basic divisions of the body in a typical web page:
|
Here is an example of organization of the web page (section body):
| HTML code in the web page | Css code in the stylesheet | Output |
| <body> <div id="heading"> ..... </div> <div id="menu"> ....... </div> <div id="content"> .... </div> <div id="foot"> .... </div> </body> |
body {font-family:Verdana; background-color:white; color:blue}
#heading { margin:10px; background-color:#ff9933; width: 100%;
text-align: center; height:80px; }
#menu {background-color:yellow; padding:10px; width: 100%;
text-align: center; height:20px;}
#content { margin: 10px; background-color:white;
width: 100%; text-align: left; }
#foot { background-color:#ccffff; width: 100%;
text-align: right; height:40px; }
|
Test page |
Pay attention!! It's easy to divide the page in horizontal sections, but there are some problems to organize the page in vertical sections! Some browsers can interpretate the css code in a different way!