How To Code A Simple Website From Scratch Part 3: HTML Layouts :: Freelance WordPress Developer Amber Weinberg

How To Code A Simple Website From Scratch Part 3: HTML Layouts

10.23.09 | Tags: development, HTML, tutorial

Now that we’ve got our website set up, the beginning HTML tags and the head section finished, it’s time to move on to the actual HTML layout and coding. In this post we’ll talk about the HTML, floats and validation as well as some common tags. Ready? Let’s get started!

Here’s our HTML from yesterday:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Amber's Really Cool HTML-Lovin' Website</title> <meta name="description" content="Amber's Really Cool HTML-Lovin' Website is a website dedicated to geeks who really love HTML and it's superness."/> <meta name="keywords" content="love HTML, HTML rocks, HTML is cool, Joomla sucks"/> <link rel="stylesheet" href="main.css"/>

<body>

Contain It.

Now the first <div> we need to worry about is our container div. If you remember from Part 1 of this series, we measured of the total container and it came out to be 1023px wide. We use a container div, not only to keep all of our website code in line, but also to center the site in the browser (I’ll show you this in the CSS) and to provide a basis for expanding background divs and floats (Also in the CSS). Let’s name our container div…container…so we remember what it does.

<body> <div id="container">

The rest of the website will now go “inside” this div. Let’s move on to the header.

The Header

A header (different from the <head> section above the body tag) is the very top of a website. It normally contains the website’s logo, an image, and possibly a tagline and/or navigation. It’s important to name these divs always the same, as it creates a standard and helps anyone else who might need to edit the site behind you to figure out where and what it is.

<body> <div id="container"> .....<div id="header">

Now if you noticed, I indented (indicated by the dots, don’t actually put dots in your document, WordPress doesn’t allow for indentions, or tabs) the header tag. Why? Because it’s located inside of the container div, and indenting these helps keep our code organized and clean.

Now we need to add our logo image inside of our header. To add a image, we simply use an <img> tag along with it’s source, or src, address and give it an alt tag. We do not need to give our image a class, since it’s the only image inside of our header, we can target it using a selector (#header img but more on that in the CSS post). Here’s what the img tag looks like, and remember to indent another tab to keep it organized.

<body> <div id="container"> .....<div id="header"> ..........<img src="images/logo.jpg" alt="My Website's Really Cool Logo"/>

As you can see, our image tag can be easily understood as “img src” pertains to image source, or the location of the image (I put ours in a folder called images, this is relative to the web page)

The alt tag is used to describe the image for multiple reasons: in case the image is broken, it displays instead; for handicapped users using a website reader; and for SEO purposes to add some more keywords to our site.

Also, did you notice we closed the image tag using a “/”? Don’t forget to add this or your site won’t validate. Let’s close the header tag now and move on to the navigation.

<body> <div id="container"> .....<div id="header"> ..........<img src="images/logo.jpg" alt="My Website's Really Cool Logo"/> .....</div>

The Navigation

Now the proper way to code our navigation is to put it in a list, since it’s a list of links (although I admit I don’t always follow this myself). There are 2 types of lists. <ol> lists create “number lists”, i.e. 1.item 2.item and so on. <ul> lists are “unordered lists”, and often display them with bullet points. Since we don’t need our list to be numbered, we’ll go with the <ul>. We need to give our <ul> tag an id called “nav” so we can style and identify it later. Now to create each “item” or bullet point (which will be hidden by CSS) we need to create a “line item” or <li> tag. (See most of these tags are simple abbreviations).

Now, it wouldn’t be a navigation without links, right? Don’t forget to add your link tag. A basic link tag consists of “a href” which is your source for your link (similar to the img src), a title tag (just like an alt tag) and it may or may not have a class. Once again we won’t need to use a class for this, since we’re using clean HTML and are able to target the links with our selectors. (Read Less HTML is Better HTML: Simplicity in Coding for more on classes and selectors). Al
so, the link tag is not self closing like the image tag, because you need to put text in it to display on the webpage what the link is. Don’t forget to close each tag.

<body> <div id="container"> .....<div id="header"> ..........<img src="images/logo.jpg" alt="My Website's Really Cool Logo"/> .....</div>

.....<ul id="nav"> ..........<li><a title="This is a link" href="link.html">Link</a></li> ..........<li><a title="This is a link" href="link.html">Link</a></li> ..........<li><a title="This is a link" href="link.html">Link</a></li> ..........<li><a title="This is a link" href="link.html">Link</a></li> ..........<li><a title="This is a link" href="link.html">Link</a></li> .....</ul>

Still with me? It’s really not confusing once you understand what each element does. For organizational purposes, I like to separate each section, or div by a blank space, like you see between the header and nav tags. Let’s move on.

Left and Right Containers

Now we’ve come to the left and right content containers. In CSS and HTML, in order to put 2 divs side by side, we have to use floats on our ids in the CSS. Without going into too much detail, if you want a container to be on the left side, you’d give it a float left, or a right if you want it on the right side. I’m explaining this part of CSS now, because it affects how we order our divs. When we want to put a left and right div together in HTML, we MUST put the right div first in our HTML (even though it displays as second) or it will display pushed down in older browsers. I honestly have no clue why the CSS creators did this. It’s stupid, I know.

For example purposes, let’s just place some dummy, or lorem ipsum, text in each of these containers. In HTML, paragraphs are separated by a simple opening and closing <p> tag. (And you thought HTML was gonna be hard, huh?) Here we go:

<body> <div id="container"> .....<div id="header"> ..........<img src="images/logo.jpg" alt="My Website's Really Cool Logo"/> .....</div>

.....<div id="rightContent"> ..........<p>This is some super cool dummy text</p> ..........<p>This is some super cool dummy text</p> .....</div>

.....<div id="leftContent"> ..........<p>This is some super cool dummy text</p> ..........<p>This is some super cool dummy text</p>..........<p>This is some super cool dummy text</p> ..........<p>This is some super cool dummy text</p>..........<p>This is some super cool dummy text</p> ..........<p>This is some super cool dummy text</p>
.....</div>

Now we’ve come to the last part of our HTML, the footer.

The Footer

Normally your footer consists of smaller text links, mimicking the navigation and copyright information. This is really helpful, especially on long pages, because it means your users can go to another page, without scrolling to the top navigation. For example purposes, we’ll just put the copyright info in ours. Once again, make sure you name this div “footer”, as that’s the standard name for this section.

<body> <div id="container"> .....<div id="header"> ..........<img src="images/logo.jpg" alt="My Website's Really Cool Logo"/> .....</div>

.....<div id="rightContent"> ..........<p>This is some super cool dummy text</p> ..........<p>This is some super cool dummy text</p> .....</div>

The HTML Ends

So we’re done right? Wrong! Did you forget you need to close your container div, your body and html tags? The end of your HTML should finally look like this:

<body> <div id="container"> .....<div id="header"> ..........<img src="images/logo.jpg" alt="My Website's Really Cool Logo"/> .....</div>

.....<div id="rightContent"> ..........<p>This is some super cool dummy text</p> ..........<p>This is some super cool dummy text</p> .....</div>

</div>

</body>

</html>

Preview It

Save the document to your desktop as something like index.html. Drag it to your browser of choice (better be Firefox or Chrome!) and take a look at it. Doesn’t look like much does it? Don’t worry, we still have to add all the styles via CSS tomorrow before it becomes pretty. If you coded your site correctly, it should look like:

Validate It

Now, before we move on to the CSS, you NEED to validate it. So many developers out there, don’t care about validation, coding standards or even clean, organized code. But you don’t want to be a development loser do you? You want to be the best right? So head on over to http://validator.w3.org/#validate_by_input and copy and paste your code in the box.

WHAT? Not valid? FIVE ERRORS? What kind of tutorial is this?

Before you freak out that I’ve lead you astray, I intentionally left one tag out. Can you find it? If you guessed the closing </head> tag you win a million dollars! (not really) As you can see, one tag can lead to multiple errors. This is why many developers freak out about validation and skip it. Go back to your head file and add your closing head tag:

<body> <div id="container"> .....<div id="header"> ..........<img src="images/logo.jpg" alt="My Website's Really Cool Logo"/> .....</div>

.....<div id="rightContent"> ..........<p>This is some super cool dummy text</p> ..........<p>This is some super cool dummy text</p> .....</div>

</div>

</body>

</html>

Now, repaste the new code and revalidate it. Wahoo!! Congrats, you just made your first clean, validate HTML page!

Now, stayed tuned tomorrow when we style it into our pretty example website in How To Code A Simple Website From Scratch Part 4: Fancy CSS

All “How To Code A Simple Website From Scratch” steps:

How To Code A Simple Website From Scratch Part 1: Preparing the Design
How To Code A Simple Website From Scratch Part 2: Beginning the HTML
How To Code A Simple Website From Scratch Part 3: HTML Layouts
How To Code A Simple Website From Scratch Part 4: Fancy CSS

About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?.

2 Comments

Keith says:

October 29, 2009 at 12:55 pm

Nice wrap up for the HTML portion. I like how you showed the complete code for each step instead of just tidbits of it. One thing I have slipped on more lately is indenting my HTML code, usually it is all just left aligned.

Do you put title tags on all of your links or just those that you feel need them?
Amber says:

October 29, 2009 at 12:56 pm

@Keith Thanks! I put title tags on all of them, it’s good for accessibility.