La struttura:
<!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> <title>La mia prima pagina web - Il mio sito</title> <meta name="author" content="Paolo Sordi" /> <link rel="stylesheet" type="text/css" href="stile.css" media="screen"> </head> <body> <div id="wrap"> <div class="header"><h1>Il mio sito web</h1></div> <div id="content" class="article"> <h1>Titolo della pagina</h1> <p class="date">Data di pubblicazione: 11 maggio 2011</p> <p><a href="http://www.flickr.com/photos/paolosordi/4507263985/" title="4507263985 di paolosordi, su Flickr"><img src="http://farm3.static.flickr.com/2338/4507263985_9c492d78fe_m_d.jpg" width="240" height="160" alt="4507263985"></a>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</p> <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</p> <h2>Video: The Machine is Us/ing Us</h2> <iframe width="425" height="349" src="http://www.youtube.com/embed/NLlGopyXT_g" frameborder="0" allowfullscreen></iframe> </div> <div id="sidebar" class="aside"> <h1>Un po' di Web 2.0</h1> <script type="text/javascript" src="http://www.google.it/reader/ui/publisher-it.js"></script> <script type="text/javascript" src="http://www.google.it/reader/public/javascript/user/14283940041462350337/label/Web Design?n=5&callback=GRC_p(%7Bc%3A%22-%22%2Ct%3A%22Web%20Design%20Feed%22%2Cs%3A%22true%22%2Cn%3A%22true%22%2Cb%3A%22false%22%7D)%3Bnew%20GRC"></script> <script type="text/javascript" src="http://feeds.delicious.com/v2/js/pavelo?title=My%20Delicious%20Bookmarks&icon=m&count=5&sort=date&tags&extended&name&showadd"></script> </div> <div class="footer"> <h1>Collegamenti</h1> <ul> <li><a href="http://didattica.uniroma2.it/informazioni/index/40903-Progettazione-E-Realizzazione-DI-Siti-Web-Lm">Progettazione e realizzazione di siti web</a></li> <li><a href="http://editoriaecomunicazione.uniroma2.it/">Corso di Laurea magistrale in informazione e sistemi editoriali</a></li> <li><a href="http://lettere.uniroma2.it">Facoltà di Lettere Tor Vergata</a></li> </ul> </div> </div> </body> </html>
Lo stile:
body {
background-color: #000;
font-family: Helvetica,Arial,sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, "Times New Roman", serif;
color: #444444;
margin: 0;
padding: 0;
}
a {
color: #1963ff;
}
a:hover {
text-decoration: none;
color: #00007f;
}
div#wrap {
background-color: white;
width: 940px;
margin: 0 auto;
padding: 0 10px;
overflow: hidden;
}
.header {
background-color: #999999;
padding: 20px;
margin-top: 10px;
}
.header h1 {
font-size: 44px;
color: #fff;
text-shadow: #111 1px 1px 1px;
}
.article {
width: 540px;
padding: 10px;
float: left;
}
.article h1 {
border-bottom: 2px solid #ddd;
font-size: 28px;
}
.article h2 {
border-bottom: 2px dotted #ddd;
font-size: 20px;
margin-bottom: 10px;
}
.article p.date {
text-align: right;
margin: 0;
padding: 0 0 10px 0;
font-size: 11px;
color: #555;
}
.article img {
float:right;
padding: 2px;
border: 1px solid #444;
background-color: #ddd;
margin-left: 5px;
}
.aside {
width: 360px;
margin: 10px 0;
padding: 10px;
float: left;
color: #777;
background-color: #efefef;
}
.aside h1 {
margin-bottom: 10px;
padding: 10px;
color: white;
background-color: #7f7f7f;
font-size: 20px;
}
#readerpublishermodule0 {
margin-bottom: 10px;
}
#readerpublishermodule0 h3 {
font-size: 20px;
padding: 0px;
margin: 10px 0;
list-style-type: none;
}
#readerpublishermodule0 ul {
padding: 0px;
margin: 10px 0;
list-style-type: none;
}
#readerpublishermodule0 li {
margin-bottom: 5px;
list-style-type: none;
}
#readerpublishermodule0 .s {
margin-top: 5px;
font-size: 11px;
list-style-type: none;
}
.delicious-posts h2 {
margin: 10px 0;
font-size: 20px;
}
.delicious-posts h2 a {
color: #454545;
text-decoration: none;
font-size: 20px;
}
.footer {
color: white;
clear: both;
background-color: #b1b1b1;
}
.footer h1 {
color: white;
text-shadow: #111 1px 1px;
font-size: 14px;
padding: 10px;
margin: 10px 0;
list-style-type: none;
}
.footer ul {
padding: 0 0 10px 5px;
margin: 10px 0;
list-style-type: none;
overflow: hidden;
}
.footer li {
font-size: 11px;
float: left;
padding: 0;
margin: 0;
list-style-type: none;
}
.footer a {
margin-right: 5px;
padding: 5px;
background-color: #1963ff;
color: white;
text-decoration: none;
display: block;
}
.footer a:hover {
background-color: #efefef;
color: #444;
}
Il risultato finale:
Pubblicato da e archiviato in Realizzazione
I commenti sono chiusi
