ببین این کد اچ تی ام ال هست:
<!--
Design by Bryant Smith
http://www.bryantsmith.com
http://www.aszx.net
email: template [-at-] bryantsmith [-dot-] com
Released under Creative Commons Attribution 2.5 Generic. In other words, do with it what you please; but please leave the link if you'd be so kind :)
Name : An Ocean of Sky
Description: One column, with top naviation. All divs, validations: XHTML Strict 1.0 & CSS
Version : 1.0
Released : 20081009
-->
<!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" />
<link rel="stylesheet" type="text/css" href="anoceanofsky.css" />
<title>An Ocean of Sky by Bryant Smith</title>
</head>
<body>
<div id="page">
<div class="topNaviagationLink"><a href="index.html">خانه</a></div>
<div class="topNaviagationLink"><a href="index.html">About</a></div>
<div class="topNaviagationLink"><a href="index.html">Portfolio</a></div>
<div class="topNaviagationLink"><a href="index.html">Services</a></div>
<div class="topNaviagationLink"><a href="index.html">Contact</a></div>
</div>
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">An Ocean of Sky</div>
<div id="headerSubtext">An XHTML 1.0 Strict Template by Bryant Smith</div>
</div>
</div>
<div class="contentBox">
<div class="innerBox">
<div class="contentTitle">The Title of an Article</div>
<div class="contentText"><p>You may use this template on any site, anywhere, for free just please leave the link back to me in the footer. This template validates XHTML Strict 1.0, CSS Validates as well; enjoy :) </p><br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p><br />
<p>Vestibulum augue quam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p></div>
<div class="contentTitle">So Many Titles, So Little Time.</div>
<div class="contentText"><p>You may use this template on any site, anywhere, for free just please leave the link back to me in the footer. This template validates XHTML Strict 1.0, CSS Validates as well; enjoy :) </p><br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p><br />
<p>Vestibulum augue quam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p></div>
<div class="contentTitle">Yet Another One!</div>
<div class="contentText"><p>You may use this template on any site, anywhere, for free just please leave the link back to me in the footer. This template validates XHTML Strict 1.0, CSS Validates as well; enjoy :) </p><br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p><br />
<p>Vestibulum augue quam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p></div>
</div>
</div>
<div id="footer"><a href="http://www.aszx.net">web development</a> by <a href="http://www.bryantsmith.com">bryant smith</a></div>
</body>
</html>
اینم کد سی اس اس:
/* پروژه وبسايت تقديم به استاد گرامي */
body {
margin: 0;
padding: 0;
text-align: right;
font-family:Tahoma, Geneva, sans-serif;
font-size: 13px;
color: #061C37;
background: #014D5D url(background.png);
background-repeat:repeat-x;
}
*
{
margin: 0 auto 0 auto;
text-align:left;}
#page
{
display: block;
height:auto;
position: relative;
overflow: hidden;
width: 670px;
}
.topNaviagationLink
{
text-align:center;
position:relative;
margin-top:30px;
font-size:16px;
margin-left:-10px;
width:121px;
height: 35px;
line-height: 35px;
float:left;
color:#CEEAEE;
font-family:Tahoma, Geneva, sans-serif;
}
.topNaviagationLink a
{
text-decoration:none;
color:#CDE2FC;
}
.topNaviagationLink a:hover
{
text-align:center;
border-bottom:none;
color:#0C61C9;
display: block;
width:121px;
height: 35px;
line-height: 35px;
background-image:url(tab.png);
}
#mainPicture
{
width:670px;
height:345px;
background-color:#FFFFFF;
}
#mainPicture
{
width:670px;
height:345px;
background-color:#FFFFFF;
}
#mainPicture .picture
{
position:relative;
width:650px;
height:325px;
top:10px;
background-image:url(anoceanofsky.jpg);
background-repeat:no-repeat;
margin-left:10px;
}
#headerTitle
{
position:relative;
top:30px;
left:40px;
font-size:25px;
color:#FFFFFF;
font-family:Tahoma, Geneva, sans-serif;
}
#headerSubtext
{
position:relative;
top:30px;
left:50px;
font-size:14px;
color:#A9C8FA;
font-family:Tahoma, Geneva, sans-serif;
}
.contentBox
{
width:670px;
height:auto;
background-color:#FFFFFF;
margin-top:10px;
}
.contentBox .innerBox
{
position:relative;
width:650px;
height:auto;
top:10px;
margin-left:10px;
background-image:url(content_back.png);
background-repeat:repeat-x;
padding-bottom:35px;
}
.contentTitle
{
font-size:19px;
margin-bottom:0px;
padding-top:18px;
margin-left:15px;
margin-top:15px;
}
.contentText
{
font-size:13px;
line-height:24px;
margin-left:13px;
margin-right:13px;
}
#footer {
width: 670px;
height:16px;
background: url(footer.png) no-repeat;
text-align:center;
font-size:9px;
font-family:Tahoma, Geneva, sans-serif;
color:#386172;
padding-top:5px;
}
#footer a
{
text-decoration:none;
font-size:9px;
color:#386172;
}
html, body {
text-align: center;
}
p {text-align: left;}