Creating An HTML Web Page Template
Part 1.
1. Open a notepad. Save the notepad document as index.html, selecting
file type as all files.
2. Setup your HTML DOC To set up our HTML file so that we can build the contents of the
templatetype in the parts of the HTML that appear above and below the body
of the document including the body tags.
3. Design Layout: Tables allow us to organize information around a page. Setting up
the table involves designing a table for the project.
A very simple
template might be two columns, a menu on the left, and content cell
on the right.
Make it fancier with a banner up top.
Add a copyright banner below to increase the style.
4. The Table Tag: Now that we have the design, we can put the
design into a table form in the HTML document we are creating. >From here
down I will post only the contents of the body. On your HTML document,
type in the framework for a table by typing the table tags.
<table>
</table>
5. Table Rows: Add three sets of table row tags <tr>,
remembering to close each tag </tr> as you go.
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
6. Table Data Cells: Add one Table Data Cell
<td></td> to the top and bottom row. Add two table data cells
to the middle row. After typing your data cells, save the HTML document
and preview in a browser.
<table>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
7. Cell Accounting: Since individual cell sizes in the same column
will be the same size we must stretch the top and bottom row cells so they
span two columns. Add the table data cell attribute for colspan=2 in your
top and bottom row cell. Save the HTML document and preview in a browser.
<table>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
8. Table Attributes: Set the attributes for the table so it
spans 780 pixels, width="780", and is centered on the page,
align="center". If you want a border around your table and cells
you would set it now, border="1", and specify its color in a
regular color name or in hex, bordercolor="black" or
bordercolor="#000000". After adding these attributes, save the
HTML document and preview in a browser.
<table width="780" align="center"
border="1" bordercolor="#000000">
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
9. Cell attributes: The top, left middle and bottom bells are
blue. We need to add the Blue color to these cells using the background
attribute, bgcolor="blue", or bgcolor="#000080".
The right hand middle cell is white. Add the background color
code for this cell, bgcolor="white" or bgcolor="#ffffff".
After adding these attributes, save the HTML document and preview in a
browser.
<table width="780" align="center"
border="1" bordercolor="#000000">
<tr>
<td colspan="2" bgcolor="#000080">
</td>
</tr>
<tr>
<td bgcolor="#000080">
</td>
<td bgcolor="#ffffff">
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#000080">
</td>
</tr>
</table>
10. Column Width: Now the cells for the menu and the contents
need to be spaced so the menu is narrow and the contents is the largest
cell on the page. Adding a width tag to the menu cell,
width="120", and the content cell, width="660", will
space the cells out. After adding these attributes, save the HTML document
and preview in a browser.
<table width="780" align="center"
border="1" bordercolor="#000000">
<tr>
<td colspan="2" bgcolor="#000080">
</td>
</tr>
<tr>
<td bgcolor="#000080" width="120">
</td>
<td bgcolor="#ffffff" width="660">
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#000080">
</td>
</tr>
</table>
11. Company Name: Add large text in the top cell by using the
<h1> tag, <h1>Your company name</h1>. The Text
needs to be White so we can see it. Add a White style tag to the Header
tag, <h1 style="color:white">Your company Name</h1>. You may want to
center your text on your top cell by adding a cell attribute of
align="center".
If you want a slogan added under the company name, add it right after
the close of the header1 tag. Put it inside H5 tags, <h5>A Web Development
Community</h5>.
After adding this text, save the HTML document and preview in a
browser.
<table width="780" align="center"
border="1" bordercolor="#000000">
<tr>
<td colspan="2" bgcolor="#000080"
align="center">
<h1 style="color:white">Developing Webs Group</h1>
<h5 style="color:white">A Web Development Community</h5>
</td>
</tr>
<tr>
<td bgcolor="#000080" width="120">
</td>
<td bgcolor="#ffffff" width="660">
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#000080">
</td>
</tr>
</table>
11. Menu Items: Add text menu items to your menu cell which is
the left cell in the second row. Add your menu items as header 4 text,
<h4> </h4>. Set the style to color the text white. <h4 style="color:white">Home</h4>.
Each menu item will have their own header tag which will space the items
down the list. To Center them in the left cell, add the align
attribute , align="center" to the data cell tag.
<table width="780" align="center"
border="1" bordercolor="#000000">
<tr>
<td colspan="2" bgcolor="#000080"
align="center">
<h1 style="color:white">Developing Webs
Group</h1>
<h5 style="color:white">A Web Development Community</h5>.
</td>
</tr>
<tr>
<td bgcolor="#000080" width="120"
align="center">
<h4 style="color:white">Photoshop</h4>
<h4 style="color:white">HTML</h4>
<h4 style="color:white">PHP</h4>
<h4 style="color:white">Flash</h4>
<h4 style="color:white">CSS</h4>
<h4 style="color:white">MessageBoard</h4>
<h4 style="color:white">Contact</h4>
<h4 style="color:white">Home</h4>
</td>
<td bgcolor="#ffffff" width="660">
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#000080">
</td>
</tr>
</table>
12. Copyright Information: The bottom banner is used for adding
your copyright. Align the cell in the last row to the center by adding the
cell attribute align="center". A good web developer will use
code that is easy to update on the copyright so that he wont have to
update all pages at the end of each year. Therefore, In the cell we
will use the java script for dynamic copyright to set a starting year and
then set it to the current year, and your company name.
Add a Paragraph style around the script to turn the color white: <p
style="color:white"> </p>
So now the code looks like the following:
<table width="780" align="center" border="1" bordercolor="#000000">
<tr>
<td colspan="2" bgcolor="#000080" align="center">
<h1 style="color:white">Developing Webs Group</h1>
<h5 style="color:white">A Web Development Community</h5>
</td>
</tr>
<tr>
<td bgcolor="#000080" width="120" align="center">
<h4 style="color:white">Photoshop</h4>
<h4 style="color:white">HTML</h4>
<h4 style="color:white">PHP</h4>
<h4 style="color:white">Flash</h4>
<h4 style="color:white">CSS</h4>
<h4 style="color:white">MessageBoard</h4>
<h4 style="color:white">Contact</h4>
<h4 style="color:white">Home</h4>
</td>
<td bgcolor="#ffffff" width="660">
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#000080" align="center">
<p style="color:white">
<script language="JavaScript">
//ATOJ (c) 2002 www.atouchofjamaica.com
//use script freely "freeware script"
//keep copyright information in script
copyright=new Date();
update=copyright.getYear();
//---write copyright
document.write("Copyright © 2002-"+ update + " Developingwebs.net All
rights Reserved.");
</script>
</p>
</td>
</tr>
</table>
13. Save and view your template.
|
