Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Importer

Bienvenue sur Scribd !

  • 5 vues

    RESPONSE_TD 4

    Transféré par

    Hichem Ayeb

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd

    RESPONSE_TD 4

    Transféré par

    Hichem Ayeb
    5 vues6 pages

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    5 vues6 pages

    RESPONSE_TD 4

    Transféré par

    Hichem Ayeb

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    Vous êtes sur la page 1sur 6

    ATELIER PROGRAMMATION WEB 1 TI1

    TD 4 : Les contenus embarqués en HTML et les


    balises structurantes de HTML5
    Exercice 1 :
    En utilisant les nouvelles balises sémantiques de HTML5, donnez le code html relatif à la
    structure de la page ci-dessous.

    RESPONSE :

    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jabeur</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 20px;
    background-color: #f9f9f9;
    }
    header {
    text-align: center;
    margin-bottom: 20px;
    }
    nav {
    margin-bottom: 20px;

    | ISET Bizerte 1
    ATELIER PROGRAMMATION WEB 1 TI1

    }
    nav ul {
    list-style-type: none;
    padding: 0;
    }
    nav ul li {
    display: inline;
    margin-right: 15px;
    }
    main {
    margin-bottom: 20px;
    }
    section {
    margin-bottom: 20px;
    }
    footer {
    text-align: center;
    margin-top: 20px;
    }
    .championne {
    font-weight: bold;
    font-size: 1.2em;
    }
    </style>
    </head>
    <body>

    <header>
    <h1>Jabeur</h1>
    <h2>Carnets de voyage</h2>
    </header>

    <nav>
    <ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">CV</a></li>
    </ul>
    </nav>

    <main>
    <section>
    <h3>À propos</h3>
    <p>C'est moi, Ons! Je suis né le 28 août 1994.</p>
    </section>

    <section>
    <h3>Je suis championne de tennis</h3>
    <p>J'ai commencé ma carrière ... (texte de l'article)</p>
    </section>
    </main>

    | ISET Bizerte 2
    ATELIER PROGRAMMATION WEB 1 TI1

    <footer>
    <p>Copyright Jabeur - Tous droits réservés</p>
    <p><a href="#">Me contacter !</a></p>
    </footer>

    </body>
    </html>

    Exercice 2 :
    L’objectif de cet exercice est de tester les nouveaux éléments de saisie (input) de HTML5.

    | ISET Bizerte 3
    ATELIER PROGRAMMATION WEB 1 TI1

    Créez la page web « formulaire.html » en vous aidant des « inputs » écrits à droite.

    Exercice 3 :
    Donnez le code html relatif à la structure de la page ci-dessous.

    RESPONSE :

    | ISET Bizerte 4
    ATELIER PROGRAMMATION WEB 1 TI1

    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fondant au chocolat</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 20px;
    background-color: #f9f9f9;
    }
    h1 {
    text-align: center;
    }
    h2 {
    margin-top: 30px;
    }
    .ingredients, .preparation {
    margin: 20px 0;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    }
    ul {
    list-style-type: disc;
    padding-left: 20px;
    }
    .video {
    text-align: center;
    margin-top: 20px;
    }
    </style>
    </head>
    <body>

    <h1>Fondant au chocolat</h1>

    <div class="ingredients">
    <h2>Ingrédients</h2>
    <ul>
    <li>200 g de chocolat</li>
    <li>100 g de beurre</li>
    <li>150 g de sucre en poudre</li>
    | ISET Bizerte 5
    ATELIER PROGRAMMATION WEB 1 TI1

    <li>3 œufs</li>
    <li>30 g de farine</li>
    </ul>
    </div>

    <div class="preparation">
    <h2>Préparation</h2>
    <ol>
    <li>Préchauffez le four à 180 °C (thermostat 6).</li>
    <li>Faire fondre le chocolat avec le beurre au bain-marie.</li>
    <li>Dans un saladier, fouettez les œufs avec le sucre jusqu'à ce que le
    mélange blanchisse.</li>
    <li>Incorporez le chocolat fondu, mélangez bien et ajoutez la
    farine.</li>
    <li>Versez la préparation dans un moule préalablement beurré.</li>
    <li>Enfournez pour environ 10 à 12 minutes.</li>
    </ol>
    </div>

    <div class="video">
    <h2>Video Recette</h2>
    <iframe width="560" height="315"
    src="https://www.youtube.com/embed/VIDEO_ID" title="Fondant au
    chocolat" frameborder="0" allow="accelerometer; autoplay; clipboard-
    write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
    </div>

    </body>
    </html>

    | ISET Bizerte 6

    Vous aimerez peut-être aussi