Learn how to create your own website using HTML and CSS

Adding site-wide features to your template file

Now the reason we created a template file is so that we can save ourselves work as we add more and more pages to our website. To do this we should add the common structure and features that we want on all pages in our site. Things such as navigation, headers, footers, logo/site title and other things of that nature.

We will have one main element inside our "body" element that will hold all the other elements. By putting one big box around all the other content but inside the body we will be able to adjust things such as how wide we want our content, if we want it centered on the page, etc.

We will do this with the "div" (<div> </div>) element. A "div" element is what is called a "block" level element. This means that by default it will start its own line when displayed, and be 100% as wide as its containing element. Anything after the div will have to start on a new line. "Inline" elements are elements that will not start a new line and will only be as wide as content they contain. You can adjust this behavior with CSS as you will see later.

Remember earlier when I said that tags have things called attributes that can allow some extra features. Well, lets learn about 2 now. You can define an attribute on any tag named "id". The "id" attribute is meant to give "one" element on the page a unique name. This means that only one element on a page should have a specific "id" value. This allows us to define CSS styles in our style-sheet that will apply to only that element and its contents.

If you want to define styles that apply to more than one element on the same page you use the "class" attribute. You can apply the same "class" value to numerous elements on the same page. Then from your CSS you can define style properties that will get applied to all those elements.

Lets go ahead and layout the rest of our template so we can look at the "id" attribute in action.

Notice the way that I have indented the different elements on the page. This helps you to be able to distinguish where the elements are in relation to each other and is a common practice for all development and programming processes. When you put content in an element, whether it is another element or actual content, indent it with a tab or 2 or 4 spaces. This allows you to more easily distinguish elements placement within other elements.

Now looking at what we've done so far, we have created a "div" element within the "body" element. We have given this div and id attribute of "mainWrapper". You can develop your own naming conventions as you wish later, but for this tutorial just follow with me. Within the "mainWrapper" element we have 3 more elements; "headerWrapper", "contentWrapper" and "footerWrapper". Within the "headerWrapper" element we have 2 more div elements; "siteTitle" and "navigation".

The "h1" tag inside the "siteTitle" element is a "heading" tag. Heading tags come in 6 sizes, 1 - 6, with 1 being the largest and most prominent and 6 being the smallest. The heading tag is a block level element that is meant to define the text it contains as, you guessed it, a heading. By default text inside the heading element is displayed with bold text in the size defined for the number following the "h", i.e. h1, h2, h3, h4, h5, h6. In our case that text will be "My Very Own Website" in the largest heading.

Now take a look inside the "navigation" element. What's going on in there? In addition to headings, in HTML you can create paragraphs, forms, images and lists to name a few things. There are 3 basic types of lists; "un-ordered" (ul), "ordered" (ol) and "definition" (dl) lists. Un-ordered lists are commonly known as bullet lists, displaying a small circle next to each item. Ordered lists display a number next to each item, and definition lists use a format of definition term followed by a definition description.

With ordered and unordered lists, you create the list container with the appropriate tag to tell the browser a list is comming. You then define each item in the list with the "list item" (li) tag. Line items are also a block level elements, meaning they will each be displayed on there own line. So in the "navigation" element we have created an un-ordered list with the id of "mainNav" and then defined some list items (li) for each of the links we want to create.

Oh yeah! Thats the next thing in there, the links! You knew it looked complicated. Each line item element in our un-ordered list contains an anchor (a) tag. The anchor tag is the back bone behind turning a webpage into a web site, as well as what puts the "web" in world wide web. For the anchor tag to link to another page it must contain one attribute, "href", which value will be the web address or file name that it links to. Then any text with the element (ie. between <a> and </a>) will be the link people click on. Now you know how all those links get on those web pages.

Moving down the page we see that our "contentWrapper" element is empty, there's nothing but space in there. This is where our "web page" specific content will go. Our footer element is where we normally stick copyright info and other such junk, so thats what we did. The "©" you see there is what's called an HTML "entity". Basically it is a way to tell the browser to display characters that aren't on our keyboard, in this case the copyright symbol.

Whew, that was allot of info. But we have covered a whole lot of territory and accomplished the majority of the footwork for our site. Re-save your template file now!