Cours de HTML. Après les balises passons à la mise en forme  Structurer. Structurer.  Avant de pouvoir styler notre page, il nous faut améliorer sa.

Présentation au sujet: "Cours de HTML. Après les balises passons à la mise en forme  Structurer. Structurer.  Avant de pouvoir styler notre page, il nous faut améliorer sa."— Transcription de la présentation:

1 Cours de HTML

2 Après les balises passons à la mise en forme  Structurer. Structurer.  Avant de pouvoir styler notre page, il nous faut améliorer sa structure. Pour cela, nous allons utiliser des balises neutres, comme le div et le span, ainsi que des attributs très utiles : id et class.  Les divs :permettent de regrouper des balises Il est souvent utile de regrouper des balises entre elles car elles représente un ensemble. Par exemple, un article de journal est composé d'un titre, d'un contenu, d'une illustration et d'un auteur. 2

3  Une feuille de style CSS externe peut se faire avec le simple bloc-note, et il est d'usage de lui faire porter l'extension.css (style.css par exemple).  On la liera ensuite à la page html à l'aide d'un link placé dans l'en-tête de la page.  Mais on peut aussi déclarer les styles dans l'en-tête de la page, ou au sein des balises elles-mêmes. Cela peut- être intéressant pour appliquer des styles spécifiques et ils auront un ordre de priorité plus important. C'est ce qu'on appelle la "cascade". 3

4 Sommaire  Structure de base Structure de base  Exemple de feuille de style Exemple de feuille de style  Notion de cascades Notion de cascades  Enregistrement de la feuille de style Enregistrement de la feuille de style  Lectures complémentaires Lectures complémentaires 4

5 Structure de base 5 Pour chaque déclaration, la structure est toujours la même : Le sélecteur, c'est la balise (X)HTML (body ; h1 ; p, etc.), l'identifiant (id) ou la classe (class) ;balise (X)HTML La propriété, c'est l'attribut qu'on veut appliquer (font ; background ; margin ; etc.) Et enfin la valeur qui précise les caractéristiques de la propriété sélecteur { propriété: valeur; }

6 Exemple de feuille de style  Cet exemple de feuille de style (encore une fois, de base) donnera une page : o à fond blanc, o avec une police de caractère par défaut Verdana noire, o un titre de premier niveau bleu marine centré, o un titre de deuxième niveau rouge décalé de 15 pixels, o des liens passant du vert au gris avec un petit effet rouge non souligné au passage de la souris. 6 Fonctionne avec tous les navigateurs graphiques Propriétés utilisées : background-color color font-family ; font-size padding text-align ; text-decoration

7  A noter que les couleur sont ici sous la forme "white, black, blue" etc... pour plus de lisibilité mais qu'il convient plutôt d'utiliser les valeurs hexadécimales qui vont de #000000 (noir) à #ffffff (blanc)  Les tailles des polices de caractère sont ici exprimées en %, mais on peut aussi utiliser em qui est aussi une unité de longueur relative à privilégier (pour des raisons d'homogénéité d'affichage et d'accessibilité) aux unités absolues telles que les pt ou les pc.  À noter que bien que les px soient une unité relative, ils sont aussi à éviter car MSIE les interprète comme unité absolue...  Pour que les couleurs des liens changent selon leur état (non visité, visité, survolé, actif, ayant le focus), on utilise des pseudo-classes qui se déclarent par :link, :visited, :hover, :active et :focus. Il est important de respecter cet ordre de déclarations. 7

8  On commence une feuille de style en général par un "reset" pour mettre toutes les marges à zéro (intérieures padding et extérieures margin). Cela doit permettre d'avoir tous les navigateurs avec, à peu près, le même état de départ... 8 Code CSS html, body { margin: 0; padding: 0; } body { background-color: white; font-family: Verdana, sans-serif; font-size: 100%; } h1 { font-size: 200%; color: navy; text-align: center; } h2 { font-size: 150%; color: red; padding-left: 15px; } p,ul,li,td { color: black; } a:link { color: green; text-decoration: underline; } a:visited { color: gray; } a:hover { color: red; text-decoration: none; } a:active, a:focus { color: red; }

9 Appliquons a un code HTML simple ses caractéristiques 9 Code (X)HTML Titre principal Sous titre Un grand paragraphe Item 1 Item 2 Item 3 <a

10 Style en cascade  Pourquoi parle-t'on de "feuilles de style en cascade" (Cascading Style Sheets) ? La raison est très simple : on peut déclarer les styles à différents endroits, et selon ces endroits ils seront plus ou moins prioritaires. On obtient donc une cascade de styles.  Déclaration des styles dans une feuille de style externe : c'est de loin la meilleure chose à faire et la plus pratique à maintenir, mais c'est celle qui a le moins de poids  Déclaration des styles en interne, dans l'en-tête de la page : à ne faire qu'avec des styles particuliers à une page. Les styles déclarés auront plus de poids que ceux de la feuille de style externe et donc l'emporteront en cas de conflits.  Déclaration des styles en attributs des éléments html : à faire pour des mises en forme ponctuelles. Ces styles l'emporteront sur tous les autres. ... Il y a une 4ème possibilité, mais celle-ci est indépendante de la volonté du webmaster : ce sont les styles définis par l'utilisateur, s'il jamais il en déclare. Ils seront interprétés en priorité, et masqueront tous les autres. 10

11 Enregistrement d'une feuille de style  Il existe donc trois façons d'enregistrer les styles : dans une feuille de style externe dans une feuille de style interne dans le code au sein des balises html 11

12 1. Feuille de style externe Enregistrer le code CSS dans un fichier s'appelant (par exemple) "style.css", et mettre dans l'en-tête de la page html (entre les balises ) : Avec un doctype HTML 5 l'attribut type est inutile. Il est précisé media="all" dans les attributs de la déclaration de la feuille de style. Cela indique que cette feuille ne sera lisible par tous les types de médias (écrans, TV, imprimante...). Pour une feuille de style lisible seulement avec des écrans, on spécifiera media="screen", pour une feuille de style réservée à l'impression, ce sera media="print". 12

13 2. Feuille de style interne  Pour déclarer des styles qui ne s'appliqueront qu'à la page considérée, les styles sont à déclarer entre les balises suivantes :  Tout ceci est à placer, comme précédemment, entre les balises. 13....

14 3. Feuille de style CSS dans le code html ("inline")  De façon encore plus ponctuelle, si l'on veut attribuer un style à un seul endroit, on peut déclarer le style à l'intérieur d'une balise html à l'aide de l'attribut style. Par exemple : 14 notre chapitre <!-- -->

15 Détail de style  type="text/css" indique au navigateur que nous utilisons juste du texte pour décrire les styles, aucune fantaisie ici.  title="mes_styles" identifie simplement le style pour votre propre information.  media="all".Vous pouvez avoir une feuille de style pour décrire à quoi ressemble votre page sur un écran d'ordinateur (media="screen") et une autre complètement différente pour définir l'impression (media="print"). Il y existe d'autres médias comme « projection », « tv », « braille » et « aural ».  Maintenant vous pouvez comprendre la logique de ne pas employer « bold » et « italic ». Pour l'instant, nous emploierons seulement « all », qui est pour tous les usages.  Les caractères sont une manière de cacher le texte sur une page Web, on peut seulement le voir dans le code.  La première chose que nous allons faire est de définir le style du corps de la page. Tout ce qui est contenu entre les balises … se verra appliquer ce ou ces styles. 15 <!-- -->

16 Une feuille de style pour l’impression Une solution CSS qui remplace avantageusement la version imprimable d’un document. Votre site propose de nombreuses ressources : images, textes… que vos visiteurs aimeront peut-être imprimer afin de les consulter à tête reposée. Mais une mise en page web est rarement reproductible telle quelle sur papier : les outils de navigation (menus, boutons...) y sont inutiles, l'écran est rarement respectueux du format A4, et vos lecteurs préfèreraient peut-être se passer de vos belles couleurs au profit d'une économie sur leur cartouche d'encre. Bien-sûr, vous pouvez proposer une seconde version « imprimable » de vos documents. Mais vous gagnerez du temps en créant plutôt une simple feuille de style spécifique, qui permettra d'imprimer proprement votre document original depuis n'importe quel navigateur respectueux des standards. Naturellement, elle doit être étroitement adaptée à la présentation de votre page : il n'y a pas de feuille de style-type d'impression.navigateur respectueux des standards 16

17 Pour lier vos styles d'impression à vos pages XHTML  Votre feuille de style d'impression est différente de votre feuille de style « générale » : enregistrée dans un fichier séparé (par exemple, print.css), elle n'est utilisée par le navigateur que lorsque le visiteur imprime la page consultée. Dans ce cas, les règles qu'elle contient s'ajoutent aux règles de votre feuille de style générale. La feuille de style d'impression a alors priorité sur la feuille de style générale, puisqu'elle est spécifiquement dédiée au média d'impression (print). Le lien suivant doit être placé dans l'en-tête de votre page web : 17

18  Si vous utilisez une feuille de style interne Vous pouvez ajouter à la section … de votre en-tête les styles spécifiques pour l'impression grâce à la règle @media : Orientation et marges o Pour tout le contenu et pour spécifier une orientation Portrait, utilisez la règle : @page { size: portrait; } ; o Pour spécifier une orientation Paysage, utilisez la règle : @page { size: landscape; } ; o Pour spécifier la taille des marges (ici, 2cm), utilisez la règle : @page { margin: 2cm; } ; 18 @media print { … vos styles… }

19 o Pour un élément spécifique pour spécifier une orientation différente (ici paysage) pour l'impression d'un élément particulier de votre page web, utilisez la règle : @page paysage {size: landscape} ; o et pour l'appliquer par exemple à un tableau ou à une image, attribuez la valeur paysage à la propriété page de l'élément correspondant : table {page: paysage} img {page: paysage} ; 19

20 Style couleur o Arrière-plans o Pour spécifier un arrière-plan blanc, utilisez la propriété : background-color: #ffffff; ; o pour spécifier un arrière-plan sans image de fond, utilisez la propriété : background-image: none; ; o Avant-plan o Pour spécifier la couleur noire d'un avant-plan, utilisez la propriété : color: #000000; ; o pour modifier à l'impression la couleur d'une bordure (ici noir), utilisez la propriété : border-color: #000000; ; o Impression sélective o Pour empêcher l'impression d'un élément de votre page, utilisez la propriété : display: none; ; 20

21 o Sauts de page et lignes orphelines o pour empêcher qu'un encadré soit imprimé « à cheval » sur deux pages, utilisez la propriété : page-break- inside: avoid; ; o pour forcer un saut de page avant un élément, utilisez la propriété : page-break-before: always; ; o pour forcer un saut de page après un élément, utilisez la propriété : page-break-after: always; ; o Impression des URL o pour imprimer entre parenthèses à la suite des liens l'URL correspondante, utilisez : a:after { content: " (" attr(href) ") "; } ; 21

22 22