HTML TP 022018

apcpedagogie > Les cours de programmation > html > HTML TP 022018

HTML TP 022018

  • 19 octobre 2018
  • Posté par: Riadh HAJJI
  • Catégorie: html
860 vues


HTML TP 022018

  1. Objectifs

    • ِSavoir écrire le code minimum en HTML pour créer une page Web.

  2. Indications pour les exercices

    • Créer un dossier “html” sur le bureau, puis un sous dossier "HTML TP 022018".
    • On nommera les fichiers HTML comme suit : exercice1.html, exercice2.html etc. Pour les images on crée un dossier images, dans lequel on déposera l’ensemble des images nécessaires aux exercices.



  3. Rappel

      4. HTML est un langage imbriqué : les balises sont des instructions qui, insérées dans le document, indiquent au
      navigateur comment afficher leur contenu. Les balises sont donc interprétées par le navigateur, elles ne sont
      pas affichées à l’écran. Formellement, une balise HTML est un nom encadré par les caractères < (inférieur) et
      > (supérieur). Par exemple, <html>.

  4. Énoncé de l’exercice

    1. Les textes et les paragraphes

      • Créez un sous-répertoire dans le répertoire public_html pour ce TP
      • Créer une page HTML de base, à l’aide du “Bloc-notes” de Windows. Cette page comportera :
        • Une balise META pour fournir une description courte (deux à trois phrases courtes) de la page web.
        • Les balises adéquates pour fournir le nom de l’auteur de la page et une information sur les droits d’auteurs (auteur, année, mention de licence ou mention de type "tous droits réservés").

        • Un titre qui s’affichedans la barre du navigateur soit “apcpedagogie”.
        • Ce même titre doit être le titre du document
        • Le texte suivant (à saisir) : "Les textes et les paragraphes".
        • Mettre ce texte en gras, souligné, couleur bleu, centré.
        • Dans un nouveau paragraphe, d’écrire la liste des compétences acquises à l’ILITE en utilisant les listes à puces.
        • Créer un nouveau paragraphe contenant les lignes suivantes :
          • L’équation du second degré est de la forme : ax2 + bx + c = 0.
          • H2O est la formule chimique de l’eau.
        • Mettre ce paragraphe en italique puis l’aligner à droite.
        • Réalisez en HTML le système d’équations suivant :
          • X2 = X1 cos(α + β) – Y1 sin(α + β)
          • Y2 = X1 sin(a + b) + Y1 cos(a + b)
        • Enregistrer le fichier sous le nom "TP022018.html"
        • A l’aide d’un navigateur, ouvrer le fichier que vous venez d’écrire

    2. Espaces et retours à la ligne

      • A la fin de la page créer un nouveau paragraphe contenant les lignes suivantes :
        • Un titre de paragraphe: Espaces et retours à la ligne
        • Texte du premier paragraphe : La balise <br> insère un saut de ligne unique. Elle permet un retour à la ligne sans séparer le paragraphe.
        • Texte du deuxième paragraphe: La balise <br> est une balise vide, ce qui signifie qu’elle n’a pas de balise de fermeture . Elle s’écris <br /> (avec un espace devant le /).

    3. Le surlignage, ou mise en évidence, d’un mot ou expression

      • A la fin de la page créer un nouveau paragraphe contenant les lignes suivantes :
        • Un titre de paragraphe: Espaces et retours à la ligne
        • Texte du premier paragraphe : Ils existent plusieurs raisons de mettre un mot, une expression ou même une phrase en évidence. L’exemple le plus simple est la mise en GRAS d’un ou plusieurs mots. Ainsi, grâce au contraste généré, ces mots sauteront plus facilement aux yeux de vos lecteurs.
        • Texte du deuxième paragraphe: Pour mettre en évidence un mot ou groupe de mots, vous disposez de plusieurs balises : Gras, Italique … Une nouvelle balise est apparu en HTML5 : <mark>. La balise <mark> correspond à un coup de surligneur sur une feuille papier.
        • Texte du troisième paragraphe: Recopier le texte suivant
          • <strong> Texte en Gras </strong>
          • <em> Texte en italique, ou emphasis </em>
          • <mark> Texte passé au marqueur </mark>
          • <dfn> Terme à définir </dfn>
          • <code> Portion de code </code>
          • <kbd> Touche de clavier </kbd>
          • <var> Variable </var>
            		•
            Résultat attendue

            Texte en Gras
            Texte en italique, ou emphasis
            Texte passé au marqueur
            Terme à définir
            Portion de code
            Touche de clavier
            Variable

Sommaire du cours HTML


Abonnez vous à notre chaîne YouTube gratuitement