Try It! Exposure to HTML and Building a Template
What will the page look like when finished?
Below is the code for your first page. This template is a Table Formatted template. Tables on a web page are similar to tables in text editors like MS Word or any other Rich Text Editor. It will work fine for starting a website. As your company and your site grow you will find the necessary technical elements to enhance the site. It's better to start small rather than try and learn everything before publishing a site.
Step 1
Copy and paste the code below into Notepad (or other text editor). Select all the text with your mouse or click in the box and press CTRL A to select all, then CTRL C to copy. Go to your Notepad program and press CTRL V to paste. Then save the file on your computer with the html extension. For example: homepage.htm
Step 2
To view the page, open up your favorite web browser and click on the menu item FILE then OPEN and select the file you just created.
After opening you will notice that the header background graphic is missing.
Step 3
What you'll need to do is RIGHT-CLICK over the image below and then click SAVE PICTURE AS... to the same folder location as the file homepage.htm.
The image will be full sized after saving.
Step 4
Reopen the page and the purple header will show.
Step 5 - Changing Header
Open up your Notepad program and then click FILE/OPEN and select your web page file, homepage.htm
Look in the code and locate the text rtn_header_purple.jpg. Change purple to red so it looks like this rtn_header_red.jpg.
Save the red header graphic in the same fashion as before and the red header will now be showing.
Step 6 - Changing Cell Background Colors
But what about the rest of the colors? They don't match. It is now necessary to change the hexadecimal value for the background color of the associated table-cells. So what we will be doing is changing the left-margin-table-cell-background-color and the footer-table-cell-background-color.
First locate the hexadecimal color values in the code by opening up your web page with notepad.
For the left margin look for this line of code.
<td width="200" style="padding-left: 10px; padding-top: 10px" align="left" valign="top" bgcolor="#070637">Text in Cell</td>
<td> is a tag that represents the opening of a table cell and it must be closed like this </td>. Also we can style the table cell with width, padding, align, valign (vertical alignment) and finally bgcolor.
bgcolor holds hexadecimal color value. It will always start with # and will be followed by a 6 digit number that represents a specific color. Search for HTML Colors for different hex values.
The color at the bottom of the header graphic just happens to be 660000. Change both cells left-margin and footer, and the template colors will change to that color red. Now it is red template.
Here are a couple more to try
Step 7 - Research HTML Mark Up
Research tags or MARK UP in a web page. Visit the World Wide Web Consortium for specific rules, definitions and other web page exercises. http://www.w3.org/MarkUp/Guide/
<HTML>
<HEAD>
<META>
<TITLE>Home Page</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD></TD>
<TD></TD>
</TR>
<TABLE>
</BODY>
</HTML>
-------------------------
Return to Page 4: Select a Site Foundation - Template Structures