Lesson 7a - The basic page
Now that you know how the <div> and <span> tags and how to add id and class attributes to your tags, you are ready to begin constructing your pages for real. We know that html is used to denote semantic meaning. In that vein, a good web page is broken up into divisions according to the sections of the page. At the most general level, any web page can be broken apart into basic sections. Once you have created your general sections (divs), you can start putting the right code in the appropriate sections. Here is the most basic way to break your page into divisions:
Container
All of the viewable code on your page is enclosed within the <body> tag. In addition to this, all the viewable code should also be enclosed within one master <div> with the id "container." This allows you to create a fix width for the container and to make the content as a box over the background of the body. This is clear if you look at almost any site, including this one. The opening <div> tag should be right below the opening <body> tag and the closing </div> tag should be right above the closing </body> tag.
Header
The header <div> (a div with the id "header") is an important part of your page. This div is present on almost every page on the internet. It is the top mast head with the title of the page. It is almost always on the top portion of the page. In this page it is the black bar that says "illustration tools J." This div should be the first div within your container and should simply container an h1 tag with the title of your page. With CSS, it is possible to replace that h1 text with an image (as this site has done). For now, nothing more has to go into this div, but without it, your page has no header. Right after the h1 is placed in your div, you can close it up.
Navigation
Any website with more than one page has to have some system of navigating to different pages. Hence, the navigation div (a div with the id "navigaton"). This div is usually placed below the header div and contains a list with links to your main pages. For instance, you can have a simple <ul> with list items containing links (anchors) to the home page, about section, gallery 1 and gallery 2. Once you put your navigation list in the div you can close it.
content
Below your navigation div comes the content div (a div with the id "content"). This div contains all of the actual specific content for the page. For instance, on the about page it would be the actual text for the about section. On your gallery pages, it would be the thumbnails and images. This is where the meat of the page will go and this section will change from page to page. If necessary, divs can be placed inside the content div to further segment the content.
footer
The last div in your container is the footer div (a div with the id "footer"). While this div isn't necessary, it can be useful. If you look on most websites, there is a navigation list at the very bottom of the page. It often has copyright info, privacy policy, etc. This is the footer to the page. For an artist portfolio site, it can contain vital copyright info. This can simply be a <p> tag with the info and then the closing </div> tag.
All together now
Here is how it will look in code with any content filled in (now you can see why indenting and commenting your closing tags are so important!):
<body>
<div id="container">
<div id="header">
</div><!-- close header -->
<div id="navigation">
</div><!-- close navigation -->
<div id="content">
</div><!-- close content -->
<div id="footer">
</div><!-- close footer -->
</div><!-- close container -->
</body>
Here is the same structure with some content filled in:
<body>
<div id="container">
<div id="header">
<h1>My Amazing Art</h1>
</div><!-- close header -->
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about/about.html">About</a></li>
<li><a href="gallery/gallery.html">Gallery</a></li>
<li><a href="contact/contact.html">Contact</a></li>
</ul>
</div><!-- close navigation -->
<div id="content">
<h2>About Me</h2>
<p>This is my about page, and it tells all about me as an artist</p>
</div><!-- close content -->
<div id="footer">
<p>All content is © copyright me, 2000 - 2008</p>
</div><!-- close footer -->
</div><!-- close container -->
</body>
Try it out!