We are in the process of creating a book with the purpose of teaching people the art of html and CSS to create a website from scratch. In our book the focal point, so to say, is that the reader is given a webdesign that he converts into a website by himself.
The reader is given the webdesign for the website of a (fictive) restaurant. The website will, when finished by the reader, consist of just the front page and three almost identical sub pages (only the text content will differ).
To be sure of an ideal, down to Earth, basic and typical website we are asking for a code review of the HTML and CSS behind these pages that make up this website. We have strained our selves to keep the code short, simple, clean and strict.
The reviewers should keep in mind that the site ought to be illustrating
- recommended methods in coding the different parts as well as
- best practice and
- recommended ways of organising the code, and the site should contain
- typical standard parts for a website to be basic and fundamental for a students learning.
Please ask any relevant questions to clarify things. Below you will see first the entire html for the front page, then the CSS and then the HTML for a sub page. In the bottom you will find a screenshot of both front page and sub page.
(Note: The page is in Danish)
We hope for some useful feedback and hope you like it.
HTML (frontpage index.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/global.css">
<title>Eos Café</title>
</head>
<body>
<div id="container">
<header>
<a href="/"><img src="images/logo.jpg" alt="Eos Café" id="logo"></a>
<nav>
<a href="#">Menu</a>
<a href="#">Bestil</a>
<a href="#">Arrangementer</a>
<a href="#">Kontakt</a>
</nav>
</header>
<nav id="submenu">
<ul>
<li><a href="menu/forretter.html">Forretter</a></li>
<li><a href="menu/hovedretter.html">Hovedretter</a></li>
<li><a href="menu/desserter.html">Desserter</a></li>
<li><a href="#">Salater</a></li>
<li><a href="#">Supper</a></li>
<li><a href="#">Vine</a></li>
<li><a href="#">Drikke</a></li>
</ul>
</nav>
<section id="content">
<h1>Madforkælelse</h1>
<div id="text">
<div id="manchet">
<img src="images/coffeecup.jpg" alt="">
<p>Velkommen til Eos Café. Vi har de lækre retter på bordet og den helt rigtige vin. Kom ind og oplev maden og stemningen! Velkommen til Eos Café.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus accumsan tincidunt.<br>
Etiam eget sem nec massa facilisis vulputate. Fusce suscipit dictum sodales. Etiam tempus sollicitudin mauris ut eleifend. Duis aliquet lacus sit amet dolor blandit fermentum. Cras iaculis metus quis odio <a href="#">auctor fringilla</a>. Nunc tristique quam mi, in interdum felis. Cras lobortis vehicula ligula, quis condimentum mauris porttitor at. Cras in augue ut leo blandit fringilla blandit eget mi.</p>
</div>
<img id="img1" src="images/dummy1.jpg" alt="">
<img id="img2" src="images/dummy1.jpg" alt="">
<img id="img3" src="images/dummy3.jpg" alt="">
</section>
<footer>
<div id="openhours">
<h4>Åbningstider</h4>
<table cellspacing="0">
<tr>
<th colspan="2">Caféens åbningstider</th>
<th colspan="2">Køkkenets åbningstider</th>
</tr>
<tr>
<td>Man-tors</td>
<td>11.00-21.00</td>
<td>Man-tors</td>
<td>11.00-21.00</td>
</tr>
<tr>
<td>Fre-lør</td>
<td>11.00-22.00</td>
<td>Fre-lør</td>
<td>11.00-22.00</td>
</tr>
<tr>
<td>Søn</td>
<td>17.00-21.30</td>
<td>Søn</td>
<td>17.00-21.30</td>
</tr>
</table>
</div>
<div id="address">
<h4>Her bor vi</h4>
Adresse:<br>
Engsvinget 45<br>
3400 Hillerød<br>
Se kort
</div>
<div id="socialicons">
<hr>
© Eos Café
<span>
Hold dig opdateret:
<img src="images/facebook.jpg" alt="Facebook">
<img src="images/google.jpg" alt="Google+">
<img src="images/twitter.jpg" alt="Twitter">
<img src="images/rss.jpg" alt="RSS">
</span>
</div>
</footer>
</div>
</body>
</html>
CSS (global.css)
* {margin: 0; padding: 0;} /*Fjerne standardegenskaber*/
/*GENERELT*/
section,
header,
footer {
position: relative;
}
body,
html {
background-color: #929292;
margin: 0;
padding: 0;
}
#container {
background-color: #e6e6e6;
margin: 0 auto; /*Centrering*/
width: 1000px;
}
nav a { /*Generelt til navigation*/
font-family: verdana;
text-decoration: none;
}
/*SIDEHOVED*/
header {
height: 160px;
background-color: white;
border-top: solid 3px #912124;
border-bottom: solid 1px #dad9d9;
padding: 20px 0 0 90px;
}
#logo {
width: 160px;
}
header nav { /*Topmenu*/
bottom: 20px;
height: 30px;
position: absolute;
right: 100px;
}
header nav a { /*Topmenu-links*/
color: #979696;
font-size: 14px;
margin: 0 10px;
padding-bottom: 5px;
text-transform: uppercase;
}
header nav a:hover {
border-bottom: solid 3px #912124;
color: #606060;
}
/*SIDEMENU*/
#submenu {
float: left;
width: 200px;
}
#submenu ul {
float: right;
list-style: none;
margin-top: 50px;
text-align: center;
}
#submenu ul a {
color: #912124;
font-size: 12px;
}
#submenu ul a:hover {
color: black;
}
#submenu li {
margin: 10px 0;
}
/*INDHOLD*/
section {
background-color: #ededed;
color: #1f1f1f;
float: right;
font-family: arial;
font-size: 12px;
padding: 50px 50px 50px 50px;
width: 650px; /*750px minus padding*/
}
section p {
margin: 5px 0;
}
section h1 {
color: #525252;
font-size: 24px;
margin-bottom: 20px;
text-transform: uppercase;
}
section #manchet,
h2 {
color: #912124;
font-family: georgia;
font-style: italic;
margin-bottom: 20px;
}
section #manchet img {
float: left;
margin-right: 10px;
}
section #text {
float: left;
padding: 0 20px 20px 0;
width: 400px;
}
section #img1 { height: 180px; float: right; }
section #img2 { clear: left; height: 180px; float: left;}
section #img3 { height: 180px; float: right; }
section a {
color: #6ba6c1;
}
section a:hover {
text-decoration: none;
}
/*SIDEFOD*/
footer, footer table {
color: white;
font-family: arial;
font-size: 12px;
}
footer {
background-color: #1f1f1f;
clear: both;
padding-top: 30px;
}
footer #openhours {
float: left;
padding-left: 300px;
width: 400px;
}
footer #address {
float: left;
}
footer th {
padding-right: 60px;
}
footer th,
footer td {
line-height: 150%;
}
footer h4 {
font-size: 14px;
margin-bottom: 10px;
text-transform: uppercase;
}
footer hr {
border-bottom: solid 1px #292929;
border-left: none;
border-right: none;
border-top: solid 1px #030303;
margin-bottom: 20px;
}
footer #socialicons {
clear: both;
margin: 0 auto; /*Centrering*/
padding: 20px 80px;
position: relative;
text-align: center;
text-transform: uppercase;
}
footer #socialicons span {
position: absolute;
right: 80px;
top: 42px;
}
/*UNDERSIDER*/
h2 {
font-size: 12px; /*Overskriv standardegenskaber*/
font-weight: normal;
}
.dish {
position: relative;
height: 97px;
}
.dish img {
float: left;
margin-right: 44px;
}
hr {
clear: both;
border: none;
border-top: solid 1px #dad9d9;
margin: 12px 0;
}
.dish span {
position: absolute;
right: 10px;
top: 0;
font-style: italic;
}
HTML (subpage menu/forretter.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/css/global.css">
<title>Eos Café</title>
</head>
<body>
<div id="container">
<header>
<a href="/"><img src="/images/logo.jpg" alt="Eos Café" id="logo"></a>
<nav>
<a href="#">Menu</a>
<a href="#">Bestil</a>
<a href="#">Arrangementer</a>
<a href="#">Kontakt</a>
</nav>
</header>
<nav id="submenu">
<ul>
<li><a href="#">Forretter</a></li>
<li><a href="#">Hovedretter</a></li>
<li><a href="#">Desserter</a></li>
<li><a href="#">Salater</a></li>
<li><a href="#">Supper</a></li>
<li><a href="#">Vine</a></li>
<li><a href="#">Drikke</a></li>
</ul>
</nav>
<section id="content">
<hgroup>
<h1>Forretter</h1>
<h2>Menukort</h2>
</hgroup>
<div class="dish">
<img src="/images/dummy2.jpg" alt="#">
<h3>Flamberet and</h3>
<p>Med grønne æbler og hvid sovs.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus accumsan tincidunt. Etiam eget sem nec massa facilisis vulputate. Fusce suscipit dictum sodales.</p>
<span>Pris: 199,-</span>
</div>
<hr>
<div class="dish">
<img src="/images/dummy2.jpg" alt="#">
<h3>Flamberet and</h3>
<p>Med grønne æbler og hvid sovs.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus accumsan tincidunt. Etiam eget sem nec massa facilisis vulputate. Fusce suscipit dictum sodales.</p>
<span>Pris: 199,-</span>
</div>
<hr>
<div class="dish">
<img src="/images/dummy2.jpg" alt="#">
<h3>Flamberet and</h3>
<p>Med grønne æbler og hvid sovs.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus accumsan tincidunt. Etiam eget sem nec massa facilisis vulputate. Fusce suscipit dictum sodales.</p>
<span>Pris: 199,-</span>
</div>
</section>
<footer>
<div id="openhours">
<h4>Åbningstider</h4>
<table>
<tr>
<th colspan="2">Caféens åbningstider</th>
<th colspan="2">Køkkenets åbningstider</th>
</tr>
<tr>
<td>Man-tors</td>
<td>11.00-21.00</td>
<td>Man-tors</td>
<td>11.00-21.00</td>
</tr>
<tr>
<td>Fre-lør</td>
<td>11.00-22.00</td>
<td>Fre-lør</td>
<td>11.00-22.00</td>
</tr>
<tr>
<td>Søn</td>
<td>17.00-21.30</td>
<td>Søn</td>
<td>17.00-21.30</td>
</tr>
</table>
</div>
<div id="address">
<h4>Her bor vi</h4>
Adresse:<br>
Engsvinget 45<br>
3400 Hillerød<br>
Se kort
</div>
<div id="socialicons">
<hr>
© Eos Café
<span>
Hold dig opdateret:
<img src="/images/facebook.jpg" alt="Facebook">
<img src="/images/google.jpg" alt="Google+">
<img src="/images/twitter.jpg" alt="Twitter">
<img src="/images/rss.jpg" alt="RSS">
</span>
</div>
</footer>
</div>
</body>
</html>
Screenshot, frontpage:
Screenshot, subpage:
Screenshot of the page on a larger screen:
