structure - Exercices

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.

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>

Structure 4.

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

<!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%;
            }
            body>footer{
                background-color: #ffff66;
                margin-top: 1em;
                clear: both;
            }
            section{
                background-color: #B0E4BE;
                width: 80%;
                margin: 1em auto 1em auto;
           }
           article{ 
                background-color: pink;
                width: 80%;
                margin-bottom: 5px;
                margin-left: 5px;
           }
           article>footer{
                margin-top : 2px;
                background-color: #48F542;
                
           }
           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  
                   
                       Titre de l'article 1  
                       Paragraphe 1 de l'article 1  
                       Paragraphe 2 de l'article 1  
                       Paragraphe 3 de l'article 1  
                       pied de l'article 
              
               
                      Titre de l'article 2 
                      Paragraphe 1 de l'article 2  
                      Paragraphe 2 de l'article 2 
                      pied de l'article 
              
             
          
          
            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%;
            }
            body>footer{
                background-color: #ffff66;
                margin-top: 1em;
                clear: both;
            }
            section{
                background-color: #B0E4BE;
                width: 80%;
                margin: 1em auto 1em auto;
           }
           article{ 
                background-color: pink;
                width: 80%;
                margin-bottom: 5px;
                margin-left: 5px;
           }
           article>footer{
                margin-top : 2px;
                background-color: #48F542;
                
           }
           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>
                <article>
                    <h3> Titre de l'article 1 </h3>
                     <p> Paragraphe 1 de l'article 1 </p>
                     <p> Paragraphe 2 de l'article 1 </p>
                     <p> Paragraphe 3 de l'article 1 </p>
                     <footer> pied de l'article</footer>
                </article>
                <article>
                    <h3> Titre de l'article 2 </h3>
                    <p> Paragraphe 1 de l'article 2 </p>
                    <p> Paragraphe 2 de l'article 2 </p>
                    <footer> pied de l'article</footer>
                </article>
              </section>
          </main>
          
          <footer> 
            pied de page, liens légaux, contact
          </footer>
           
         
    </body>
</html>