Back

Correction TP HTML les balises sémantiques

Correction TP HTML les balises sémantiques

  1. Objectifs

    • ِ




  2. Liste des exercices

    1. Exercice 01
      • Énoncé
        Correction

    2. Exercice 01
      • Énoncé
        Correction

        <!DOCTYPE html>
        <html>
        
        <head>
        <title>HTML5</title>
        <meta charset="utf-8"/>
        </head>
        
        <style>
        body {
            font-family:Verdana,sans-serif;font-size:0.8em;
        }
        header,footer,section,article {
            border:1px solid grey;
            margin:5px;margin-bottom:15px;padding:8px;
            background-color:white;
        }
        header,footer {
            color:white;background-color:#444;margin-bottom:5px;
        }
        section {
            background-color:#ddd;
        }
        nav ul  {
            margin:0;padding:0;
        }
        nav ul li {
            display:inline; margin:5px;
        }
        </style>
        
        <body>
        
        <header>
        <h1>Monday Times</h1>
        </header>
        
        <nav>
        <ul>
          <li><a href="#news">News</a></li>
          <li><a href="#sports">Sports</a></li>
          <li><a href="#weather">Weather</a></li>
        </ul>
        </nav>
        
        <section id="news">
        
        <h2>News Section</h2>
        
        <article>
        <h3>News Article 1</h3>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        </article>
        
        <article>
        <h3>News Article 2</h3>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        </article>
        
        </section>
        
        
        <section id="sports">
        
        <h2>Sports Section</h2>
        
        <article>
        <h3>Sports Article 1</h3>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        </article>
        
        <article>
        <h3>Sports Article 2</h3>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        </article>
        
        </section>
        
        
        <section id="weather">
        
        <h2>Weather Section</h2>
        
        <article>
        <h3>Weather Article 1</h3>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        </article>
        
        <article>
        <h3>Weather Article 2</h3>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum
        ipsum lurum hurum turum ipsum lurum hurum turum.</p>
        </article>
        
        </section>
        
        
        <footer>
        <p>&#169; 2014 Monday Times. All rights reserved.</p>
        </footer>
        
        </body>
        </html>



Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement