HTML/CSS/CSS Attributes and Javascript Style Properties/content section — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 08:16, 26 мая 2010
Содержание
Content background
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
body {
padding: 0;
margin: 0;
background: #8b8b8b;
}
p {
margin-top: 0;
}
#content {
background: #ffffff;
width: 500px;
margin: 0;
padding: 10px;
}
</style>
</head>
<body>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
</div>
</body>
</html>
Content DIV
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
body {
padding: 0;
margin: 0;
background: red;
}
p {
margin-top: 0;
}
#content {
background: yellow;
width: 500px;
margin: 0 auto;
padding: 10px;
}
</style>
</head>
<body>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.</p>
</div>
</body>
</html>
<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#footer {
height:100px;
background:#ccc;
width:100%;
border-top:3px solid red;
position:fixed;
bottom:0;
left:0;
text-align:center;
}
#content {
position:absolute;
overflow:auto;
background:#aaa;
top:0;
left:0;
width:100%;
bottom:103px;
}
</style>
</head>
<body>
<div id="content">
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll 1</p>
<p>Some text to scroll 2 </p>
<p>end</p>
</div>
<div id="footer">Footer</div>
</body>
</html>
Content section with border
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
<meta http-equiv="content-language" content="en-us" />
<style type="text/css">
h1, h2 {
margin: 0;
background: gray;
}
h1 {
font-size: 1.6em;
padding: 0.3em;
border-bottom: 5px solid black;
letter-spacing: -0.08em;
}
div {
background: lightgrey;
padding: 0.7em;
clear: left;
}
h2 {
font-size: 1em;
padding: 0.2em;
}
p {
border: 0.05em solid black;
padding: 0.8em;
}
h3:target {
color: yellow;
background: red;
}
</style>
</head>
<body>
<h1>This is the title</h1>
<div>
<h2>This is the sub title</h2>
<ul id="top">
<li><a href="#">This is a test. </a></li>
<li><a href="#">This is a test. </a></li>
<li><a href="#">This is a test. </a></li>
<li><a href="#">This is a test. </a></li>
<li><a href="#">This is a test. </a></li>
<li><a href="#">This is a test. </a></li>
</ul>
<h3 id="">header 3<a href=""></a></h3>
<p>
This is a test.
</p>
</div>
</body>
</html>
Set and
in extra content section
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
div#extra h2, div#extra p {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>My Amazing Web Site </h1>
</div>
<div id="wrapper">
<div id="content">
<h2>Contact Form</h2>
<p>This is a test.</p>
<p>Please fill out our form below in order to contact me. </p>
<form id="form1" name="form1" method="post" action="/">
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
<input type="text" name="fmname" id="fmname" />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
<input type="text" name="fmcountry" id="fmcountry" />
<label for="fmmsg"><span class="akey">M</span>essage</label>
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
<input type="submit" name="submit" value="send »" class="submit" />
</form>
</div>
</div>
<div id="extra">
<h2>header</h2>
<p>This is a text</p>
</div>
<div id="footer">
<p>All rights reserved except where noted.</p>
</div>
</div>
</body>
</html>
Set <h2> in extra content
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
div#extra h2, div#extra p {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>My Amazing Web Site </h1>
</div>
<div id="wrapper">
<div id="content">
<h2>Contact Form</h2>
<form id="form1" name="form1" method="post" action="/">
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
<input type="text" name="fmname" id="fmname" />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
<input type="text" name="fmcountry" id="fmcountry" />
<label for="fmmsg"><span class="akey">M</span>essage</label>
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
<input type="submit" name="submit" value="send" class="submit" />
</form>
</div>
</div>
<div id="extra">
<h2>quid pro quo</h2>
</div>
<div id="footer">
<p>ask.</p>
</div>
</div>
</body>
</html>
stretching content
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<style rel="stylesheet" type="text/css">
body {
background: lightyellow;
font: 12px sans-serif;
margin: 0;
padding: 0;
}
p {
background: pink;
border: 1px solid red;
padding: 5px;
margin: 5px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
</body>
</html>
Use to create a section
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
width: 600px;
padding-left: 50%;
}
#frame {
width: 600px;
margin-left: -300px;
}
</style>
</head>
<body>
<div id="frame">
<h1>Header </h1>
<p>This is a test.</p>
</div>
</body>
</html>
use to mark content
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
div#content p {
line-height:1.5;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>My Amazing Web Site </h1>
</div>
<div id="wrapper">
<div id="content">
<h2>Contact Form</h2>
<form id="form1" name="form1" method="post" action="/">
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
<input type="text" name="fmname" id="fmname" />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
<input type="text" name="fmcountry" id="fmcountry" />
<label for="fmmsg"><span class="akey">M</span>essage</label>
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
<input type="submit" name="submit" value="send" class="submit" />
</form>
</div>
</div>
<div id="extra">
<h2>quid pro quo</h2>
</div>
<div id="footer">
<p>ask.</p>
</div>
</div>
</body>
</html>
use to mark extra content
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
div#extra{
color: #333;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>My Amazing Web Site </h1>
</div>
<div id="wrapper">
<div id="content">
<h2>Contact Form</h2>
<form id="form1" name="form1" method="post" action="/">
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
<input type="text" name="fmname" id="fmname" />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
<input type="text" name="fmcountry" id="fmcountry" />
<label for="fmmsg"><span class="akey">M</span>essage</label>
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
<input type="submit" name="submit" value="send" class="submit" />
</form>
</div>
</div>
<div id="extra">
<h2>quid pro quo</h2>
</div>
<div id="footer">
<p>ask.</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
width: 600px;
padding-left: 50%;
}
#frame {
width: 600px;
margin-left: -300px;
}
</style>
</head>
<body>
<div id="frame">
<h1>Header </h1>
<p>This is a test.</p>
</div>
</body>
</html>
use to mark content
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
div#content p {
line-height:1.5;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>My Amazing Web Site </h1>
</div>
<div id="wrapper">
<div id="content">
<h2>Contact Form</h2>
<form id="form1" name="form1" method="post" action="/">
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
<input type="text" name="fmname" id="fmname" />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
<input type="text" name="fmcountry" id="fmcountry" />
<label for="fmmsg"><span class="akey">M</span>essage</label>
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
<input type="submit" name="submit" value="send" class="submit" />
</form>
</div>
</div>
<div id="extra">
<h2>quid pro quo</h2>
</div>
<div id="footer">
<p>ask.</p>
</div>
</div>
</body>
</html>
use to mark extra content
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
div#extra{
color: #333;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>My Amazing Web Site </h1>
</div>
<div id="wrapper">
<div id="content">
<h2>Contact Form</h2>
<form id="form1" name="form1" method="post" action="/">
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
<input type="text" name="fmname" id="fmname" />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
<input type="text" name="fmcountry" id="fmcountry" />
<label for="fmmsg"><span class="akey">M</span>essage</label>
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
<input type="submit" name="submit" value="send" class="submit" />
</form>
</div>
</div>
<div id="extra">
<h2>quid pro quo</h2>
</div>
<div id="footer">
<p>ask.</p>
</div>
</div>
</body>
</html>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
div#content p {
line-height:1.5;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>My Amazing Web Site </h1>
</div>
<div id="wrapper">
<div id="content">
<h2>Contact Form</h2>
<form id="form1" name="form1" method="post" action="/">
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
<input type="text" name="fmname" id="fmname" />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
<input type="text" name="fmcountry" id="fmcountry" />
<label for="fmmsg"><span class="akey">M</span>essage</label>
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
<input type="submit" name="submit" value="send" class="submit" />
</form>
</div>
</div>
<div id="extra">
<h2>quid pro quo</h2>
</div>
<div id="footer">
<p>ask.</p>
</div>
</div>
</body>
</html>
use to mark extra content
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
div#extra{
color: #333;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>My Amazing Web Site </h1>
</div>
<div id="wrapper">
<div id="content">
<h2>Contact Form</h2>
<form id="form1" name="form1" method="post" action="/">
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
<input type="text" name="fmname" id="fmname" />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
<input type="text" name="fmcountry" id="fmcountry" />
<label for="fmmsg"><span class="akey">M</span>essage</label>
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
<input type="submit" name="submit" value="send" class="submit" />
</form>
</div>
</div>
<div id="extra">
<h2>quid pro quo</h2>
</div>
<div id="footer">
<p>ask.</p>
</div>
</div>
</body>
</html>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
div#extra{
color: #333;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>My Amazing Web Site </h1>
</div>
<div id="wrapper">
<div id="content">
<h2>Contact Form</h2>
<form id="form1" name="form1" method="post" action="/">
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
<input type="text" name="fmname" id="fmname" />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
<input type="text" name="fmcountry" id="fmcountry" />
<label for="fmmsg"><span class="akey">M</span>essage</label>
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
<input type="submit" name="submit" value="send" class="submit" />
</form>
</div>
</div>
<div id="extra">
<h2>quid pro quo</h2>
</div>
<div id="footer">
<p>ask.</p>
</div>
</div>
</body>
</html>