Using a standard template to create a simple Web site

• April 2, 2006
• James Skemp
• tutorials / guides

As stated in a previous article, there's a site, http://blog.html.it/layoutgala/, that offers free templates. Using these templates, you can easily create a site, so long as you have the content you need to fill the pages.

In this article, we'll be putting some content into one of these templates, Layout 34, but we can use the methods we discuss here on any of the templates.

First, you'll need content. If you don't have content, then you've got a bit of a problem :)

Second, you'll want to have an idea of what sections you'll need. If you've followed the above guide, then you probably have a really good indication of what sections you'll have. To these sections, you'll need to add a home page, a contact page, and possibly a site map, or search feature.

The home page should have links to all of your main areas, should discuss what the purpose of your site is, and etcetera. On the one hand, you'll want to make it both informational enough for people who have visited your site, but not a one-time read, since people may use it to get to your site in the future. A short number of 'news' items, for example, is definitely a plus.

Your contact page should contain whatever information you'd like to provide regarding how people can contact you, as well as information about who you are (to a lesser extent - a bio / about us page can be another page all-together).

The site map, or search page, should contain a way for people to find any content on your site. At the lowest level, the page should list the major areas and subareas of your site. Working towards more complexity, the site map can contain every page on your site, and finally the ability to search your content. For search, Google offers a free site search.

Getting back to Layout 34, make sure you've got a copy on your computer. You can save the html file to your desktop (Layout34.html is what I'll be using for a name), and open it using your favourite browser. Since the page is using very simple HTML, anyone can open the file up using only a browser.

Of course, if you've setup Apache or the like on your computer, than you can certainly put this HTML file in your Web folder - and, with more advanced techniques, you would have to.

Now that you've saved the file and opened it up using your browser, you can see what the template looks like with the basic text they've provided. We're going to clean that up by adding our own items.

First, open Notepad. Now, use Notepad to open up Layout34.html. If Word Wrap is on (under Format), turn it off.

You can now see the source of this page, which consists solely of HTML. If you're familiar with HTML, or you've read through "Just enough HTML to be dangerous", then at least some of this code is going to make sense. You see some <p> tags looking a number of lines down.

There's also a number of <div> tags, which are basically blocked containers for content. These have id attributes, which are basically unique identifiers. The id values are picked so as to provide the most information possible about what these 'containers' hold.

Starting off, the only thing we're going to worry about is the content within a couple of divs (<div>s).

First, we're going to find the footer div (<div id="footer"> ... </div>).

We're now going to replace the text within this with a short bit of contact information.

<p>Copyright 2006, <a href="mailto:[email protected]">Our Name</a>.</p>

Save the file, and reload the file in your browser. You'll notice that your text is now in the footer.

Now, we're going to remove the content from the 'extra' div (<div id="extra"> ... </div>). Just remove everything between the two divs (including the paragraph, <p>, tags). Save, and again refresh your browser. If you're using Internet Explorer you'll still see the block. We'll get rid of the block (since we don't want to use it, quite yet), by commenting it out.

To do this, you'll need to add <!-- before the div, and --> after the div.

<!--<div id="extra"></div>-->

You can use this technique for other things as well. Anything you comment out will not be rendered (typically), but will display in the source (which you can see by right clicking within your browser and selecting the appropriate menu item).

Now, we'll create our base navigation items, by finding the 'navigation' div. Remove everything within it and fill in your navigation structure. For example, if you wanted a navigation with the following items - About me, Contact me, My cat, My favourite books - you could do something like this;

<div id="navigation">
<p>About me</p>
<p>Contact me</p>
<p>My cat</p>
<p>My favourite books</p>
</div>

Again, save and refresh.

Now, we're going to change the header, by changing the content inside <h1> ... </h1> (Heading 1). Put whatever ('My site' for example). This should be unique to each page, unless you'll be placing your logo in this place.

Save and refresh.

Finally, clear out 'content' div, and fill in some new information. For this page, you could fill out whatever you wanted to display on your main page.

Now, find the title tag (<title> ... </title>) and put a unique title in this area. It should probably match your main heading. You cannot use any HTML within these tags - just plain text.

With that, you've successfully created your first page. All you need to do now is create additional pages (the other items in your navigation) by making a copy of this page, and changing the heading and title. You'll also need to add links to the navigation (see "Just enough HTML to be dangerous") so that all of your pages link up correctly.

• html