Travaux dirigés 2 HTML


Travaux dirigés 2 HTML

  1. Objectifs

    • Dans ce TP, vous allez découvrir la mise en forme d’un texte avec le langage HTML5.
    • Être capable d’ajouter un style CSS



    1. Énoncé
        1. Q1
          • Tapez le contenu de la page d’accueil ci-dessous dans un nouveau document dans votre éditeur de texte. Copiez-le exactement comme vous le voyez ici, en gardant la même ligne de rupture pour le plaisir de jouer le jeu.
            • Black Goose Bistro
              Le restaurant
              Le Black Goose Bistro propose des plats décontractés pour le déjeuner et le dîner dans une atmosphère détendue. Le menu change régulièrement pour mettre en valeur les ingrédients locaux les plus frais.

              Restauration
              Tu t’amuses. On s’occupe de la cuisine. Black Goose Bistro peut gérer des événements allant des collations pour une rencontre aux élégantes collectes de fonds d’entreprise.

              Lieu et horaires
              Seekonk, Massachusetts;
              Du lundi au jeudi de 11h à 21h ; Vendredi et samedi, de 11h à minuit

        2. Q2
          • Sélectionnez “Enregistrer” ou “Enregistrer sous” dans le menu Fichier pour afficher la boîte de dialogue Enregistrer sous. La première chose que vous devez faire est de créer un nouveau dossier (cliquez sur le bouton Nouveau dossier sur les deux Windows et Mac) qui contiendra tous les fichiers du site. Le nom technique du dossier qui contient tout est le répertoire racine local.
            Nommez le nouveau dossier bistro et enregistrez-y le fichier texte sous le nom index.html. Le nom de fichier a besoin se terminer par .html pour être reconnu par le navigateur comme un document Web.
        3. Q3
          • Juste pour le plaisir, regardons index.html dans un navigateur.
            Utilisateurs Windows : double-cliquez sur le nom du fichier dans l’explorateur de fichiers pour lancer votre navigateur, ou cliquez avec le bouton droit sur le fichier pour l’option de l’ouvrir dans le navigateur de votre choix.
            Utilisateurs Mac : lancez votre navigateur préféré (j’utilise Google Chrome) et choisissez Ouvrir ou Ouvrez le fichier dans le menu Fichier. Accédez à index.html, puis sélectionnez le document à ouvrez-le dans le navigateur.
        4. Q4
          • Vous devriez voir quelque chose comme la page illustrée à la figure suivante.
          • exercices HTML

        5. Q5
          1. Ouvrez le nouveau document index.html s’il n’est pas déjà ouvert et ajoutez la déclaration DOCTYPE : <!DOCTYPE html>
          2. Mettez le document entier dans un élément racine HTML en ajoutant un <html> balise de début après le DOCTYPE et une balise de fin </html> à la toute fin du texte.
          3. Ensuite, créez l’en-tête du document qui contient le titre du page. Insérez les balises <head> et </head> avant le contenu.
          4. Dans l’élément head, ajoutez des informations sur l’encodage <meta charset=”utf-8″>, et le titre, “Black Goose Bistro”, entouré de balises d’ouverture et de fermeture <title>.
          5. Enfin, définissez le corps du document en enveloppant le texte contenu dans les balises <body> et </body>. Lorsque vous avez terminé, le document source doit ressembler à ceci (le balisage est affiché dans couleur pour le faire ressortir):
              <!DOCTYPE html>
              <html>
              <title>
              <meta charset=”utf-8″>
              <title>Bistro Black Goose</title>
              </head>
              <body>
              …………..Votre texte
              </body>
              </html>
          6. Enregistrez le document dans le répertoire bistro, afin qu’il écrase l’ancienne version. Ouvrez le fichier dans le navigateur ou appuyez sur Actualiser ou Rechargez s’il est déjà ouvert.
        6. Q6
          1. Ouvrez le document index.html dans votre éditeur de texte, s’il n’est pas déjà ouvert.
          2. La première ligne de texte, “Black Goose Bistro”, est le titre principal de la page, nous allons donc marquer en tant qu’élément Heading Level 1 (h1). Mettez la balise d’ouverture, <h1>, au début de la ligne et la balise de fermeture, </h1>, après, comme ceci : <h1>Black Goose Bistro</h1>
          3. Notre page comporte également trois sous-titres. Marquez-les en tant qu’éléments de niveau 2 (h2) dans un manière similaire. Je vais faire le premier ici ; vous faites de même pour “Traiteur” et “Localisation” et heures. <h2>Le Restaurant</h2>
          4. Chaque élément h2 est suivi d’un bref paragraphe de texte, alors marquons-les comme éléments du paragraphe (p) de la même manière. Voici le premier ; tu fais le reste : <p>Le Black Goose Bistro propose des plats décontractés pour le déjeuner et le dîner dans une atmosphère détendue. Le menu change régulièrement pour mettre en valeur les ingrédients locaux les plus frais.</p>
          5. Enfin, dans la section Restauration, je tiens à souligner que les visiteurs doivent simplement quitter la cuisine à nous. Pour mettre le texte en évidence, marquez-le dans un élément d’emphase (em) élément, comme indiqué ici : <p>Vous vous amusez. Nous nous occupons de la cuisine. Black Goose La restauration peut gérer des événements allant des collations pour une rencontre à l’élégant collectes de fonds d’entreprise.</p>
          6. Maintenant que nous avons balisé le document, enregistrons-le comme avant et ouvrons (ou recharger) la page dans le navigateur. Vous devriez voir une page qui ressemble beaucoup à celle de la figure suivante. Si ce n’est pas le cas, vérifiez votre balisage pour vous assurer qu’il n’en manque aucun crochets angulaires ou une barre oblique dans une balise de fermeture.
          7. exercices HTML

        7. Q7
          1. Si vous travaillez en parallèle, la première chose à faire est d’obtenir une copie du fichier image sur votre disque dur afin que vous puissiez le voir en place lorsque vous ouvrez le fichier localement. Le fichier image est téléchargeable d’ici. Vous pouvez également obtenir le fichier image en l’enregistrant directement à partir de l’exemple de page Web en ligne à l’adresse learningwebdesign.com/5e/materials/ch04/bistro. Faites un clic droit (ou Ctrl-clic sur un Mac) l’image d’oie et sélectionnez “Enregistrer sur le disque” (ou similaire) dans le menu contextuel. Nommez le fichier blackgoose.png. Assurez-vous de l’enregistrer dans le bistrot dossier avec index.html.
          2. Une fois que vous avez l’image, insérez-la au début du titre de premier niveau en tapant l’élément img et ses attributs comme indiqué ici :<h1><img src="blackgoose.png" alt="logo">Bistro Black Goose</h1>
            • L’attribut src fournit le nom du fichier image qui doit être inséré, et l’attribut alt fournit du texte qui doit être affiché si l’image n’est pas disponible. Les deux attributs sont requis dans chaque élément img.
          3. J’aimerais que l’image apparaisse au-dessus du titre, alors ajoutez un saut de ligne (br) après l’élément img pour commencer le texte du titre sur une nouvelle ligne. <h1><img src=”blackgoose.png” alt=”logo”><br>Bistro Black Goose</h1>
          4. Séparons le dernier paragraphe en trois lignes pour plus de clarté. Déposez une balise <br> sur le endroits où vous voudriez que les sauts de ligne se produisent. Essayez de faire correspondre la capture d’écran de la figure suivante.
          5. exercices HTML

          6. Enregistrez maintenant index.html et ouvrez-le ou actualisez-le dans la fenêtre du navigateur. La page doit ressembler à celui illustré à la figure suivante. Si ce n’est pas le cas, vérifiez que le fichier image, blackgoose.png, se trouve dans le même répertoire que index.html. Si c’est le cas, vérifiez pour assurez-vous qu’il ne vous manque aucun caractère, tel qu’un guillemet ou une parenthèse fermante, dans le balisage de l’élément img.



        8. Q8
          1. Ouvrez index.html s’il n’est pas déjà ouvert. Nous allons utiliser l’élément de style pour appliquer une feuille de style intégrée très simple à la page. Ce n’est qu’une des façons d’ajouter une feuille de style ; les autres sont traités au cours CSS, Présentation de la cascade
            Feuilles de style.
          2. L’élément style est placé à l’intérieur de l’en-tête du document. Début en ajoutant l’élément style au document comme indiqué ici :
          3. Ensuite, saisissez les règles de style suivantes dans l’élément de style comme vous les voyez ici. Ne vous inquiétez pas si vous ne savez pas exactement ce qui se passe (même si c’est assez intuitif). Vous apprendrez tout sur les règles de style dans le cours cours CSS .
          4. Il est maintenant temps d’enregistrer le fichier et de le consulter dans le navigateur. Cela devrait ressembler à la page de la figure suivante. Si ce n’est pas le cas, allez sur la feuille de style pour vous assurer que vous n’avez pas manqué un point-virgule ou une accolade. Regardez à quoi ressemble la page avec nos styles par rapport aux styles par défaut du navigateur (figure suivante).
          5. exercices HTML

      • Solution
        • Essayez de faire l’exercice de votre côté avant de regarder la solution !


Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement