| This 31 message thread spans 2 pages: < < 31 ( 1 [2] ) | |
| Criticise my html code please?
semantic html |
carlozdre
msg:4378414 | 8:49 pm on Oct 23, 2011 (gmt 0) |
I have been given a jpg file as a test, to make it in html, which I did. I would like some opinions please of whatever I have done bad and hopefully I can learn something new.
The code must be semantic and valid, I will validate it after I will finish but I would first like to know what do I have to change or modify in order to have a better semantic code.
Thanks.
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="description" content="National Lottery players raise £28 million a week for Good Causes. See how that funding has changed the UK for the better, and find out more about The National Lottery Awards." />
<meta name="keywords" content="Lottery, National Lottery Awards, Lottery funding, Good Causes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>The National Lottery</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link href="css/style.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="container">
<header id="masthead">
<div id="logo"><a href="#"><img src="images/logo.jpg" alt="The National Lottery logo" /></a></div>
<div id="headline"><a href="#"><img src="images/logoGC.gif" alt="The National Lottery headline" /></a></div>
<div class="nav clear">
<nav id="nav" class="clear">
<ul>
<li><a href="home">Home</a></li>
<li><a href="lottery-stories">Lottery stories</a></li>
<li><a href="media-centre">Media centre</a></li>
<li><a href="about-lottery-funding">About Lottery funding</a></li>
<li><a href="contact-us">Contact us</a></li>
<li><a href="cymru">Cymru</a></li>
</ul>
</nav>
<form id="searchbox" action="">
<input type="submit" value="Go" class="right"/>
<input type="search" name="search" class="right search">
<p class="right">Search </p>
</form>
</div>
</header>
<img src="images/header.jpg" alt=""/>
<section id="content">
<div class="sectionPhoto"></div>
<h1>The National Lottery Awards - winners announced</h1>
<p>Seven inspirational Lottery-funded projects have won the top honours at the finals of the 2007 National Lottery Awards.</p>
<p class="darkRed">Find out more about "The National Lottery Awards - winners announced"</p>
<div class="clear"></div>
</section><!-- End #content -->
<footer id="siteFooter">
<ul>
<li><a href="#">Email this page</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Advanced search</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Terms of use</a></li>
<li><a href="#">Site map</a></li>
</ul>
</footer>
</div><!-- End #container -->
</body>
<!-- Load jQuery & jQueryUI from CDN. If CDN is not available, load from local copy -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</html>
I had to use images as they were part of the text, otherwise I would have used a lot less and eventually make a sprite.
Every single criticism is welcomed, no matter how small. Thanks!
And the CSS:
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
aside,footer,header,menu,nav,section {
display: block;
}
body {
line-height: 1;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #5090cd;
}
#headline {
background: #fff;
float: left;
}
#logo {
background: #fff;
float: right;
}
a {
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
margin: 0;
padding: 0;
}
input,select {
vertical-align: middle;
}
#container {
width: 760px;
-moz-box-shadow: 0 3px 10px 3px #366;
-moz-border-radius-bottomright: 0 3px 10px 3px #366;
-webkit-box-shadow: 0 3px 10px 3px #366;
-webkit-border-bottom-right-radius: 0 3px 10px 3px #366;
margin: 0 auto;
}
#content {
background: #fff;
font-family: Tahoma,sans-serif;
padding: 18px;
}
#content p,h1 {
float: left;
margin-left: 18px;
width: 400px;
margin-bottom: 12px;
}
header#masthead {
width: 760px;
height: auto;
background: #fff;
}
header#masthead ul {
list-style: none;
position: absolute;
}
header#masthead p {
color: #fff;
font-size: 13px;
padding: 7px 4px;
}
header#masthead ul li {
border-right: 1px solid #FFF;
display: inline;
padding-right: 5px;
}
header#masthead ul li:last-child,#siteFooter ul li:last-child {
border: 0;
}
header#masthead ul li a {
color: #fff;
}
header#masthead ul li a:hover {
border-bottom: 3px solid #fff;
}
#nav {
background-image: url(../images/navBack.jpg);
background-repeat: repeat-x;
height: 17px;
font-size: 13px;
float: left;
padding: 7px 18px;
}
.nav {
background-image: url(../images/navBack.jpg);
background-repeat: repeat-x;
height: 31px;
}
input[type="search"] {
border: 1px solid grey;
font-family: Georgia;
width: 100px;
margin-top: 4px;
-moz-box-shadow: inset 2px 2px 5px #ccc;
box-shadow: inset 2px 2px 5px #ccc;
-webkit-box-shadow: inset 2px 2px 5px #ccc;
padding: 2px;
}
input[type="submit"] {
color: #000;
background-color: #fff;
border: none;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
margin: 5px 10px 0 6px;
}
.sectionPhoto {
background-image: url(../images/news-item.jpg);
background-repeat: no-repeat;
width: 140px;
height: 140px;
float: left;
-moz-box-shadow: 3px 3px 3px #999;
-moz-border-radius-bottomright: 3px 3px 3px #999;
-webkit-box-shadow: 3px 3px 3px #999;
-webkit-border-bottom-right-radius: 3px 3px 3px #999;
}
#siteFooter {
background: #fff;
height: 50px;
font-size: 13px;
padding: 18px;
}
#siteFooter ul li {
border-right: 1px solid #0f308d;
display: inline;
padding-right: 5px;
}
#siteFooter ul li a {
color: #0f308d;
}
h1 {
color: #0f308d;
font-size: 20px;
}
p {
color: #888c8d;
}
.left {
float: left;
}
.right {
float: right;
}
.bold {
font-weight: 700;
}
.clear {
clear: both;
}
.darkRed {
color: #954464;
}
|
lucy24
msg:4386078 | 10:19 pm on Nov 11, 2011 (gmt 0) |
:: quick edit when I see we're on a new page, causing me boundless confusion ::
| Yes, it is and is utf-8, I have double checked. |
|
OK, no worries then. The Forums just worked their magic, probably based on your browser's default settings. (Mine defaults to "automatically detect", which can have interesting results ;))
|
| This 31 message thread spans 2 pages: < < 31 ( 1 [2] ) |
|
|
|
