HTML XHTML CSS Course
Supplemental Materials
Bare Bones Template HTML Document Compliant with XHTML 1.0 Strict
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Search engine, keywords, separated,by commas, html, css, cheese doodle"/> <meta name="description" content="Search engine suggested description entry here"/> <title>Untitled Document</title> </head> <body> Hello World! </body> </html>
- HTML Tutorial – Tutorial with 15 Lessons covering HTML. Weaves in CSS.
- CSS Tutorial – Tutorial with 16 Lessons covering CSS
- Selectutorial – CSS selectors – A great overview of the CSS selectors.
- Float basics – Basic examples and principles of floating box elements.
- World Wide Web Consortium (W3C) – Standards organization for the HTML, CSS, XHTML, HTTP technologies. Has an HTML and CSS validator if you are interested.
- W3c Web Page Validator – You can check web page html here. Be sure you have lines 1 and 2 (doctype and html) in the above html template in your files. There is also a HTML Tidy available under options to make your html more readable.
- 11 Ways to Research a Domain You’re Interested in Buying – Interesting points if you are planning to get a domain name and avoid some pitfalls such as an expired domain name that has negative SEO issues.
Basic XHTML 1.0 with Internal CSS
<!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>Basic XHTML 1.0 With CSS</title>
<style type="text/css">
body {
background-color:#CFF;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
h1 {
font-size:24px;
font-family:Verdana, Geneva, sans-serif;
text-align:center;
}
#summaryDiv
{
font-size:16px;
margin:auto;
width:80%;
border:solid 2px #000;
padding-left:10px;
padding-right:10px;
background-color:#FFF;
}
#detailDiv
{
margin:auto;
margin-top:20px;
width:80%;
border:solid 1px #000;
padding-left:10px;
padding-right:10px;
background-color:#DDD;
text-indent:10px;
}
</style>
</head>
<body>
<h1>This is the Page Title</h1>
<div id = "summaryDiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id = "detailDiv">
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
</div>
</body>
</html>
Basic Single Column Layout With Link Menu
This is the image used in this example. Right mouse click and save it as logo.png.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Search engine, keywords, separated,by commas, html, css, cheese doodle, duck"/>
<meta name="description" content="Search engine suggested description entry here"/>
<title>One Column Fixed Layout</title>
<style type="text/css" >
body, html {
margin:0;
padding:0;
color:#000;
background:#a7a09a;
font-family:Arial, Helvetica, sans-serif;
}
#wrap {
width:750px;
margin:0 auto;
background:#9999cc;
}
#header {
background:#ff3333;
font-size:26px;
font-weight:bold;
}
#logo{
padding-right:10px;
}
#nav {
padding:5px 10px;
background:#cc9999;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
padding-left:5;
}
#nav a{
text-decoration:none;
font-weight:bold;
color:#000099;
}
#nav a:hover{
color:#ffffff;
}
#main {
padding:10px;
background:#99cc99;
}
#footer {
padding:5px 10px;
background:#cccc99;
}
#footer p {
margin:0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<img src="logo.png" alt="" width="50" height="50" border="0" align="absmiddle" id="logo" />Header for simple one column layout
</div>
<div id="nav">
<ul>
<li><a href="/">Menu choice 1</a></li>
<li><a href="/">Menu choice 2</a></li>
<li><a href="/">Menu choice 3</a></li>
<li><a href="/">Menu choice 4</a></li>
<li><a href="/">Menu choice 5</a></li>
</ul>
</div>
<div id="main">
<h2>Content area</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Basic Two Column Layout With Link Menu
This is the image used in this example. Right mouse click and save it as logo.png.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Search engine, keywords, separated,by commas, html, css, cheese doodle, duck"/>
<meta name="description" content="Search engine suggested description entry here"/>
<title>Two Column Fixed Layout</title>
<style type="text/css" >
body, html {
margin:0;
padding:0;
color:#000;
background:#a7a09a;
font-family:Arial, Helvetica, sans-serif;
}
#wrap {
width:750px;
margin:0 auto;
background:#99cc99;
}
#header {
background:#ff3333;
font-size:26px;
font-weight:bold;
}
#logo{
padding-right:10px;
}
#nav {
padding:5px 10px;
background:#cc9999;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
padding-left:5;
}
#nav a {
text-decoration:none;
font-weight:bold;
color:#000099;
}
#nav a:hover {
color:#ffffff;
}
#main {
float:left;
width:480px;
padding:10px;
background:#99cc99;
}
#sidebar {
float:right;
width:230px;
padding:10px;
background:#ffffff;
}
#footer {
clear:both;
padding:5px 10px;
background:#cccc99;
}
#footer p {
margin:0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<img src="logo.png" alt="" width="50" height="50" border="0" align="absmiddle" id="logo" />Header for simple two column layout
</div>
<div id="nav">
<ul>
<li><a href="/">Menu choice 1</a> | </li>
<li><a href="/">Menu choice 2</a> | </li>
<li><a href="/">Menu choice 3</a> | </li>
<li><a href="/">Menu choice 4</a> | </li>
<li><a href="/">Menu choice 5</a></li>
</ul>
</div>
<div id="columnContainer">
<div id="main">
<h2>Content area</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
</div>
<div id="sidebar">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
<ul>
<li><a href="/">Link 1</a></li>
<li><a href="/">Link 2</a></li>
<li><a href="/">Link 3</a></li>
<li><a href="/">Link 4</a></li>
<li><a href="/">Link 5</a></li>
<li><a href="/">Link 6</a></li>
<li><a href="/">Link 7</a></li>
<li><a href="/">Link 8</a></li>
<li><a href="/">Link 9</a></li>
<li><a href="/">Link 10</a></li>
<li><a href="/">Link 11</a></li>
<li><a href="/">Link 12</a></li>
<li><a href="/">Link 13</a></li>
<li><a href="/">Link 14</a></li>
<li><a href="/">Link 15</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
xxx
