Ci-dessous deux exercices destinés à vous familiariser avec HTML.

Ne manifestez pas trop d'impatience ! HTML est vaste. Vous en découvrirez peu à peu d'autres aspects tout au long de ce MOOC !

Exercice 1

  1. Rendez-vous sur la page https://moodle.insa-toulouse.fr
  2. Clic-droit > Code source de la page : une nouvelle fenêtre s'ouvre
  3. Pour l'instant, vous n'êtes bien entendu pas en mesure de comprendre dans le détail le contenu qui s'affiche. Cependant, vous pouvez vous amuser à rechercher les balises évoquées dans la leçon 1.1 :
    • a, p
    • div, header, footer
    • link, meta, script
  4. Recherchez également les commentaires.
  5. Recherchez l'encodage.
  6. Vérifier la structure :
    • existence du <!DOCTYPE html>
    • existence de la partie HTML : balise ouvrante <html> et balise fermante </html>
    • existence de l'en-tête : balise ouvrante <head> et balise fermante </head>
    • existence du body

Exercice 2

  1. Cliquez ici pour télécharger le fichier exemple.html.zip. Sauvez-le dans le répertoire de votre choix, puis double-cliquez sur le fichier téléchargé afin de le décompresser ! Vous devez voir apparaître un fichier exemple.html. 
  2. Ouvrez le fichier exemple.html avec un navigateur, puis (en laissant ouverte la fenêtre du navigateur) avec un éditeur de texte de votre choix.
    1. Etudiez la structure du fichier exemple.html : existence du <!DOCTYPE html>, existence de la partie HTML, existence de l'en-tête, existence du body
    2. Etudiez les balises présentes dans la partie body : h1, h2, p, hr, em, b
    3. Etudier comment est structurée une liste à puces (balises li et ul)
    4. Etudier comment est structuré un tableau (balises table, tr, th et td)
  3. Modifier le fichier exemple.html selon les indications ci-dessous (et vérifiez à chaque fois le résultat : sauver le fichier avant de recharger la page dans le navigateur).
    1. Ajoutez des commentaires.
    2. Ajoutez une ligne à la liste à puces.
    3. Ajoutez une ligne au tableau.
    4. Pour ajouter une image à cette page (nous préciserons l'utilisation de la balise img un peu plus tard dans ce MOOC) :
      • déplacez une image (supposons qu'elle se nomme carte.png) dans le même dossier que celui où se trouve le fichier exemple.html
      • ajouter le code suivant au fichier exemple.html (par exemple après le tableau)  : <img src="carte.png" alt="une image"/>
  4. Vérifiez que votre fichier a une syntaxe correcte :
    1. Rendez-vous à l'adresse : http://validator.w3.org/ > Onglet : validate_by_upload
    2. Uploadez votre fichier et cliquez sur le bouton check.

Modifié le: samedi 15 septembre 2018, 17:47