Lors de la consultation d'un site internet, le logiciel de navigation traduit les opérations du visiteur en requêtes vers un serveur. À partir de ces requêtes, le serveur construit une page sous la forme d'un fichier html unique ou, plus couramment, d'un ensemble de fichiers et envoie le résultat au navigateur. Celui-ci restitue la page au visiteur en l'interprétant sous forme visuelle, sonore ou tactile.
Ce qu'un appelle page web est l'assemblage de trois éléments :
HTML : HyperText Markup Language, c'est à dire langage de balisage d'hypertexte, permettant d'organiser et de hiérarchiser un document.
CSS : Cascading Style Sheet, c’est à dire feuille de style en cascade, spécifiant les règles de mise en forme d'un document balisé, ici, en HTML.
JS : JavaScript, langage de programmation de scripts, fragments de programmes permettant d'ajouter des fonctionnalités ou comportements à une page web.
Une page HTML est un simple fichier texte balisé interprété par le navigateur. Sa structure minimale est très simple. La première ligne du fichier indique au navigateur qu'il s'agit bien d’une page au format HTML et qu’il doit l'interpréter en tant que telle.
<!doctype html>
La page elle-même commence avec une balise <html> et s'achève avec la balise fermante lui correspondant : </html>. On obtient donc :
<!doctype html>
<html>
[…]
</html>
Pour le contenu de la page elle-même, on distingue deux parties. Il y a d'abord l'en-tête (balises <head> et </head>), pensé et formaté pour une lecture par des logiciels (navigateurs, moteur de recherche…). On y trouve des métadonnées et des liens vers des ressources externes (scripts et feuilles de style par exemple). Son contenu ne s'affiche donc pas directement sur la page.
En général, y figurent une métadonnée indiquant de quelle manière ont été encodés les caractères du fichier HTML (UTF-8 dans l'exemple qui suit) et le titre (paire <title></title>) de la page à afficher dans l'onglet ou la barre de fenêtre du navigateur.
Le contenu à destination directe du visiteur se situe, lui, dans le corps de la page (balises <body> et </body>). Notre page HTML minimale pourrait donc se présenter comme suit :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Titre du document</title>
</head>
<body>
</body>
</html>
Les balises sont des repères donnant leur structure au document HTML. Il faut les utiliser de manière sémantique, c'est à dire en fonction de leur sens et de l'importance éditoriale que l'on veut conférer au contenu qu'elles encadrent et non pas pour des raisons de mise en forme.
Les balises HTML fonctionnent majoritairement par paires balise ouvrante–balise fermante. Si les navigateurs savent « ajouter » seuls les balises fermantes, en pratique et pour des pages complexes, il vaut mieux veiller à les clore pour éviter des problèmes d'affichages.
Note : les balises <meta> font partie de celles n'allant pas par paires
Comme vous l‘avez sûrement remarqué, une balise est constituée d'une ou plusieurs lettres encadrées par < et >. Une balise de clôture est reconnaissable à son /.
Le contenu désigné par une balise est appelé élément. Il faut distinguer, deux types d'éléments par défaut : les blocs (block en anglais) et les éléments contigües ou en ligne (inline en anglais). Les blocs peuvent contenir des blocs et des éléments en ligne, ces derniers ne doivent contenir que d'autre éléments en ligne.
Les éléments sont parfois dotés d'attributs qui sont alors spécifiés dans sa balise ouvrante sous la forme attribut="propriété(s)". Certains attributs sont spécifiques à un élément (alt pour les images par exemple) mais d'autres sont dits génériques. Parmi eux on trouve :
<abbr> ou <a> et est affichée par défaut dans les navigateurs comme une bulle d'information au survol de la souris.<h1> à <h6><p><ul>, <ol> et <dl><li><dt> et <dd><dl> qui les encadre, correspondent aux éléments terme (<dt>) et définition (<dd>) des listes de définitions.<blockquote><table><form><div><section>, <header>, <footer>, <aside>, etc. (lien pour en savoir plus sur les éléments blocs des recommandations HTML 5)<a><strong>, <em> et <mark><strong>), de mettre de l'emphase dessus (<em>) ou de mettre en avant sa pertinence (<mark>).<q><img><img src="image.png" alt="texte alternatif" width="128" height="128" >. L’élément <img> est désormais complété par les éléments <audio> et <video>(qui eux fonctionnent par paires de balises, lien pour en savoir plus sur ces éléments audiovisuels).<br><span><i>et <b>, retournés en grâce avec HTML 5 (lien pour en savoir plus sur les recommandations d'utilisation de ces balises en HTML 5).<abbr><acronym> ayant été dépréciée). Il est utilisé avec l'attribut title qui permet de renseigner sur sa signification et souvant celui lang qui indique à quelle langue il appartient.<input>Pour résumer cette première approche d'une page web, voici un exemple moins minimaliste d'un fichier HTML.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Une page HTML</title>
</head>
<body>
<header>
<h1>Ma première page <abbr title="HyperText Markup Language" lang="en">HTML</abbr></h1>
<p>Comme son titre l'indique, <em>mes premiers pas</em> dans la construction d'une page web.</p>
</header>
<p>J'y ai découvert :</p>
<ul>
<li>les balises</li>
<li>les types d'éléments</li>
<li>les attributs</li>
</ul>
</body>
</html>
Comme pour la production de documents imprimés, il est possible d’employer à la fois des images dites bitmap, composées de pixels, et des images vectorielles, composées de coordonnées. Les formats d’image universels, à ce jour sont :
Si le langage HTML est à réserver à l'organisation éditoriale d'un document, la mise en forme de celui-ci se fait par un ensemble de règles rassemblées dans une ou plusieurs feuilles de style en cascade (Cascading Style Sheet en anglais).
Ces règles peuvent êtres dans un fichier texte appelé depuis l'en-tête de la page html (entre les balises <head> et </head> à l'aide de la balise <link> comme suit :
<link rel="stylesheet" type="text/css" href="mes styles.css">
Elles peuvent également figurer dans le corps de la page HTML elle-même, entre une paire de balise <style> et </style> :
<style>
[ici vient une série de règles]
</style>
Enfin, on peut utiliser l'attribut style pour assigner directement des caractéristique de mise en forme à un élément. Solution à utiliser en dernier recours.
Ces trois solutions peuvent être utilisées pour une page web. Il faut alors se rappeler de ces deux principes fondamentaux des CSS :
Ainsi, les règles d'affichage par défaut des navigateur sont remplacées par celles des fichiers liés, elles-même remplacées par celles contenues dans les balises <style> du document, ces dernières, enfin, se voient supplantées par les propriétés définies dans l'attribut style d'un élément.
On construit une règle de CSS en s'appuyant sur un sélecteur permettant de choisir les éléments à mettre en forme. L’ensemble des couples propriété : valeur(s), séparés par un point-virgule, vient après ce sélecteur, entre deux accolades.
sélecteur {
Propriété 1 : valeurs(s);
[...]
Propriété n : valeur(s);
}
Consulter la liste des sélecteurs dans les fiches manuscrites les feuilles de style 1 et 2.
font-famillyfont-family: Gill Sans Extrabold, Helvetica Neue, sans-serif;. La dernière famille spécifiée est un nom générique qui sera remplacé par la police par défaut correspondante du navigateur : serif, sans-serif, cursive, fantasy ou monospace.font-stylefont-weightfont-sizeline-heightfont-varianttext-transformcolortext-decorationbackground-colorbackground-imageurl(image.png). Cette propriété doit être complétée avec les autres propriétés relatives aux images d'arrière plan : background-origin, background-position, background-repeat, background-size, et background-attachment.backgroundborderAvant toute chose, avoir en tête le modèle de bloc (box-model en anglais) utilisé par les navigateurs pour. L’espace occupé par un bloc est la somme de ses dimensions (width pour la largeur et height pour sa hauteur), de ses marges externes (margin), internes (padding) et de l’épaisseur de son cadre (border).
Attention : quand une largeur ou une hauteur sont déclarées, l’encombrement du bloc, par défaut, pour les navigateurs, est bien l'addition de l'ensemble. Le padding n’est compté dans la largeur de l’élément ! Ainsi, dans l’exemple de règle ci après :
.monbloc {
width: 128px;
height: 128px;
margin: 15px;
padding: 14px;
border: 1px solid grey;
}
l’encombrement de l'élément de classe monbloc est un carré de 158px de côté et non de 144px (ou 143px si on considère la bordure intégrée à la largeur) de côté.
Toutefois, il est possible à l'aide de la propriété box-sizing de modifier ce comportement.
box-sizing:content-boxbox-sizing:border-boxVoir la démonstration dans un codepen.
Pour manipuler les dimensions d’éléments en CSS, il est possible d'utiliser des unités absolues ou des unités relatives.
Les unités absolues sont les pixels (px) et les unités de longueur usuelles : pouce (in), centimètre et millimètre (cm, mm) ou typographiques : le point postscript (pt) ou le Pica (pc). Le pixel est adapté à l’affichage sur écran, les autres unités sont à réserver aux feuilles de style d’impression.
Les unités relatives classiques sont les pourcentages (%) et l’em (em). Cette dernière est égale à la taille de la police de caractère de l’élément. Il existe aussi l’ex, moins utilisée, correspondant à la hauteur d’un x.
Une nouvelle unité typographique très utile est le rem, pour root em, soit em de la racine. Sa valeur ne dépend pas de la taille de la police de l'élément sélectionné mais de celle de la racine du document, correspondant à la balise <html>.
Pour les dimensions des blocs, on dispose désormais des vw, pour viewport width, largeur de la fenêtre d’affichage et vh pour viewport height, hauteur de la fenêtre d’affichage. 1vw est égal à 1% de la largeur de la fenêtre et 1vw est égal à 1% de la hauteur de la fenêtre.
Voir la page en français du W3C sur les unités.
En attribuant la valeur left ou right à la propriété float, d’un élément, celui-ci se cale à gauche (left) ou à droite (right) de sont parent.
Les blocs suivants remontent et leurs contenus viennent habiller le bloc flottant (fig. 2.2).
Le bloc parent ne tient plus compte du bloc pour sa hauteur, si les éléments après le bloc flottant sont plus court que lui, le parent se clôt après eux (fig 2.3).
On peut empêcher un bloc d’habiller un élément flottant avec la propriété clear. clear:left;empêche la présence d’un flottant à la gauche de l’élément, clear:right; à sa droite et clear:both; aux deux.
En affectant la valeur none à float ou à clear, l’élément concerné reprend son comportement par défaut.
Vous pouvez faire des essais avec ce codepen de démonstration de la propriété float
Permettent de répartir de divers façon la place disponible à l'intérieur d’un élément (en largeur ou en hauteur) entre ses enfants direct. Le contexte flexbox est défini sur le parent en affectant la valeur flex à la propriété display : display:flex;. Il faut ensuite, à minima, attribuer une propriété flex aux enfants. Voici donc un exemple simple d'utilisation (illustré dans le codepen qui le suit).
.parent {
display:flex;
}
.enfants {
flex:1;
}
Vous pouvez faire des essais avec ce codepen de démonstration du contexte flexbox
flex-directionflex-wrapjustify-contentalign-itemsalign-contentorderflex-growflex-shrinkflex-basisflexflex-grow flex-shrink flex-basis, par défaut à les valeur 0 1 auto.align-selfLe contexte grid défini sur le parent en affectant la valeur flex à la propriété display : display:grid;.
Une fois la propriété display:grid; affectée au bloc, il convient d’indiquer, à minima, le nombre de colonnes du sytème de mise en page et de leurs largeurs mais aussi, éventuellement, un nombre de rangées et leurs hauteurs. Cela est dévoué aux propriétés :
grid-template-columnspermet de renseigner le nombre de colonnes constitutifs de la grille par une suite de valeurs séparées par une espace. Le code suivant dessine une grille ayant trois colonnes de 100 pixels de large.
.maGrille { display:grid; grid-template-columns:100px 100px 100px; }
grid-template-rowspermet de définir un nombre de rangées constitutifs de la grille par une suite de valeurs séparées par une espace. La modification du code précédent qui suit ajoute à la grille trois rangées de 168px de hauteur.
.maGrille { display:grid; grid-template-columns:100px 100px 100px; grid-template-rows:168px 168px 168px; }
Par défaut, les éléments organisés en grille sont collés entre eux. Leur espacement peut être réglé avec grid-row-gap (espacement de rangée) et grid-row-gap (espacement de colonne) ou leur raccourci grid-gap. par exemple :
.maGrille {
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:168px 168px 168px;
grid-gap:16px 14px; /*équivalent à grid-row-gap:16px et grid-column-gap:14px*/
}
Ajoute à ma grille un espacement entre les colonnes de 14 pixels et de 16 pixels entre les rangées.
Si pour une raison ou une autre il y a plus d’éléments à placer que les cases prédéfinies, les rangées ou colonnes supplémentaires créées automatiquement n’héritent pas des dimensions renseignées pour grid-template-columns ou grid-template-row. Pour pallier ce manque, les propriété grid-auto-columns (colonnes automatiques) et grid-auto-rows (rangées automatiques) permettent de préciser une dimension par défaut.
Par défaut, le placement est implicite, les éléments de la grilles se placent dans leur ordre d’apparition dans le code HTML de la page mais l’intérêt des systèmes de grille CSS est de pouvoir placer et dimensionner des blocs individuellement en s’appuyant sur les rangées et colonnes définies. Pour faire cela, il y a deux approches possibles : par lignes occupées (line-based positionning) ou par gabarit de zones (grid template areas).
À l’aide des attributs grid-column-start (colonne de départ), grid-column-end (colonne de fin), grid-row-start (rangée de départ), grid-row-end (rangée de fin). On peut aussi leur substituer les raccourcis grid-column ou grid-row en précisent le numéro de début et celui de fin séparés par « / ».
Vous pouvez faire des essais avec ce codepen de démonstration de positionnement par ligne
Le principe est de « dessiner » la forme des zones à l’aide de texte et d‘attribuer ensuite les zones aux éléments concernés.
Les propriété CSS permettant de répartir le contenu d'un bloc en plusieurs colonne ont été pendant longtemps laissées de côté au profit des grilles de mise en page et des boites flexibles (deux concepts importants qui commencent à aboutir et méritent leurs propres chapitres). On peut cependant les utiliser pour réaliser des colonnes simples comme dans un journal par exemple.
Les principales propriétés sont les suivantes :
column-widthcolumn-countcolumn-gapcolumn-ruleVoir un exemple sur codepen.