Differences

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

--- 2016_2017:s1:webdoc:td2 [2016/10/18 10:28]
logre [La notion d’héritage/cascade]
+++ 2016_2017:s1:webdoc:td2 [2016/11/09 11:48]
gjannon
@@ 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 77: / Line 84: @@
 Autre exemple, si vous définissez la balise ''body'' avec une couleur rouge (comme le montre la commande suivante), les autres éléments du ''body'' auront une couleur rouge par défaut :
-<code css> body {
+<code css> body { color: #FF0000; } </code>
-color: #FF0000;
-}
-</code>
 Si vous souhaitez une autre police pour les balises ''<h1>'' par exemple, il suffit de la définir à nouveau.
 <code css>
@@ Line 86: / Line 90: @@
 p {font-family: Tahoma, serif;}
 </code>
-Un sélecteur de la forme sélecteur1 > sélecteur2, au contraire, ne désigne que le cas où sélecteur2 est directement dans le sélecteur1. Par exemple, ceci peut être utile si on n'a pas envie que la règle s'applique à un ''li'' qui serait contenu dans une sous-liste de type ''ol''.
+Les navigateurs appliquent donc à un élément la règle la plus **spécifique** qui le concerne, donc préférentiellement une règle qui cible directement cet élément, s'il n'y en a pas ce sera la règle de son élément père, puis de son grand-père, etc, jusqu'à la règle par défaut.
+Un sélecteur de la forme sélecteur1 > sélecteur2, au contraire, ne désigne que le cas où sélecteur2 est directement fils de sélecteur1. Par exemple, ceci peut être utile si l'on souhaite que la règle s'applique à un ''li'' qui serait contenu dans une sous-liste de type ''ul'' seulement, mais pas ''ol''.
 <code css>
 ul > li { margin-left: 10em; }
 </code>
-<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
+<box round rgb(185,211,238) 95%|**A Faire :**  >
-  * {{:2013_2014:s1:docweb:css:gardencss0.html.zip|Sauvegarder le fichier ci-après}}
+  * Visualiser {{:2016_2017:s1:webdoc:gardencss0.html.zip|ce fichier}} avec un navigateur
-  * Visualiser le avec un navigateur
+  * 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.
-  * [[http://validator.w3.org/check|Validez votre fichier]] Votre objectif est de le rendre valide en séparant contenu et présentation.
+  * Recopier le fichier sous ''gardenWithoutCss.html'' puis séparer le style dans un fichier css.
-  * Recopier le fichier sous ''gardenWithCss.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|Valider votre fichier css]]  (conseil : vérifier la validité de votre fichier css; modifier votre fichier html; visualiser le html; itérer...)
+  * Conseil :
-  * Validez votre nouveau fichier html ''gardenWithCss.html'' résultant, il doit être conforme au fichier initial.
+       - vérifiez la validité de votre fichier css
+       - modifiez votre fichier html
+       - visualisez le html
+       - vérifiez la validité
+       - itérez
+  * Validez votre nouveau fichier html ''gardenWithoutCss.html'' résultant, il doit être conforme au fichier initial.
 </box>
@@ Line 111: / 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 118: / Line 131: @@
 Vous pouvez aussi combiner les éléments HTML qui regroupent les mêmes caractéristiques.
-Voici un exemple permettant de modifier en même temps l’ensemble des balises <hx>
+Voici un exemple permettant de modifier en même temps l’ensemble des balises <h//i//>
 <code css>
 h1, h2, h3, h4, h5, h6 {
@@ Line 126: / Line 139: @@
 </code>
 En CSS, des règles de reconnaissance de motifs déterminent les règles de style qui s'appliquent aux éléments de l'arbre du document. Ces motifs, nommés sélecteurs, sont variés, allant du simple nom d'un élément jusqu'aux riches motifs contextuels. Quand toutes les conditions d'un motif sont vérifiées pour un élément donné, celui-ci est retenu par le sélecteur.
 Dans un sélecteur, la sensibilité à la casse d'un nom d'élément du document dépend du langage utilisé pour le document. Par exemple, ceux-ci sont insensibles à la casse en HTML, par contre, ils le sont en XML.
 **Ils sont donc importants pour nous.**
@@ Line 134: / Line 148: @@
-<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
+<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 155: / 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 171: / 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.
+==== Le sélecteur id ====
-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 :
+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 198: / 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>

Cours au département INFO - IUT - UNS

User Tools

Site Tools

Differences

Page Tools