SECTIONAL HTML CODE TEMPLATE #2

HTML CODE FOR TEMPLATE #2

View 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="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
alink="#ffffff" link="#ffffff" vlink="#ffffff"> (Begin "body" of web page - visible online.)

(Begin Top Table)

<table
style="background-color: rgb(183, 184, 163); width: 800px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="2">
<tbody>
<tr>

(Top table contains another two-column table within. The heading and logo image can be inserted in the left column. There are three links in the right column which can be customized.)

(Begin first inner table.)
<td
style="text-align: center; font-family: Helvetica,Arial,sans-serif;">
<div style="text-align: left;"><big><big><big><big><img
alt="Logo Image Here" src="imageplacement.jpg"
style="width: 136px; height: 107px;" align="middle" hspace="10"
vspace="10">Company Name 
</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>

(Begin second inner table. Customize these links to change the three links at the top right corner of the web page.)
<td
style="vertical-align: top; width: 125px; text-align: center; background-color: rgb(153, 0, 0);"> 
<a href="http://www.webmastercourse.com/">About Us</a> 
<a href="http://www.webmastercourse.com/">View Cart </a> 
<a href="http://www.webmastercourse.com/">Contact Us</a> 
 
</td>
</tr>
</tbody>
</table> (End entire top table.)

(Begin next table below. This table is divided into two cells (or columns) which contain the links in the left column and the content of your web page in the right column. Notice the image inserted below.)
<table
style="background-color: rgb(255, 255, 255); width: 800px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td
style="vertical-align: top; width: 100px; background-color: rgb(153, 0, 0);">LINK
SECTION A 
 (End Table Settings.)

(Begin Left Column Links Menu.)
<a href="http://www.webmastercourse.com/">LINK #1</a> 
<a href="http://www.webmastercourse.com/">LINK #2</a> 
<a href="http://www.webmastercourse.com/">LINK #3</a> 
<a href="http://www.webmastercourse.com/">LINK #4</a> 
<a
href="http://www.webmastercourse.com/">LINK #5</a> 
 
LINK
SECTION B 
 
<a href="http://www.webmastercourse.com/">LINK #6</a> 
<a href="http://www.webmastercourse.com/">LINK #7</a> 
<a href="http://www.webmastercourse.com/">LINK #8</a> 
<a href="http://www.webmastercourse.com/">LINK #9</a> 
<a
href="http://www.webmastercourse.com/">LINK #10</a> 
 
LINK
SECTION C 
 
<a href="http://www.webmastercourse.com/">LINK #11</a> 
<a href="http://www.webmastercourse.com/">LINK #12</a> 
<a href="http://www.webmastercourse.com/">LINK #13</a> 
<a href="http://www.webmastercourse.com/">LINK #14</a> 
<a href="http://www.webmastercourse.com/">LINK #15</a></td>
(End Links Menu.)

(Begin Content Table.)
<td style="vertical-align: top; text-align: center;"><big><big>TYPE
YOUR CONTENT
HERE 
 
</big></big>
<div style="text-align: left;"><big>

(Begin image code. Replace the image name with your image name. When transferring your web page
to the Internet, be sure to transfer the image into the same folder as the web page where it's
located. Otherwise you'll have a broken graphic error on your web site.)
<img
alt="Place Your Image or Photo Here" src="imageplacement.jpg"
style="width: 136px; height: 107px;" align="right" hspace="5"
vspace="5"> (End image code.)

(Begin content.)
Type
your web page content here.  Your home page (or main page)
should have an introduction or sales presentation.  Additional
pages can describe individual products and services or provide useful
articles surrounding your Web site's theme. 
 
You
can
always expand the link menu or create submenus to add
additional content to your Web site. 
 
This
template contains several tables.
 The top table has another table within that is divided into two
columns.  The right column contains the  
The next table is divided into two sections called "cells."
 One cell is the same color as the heading table, the other
cell (this one) is white.  White should always be your first
choice for extensive reading areas. 
 
Note:
 Images and
text can be added to any of the tables. <big></big></big><big><big></big></big></div>
</td>
</tr>
<tr>
<td style="vertical-align: top;"> 
</td> (End second table.)

(Begin final table. This is where the company name and contact information is located at the bottom of the web page.)
<td style="vertical-align: top; text-align: center;">Your
Company Name Here 
Address 
Phone 

(Begin link code for "Contact Us" at the bottom of the page.)
<a href="mailto:editor@webmastercourse.com">Contact Us</a>
(End link code.)

 
</td>
</tr>
</tbody>
</table>
 
</body>
</html>

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