Getting Started
The layout we're going to create is for an imaginary website, allaboutbees.com, containing articles and information about different types of bee. The contents of the page body are shown below:
<body>
<h2>allaboutbees.com</h2>
<h1>Bumblebees</h1>
<p><img src="bumblebee3.jpg" alt="bumblebee" width="183" height="200" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras dictum risus ut sem. Nulla lacus eros, semper id, pharetra quis, volutpat eu, neque. Vestibulum accumsan congue magna. Aenean pretium consectetuer orci. Sed lobortis ante ac risus. Cras fringilla molestie orci. Pellentesque quam turpis, pretium in, tristique vel, vulputate sit amet, arcu. Sed ultricies. Phasellus mi enim, varius non, sollicitudin eu, vulputate ac, ipsum. Fusce et tortor at lorem viverra hendrerit. Ut ipsum. </p>
<p>More paragraphs…</p>
<ul>
<li><a href="#">Bumblebees</a></li>
<li><a href="#">Honey Bees</a></li>
<li><a href="#">Masonry Bees</a></li>
<li><a href="#">Mining Bees</a></li>
<li><a href="#">Leaf Cutting Bees</a></li>
</ul>
<p>Website design by Fred Bloggs</p>
<p>Email: <a href="mailto:name@example.com">name@example.com</a></p>
</body>
The contents of this page is fairly straightforward: we have a masthead at the top with the name of the site, a main content area, a navigation menu and a footer section. The first step is to simply wrap the contents of each of these sections in a <div>. Each div is given a unique id, which will allow us to style each section independently.
<body>
<div id="masthead">
<h2>allaboutbees.com</h2>
</div>
<div id="content">
<h1>Bumblebees</h1>
<p>Content… </p>
</div>
<div id="navigation">
<ul>
<li><a href="#">Bumblebees</a></li>
<li><a href="#">Honey Bees</a></li>
<li><a href="#">Masonry Bees</a></li>
<li><a href="#">Mining Bees</a></li>
<li><a href="#">Leaf Cutting Bees</a></li>
</ul>
</div>
<div id="footer">
<p>Website design by Fred Bloggs</p>
<p>Email: <a href="mailto:name@example.com">name@example.com</a></p>
</div>
</body>
Now, create an internal stylesheet (using <style> tags), or an external stylesheet (using the <link> tag. We’ll use this stylesheet to create a layout for our page.
You can take a look at the page thus far, though it won't look any different yet because we haven't added any style rules. Let us do that now.