SECTIONAL HTML CODE TEMPLATE #3

HTML CODE FOR TEMPLATE #3

View Red Sections to Comprehend Code:

Use the code below for VIEWING ONLY to gain an understanding of the HTML code and how it works. Each major section of the code is labeled in RED to help you make modifications in your actual Web page's code. Learning to read HTML is simple when you're able to view it after it has been created (with a little guidance!)

***** Begin Template HTML Code Below *******

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Template #2</title> (Title is what appears in the search engines to identify your web site for searchers.)

<meta name="description"
content="Your site description here. (Maximum 2 sentences.">
(Description is a two - three sentence synopsis of your site for the search engines.)

<meta name="keywords"
content="your, targeted, keywords, here"> (Keywords help the search engines to find your site and place it under the correct search terms. You can add many keywords about your site, but make sure they're targeted and separated by commas.)

</head> (End of "Head" tag)

<body
style="background-image: url(back-066.gif); color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
alink="#6600cc" link="#000099" vlink="#993300"> (Begin body of page. Notice this page uses a background image. This is somewhat different than a regular image. The image here is the actual background of the entire web page. In this template, it's gray with squares. Here are basic instructions for inserting the background into your web page HTML code. Keep this information handy because we will be using many different backgrounds in future templates....
On the template web page provided, hold your mouse over the background image (gray area that contains repetitive squares) and RIGHT click your mouse. A drop down menu should appear with the option "Save Background As". Save this background file (back-066.gif) to your hard drive in the same folder where your template file is located. Transfer the background file to your web site along with the template file, keeping both in the same folder. The background is already included in this template's HTML code, so it should show up on your template once transferred to the Internet.)

<center>
<table
style="background-color: rgb(183, 184, 163); width: 650px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="2">
<tbody>
<tr>
<td
style="background-color: rgb(255, 255, 153); text-align: center; font-family: Helvetica,Arial,sans-serif;">
<div style="text-align: center;"> </div>
<div style="text-align: left; background-color: rgb(0, 0, 153);">
<div style="text-align: center;"><big><big><big><big>Your Compelling 
Headline
Here!</big></big></big></big> (Type Your Big Heading Here)

<big><big><big><big></big></big></big></big></div>
<big><big><big><big> </big></big></big></big><big><big><big><big></big></big></big></big></div>
<big><big><big><big> </big></big></big></big><big><big><big><big></big></big></big></big></td>
</tr>
</tbody>
</table>
<table
style="background-color: rgb(255, 255, 255); width: 650px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>

(Begin inserting sales copy below. Several image files are included along with one mini-table for a testimonial, but you can copy and paste more images and tables if needed.)
<td style="vertical-align: top; text-align: center;"><big><big>TYPE
YOUR SALES CONTENT
HERE 
 
</big></big>
<div style="text-align: left;"><big>

(First Image)
<img
alt="Place Your Image or Photo Here" src="imageplacement.jpg"
style="width: 136px; height: 107px;" align="right" hspace="5"
vspace="5">Build an effective sales presentation with this
layout.   If you have a single product to sell, this type of
page works great.  You can build a long, focused presentation and
then close at the end of the page with an option to buy. 
 
Break up the reading with relevant clip art, photos of your product,
photos of previous customers with testimonials, etc.  Keep your
paragraphs short and concise... 
 
<big>..And
Make Lots of Subheadings in bold print and possibly in 
a different color!</big> (like
this one) 
 
<big>More sales copy here....</big> 
 
 
 
 
 
</big>

(Begin testimonial mini-table here.)
<table
style="background-color: rgb(255, 255, 204); margin-left: auto; margin-right: auto; width: 400px; text-align: left;"
border="2" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"> 
Customer Testimonial here... 
 
"Brief
customer testimonial in quotes here.  You can also insert a photo
of your customer if available." 
</td>
</tr>
</tbody>
</table>(End testimonial mini-table here.)

<big> 
 
 
 
 
 
</big><big>
(Second Image)
<img
alt="Place Your Image or Photo Here" src="imageplacement.jpg"
style="width: 136px; height: 107px;" align="left" hspace="5" vspace="5"></big><big> 
More sales copy.  
 
 
 
 
 
 
 
 
 
</big>
<div style="text-align: center;"><big><big><big
style="color: rgb(255, 0, 0);">

(Order Information Below.)
Order
Instructions or Payment Buttons Here</big></big></big> 
<big></big></div>
<big> 
 
 
 
  </big><big></big><big><big></big></big></div>
</td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;">Your
Company Name Here 
Address 

(Contact Us Information Below)
Phone 
<a href="mailto:editor@webmastercourse.com">Contact Us</a> 
</td>
</tr>
</tbody>
</table></center>
 
 
</body>
</html>

***** End Template HTML Code Here *****