Un esempio cumulativo di tutte le caratteristiche HTML5/CSS3 viste nei precedenti esempi. Un esempio anche visivamente un po’ più carino e realistico di sito web, rispetto ai precedenti ma senza troppe aspettative! Cerchiamo di analizzare le sue singole parti. Come sempre, trovate il codice cumulativo in allegato.
Prima di tutto diamo un’occhiata alla struttura della nostra pagina. In realtà i tag semantici ci fanno subito intuire una struttura semplice. Tralasciamo un attimo il corpo principale. Il codice che segue potrebbe essere facilmente un template per i nostri lavori o esercizi. Header, nav, aside, main e footer gli elementi cardine della nostra pagina con il loro contenuto minimale:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Dvd.it</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<a href="index.html">
<img src="immagini/logo.gif" alt="logo">
</a>
</header>
<nav>
<a href="index.html">Home</a> |
<a href="libri.html">DVD</a> |
<a href="ebook.html">Blue-Ray</a> |
<a href="video.html">Adesso al cinema</a>
</nav>
<aside>
<h3>Reparto libri</h3>
<ul>
<li><a href="architettura.html">Filv Dvd</a></li>
<li><a href="arte.html">Blue Ray</a></li>
<li><a href="fantasy.html">Videogiochi</a></li>
<li><a href="narrativa.html">Libri</a></li>
</ul>
</aside>
<main>
...
</main>
<footer>Copyright Pinco Pallino @Duemilacredici</footer>
</body>
</html>
Per l’header, nav e il body che gestisce sfondo e margini vari, il css è molto semplice e di solo contenuto grafico senza gestione della disposizione degli oggetti particolare. Allenatevi ad usare gli em come unità di misura per dimensioni, larghezze, font a meno di particolari effetti. I pixel reagiscono diversamente a seconda della risoluzione e dello schermo che sia un telefonino o un pc casalingo, mentre em ha una natura scalabile. Se vogliamo fare un paragone 1em = 12pt mentre 2em sarà 24pt
body {
margin: 0px;
padding: 0px;
font-size: 11px;
font-family: verdana, arial, sans-serif;
text-align: left;
color: black;
background-color: lightgrey;
}
header {
height: 7em;
background-color: grey;
margin-left: 1em;
margin-top: 1em;
margin-right: 1em;
width: 98%;
border: 1px solid black;
}
nav {
height: 25px;
width: 98%;
background-color: green;
padding: 5px 0 0 0.2em;
margin: 0.5em 1em 0 1em;
text-align: left;
border: 1px solid black;
}Veniamo al corpo del main, la parte decisamente più articolata. Scritti i test in alto con semplici tag standard, la struttura delle nostre immagini con le didascalie è fatta così:
1. creo due contenitori div che saranno le due righe con due immagini per ciascuno <div id=”row”></div>. Il dubbio di usare una <section> come tag semantico è più che lecito, ma leggendo un po’ di letteratura W3C, non convince: “A section is a thematic grouping of content, typically with a heading.”, più indicata per il testo di apertura che la creazione di una struttura come la nostra. Ricordiamo che usare i tag semantici è importante per rispettare gli standard, molto apprezzati da Google per valutare la vostra pagina web e soprattutto per facilitare i browser non visuali per chi è ipovedente, ma non dobbiamo passare ore a cercare di scegliere tag opportuni se non c’è una reale necessità o evidenza. Sentiamoci liberi di usare i generici div per strutture e contenuti della nostra pagina!
2. in ogni riga creo due <article></article>, questa scelta è assolutamente opinabile, potreste preferire <section> o un div con un id su misura.
3. in ogni <article> creo un div per l’immagine ed un div per la didascalia: <figure> e <figcaption>se volete usare i tag semantici o dei banali div, ad esempio <div id=”img”> e <div id=”descrizione”>
4. La linee row le dichiaro nel css display: inline-block
5. ogni sotto-oggetto lo dichiaro float:left e display: block
Tradotto in codice HTML
<div class="row">
<article>
<figure><img src="immagini/01.jpg" alt="01"></figure>
<figcaption><b>Il Trono di Spade - Stagione 3</b> <br>
<i>Oltre la Barriera, Samwell Tarly riesce a sfuggire all'orda di Estranei e Spettri e a raggiungere...</i><br>
<span class="red">Il nostro prezzo eur 39,99</span>
</figcaption>
</article>
<article>
<figure><img src="immagini/02.jpg" alt="02"></figure>
<figcaption><b>Frozen - Il regno del ghiaccio</b><br>
<i>L'intrepida principessa Anna, accompagnata da Kristoff, un venditore di ghiaccio ormai disoccupato...</i><br>
<span class="red">Il nostro prezzo eur 16,99</span>
</figcaption>
</article>
</div>
<br>
<div class="row">
<article>
<figure><img src="immagini/03.jpg" alt="03"></figure>
<figcaption><b>Piovono polpette 2</b> <br>
<i>Dopo aver provocato una disastrosa tempesta di cibo Flint e i suoi amici sono costretti...</i> <br>
<span class="red">Il nostro prezzo eur 18,99</span>
</figcaption>
</article>
<article >
<figure><img src="immagini/04.jpg" alt="04"></figure>
<figcaption><b>Rush</b> <br>
<i>Il racconto di una delle più celebri rivalità sportive della storia, quella tra i piloti di Formula 1... </i> <br>
<span class="red">Il nostro prezzo eur 18,99</span>
</figcaption>
</article>
</div>il css del corpo:
.row{
display: inline-block;
width: 100%;
}
article{
float: left;
display: block;
width: 50%;
}
figure{
float: left;
display:block;
height: 200px;
text-align: center;
}
figcaption{
float: left;
display: block;
width: 250px;
height: 200px;
padding: 0.5em 0 0 0;
}Per la tabella in basso anche se la tentazione di usare le table/tr/td è grande, alleniamoci ad usare gli attributi display con i relativi contenitori div. La struttura è molto semplice e ricalca un po’ la classica table:
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">1</div>
<div class="divTableCell">Rush</div>
<div class="divTableCell">dvd</div>
<div class="divTableCell">€ 14,99*</div>
</div>
<div class="divTableRow">
<div class="divTableCell">2</div>
<div class="divTableCell">Gravity</div>
<div class="divTableCell">dvd</div>
<div class="divTableCell">€ 14,99*</div>
</div>
<div class="divTableRow">
<div class="divTableCell">3</div>
<div class="divTableCell">The vampire diaries</div>
<div class="divTableCell">5 dvd</div>
<div class="divTableCell">€ 38,99*</div>
</div>
<div class="divTableRow">
<div class="divTableCell">4</div>
<div class="divTableCell">aptain phillips - attacco in mare</div>
<div class="divTableCell">dvd</div>
<div class="divTableCell">€ 13,99*</div>
</div>
<div class="divTableRow">
<div class="divTableCell">5</div>
<div class="divTableCell">Harry potter e i doni della morte</div>
<div class="divTableCell">dvd</div>
<div class="divTableCell">€ 6,99*</div>
</div>
</div>
</div>Il foglio di stile associato dove usiamo in modo semplice i vari attributi display e qualche elemento di formattazione
.divTable{
display: table;
width: 99%;
}
.divTableRow {
display: table-row;
}
.divTableCell{
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableBody {
display: table-row-group;
}Se siete pigri, potete usare alcuni IDE HTML o siti di codice online che vi generano in modo semplice ed intuitivo una tabella con css associato. Un esempio lo trovate qui
Ultima modifica 17 Gennaio 2022