Differences

This shows you the differences between two versions of the page.

--- 2016_2017:s1:webdoc:td2 [2016/10/18 08:49] – [Combinaison de sélecteurs] logre
+++ 2016_2017:s1:webdoc:td2 [2016/11/09 15:11] (current) – [Mise en Pratique] logre
@@ Line 4: / Line 4: @@
 ** Toutes les questions du TD sont à répondre dans un document .html validé qui contiendra les noms et prénoms du binome **
+__**Disclaimer**__
+Même si nous adressons ici des problématiques d'affichage et de style, ce module n'a pas la prétention de faire de vous des designers.
+Veillez à vous concentrer sur la technique et non pas sur la beauté relative de vos oeuvres.
+[[http://www.i3s.unice.fr/~logre/docs/divers/ET.gif|Les gouts et les couleurs...]]
@@ Line 39: / Line 46: @@
 **Rappel de l'épisode précédent :**
 Si vous ne liez pas de feuille de style à un document xHTML et que vous l'ouvrez dans un navigateur, est-il affiché avec un style ?
-==== La syntaxe de CSS ====
+===== La syntaxe de CSS =====
 De manière générale, la syntaxe du CSS est très simple. Elle correspond au schéma suivant :
@@ Line 59: / Line 66: @@
 Vous pouvez choisir d'utiliser :
-  * un nom standard de couleur (voir http://www.w3schools.com/cssref/css_colornames.asp)
+  * un nom standard de couleur (voir [[http://www.w3schools.com/colors/colors_names.asp|le site du W3C]])
   * de donner les couleurs sous la forme ''rgb'' qui offre alors un large choix de couleurs en combinant le rouge, le vert et le bleu
   * de référencer une couleur par son code [[http://www.color-hex.com/|hexadécimal]]
@@ Line 92: / Line 99: @@
 <box round rgb(185,211,238) 95%|**A Faire :**  >
-  * {{:2016_2017:s1:webdoc:gardencss0.html.zip|Visualiser ce fichier avec un navigateur}}
+  * Visualiser {{:2016_2017:s1:webdoc:gardencss0.html.zip|ce fichier}} avec un navigateur
-  * Vérifiez la [[http://validator.w3.org/check|validité]] du document. Votre objectif est de le rendre valide en séparant contenu et présentation.
+  * Vérifiez la [[https://validator.w3.org/#validate-by-upload|validité]] du document. Votre objectif est de le rendre valide en séparant contenu et présentation.
-  * Recopier le fichier sous ''gardenWithCss.html'' puis séparer le style dans un fichier css;
+  * Recopier le fichier sous ''gardenWithoutCss.html'' puis séparer le style dans un fichier css.
-  * [[http://jigsaw.w3.org/css-validator|Validez votre fichier css]]
+  * [[http://jigsaw.w3.org/css-validator|Validez]] votre fichier css.
   * Conseil :
        - vérifiez la validité de votre fichier css
@@ Line 102: / Line 109: @@
        - vérifiez la validité
        - itérez
-  * Validez votre nouveau fichier html ''gardenWithCss.html'' résultant, il doit être conforme au fichier initial.
+  * Validez votre nouveau fichier html ''gardenWithoutCss.html'' résultant, il doit être conforme au fichier initial.
 </box>
@@ Line 116: / Line 123: @@
 | Couleur du texte | color: |
 | Texte en gras | font-weight:bold; |
-| Texte en italique | font-weight:italic; |
+| Texte en italique | font-style:italic; |
+| Texte souligné | text-decoration:underline; |
 | Couleur de fond | background-color: |
 </note>
@@ Line 141: / Line 149: @@
 <box round rgb(185,211,238) 95%|**A Faire :**  >
-  * Sauvegarder les fichiers html et css réalisés à l'exercice précédent sous ''gardenWithCss1.html'' et ''style1.css''
+  * Modifier la nouvelle feuille de style de l'exercice précédent pour que tous les titres s'écrivent dans la fonte : "Comic Sans MS", cursive, sans-serif
-  * Modifier votre nouvelle feuille de style pour que tous les titres s'écrivent dans la fonte : "Comic Sans MS", cursive, sans-serif
   * Que se passe-t-il si vous ne modifiez pas vos définitions de styles pour h1 et h3 ?
 </box>
@@ Line 161: / Line 168: @@
 </note>
-==== La notion de classe, de pseudo classe et d’id ====
+===== La notion de classe, de pseudo classe et d’id =====
-=== Les classes ===
+==== Les classes ====
-CSS ne se limite pas à la redéfinition des balises html, on peut également créer des classes qui pourront être appliquées à une section html à l’aide de l’attribut class comme le montre l’exemple ci-dessous :
+CSS ne se limite pas à la redéfinition du style des balises HTML.
+On peut également créer des classes, à l’aide de l’attribut ''class=""'', comme le montre l’exemple ci-dessous :
 <code css> <h1 class="nomDeLaClasse"> mon texte </h1> </code>
+Cela permet de regrouper plusieurs éléments, possiblement de natures différentes, en un ensemble.
+Par exemple, tous les éléments HTML de mon CV correspondant à de l'informatique peuvent utiliser une police particulière.
-On notera que la définition d’une classe commence par un « . ».
+On notera que la définition d’un motif visant une classe commence par un « . ».
 <code css>
 .nomDeLaClasse {
@@ Line 177: / Line 187: @@
 </code>
-=== Les pseudo-classes ===
+En résumé, une classe peut contenir zéro, un ou plusieurs éléments, à différents niveaux hiérarchiques de mon arbre xHTML.
+==== Les pseudo-classes ====
 HTML et CSS ont un mécanisme similaire aux classes, mais ad-hoc, pour faire le lien avec certaines fonctionnalités spécifiques, et en particulier les liens.
 Le HTML a deux utilisations pour l'élément <a> : faire un lien et poser une ancre. S'il est légitime de changer l'apparence d'un lien, il n'est probablement pas souhaitable que les ancres apparaissent de la même manière. Le sélecteur a:link désigne un lien par opposition à une ancre.
 Vous avez sans doute remarqué que certains navigateurs affichent des couleurs différentes les liens déjà visités. CSS permet de changer ça en utilisant un sélecteur ''a:visited''. Attention, '':visited'' s'utilise à la place de '':link'' : un lien déjà visité n'est pas reconnu par ''a:link''.
-Dans le même genre d'idée, il existe la pseudo-classe '':hover'', qui désigne un élément que l'utilisateur « touche », avec le pointeur de la souris par exemple. On trouve également les pseudo-classes '':focus'' et '':active'', qui ont des significations proches.
-=== Le sélecteur id ===
+Dans le même genre d'idée, il existe la pseudo-classe '':hover'', qui désigne un élément que l'utilisateur « touche », avec le pointeur de la souris par exemple. On trouve également les pseudo-classes '':focus'' et '':active'', qui ont des significations proches. Ceci permet de rendre plus réactif le style de vos pages statiques en fonction de l'utilisation qui en est faite.
-Il a presque la même fonction, à la différence importante qu'on ne peut l'utiliser qu'une seule fois dans la page, contrairement au sélecteur class. C'est pour cela qu'il est plutôt utilisé à la mise en page qu'à la mise en forme de caractères. On trouvera par exemple dans la page html :
+==== Le sélecteur id ====
+Comme son nom l'indique, il s'agit d'un identifiant donné à un élément.
+Par définition, un identifiant est unique. Plusieurs éléments ne peuvent donc pas avoir le même identifiant.
+Cela permet de sélectionner très facilement un bloc xHTML spécifique de notre arbre qui n'est pas discriminé par un type de balise spécial.
+On trouvera par exemple dans la page html :
 <code html>
 <div id="container">
    <div id="intro">
 </code>
-Et dans le fichier .css
+Et dans le fichier .css, le motif commençant par # suivant :
 <code css>
 #container {
@@ Line 204: / Line 221: @@
 </code>
+===== Mise en Pratique =====
-<box round rgb(185,211,238) rgb(220,226,255) 97%|A Faire :  >
-Nous voulons ajouter dans le texte précédent différentes citations.
-Voici le code html ajouté :
+<box round rgb(185,211,238) 97%|**A Faire :**  >
+Nous voulons ajouter quelques citations sur notre site perso.
+Voici quelques exemples pour les moins éclairés :
 <code html>
 <h2> Citations </h2>
-	<q>
+  <q>Programs must be written for people to read, and only incidentally for machines to execute.</q>
-Les ordinateurs sont incroyablement rapides, précis et stupides ; les hommes sont incroyablement lents, approximatifs et brillants ; ensemble ils sont puissants au-delà de ce que l’on peut imaginer.
+  <address>Harold Abelson</address>
-	</q>  <address>Einstein</address>
+  <q>Any sufficiently advanced technology is equivalent to magic.</q>
-	<q>
+  <address>Sir Arthur C. Clarke</address>
-Si vous avez l'impression que vous êtes trop petit pour pouvoir changer quelque chose, essayez donc de dormir avec un moustique... et vous verrez lequel des deux empêche l'autre de dormir.
+  <q>The real danger is not that computers will begin to think like men, but that men will begin to think like computers.</q>
-	</q> <address>Dalaï Lama</address>
+  <address>Sydney J. Harris</address>
-	<q>
+  <q>Si debugger, c’est supprimer des bugs, alors programmer ne peut être que les ajouter.</q>
-	 Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid.
+  <address>Edsger Dijkstra</address>
-	</q> <address>Albert Einstein</address>
 </code>
-  * Remarquer les balises html5 utilisées ([[http://www.vectorskin.com/referentiels-standards-w3c/balises-html5/|en savoir plus]])
+Remarquez les balises html5 utilisées; ([[http://www.vectorskin.com/referentiels-standards-w3c/balises-html5/|en savoir plus]]).
-  * Nous obtenons la visualisation suivante qui ne nous plaît pas.
-{{ :2013_2014:s1:docweb:css:citations.png?800& |}}
-  * Modifier le fichier html en ajoutant uniquement des indications pour le fichier de style et le fichier de style pour que
-     * toutes les citations soient en gras
-     * les citations en français sont en "blue" et suivie de //par// Vous pourrez utiliser [[http://www.w3schools.com/cssref/sel_after.asp|le sélecteur "after"]].
-     * les citations en anglais sont en "aqua" et suivie de //by//
-         * [[http://www.w3schools.com/html/html_colornames.asp|en savoir plus sur les noms de couleurs]]
-         * [[http://www.w3schools.com/cssref/pr_class_display.asp|en savoir plus sur les formes d'affichages]]
-         * Attention, nous perdons le guillemet fermant... une idée?
-{{ :2013_2014:s1:docweb:css:citations1.png?800& |Nouvelle visualisation qui étonnamment nous satisfait!!}}
-  * J'ai une préférence pour une des citations. Je voudrais la faire apparaître en rouge sans donner d'informations de présentation dans la page html. Que proposez-vous ?
+La visualisation par défaut n'est pas satisfaisante. Modifier le fichier de style pour répondre aux critères suivants. Indice : [[http://www.w3schools.com/cssref/sel_after.asp|"after"]].
-  * Je réalise que les couleurs choisies pour les citations sont particulièrement moches, quel code modifiez vous ou donnez vous à un designer pour modification?
+  * toutes les citations soient en **gras**, les auteurs en //italique//
+  * les citations en français sont en violet et suivie de //par//
+  * les citations en anglais sont en vert et suivie de //by//
+  * j'ai une préférence pour une des citations, je voudrais la faire apparaître en rouge, que proposez-vous ?
 </box>