Browse Instructions
How To Design W3C Compliant Website
Posted By: beegalz;
Category: Computer, Internet & Information Technology;
June 30, 2009
1
First step is to add DTD (Document Type Definition) check its the set of rules that matches latest W3c standards (outdated html tags will be not accepted). you need to add following line to start up with
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
Add html starting and closing tag. For each and every tag you need to start up and end up the tag
after adding the following startup and end up html tag in between html startup and end up tag add steps 3, 4 and 5
<html xmlns="http://www.w3.org/1999/xhtml">
</html>
after adding the following startup and end up html tag in between html startup and end up tag add steps 3, 4 and 5
<html xmlns="http://www.w3.org/1999/xhtml">
</html>
3
Between the html startup and end up add meta tag keywords to increase the chance of to be searched or Crawled in google type search engines. Title tag is used to define the top left corner text of the website. link href is used to add style to your website. So add all the below lines as step 3 to be searched in goole (fill contents with your own keywords), title to define your site naming like "W3c" and css reference to style up your website
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>W3C Standard::</title>
<meta name="keywords" content="" />
<meta name="W3c" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>W3C Standard::</title>
<meta name="keywords" content="" />
<meta name="W3c" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
4
Add the contents of your website (div is the area divider, we can add more than one div in contents), like informative text that you would like to be shared among remotely. So we need to place the following code to design our website content.
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1><a href="#"><span>W3c</span>Series</a></h1>
<p>Designed By Free CSS Templates</p>
</div>
</div>
<!-- end header -->
<div id="wrapper">
site contents goes here
</div>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1><a href="#"><span>W3c</span>Series</a></h1>
<p>Designed By Free CSS Templates</p>
</div>
</div>
<!-- end header -->
<div id="wrapper">
site contents goes here
</div>
5
Add your website copy writes like w3c standards guide inc 2008 or so you need to add following div for footer area.
<div id="footer">
<p class="copyright">© 2009 All Rights Reserved • Design by <a href="">Free CSS Templates</a>.</p>
<p class="link"><a href="#">Privacy Policy</a> • <a href="#">Terms of Use</a></p>
</div>
</body>
<div id="footer">
<p class="copyright">© 2009 All Rights Reserved • Design by <a href="">Free CSS Templates</a>.</p>
<p class="link"><a href="#">Privacy Policy</a> • <a href="#">Terms of Use</a></p>
</div>
</body>
6
Save the Css (Cascading style sheets) as default.css and add in your website directory and your website ready to publish
body {
margin-top: 50px;
padding: 0;
background: #2F2825;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #616161;
}
h1, h2, h3 {
margin-top: 0;
color: #8C0209;
}
h1 {
font-size: 1.6em;
font-weight: normal;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1em;
}
ul {
}
a {
text-decoration: none;
color: #8C0209;
}
a:hover {
border-bottom: none;
}
a img {
border: none;
}
/* Footer */
#footer {
width: 960px;
height: 70px;
margin: 0 auto;
padding: 50px 0px 0px 0px;
background: url(images/img04.gif) no-repeat left top;
color: #FFFFFF;
}
#footer p {
margin: 0;
padding: 25px 20px 0 20px;
text-transform: uppercase;
text-align: center;
font-size: smaller;
font-family: Arial, Helvetica, sans-serif;
}
#footer a {
color: #FFFFFF;
}
#footer .link {
float: right;
}
#footer .copyright {
float: left;
}
body {
margin-top: 50px;
padding: 0;
background: #2F2825;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #616161;
}
h1, h2, h3 {
margin-top: 0;
color: #8C0209;
}
h1 {
font-size: 1.6em;
font-weight: normal;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1em;
}
ul {
}
a {
text-decoration: none;
color: #8C0209;
}
a:hover {
border-bottom: none;
}
a img {
border: none;
}
/* Footer */
#footer {
width: 960px;
height: 70px;
margin: 0 auto;
padding: 50px 0px 0px 0px;
background: url(images/img04.gif) no-repeat left top;
color: #FFFFFF;
}
#footer p {
margin: 0;
padding: 25px 20px 0 20px;
text-transform: uppercase;
text-align: center;
font-size: smaller;
font-family: Arial, Helvetica, sans-serif;
}
#footer a {
color: #FFFFFF;
}
#footer .link {
float: right;
}
#footer .copyright {
float: left;
}
7
Only registered users can add comments
-
posted by: teresaschultz; July 6, 2009 05:18:43 AM
Once again, thanks for the help - the http://validator.w3.org/ link you gave has been invaluable in helping me out!
-
posted by: teresaschultz; June 30, 2009 02:05:07 PM
Thank you very much! Some excellent and helpful advice here. Much appreciated! :)
Benefits of W3c Compliant Website
i) Increased cross-platform reliability.
ii) Increased ‘Crawlability’ by Search Engine Bots