On Making a Web Site – HTML / CSS Layout

I know, I know. The always intimidating coding part of making a web site. The biggest reason people use the WYSIWYG web editors is because they gloss over the coding. Why code if you can just slap some images in Front Page or DreamWeaver and it looks fine?

The reason is because you don’t have much control over your web site if you use a WYSIWYG editor. It makes it difficult to duplicate pages, fine-tune details, and provide consistency all the way around. Plus, if you’re skilled enough in the editor to actually overcome all of those deficiencies, you spent as much time learning to do that as you would learning HTML and CSS.

So that brings us here. It’s time for us to design the layout of our new web page using HTML and CSS. I’m going to have three parts for this tutorial. First, we’ll talk about a little HTML, its basic structure and what you’ll need to know. Second, we’ll look at styling that with a bit of CSS and I’ll explain its basic precepts. Last, we’ll put all of that to use and create a basic template page.

HTML Elements

Chances are you’re already at least a little familiar with HTML. I’m not going to get too much into the nitty-gritty details here (really, do you need to know it stands for HyperText Markup Language?), but you do need to know a few basic rules.

First of all, for the most part HTML works on opening and closing tags which surround content. There are a few exceptions to this, but we’ll get to that if we need to. Here is an example of a paragraph in HTML:

1

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

Now, nevermind the phony Latin, that’s just so you focus on what matters: the tags. That’s right, <p> and </p> are called tags. More specifically, together they comprise a paragraph element composed of the opening <p> and the closing </p>. The p stands for paragraph and the forward-slash means close this paragraph. Everything in between — the lorem ipsum… — is affected by the paragraph element.

Here is a clearer example:

1

<p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit.</p>

The <strong> element is for bolding text. Anything inside the strong element will be bolded on a web page, like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Now the important thing to realize is that until you close a element, it is still open and affecting everything within it. So if were to do this (semantically-incorrect) code here, it would bold everything inside it:

1
2
3
4
5

<strong>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Pellentesque ipsum urna, dictum vel, porttitor at, luctus a, arcu.</p>
<p>Donec turpis. Duis molestie felis at magna. Etiam vitae lorem.</p>
</strong>

That means all three paragraphs would be bolded. If I forgot to include the closing strong tag, the browser (IE/Firefox/whatever) will assume you meant to close it at the end of the page. I have occasionally seen news stories using italicized text and then forgot to include the closing tag, so the rest of the article was italicized, making it difficult to read.

Remember to close your elements.

HTML Structure

Here is a sample, extremely basic HTML page:

1
2
3
4
5
6
7
8
9
10
11
12

<html>
	<head>
		<title>Basic HTML Page</title>
	</head>
 
	<body>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
		<!--This is a comment about this paragraph.-->
		<p>Pellentesque ipsum urna, dictum vel, porttitor at, luctus a, arcu.</p>
		<p>Donec turpis. Duis molestie felis at magna. Etiam vitae lorem.</p>
	</body>
</html>

First of all, notice that all of the tags are lower-case and all close. This is referred to as semantic markup. That means it is written in a way that all browsers are sure to understand and not display incorrectly.

Second, the code is organized by tabs. This is not strictly necessary and is purely on a personal basis. You could even go with no spaces or tabs between elements (and places like Google do). However, good practice is to consistently organize your code so that it’s easy to find and change things after days or months of not looking at it. Plus, if you work on web sites with other people, it’s a good idea to come up with some standards for organization.

I personally use tabs because even though it looks like five spaces — good separation for the eye — it only takes one character for a tab, and thus makes a smaller file than if I used two spaces. And file size is something you need to care about for the internet.

Now, for specifics on the example.

The html element tells the browser what language it’s dealing with. There are more specifics you should include with it, but for now this will suffice.

The head element is where you include all of the things that affect the web page, but don’t actually show up in it. This would include links to external files for styling or scripts or for the title, as in this example.

The body element is where all of the display content goes. This is the actual web page, if you will. Inside the body are three paragraph elements which contain the text for the web page.

I also included a comment. Comments are for you to make notes on your coding, help organize, or to communicate between you and anyone else looking at the code. Comments don’t show up on the web page, so use them to your heart’s content. Start one with <!–– and end it with ––>

If you’re reading this via a feed, there are more pages on the web site. If you’re already on the web site, IGNORE THIS!
page 1 page 2 page 3 page 4 page 5 page 6

Jul 30.08

Filed under: This Site by ianswens

One Response to “On Making a Web Site – HTML / CSS Layout”

  1. May 26th, 2009

    john commented thusly:

    Very helpful. Just wanted to say thanks.

Leave a Reply

You must be logged in to post a comment.