Just starting to learn how to hand code websites and need some help putting all the pieces together so the website will actually display correctly? This tutorial shows you from start to finish how to style a header, logo, navigation, content area and footer. Complete this tutorial and you will have a better understanding of how to hand code any website.
A websites’ structure from A to Z
You created a great design for you website but now you’re not sure how to start coding it? How to structure it? How do you use CSS to display that beautiful design in the browser? Well… this tutorial should answer all those questions.
A mock-up
A rather simple design for the company Simple Designs.
Visualizing the structure
Now with a design in mind, you should see 5 sections: Branding, Navigation, Content, Sidebar and Site Info.
Start with the mark-up
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Simple Designs :: A web design portfolio by Karinne Legault</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="branding"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="siteinfo"></div>
</body>
</html>
You’ll notice that I kept the same titles we used to define our sections in the HTML. Most often than not, you will see designers use HEADER instead of BRANDING but BRANDING is a much more meaningful word that describes the content for this div. Same reasoning with SITEINFO. Many use FOOTER but what’s in a footer? Site information is usually in there like address or phone numbers or just more information pertaining to the site. Always try to be as descriptive as possible when creating your sections (ID)
Now that we have our structure skeleton all checked, let’s add the content.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Simple Designs :: A web design portfolio by Karinne Legault</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="branding">
<h1>Simple Designs</h1>
<h2>A web design portfolio by Karinne Legault</h2>
</div>
<div id="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/company/about">About</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
<div id="content">
<h2>I create clean, simple and usable websites for small business and organizations</h2>
<p>This is my web design portfolio.</p>
<p>I'm a designer and a coder. I can create a site from an idea or take an existing site and make it more accessible and search engine friendly without costing you an arm and a leg.</p>
<p>Have a look around and contact me when you're ready. Hopefully I can help you get the idea
from your mind onto the web.</p>
<h3>Latest additions to the portfolio</h3>
<div class="portfolio"><a href=""><img src="" width="200" height="200" alt="Company A"></a></div>
<div class="portfolio"><a href=""><img src="" width="200" height="200" alt="Company B"></a></div>
<div class="portfolio"><a href=""><img src="" width="200" height="200" alt="Company C"></a></div>
</div>
<div id="sidebar">
<div class="short_about">
<h4>A little bit about me</h4>
<p>Hello! My name is Karinne Legault. I'm a web designer by day and a ... well I need my beauty sleep so ... I sleep at night. <a href="/about/">Want to know more?</a></p>
</div>
<h4>Lately on Simple Designs</h4>
<p>Welcome to the new version of Simple Designs. We are quite happy with this new layout.Please ... let us know what you think of it.</p>
<div class="latest_dates">Tuesday, November 6th, 2007</div>
<p>Out with the old and in with the new! Just launched is the snew site for Company A. A great new design to complement the new energy from their new CEO.</p>
<div class="latest_dates">Friday, October 26th, 2007</div>
</div>
<div id="siteinfo">
<div class="one">
<ul class="sup_nav">
<li><a href="/">Home</a></li>
<li><a href="/company/about/">About</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/company/privacy">Privacy</a><li>
<li><a href="/contact/">Contact</a></li>
</ul>
<p>Copyright © 2007 Karinne Legault</p>
</div>
<div class="two">
<p>Proudly hosted by <a href="">HostingCompany</a></p>
</div>
</div>
</body>
</html>
If you copy all that code and open it up in your favourite browser, you should basically see what a person on a screen reader will see: content.
While it’s not pretty, it serves its purpose. With the headings in place, once can look at the content and discern the areas and read the website like a book.
About The Author
Article By: Karinne Legault
Karinne Legault has 10 years of experience in the Web Design industry. You can see her portfolio at karinnelegault.com and her blog at karinne.net.
You can view other posts by Karinne Legault. Or you can visit Karinne's website at: http://www.karinnelegault.com/
Loading ...
July 11th, 2008 at 3:14 am
I enjoyed your writing style and I’ve added you to my Reader. Keep these posts coming.
July 11th, 2008 at 8:38 am
Thank you for the kinds words! I’m currently working on a string of related tutorials so keep a out
July 28th, 2008 at 1:57 pm
i always wanna make my own layout for my IMVU homepage…but well i never can make it happen…ESPECIALLY i have no idea how to change the panel into a button with all the content inside(i never know how to put all panel content in a button that i will make) hope u can help me with all d tutorial..thenkies
August 20th, 2008 at 11:21 am
Pretty nice site, wants to see much more on it!
August 26th, 2008 at 3:09 pm
Awesome tutorial. I’m working on a project now that was going nowhere until I read this. Thanks a million!
August 27th, 2008 at 8:36 am
@Dolly - If you need help, check out the Squeeze Forums! Tons of people there to help out!
@ John - Thank you!
@Kay - That’s great! Glad we could help! Sign up on the Squeeze Forums if you need more help!