Aller au contenu

TP - HTML⚓︎

Compte rendu uniquement pour le deuxième exercice

Découvrir HTML⚓︎

Exercice 1

Cette exercice va nous permettre de comprendre comment on crée des pages web (un des services d'internet)

  1. Ouvrir le lien suivant
  2. Dans le navigateur, sur la page sur laquelle vous arrivez, faire un clic droit et choisir Afficher le code source de la page. Vous observez alors le code qui donne la page visitée. Comment semble structuré ce langage : par quoi commencent les phrases? par quoi finissent-elles ?
  3. Lire le document explicatif du langage HTML sur la page https://html.brunache.ovh/.

Modifier un document HTML⚓︎

Exercice 2

  1. Sur votre ordinateur, ouvrir le bloc note.
  2. Enregistrer ce fichier vide et cliquant sur le menu Fichier puis Enregistrer sous... (choisir le type tous les fichiers). Se placer dans le répertoire du TP et choisir le nom de fichier suivant CR.html. Ce fichier servira de compte rendu.

  3. Recopiez dans ce fichier de compte rendu le squelette de document HTML suivant :

    <!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
    <h1>Compte-rendu de TP</h1>
    <p>
    Votre nom ici !
    </p>
    <h2>Exercice: Document de base</h2>
    <h3>À quoi servent les tags h1, h2 et h3 ?</h3>
    <p>
    votre réponse ici
    </p>
    <h3>Question suvante</h3>
    <p>
    Réponse suivante
    </p>
    </body>
</html>
<!-- NE RIEN ECRIRE EN DESSOUS -->

    Remplacez ensuite "Votre nom ici !" par votre nom.

  4. Ouvrez le fichier dans un navigateur web pour afficher le résultat : pour cela, allez chercher le fichier dans l'explorateur de fichier et ouvrez le avec un navigateur. 3.Placez les deux fenêtres côte à côte, à chaque modification du fichier html dans le bloc note, enregistrez le et actualisez la vue dans le navigateur (F5). Par la suite vous répondrez aux questions suivantes dans le fichier html.

    1. A quoi servent les tags h1, h2 et h3 ?
    2. A quoi sert le tag p ?
    3. Comment mettre en gras ou en italique ?
    4. Et comment faire pour mettre un mot à la fois en gras et en italique ?
    5. En fait, votre compte rendu est pas vraiment en HTML, vous devriez organiser les questions pour qu'elles soient automatiquement numérotées par le navigateur. Comment faire ? Modifier votre compte-rendu en conséquence.

    6. On souhaite que le titre de la fenêtre du navigateur soit "Compte-rendu du TP". Comment faire ?

      Note : la balise head possède un élément title.

    7. Ajoutez un lien (le tag a) vers le lien de l'exercice 1 avec comme titre lien vers site de l'exercice 1.

    8. Prenez une feuille de papier puis dessinez l'arbre des différents tags correspondant à votre compte rendu. Attention à bien respecter quel tag se trouve déclaré dans tel autre.

    9. Avec votre smartphone (ou celui du voisin), prenez une photo de la feuille de papier sur laquelle vous avez dessiné l'arbre et envoyez-la vous par mail. Puis allez dans vos mails pour récupérer l'image et la sauvegarder sous le nom de mon-super-arbre.jpg dans le répertoire tp2.

      Utilisez ensuite le tag img pour inclure l'image dans votre compte rendu.Attention, cela risque d'être un peu gros visuellement, il vous faudra sûrement jouer avec les attributs width et height de img pour avoir une image de dimensions acceptables.

      PS : N'oubliez pas l'attribut alt du tag img !