Andiamo a vedere un esercizio con HTML e CSS per realizzare una vera pagina con un layout strutturato. Oltre al codice commentato, è presente un file zip con la struttura delle cartelle e il codice completo. Come ogni esercizio la struttura delle nostre cartelle è:
Una cartella radice, le tre cartelle img, css, js, il file index.html nella radice e il file style.css nella cartella css. Le soluzioni proposte non necessariamente sono le uniche valide, possono esistere diversi modi di realizzare una specifica con selettori e fogli di stile differenti. Le soluzioni proposte sono testate su W3C Validator
Indice dei contenuti
Obiettivo da raggiungere
L’esempio prevede una intestazione arancione con immagine di logo ed una scritta come titolo. Segue una barra di navigazione in grigio con 4 link (non occorre predisporre le pagine associate ma solo un link funzionale). Nel corpo della pagina, predisporre 4 immagine con altrettante didascalie. In fine, inserire un pièpagina sempre grigio con l’autore. Le immagini sono libere così come le descrizioni.
Pagina HTML
La soluzione proposta è un ottimo esempio per comprendere l’uso dei marcatori nativi HTML5 header, nav, main, footer. Con i fogli di stile poi è marcata la distinzione tra pagina HTML, la sua ossatura, e quelle che invece è la parte di stile affidata al CSS.
<!DOCTYPE html>
<html lang="it">
<head>
<title>MioSito.it</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div id="logo"> <img src="img/logo.png" alt="logo" ></div>
<div id="title">MioSito.it</div>
</header>
<nav>
<a href="home.html">Home</a>
<a href="bio.html">Bio</a>
<a href="media.html">Media</a>
<a href="conatti.html">Contatti</a>
</nav>
<main>
<div class="row">
<div id="img1">
<img src="img/image1.png" alt="image1">
<p class="didascalia">Descrizione img1</p>
</div>
<div id="img2">
<img src="img/image2.png" alt="image2">
<p class="didascalia">Descrizione img2</p>
</div>
</div>
<br>
<div class="row">
<div id="img3">
<img src="img/image3.png" alt="image3">
<p class="didascalia">Descrizione img3</p>
</div>
<div id="img4">
<img src="img/image4.png" alt="image4">
<p class="didascalia">Descrizione img4</p>
</div>
</div>
</main>
<footer>
<p>Realizzato da Tizio Incognito</p>
</footer>
</body>
</html>Soluzione con il box model
Diciamolo subito: questa soluzione era il modo migliore per allineare oggetti all’interno delle pagine web nell’ora di massima esplosione dei CSS e dal loro prezioso contributo. Parliamo di un periodo che va tra il 2000 e il 2010 circa, in cui il web modificava pesantemente la sua destinazione d’uso su dispositivi mobili e la richiesta di strumenti semplificati per la gestione del “responsive” diventava alquanto insistente. Quella del box model è una soluzione che funziona, funzionerà ancora ma richiede una curva di apprendimento più ostica rispetto alle soluzioni del Flex Model o Grid Model.
Il foglio di stile dichiarato nella nostra pagina HTML:
header{
background-color: orange;
width: 100%;
text-align: left;
padding: 20px 0 20px 20px;
height: 13em;
}
#logo{
float:left;
display:block;
}
#title{
float:left;
display:block;
padding: 50px 0 0 50px;
font-size: 3em;
}
nav{
clear: both;
background-color: grey;
height: 3em;
font-weight: bold;
width: 100%;
padding: 15px 0 0 15px;
}
nav a:link{
color: black;
font-size: 2em;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
main{
text-align: center;
margin-top: 50px;
}
.row{
display: inline-block;
}
#img1, #img2, #img3, #img4{
width: 410px;
text-align: center;
float: left;
display:block;
}
footer{
clear: both;
text-align: center;
font-weight: bold;
background-color: grey;
height: 4em;
padding: 1em 0 0 0;
}
Soluzione con flex model
L’avvento di Bootstrap nel 2010 circa e di framework UI ha obbligato lo standard CSS a introdurre una semplificazione nella gestione del Box Model e dal 2009 è cominciato uno sviluppo serrato recepito però soltanto dal 2016! Quindi è perfettamente normale che i libri scolastici di informatica ancora non contemplino questa soluzione e che qualche collega possa rimanere affezionato al Box Model classico. Qui di seguito il codice che realizza lo stesso esempio con tanto di uso massiccio del rem al posto del px.
header{
background-color: orange;
width: 100%;
height: 13rem;
padding: 1.25rem 0 1.25rem 1.25rem;
display: flex;
}
#title{
padding: 3.05rem 0 0 3.05rem;
font-size: 3em;
}
nav{
background-color: grey;
width: 100%;
height: 3rem;
padding: 0.9rem 0 0 0.9rem;
font-weight: bold;
}
nav a:link{
color: black;
font-size: 2em;
font-family: Verdana, Tahoma, sans-serif;
}
main{
text-align: center;
margin-top: 3.05rem;
}
.row{
display: flex;
justify-content: center;
}
#img1, #img2, #img3, #img4{
width: 25.65rem;
text-align: center;
}
footer{
height: 4em;
text-align: center;
font-weight: bold;
background-color: grey;
padding: 1rem 0 0 0;
} Il file completo con il codice:
Ultima modifica 9 Novembre 2024
