Learning HTML & XHTML

 








































whats a div tag?

 Expression Web Tutorial:  What is a Div?

Today, we use the <div> tag to generate boxes on a web page, and then we use CSS to style these boxes. 

Designed to work in conjunction with CSS,  we have far fewer HTML tags to learn.    This is due largely to the fact that CSS is used for all formatting and positioning.  Whereas HTML & XHTML are used to create structures and add  content.



What is a Div?

A <div> is an (X)HTML tag that is used to section off a web page into different divisions.  Literally it stands for "division". 

We commonly use <div> tags to create CSS Layouts.  Each <div> generates a box on the web page, we then create CSS Style rules to modify the box so as to create a space to enter content, graphics, images, etc.

We will place our content inside these div-type boxes.

 

Start with the Layout

CSS Layouts are created by using a series of <div> tags,   For instance, this very web page consists of about 6 different <div> tags. 

  1. header
  2. masthead
  3. container
  4. left column
  5. Page Content
  6. footer

Just an FYI:  These 6 divs were placed on the web page and styled in the order you see above.  The left column and page content divs are nested with the container.

 

 

XHTML div with  the  ID attribute to apply styles

 

<body>

<div id="header"></div>
<div id="container">
     <div id="right column"></div>
     <div id="left column"></div>
     <div id="Page Content"></div>
</div>
<div id="footer"></div>

</body>





 

No Need To Write Any Code

 

Expression Web allows you to avoid writing the code you see above.

 Instead, click and drag a <div> from the Toolbox and drop it on the Web Page.

The code written for you when you place a div on the page:

<div></div>

 

Next, Click "New Style" to open the Style builder.  Enter #header as your selector, and click apply.

Now the code will look like this:

<div id="header"></div>

Continue using the Style builder to create styles to format the header.

 

This should give you a better idea of what's going on under the hood of Expression Web, and help you understand <div> tags and how to use them.