Résumé

Choisissez la simplicité et l’élégance du couple HTML5 et CSS3 pour créer vos sites web et mobiles avec style et panache !

Concevez progressivement un site web complet en suivant deux études de cas

Simplifiez vos pages en séparant mise en forme CSS et contenu HTML, pour gagner en clarté et en souplesse

Adaptez votre site à la consultation sur un smartphone ou une tablette

Comprenez l’imbrication et la hiérarchie des balises, maîtrisez les structures du HTML

Apprenez à écrire efficacement une feuille de style CSS, pour une présentation homogène

Changez sans peine la charte graphique de votre site, de la mise en forme des textes et images au positionnement des blocs

Illustrez vos contenus avec des images, sons, vidéos et animations Flash ou CSS3.

Cette cinquième édition prend en compte les dernières évolutions des navigateurs et des standards HTML5 et CSS3.

En annexes : Codage des principales couleurs • Spécificités des navigateurs Mozilla Firefox, Internet Explorer, Chrome, Safari, Opera • Aide-mémoire des propriétés CSS 2 et 3.

Biographie auteur

Ingénieur EFREI, Francis Draillard a exercé dans l’industrie, la recherche, la formation continue et l’enseignement supérieur. Il intervient comme professeur associé à l’EIGSI, école d’ingénieurs à La Rochelle. Concepteur web indépendant et conseil en entreprise, il contribue au site Framasoft dédié aux logiciels libres et à l’évolution de PluXml, système de gestion de contenu libre pour créer des sites modifiables en ligne.

www.editions-eyrolles.com

ÉDITIONS EYROLLES

61, bd Saint-Germain

75240 Paris Cedex 05

www.editions-eyrolles.com

Attention : la version originale de cet ebook est en couleur, lire ce livre numérique sur un support de lecture noir et blanc peut en réduire la pertinence et la compréhension.

En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, sur quelque support que ce soit, sans l’autorisation de l’Éditeur ou du Centre Français d’exploitation du droit de copie, 20, rue des Grands Augustins, 75006 Paris.

© Groupe Eyrolles, 2006, 2008, 2010, 2012, 2013, ISBN : 978-2-212-13689-0

Dans la collection Accès libre

Chez le même éditeur

Avant-propos

Des pages web ? Oui, mais avec du style ! Comment créer des sites à la fois esthétiques et faciles à mettre à jour ? Car si les pages que nous concevons ont belle allure, c’est bien ; mais qu’y a-t-il derrière, comment sont codées ces magnifiques pages ?

Sera-t-il facile de changer la charte graphique du site ? Ou de modifier la structure d’une page ? Sera-t-il possible de créer de nouvelles pages en réutilisant le travail de mise en forme déjà effectué ?

Bref, à quoi sert d’avoir une voiture rutilante, avec toit ouvrant, jantes alliage, rétroviseurs électriques et tout le tralala, s’il faut démonter le moteur pour faire la vidange ? C’est une comparaison exagérée, certes, mais qui a le mérite de poser clairement le problème.

Vous avez donc compris qu’au-delà du résultat affiché d’un site web, il faut penser à sa maintenance : rectifications, mises à jour, changements de mise en page doivent pouvoir...

Introduction au HTML et aux feuilles de style CSS

Que signifient HTML et CSS ?

Quels avantages nous apportent les feuilles de style ?

Comment se partagent-elles le « travail » de mise en page avec le code HTML ?

SOMMAIRE

Signification de HTML et CSS

Principes de base pour une page web

Principes d’une bonne écriture HTML/CSS

Intérêt des feuilles de style

Cette introduction nous emmène à la découverte de quelques notions fondamentales à propos du HTML et des feuilles de style CSS. Ce sera aussi l’occasion, à partir d’exemples, de poser les principes d’une bonne écriture des pages web.

Signification de HTML et CSS

Le sigle HTML correspond aux initiales de « HyperText Markup Language », c’est-à-dire langage de marquage hypertexte.

Cela signifie que la mise en place d’une page web (titres, paragraphes, images…) utilisera des caractères pour marquer d’une certaine façon les différentes parties du texte. Parmi ces caractères de marquage, certains correspondront à des liens vers d’autres pages web : ce sont des liens hypertextes.

Le HTML 4 a évolué vers l’appellation XHTML 1, avant de revenir à son nom initial HTML pour la version 5. Le « X » de XHTML vient de XML, soit « eXtensible Markup Language », langage plus complexe et plus strict que le HTML. C’est lui qui a inspiré la transition du HTML vers la forme plus rigoureuse qu’est le XHTML. Son successeur, le HTML 5, accepte à nouveau une syntaxe plus souple, tout en conservant les bases et les...

L’essentiel du HTML

Qu’est-ce qu’une page web et quelle en est la structure ? Quelles sont les règles d’imbrication des balises HTML ? Partons à la découverte du langage HTML 5, dont le codage de base est le même que celui de la version XHTML 1, compatible avec une gamme plus large de navigateurs.

SOMMAIRE

Principe des balises

Évolution de la norme HTML

Premières règles d’écriture HTML

Principales balises HTML

Deux catégories d’éléments : blocs et en ligne

Hiérarchie des éléments : l’héritage

Compléments sur les balises d’en-tête

Validation du code HTML

Dans le contenu d’une page web, chaque balise HTML représente un élément. Après avoir étudié l’utilisation de ces balises, nous nous intéresserons à leur imbrication : un élément est toujours inclus à l’intérieur d’un autre, ne serait-ce que celui qui délimite et englobe le contenu de la page. La hiérarchie entre ces éléments est importante à comprendre pour ensuite bien utiliser les feuilles de style.

Dans ce chapitre nous préciserons quelques termes, essentiels pour comprendre les feuilles de style. Toutes ces notions ainsi que l’essentiel des balises sont valables pour les deux normes XHTML 1 et HTML 5 ; les différences seront indiquées chaque fois qu’il s’en présentera.

Principe des balises

HISTOIRE Naissance du HTML

Le langage HTML fut inventé en 1990 par Tim Berners-Lee lorsqu’il travaillait au CERN de Genève (Centre Européen de Recherche Nucléaire). L’objectif était alors d’afficher des pages d’information ayant les propriétés suivantes :

• Les pages étaient reliées entre elles par des liens hypertextes (ces liens sur lesquels, aujourd’hui, nous n’arrêtons pas de cliquer !).

• Ces documents devaient être lisibles sur tous les ordinateurs, quel que soit leur système d’exploitation : Windows, Unix, Mac OS, etc.

Tim Berners-Lee a poursuivi ce travail en fondant le W3C, World Wide Web Consortium. Cet organisme regroupe les principaux acteurs du Web ; il standardise et fait évoluer les différentes normes du monde Internet.

C’est pour constituer un ensemble de pages reliées entre elles, accessibles de n’importe quelle machine sur le réseau, que le HTML fut créé, sur le principe du codage de portions de texte à l’aide de balises. Cette méthode reste bien sûr d’actualité, les pages du Web étant exclusivement codées avec des caractères.

Les différentes parties de texte sont donc délimitées par des « balises », qui donnent des indications de mise en forme ou de structuration, l’une d’elles (<a> comme ancre) servant à relier les pages entre elles par les fameux liens hypertextes.

Par exemple, la mise en italique du mot « bonjour » s’écrit :

<em>bonjour</em>

NORMES La balise <em> remplace la balise <i>

Difficile de résister à l’usage de cette balise <i> qui est si simple et intuitive : i comme italique ! À présent, la norme lui préfère la balise <em> (emphase) : elle est plus générale et indique une mise en relief du texte.

Ainsi, si cette balise <em> produit par défaut de l’italique, libre au concepteur d’indiquer dans sa feuille de style que cette mise en relief ne se fera pas en italique mais, pourquoi pas, en jaune sur fond rose… C’est très gai, non ?

Autre exemple d’élément (ici un titre de niveau1) :

<h1>Premier chapitre</h1>

Les mots ainsi encadrés par la balise <h1> seront écrits en caractères gras et de grande taille. Ils seront aussi plus clairement séparés du texte qui les entoure.

Évolution de la norme HTML

Après sa version 4, le HTML a évolué vers une norme dont la syntaxe est plus rigide, mais plus rigoureuse, d’où un code clarifié qui simplifie la maintenance des pages web. Cette version a été appelée XHTML 1, de façon à bien marquer cette orientation.

Son successeur, le HTML 5, a repris la dénomination initiale car il est redevenu plus tolérant pour le codage. Cependant, il reste fortement conseillé de conserver les bonnes habitudes introduites par le XHTML.

Ces pratiques éclairées n’ont rien de compliqué et consistent également à utiliser les feuilles de style CSS (Cascading Style Sheets), de façon à ne pas mélanger le contenu du texte et sa mise en forme. Nous allons étudier tout cela de façon progressive : après avoir posé la base que constitue le code HTML, nous passerons à l’étude des CSS.

NORMES
Méli-mélo de numéros pour les normes HTML/XHTML

Entre HTML et XHTML, les numérotations de versions ont été disparates, car au HTML 4 a succédé le XHTML 1 puis le HTML 5. Voici l’explication de ce cheminement sinueux :

• Apparu en 1997, le HTML version 4 a fait place en 2000 au XHTML 1, plus rigoureux dans ses règles d’écriture, la lettre « X » correspondant à un rapprochement avec le langage XML. La version suivante aurait dû être le XHTML 2 et induire une rupture technologique, mais la compatibilité nécessaire avec les sites et navigateurs existants rendait ce cap difficile à maintenir.

• C’est pourquoi le W3C a adopté en 2007 les propositions du WHATWG (Web Hypertext Application Technology Working Group) pour la création de la norme HTML 5. L’appellation HTML est reprise, car cette version 5 réintroduit quelques éléments et tolérances dont ont besoin les éditeurs Wysiwyg (what you see is what you get). Ces logiciels mélangent le contenu et la mise en forme, celle-ci s’effectuant à l’aide de la souris et sans écrire de code.

• Il existe également une version XHTML 5 dont nous n’aurons pas l’utilité dans cet ouvrage : hormis deux lignes d’en-tête, elle partage les mêmes balises que le HTML 5, mais donne l’accès à des données au format XML (eXtensible Markup Language) utilisant des balises personnalisables. Quant à la version XHTML 2, son développement a officiellement été abandonné en 2009.

Premières règles d’écriture HTML

Familiarisons-nous avec les principes de base qui valent pour l’écriture d’un fichier HTML : son nom d’abord, puis la façon d’écrire son contenu.

Règles pour les noms des fichiers

Chaque page web est un fichier dont le nom peut comprendre des lettres, des chiffres et des tirets. À éviter : les espaces, les caractères accentués et le « ç ». Son extension est généralement « .html ».

La première page du site et de chacun de ses sous-dossiers doit être nommée index.html (ou index.htm). En effet, c’est cette page de nom index qui s’affichera par défaut si l’internaute tape l’adresse de votre site sans préciser le nom du fichier, comme dans www.votresite.com. S’il n’existe pas de page nommée index, l’internaute ne verra alors qu’une liste de fichiers et de sous-dossiers, façon explorateur de fichiers…

REMARQUE Arborescence du site

Lorsque le site comprend des sous-niveaux, notez qu’il faut saisir dans la barre d’adresse le séparateur /, habituel également dans le monde Unix/Linux, tandis que l’explorateur de fichiers sous Windows utilise la barre oblique inverse ou antislash \…

Règles d’écriture des balises en HTML et XHTML

Nous avons vu que le passage du HTML au XHTML a apporté une écriture plus précise, pour plus de logique et de clarté dans le codage de nos pages web. Ces règles du XHTML sont simples à énoncer :

• Les balises s’écrivent toujours en minuscules.

• Chaque balise doit être refermée.

Le HTML 5 est plus tolérant, considérant par exemple que le début d’un nouveau paragraphe entraîne automatiquement la fermeture du précédent, même si celle-ci n’a pas été précisée. Cependant, la notation plus rigoureuse du XHTML est vivement conseillée : non seulement cette écriture reste valide en HTML 5, mais elle ne peut que faciliter la lecture du code et éviter des erreurs.

NORMES Fermeture des balises simples

En XHTML, toutes les balises doivent être fermées, y compris celles qui, n’entourant pas de contenu, ne s’écrivent pas par paires. Leur barre de fermeture est alors intégrée dans la balise elle-même :

• Saut de ligne : <br /> au lieu de <br>

• Tracé d’une ligne horizontale : <hr />...

Nouveautés du HTML 5

Découvrons comment le HTML 5 fait évoluer et simplifie le codage des pages web. Nous allons étudier les modifications et compléments apportés par cette nouvelle norme : orientations, nouvelles balises et attributs supplémentaires.

SOMMAIRE

Nouvelles orientations du HTML 5

Blocs et sections en HTML 5

Davantage de signification pour le texte

Images, sons, vidéos et animations

Contrôle précis des formulaires

À utiliser progressivement

Allons plus loin dans la découverte du HTML, en étudiant de plus près les évolutions apportées par la norme HTML 5. Ce sera également l’occasion de comprendre les orientations et la philosophie de cette dernière version.

Nouvelles orientations du HTML 5

Avant d’entrer dans le détail des spécificités et des nouveautés du HTML 5, voyons ensemble dans quelle direction cette nouvelle norme nous emmène et quels principes elle apporte pour les évolutions futures.

Évolution et compatibilité

L’essentiel des apports du HTML 5 consiste à donner davantage de sens au codage. Notamment, l’introduction de nouvelles balises spécialisées permettra de mieux repérer dans la page web les différentes parties qui la composent.

Plusieurs bénéfices sont attendus :

• une meilleure accessibilité pour les personnes handicapées, en particulier pour celles qui lisent les sites en mode texte ;

• une vue plus claire du code, qui permettra au développeur de s’y retrouver plus facilement pour la mise à jour des sites web ;

• la possibilité d’affiner le référencement des pages, pour les moteurs de recherche qui vont pouvoir exploiter les informations données par ces nouvelles balises.

Une philosophie de tolérance

Une autre orientation du HTML 5 concerne la compatibilité et la tolérance avec les versions précédentes du HTML. Ainsi, il sera possible d’écrire les balises en minuscules ou en majuscules, leurs attributs entourés ou non de guillemets et la barre de fermeture des éléments seuls sera facultative : par exemple, <br> et <br /> sont deux sauts de ligne aux normes HTML 5.

De même et toujours pour des raisons de compatibilité, les balises <b> et <i> seront à nouveau acceptées pour la mise en gras et en italique, en parallèle avec les balises <strong> et <em> dont l’emploi reste recommandé.

Enfin, la philosophie du HTML 5 est pleine de pragmatisme : si la norme fait évoluer le codage, ajoutant de nouveaux éléments et en délaissant d’autres, son principe est que les navigateurs doivent toujours prendre en compte l’existant, c’est-à-dire toutes les formes de codage qui auront été utilisées dans le passé. C’est la garantie, pour nos pages Internet, de conserver une mise en forme immuable dans le temps, quelles que soient les évolutions futures.

Des balises d’en-tête simplifiées ou améliorées

Nous avons vu que les balises DOCTYPE et html sont beaucoup plus simples en HTML 5 qu’avec les versions précédentes. Dans le même esprit, le lien avec une feuille de style et un fichier JavaScript s’écrivent en HTML 5 avec peu d’attributs :

<link rel="stylesheet" href="monstyle.css" />

<script src="monscript.js"></script>

Les mêmes liens, écrits suivant la norme XHTML, utilisent un attribut type qui n’apporte pas d’information supplémentaire, mais rend plus complexe leur écriture :

<link rel="stylesheet" href="monstyle.css"

type="text/css" />

<script src="monscript.js" type="text/javascript">

</script>

Enfin, la balise d’en-tête <link rel="icon" … />, qui donne le nom de l’icône du site placée à gauche de la barre d’adresse du navigateur, peut maintenant préciser les dimensions de ce logo. C’est l’attribut sizes (attention à ne pas oublier le s du pluriel) qui indique dans l’ordre la hauteur et la largeur de l’icône séparées par la lettre x, comme dans cet exemple :

<link rel="icon" href="favicon.ico" sizes="16x16" />

Blocs et sections en HTML 5

Les pages web regorgent de blocs de texte encadrés par la balise <div>, souvent imbriqués les uns dans les autres. Dans bien des cas, leur nombre pourrait être diminué, par un emploi judicieux du couple HTML – CSS.

C’est pourquoi de nouvelles balises sont introduites en HTML 5, de façon à fournir davantage de précisions, notamment sur l’organisation du contenu des pages. Les balises de section qui suivent vont donc venir remplacer une partie de nos bonnes vieilles <div>.

Sections de base d’une page

Ces balises ont pour objet de délimiter certaines zones de texte en fonction de leur sens dans la page.

section
Regroupe un contenu associé à un thème donné. Bien qu’elle paraisse presque aussi vague que la balise <div>, elle est cependant moins générique : elle délimitera les différentes parties, soit d’une page, soit d’un bloc indépendant comme ceux indiqués ci-dessous.

article
Il s’agit d’une partie de la page qui peut se comprendre indépendamment du reste, de la même façon qu’un article d’un journal par rapport aux autres.

aside
C’est également une partie indépendante de texte qui se suffit à elle-même, à ceci près qu’elle peut n’avoir qu’un rapport éloigné, voire aucun rapport, avec le contenu principal de la page. Il s’agit typiquement d’un encadré, d’une zone grisée en aparté ou d’un bloc placé sur un côté de la page (d’où son nom), comme une publicité, une annonce interne ou un complément d’information.

nav
Menu de navigation à l’intérieur des pages du site. Il contient normalement une liste de liens, éventuellement précédée d’un titre. Il n’est pas nécessaire d’inclure tous les menus de la page dans cette balise, seuls les principaux ont vocation à l’utiliser.

Une particularité est à noter : si une balise article peut comprendre plusieurs balises section, une page peut aussi être divisée en sections plus générales. Dans ce cas, chaque balise section est susceptible de contenir plusieurs balises article. Il est donc prévu que les balises section puissent se retrouver à plusieurs niveaux, à l’intérieur d’une page.

COMPATIBILITÉ
Reconnaissance des sections par Internet Explorer

Un navigateur ancien, qui ignore le HMTL 5, acceptera en général toute balise inconnue (dont ces nouvelles sections) et les styles qui lui sont associés. Cependant, Internet...

Écriture des feuilles de style

Comment écrire une règle de style CSS 2 ou CSS 3 ? Où et dans quel ordre écrire ces règles ? De quelle façon attribuer une propriété à un élément donné de la page web ?

SOMMAIRE

Définition d’une règle de style

Feuille de style interne

Feuille de style externe

Styles en ligne

Sélecteurs de style

Ordre de priorité des styles

Valeurs, tailles et couleurs

Exemple de page avec feuille de style interne

Nous voilà prêts à aborder les feuilles de style proprement dites. Organisons notre démarche, en commençant par nous poser les questions de base : comment, où et dans quel ordre écrire ces définitions qui, une fois réunies, formeront une feuille de style ?

Pour chaque règle de mise en forme, il faudra d’abord définir les éléments concernés dans la page web, puis les propriétés à leur attribuer. Les principes que nous allons découvrir ici s’appliquent à toutes les normes actuelles, aux CSS 2 comme aux CSS 3.

Définition d’une règle de style

Voici comment sélectionner un élément de la page et lui attribuer une propriété de mise en forme.

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;

Exemple de règle de style

La règle de la figure 4-1 indique que les titres de niveau 3 (encadrés par <h3>…</h3>) s’afficheront en italique et en Arial (ou dans une police générique sans-serif si la police Arial est absente).

FIGURE 4–1 Exemple de règle de style

Cette règle comprend :

• le sélecteur (h3) ;

• deux déclarations, donc deux propriétés à attribuer aux titres de niveau 3 de la page.

À NOTER É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 :

h3 {

font-style: italic;

font-family: Arial, sans-serif;

}

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 */

Emplacement des styles

Les règles de style peuvent se trouver :

• dans le code HTML, comme attributs de balises : ce sont des styles en ligne (utilisation déconseillée - voir plus loin) ;

• dans l’en-tête de la page web : feuille de style interne ;

• ou dans un fichier distinct : feuille de style externe, à appeler dans l’en-tête de la page web.

Feuille de style interne

Lorsque les règles de styles sont regroupées dans l’en-tête de la page web, elles constituent une feuille de style interne.

Les styles sont écrits entre les balises <head> et </head>, à l’intérieur d’une balise <style> :

<head>

…

<style type="text/css">

<!--

…règles de styles ici…

-->

</style>

…

</head>

À NOTER Déclaration d’une feuille de style interne

• Les styles ainsi déclarés sont de type texte, d’où l’attribut type="text/css" dans la balise <style>.

• Les règles de styles sont placées à l’intérieur de balises de commentaires HTML <!-- et --> de façon à être ignorées par les très anciens navigateurs qui ne connaissent pas les CSS.

Feuille de style externe

Lorsque des règles de styles sont applicables à plusieurs pages web, il est intéressant...

Propriétés de mise en forme

Examinons en détail les différentes propriétés de mise en forme proposées par les normes CSS 2 et CSS 3 : nom, syntaxe, valeurs possibles, héritage. Des exemples illustrent chacune de ces propriétés.

SOMMAIRE

Mise en forme des caractères

Paragraphes et blocs de texte

Bordures

Images et couleurs d’arrière-plan

Listes à puces ou numérotées

Tableaux

Après avoir découvert le principe des feuilles de style et de leur écriture, nous voici dans le vif du sujet : les propriétés de style permettant la mise en forme de nos pages. Celles présentées dans ce chapitre sont communes aux deux normes CSS 2 et CSS 3. Sans avoir à les apprendre par cœur, il est quand même utile d’en connaître l’existence, pour penser à les utiliser.

Mise en forme des caractères

Donnez du style à vos textes ! Vous allez pouvoir leur conférer tantôt une allure qui détonne, tantôt un aspect discret, bref tout ce qu’il faut pour enjoliver votre prose (ou vos poèmes !) à la manière d’un traitement de texte.

Sont regroupées ici toutes les propriétés qui peuvent s’appliquer à un seul ou plusieurs caractère(s). Toutefois, elles sont généralement utilisées pour mettre en forme des mots ou des paragraphes entiers.

Choix des polices

Le choix d’une police de caractères s’effectue à l’aide de la propriété font-family.

TABLEAU 5–1 Propriété font-family

Propriété
font-family

Exemples
p {font-family: Arial, Verdana, sans-serif;}
p {font-family: "Times New Roman", serif;}
p {font-family: "Courier New", monospace;}

Valeurs possibles
Noms de polices de caractères, séparés par des virgules, ou type de police générique : serif, sans-serif, monospace.
Les noms en plusieurs mots sont à placer entre guillemets.

Héritage
Propriété héritée : elle se transmet dans les balises imbriquées.

IMPORTANT Choix des polices

En CSS 2, une police de caractères ne s’affichera que si elle est installée sur l’ordinateur utilisé pour consulter la page web. Il vaut donc mieux :

• Éviter les polices « personnelles », qui ne sont pas installées en standard par Windows, Linux et Mac OS, mais qui ont été ajoutées sur votre ordinateur (par exemple, l’installation de certains logiciels ajoute des polices automatiquement).

• Proposer plusieurs polices de caractères : si le navigateur ne trouve pas la première police sur l’ordinateur utilisé, il prendra la deuxième ; s’il ne la trouve pas non plus, il prendra la troisième, et ainsi de suite…

• Terminer la liste par une police « générique »: serif, sans-serif, monospace (police à chasse fixe, du type Courier) ; il existe aussi les types cursive et fantasy, très peu utilisés.

Nous verrons plus tard une méthode spécifique aux CSS 3, qui permet de transmettre une police de caractères associée à une page web.

À NOTER Polices courantes

Les polices « standard », qu’on a toutes les chances de trouver sur un PC ou un Mac, sont les suivantes : Arial, Comic, Courier, Garamond, Georgia, Times, Trebuchet, Verdana.

D’autres polices sont assez souvent présentes, tant sur les PC que sur les Mac, pour être utilisables à condition de ne pas oublier de mentionner une police de remplacement dans la propriété font-family : Arial Black, Arial Narrow, Century Gothic, Helvetica, Impact, Palatino et Tahoma.

L’arrivée des CSS 3 nous permettra d’utiliser des polices plus originales : elles pourront être téléchargées en même temps que la page à afficher, de la même façon que les fichiers images.

Taille de police

La propriété font-size permet de préciser la taille des caractères.

ATTENTION Tailles relatives

Mises à part celles exprimées en pixels, les tailles relatives sont exprimées par rapport à la taille de police de la balise qui contient l’élément. Ainsi, dans l’exemple suivant :

<p>Bonjour <span>tout le monde</span></p>

associé à la règle de style :

p, span { font-size: 80%; }

la taille du texte de la balise <span> est 64 % de celle de la taille initiale. En effet, puisque la règle s’applique pour chacune des balises, les caractères de la balise imbriquée <span> ont une taille égale à 80 % de 80 % de la taille de base.

TABLEAU 5–2 Propriété font-size

Propriété
font-size

Exemples
h1 { font-size: 150%; }
p { font-size: 15px; }

Valeurs possibles
taille relative (conseillée) en em, ex, % ou px
ou taille fixe en pt, pc, cm, mm, in
ou mot-clé xx-small, x-small

...

Positionnement des blocs

En CSS 2 comme en CSS 3, la mise en page consiste à placer les blocs de texte et les images comme des boîtes imbriquées, juxtaposées ou superposées dans la page.

SOMMAIRE

Marges et dimensions d’un bloc

Position des éléments

Délimitation des blocs

Exemples de positionnement

Centrage d’éléments à l’intérieur des blocs

Il y a une dizaine d’années de cela, la mise en page utilisait des tableaux inclus dans d’autres tableaux, avec parfois plusieurs niveaux d’imbrication : imaginez la complexité du code ! Heureusement, les temps ont changé et les feuilles de style nous proposent une méthode claire pour la mise en page : elle consiste à positionner les éléments dans la page ou dans leur bloc conteneur.

Toutefois, il faudra au préalable définir les dimensions et les marges, intérieures et extérieures, de chaque élément. Toutes les propriétés abordées dans ce chapitre font à la fois partie des normes CSS 2 et CSS 3.

Marges et dimensions d’un bloc

Il est important de comprendre comment sont calculées les dimensions des « boîtes », c’est-à-dire des blocs contenant texte et images.

Les CSS vont nous permettre de fixer les dimensions d’une boîte, ainsi que ses marges intérieures (à l’intérieur des bordures) et ses marges extérieures (à l’extérieur des bordures).

Marges externes autour d’un bloc

Les marges externes d’un bloc sont situées au-delà de ses bordures. Elles servent à espacer les blocs entre eux. Elles sont définies sur chacun des côtés à l’aide des propriétés margin-top en haut, margin-right à droite, margin-bottom en bas et margin-left à gauche, ou globalement par la propriété raccourcie margin.

TABLEAU 6–1 Propriétés définissant les marges extérieures

Propriétés
margin-left, margin-right,

margin-top, margin-bottom

Exemples
p { margin-left: 4em; margin-right: 3em; }

p { margin-top: 5px; margin-bottom: 6px; }

Valeurs possibles
auto, taille relative (conseillée) en em, ex, %, px ou taille fixe en pt, pc, cm, mm, in.

Pourcentages
% de la largeur du bloc conteneur,

même pour margin-top et margin-bottom.

Héritage
Non.

À NOTER Utilisation des marges externes

• Pour les blocs juxtaposés ou imbriqués, les marges mitoyennes sont confondues : par exemple, la marge inférieure d’un bloc et la marge supérieure du bloc suivant sont fusionnées. Cependant, ce n’est pas le cas pour les blocs flottants ou positionnés.

• La valeur auto s’emploie avec margin-left et margin-right : elle signifie que ces deux marges doivent être égales, ce qui revient à centrer l’élément concerné dans son bloc conteneur.

• En utilisant des valeurs négatives pour les marges externes, il est possible de superposer des blocs.

• Les éléments en ligne n’ont pas de marge supérieure, ni inférieure ; pour leurs marges de gauche et de droite, la valeur auto correspond à 0.

• Certaines feuilles de style commencent par la règle * { margin: 0; }, qui met à zéro les marges externes de tous les éléments de la page web. Ceci nous affranchit des différences d’interprétation possibles de la part des navigateurs, pour leur valeur par défaut.

Raccourci pour les marges externes

La propriété margin simplifie la définition des marges externes, en remplaçant les quatre propriétés précédentes.

TABLEAU 6–2 Propriété raccourcie margin

Propriété
margin

Exemples
p { margin: 0; }

p { margin: 3em 5em; }

p { margin: 5% 10% 8%; }

p { margin: 15px 10px 20px 15px; }

Valeurs possibles
Une valeur : définit toutes les marges extérieures.

Deux valeurs : marges du haut et du bas égales, marges de gauche et de droite égales

Trois valeurs : marge du haut, marges de gauche et de droite égales, marge du bas

Quatre valeurs : marge du haut, marge de droite, marge du bas, marge de gauche.

Pourcentages
% de la largeur du bloc conteneur, même pour les marges du haut et du bas.

Héritage
Non.

ASTUCE Ordre des propriétés

Pour les marges extérieures ou intérieures, comme pour les bordures, il est facile de se rappeler l’ordre dans lequel elles sont définies, car il suffit de commencer par le haut et de tourner dans le sens des aiguilles d’une montre : haut - droite - bas - gauche.

Marges internes d’un bloc

Les marges intérieures d’un bloc se trouvent à l’intérieur de ses bordures. Leur présence évite que le texte ne...

Principales nouveautés des CSS 3

Depuis l’arrivée des CSS 3 dans l’univers du Web, il est beaucoup plus facile de donner de l’allure à nos pages. Nous pouvons notamment créer des effets de mise en forme et d’animation très intéressants, sans avoir à utiliser d’images, ni de programmes en JavaScript.

SOMMAIRE

Du relief pour nos pages

Codes couleurs et niveaux de transparence

De nouveaux effets pour le texte

Des bordures plus variées

Couleurs et images de fond

Multicolonnage

Transformations géométriques

Le Web s’anime en CSS 3

Nouveaux types de sélecteurs

Les CSS 3 : bientôt et déjà !

Exemples de sites web

En guise de synthèse de ce que nous avons vu précédemment, nous allons réaliser des pages web complètes, en partant d’une base commune et en utilisant différentes variantes pour la mise en place des blocs qui les constituent : menu horizontal ou vertical, éléments de couleurs unies ou associés à une image de fond.

SOMMAIRE

Structure d’une page web

Code HTML de base

Créer des pages de base À menu horizontal ou vertical

Insérer les images de fond de nos sites

Un site web pour les mobiles

Toutes les mises en page que nous avons examinées jusqu’ici s’adressent à des écrans d’ordinateur. Qu’en est-il de l’affichage sur des appareils mobiles, téléphones portables et autres mini-tablettes numériques ? Il faudra leur affecter une feuille de style spécifique et changer certains éléments de contenu.

SOMMAIRE

Les contraintes du Web mobile

Adaptation de la mise en page

Responsive et media queries CSS 3

Les bonnes règles de conception pour mobiles

Adaptation pratique d’un site pour le Web mobile

Différents types de médias

Le principal média utilisé est l’affichage sur un écran, mais il en existe d’autres, notamment l’impression et le son.

SOMMAIRE

Types de médias

Média paginé : styles CSS 2 et CSS 3 pour l’impression

Média sonore : fonctions audio CSS 3

Jusqu’alors, nous nous sommes intéressés à un seul type de média : celui qui produit un affichage sur un écran, que ce soit avec un ordinateur ou sur un terminal mobile.

Les feuilles de style permettent cependant de gérer d’autres médias. En particulier, en dehors de l’affichage sur écran, les CSS proposent des propriétés pour l’impression et la diffusion sonore des pages web.

Types de médias

À l’intérieur d’une feuille de style interne ou externe, il est possible de déclarer le type de média concerné par un groupe de propriétés. Cette déclaration est facultative ; elle s’effectue sous la forme :

@media xxx { /* xxx= type de média concerné */

…Propriétés pour ce type de média…

}

Nous avons déjà étudié cette notation dans le chapitre précédent, notamment pour les types de médias screen (écran d’ordinateur), handheld (écran d’appareil mobile).

Exemple

style type="text/css">

<!--

@media screen {

* { font-style: Arial, sans-serif; }

}

@media print{

* { font-style: "Times New Roman", serif; }

}

@media all {

* { background-color: white; }

}

-->

</style>

Le tableau suivant nous rappelle quels sont les types de médias possibles :

TABLEAU 10–1 Les médias à notre disposition

Règle @media | Type de médias concernés
all | Tous les médias sont concernés par les propriétés indiquées
braille | Écran tactile pour les non-voyants
embossed | Impression en braille
handheld | Écran de poche, téléphone mobile
print | Impression papier
projection | Affichage par vidéoprojecteur (sur grand écran)
screen | Écran couleur (affichage classique sur un ordinateur)
speech | Lecture sonore
tty | Impression avec caractères de largeur fixe (sur « télétype »)
tv | Télévision
3d-glasses | Lunettes en trois dimensions

La norme CSS 2 distinguait les types de médias aural (diffusion de son) et speech (lecture vocale). En CSS 2.1 comme en CSS 3, le premier de ces deux types a disparu, seule la règle @media speech est utilisée pour l’ensemble des propriétés sonores.

À NOTER Emplacement de la déclaration du type de média

Le type de média peut être spécifié :

• à l’intérieur d’une feuille de style interne, comme...