Templates Part One: Using Web Standards
This is a brief tutorial on how to use my templates to make your website using web standards. If you have never used HTML before, you may want to start at another site like HTML Goodies or Lissa Explains, although I will try to make this as simple as possible.
Each template comes with a style sheet, also known as a cascading style sheet or CSS. What this means for you is that your content will look pretty when you use the correct HTML tags. Basically the style sheet tells the HTML what to look like in terms of color, font, etc. I have already styled the tags I am about to go over, but there are many more tags you can style once you learn how.
1. Headers
There are six tags that create headers: <h1> through <h6>. In my templates, I mostly use <h1> and sometimes <h2>. This is the correct standard of formatting titles (although some think that <h1> should only be used once per page). Whenever you want to use a heading, enclose the text within the header tags:
<h1>Heading</h1>
<h2>Sub-Heading</h2>
Even if all the headings are styled to look the same way, it is correct to use them in this way. Usually I will use <h1> in the content area and <h2> in the navigation area. Remember to always close your tags.
2. Paragraphs
Surround every paragraph of text within the <p> and </p> tags as this is the correct way to mark up your site for web standards. Remember to always close your tags.
<p>This is an example paragraph.</p>
<p>This is a second example paragraph.</p>
3. Unordered/Ordered Lists
When you want to make a list or your navigation menu, an ordered or unordered list is how to do it. Unordered lists are what I style in my templates. To create your own lists, use this basic mark up. Remember to always close your tags.
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
You can also make links within the list:
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
Or make an ordered list that will number the items automatically:
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
4. Avatar Floats
I have also included a way to put your text next to your avatar in most of my templates, thanks to float tutorial. In the img tag, specify "avatar" as the image class, like so:
<img src="avatar.gif" class="avatar"> <p>Some text that will appear next to the avatar and continue below it. </p>
If you do not have a lot of text next to the image, you should use a clearing break, otherwise the new content will appear next to the avatar and can look freaky sometimes. The clearing break created in the style sheet looks like this:
<br class="clearboth" />
Now that you know the proper coding, it's time to add your content. Continue to part two.