2 - The existing layout
Take an existing table based layout and:
Validation is a process of checking your documents against a formal standard, like those published by the W3C. A document that has been checked and passed is considered valid.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!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 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Most browsers run in two modes: quirks mode for the old rules and strict mode for the standard. Mozilla, Safari, Opera, Mac/Explorer, Windows/Explorer 6 implemented these two modes. Windows/Explorer 5 and older browsers like Netscape 4, are permanently locked in quirks mode.
There are some very important reasons to use strict, or standards compliant mode. For example, Windows/Explorer 6 will use the correct box model when in strict mode, but the incorrect box model when in quirks mode. Also, many modern browsers will not allow fonts to be inherited when in quirks mode.
A character encoding tells the browser which glyph is associated with which character in the HTML code.
<meta http-equiv="content-type" content="text/html; charset=utf-8">
Presentation within markup
Inline images
<img name="nav01" src="site/nav01.gif" width="150" height="24" border="0"></a>
Colors
text="#003366" link="#003399" alink="#CC0000" vlink="#660000"
Widths
<td width="10">
Background colors
<tr valign="top" bgcolor="#FFFFFF">
Semantically markup is about using html elements to give content meaning. This is important for a wide range of user agents (browsers without style sheets, text browsers, PDAs, search engines etc.)
Missing heading elements
<font size="4" face="arial, helvetica"><b>Welcome to Company Name</b></font>
Images for content
<img name="nav01" src="site/nav01.gif" width="150" height="24" border="0">
Tables for layout
<table border="0" cellpadding="0" cellspacing="0" width="700" align="center" bgcolor="#FFFFFF">>
Accessibility issues with existing layout include:
Missing alt attributes
<img name="nav01" src="site/nav01.gif" width="150" height="24" border="0">
Tables for layout
<table border="0" cellpadding="0" cellspacing="0" width="700" align="center" bgcolor="#FFFFFF">>
Images for content
<img name="nav01" src="site/nav01.gif" width="150" height="24" border="0">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Company Name</title>
</head>
<body>
<div id="container">
<h1></h1>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
<h1>
<em>Company Name</em>
</h1>
<h2>
Welcome to Company Name
</h2>
<blockquote>
<p>
"I wouldn't use this company if...
</p>
</blockquote>
At its most basic level, site navigation is simply a list of links to other pages in the site. So, a standard HTML list is the ideal starting point.
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">People</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Shoe fitting</a></li>
<li><a href="#">Rocket design</a></li>
<li><a href="#">Car radios</a></li>
</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Awards</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
This CSS will eventually be moved to a separate file. However, during the initial set up, it is sometimes easier to have CSS and HTML in one file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Company Name</title>
<style type="text/css">
</style>
</head>
body
{
margin: 0;
padding: 0;
font: 80% arial, helvetica, sans-serif;
background: #3F5D7E;
text-align: center;
}
#container
{
width: 680px;
margin: 10px auto;
background: #fff;
padding: 10px;
text-align: left;
}
h1
{
height: 130px;
background: url(site/header.gif) no-repeat;
margin: 0 0 10px 0;
padding: 0;
}
h1 em
{
position: absolute;
left: -2000px;
width: 1800px;
}
#nav
{
float: left;
width: 150px;
padding-bottom: 74px;
background: #3F5D7E url(site/nav-base.jpg) repeat-x 0 100%;
}
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#nav li
{
display: inline;
}
#nav a
{
display: block;
width: 130px;
padding: 3px 10px 4px 10px;
border-top: 1px solid #fff;
font-weight: bold;
color: #fff;
text-decoration: none;
font-size: 110%;
}
#nav li li a
{
padding-left: 25px;
width: 115px;
font-weight: normal;
background: url(site/bullet.gif) no-repeat 15px 50%;
}
#nav a:hover
{
background: #C7D17A;
color: #263E59;
}
#content
{
float: left;
width: 340px;
margin: 0 29px;
color: #036;
}
#content h2
{
margin-top: 0;
}
blockquote
{
float: left;
width: 150px;
margin: 0;
padding: 0;
padding-bottom: 74px;
background: #3F5D7E url(site/nav-base.jpg) repeat-x 0 100%;
text-align: center;
}
blockquote p
{
margin: 0;
padding: 10px;
font: italic 130%/140% times, serif;
color: #fff;
}
#footer
{
clear: both;
background: #C7D17A;
padding: 5px 10px;
text-align: right;
color: #263E59;
}
a:link
{
color: #000;
}
a:visited
{
color: #000;
}
a:focus
{
color: #fff;
background: red;
}
a:hover, a:active
{
color: #000;
background: #C7D17A;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Company Name</title>
<link rel="stylesheet" href="stylesheets/simple.css" type="text/css" media="screen">
<link rel="stylesheet" href="stylesheets/import.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="stylesheets/print.css" type="text/css" media="print">
There are a range of choices from honouring the screen design to serving a simplified black and white version. The choice depends on the site, the audience, the content and the client.
Assuming we were to use the simplified option:
body
{
margin: 0;
padding: 0;
font: 100% times, serif;
background: #fff;
color: #000;
}
blockquote
{
background: #ddd;
margin: 1em 0;
padding: 1em;
}
blockquote p
{
margin: 0;
}
#footer
{
border-top: 1px solid #000;
padding-top: 1em;
margin-top: 2em;
text-align: right;
}
a
{
color: #000;
text-decoration: none;
}
Thank you
