HTML et CSS

Le but de ce premier TP est double :

créer sa première page web ;
se familiariser avec la syntaxe du HTML et du CSS

Cette semaine comme toutes celles qui suivront, il est fortement recommandé de commencer par lire l'intégralité du sujet (ou au moins de l'exercice en cours) avant de répondre au question : cela vous permettra de mieux comprendre là où les exercices vont vous emmener !

Il est également recommandé de lire les sujets de TP à la maison avant la séance, et de commencer à faire les questions jusqu'à ce que cela devienne difficile, pour être prêts à profiter de la présence de vos enseignants pendant la séance de TP !
Ce conseil est particulièrement important si vous avez TP le jeudi ou le vendredi. En effet, le compte-rendu de ce TP devra être déposé sur la plateforme de elearning d'ici au dimanche 01/02 à 22:00 au plus tard.

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

Cette version du TP est spécialement adaptée aux élèves dont le système d'exploitation est Linux ou Mac OS. Une autre version est disponible si votre ordinateur utilise le système d'exploitation Windows.

Exercice 0 : On sort un papier et un crayon

C'est certes facile, mais tous les ans, certains élèves n'y parviennent pas…

Exercice 1 : On commence tranquillement !

Dans un premier temps, vous allez créer un espace sur votre compte où vous stockerez les TPs ainsi que les comptes rendus correspondants.
Bien sûr, pas de clickodrome, vous êtes grands, donc vous allez utiliser un terminal pour organiser les données.

Ouvrez un terminal puis créez un répertoire "progweb" dans votre répertoire personnel (home directory).
Rappel : la commande mkdir permet de créer un répertoire et cd permet de se déplacer dans les répertoires.
Créez à l'intérieur du répertoire "progweb" un répertoire tp1.
À l'intérieur du répertoire "tp1", lancez la commande suivante
```
gedit compte-rendu-tp1.html &
```
Ce fichier vous servira de compte-rendu de TP.
Si vous êtes sur MacOS et si gedit n'est pas installé, vous pouvez utiliser un éditeur alternatif, à condition de ne pas enregistrer votre document sous un format enrichi. Par exemple, vous pouvez créer votre document via la commande touch compte-rendu-tp1.html, puis l'ouvrir en utilisant le logiciel TextEdit, via la commande open -a TextEdit compte-rendu-tp1.html. Attention : il faudra l'enregistrer au format plain text, et bien conserver l'extension .html (et non pas .txt).
Un compte-rendu consiste à expliquer ce que vous avez fait pour traiter chaque question (une phrase par question est souvent suffisante).
Complétez le compte-rendu avec une explication de tout ce que vous avez fait depuis le début du TP.

Pour chaque TP de programmation Web, nous vous demanderons de rédiger un compte-rendu au fur et à mesure que vous faites le TP. Si vous ne finissez pas un TP lors d'une séance, il vous est demandé de le finir par vous-même et de le déposer sur la page elearning du cours.
Chaque compte-rendu devra être écrit en HTML. C'est d'ailleurs le sujet de l'exercice 2.

Exercice 2 : Document HTML de base

Recopiez dans votre fichier de compte rendu le squelette de document HTML suivant :

<!DOCTYPE html>
<html>
  <head>
    <title>Compte-rendu de TP1</title>
  </head>
  <body>
    <h1>Compte-rendu de TP1</h1>
    <p>
      Votre nom ici !
    </p>
    <h2>Exercice 0 : On sort un papier et un crayon</h2>
    <p>
      Voilà, c'est fait !
    </p>
    <h2>Exercice 1 : On commence tranquillement !</h2>
    <p>
      …
    </p>
    <h2>Exercice 2&nbsp;: Document HTML de base</h2>
    <h3>À quoi servent les tags h1, h2 et h3 ?</h3>
    <p>
      …
    </p>
    <h3>À quoi sert le tag p ?</h3>
    <p>
      …
    </p>
  </body>
</html>

Remplacez ensuite "Votre nom ici !" par votre nom.
Utilisez un navigateur Web pour afficher le résultat
Si le résultat ne s'affiche pas correctement (entre autres l'accent de "À quoi sert le tag p ?"), que manque-t-il comme information à la balise head pour que le fichier s'affiche correctement ?
Le résultat devrait ressembler à ceci, mais avec des informations supplémentaires.

À quoi servent les tags h1, h2 et h3 ?
À quoi sert le tag p ?
Remplacez les … des sections "Exercice 1" et "Exercice 2" par le texte que vous aviez écrit à ces deux exercices.

Dans la suite, nous vous demandons d'ajouter de nouvelles sections (une par exercice du TP) et de compléter votre compte-rendu.

Exercice 3 : Premier exercice de style

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 < qui correspond à < et > qui correspond à >.
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.
Et comment faire pour mettre un mot à la fois en gras et en italique ?
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.
Pourquoi avoir écrit "Compte-rendu de TP 1" dans l'en-tête puis dans le corps du document ?
Ajoutez un lien (le tag a) vers le cours avec comme titre cours de programmation web.
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.
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 tp1.
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 4 : Les listes et les tables

Dans votre compte-rendu, écrivez la liste suivante sous forme d'une liste numérotée
```
- maths
- physique
- français
	    
```
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.
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
	    
```
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).
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 5 : Mon compte-rendu est trop stylé !

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

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.
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.
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.
Faites en sorte que les balises h2 soient affichées en bleu marine, à part le titre de cet exercice (qui doit rester en orange).
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é.
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.
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.