What to Edit in the Template HTML

If you wish to edit the template HTML directly using a text editor like Windows Notepad or an HTML editor like HTML Kit then you'll be happy to know that I've specially set up all my free website templates to make your life a whole lot easier.

What you're going to do here is simply use the search function to jump to some keywords that I've planted in comment lines in the HTML source code. From there you'll just delete some of the code or filler text and then add some of your own. Then you'll save the file and preview the changes in your web browser. That's it. (Believe me, it's not rocket science...)

In all of the following examples of source code, the parts highlighted in red will indicate the parts you can safely modify in the index.htm file.

Okay let's do it to it...


ADDING A TITLE

You won't need the Search function to find this. All you have to do is:

1. Open index.htm in any text editor (like Windows Notepad).
2. Right near the very top of the HTML source code you will see this line:
   
   
   
   <title>YOUR WEB PAGE TITLE GOES HERE</title>
   
   
   
   
3. Delete YOUR WEB PAGE TITLE GOES HERE and type in the text you wish to apply to the web browser title bar when your web page is currently loaded.

For a more detailed tutorial about the HTML <title>...</title> tags, please see Basic HTML Web Page Structure.

INSERTING A TEXT LOGO

The best way to insert your logo is to use a graphics editor to directly modify the header background graphic (add-logo.psd, add-logo.pspimage or add-logo.jpg). Please see Adding Your Logo to the Template for more information.

Alternatively you can use the following steps to quickly insert a text logo using the template HTML code:

1. Open index.htm in any text editor (like Windows Notepad).
2. Use the Search function to find the word "Logo". (In Notepad, click on Edit » Find... [Windows XP] OR Search » Find... [Windows 98] ). This will take you to the following source code:
   
   
   
   <!-- ============ Logo ============== -->
<td style="background: url('temp-header-bg.jpg') no-repeat;" width="100%" align="left"><div style="display: table; margin-left: 20px; margin-top: 20px;">&nbsp;</div>
</td>
   
   
   
   
3. Delete temp-header-bg.jpg and in its place type in add-logo.jpg
4. Delete   and in its place type in your logo text.

NOTE: Your template may use temp-header-bg.gif instead of temp-header-bg.jpg. In this case, delete temp-header-bg.gif and in its place type in add-logo.gif

The default positioning of your text logo may be unsuitable to your needs. Please see Aligning your text logo for further instructions.

You can also change the typeface, size and color of your logo text using other HTML elements. For more information, please refer to the following page(s):

HTML Font Styles & Codes
HTML Font Size Codes
HTML Font Color Codes
Bold/Italic Codes

ALIGNING YOUR TEXT LOGO

After inserting your text logo, you can easily move it left, right, up or down by doing the following:

1. Open index.htm in any text editor (like Windows Notepad).
2. Use the Search function to find the word "Logo". (In Notepad, click on Edit » Find... [Windows XP] OR Search » Find... [Windows 98] ). This will take you to the following source code:
   
   
   
   <!-- ============ Logo ============== -->
<td style="background: url('add-logo.jpg') no-repeat;" width="100%" align="left"><div style="display: table; margin-left: 20px; margin-top: 20px;">&nbsp;</div>
</td>
   
   
   
   The two CSS properties margin-left and margin-top and their values control the horizontal and vertical positioning of your text logo. The default for both these values in most of my free website templates is 20px. Effectively this means that your text logo is resting 20 pixels from the left border and 20 pixels from the top border of the Header table cell.
   
   
   1. MOVING LEFT AND RIGHT
      
      Increase the value beside the margin-left property to push your text logo further away from the left border (e.g. margin-left: 35px;). Conversely, decrease this value to push your text logo closer to the left border (e.g. margin-left: 10px;). A value of 0px will align your text logo flush with the left border.
      
      
   2. MOVING UP AND DOWN
      
      Increase the value beside the margin-top property to move your text logo down(e.g. margin-top: 35px;). Conversely, decrease this value to move your text logo up (e.g. margin-top: 10px;). A value of 0px will align your text logo flush with the top border.
   
   You'll probably have to experiment with a few different values to finally position it to your liking.

PAGE HEADING

The word "Introduction" is the default heading to your web page. To edit this in the HTML source code, do the following:

1. Open index.htm in any text editor (like Windows Notepad).
2. Use the Search function to find the phrase "Page Heading". (In Notepad, click on Edit » Find... [Windows XP] OR Search » Find... [Windows 98] ).
   
   This will take you to the following source code:
   
   
   
   <!-- ============ Page Heading ============== -->
<h1 class="HeadingStyle">Introduction</h1>
   
   
   
   
3. Delete Introduction and type in the text you wish to serve as your web page heading.

For more information about using HTML to create web page headings, please refer to Headings and Subheadings.


EDITING MENU LINKS

Your template will display one or more groups of links which are meant to lead to other pages of your website. These groups of links may run horizontally across the page displayed on top of a decorative background (the navigation bar menu) or may run vertically in either the left or right column of your template (the site menu).

The best way to locate any and all of these links in the HTML source code is to do a search for the default link text. This default link text may vary according to the style of template you downloaded (either personal or business). However all Iron Spider templates contain at least a Home link which we will presently use to serve as an example on editing menu links.

To locate the Home link:

1. Open index.htm in any text editor (like Windows Notepad).
2. Use the Search function to find the word "home". (In Notepad, click on Edit » Find... [Windows XP] OR Search » Find... [Windows 98] ).
   
   This will take you to the following source code:
   
   
   
   <a href="#">home</a>
   
   
   
   You can safely edit the parts highlighted in red. If you don't want to keep the default link text (home) then delete it and type in your own. The # sign should be replaced with a valid URL that will take your visitors to your website's home page.

For more information about using HTML to create hyperlinks, please refer to the following pages:

Creating Hyperlinks
Relative Addressing

EDITING DHTML MENU LINKS

This is a little more complex than editing menu links but you certainly don't have to be an Einstein to pull it off. Currently, nine Iron Spider templates contain DHTML menus or what I call '3D button menus'. This includes all those in the Free Business Website Templates 2 series as well as #1 and #7 in the Free Professional Website Templates series. The menus in these templates use a combination of CSS, Javascript and HTML to create a 3D button effect when you hover your mouse over the link.

To locate and edit these links in the HTML source code, do the following:

1. Open index.htm in any text editor (like Windows Notepad).
2. Use the Search function to find the phrase "BEGIN 3D BUTTON". (In Notepad, click on Edit » Find... [Windows XP] OR Search » Find... [Windows 98] ).
   
   This will take you to the following source code:
   
   
   
   <!-- ============ BEGIN 3D BUTTON MENU ============== -->
<center><table border="0" cellspacing="5" cellpadding="0" style="width: 100%;">

<tr><td class="MenuOff" onmouseover="this.className='MenuOn';" onmouseout="this.className='MenuOff';" onclick="window.location.href = '#';" onmousedown="this.className='MenuClick';"><a href="#">Home</a></td></tr>

<tr><td class="MenuOff" onmouseover="this.className='MenuOn';" onmouseout="this.className='MenuOff';" onclick="window.location.href = '#';" onmousedown="this.className='MenuClick';"><a href="#">Products</a></td></tr>
   
   
   
   In the example above (taken from template #25), the source code for the first two links in the menu is shown. Each block of code beginning with <tr><td class="MenuOff"... (etc) represents one button link in the menu.
   
   You can safely edit the parts highlighted in red. If you don't want to keep the default link text (Home or Products) then delete it and type in your own.
   
   As for the URL, note carefully that, unlike other menu link code (see above), there are two instances of the # sign for each link. Each of these must be replaced with the same valid URL leading to the web page corresponding with the link text.
   
   The example below shows the source code properly edited to create two functional links, a home link leading to index.htm and a Products link leading to products.htm
   
   
   
   <!-- ============ BEGIN 3D BUTTON MENU ============== -->
<center><table border="0" cellspacing="5" cellpadding="0" style="width: 100%;">

<tr><td class="MenuOff" onmouseover="this.className='MenuOn';" onmouseout="this.className='MenuOff';" onclick="window.location.href = 'index.htm';" onmousedown="this.className='MenuClick';"><a href="index.htm">Home</a></td></tr>

<tr><td class="MenuOff" onmouseover="this.className='MenuOn';" onmouseout="this.className='MenuOff';" onclick="window.location.href = 'products.htm';" onmousedown="this.className='MenuClick';"><a href="products.htm">Products</a></td></tr>
   
   
   
   

For more information, please refer to the following page(s):

Making a Website
Creating Hyperlinks
Relative Addressing

ADDING CONTENT

The meat-and-potatoes of your web page will go in the Content column. To locate this section in the HTML source code, do the following:

1. Open index.htm in any text editor (like Windows Notepad).
2. Use the Search function to find the phrase "Begin Content". (In Notepad, click on Edit » Find... [Windows XP] OR Search » Find... [Windows 98] ).
   
   This will take you to the following source code:
   
   
   
   <!-- ============ Begin Content ============== -->

<p>This is the content area of your web page. For now it contains this filler text to help you visualize what your web page will look like when it's complete. Replace this text with your own text (and graphics). Here's an example of the <a href="#">link text color</a> in the content area.

<p>To find this section in the HTML source code, open this page in any text editor or HTML editor and do a search for the phrase "Begin Content". If you're using Internet Explorer, then you can open the HTML source code in Notepad by simply clicking on <b>View &#187; Source</b>.

<!-- ============ End Content ============== -->
   
   
   
   
3. Delete all the filler text (e.g., everything highlighted in red in the example above) and, in its place, type in the text you wish to display on your web page. Type in a <p> tag whenever you wish to begin a new paragraph. You can also add some graphics, hyperlinks, or whatever you like.

For more information, please refer to the following page(s):

Making Paragraphs
HTML Font Styles & Codes
HTML Font Size Codes
HTML Font Color Codes
Bold/Italic Codes
Creating Hyperlinks
Making Lists
Using Graphics