Support de cours - Lita

L1 Isfates sg-log
Introduction au développement web
Html 5 et Css 2.1 +
Vincent Demange
2011 – 2012 (S2)
Table des matières
1 Introduction 3
2 Html 5
1 Principes de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.1 Les balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.2 Les attributs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3 L’imbrication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.4 Cas particuliers . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.5 Distinction code et rendu . . . . . . . . . . . . . . . . . . . . . . . 8
2 Un peu de technique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1 Type du document . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2 Balises html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.3 Balises head et body . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.4 Balises head . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.5 Les URL : adresses d’internet . . . . . . . . . . . . . . . . . . . . 10
3 Passons à la pratique ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.1 Les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2 Les tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.3 Les liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.4 Sélection de balises usuelles . . . . . . . . . . . . . . . . . . . . . 16
3 Css D&Co 19
1 Principes de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
1.1 Structure d’une règle Css . . . . . . . . . . . . . . . . . . . . . . 20
1.2 Associer Html et Css . . . . . . . . . . . . . . . . . . . . . . . . 20
1.3 Quelques sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . 21
1.4 Cascade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
1.5 Regroupement de propriétés . . . . . . . . . . . . . . . . . . . . . 24
2 Éléments de pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.1 Les couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

2.2 Les longueurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.3 Les polices de caractères . . . . . . . . . . . . . . . . . . . . . . . 26
3 Toujours plus, encore plus . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.1 Sélecteurs de pseudo-classes . . . . . . . . . . . . . . . . . . . . . 27
3.2 Combinaison . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
4 Css mise en boîte 29
1 Flux normal : en-ligne ou bloc . . . . . . . . . . . . . . . . . . . . . . . . 29
2 Modèle de boîte (box model) . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.1 Application : centrage horizontal . . . . . . . . . . . . . . . . . . 31
3 Les types de positionnement . . . . . . . . . . . . . . . . . . . . . . . . . 31
4 Éléments génériques div et span . . . . . . . . . . . . . . . . . . . . . . . 36
5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
5 Bonus 38
1 Lettrine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
2 Notes de marge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3 Mise en page complète . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
2

1 Introduction
L’objectif de ce cours est d’introduire une méthodologie et une rigueur propres au
développement informatique ; à savoir la séparation du fond et de la forme, et le respect
de règles strictes et imposées. En effet, en bon bureaucrate, un ordinateur a besoin d’un
langage clair et sans ambiguïté afin d’être guidé dans les tâches qu’on lui soumet. C’est
l’objectif des langages qui seront utilisés.
Nous allons nous concentrer sur deux « langages » en particulier : Html et Css.
Le premier servira à la description du contenu d’un document, tandis que le second
est consacré à sa mise en forme, en général à son apparence visuelle. Cette séparation
fond/forme est très utile lorsque les projets sont importants, et devient indispensable si
plusieurs personnes spécialisées y interviennent.
En tant qu’une introduction au domaine, nous laisserons notre intuition et nos préjugés
nous guider dans l’acceptation de certaines règles bien trop formelles pour être
étudiées. Il faut cependant se rappeler qu’elles existent, et que sous l’aspect parfois
chaotique d’une mise en page ratée se cache en fait des procédures bien définies, et
parfaitement déterminées (sans aléa). D’ailleurs, cet aspect rébarbatif et mystérieux est
bien souvent aussi une caractéristique de la communication avec un ordinateur...
C’est cool internet !
Pour bon nombre de personnes, « aller sur internet » signifie ouvrir un navigateur et
taper une adresse au clavier (p. ex. http://www.lita.sciences.univ-metz.fr/~demange)
dans un endroit prévu. On s’attend alors à recevoir les informations désirées, le tout mis
en forme de façon visuelle. On peut y sélectionner du texte, copier des images, regarder
des vidéos, remplir des formulaires, etc. Qu’avons-nous reçu ? Et que s’est-il passé ?
En fait, le navigateur s’est chargé de tout un tas de petits traitements :
1. Il a envoyé une requête suivant un protocole de communication à travers le
réseau.
2. La requête est reçue par le destinataire (le serveur du site internet en question),
qui l’analyse et retourne une réponse (cf. exemple ci-dessous) à l’envoyeur (ici le
navigateur).
3. Le navigateur lit la réponse, l’analyse, et l’interprète pour finalement la traduire
en ce que l’on aperçoit à l’écran.
Au besoin lors de son analyse, le navigateur se permet d’envoyer des requêtes supplémentaires
afin de récupérer d’autres éléments nécessaires à la mise en forme (p. ex. les
images).
En général la réponse est constituée de texte. Ce texte est lisible par un humain, et
contient les informations nécessaires à l’affichage par le navigateur.
3

Voici un court exemple de ce qu’est susceptible de recevoir le navigateur :
HTTP/1.1 200 OK
Date: Wed, 18 Jan 2011 15:59:14 GMT
Server: Apache/2
Last-Modified: Mon, 01 May 2006 16:03:22 GMT
ETag: "1389e3-180-412bc31976680"
Accept-Ranges: bytes
Content-Length: 384
Vary: Accept-Encoding,User-Agent
Content-Type: text/html; charset=utf-8
Document minimal HTML 5
Voici un document
HTML 5 minimal.
Dans la section 2 suivante, nous nous concentrons sur la partie qui commence à partir
du texte

2 Html
Nous allons apprendre les rudiments du langage Html (hypertext markup langage)
dans sa version 5. Html est un langage de structuration de texte. En d’autres termes,
il s’agit de définir les parties du texte que l’on écrit ; ici nous avons un titre, ici un
paragraphe, là une énumération, et là une image etc. Ceci est effectué en délimitant
des zones de texte par des balises (markup) : p. ex. . Il est de plus possible de lier
plusieurs documents entre eux par des liens : c’est de l’hypertexte.
Lorsque le navigateur interprète le code Html qu’il reçoit, il applique généralement
des distinctions visuelles diverses aux différents éléments (gras pour un titre, soulignement
pour un lien, etc.). Ce comportement par défaut peut être modifié (cf. sec. 3).
Dans cette section, nous nous concentrons sur la définition des éléments
qui composent notre document : leur sémantique.
Commençons par un exemple de code source qui deviendra compréhensible au fil
de cette section.
Teaching
Navigation
News
Presentation
Teaching
Teaching
2009-2010:
S1, M1I: algorithm and complexity
2008-2009:
S2, L1ME: structured
programming
5

S2, L1 Isfates SG-LOG-INFO:
databases
S2, L1 Isfates SG-LOG: web development
admin
Remarque Un code lisible est un code soigneusement organisé, notamment en ajoutant
des indentations afin de refléter une structure hiérarchique (voir imbrication
ci-dessous).
1 Principes de base
Nous allons introduire les grands principes du langage Html, accompagnés de définitions
et vocabulaire.
1.1 Les balises
La caractéristique essentielle du langage Html est la balise. Une balise commence
par < et termine par >. Il y a deux types de balise ; les balises ouvrantes (p. ex. ) et
les balises fermantes (p. ex. ). Le nom de la balise (p. ex. p) doit être en lettres
minuscules. Par exemple :
Ceci est un paragraphe.
La balise délimite un paragraphe ; le texte « Ceci est un paragraphe. » est donc
un paragraphe.
Sur le même principe, il existe une balise permettant de délimiter une citation courte
(quote) :
C’est avec la logique que nous prouvons et
avec l’intuition que nous trouvons.
Une liste des balises usuelles se trouve à la fin de cette section.
1.2 Les attributs
Il est possible d’ajouter des attributs aux balises. Le nom de l’attribut est en
minuscule. Les attributs sont écrits dans la balise ouvrante uniquement, séparés
par des espaces et leur valeur est donnée entre guillemets anglaises (les ") collé au
signe d’égalité (=). L’ordre à l’intérieur de la balise ouvrante n’a pas d’importance. Un
attribut a toujours une valeur.
6

Par exemple pour une citation (balise ), il est possible d’indiquer l’auteur en
utilisant l’attribut title :
C’est avec la logique que nous prouvons
et avec l’intuition que nous trouvons.
Une balise peut posséder plusieurs attributs. Sur l’exemple précédent, on désire indiquer
en plus l’adresse du site qui nous a fournit la citation. L’attribut cite de la balise
p permet cela :
C’est avec la logique que nous prouvons
et avec l’intuition que nous trouvons.
Bien sûr à chaque balise correspond une liste d’attributs possibles.
Une liste des attributs usuels se trouve à la fin de cette section.
1.3 L’imbrication
Nous désirons écrire une citation à l’intérieur d’un paragraphe. Il suffit d’imbriquer
(emboîter) les balises afin de correctement délimiter le texte selon la règle simple « dernière
ouverte, première fermée ».
L’intuition agit comme moteur car elle fournit une piste prometteuse au
mathématicien qui, impatient, va s’empresser de la vérifier, comme le
suggère Poincaré:
C’est avec la logique que nous prouvons
et avec l’intuition que nous trouvons.
En général, bien indenter son code permet d’éviter les mauvaises surprises. Le contreexemple
suivant montre à quel point il est facile de se tromper :
[...] une citation qui commence dans un paragraphe, mais qui
termine après la fin du paragraphe ? Cela n’a aucun sens !
✓
✗
1.4 Cas particuliers
Certaines balises peuvent ne pas posséder de balise fermante associée si leur objectif
n’est pas de délimiter des morceaux de texte : p. ex. indiquer l’emplacement d’une image.
Dans ce cas elles ne possèdent qu’une balise ouvrante de la forme . L’espace
avant le / est important. En général, ces balises possédent au moins un attribut pour
être utile (... sauf , voir ci-après).
7

1.5 Distinction code et rendu
Il faut bien distinguer le code que l’utilisateur saisi, du rendu généré par le navigateur.
En effet, placer un saut de ligne dans le code ne signifie pas obtenir un saut de ligne sur
l’affichage dans le navigateur. Il en est de même en ce qui concerne l’indentation. Cela
permet, entre autre, de concevoir un code agréable à lire sans influer sur l’apparence du
contenu qu’il décrit.
C’est pourquoi il existe une balise permettant d’indiquer un passage à la ligne :
(break line).
Remarque Le passage à la ligne à un sens dans la description d’un document. Cela
marque un temps de pause et une découpe logique du contenu (p. ex. à l’intérieur
d’un paragraphe). En revanche, essayer de positionner un élément en effectuant
plusieurs passages à la ligne n’a pas de sens et doit être évité.
2 Un peu de technique
Nous allons présenter la composition d’un document Html de base. Sans trop entrer
dans les détails et à titre informatif, quelques notions techniques sont aussi développées.
La structure minimale nécessaire pour un document Html valide est la suivante.
Tout document Html doit contenir au moins cette structure.
Expliquons-en les parties.
2.1 Type du document
Cette ligne définit les règles auxquelles doit se conformer le document : son type (document
type). Ces règles sont écrites dans un langage spécialisé. On peut alors vérifier
mécaniquement si un document donné se conforme bien à ces règles, en particulier le
nom des balises, les attributs associés, etc.
2.2 Balises html
...
8

Ces balises délimitent un document Html entier : un tel document est composé d’un
en-tête (header) et d’un corps (body).
L’attribut lang définit la langue utilisée dans le document (ici le français). Il peut
être omis, placé et redéfinit dans n’importe quelle balise : p. ex. pour un
paragraphe en anglais.
Sa valeur peut être utilisée par un moteur de recherche pour indexer le contenu en
fonction de la langue, par le navigateur pour adapter la typographie à la langue utilisée,
ou encore dans l’objectif d’appliquer un style visuel différent en fonction de la langue
(voir prochaine section).
En pratique, il est souvent placé en début de document dans la balise html, et déclare
ainsi la langue pour tout le document.
2.3 Balises head et body
À l’intérieur des balises html, on distingue deux parties : l’en-tête (header), et le
corps du document (body).
L’en-tête contient des informations à propos de la page : son titre, quelques métadonnées
(auteur, description, mots-clés, etc.), ainsi que des pointeurs vers d’autres
documents (p. ex. les feuilles de style, cf. sec. 3, p. 19).
Le corps contient la description du texte en question (p. ex. des paragraphes, des
titres, etc.).
2.4 Balises head
Dans l’en-tête on place des informations à propos du document lui-même. Le titre
du document est toujours fournit grâce aux balises title.
...
...
Titre de la page
Ce titre ne fait pas partie du corps du document (n’est pas situé entre les balises body),
et donc ne sera pas affiché. Souvent les navigateurs s’en servent pour nommer une page
afin de l’enregistrer dans un système de favoris.
D’autres méta-données comme l’auteur du document, une courte description, etc.
peuvent être lues et utilisées par les moteurs de recherche et les annuaires pour répertorier
et classifier les documents sur internet.
...
...
Super site trop bien
Enfin, dans cette partie du document, il est possible d’indiquer des informations
techniques sur la façon de transmettre les données, le codage des caractères, etc. On
veillera à écrire la ligne suivante.
9

...
...
...
...
Explications Pour un ordinateur, un fichier ou la réponse à une requête n’est qu’une
suite de 0 et de 1 (très grossièrement). En particulier, il lui faut interpréter cette suite.
Cela s’effectue selon différents codages, différentes représentations. Par exemple, on
peut regrouper les bits (les 0 et 1) par paquets de 8 (un octet), et définir pour chaque
combinaison possible une lettre d’un alphabet : p. ex. 00000001 pourra représenter la
lettre A, 00000010 représentera la lettre B, etc. Une façon de coder des caractères s’appelle
un jeu de caractères (charset). Ainsi un fichier texte s’interprète selon un codage
des caractères bien déterminé.
En général les codages sont optimisés pour certaines langues : latin1 (ou ISO-8859-1)
pour les langues d’Europe de l’ouest (dont français et allemand), ISO-8859-4 pour l’Europe
du nord, etc.
Nous utiliserons le codage utf-8 qui permet de représenter les caractères et
symboles de très nombreuses langues.
2.5 Les URL : adresses d’internet
Adresses absolues Les documents sur internet sont accessibles à partir d’adresses
particulières : les URL (uniform ressource locator). Par ex. http://www.wikipedia.org
indique l’utilisation du protocole HTTP (hypertext transfer protocol), ainsi que l’identification
de la ressource pour ce protocole : www.wikipedia.org.
Voici quelques autres exemples de telles adresses absolues :
mailto:dieu@enfer.org URL d’une adresse de messagerie ;
ftp://ftp.freebsd.org URL d’un site FTP (file transfer protocol) ;
news:fr.sci.maths URL d’un forum de discussion ;
...
Adresses relatives En Html, on utilisera souvent des adresses relatives (au document
actuel) : l’emplacement de la ressource à accéder est définit par rapport au
document courant.
Le principe est le suivant : pour accéder à la ressource, il suffit de noter le nom des
dossiers traversés depuis le document actuel jusqu’à la ressource, en les séparant par le
caractère /. Aussi, .. indique le dossier parent.
Soit par exemple l’organisation de fichiers suivante :
Depuis le fichier main.html, on accède au fichier :
gallery
– photo.png sans traverser aucun dossier, donc le chemin d’accès
est simplement photo.png ;
main.html
photo.png
– index.html en remontant d’un dossier, donc le chemin d’accès
est ../index.html ;
index.html
images
– bg.png en remontant d’un dossier, puis en descendant dans
bg.png
le dossier images, ce qui donne ../images/bg.png.
10

Ainsi dans le document main.html on pourrait trouver le code suivant :
...
...
Retour à l’accueil
...
3 Passons à la pratique !
Nous savons comment se construit un document Html de base, et nous savons
décrire une page en lui ajoutant des méta-données. Il ne reste plus qu’à apprendre à
décrire le contenu d’un document Html.
Nous allons introduire quelques éléments un peu plus évolués que les balises p et
q déjà exposées, sans oublier de respecter les règles évoquées (ouverture/fermeture,
imbrication, syntaxe des attributs).
3.1 Les listes
Il est possible de distinguer trois types de listes : les listes ordonnées (p. ex. numérotées),
les listes non-ordonnées (p. ex. énumération) et les listes de définition (p. ex. un
dictionnaire).
Listes ordonnées La liste est délimitée par les balises ol (ordered list), et les éléments
de la liste sont eux-même délimités par les balises li (list item).
Être un gentil étudiant s’apprend:
Se mettre en rang par deux en se donnant la main.
Mettre le doigt sur la bouche et faire silence.
Rentrer dans la salle lorsque l’enseignant l’ordonne.
Ce qui pourrait donner le résultat suivant.
Être un gentil étudiant s’apprend :
1. Se mettre en rang par deux en se donnant la main.
2. Mettre le doigt sur la bouche et faire silence.
3. Rentrer dans la salle lorsque l’enseignant l’ordonne.
Listes non ordonnées La liste est délimitée par les balises ul (unordered list), et les
éléments de la liste sont eux-même délimités par les balises li (list item).
Être un gentil étudiant s’apprend:
Se mettre en rang par deux en se donnant la main.
Mettre le doigt sur la bouche et faire silence.
Rentrer dans la salle lorsque l’enseignant l’ordonne.
11

Ce qui pourrait donner le résultat suivant.
Être un gentil étudiant s’apprend :
– Se mettre en rang par deux en se donnant la main.
– Mettre le doigt sur la bouche et faire silence.
– Rentrer dans la salle lorsque l’enseignant l’ordonne.
Listes de définitions Les listes de définitions sont légèrement différentes, puisqu’il
faut donner le terme à définir avec dt (definition term) ainsi que sa (ses) description(s)
avec dd (definition description).
Procrastination
Penchant à différer, tendance à remettre à plus tard.
Paresse
Fainéantise
Tendance à éviter toute activité, à refuser tout effort.
Avocat
Auxiliaire de justice qui conseille et représente
ses clients en justice.
Fruit comestible de l’avocatier, en forme de poire.
Ce qui pourrait donner le résultat suivant :
Procrastination
Penchant à différer, tendance à remettre au lendemain ou à plus tard.
Paresse, Fainéantise
Tendance à éviter toute activité, à refuser tout effort.
Avocat
Auxiliaire de justice qui conseille et représente ses clients en justice.
Fruit comestible de l’avocatier, en forme de poire.
Imbrication de listes Bien sûr, on peut placer une liste dans une liste : un élément
de la liste (entre li) contient alors lui-même une liste (p. ex. ul).
Préchauffer le four à 180 ◦ C.
Faire les préparations en parallèle:
Dans une casserole, faire fondre le beurre et le chocolat à
feu très doux.
Dans un bol, battre les jaunes d’oeufs avec le sucre jusqu’à
ce que le mélange blanchisse.
Battre les blancs en neige avec une pincée de sel.
12

Jeter tout, c’est raté !
Ce qui pourrait donner le résultat suivant.
1. Préchauffer le four à 180˚C.
2. Faire les préparations en parallèle :
– Dans une casserole, faire fondre le beurre et le chocolat à feu très doux.
– Dans un bol, battre les jaunes d’oeufs avec le sucre jusqu’à ce que le mélange
blanchisse.
– Battre les blancs en neige avec une pincée de sel.
3. Jeter tout, c’est raté !
3.2 Les tableaux
Les tableaux permettent de représenter des données ainsi que des relations entre
elles. Un tableau est délimité par les balises table. Puis il est divisé en lignes par les
balises tr (table row), et ces lignes sont elles-mêmes divisées en cellules par les balises
td (table data cell) qui contiennent les données. Une cellule peut contenir du texte, mais
aussi n’importe quel élément (paragraphe, listes, tableau).
Tableaux simples Par exemple le tableau suivant, de 7 lignes et 2 colonnes peut être
représenté par le code ci-dessous.
Impératif présent marre-toi / marrons-nous / marrez-vous
Participe présent se marrant
Participe passé marré / marrée / marrés / marrées
Infinitif présent se marrer
Infinitif passé s’être marré
Gérondif présent en se marrant
Gérondif passé en s’étant marré
Conjugaison du verbe ’se marrer’
Conjugaison du verbe ’se marrer’
Impératif présent
marre-toi / marrons-nous / marrez-vous
Participe présent
se marrant
Participe passé
marré / marrée / marrés / marrées
Infinitif présent
se marrer
13

Infinitif passé
s’être marré
Gérondif présent
en se marrant
Gérondif passé
en s’étant marré
Remarquons la légende délimitée par les balises caption à l’intérieur des balises table.
Un tableau est toujours associé à une légende.
Cellules d’en-tête Il est possible d’indiquer des cellules d’en-tête par les balises th
(table header cell) à la place des balises td.
Table des scores.
nom âge score
Ché, Hector 43 153
Zoreilles, Vincent 26 2106
Table des scores.
nom
âge
score
Ché, Hector
45
153
Zoreilles, Vincent
26
2106
Fusion de cellules Une cellule peut s’étaler sur plusieurs lignes et/ou colonnes. Les
attributs colspan et rowspan de la balise td permettent de spécifier le nombre de colonnes
et de lignes (respectivement) sur lesquelles s’étale la cellule. Évidemment, les cellules sur
lesquelles elle s’étale ne doivent plus être déclarées (elles seraient vides sinon). Voyons
cela sur deux exemples simples :
Sur deux
colonnes.
1
3 4
14
Sur deux
lignes.
2
1
4

Sur deux colonne
1
3
4
Sur deux lignes
1
2
4
Remarque Jadis les tableaux étaient beaucoup utilisés pour positionner des éléments
sur la page. Heureusement les pratique ont évoluées et les mises en pages aussi : on
utilise dorénavant le Css qui produit un code bien plus facile à gérer. Pour ce cours, il
est donc interdit d’utiliser un tableau pour positionner des éléments.
3.3 Les liens
Un document Html est plus qu’un simple texte linéaire, en particulier il contient
des liens vers d’autres documents (Html ou non).
Liens usuels Tout élément Html (texte, image, paragraphe, etc.) peut agir comme
un lien. L’élément doit simplement être entouré des balises a, tandis que l’objet pointé
est donné par son adresse dans l’attribut href.
Le site Wikipédia est un point
de départ pour découvrir un sujet.
Vous pouvez me contacter pour plus
d’informations.
Les photos suivantes sont disponibles en grande taille.
Liens internes Il est aussi possible d’établir des liens vers des éléments à l’intérieur
d’une page. Pour cela, il suffit de :
15

...
...
– donner un identifiant (attribut id) à l’élément cible du lien ;
– définir le lien par une adresse (relative ou absolue) à laquelle on ajoute le caractère
# suivi de l’identifiant de l’élément cible.
Première partie
Deuxième partie
...
Première partie
...
Deuxième partie
...
De même, on peut référencer un élément précis d’un document extérieur.
Le 20 juin est
associé à de grands noms et de grands évènements.
3.4 Sélection de balises usuelles
On termine par une sélection de balises utiles, ainsi que des attributs qui leur sont
associés.
a délimite un lien (anchor) :
href adresse de l’élément pointé (hyperlink reference) ;
type type du document pointé (p. ex. application/pdf).
abbr délimite une abréviation (p. ex. ONU) :
title pour indiquer la signification de l’abréviation (p. ex. organisation des nations
unies).
blockquote délimite une citation longue (p. ex. un ou plusieurs paragraphes) :
cite référence la source d’origine de la citation ;
title information additionnelle (p. ex. l’auteur).
br indique un retour à la ligne (break), ne possède pas de balise fermante.
cite délimite la référence à une source externe (auteur, site internet, etc.).
code délimite un code source informatique, et reproduit les retours à la ligne et espaces
du code source.
del délimite les éléments supprimées (deleted) d’un document (suite à des modifications) :
cite pointe une référence expliquant pourquoi l’élément a changé ;
datetime indique la date et l’heure du changement (format YYYY-MM-DDThh:mm:ss).
dfn délimite un terme qui est défini (defined) par ailleurs.
dl délimite une liste de définition (définition list), et s’utilise en combinaison avec dt et
dd comme vu précédemment.
em délimite un texte à mettre en évidence (emphasis).
16

h1 h2 ... h6 délimitent un titre (heading). Il y a six niveaux : le premier (h1) délimite le
titre d’une section, le second une sous-section, le troisième une sous-sous-section,
etc. Dans une page on doit toujours commencer par utiliser le premier
niveau, puis le second, etc.
hr indique une règle horizontale (horizontal rule) ; aide à distinguer plus fortement différentes
parties (p. ex. des notes de bas de page).
img indique l’emplacement d’une image :
src adresse de l’image, son origine (source) ;
width largeur de l’image ;
height hauteur de l’image (si un seul des deux attributs précédents est spécifié,
l’autre est calculé par le navigateur) ;
alt un texte alternatif pour les images non purement décoratives (p. ex. « Graphique
: montre l’évolution de la violence des meurtres pour le 20 e siècle. »),
les images uniquement décoratives doivent avoir une valeur vide
pour cet attribut (i.e. alt="").
ins délimite les éléments ajoutés (inserted) d’un document (suite à des modifications) :
cite pointe une référence expliquant la raison du changement ;
datetime indique la date et l’heure du changement (format YYYY-MM-DDThh:mm:ss).
ol délimite une liste ordonnée (ordered list), et s’utilise en combinaison avec li comme
vu précédemment.
p délimite un paragraphe.
q délimite une citation courte (p. ex. à l’intérieur d’un paragraphe) :
cite référence la source d’origine de la citation ;
title information additionnelle (p. ex. l’auteur).
strong délimite un texte à mettre fortement en évidence (strong emphasis).
sub délimite un texte à placer en indice (subscript) ; p. ex. x n .
sup délimite un texte à placer en exposant (superscript) ; p. ex. x n .
table délimite un tableau, et s’utilise avec caption, tr, th, td comme vu précédemment.
ul délimite une liste non-ordonnée (unordered list), et s’utilise en combinaison avec li
comme vu précédemment.
17

3 Css D&Co
Dans l’introduction, nous avons noté que le navigateur peut avoir besoin de demander
d’autres éléments que la page Html. C’est le cas des images, mais aussi des feuilles de
style Css (cascading stylesheets).
Il s’agit aussi de documents textuels mais obéissant à des règles syntaxiques différentes
de celles de Html. Les documents Css permettent de décrire (entre autres)
l’apparence visuelle d’un document. Voyons un exemple concret d’un tel document Css :
body {
}
position: absolute;
left: 250px;
background: #ADFF2F;
padding-bottom: 30px;
#menu {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
width: 190px;
padding: 10px;
background: #556B2F;
border: 2px solid maroon;
color: #ADFF2F;
}
a.tobot, a.tobot:visited {
}
color: #ADFF2F;
position: absolute;
bottom: 20px;
L’idée est de définir des propriétés (p. ex. visuelles) s’appliquant aux éléments Html.
Il est mieux de placer le code Html et le code Css dans des fichiers distincts.
Cela autorise l’application d’une même apparence à plusieurs pages Html. De plus,
la maintenance du site est simplifiée, et les différentes parties (fond et forme) sont
facilement réutilisables.
19

1 Principes de base
1.1 Structure d’une règle Css
Un document Css est une succession de règles. Détaillons une des règles de l’exemple
précédent :
body {
}
position: absolute;
left: 250px;
background: #ADFF2F;
padding-bottom: 30px;
Il y a deux parties ; le sélecteur et le bloc de déclarations. Pour cet exemple, le
sélecteur est body, tandis que le bloc de déclarations est entouré des accolades { et }.
Le bloc de déclarations contient des déclarations de la forme propriété: valeur ;.
Une déclaration est toujours terminée par un point-virgule, et le nom de la propriété
est toujours séparé de sa valeur par les « deux points ». Sur cet exemple, les valeurs de
quatre propriétés (position, left, background, padding-bottom) sont définies.
Il existe plusieurs façons de faire référence à un ou plusieurs éléments Html (plusieurs
types de sélecteurs), de nombreuses propriétés qu’il est possible de modifier, ainsi
que de nombreuses façons d’en indiquer la valeur.
1.2 Associer Html et Css
Pour que le navigateur sache quel style appliquer au document Html qu’il interprète,
il est nécessaire d’associer un document Css (un fichier) à un document Html. La
balise link permet d’indiquer un fichier Css à utiliser dans l’en-tête (head)
du document Html .
L’exemple suivant associe le document Html courant avec le fichier Css style.css :
...
Blog de Dieu en BD
...
...
rel définit la relation que la liaison représente : ici une feuille de style (stylesheet) ;
href indique l’URL (cf. ssec. 2.5, p. 10) vers le fichier représentant la feuille de style : ici
style.css ;
media définit le média pour lequel cette feuille de style sera utilisée 1 : ici affichage sur
un écran (screen).
1. En effet, il existe d’autres types de médias, comme par exemple : print pour l’impression,
projection pour les diaporamas, etc. et all pour tous les types possibles.
20

1.3 Quelques sélecteurs
On l’a vu, afin de changer les propriétés des éléments d’un document Html, il est
nécessaire d’indiquer les éléments Html concernés. C’est le rôle des sélecteurs.
Sélecteurs simples La façon la plus simple d’indiquer un élément Html du document
sur lequel appliquer des règles Css est d’indiquer le nom de la balise délimitant
cet élément. Par exemple pour appliquer un style aux titres délimités par h1 dans le
document Html, il suffit d’écrire dans le document Css :
h1 {
}
font-weight: bold;
font-variant: small-caps;
font-family: sans-serif;
Ici les titres h1 seront en gras (bold), en petite capitales (small-caps) et dans une famille
de caractères sans empattements (sans-serif).
Suite de sélecteurs Il est possible d’appliquer un ensemble de déclarations à plusieurs
éléments en séparant les noms par des virgules. Par exemple, si l’on souhaite que tous
les titres de h1 à h3 soient concernés par l’ensemble des déclarations précédentes, il suffit
d’écrire :
h1, h2, h3 {
}
font-weight: bold;
font-variant: small-caps;
font-family: sans-serif;
Cela évite de dupliquer inutilement du code, et facilite la modification simultanée des
éléments concernés.
Sélecteur universel Il existe un sélecteur spécial permettant de sélectionner tous les
éléments d’un document Html : * . Par exemple, si l’on souhaite que le texte de tous
les éléments Html soit en rouge sur fond noir :
* {
}
background-color: black;
color: red;
En pratique ce sélecteur est peu utilisé tel quel, mais en combinaison avec d’autres
sélecteurs (p. ex. de classe).
Sélecteurs de classe Nous souhaitons définir des propriétés pour certains éléments
importants. Mais nous ne disposons pas a priori de marquage en Html le permettant
puisqu’il peut s’agir de certains paragraphes, de quelques titres, etc. : il n’existe en effet
pas de balise en Html.
Cependant, chaque balise Html peut se voir associer un attribut class avec une
valeur libre définissant une classe à laquelle appartient l’élément :
21

...
Ceci est un paragraphe de la plus haute importance
...
Parfois, à l’intérieur même d’un paragraphe,
certaines parties seulement du texte sont
importantes.
...
Css permet de sélectionner ces éléments à l’aide du sélecteur de classe : il commence
par un point suivit du nom de classe qu’on a définit. Par exemple :
.important {
}
color: red;
Ici tous les éléments possédant un attribut class dont la valeur vaut important seront
affectés et seront donc en rouge.
Restriction du sélecteur de classe On décide qu’à l’intérieur d’un paragraphe
un texte important doit être en gras pour bien le distinguer. Il est alors possible de
restreindre le sélecteur de classe aux éléments em par le sélecteur em.important. Par
exemple :
.important {
}
color: red;
em.important {
}
font-weight: bold;
Ainsi les éléments em avec la valeur important à l’attribut class seront en rouge par la
première règle, et en plus en gras par la seconde. Par contre, un paragraphe (p) n’étant
pas un élément em, il sera simplement mis en rouge par la première règle, la seconde ne
s’y appliquant pas.
Remarque Intuitivement, définir la valeur de l’attribut class pour des éléments
Html n’a de sens que si plusieurs éléments sont susceptibles d’appartenir à cette classe.
En d’autres termes, une classe représente potentiellement un ensemble d’éléments.
Sélecteurs d’identifiant Parfois, il est nécessaire de distinguer un élément particulier
et de façon unique dans une page : on donne une valeur libre à l’attribut id de l’élément
Html correspondant dans le code Html (voir sec. 3.3, p. 15).
Par exemple le sommaire d’un site n’apparaît qu’une seule fois par page. En général, il
s’agit d’une liste non ordonnée : il faut donc la distinguer des autres listes non ordonnées.
Par exemple, on lui donne l’identifiant unique menu :
...
Sauter en parachute
Avec un parachute
22

...
Sans parachute
Il faut vérifier ces aspects:
...
le sac-harnais;
la voilure;
...
Ainsi distingué, le sélecteur d’identifiant (# suivit du nom d’identifiant) permet d’affecter
un style à cet unique élément dont l’attribut id vaut menu :
#menu {
}
background-color: silver;
Remarque Cet identifiant sert aussi aux liens internes dans un document (cf. sssec
3.3, p. 15). Évidemment, il ne doit pas exister deux éléments ayant le même
identifiant dans une page Html .
1.4 Cascade
Par défaut, le navigateur applique un style au document : p. ex. titres h1 en gras,
éléments em en italique, etc. Ainsi, chaque fois qu’on définit une propriété (p. ex. la
couleur) pour un élément, en fait on la redéfinit. De plus, il est possible de définir des
règles apparemment contradictoires comme :
h1 {
}
color: black;
h1.important {
}
...
color: red;
En effet, avec le document Html suivant :
Titre important
...
il est difficile de dire a priori quelle couleur aura le titre h1 : rouge ou noire ?
En fait, le navigateur décide du style final selon une procédure complexe, mais qui
peut en général se résumer par on applique au final le style associé au sélecteur
le plus précis.
Ici, « être un élément h1 » est moins précis que « être un élément h1 et de classe
important ». Donc le titre du code Html précédent sera de couleur rouge.
23

Héritage Pour certaines propriétés (comme la couleur), les éléments contenus sont
aussi affectés : c’est l’héritage. Prenons par exemple le code Html suivant :
...
Un paragraphe avec un élément mis en valeur.
...
Si de plus on a le code Css associé suivant :
p {
}
color: red;
alors le texte délimité par em sera aussi en rouge : il hérite de la propriété de p. En
revanche, si l’on ajoute la règle suivante au code Css :
em {
}
color: green;
alors le texte du paragraphe est en rouge sauf le texte de em qui est en vert. On peut
ainsi redéfinir la valeur des propriétés héritées.
1.5 Regroupement de propriétés
Il existe certaines propriétés qui ont une liste de valeurs : il s’agit en fait d’un
regroupement de plusieurs propriétés. Par exemple, plutôt que d’écrire :
h1, .important, #menu {
}
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: red;
il est possible de condenser en :
h1, .important, #menu {
}
border-bottom: thick solid red;
L’ordre des valeurs peut être important, auquel cas il est définit précisément dans la
norme.
2 Éléments de pratique
2.1 Les couleurs
De nombreuses propriétés définissent la couleur d’un élément ; background-color,
border-color, color etc. Les valeurs de ces propriétés peuvent être prédéfinies ou non.
Couleurs prédéfinies On peut tout d’abord les choisir parmi des couleurs prédéfinies
qui sont au nombre de 17 : aqua, black, blue, fuschia, gray, green, lime, maroon,
navy, olive, orange, purple, red, silver, teal, white et yellow. Par exemple :
24

h1, .important, #menu {
}
border-color: teal;
Définies par le concepteur Il est possible de définir une couleur comme un mélange
de rouge, de vert et de bleu (red, green, blue) dans cet ordre. Pour cela on
utilise des nombres entiers compris entre 0 et 255 : 0 correspond à l’absence de couleur,
et 255 au maximum. Par exemple rgb(255,0,0) correspond au rouge, tandis que
rgb(255,100,100) donne un rouge pâle.
De même, on peut à la place d’entiers entre 0 et 255, utiliser des pourcentages : par
exemple rgb(100%,40%,40%) pour le rouge pâle précédent.
Il existe encore une autre notation : la notation hexadécimale. Cette fois-ci, on écrit
simplement #FF6464.
Des outils permettent d’obtenir ces valeurs de façon visuelle :
En Css, on peut écrire ce code :
h1, .important, #menu {
border-color: rgb(255,0,0);
background-color: rgb(77%,20%,80%);
color: #903BC0;
}
2.2 Les longueurs
Certaines propriétés admettent des longueurs comme valeur ; width, top, margin,
etc. Une unité doit être associée à ces longueurs. Il en existe deux types : les unités de
longueur absolues, et les unités de longueur relatives.
25

Unités absolues Les unités absolues sont plutôt à réserver pour les médias d’impression
(media="print") : cm, mm (ou encore in, pt, pc). On ne les utilisera donc pas
ici.
Unités relatives Pour l’affichage à l’écran, des unités relatives sont préférées. L’unité
relative couramment utilisée est le pixel (picture element), notée px. Il s’agit en fait d’un
point de l’écran. La taille des images est souvent donnée en pixels. Cette unité permet
de placer suffisamment précisément des éléments sur une page Html, notamment des
images les unes par rapport aux autres.
Par exemple pour une galerie photo, les miniatures ont toute la même hauteur :
img.mini {
}
height: 120px;
Remarque : Cette longueur est relative car la dimension réelle d’un pixel (p. ex. en
pouces) dépend de l’écran : certains affichent 72 pixels par pouce, d’autres 96, etc.
L’unité em fait référence à la taille du texte. Par exemple si le texte est de taille 12px,
alors 1em vaut 12px, 2em vaut 24px, etc.
Par exemple, on veut que les éléments d’une liste soient décalés d’environ quatre
caractères :
li {
}
margin-left: 4em;
Pour terminer il existe aussi des valeurs pour les longueurs qui sont en fait fonction
d’une valeur courante. Par exemple, on veut agrandir certains paragraphes importants :
p.important {
}
font-size: larger;
Les valeurs et unités possibles pour une propriété de longueur dépendent de ce
qu’accepte la propriété elle-même. Il faut pour cela bien consulter les définitions des
propriétés Css que l’on souhaite utiliser.
2.3 Les polices de caractères
Citons quelques propriétés usuelles des polices de caractères (fonts).
font-family définit la police à utiliser. Comme valeur, il existe des familles prédéfinies
serif, sans-serif, monospace, ou bien le nom d’une police présente sur l’ordinateur
(à placer entre guillemets anglaises).
Il est possible de spécifier un ordre de préférence : si la première police n’est pas
trouvée, alors c’est la suivante qui est essayée. Il suffit de séparer les valeurs par
des virgules. Par exemple :
26

h1, h2, h3 {
}
font-family: "Helvetica", "DejaVu Sans", sans-serif;
font-weight définit la graisse de la police ; valeurs prédéfinies normal et bold ainsi que
des valeurs relatives au texte courant bolder et lighter.
font-size définit la taille de la police ; valeurs prédéfinies xx-small, x-small, small,
medium, large, x-large et xx-large ; valeurs relatives au texte courant smaller et
larger ou des pourcentages ; ainsi que des unités de longueurs (en particulier px).
font-style définit la forme de la police ; valeurs prédéfinies italic, oblique, normal.
3 Toujours plus, encore plus
3.1 Sélecteurs de pseudo-classes
En plus des sélecteurs précédents, il existe des sélecteurs de pseudo-classes. Ces
sélecteurs particuliers sont prédéfinis et distinguent certains objets particuliers que le
navigateur peut repérer facilement. Par exemple dans un paragraphe, la première lettre
ou la première ligne peuvent être repérées par le navigateur, qui peut alors leur appliquer
des propriétés spécifiques (il s’agit respectivement des pseudo-classes :first-letter et
:first-line). Par exemple :
p:first-letter {
}
font-size: 150%;
p:first-line {
}
font-style: italic;
De même, il existe des pseudo-classes pour définir l’apparence des liens selon qu’ils
sont non visités, que la souris se trouve au-dessus, qu’ils ont été visités ou qu’ils sont
en train d’être activé (p .ex. par un clic) : il s’agit respectivement de :link, :visited,
:hover et :active. Par exemple :
a:link, a:visited, a:active {
}
text-decoration: underline;
a:hover {
text-decoration: none;
color: white;
background-color: black;
}
27

3.2 Combinaison
Tous ces sélecteurs peuvent être combinés et regroupés afin de former des sélecteurs
complexes et précis :
a.important:link, h1 {
}
border-top: 1px;
border-bottom: 1px;
avec par exemple le code Html suivant :
...
L’Y
est une commune de la Somme.
...
indique l’apparence des liens de la classe important lorsqu’ils sont non visités : deux
bordures en haut et en bas sont affichées.
28

4 Css mise en boîte
Jusqu’à présent, nous avons défini un document Html, modifié son apparence par
défaut (couleur, taille du texte, etc.), mais nous n’avons pas touché à sa mise en page
par défaut (i.e. la position de ses éléments).
Initialement, les éléments sont positionnés selon le flux normal. Des propriétés Css
de positionnement permettent de changer la position initiale des éléments : ou bien
relativement au flux normal, ou bien en faisant sortir l’élément du flux normal.
1 Flux normal : en-ligne ou bloc
Lorsque le navigateur cherche à mettre en forme un document Html, il positionne
les éléments du document les uns par rapport aux autres dans l’ordre de lecture du code.
Prenons l’exemple du code suivant et de son affichage dans le navigateur.
...
Gottlob Frege
Friedrich Ludwig Gottlob Frege (8/11/1848 à Wismar,
26/07/1925 à Bad Kleinen), était un mathématicien, logicien et un philosophe
allemand.
Frege est certainement un des plus grands logiciens depuis Aristote,
...
...
Éléments de type bloc ou en-ligne Lorsque le navigateur rencontre le titre (h1),
il le positionne sans aucun autre élément à ses côtés ; il est seul sur la ligne et occupe
29

toute la largeur de la ligne. De même lorsqu’il rencontre un paragraphe. On dit que ce
sont des éléments de type bloc (block).
Mais à l’intérieur du premier paragraphe, l’élément strong se trouve lui, côte à côte
avec le reste du texte. Il en est de même pour l’élément img 2 . On dit que ce sont des
éléments de type en-ligne (inline).
Flux normal Le flux normal consiste à positionner les éléments dans leur ordre d’apparition
dans le code Html de la façon suivante :
– si l’élément est de type bloc, alors on l’affiche sur une nouvelle ligne qu’il occupe
seul ;
– s’il est de type en-ligne, on l’affiche sur la ligne en cours s’il reste de la place, sinon
on en commence une nouvelle sur laquelle on le place au début.
Modification du type d’un élément Il est possible en Css de modifier la façon
dont doit être traité un élément, c’est-à-dire d’indiquer qu’un élément est de type bloc
alors qu’il est par défaut de type en-ligne et vice versa.
Par exemple pour une image, il est fréquent de la redéfinir de type bloc :
img {
}
display: block;
2 Modèle de boîte (box model)
Conservons l’exemple précédent, et rendons visible la bordure de tous les éléments :
* {
border: 5px solid red;
}
Chaque élément possède une bordure, et on constate bien que le titre occupe toute la
largeur de sa ligne. Il y a donc un espacement entre la dernière lettre du titre et le bout
de la ligne. Par contre pour les éléments en-ligne, cet espacement semble nul.
2. Qui d’ailleurs impose sa hauteur à la ligne sur laquelle il se trouve.
30

En fait, chaque élément est contenu dans une boîte qui possède différents espacements,
internes (padding) et externes (margin), ainsi qu’une bordure (border).
Il est possible de changer la valeur des ces espacements par les propriétés Css suivantes,
qui acceptent les unités de longueur vues précédemment (ssec 2.2, p. 25) :
width, height,
padding-top, padding-right, padding-bottom, padding-left,
margin-top, margin-right, margin-bottom, margin-left,
border-top, border-right, border-bottom, border-left.
Par exemple :
strong {
}
margin-left: 10px;
padding-right: 20px;
Remarque Les unités de longueur relatives (%, em) le sont par rapport au bloc conteneur
de l’élément auxquelles elles sont appliquées (voir ci-après, par. 3, p. 33).
2.1 Application : centrage horizontal
Une valeur intéressante des marges est la valeur auto. Cette valeur indique au navigateur
de répartir l’espace restant disponible si l’élément est de type bloc 3 .
Ainsi, pour centrer horizontalement un élément par rapport à son bloc conteneur
(p. ex. une image dans un paragraphe), il suffit d’indiquer la valeur auto à ses marges
gauche et droite :
img {
}
display: block;
margin-left: auto;
margin-right: auto;
3 Les types de positionnement
Il est possible en Css de faire sortir les éléments du flux normal. On peut alors
contrôler précisément l’emplacement des éléments dans une page.
3. Si l’élément est de type en ligne, des marges auto sont nulles (0).
31

Statique (static) Le positionnement statique est le positionnement par défaut. Il
s’obtient en fixant la valeur static à la propriété position de l’élément ciblé par la
règle Css. Par exemple pour les paragraphes :
p {
}
position: static;
Cette valeur de la propriété position est utile afin de revenir au comportement par
défaut (flux normal). Elle est très peu utilisée.
Relatif (relative) Le positionnement relatif permet de placer un élément par rapport
à l’emplacement qu’il aurait eu dans le flux normal, en introduisant un décalage par
rapport aux côtés de sa boîte par défaut (top, right, bottom, left). La place qu’il
aurait occupé dans le flux normal est conservée. Par exemple sur le document Html
précédent :
strong {
}
position: relative;
top: 20px;
left: 30px;
Attention : l’élément ainsi « décalé » peut chevaucher d’autres éléments, et les masquer
en partie.
Remarque Le positionnement relatif est souvent utilisé avec des valeurs nulles (0)
aux propriétés top, bottom, etc. afin d’utiliser l’élément comme bloc conteneur (voir
positionnement absolu ci-après).
Fixé (fixed) Le positionnement fixé consiste à positionner un élément par rapport
à la zone d’affichage entière : même si l’on fait défiler la page, l’élément reste à sa
place ; il ne défile pas.
32

Un élément en position fixée est placé par rapport au haut (top), au bas (bottom),
à la gauche (left) et à la droite (right) de la zone d’affichage. Par défaut, les valeurs
de ces propriétés sont celles qu’aurait eu l’élément s’il était resté dans le flux normal.
L’élément est retiré du flux normal : l’emplacement qu’il aurait occupé dans le
flux normal n’est pas conservé.
Par exemple :
img {
}
position: fixed;
top: 10px;
right: 20px;
Il faut encore une fois faire attention au recouvrement des autres éléments.
Remarque : Si l’on indique en même temps des valeurs pour top et bottom (ou right
et left), alors la hauteur de l’élément height (resp. width) est calculée par le navigateur
(en ajustant les marges ou autre). Par exemple, si l’on souhaite qu’un élément tienne
sur toute la hauteur de la page, on peut fixer top et bottom à 0.
Absolu (absolute) Le positionnement absolu est l’un des plus puissants, mais aussi
le plus complexe à mettre en œuvre : il s’agit de retirer un élément du flux normal
et de le positionner par rapport à son bloc conteneur. Ce bloc conteneur est le
premier élément qui n’est pas en position statique et qui contient (dans le
code Html) l’élément en question.
img {
}
position: absolute;
bottom: 10px;
right: 0;
33

Dans cet exemple le bloc conteneur est l’élément dont la balise est body. L’image est
donc positionnée par rapport aux bords de la page toute entière.
Pour positionner l’image par rapport au paragraphe qui la contient, il faut que le
paragraphe devienne le bloc conteneur de l’image. Pour cela, il suffit de changer le type de
positionnement du paragraphe (qu’il ne soit plus en position statique). L’astuce consiste
à définir le paragraphe en position relative, et de conserver ses valeurs automatiques de
positionnement : ainsi l’emplacement du paragraphe dans le flux normal est conservé
sans aucun décalage (par défaut top, left, etc. sont à 0). Ce qui donne :
p {
}
position: relative;
img {
position: absolute;
top: 10px;
right: 20px;
}
34

Attention : On remarque que l’image déborde de son bloc conteneur (le paragraphe)
et chevauche le paragraphe suivant.
Flottant (float) Un élément en position flottante sort du flux normal, et les éléments
qui suivent (dans le code Html) « coulent » autour.
Un élément peut flotter ou bien à gauche, ou bien à droite. Sa position par rapport
au haut de son bloc conteneur est la position qu’il aurait eu dans le flux normal. Par
exemple :
img {
}
float: left;
On voit que le titre « Biographie » suivant coule aussi autour de l’image lorsqu’elle
est flottante. Il est possible d’empêcher cela, on peut indiquer qu’un élément n’accepte
pas d’élément flottant à sa gauche (left), à sa droite (right) ou les deux (both). Il est
alors placé en dessous, à la suite.
Par exemple, en indiquant que le titre « Biographie » n’accepte pas d’élément flottant
à sa gauche :
h2 {
}
clear: left;
35

4 Éléments génériques div et span
Pour des besoins esthétiques, il arrive qu’il soit nécessaire d’ajouter des boîtes pouvant
contenir plusieurs éléments Html dans le seul objectif de leur appliquer un style
ou une position. Les éléments Html div et span sont des éléments Html génériques de
type bloc et de type en-ligne respectivement.
Par exemple, supposons que l’on veuille construire un sommaire à la page précédente,
comportant un titre et une liste, afin d’appliquer un style et une position à l’ensemble.
Il suffit pour cela de délimiter le code Html du sommaire (titre et liste) de balises
div. Afin d’y appliquer un style, nous identifions ce bloc par l’attribut id :
Sommaire
#toc {
}
Biographie
Contribution en logique et en mathématiques
Apport de Frege aux mathématiques
Éléments de base de sa logique
Calcul des prédicats
Philosophie du langage
Sens et dénotation
On peut alors appliquer un style à tout ce bloc qu’on a nommé toc :
position: fixed;
top: 10px;
left: 10px;
width: 350px;
background-color: silver;
padding: 10px;
Au passage, on augmente la marge gauche du reste du document pour éviter le
chevauchement du sommaire avec le texte du document :
body {
}
margin-left: 400px;
36

De la même façon, les balises génériques span permettent de délimiter une boîte
générique en-ligne.
Remarque Les éléments div et span n’ont pas de signification particulière : il ne faut
les utiliser que lorsqu’aucune autre balise Html ne peut convenir.
5 Conclusion
Avec un peu d’astuce et d’imagination, il est possible de développer de magnifiques
mises en page, tout en conservant un code Html simple et clair. Malheureusement,
l’introduction d’élément sans contenu sémantique div et span, souvent nécessaire pour
les mises en page complexes, casse la séparation du contenu et de la forme.
En pratique, et pour ne pas abuser des éléments Html génériques, on peut :
1. décrire son site en Html sans utiliser div ni span ;
2. établir une maquette visuelle de l’apparence souhaitée de son site ;
3. s’approcher au mieux de la maquette par du code Css et sans modifier le code
Html ;
4. modifier le code Html en introduisant des éléments div ou span lorsque nécessaire ;
5. répéter les étapes 3 et 4 jusqu’à obtention d’un résultat satisfaisant.
37

5 Bonus
Voici quelques cas pratiques simples inspirés de documents usuels. Ils font intervenir
de façon simple et immédiate les notions abordées dans ce cours. Ces exemples peuvent
servir de base à des mises en page plus évoluées.
1 Lettrine
Une lettrine est une lettre initiale décorée placée en tête d’un texte et occupant une
hauteur supérieure à la ligne courante.
Créer une lettrine est très simple. Il suffit de combiner la pseudo-classe first-letter
pour sélectionner la première lettre d’un paragraphe, puis de lui appliquer une position
flottante à gauche (pour les langues écrites de gauche à droite). Il ne faut pas oublier
d’augmenter sa taille, et le tour est joué !
p:first-letter {
}
float: left;
font-size: 300%;
Bien sûr, on peut changer la police de la lettrine, sa couleur, son fond, ses bordures, etc.
2 Notes de marge
Pour obtenir des notes de marge, nous combinons le positionnement absolu, l’utilisation
de balises span, la définition d’une classe, ainsi que la modification des marges
d’un document.
Par exemple, prenons le document Html suivant :
Notes de marge
38

Notes dans la marge
Explications
Par défaut, un élément positionné de façon absolue se trouve à l’emplacement
...
de construire facilement des notes dans la marge.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a lorem eu
...
Fusce non lorem et nibh condimentum suscipit. Curabitur
tempus varius diam quis bibendum. Sed vel eros id odio facilisis
...
Fusce ac
Fusce ac sem vitae augue suscipit rhoncus. Curabitur quis velit non diam
...
Quisque porta pretium turpis commodo aliquet. Morbi
...
pharetra ultrices, nibh magna bibendum tortor, id semper dolor nunc at dolor.
...
Les éléments span dont la classe est note représentent nos notes de marge. Il faut
donc les faire sortir du flux normal (propriété position), les placer près du bord gauche
(left), puis augmenter la marge gauche (margin-left) du document pour éviter les
chevauchements avec le texte normal :
body {
}
margin-left: 200px;
.note {
position: absolute;
top: auto;
left: 20px;
width: 160px;
text-align: right;
39

}
Puisque la valeur de top pour les notes n’est pas modifiée, elle vaut alors auto. Ainsi
la position des notes de marge par rapport au haut de la page est la même que celle
qu’aurait eu la note dans le flux normal.
Sur l’image suivante, les points (rouges) représentent l’emplacement qu’aurait eu la
note de marge dans le flux normal.
3 Mise en page complète
Il est d’usage de concevoir une vue schématique des pages d’un site. Le schéma
suivant illustre une présentation classique d’un site internet en deux colonnes, dont
l’une (nav) est dédiée à la navigation :
header
content
main
nav
footer
Afin de réaliser effectivement cette présentation en Html et Css, nous utilisons :
– le positionnement des éléments dans le flux normal,
– des éléments Html div,
40

– du positionnement flottant,
– et des marges.
Pour décrire les élément du schéma (header, footer, etc.), on utilise des blocs génériques
div auxquels on associe un identifiant :
Mise en page complète
...
...
...
...
On constate que les blocs #header, #content et #footer sont par défaut à la suite
dans le flux normal : ils sont déjà placés les uns en dessous des autres. Il suffit simplement
de définir la hauteur de #header et #footer puisqu’on la connaît :
#header {
}
height: 150px;
#footer {
}
height: 50px;
41

Ces blocs seront probablement des blocs conteneurs pour les éléments Html qu’ils
vont contenir, on change alors leur positionnement :
#header, #content, #footer {
}
position: relative;
À l’intérieur du bloc #content, nous faisons flotter le bloc #nav à gauche et définissons
la marge gauche du bloc #main pour éviter le chevauchement à la même valeur que la
largeur du bloc #nav. Ce qui donne :
#nav {
}
float: left;
width: 250px;
#main {
}
margin-left: 250px;
Le bloc #main doit aussi être un bloc conteneur :
#main {
}
position: relative;
Si le contenu du bloc #main est plus petit que celui du bloc #nav, alors le bloc #footer
risque de se placer à gauche de #nav (car #nav est flottant). Pour éviter cela, il suffit
d’empêcher le bloc #footer de se trouver à côté d’un flottant :
#footer {
}
clear: both;
Ce code Css peut être condensé en rassemblant les différentes déclarations pour
donner au final le fichier style.css suivant :
#header, #content, #footer, #main {
}
position: relative;
#header {
}
height: 150px;
#nav {
float: left;
width: 250px;
}
#main {
margin-left: 250px;
42

}
#footer {
}
height: 50px;
clear: both;
Chacune des pages du site peut utiliser le même code Css style.css. Tous les fichiers
Html auront la structure de base du fichier Html précédent : il suffira de remplir le
contenu des éléments #header, #nav, #main et #footer dans le code Html.
Ceci facilite la maintenance et permet une certaine homogénéité visuelle.
Html et Css c’est bon ; mangez-en !
43