Div Tags

fleurchild.com > Resources > Tutorials > Div Tags

Div tags are used to define areas within an HTML/XHTML document. When stylized with CSS, div tags in define a layout attributes (i.e. background colour, size, and positioning). This tutorial will show you the basics in properly coding an Auto-Centered Layout and a Fixed-Positioning Layout

Auto-Centered Layout

Basic Parts of a Layout

container

header

content

footer

end of container

</body></html>

HTML

Copy and paste the following textarea onto your HTML editor, and you will notice the basic points above (shown in bullets) written in HTML.
<!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" lang="en" xml:lang="en"> <html><head><title>The text you would like to appear in the website title on the top of each window</title></head> <body><div id="container"><div id="header">WEBSITE IMAGE HEADER HERE</div><div id="content">WEBSITE CONTENT HERE</div><div id="footer">WEBSITE FOOTER TEXT AND/OR IMAGE HERE</div></div></body></html>

CSS

Above, each part of the layout were given "ids" - using CSS, we can use the "ids" to give each part certain attributes.

container = #container

header = #header

content = #content

footer = #footer

Welcome to fleurchild.com, Julia's little corner of the webernet. Be sure to check out the many high-quality resources the site has made availible for you. If you have a request of any kind, don't be afraid to from me a message in the blog. Back to the Top.