Файл: Основы программирования на языке HTML (Техническое задание).pdf

</div>

<div class="left star"><img src="images/star_full.png" class="noeffects" alt=""><img src="images/star_full.png" class="noeffects" alt=""><img src="images/star_full.png" class="noeffects" alt=""><img src="images/star_full.png" class="noeffects" alt=""><img src="images/star_full.png" class="noeffects" alt=""></div>

<div class="right menu-order"><a class="button" href="">Order Now</a></div>

<img src="images/menu/pizza.jpeg" class="left clear item" width="150" alt="">

<p class="left">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae.</p>

<div class="border3"></div>

<div class="left">

<h3>Pizza Type D: $30</h3>

</div>

<div class="left star"><img src="images/star_full.png" class="noeffects" alt=""><img src="images/star_half_full.png" class="noeffects" alt=""><img src="images/star_empty.png" class="noeffects" alt=""><img src="images/star_empty.png" class="noeffects" alt=""><img src="images/star_empty.png" class="noeffects" alt=""></div>

<div class="right menu-order"><a class="button" href="">Order Now</a></div>

<img src="images/menu/pizza3.jpeg" class="left clear item" width="150" alt="">

<p class="left">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae.</p>

</article>

<aside class="sidebar">

<h3>From The Blog</h3>

<ul class="blog">

<li><a href="#">Lorem Ipsum Dolor</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Praesent Et Eros</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

</ul>

<div class="border3"></div>

<h3>Sidebar Widget</h3>

<img src="images/home/1.jpg" width="280" alt="" />

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. In turpis pulvinar facilisis. Ut felis.<br>

<a href="" class="right" style="padding-top:7px"><strong>Continue Reading &raquo;</strong></a></p>

</aside>

<div class="border2"></div>

<br>

</div>

<footer>

<div class="border"></div>

<div class="footer-widget">

<h4>Some Title</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>

</div>

<div class="footer-widget">

---

<h4>From The Blog</h4>

<ul class="blog">

<li><a href="#">Lorem Ipsum Dolor</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Praesent Et Eros</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

</ul>

</div>

<div class="footer-widget">

<h4>We Are Social!</h4>

<div id="social"> <a href="http://twitter.com/priteshgupta" class="s3d twitter"> Twitter <span class="icons twitter"></span> </a> <a href="http://www.facebook.com/priteshgupta" class="s3d facebook"> Facebook <span class="icons facebook"></span> </a> <a href="http://forrst.com/people/priteshgupta" class="s3d forrst"> Forrst <span class="icons forrst"></span> </a> <a href="http://www.flickr.com/photos/priteshgupta" class="s3d flickr"> Flickr <span class="icons flickr"></span> </a> <a href="#" class="s3d designmoo"> Designmoo <span class="icons designmoo"></span> </a> </div>

</div>

<div class="border2"></div>

<br />

<span class="copyright"><span class="left"><br />

<br>

<br />

</span></span></footer>

</div>

</body>

</html>

Приложение Rewiews

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Connoisseur</title>

<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

<div id="container">

<header>

<nav>

<ul id="nav">

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="menu.html">Menu</a></li>

<li><a href="gallery.html">Gallery</a></li>

<li><a href="reviews.html" class="current">Reviews</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

</header>

<div class="wrapper">

<div class="border"></div>

<article>

<h3>Reviews</h3>

<blockquote>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.<span>~Lorem</span></blockquote>

<div class="border3"></div>

<blockquote>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.<span>~Lorem</span></blockquote>

<div class="border3"></div>

<blockquote>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.<span>~Lorem</span></blockquote>

<div class="border3"></div>

<blockquote>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.<span>~Lorem</span></blockquote>

<div class="border3"></div>

</article>

<aside class="sidebar">

---

<h3>Sidebar Widget</h3>

<img src="images/home/1.jpg" width="280" alt="" />

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. In turpis pulvinar facilisis. Ut felis.<br>

<a href="" class="right" style="padding-top:7px"><strong>Continue Reading &raquo;</strong></a></p>

</aside>

<div class="border2"></div>

<br>

</div>

<footer>

<div class="border"></div>

<div class="footer-widget">

<h4>Some Title</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>

</div>

<div class="footer-widget">

<h4>From The Blog</h4>

<ul class="blog">

<li><a href="#">Lorem Ipsum Dolor</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Praesent Et Eros</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

</ul>

</div>

<div class="footer-widget">

<h4>We Are Social!</h4>

<div id="social"> <a href="http://twitter.com/priteshgupta" class="s3d twitter"> Twitter <span class="icons twitter"></span> </a> <a href="http://www.facebook.com/priteshgupta" class="s3d facebook"> Facebook <span class="icons facebook"></span> </a> <a href="http://forrst.com/people/priteshgupta" class="s3d forrst"> Forrst <span class="icons forrst"></span> </a> <a href="http://www.flickr.com/photos/priteshgupta" class="s3d flickr"> Flickr <span class="icons flickr"></span> </a> <a href="#" class="s3d designmoo"> Designmoo <span class="icons designmoo"></span> </a> </div>

</div>

<div class="border2"></div>

<br />

<span class="copyright"><span class="left"><br />

<br>

<br />

</span></span></footer>

</div>

</body>

</html>

Приложение About

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Connoisseur</title>

<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

<div id="container">

<header>

<nav>

<ul id="nav">

<li><a href="index.html">Home</a></li>

<li><a href="about.html" class="current">About</a></li>

<li><a href="menu.html">Menu</a></li>

<li><a href="gallery.html">Gallery</a></li>

<li><a href="reviews.html">Reviews</a></li>

<li><a href="contact.html">Contact</a></li>

---

</ul>

</nav>

</header>

<div class="wrapper">

<div class="border"></div>

<article>

<h3>Headline: Lorem Ipsum</h3>

<div class="date"><span class="day">24</span> <span class="month">May</span> <span class="year">2011</span> </div>

<img src="images/home/3.jpg" width="300" class="right" alt="" />

<p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h1>Header Level 1</h1>

<h2>Header Level 2</h2>

<h3>Header Level 3</h3>

<h4>Header Level 4</h4>

<h5>Header Level 5</h5>

<h6>Header Level 6</h6>

<pre><code>

</code></pre>

<blockquote>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consectetur elementum molestie. Donec eget orci vitae felis malesuada gravida a a magna. Nulla quis nisi dui. Aliquam eu risus et dui tempus pretium. Nunc vulputate ante ut dui cursus ultricies. Aliquam eu arcu et neque molestie porta vitae quis magna. Quisque convallis, justo in sagittis egestas, arcu diam malesuada eros, non dignissim turpis lacus sed dolor.</p>

</blockquote>

</article>

<aside class="sidebar">

<h3>Sidebar Widget</h3>

<img src="images/home/1.jpg" width="280" alt="" />

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. In turpis pulvinar facilisis. Ut felis.<br>

<a href="" class="right" style="padding-top:7px"><strong>Continue Reading &raquo;</strong></a></p>

</aside>

<div class="border2"></div>

<br>

</div>

<footer>

<div class="border"></div>

<div class="footer-widget">

<h4>Some Title</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>

</div>

<div class="footer-widget">

<h4>From The Blog</h4>

<ul class="blog">

<li><a href="#">Lorem Ipsum Dolor</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

---