Exercice TP8

<!doctype html>
<html>
    <head>
        <title>Ma première page HTML</title>
        <meta charset="utf8">
        <style type="text/css">
            body {
                font-family: Arial;
            }
            #aide {
                background-color: #E6DFDE;
                padding: 20px;
            }
            h1 {
                width: 100%;
                padding: 5px;
                background-color: #F1BBAF;
                text-align: center;
            }
            .titreVert {
                color: green;
            }
            table {
                border-collapse: collapse;
            }
            td, th {
                border: 1px solid black;
                padding: 10px;
            }
            th {
                background-color: #F1BBAF;
            }
            h2 {
                margin-top: 70px;
            }
            li {
                margin-bottom: 20px;
            }
            img {
                width: 50px;
            }
        </style>
    </head>
    <body>

        <div id="aide">
            Avant de commencer, voici quelques indications :
            <ul>
                <li>La police de toute la page est Arial</li>
                <li>La couleur d'arrière plan du titre principal et des en-tête du tableau est #F1BBAF</li>
                <li>La couleur d'arrière plan de de ce bloc est #E6DFDE</li>
                <li>La largeur de l'image est de 50 pixels</li>
                <li>Chaque élément li a une marge extérieure inférieure de 20px</li>
                <li>Les titres h2 ont une marge inférieure de 70px</li>
                <li>L'utilisation de CSS dans les balises HTML est interdites, je veux que vous utilisiez des sélecteurs, des id et des classes (au moins un de chaque)</li>
            </ul>
        </div>

        <h1>TP 7 - Le langage HTML</h1>

        <img src="https://www.scribness.fr/wp-content/uploads/sites/41/2014/08/1456851427_Html.png" alt="HTML">

        <h2 class="titreVert">De quoi est composée une page Web ?</h2>

        <ul>
            <li>HTML : le fond</li>
            <li>CSS : la forme</li>
        </ul>

        <h2>HTML : Le fond</h2>

        <ul>
            <li>Langage créé en 1991</li>
            <li>HyperText Markup Language <strong>(Langage de balisage hypertexte)</strong></li>
            <li>Sert à placer des éléments sur une page web (images, titres, paragraphes, ...)</li>
        </ul>

        <h2 class="titreVert">CSS : La forme</h2>

        <ol>
            <li>Langage créé en 1996 (5 ans après le HTML)</li>
            <li>Cascading StyleSheets (Feuilles de style en cascade)</li>
            <li>Permet de définir le style des éléments HTML placés sur la page (couleur de texte, arrière plan, dimensions, police)</li>
        </ol>

        <h2>Quelques balises HTML</h2>

        <table>
            <tr>
                <th>Balise</th>
                <th>Description</th>
            </tr>
            <tr>
                <td>p</td>
                <td>Paragraphe</td>
            </tr>
            <tr>
                <td>a</td>
                <td>Lien</td>
            </tr>
            <tr>
                <td>img</td>
                <td>Image</td>
            </tr>
            <tr>
                <td>br</td>
                <td>Saut de ligne</td>
            </tr>
            <tr>
                <td>ul, li</td>
                <td>Liste à puce</td>
            </tr>
            <tr>
                <td>ol, li</td>
                <td>Liste ordonnée</td>
            </tr>
            <tr>
                <td>strong</td>
                <td>gras</td>
            </tr>
        </table>

    </body>
</html>