Utilisation d'ordinateurs en réseau
TP numéro 2
7 février 2017
Jean Méhat

Le travail effectué depuis le TP numéro 1

Avant 16 heures 30, vous devez remettre les travaux que je vous ai demandé d'effectuer depuis le TP numéro 1 : d'une part, envoyer le contenu de votre page de CV purement HTML et d'autre part un lien vers la cheat sheet de votre choix sur les CSS.

Ces deux choses sont à envoyer par mail avant l'heure limite à l'adresse jm@ai.univ-paris8.fr avec un sujet qui commence par [UDOR]. Le contenu de la page de CV doit être envoyée sous la forme d'un fichier attaché ; le lien vers la cheat sheet comme un URL dans le corps du mail ; je ne corrigerai pas les envois sous une autre forme (par exemple un lien vers le CV ou un fichier attaché pour la cheat sheet).

Quelques expériences avec les CSS

Ces expériences sont destinées à vous faire manipuler des fichiers HTML avec des CSS simples. Vous n'êtes pas obligé de les mettre en oeuvre si vous pensez qu'elles ne vous apporteront rien. La partie importante du TP est la suivante.

On s'est posé la question en cours de ce qui se passait quand on donnait des indications contradictoires pour un même élément HTML, par exemple qu'on indiquait à un endroit que le fond doit être bleu et ailleurs qu'il doit être rouge. Les deux expériences qui suivent apportent des éléments de réponse ; le premier est bien connu, le second un peu moins.


À faire : dans la partie <style> de l'en-tête, indiquer qu'un paragraphe doit avoir un fond bleu et que les éléments de la classe toto doivent avoir un fond rouge avec:

	  <style>
	    p { background-color: blue; }
            .toto { background-color: red; }
  	  </style>
	
Vérifier qu'un paragraphe normal est affiché avec un fond bleu ; vérifier qu'un <h4> de la classe toto est affiché sur fond rouge. Observer ce qui se passe pour un paragraphe de la classe toto. En tirer une hypothèse générale sur ce qui se passe quand on a une indication pour un type d'élément et une autre contradictoire pour la classe de cet élément.


À faire : dans la partie <style> de l'en-tête, indiquer que les éléments de la classe toto doivent avoir un fond rouge et ceux de la classe tata un fond vert, par exemple avec

	  <style>
            .toto { background-color: red; }
            .tata { background-color: green; }
  	  <style>
	
Vérifier que des paragraphes de la classe toto et de la classe tata s'affiche bien comme prévu. Observer comment s'affichent des paragraphes de la classe "toto tata" et de la classe "tata toto". En tirer une hypothèse générale et inventer une méthode pour la vérifier.


On a vu en cours que le contour d'un élément comprend du bourrage (padding), éventuellement un cadre (border) et qu'il est entouré de marges (qui n'appartiennent pas à l'élément).

À faire : avec les mêmes indications de style que dans l'exercice précédent, comparer l'effet d'un titre suivi de deux paragraphes de la classe tata avec celui d'un titre et de deux paragraphes sans classe regroupés dans un div de la classe tata, comme dans

	  <h4 class="tata">titre 4</h4>
	  <p class="tata">Premier paragraphe</p>
	  <p class="tata">Second pagragraphe</p>
	
à comparer avec
	  <div class=tata>
	    <h4>titre 4</h4>
	    <p>Premier paragraphe</p>
	    <p>Seconde paragraphe</p>
	  </div>
	

À faire : ajouter dans la partie CSS de l'en-tête une indication que les éléments de la classe encadrer doivent être entourés d'un cadre, par exemple avec

	  .encadrer { border-style: solid; border-width: 3pix; }
	
Observer comment sont affichés des paragraphes, des div, des span quand ils appartiennent à cette classe encadrer. On peut changer la couleur du cadre avec border-color.


Vous avez observé dans les expériences précédentes qu'entre deux paragraphes (disons p1 et p2), il y a de l'espace qui n'appartient pas aux paragraphes : c'est certainement de la marge. On voudrait déterminer si cette marge appartient pour moitié à p1 et pour moitié à p2, ou bien si c'est la marge inférieure de p1 et que p2 n'a pas de marge supérieure, ou bien finalement si p1 n'a pas de marge inférieure et qu'il s'agit de la marge supérieure de p2. Comment procéder ?

Votre CV avec les CSS

Il s'agit ici de la partie principale du TP : j'espère que vous y consacrerez la plus grand partie de votre temps. Reprenez la page purement HTML que vous m'avez envoyée au début du TP et efforcez-vous d'améliorer sa présentation en utilisant les CSS. Envoyez-moi par mail, avant 18 heures 15, un lien vers cette page (comme d'habitude, à l'adresse jm@ai.univ-paris8.fr avec un objet qui commence par [UDOR]).