[LOGO]

HTML et CSS

Le but de ce TP est de se familiariser avec la syntaxe du HTML et du CSS.


Au moment de rendre votre rapport, pensez que vous devez aussi rendre l'image correspondant à l'arbre du document.


Exercice 1 : Document HTML de base, le retour !

  1. Copiez-collez le rapport que vous avez écrit au TP précédent pour en reprendre l'en-tête et la structure générale, mais en l'adaptant aux exercices de ce nouveau TP. On devrait donc avoir quelque chose comme : 
    <!DOCTYPE html>
<html lang="fr">
  <head>
   <meta charset="UTF-8">
   <title>Compte-rendu de TP2</title>
  </head>
  <body>
   <h1>Compte-rendu de TP2</h1>
   <p>Vincent Jugé</p>
   <h2>Exercice 1&nbsp;: Document de base, le retour&nbsp;!</h2>
  …
 </body>
</html>

  2. Ajoutez à votre compte-rendu la phrase suivante : 
    Les tags HTML commencent par une balise ouvrante <foo> et finissent par une balise fermante </foo>.

    Note : pour votre compte rendu, il vous faudra surement utiliser les entités &lt; qui correspond à < et &gt; qui correspond à >.
  3. Comment mettre en gras ou en italique ?
    Astuce : ouvrez le fichier HTML correspondant au sujet de TP dans le navigateur avec un click bouton droit "View Page Source" puis cherchez le mot Shibboleet avec un Ctrl-F, cela devrait être juste au dessus.
  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. Pourquoi avoir écrit "Compte-rendu de TP 2" dans l'en-tête puis dans le corps du document ?
  7. Ajoutez un lien (le tag a) vers le cours avec comme titre cours de programmation web.
  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 !

Exercice 2 : Les listes et les tables

  1. Dans votre compte-rendu, écrivez la liste suivante sous forme d'une liste numérotée 
    - maths
- physique
- français
  2. Recopiez le code de la liste de la question précédente et modifiez-le pour que la liste ne soit plus une liste numérotée mais une liste à puces. Les items seront dont précédés de petits cercles au lieu de chiffres.
  3. Dans votre compte rendu, écrivez la table de multiplication suivante sous forme d'une table HTML 
       1  2  3  4
1  1  2  3  4
2  2  4  6  8
3  3  6  9 12
4  4  8 12 16
  4. Modifiez la table pour que la première ligne et la première colonne soient considérées comme des titres (respectivement de colonnes ou de lignes).
  5. On souhaite ajouter une case faisant 2 colonnes et une case faisant deux lignes dans une nouvelle table.
    Allez chercher dans la spécification du Standard HTML5 comment faire pour avoir de telles cases et expliquez dans votre rapport comment vous avez fait pour trouver l'information.

Exercice 3 : Mon compte-rendu est trop stylé !

Voici un petit exercice pour voir comment appliquer des styles s'appuyant sur les balises du document.

  1. Le titre de l'exercice courant se trouve normalement dans une balise balise h2. Ajoutez à cette balise un attribut style qui permet de mettre le titre de l'exercice en orange.
  2. Déclarez une balise style à l'intérieur des balises head du document, puis faites en sorte que tout le document utilise une police sans-serif.
  3. Faites en sorte que la balise h1 corresponde à une police de 24 points, la balise h2 à une police de 18 points et la balise h3 à une police 16 points.
  4. Faites en sorte que les balises h2 soient affichées en bleu marine, à part le titre de cet exercice (qui doit rester en orange).
  5. Faites en sorte que le titre du compte-rendu de TP soit centré.
    Pour cela, vous allez créer une classe "centered" et ajouter un attribut class à la balise englobant le titre du compte-rendu. Déclarez ensuite que le style pour la classe "centered" est centré.
  6. On veut que votre nom soit aligné à droite. Commencez par déclarer votre nom entre des balises div puis ajoutez une classe right permettant d'aligner le texte à droite.
  7. Faites en sorte que le lien vers le cours de programmation web (que vous avez créé à l'exercice 1) soit en rouge si la souris n'est pas sur le lien et en bleu canard si la souris survole le lien.
    Conseil : Vous utiliserez pour cela les pseudo-classes des liens.
© Université Gustave Eiffel