Tutorials
The Bare Minimum Tutorial for Templates
To use my templates, all you need is a basic text editor: such as Notepad which is free with any version Windows, but I recommend a specialized editor.
This is a FREE download:Coffee Cup Web Design Software
This specialized editor will color all the special html code so you can tell the difference between your original content and the formatting tags.
Download a template package and unzip it. Open the index.htm file in your html editor. In the specialized program, the html tags will be highlighted in blue and enclosed in angle brackets <>. Comments are highlighted in green and will contain general instruction, comments do not get displayed to the browser. Notice that most tags contain 2 parts. The opening tag which contains the tag type and other attributes, and the closing tag which has the slash and tag type.
<div id="content">
<!--Content Begins Here -->
Your ideas to show in the browser.
<!-- Content Ends Here -->
</div>
<!--Content Begins Here -->
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In erat metus, viverra in, lobortis et, vestibulum ac, mauris.
</p>
<p> Quisque eu tellus vitae augue aliquet rutrum. Cras egestas. Praesent pede neque, suscipit id, suscipit sed, ullamcorper nec, libero. Integer quam purus, commodo pharetra, venenatis vel, egestas a, erat.
</p>
<!-- Content Ends Here -->
Save the your work and open the page in your browser. The paragraphs will automatically be separated by a blank line and that will make it easier for people to read your site.
Add Links
You can add links to your page by including an anchor tag.
<a href="filename.htm">Clickable Text Link</a>
The text in between the opening and closing tags is what is displayed to the browser. The href is the address that the link points to. The words that you click don't have to match the page address, but usually that helps.
Update Site Menu
To change the links in the navigation menu, you want to change the text where it says Page(#) (in both places) to a new page name. Then rename those files (page(#).htm) to the names that you put in the href spot. The first page of your site should be called "index" (not capitalized), as this is what the browser looks for when a domain name is entered.
<div id="menu">
<!--Begin Menu -->
<div class="nav"><a href="index.htm">Home</a></div>
<div class="nav"><a href="page2.htm">Page 2</a></div>
<div class="nav"><a href="page3.htm">Page 3</a></div>
<!--End Menu -->
</div>
Add Images
To add images, you will need an image tag.
<img src="images/mypicture.jpg" alt="My picture" />
The mypicture.jpg file is located in a folder called images. The "alt" value is what is displayed in the browser when images are disabled or when the file cannot be found. On some browsers when the mouse is over the image the alt text is displayed.
Add Tables
Tables are used for displaying information in rows and columns. You may want to sketch out your idea first and then create your table. Each space for information is called a cell. The most basic tables are organized by row and will need to have the same number of cells to make the columns line up. The next example is for a table with 2 rows and 3 columns.
<table border="1">
<tr>
<td>Row:1 Cell:1 </td><td>Row:1 Cell:2 </td><td>Row:1 Cell:3 </td>
</tr>
<tr>
<td>Row:2 Cell:1 </td><td>Row:2 Cell:2 </td><td>Row:2 Cell:3 </td>
</tr>
</table>
The tag td stands for "table data", and tr stands for "table row". I find it helpful to add the border at least while editing, to make sure all the data lines up correctly and to make sure the right number of cells are in each row. If you don't like the look of the table borders, you can change the number down to 0.
Congratulations! You've learned the absolute basics!
It's just that easy! You now have the absolute minimum you need to know to use my premade templates to create webpages! All you need now is the content!
Good Luck! If you have any problems or just want to show off your site - just send an email and make sure to add "Site Designs" to the subject line. There are a lot more tutorials if you ever want to expand your html knowledge. Have fun and Enjoy!