Esercizio 01 – pagina HTML/CSS

di

 Per ogni esempio sono forniti uno schema stilizzato della richiesta, una cartella compressata con la struttura esemplificativa ma realistica del nostro sito con la/le pagine web nel livello più basso, una cartella css per i fogli di stile, una js per gli script javascript ed una img per contenere le immagini. I link all’interno del codice delle pagine devono tener conto di tali percorsi. Quindi il codice è estratto e pubblicato. 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

Esercizio 01

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.

La soluzione proposta è un ottimo esempio per comprendere l’uso dei marcatori nativi HTML5 header, nav, main, footer e alcune basi di uso CSS3 in riferimento alle proprietà display e float

<!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>&nbsp;&nbsp;&nbsp;
        <a href="bio.html">Bio</a>&nbsp;&nbsp;&nbsp;
        <a href="media.html">Media</a>&nbsp;&nbsp;&nbsp;
        <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>

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;
}

Il file completo con il codice:

esempio_01Download

Ultima modifica 30 Gennaio 2022

Visite: 214