Differences

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

--- 2015_2016:s1:webdoc:td2 [2015/11/08 15:35] – [La syntaxe de CSS] urli
+++ 2015_2016:s1:webdoc:td2 [2015/11/16 12:32] (current) – [Prélude : Rendre accessible sa page web] urli
@@ Line 2: / Line 2: @@
 Inspiré du cours de Gaëtan Rey.
+** Toutes les questions du TD sont à répondre dans un document .html validé qui contiendra les noms et prénoms du binome **
+===== Prélude : Rendre accessible sa page web =====
+<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
+Ouvrez le logiciel ''FileZilla'' présent dans le répertoire réseau ''R:'' : il s'agit d'un client FTP, un logiciel capable de se connecter à un serveur en utilisant le protocole FTP, afin de transférer des fichiers.
+Renseignez les informations suivantes :
+  * Hôte : linserv3
+  * Login : votre identifant
+  * Password : votre mot de passe
+  * Port : 22
+Lancez la connection, vous devriez voir des répertoires dans site distant.
+Créez un dossier ''web'' (clic droit dans Site distant, puis Créer un répertoire), ouvrez le et transférez les pages du dernier TD dedans.
+Vous devriez pouvoir y accéder au sein de l'université à partir de l'adresse suivante : http://linserv1/users/etudiant/n/nomIdentifiant/web/ où **nomIdentifiant** correspond à votre identifiant.
+L'accès est également possible de l'extérieur à partir de cette adresse : http://lindmz.unice.fr/users/etudiant/n/nomIdentifiant/web
+A votre avis, pourquoi l'URL est-elle différente dans l'université ?
+</box>
+===== CSS : Introduction =====
 Les feuilles de style en cascade nommées CSS (Cascading Style Sheets) servent à décrire la présentation des documents (X)HTML et XML. Les standards définissant CSS sont publiés par le W3C. Introduit au fin 1996, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.
@@ Line 75: / Line 100: @@
   * Validez votre nouveau fichier html ''gardenWithCss.html'' résultant, il doit être conforme au fichier initial.
 </box>
-<note>**La taille des caractères**
-Si vous fixez la taille de vos caractères, elle ne pourra pas évoluer en fonction de votre navigateur.
-Pour cette raison, vous pouvez utiliser des unités relatives qui vont permettre un redimensionnement des caractères à l'écran.
-Donc il vaut mieux éviter le point (noté pt), le centimètre (noté cm), ...  Vous préférerez le pourcentage % et le cadratin (notée em).
-%=1em=16pixels
-[[http://style.cleverchimp.com/font_size_intervals/altintervals.html|correspondance entre taille en html et en css]]
-[[http://www.w3schools.com/cssref/pr_font_font-size.asp]]
-</note>
 <note tip>**Quelques Tips**
@@ Line 104: / Line 115: @@
 | Couleur de fond | background-color: |
 </note>
+==== Combinaison de sélecteurs ====
+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>
+<code css>
+h1, h2, h3, h4, h5, h6 {
+     color: #009900;
+     font-family: Georgia, sans-serif;
+}
+</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.**
+  * [[http://www.yoyodesign.org/doc/w3c/css2/selector.html|En savoir plus sur les sélecteurs]]
+  * [[http://openweb.eu.org/articles/cascade_css|Cascade CSS et priorité des sélecteurs]] … qui explique l’ordre de priorité des sélecteurs et l’utilisation de !important.
+<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
+  * Sauvegarder les fichiers html et css réalisés à l'exercice précédent sous ''gardenWithCss1.html'' et ''style1.css''
+  * 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>
+<note>**Les polices de caractères**
+**AVANT**
+Le texte s'affiche avec les polices de caractères présentes sur l'ordinateur des visiteurs. Cela implique que vous ne pouvez pas utiliser n'importe quelles polices.
+Pour cela vous pouvez utiliser des politiques dîtes génériques qui se trouvent sur presque tous les ordinateurs.
+[[http://www.w3schools.com/cssref/css_websafe_fonts.asp|En savoir plus sur les fontes]]
+**Mais depuis CSS3**
+Vous pouvez définir des polices et les héberger sur votre propre serveur : elles seront téléchargées automatiquement au besoin.
+http://www.w3schools.com/css/css3_fonts.asp
+</note>
+==== La notion de classe, de pseudo classe et d’id ====
+=== 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 :
+<code css> <h1 class="nomDeLaClasse"> mon texte </h1> </code>
+On notera que la définition d’une classe commence par un « . ».
+<code css>
+.nomDeLaClasse {
+   font-size: small;
+   color: #008080;
+   font-weight: bold;
+}
+</code>
+=== 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 ===
+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 :
+<code html>
+<div id="container">
+   <div id="intro">
+</code>
+Et dans le fichier .css
+<code css>
+#container {
+   background: url(/001/zen-bg.jpg) no-repeat top left;
+   padding: 0 175px 0 110px;
+   margin: 0;
+   position: relative;
+   }
+#intro {
+   min-width: 470px;
+   }
+</code>
+<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é :
+<code html>
+<h2> Citations </h2>
+	<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.
+	</q>  <address>Einstein</address>
+	<q>
+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> <address>Dalaï Lama</address>
+	<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.
+	</q> <address>Albert Einstein</address>
+</code>
+  * Remarquer 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 ?
+  * 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?
+</box>