How to Make a Website, Part 2

The Page Body

example 6

<body>
<div class="container">

</div>
</body>

We will now work on the page body, which is, as explained in the first part, located between the opening <body> and the closing </body> tag.

A good website has a consistent layout and theme, which is achieved through a combination of things: style sheets which are uniform, but the page header, menu and footer should also be consequent. It makes a website more user-friendly, which is extremely important, unless it is your site's objective to be confusing ("Puzzle your way through our site").

The first new addition is the <div> box we called "container" in our style sheet, so since it is the container for the entire page, the opening code for that should be placed right after the opening <body> tag, and the closing </div> tag should be placed right before the closing body tag. See example 6 above.

Saving Progress & File Structure

At this point you can also save the progress you made in your notepad text file. Save it in a folder designated for this project, called "My Website" or whatever you would like. It should be saved as index.html, which means, when you are saving it, change the extension from .txt to .html. As a coding option select UTF-8.

If you have problems with this step, you can also change the file extension after you have saved the file. It is important that it is called index.html when you are finished.

Now go to your folder. Inside should be only the 1 file you just saved. Create a new folder and call it "images" (spelled lowercase!), and another new folder called "css" (also spelled lowercase). Both folders should be in the same directory as your index.html file.

Don't close your index.html file, if it is still open in notepad. If you accidentally closed it, then right-click the index.html in your folder and choose "open with" and then select/find notepad.

The Header

Now we are continuing with the page building.
Let's create something simple with a clean, fresh look. Minimalistic is often considered both "clean" and "fresh", and since it also means that we won't be using many graphics, it sounds about right for a first website. You can easily add on graphics at a later point.

For now we'll create a header consisting of a logo/image, with the title next to it, and a horizontal rule underneath both elements, visually separating it from the rest of the page.

Here is a simple logo image that you can use now while you are learning. You can later replace this with your own logo or photo.

Click here to download the sample logo and place it into the previously created "images" folder.
The image size is 180x150 pixels, meaning it's 180 pixels wide and 150 pixels tall. You can find that out about any image file by right-clicking it and looking at its properties.
It is important to know the correct size, as it should be entered in the image code:

Now we will fill in the necessary information:

The title is entered after the image code. Since the title is the most important text in the page, we will make it a "Header 1" or "primary header" which is in html code written like this:
<h1>My Website Title</h1>
As you can see, there is again an opening tag in front of the text, and a closing tag immediately after the text.

Next we add the code for a horizontal rule, which looks like this: <hr/>

Your <body> to </body> code should now look like this:

example 7

<body>
<div class="container">
<img src="images/website-logo.jpg" width="180" height="150" alt="Image Title Goes Here" title="Image Title Goes Here" />
<h1>My Website Title</h1>
<hr/>

</div>
</body>

By simply placing the image tag, the h1 header, and the horizontal rule into the body we have all 3 elements visibly in the page, but it doesn't really look good yet: Preview 1

However, if we add a little piece of code to the image code, things will shift:

Old image code: <img src="images/website-logo.jpg" width="180" height="150" alt="Image Title Goes Here" title="Image Title Goes Here" />

New image code: <img src="images/website-logo.jpg" width="180" height="150" alt="Image Title Goes Here" title="Image Title Goes Here" style="float: left;" />

Let's see what we have now: Preview 2

The menu will consist of simple text links, which can later be pepped up with some CSS. For now, what we want is to have the menu in the right place and it should be spread out nicely.
A html code for a link looks like this: <a href="somepage.html">Link Title</a>
If we place several such links next to each other, it won't look very nice:

Link 1 Title Link 2 Title Link 3 Title Link 4 Title Link 5 Title

...so we need to add something. Some people add a bunch of spaces, which in html translates as lots of   next to each other. That is not a very elegant solution, and it takes only a little bit of css to make it look very decent, while still being clean. We'll assign a new css class called "menu", for simplicity's sake, especially for the menu links. Since we want to affect each link with this class and not just an overall container holding all the links, the css looks a bit different.

a.menu {
font-size: 17px;
padding: 0 10px 0 10px;
}

As you can see the class looks quite similar to the class for a regular link, with the addition of .menu after the a. All the parameters will make the menu links appear different than any other links within the page.

Now, add the menu class to your style sheet, so after the container class, and add the following code after the <hr/> horizontal rule in the page body:

<a href="somepage.html" class="menu">Link Title 1</a>
<a href="somepage.html" class="menu">Link Title 2</a>
<a href="somepage.html" class="menu">Link Title 3</a>
<a href="somepage.html" class="menu">Link Title 4</a>
<a href="somepage.html" class="menu">Link Title 5</a>

Now you should have something like this: Preview 3

You can also add complementary graphical separators between the individual links, and all in html, without any images.
Here are a few examples: • ♠ ♣ ♦ ♥ ♀ ♂ ♩ ♪ ♬

Using the bullet symbols, the menu code would look like this:

<a href="somepage.html" class="menu">Link Title 1</a> 
<a href="somepage.html" class="menu">Link Title 2</a> 
<a href="somepage.html" class="menu">Link Title 3</a> 
<a href="somepage.html" class="menu">Link Title 4</a> 
<a href="somepage.html" class="menu">Link Title 5</a>

...and the page itself like this: Preview 4

You can do a lot more with the menu, but this will suffice for this first attempt. So, the menu is finished, and the <body> to </body> code now looks like this:

example 8

<body>
<div class="container">
<img src="images/website-logo.jpg" width="180" height="150" alt="Image Title Goes Here" title="Image Title Goes Here" />
<h1>My Website Title</h1>
<hr/>
<a href="somepage.html" class="menu">Link Title 1</a> &#149;
<a href="somepage.html" class="menu">Link Title 2</a> &#149;
<a href="somepage.html" class="menu">Link Title 3</a> &#149;
<a href="somepage.html" class="menu">Link Title 4</a> &#149;
<a href="somepage.html" class="menu">Link Title 5</a>

</div>
</body>

Lorem Ipsum

Unless you have all your site text ready and waiting, it helps to add a large bulk of text and see how it holds up in the existing layout. That's where the famous "Lorem Ipsum" comes into place. The Lorem Ipsum text looks like Latin and is based on it too, but it actually doesn't mean anything.

You can find out more about the text and its history at Wikipedia.

To grab some of that Ipsum for your web page, click here, copy as much as you need and then paste it in your page, after the code for the navigation menu.

Here is an example of the previous page with some added text: Preview 5

The first thing you will notice is that there are no breaks or paragraphs of any sort, even if the text you pasted seems to have them. You will have to add these line breaks manually, using <br/>
Start by adding a couple of line breaks between the navigation menu and the text, then continue and add some within the Lorem Ipsum text as well.

The sample page now looks like this: Preview 6

If you would like, you can push the h1 header, now located at the very top, a bit further down, which would push the entire contents as well.

After adding <br/> three times between the image code and the h1 header, the sample page now looks like this: Preview 7

The Footer

Like the header, the footer is another constant part of a website. Here you can add additional links, if needed, or simply a copyright notice. In this example we will add a copyright note inside a CSS container for looks.

A classic copyright note says something like Copyright © 2009 YourSiteName, All Rights Reserved.
If you simply copy and past this text, your page would look ok, but your html code wouldn't be valid anymore, and the reason for that is the © symbol.
What you need to write instead is this: Copyright © 2009 YourSiteName, All Rights Reserved. and all is good again, valid XHTML through and through.

Since that looks kind of boring, we will spice it up a bit. Add the following code around your footer text:

example 9

<div class="footer">
Copyright &copy; 2009 YourSiteName, All Rights Reserved.
</div>

You know what this means, right? Now we have to create the .footer class and add it to the style sheet. Let's try something like this:

.footer{
background: #330000;
color: #ffffff;
font-size: 11px;
text-align: center;
padding: 10px;
margin: 15px 0 0 0;
}

So, let's see what the page looks like now: Preview 8
That looks pretty good!

Now let's make it look even better..

Next: How to Make a Website, Part 3

Save this Page for Later:

Select your language

Tips & Articles Search

Sponsor this Article

Advertise your website, business or product page on the "How to Make a Website, Part 2" page and help support the free tips website!

Computers & Web

TopTipSpot