Pages

Friday, December 10, 2010

The Division Element

The division element <div> is used to organized the content in your document. It gives a logical division or sections that group and separate related content.


Listed below are the most common attributes you can use for division element:
  •      align - sets the horizontal alignment of the division element inside the web browser, such us left, right, center and justify.
  •      class - provides the class or classes of the division element. This attribute is used to identify the name of the  style class or classes to be used for rendering.
  •      id - provides a unique name fort the division element.
  •      lang - provides the language in which the enclosed content is coded.
  •      style - provides a cascading style sheet (CSS) properties to the division element.
  •      title - provides a text title for the division element. Most web browser displays the value of the title as a "tooltip".


Here's an example on how to use the <div> element that sets the left, right and center alignment:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
         <mate name="keywords" content="blog, web development" />
         <title>the DIVISION element</title>
     </head>


     <body>
          <h1>
               the DIVISION element
          </h1>
          <div align="left">
              <p>
               The content using the Left Alignment attribute of the division element.
              </p>
          </div>
          <div align="center">
              <p>
               The content using the Center Alignment attribute of the division element.
              </p>
          </div>
          <div align="right">
              <p>
               The content using the Right Alignment attribute of the division element.
              </p>
          </div>
      </body>
    </html>

0 comments:

Post a Comment