How to Make a Website, Part 3

Polishing the Appearance

When looking at the last saved progress, there is obviously room for improvement.
For example, there is a bit too much space between the h1 header and the horizontal rule: h1 header title

It could also use a bit color, and enlarging the font size for the header might also make it look better.

We can easily change all that by adding a class for the already existing h1 element. Since the element already exists, there is no need for the period in front of the class, so it would look like this:

h1 {

}

Now you just need to fill in the parameters you want, for example:

h1 {
margin: 30px 0 0 0; Adding space only to the top.
color: #330000; Same color as the footer background.
font-size: 30px;
}

..and this is the result: Preview 9

Now let's make those links in the menu look a bit more real. Placeholder titles and links are replaced, as follows:

example 10


<a href="index.html" class="menu">Home</a> &#149;
<a href="about.html" class="menu">About</a> &#149;
<a href="projects.html" class="menu">Projects</a> &#149;
<a href="resources.html" class="menu">Resources</a> &#149;
<a href="contact.html" class="menu">Contact</a>

The default home page should always be called index.html. The page extension can vary (.html, .php, .asp, etc.), but the name is always index.

The other pages in the menu can be named according to your website contents, but it is recommendable to always give the same or similar titles and page names, except for the index.html.
That's why the second page is called About and the link is called about.html
The third page is Projects and the link to it, or the file name, is called projects.html

If your page titles consists of more than one word, you can apply the same method, but remember these 3 important rules:

1. File names should always be lowercase.
2. Individual words should be connected by a dash - or an underscore _
without any spaces in between.
3. File names shouldn't be too long.

After saving your document, it should look like this, or similar, depending on what exactly you named your pages.

In order to have all the 5 pages, you can simply resave the index.html as the other 4 files, but before you do that, there is one more thing that has to be done.

Select the complete code located between the opening <style type="text/css"> and the closing </style> tags, copy it, and then paste it into a blank notepad file. Save it as styles.css and put it in your css folder. The opening and closing style tags should not be part of the style.css file.

Now remove the entire style sheet, including the opening and closing tags, from the page head of index.html. That is this portion of code (all of it):

example 11

<style type="text/css">
body {
background: #ffffff;
color: #000000;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
margin: 10px;
}

a {
color:#336633;
text-decoration:none;
}

a:hover {
color:#669966;
text-decoration:underline;
}

.container{
width: 980px;
padding: 10px;
border: 1px solid #cccccc;
}

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

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

h1 {
margin: 30px 0 0 0;
color: #330000;
font-size: 30px;
}
</style>

All the declarations in the style sheet are still needed and will be used, but we are going to apply the external css file instead. From now on, if you need to make any changes to the style sheet, you only need to alter the one file, called styles.css, and it will affect the entire website.

In place of the code you just deleted, place this instead:

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

example 12

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My First Page</title>
<meta name="description" content="My first page description" />
<meta name="keywords" content="keyword1, keyword2, keyword2, keyword4, keyword5" />

<link rel="stylesheet" type="text/css" href="css/styles.css" />

</head>

Your index.html is now ready to be duplicated and re-saved as "about.html", "projects.html", and so on. Then you can edit the contents of each of those files by replacing the Lorem Ipsum text with your own text and perhaps photos.

The sample website is ready: Preview 10