How to Use DIV Tags for a Content Layout
Laying out the content of your Web page is an important aspect of Web design. You can use a number of elements in HTML to divide a Web page and lay out its contents properly, including tables, layers, spans and DIV tags. Used to define divisions in an HTML document, DIV tags are flexible, easy to use and compatible with Web browsers. They are often used in conjunction with cascading style sheets (CSS) to better lay out, format or enhance the content on a Web page. Using DIVs and CSS, you can create divisions on your Web page, such as headers and sidebars.
Other People Are Reading
Instructions
-
-
1
Click "Start," "Programs," "Accessories" and "Notepad."
-
2
Type the following text at the top of Notepad:
<html>
<style type="text/css">
<!--
#header {
height: 100px;
width: 500px;
background-color: #FFFFCC;
}
#body {
height: 300px;
width: 500px;
}
#body #sidebar {
height: 300px;
width: 80px;
float: left;
background-color: #009900;
}
#footer {
height: 100px;
width: 500px;
background-color: #000000;
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="header">Content for id "header" Goes Here</div>
<div id="body">
<div id="sidebar">Content for id "sidebar" Goes Here</div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</body>
</html>
This code creates four DIV tags by using the opening <div> and closing </div> HTML tag combinations. The code then gives them separate IDs: header, sidebar, body and footer. It also creates a CSS block using the opening <style> and closing </style> HTML tag combinations. Then it formats each individual DIV tag's attributes, such as background color, positioning, width and height, to form a Web page layout. You can now insert your content within the individual DIV tags.
-
-
3
Click "File" and then "Save as." Select "All files" as the "Save as type."
-
4
Save your file as an HTML file on your computer by placing .html at the end of the file name, for example, usingDivTags.html.
-
5
Locate your HTML file where you saved it on your computer, and double-click on it. It should open up in your Web browser and present you with a colorful, four-sided layout.
-
1
