structure html

Dans les exercices qui suivent, l'objectif est d'ajouter les balises nécessaires pour structurer la page.

La mise en forme css est déjà donnée dans le code de l'exercice. Vous ne comprendrez pas systématiquement la signification de chacune des règles css données, mais lisez les : cela vous permettra de saisir ce qui est attendu et vous donnera déjà une bonne idée de ce qu'est le code css.

N'hésitez à lancer une requête sur un moteur de recherche pour comprendre les règles css de ces exercices.

Pour chaque exercice, vous regarderez également après coup ce que vous obtenez en supprimant le code css, afin de bien comprendre que les balises html n'ont aucun rôle a priori dans la mise en forme.

Structure 1.

Compléter le code ci-dessous (en ajoutant les balises de structure nécessaires) pour obtenir la structure suivante :
structure 1

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> structure 1 </title>
        <style>
            *{
                margin: 0; 
                padding: 0.5em;
            }
            header{
                background-color: #ed8683;  
                margin-bottom: 1em;
            }
            main{
                background-color: #a8b8c5;
            }
            footer{
                background-color: #ffff66;
                margin-top: 1em;
            }
            section{
                background-color: #B0E4BE;
                width: 80%;
                margin: 1em auto 1em auto;
           }
        </style>
    </head>
    
    <body>
           
                 Titre de la page  
             
                 page 1 
                 page 2 
                 page 3 
            
          
          
                 Titre de la section 1 
                 Premier paragraphe de la section 1  
                 Second paragraphe de la section 1 
              
              
              
                  Titre de la section 2  
                  Premier paragraphe de la section 2  
                  Second paragraphe de la section 2  
                  Troisième paragraphe de la section 2  
             
          
          
            pied de page, liens légaux, contact
        
           
         
    </body>
</html>

N'oubliez pas d'indenter votre code, cela est nécessaire pour la lisibilité.

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> structure 1 </title>
        <style>
              *{
                margin: 0; 
                padding: 0.5em;
            }
            header{
                background-color: #ed8683;  
                margin-bottom: 1em;
            }
            main{
                background-color: #a8b8c5;
            }
            footer{
                background-color: #ffff66;
                margin-top: 1em;
            }
            section{
                background-color: #B0E4BE;
                width: 80%;
                margin: 1em auto 1em auto;
           }
        </style>
    </head>
    
    <body>
          <header>
            <h1> Titre de la page </h1>
            <nav> 
                <a href="#"> page 1</a>
                <a href="#"> page 2</a>
                <a href="#"> page 3</a>
            </nav>
          </header>
          
          <main>
              <section>
                <h2> Titre de la section 1</h2>
                <p> Premier paragraphe de la section 1 </p>
                <p> Second paragraphe de la section 1 </p>
              </section>
              
              <section>
                <h2> Titre de la section 2 </h2>
                <p> Premier paragraphe de la section 2 </p>
                <p> Second paragraphe de la section 2 </p>
                <p> Troisième paragraphe de la section 2 </p>
              </section>
          </main>
          
          <footer> 
            pied de page, liens légaux, contact
          </footer>
           
         
    </body>
</html>

Structure 2.

Compléter le code ci-dessous (en ajoutant les balises de structure nécessaires) pour obtenir la structure suivante :
structure 2

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> structure 2 </title>
        <style>
           *{
                margin: 0; 
                padding: 0.5em;
            }
            header{
                background-color: #ed8683;  
                margin-bottom: 1em;
            }
            main{
                background-color: #a8b8c5;
                margin-right: 25%;
            }
            footer{
                background-color: #ffff66;
                margin-top: 1em;
            }
            section{
                background-color: #B0E4BE;
                width: 80%;
                margin: 1em auto 1em auto;
           }
           aside{
                float: right;
                width: 20%;
                background-color: #ffAA00;
           }
        </style>
    </head>
    
    <body>
           
                 Titre de la page  
             
                 page 1 
                 page 2 
                 page 3 
            
           Les bons côtés des à-côtés sont très cotés.
          
                 Titre de la section 1 
                 Premier paragraphe de la section 1  
                 Second paragraphe de la section 1 
              
              
              
                  Titre de la section 2  
                  Premier paragraphe de la section 2  
                  Second paragraphe de la section 2  
                  Troisième paragraphe de la section 2  
             
          
          
            pied de page, liens légaux, contact
        
           
         
    </body>
</html>

N'oubliez pas d'indenter votre code, cela est nécessaire pour la lisibilité.

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> structure 2 </title>
        <style>
            *{
                margin: 0; 
                padding: 0.5em;
            }
            header{
                background-color: #ed8683;  
                margin-bottom: 1em;
            }
            main{
                background-color: #a8b8c5;
                margin-right: 25%;
            }
            footer{
                background-color: #ffff66;
                margin-top: 1em;
            }
            section{
                background-color: #B0E4BE;
                width: 80%;
                margin: 1em auto 1em auto;
           }
           aside{
                float: right;
                width: 20%;
                background-color: #ffAA00;
           }
        </style>
    </head>
    
    <body>
          <header>
            <h1> Titre de la page </h1>
            <nav> 
                <a href="#"> page 1</a>
                <a href="#"> page 2</a>
                <a href="#"> page 3</a>
            </nav>
          </header>
          
          <aside>
          Les bons côtés des à-côtés sont très cotés.
          </aside>
          
          <main>
              <section>
                <h2> Titre de la section 1</h2>
                <p> Premier paragraphe de la section 1 </p>
                <p> Second paragraphe de la section 1 </p>
              </section>
              
              <section>
                <h2> Titre de la section 2 </h2>
                <p> Premier paragraphe de la section 2 </p>
                <p> Second paragraphe de la section 2 </p>
                <p> Troisième paragraphe de la section 2 </p>
              </section>
          </main>
          
          <footer> 
            pied de page, liens légaux, contact
          </footer>
           
         
    </body>
</html>

Structure 3.

Compléter le code ci-dessous (en ajoutant les balises de structure nécessaires) pour obtenir la structure suivante :
structure 3

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> structure 2 </title>
        <style>
           *{
                margin: 0; 
                padding: 0.5em;
            }
            header{
                background-color: #ed8683;  
                margin-bottom: 1em;
            }
            main{
                background-color: #a8b8c5;
                margin-right: 25%;
            }
            footer{
                background-color: #ffff66;
                margin-top: 1em;
                clear: both;
            }
            section{
                background-color: #B0E4BE;
                width: 80%;
                margin: 1em auto 1em auto;
           }
           aside{
                float: right;
                width: 20%;
                background-color: #ffAA00;
           }
           aside h2{
                font-size: 1.1em;
           }
        </style>
    </head>
    
    <body>
           
                 Titre de la page  
             
                 page 1 
                 page 2 
                 page 3 
            
           
          Les bons côtés des à-côtés sont très cotés.
               
                Titre à-côté 1  
                tagada tsoin tsoin
           
              
              
              Titre à-côté 2  
                 aha !
           
              
              
               Titre à-côté 3  
                 tugugu, tugudu
             
        
                 Titre de la section 1 
                 Premier paragraphe de la section 1  
                 Second paragraphe de la section 1 
              
              
              
                  Titre de la section 2  
                  Premier paragraphe de la section 2  
                  Second paragraphe de la section 2  
                  Troisième paragraphe de la section 2  
             
          
          
            pied de page, liens légaux, contact
        
           
         
    </body>
</html>

N'oubliez pas d'indenter votre code, cela est nécessaire pour la lisibilité.

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> structure 2 </title>
        <style>
            *{
                margin: 0; 
                padding: 0.5em;
            }
            header{
                background-color: #ed8683;  
                margin-bottom: 1em;
            }
            main{
                background-color: #a8b8c5;
                margin-right: 25%;
            }
            footer{
                background-color: #ffff66;
                margin-top: 1em;
                clear: both;
            }
            section{
                background-color: #B0E4BE;
                width: 80%;
                margin: 1em auto 1em auto;
           }
           aside{
                float: right;
                width: 20%;
                background-color: #ffAA00;
           }
           aside h2{
                font-size: 1.1em;
           }
        </style>
    </head>
    
    <body>
          <header>
            <h1> Titre de la page </h1>
            <nav> 
                <a href="#"> page 1</a>
                <a href="#"> page 2</a>
                <a href="#"> page 3</a>
            </nav>
          </header>
          
          <aside>
          Les bons côtés des à-côtés sont très cotés.
              <section>
                <h2> Titre à-côté 1 </h2>
                tagada tsoin tsoin
              </section>
              
              <section>
                <h2> Titre à-côté 2 </h2>
                 aha !
              </section>
              
              <section>
                <h2> Titre à-côté 3 </h2>
                 tugugu, tugudu
              </section>
          </aside>
          
          <main>
              <section>
                <h2> Titre de la section 1</h2>
                <p> Premier paragraphe de la section 1 </p>
                <p> Second paragraphe de la section 1 </p>
              </section>
              
              <section>
                <h2> Titre de la section 2 </h2>
                <p> Premier paragraphe de la section 2 </p>
                <p> Second paragraphe de la section 2 </p>
                <p> Troisième paragraphe de la section 2 </p>
              </section>
          </main>
          
          <footer> 
            pied de page, liens légaux, contact
          </footer>
           
         
    </body>
</html>