Home >> Forum >> Chill Out >> How to make a HTML template for a web site.....
How to make a HTML template for a web site.....
Reply to topic
| pissed pat - Tue Sep 09, 2008 4:50 pm |
|
Reply with quote
Ok, here is a little bit of code for you to look at.
The main key to building a good web site is to create a good base template from which to work, one that passes all www standards possible.
So here is one i knocked up for ya....
This page will act as a base page for all other pages.
This page will also pass many internet standards and work
on all browsers(including IE8 and Firefox 3) and OS.
here is the code for a TEMPLATE.HTML page.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb">
<head runat="server">
<title>Page Title</title>
<link href="core.css" type="text/css" rel="stylesheet" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="cache-control" content="no-cache" />
<meta name="author" content="Your company name, Web and Media Team" />
<meta name="revisit-after" content="14 days" />
<meta name="resource-type" content="document" />
<meta name="category" content="document" />
<meta name="copyright" content="Your company name." />
<meta name="country" content="uk" />
<meta name="distribution" content="global" />
<meta name="coverage" content="worldwide" />
<meta name="audience" content="all" />
<meta name="document-type" content="Public" />
<meta name="document-state" content="Static" />
<meta name="document-rating" content="General" />
<meta name="document-distribution" content="Global" />
<meta name="document-class" content="Completed" />
<meta name="document-classification" content="Business" />
<meta name="document-rights" content="Copyrighted Work" />
<meta name="copyright" content="Copyright 2008 - Your company name." />
<meta name="identifier" content="http://www.yourdomainanme.co.uk" />
</head>
<body>
<div class="block" id="header">
<h2 class="mainBanner" id="logo">
<div class="close" id="logo-text">YOUR WEB SITES LOGO AND STRAP LINE IN TEXT FORM</div>
</h2>
<ul id="top-menu">
<li>
<a href="/" title="hover title" class="topMenu" tabindex="1">top menu link 1</a>
</li>
<li>
<a href="/" title="hover title" class="topMenu" tabindex="1">top menu link 2</a>
</li>
<ul>
</div>
<div class="block" id="main-body">
<a href="/" title="hover title" tabindex="2">anoter link. dont forget to get your tabindexs right.</a>
<img src="A_IMAGE.gif" alt="WHAT GOOGLE SEES"/>
</div>
<div class="block" id="fotter">
<a href="/" title="hover title" tabindex="3" class="fotterMenu">fotter menu link 1</a>
</div>
</body>
<head>
</html>
here is the css for the CORE.css file
Code:
//** HTML Styles **//
html
{
background-color: #ffffff;
color: #362f2d;
font-family: Arial;
font-size: medium;
display: block;
position: static;
clear: both;
float: left;
width: 100%;
min-width: 100%;
height: 100%;
text-align: left;
vertical-align: top;
margin: 0px auto;
padding: 0px;
border: 0px;
}
body
{
width: 968px;
min-width: 968px;
height: 100%;
min-height: 100%;
margin: 0px auto;
padding: 0px;
border: 0px;
position: static;
background-color: inherit;
}
h2
{
display: inline;
position: static;
clear: none;
}
ul
{
display: inline;
list-style-type: none;
background-color: inherit;
position: static;
float: left;
margin: 0px;
padding: 0px;
}
li
{
display: inline;
clear: none;
float: left;
position: static;
background-color: inherit;
}
//** Generic Styles **//
.block
{
display: block;
overflow: hidden;
position: static;
clear: both;
float: left;
width: 100%;
min-width: 100%;
background-color: inherit;
}
.close
{
display: none;
}
//** main banner **//
.mainBanner
{
display: block;
float: left;
clear: none;
position: static;
overflow: hidden;
width: 675px;
height: 125px;
background-image: url('logo_banner.gif' );
//** never use a space or long names with your images,
some servers dont like it **//
background-repeat: no-repeat;
}
//** generic Links **//
A.link, A.active, A.visited
{
color: #000000;
text-decoration: none;
background-color: inherit;
}
A.hover
{
color: #000000;
text-decoration: none;
background-color: inherit;
}
//** Styled Links **//
A.topMenu:link, A.topMenu:active, A.topMenu:visited
{
color: #333333;
text-decoration: none;
background-color: inherit;
}
A.topMenu:hover
{
color: #333333;
text-decoration: none;
background-color: inherit;
}
A.fotterMenu:link, A.fotterMenu:active, A.fotterMenu:visited
{
color: #666666;
text-decoration: none;
background-color: inherit;
font-family: Arial-Narrow;
font-size: small;
}
A.fotterMenu:hover
{
color: #666666;
text-decoration: none;
background-color: inherit;
font-family: Arial-Narrow;
font-size: small;
}
i use these links when checking all my own work....
http://www.w3.org/QA/Tools/
http://www.totalvalidator.com/validator/ValidatorForm
Usally if ya web site passes all the standards set here you will be about as good as ya can get....and all browsers and all operating systems will be able to see your site no problems.
Any question just ask..
Pat...... 
|
Home >> Forum >> Chill Out >> How to make a HTML template for a web site.....
Permissions
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You are not logged in. You can sign in below or 
