Une page web utilisant uniquement du XHTML

Une page web utilisant uniquement du XHTML 2

La même page avec le CSS en plus Source: http://www.csszengarden.com/ 3

Séparer le fond de la forme a plusieurs avantages : Personnalisation du design du site. Une plus grande lisibilité du code HTML quand les styles sont définis à part Mise en page homogène (ce qui contribue à donner un aspect professionnel à votre travail). Navigation accélérée, moins de données à télécharger quand le fond et la forme sont placés dans des fichiers séparés. 4

CSS (Cascading Style Sheets: feuille de style en cascade): Langage spécifique au Web, standard du W3C apparu dans les années 90. Fréquemment employé comme complément du langage HTML Former des feuilles de styles chargées de la mise en forme des documents web. Il gère l esthétique (couleurs, typographie) et diverses fonctionnalités. Champ d action: média screen (écran), médias print (imprimante), projection (présentations projetées), braille (tablettes à l usage des aveugles), embossed (impression en braille), aural/speech (propriétés auditives), handheld (assistants numériques) et tv (Web-TV) 5

Principe Une règle de style comprend : un sélecteur : il s agit des balises concernées par cette règle ; un bloc de déclarations : il indique les propriétés à attribuer à ces balises. Chaque déclaration est du type : propriété : valeur; Sélecteur Propriété1 :valeur 1; Propriété2 :valeur 2; { } Syntaxe d écriture d un style 7

Exemple: h1 {color : red ; background-color :yellow ;} h1 est le sélecteur, color est la première propriété qui détermine la couleur du texte de l élément, red la valeur attribuée à cette couleur, background-color désigne la couleur de fond est la seconde propriété yellow sa valeur. 8

Écriture d une règle de style Chaque déclaration se termine par un point-virgule. Une règle peut s écrire sur plusieurs lignes Commentaires Il est utile de commenter abondamment les feuilles de style, pour s y retrouver plus tard lorsqu il s agira d apporter des modifications. Il suffit de placer les commentaires entre les signes /* et */ : /* Voici un commentaire */ /* Et en voilà un autre, mais sur plusieurs lignes */ 9

Où doit-on placer le code CSS? Dans le fichier.html, entre des balises spéciales ou dans un autre fichier? Emplacement des styles Les règles de style peuvent se trouver : 1. Dans le code HTML, comme attributs de balises : ce sont des styles en ligne (utilisation déconseillée) ; 2. Dans l en-tête de la page web : feuille de style interne 3. Dans un fichier distinct : feuille de style externe, à appeler dans l en-tête de la page web. 11

1. Styles en ligne Dans le corps de la page HTML (entre <body> et </body>), Méthode à éviter autant que possible: mélange du contenu et de la mise en forme: Disparition de la clarté et l homogénéité apportées par les CSS. Difficulté à maintenir les pages. 12

2. Insérer des styles dans l en-tête <head> </head>du document Entre les balises <style> et </style>, ce code s appliquera à tout le document : Exemple: <style type="text/css"> h1 {color: blue;} </style> Sépare correctement contenu et mise en forme, p.e elle portera automatiquement sur tous les titres <h1> du document. la portée du style se limite au document HTML du fichier. 13

3. Feuille de style externe Ecrire dans un fichier à part (.css): Quand les règles de style sont applicables à plusieurs pages web La feuille de style est appelée par chacune des pages concernées Garantit l unité graphique du site et facilite les modifications. Contient l ensemble des règles définies. Feuille de style externe style.css Page web1 Page web2 Page web3 Page web4 14

3. Feuille de style externe (suite) Appeler la feuille de style dans l en-tête (<head>): balise <link> précise que le document une feuille de style externe Utiliser la règle @import: Précise le type de la feuille de style Permet aussi de lier une feuille de styles externe à son document HTML. Ce n est pas une balise HTML, mais une règle CSS 2. Déclaration dans l élément <style> de l en-tête du document : URL de la feuille de style 15

Sélection des éléments auxquels on veut attribuer un style donné. Si des balises de même type doivent avoir différentes mises en forme, elles seront identifiées par des noms, lesquels seront repris dans les sélecteurs. Le langage CSS accepte différentes formes de sélecteurs : Les sélecteurs de balises ; Les sélecteurs de classes : une classe est un nom donné à un ensemble d éléments HTML à distinguer ; Les sélecteurs d identifiants :un identifiant ou id est le nom attribué à un élément unique dans le document HTML ; Les pseudo-classes et les pseudo-éléments variantes pour certaines fonctionnalités, par exemple les liens. Les sélecteurs contextuels: Appliquer un style à un élément fonction de sa position relative par rapport à un autre dans la hiérarchie des éléments. 17

Sélectionner un seul élément: Simple Le sélecteur est constitué du nom de l élément sans les caractères de début < et de fin de balise />. Par exemple : Sélectionner plusieurs éléments: Appliquer le même style à plusieurs éléments différents en les énumérant et en les séparant par une virgule dans le sélecteur. Eviter de multiplier les définitions : Nous pouvons écrire le style suivant : 18

Le sélecteur universel *: Appliquer un style à tous les éléments avant la définition d une ou plusieurs propriétés. Par exemple, pour que la couleur du fond de tous les éléments soit le jaune, nous écrirons : Possibilité de modifier cette couleur de fond pour un élément particulier, en la redéfinissant uniquement pour celui-ci, 19

Appliquer un style à l élément dont l id a une valeur précise en donnant cette valeur au sélecteur et en le faisant précéder du caractère dièse (#). Le code XHTML : En écrivant le style suivant : L identifiant doit être unique dans une page, et les autres éléments <div> ont un texte noir. Ce type de définition est très ciblé car le style ne peut s appliquer qu à un seul élément du fait de l unicité de l identifiant id. ne peut être utilisé qu une seule fois 20

Utilisation de l attribut class On peut donner le même nom à autant de balises que l on veut. Exemple: Modifier le CSS en utilisant un point : Résultat: 21

Permettent d attribuer un style à une partie abstraite d un document non identifiable dans la hiérarchie d un document XHTML: Le premier caractère ou la première ligne d un paragraphe ou en fonction des actions prévisibles mais non déterminées de l utilisateur final: le fait de placer son curseur sur un lien ou un composant de formulaire, etc. 22

Les pseudo-classes applicables aux liens Spécifiques aux éléments possèdent un attribut href faisant référence à un document externe ou interne Pseudoclasse :link :visited Description Lien hypertexte qui n a pas encore été visité Lien visité (encore présent dans l historique du navigateur) Pour les employer, il faut faire précéder le nom de la pseudo-classe de celui de l élément selon le modèle suivant concernant l élément <a> : 23

Les pseudo-classes dynamiques Attribuer un style à un élément en fonction des actions effectuées par le visiteur (disparaissent avec le motif de leur création) Pseudo-classe :focus :hover :active Description qui possède le focus (par exemple pour une zone de saisie d un formulaire, lorsque le curseur clignote dedans) ; Elément survolé par la souris Elément activé (la souris pointant ce lien, son bouton est enfoncé). Les pseudo-classes diverses Pseudo-classe :first-child Description Premier enfant d une balise quelconque (qui suit immédiatement cette balise) ; 24

Ressemblant aux pseudo-classes, les pseudo-éléments apportent d autres types de précision en agissant sur une partie du contenu d un élément: Pseudo-classe :first-letter :first-line :before :after Description Première lettre du bloc première ligne du bloc avant la balise spécifiée après la balise spécifiée Exemple : 25

Sélectionner que les éléments dans un certain contexte Parent-descendant: element_parent element_enfant {Définition des styles;} Il est aussi possible de préciser la hiérarchie en appliquant plus de deux éléments en les séparant tous par un espace. Parent-enfant directs: element_parent > element_enfant {Définitions des styles;} Eléments adjacents (relation de fratrie) element1+element2 {Définitions des styles;} 26

Exemple: sélecteur parent-enfant directs Page.html Style.css 27

style.css 28

Si une règle de style vient contredire une règle précédente, c est en généra le dernier style défini qui s applique. Source: livre Réussir site web XHTML et CSS 29

Multiples feuilles de style Application de plusieurs feuilles de style à un même document, Par exemple: par le concepteur (qui est l auteur du document), le lecteur ( qui a pu ajouter ses choix personnels) et l agent (le navigateur qui souhaite appliquer une feuille de style propre). Problème: Risque de conflit si ces feuilles ont spécifié des valeurs différentes pour la même propriété du même élément Solution: La cascade permet de résoudre les conflits 30

Pour déterminer les priorités, les navigateurs font l inventaire de toutes les déclarations qui s appliquent à un élément donné, puis procèdent à la sélection en fonction de différentes règles: 1. Le média Trouver toutes les déclarations qui concernent l'élément et la propriété en question, pour le type de média visé. Celles-ci s'appliquent si le sélecteur correspond à cet élément ; 2. Origine Règles normales : auteur > utilisateur > agent Règles importantes : utilisateur > auteur > agent!important l'emporte sur!normal 3. Spécificité du sélecteur le spécifique l'emporte sur le général 4. Ordre d'apparition à origine, poids et spécificité égales, la dernière règle rencontrée l'emporte «Si deux règles de style sont contradictoires, la deuxième remplace la première, sauf si cette première règle a un degré de priorité (c est-à-dire de spécificité) supérieur à la deuxième». Source: http://www.openweb.eu.org/articles/cascade_css/ 31

Spécificité du sélecteur: La spécificité est définie à l aide d un nombre N de trois chiffres (en CSS 2), sous la forme ABC, et chaque chiffre est calculé de la manière suivante : A représente le nombre de sélecteurs d attributs id présents dans l ensemble du sélecteur. Exemple: Pour: #conteneur p #special {...} ; A=2 B représente le nombre de classes, de pseudo-classes et de sélecteurs d attribut présents dans le sélecteur. Exemple: Pour div.for a:hover{}; B=2 C représente le nombre d éléments XHTML utilisés dans le sélecteur. Exemple: Pour div p h1 {}; C=3 Les valeurs seront concaténées pour déterminer la spécificité d'un sélecteur. Exemple: li.red.level {} a=0 b=2 c=1 -> spécificités = 21 Source: http://marcarea.com/tuto/css-comprendre-lahttp://www.yoyodesign.org/doc/w3c/css2/cascade.html#specificit 32

Pour donner une importance à un style, il faut insérer le mot-clé!important en le plaçant entre la valeur attribuée à la propriété et le point-virgule qui termine la déclaration. Exemple: 33

Mise en forme des caractères Paragraphes et blocs de texte Bordures Un peu de deco: couleur et fond Listes tableaux 34

Propriétés Description valeurs font-family; Choix d une police de caractères Nom des polices séparés par une virgule font-size; Taille des caractères. Taille relative: em, ex, % ou px Taille fixe: pt, pc, cm, mm, in Mot-clé: small, medium, large font-weight; Epaisseur d écriture, c est-à-dire le degré de graissage de la police. font-style; Définit un style de l écriture Normal Italic Oblique Normal (par défaut) Bold (gras) Lighter (moins gras ) Bolder (plus gras) Text-decoration Définir différents effets underline:souligné overline: trait au-dessus, line-through:texte barré blink: clignotant Text-transform Afficher une partie du texte en minuscules ou en majuscules Capitalize: première lettre de chaque mot en majuscule Lowercase: tout en minuscules Uppercase: tout en majuscules none: valeur par défaut 35

Mapage.html Style.css 36

Propriétés Description Valeurs text-align text-indent line-height Modifie l alignement horizontal de tout le texte Crée automatiquement des alinéas au début de chaque paragraphe du texte Modifie la hauteur d une ligne de texte (Interligne minimum) Left: à gauche Center: centré Right: à droite Justify: justifié La longueur de la marge en px normal (valeur standard) ou valeur positive pour régler l espacement entre les lignes Mêmes unités que les tailles de polices, ou % de cette taille. Word-spacing Espacement entre les mots normal (par défaut), valeur positive ou négative, respectivement pour augmenter ou diminuer l espace entre les mots. Mêmes unités que les tailles de polices, sauf %. Et Bien d autres. 37

Plusieurs propriétés CSS pour créer des bordures : border-style : détermine le type de bordure (bordure pleine, en pointillés, en tirets, effet 3D...) ; border-width : détermine l épaisseur de la bordure (généralement en pixels px); border-color : détermine la couleur de la bordure. (utilisée de la même manière que color et background color) Astuces : La propriété border peut regrouper les valeurs de ces 3 propriétés: Exemple: border: 2px dotted red; Border s applique aux 4 côtés: (border-left, border-right, border-top, borderbottom) 38

Mapage.html Style.css 39

Propriétés Description Valeurs color Background - color La couleur du texte (mot-clé, code numérique hexadécimal, nombre entier ou pourcentage) Modifie la couleur de fond de la page Nom de couleur prédéfini ou code RVB Exemple: body{color:: #0000ff;} em {color: green;} a {color: rgb(30%, 80%,30%)} Nom de couleur prédéfini ou code RVB Récapitulatif des notations des couleurs 41

Propriétés Description Valeurs background-image backgroundattachment background-position background-repeat Insère une image de fond (indiquer où se trouve l image) Fixe l image du fond et seul le texte se déplacera. Position de l image par rapport au coin supérieur gauche Définit la façon de répéter l arrière plan background-image: url ("image.jpg"); Fixed: image de fond fixée Scroll: image de fond défile avec le texte (par défaut) top bottom left right center repeat repeat-x repeat-y no-repeat 42

Structurer l information Créer de menus Propriétés Description Valeurs list-style-type Indique quel type de puce ou quel mode de numérotation à utiliser Listes à puces: disc (cercle plein par défaut) circle (cercle vide) square (carré plein) Listes numérotées: decimal (1,2.. Valeur par défaut) decimal-leading-zero (01,02, ) lower-roman (i,ii, ) upper-roman (I,II, ) upper-latin (A,B,C) etc,. list-style-image Utilise une image comme puce url (nom de l image avec chemin relatif ou absolu) ou none (par défaut) List-style-position Modifie le décalage du texte par rapport aux puces (retrait des listes) outside: met en retrait (par défaut) inside : pas de retrait 43

Structurer les données Synthétiser des informations redondantes (comparatifs, listes de messages, etc.). Propriétés Description Valeurs table-layout Obtenir des colonnes de largeur fixe auto: largeur automatique (par défaut) fixed: largeur fixe border-collapse caption-side vertical-align Indique s il y aura fusion ou non des bordures qui se touchent dans le tableau Donne un titre au tableau (placée à l intérieur de <table> </table>) Indique quel doit être l alignement d une cellule par rapport à la rangée de cellules dont elle fait partie, lorsque la taille de cette rangée est supérieure à celle de la cellule. Et bien d autres,. collapse: fusion des bordures Separate: séparation des bordures top: titre au dessus du tableau (par défaut) bottom: titre sous le tableau baseline : alignement normal sur la première ligne (valeur par défaut), top : sur le haut de la rangée de cellules, middle : au milieu de la rangée, bottom : sur le bas de la rangée. 45

1. Modèle en boite 2. Positionnement des éléments 3. Propriétés particulières 46

Chaque élément est considéré comme une boîte Périmètres non obligatoires: Espaces de marges externes (margin), ou internes (padding) et une bordure (border) Représentation graphique du modèle de boîte selon le W3C Source: http://fr.selfhtml.org/css/formats/modele_boite.htm 48

Marge par défaut Plus de marge Toutes les balises de type bloc (excepté <div> ) possèdent par défaut des marges internes et externes Toutes les balises en ligne ont une valeur par défaut toujours nulle 49

Marges externes autour d un bloc: Situées au-delà de ses bordures. Elles servent à espacer les blocs entre eux Propriétés margin-left, margin-right, margintop, margin-bottom Valeurs auto, taille relative en em, px, % ou taille fixe en pt Marges internes d un bloc Se trouvent à l intérieur des bordures Propriétés padding-left, padding-right, padding-top, padding-bottom Valeurs auto, taille relative en em, px, % ou taille fixe en pt Source: livre XHTML et CSS cours et exercices 50

Largeur d une boite= largeur du contenu (width)+ dimensions de marges internes gauche et droite+ épaisseur de la bordure gauche et droite Idem pour la hauteur Largeur de l élément=? 5px 20px 250px 250+20+20+5+5=300pixels Interprétation différente des dimensions des blocs selon les navigateurs Largeur apparente= largeur spécifiée (width) Éviter d attribuer une largeur ou hauteur (width/height) à un élément doté de marges internes (padding) ou de bordures latérales/horizontales: définir plutôt les margin Source: livre CSS2 pratique du design web 51

I. Positionnement du flux courant ou normal (par défaut): Les éléments de type bloc se succèdent verticalement, les uns en dessous des autres. Les blocs occupent toute la largeur disponible dans leur conteneur. Les éléments en ligne se suivent sur la même ligne, les uns à la suite des autres (retour à la ligne quand il n y a plus de place dans le conteneur). Exemple: Invisible Occupe toute la largeur de son conteneur, le bloc <div> 53

II. Positionnement relatif, absolu, fixe Propriété position qui permet de définir le type de position pour l élément concerné Il est possible de placer un élément en indiquant un décalage (top, right, bottom et left) 54

1. Positionnement relatif: Par rapport à sa position dans le flux normal : pour décaler un élément par rapport à ses frères (propriété position: relative;) ; 300 px 5 em 10px Modifier la position du second paragraphe en le décalant de sa position normale de 15 px à gauche et 20 px vers le haut 55

2. Positionnement absolu: Par rapport au bloc conteneur (soit son parent s il est positionné ou le premier ancêtre positionné) pour découper la page en zones: (propriété position: absolute;) Positionnement par rapport au body et non le div 3. Positionnement fixe: Par rapport à l écran : pour conserver en permanence un élément à l écran (propriété position: fixed;). 56

III. Positionnement flottant Propriété float: left; ou float: right; Pour placer des éléments côte à côte, en fonction de la place disponible dans la fenêtre d affichage ou le bloc conteneur. Pour habiller une image par du texte, pour une galerie d images ou une suite de menus. Tout élément positionné en flottant est considéré de type bloc. Pour empêcher le flottement: propriété clear 57

La propriété visibility permet de masquer occasionnellement un élément tout en réservant dans la page la place qu il occuperait normalement, donc sans perturber la mise en page. Propriété visibility Valeurs visible (par défaut) hidden: l élément est masqué mais occupe toujours le même espace dans la page collapse=hidden, sauf dans les tableaux, où l espace est libéré lorsqu il s agit d une ligne entière ou d une colonne entière. 59

La propriété display permet de transformer une balise de type bloc en balise de type en ligne et inversement. Propriété display Valeurs inline : élément en ligne (valeur par défaut) block : bloc none : l élément est invisible et ses dimensions sont nulles. Et d autres valeurs pour les listes et les tableaux Différence entre visibility: hidden et display:none : Ces deux règles permettent de masquer un objet dans la page. Avec visibility: hidden; l objet est masqué, mais occupe toujours la même place qu auparavant dans la page. Avec display: none; l objet devient invisible également, mais sa place n est plus réservée sur la page (aucune boîte n est générée). 60

Positionnement du flux courant: Le placement classique suivant la structure hiérarchique du code HTML Le positionnement le plus souple, le plus fluide et qui ne causera pas de problèmes d affichage Positionnement relatif Un cas particulier du positionnement en flux Positionnement absolu ou fixe Indépendants du flux et ne reflètent pas la structure hiérarchique de HTML Créer des pages fluides, centrer un site entier, etc Positionnement flottant Indépendant du flux mais dépendant des autres éléments flottants Aligner plusieurs éléments côte à côte 61

Ce qu il faut retenir: Importance des langages de base pour le développement de sites statiques: HTML/XHTML et CSS XHTML= le contenu, CSS= la forme et la déco Penser à valider vos pages http://validator.w3.org/ Tester vos pages sur plus de deux navigateurs Avantages Convient aux sites web de petite taille, au contenu permanent ou rarement mis à jour. Inconvénients: Comme son nom l indique : le site est statique «ne bouge pas» Très peu adapté pour des sites dont les informations sont sujet à des modifications fréquentes nécessitant des mises à jour régulières. Fonctionnalités limitées en terme d interactivité 62