Back to the index | Previous

Competences: To organize the web page by divisions.

Contents: The DIV tag and the id attribute

The DIV tag

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 codeHTML code Output
<div> This is a division without style </div>
This is a division without style
div.example1 {margin:10px; padding:5px;
    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;
      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:

If you want to learn more

The id (like identifier) attribute

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:

This is a division id example3 UNIQUE in the page
Css codeHTML 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).

albero (6K) Here there are the basic divisions of the body in a typical web page:
  • 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.
(Sorry, in the picture there are 3 sections only!)

Here is an example of organization of the web page (section body):

HTML code in the web pageCss code in the stylesheet Output

<div id="heading"> ..... </div>

<div id="menu"> ....... </div>

<div id="content"> .... </div>

<div id="foot"> .... </div>

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!

Make an usable web page with heading, menu, content and foot.

Ludovica Battista

Back to index | Previous