h1 Objectif

p Cette recherche explique les principes d'html et ceux de la mise en page par le navigateur.
Il est conclu par les principales lacunes observées et les précautions nécessaires pour les éviter.

Les codes inexpliqués qui apparaissent çà et là, h1, p, sont ceux des «balises» invisibles. Je les signale pour matérialiser leur usage.

h1 html

p html est, avant tout, un langage de mise en page, interprété par le navigateur de réseau, Chrome, Firefox, ...
Interprété signifie traduit du langage humain, anglais, en langage machinique, instructions exécutables, par le navigateur, au fur et à mesure du déroulement du programme.

h1 Un assemblage de rectangles

p Une page html est un assemblage de contenants rectangulaires.

h1 Balises

p Une instruction de mise en page s'appelle une balise.
Elle commence par une <, suivie de son code, suivi de divers paramètres, suivis d'une >.
Elle définit, le plus souvent, le contenant rectangulaire, balise de contenant.
La > est suivie par le contenu, lui-même suivi par une < et le code de fin de contenu, /code, et une >.

En voici un exemple.
<p id='identite_propre' class='classe_de_balises' style='border:1px dashed grey;width: 398px;height: 100px;margin: 10px;padding : 0px;'>
bla bla blabla bla bla bla blabla bla bla bla blabla bla bla </p>

bla bla blabla bla bla bla blabla bla bla bla blabla bla bla

Seul le code de la balise, ici p, est obligatoire.
Voici ce que ça donne.
<p> bla bla blabla bla bla Par défaut, le contenu de ce contenant dispose de toute la largeur possible, 1560 pa, bla blabla bla bla bla blabla bla bla </p>

bla bla blabla bla bla Par défaut, le contenu de ce contenant dispose de toute la largeur possible, 1560 pa, bla blabla bla bla bla blabla bla bla

Pour matérialiser la largeur possible du contenu, j'ajoute une bordure pointillée d'1 pa de large.
Voici ce que ça donne.
<p style='border:1px dashed grey;'> bla bla blabla bla bla Par défaut, le contenu de ce contenant dispose de toute la largeur possible, 1558 pa, bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla bla bla blabla bla bla bla blabla bla bla bla bla bla blabla bla bla bla blabla bla bla Très logiquement, lorsqu'il manque de place, le contenu est continué juste en dessous, en commençant à gauche.</p>

bla bla blabla bla bla Par défaut, le contenu de ce contenant dispose de toute la largeur possible, 1558 pa, bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla bla bla blabla bla bla bla blabla bla bla bla bla bla blabla bla bla bla blabla bla bla Très logiquement, lorsqu'il manque de place, le contenu est continué juste en dessous, en commençant à gauche.

h1 Structure d'un rectangle

p Un rectangle exemplaire est matérialisé par le pointillé extérieur.
Le contenu a une largeur possible (width, w) et une hauteur possible (height, h). C'est espace possible est matérialisé par le pointillé intérieur.
Il est entouré des pourtours (padding, p, haut, droite, bas, gauche), suivis des bordures (border, b, haut, droite, bas, gauche) et, ensuite, des marges (margin, m, haut, droite, bas, gauche).

Dans la suite, malgré ma détestation du franglais, width représente la largeur possible du contenu, pour ne pas confondre avec la largeur totale du rectangle. Même mode opératoire pour height et hauteur.

En voici la balise et le contenu.
<p style='width: 400px;height: 100px;margin: 10px;padding: 10px;border: 5px red;margin: 10px;'>
De gauche à droite :
m 10 + b 5 + p 10 + w 400 + p 10 + b 5 + m 10 = 450
De haut en bas :
m 10 + b 5 + p 10 + h 100 + p 10 + b 5 + m 10 = 150
Notation : 10,5,10,400,100 (m,b,r,l,h) </p>

De gauche à droite :
m 10 + b 5 + p 10 + w 400 + p 10 + b 5 + m 10 = 450
De haut en bas :
m 10 + b 5 + p 10 + h 100 + p 10 + b 5 + m 10 = 150
Notation : 10,5,10,400,100 (m,b,r,l,h)

Un observateur attentif constate que la balise et le contenu ne correspondent pas exactement à l'affichage.
Il faudrait 3 bordures pour y parvenir, sans parler des caractères rouges et des sauts de ligne inexplicables.
J'ai utilisé une programmation plus complexe pour matérialiser la structure d'un rectangle.
Pas de panique, tout deviendra clair et, abstraction faite des pointillés, tout est vrai.

h1 Imbrication

p Dans le cas où un rectangle fait partie du contenu d'un autre. Le reste du contenu du contenant est, bien entendu, conservé.

0,1,0,450,libre
bla bla blabla bla
10,2,0,libre,libre
bli bli blibli bli
bla bla blabla blabla bla blabla bla bla bla blabla bla

p Dans cet exemple, le rectangle vient après 2 lignes de texte. Il est positionné au début de la ligne suivante avec une marge de 10 pa.

h1 Largeur d'un rectangle

p Largeur = width + paddings + borders + margins. width, par défaut, est calculé, par le navigateur, pour accorder au contenu la largeur maximale possible. Ce maximum vaut le width du rectangle qui le contient - 2 paddings - 2 borders - 2 margins.

h1 Hauteur d'un rectangle

p Hauteur = height + paddings + borders + margins. height, par défaut, est défini par le contenu. Sans contenu, il est nul. Le maximum est le height du rectangle qui le contient - paddings - borders - margins ou est illimité.

h1 Body

p Le rectangle obligatoire contenant tous les autres s'appelle body. La largeur maximale possible de son contenu, width, par défaut, vaut la résolution d'écran - 2 pourtours - 2 bordures - 2 marges.

La hauteur maximale de son contenu, height, par défaut, est illimitée.

h1 Position des rectangles

p Par défaut, les rectangles se placent les uns sous les autres, sans chevauchement, au début du contenu et à la pa immédiatement inférieure.
Dans l'exemple qui suit, le contenu commence en 12 pa, après m 5 + b 1 + p 5. Chaque rectangle a 38 pa de haut.
De haut en bas, si rectangle 1, r1, occupe de x12,y1 à x12,y38, r2 s'étend de x12,y39 à x12,y77 et r3 commence en x12,y78.

0,1,0,libre,libre
bla bla blabla bla
0,1,0,libre,libre
ble ble bleble ble
0,1,0,libre,libre
bli bli blibli bli

Dans l'exemple qui suit, les 3 ont des tailles différentes, surtout des hauteurs. r1 mesure 38 pa, 2x(m 0+b 1+p 0)+h36, r2 60 pa, 2x(m10+b2+p0)+h36, r3 142 pa, 2x(m10+b1+p10)+h100.
De haut en bas, si le coin supérieur gauche de r1 se trouve en x12,y1 , celui de r2 est en x12,y39 et celui de r3 en x12,y99.

0,1,0,450,libre
bla bla blabla bla
10,2,0,libre,libre
ble ble bleble ble
10,1,10,400,100
bli bli blibli bli

h1 Débordement

p Le navigateur remplit le contenu du rectangle sur toute sa width avant de passer à la ligne suivante.
Si une largeur ou une hauteur supérieure est imposée, il se produit un débordement.

p Exemple de débordement vertical :

bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla
blu blu blublu blu blu blu blublu blu blu blu blublu blu blu blu blublu blu blu blu blublu blu blu blu blublu blu

p La position du rectangle inférieur est calculée sur base des dimensions du supérieur et ce qui déborde du supérieur se mélange avec le contenu de l'inférieur.

p Exemple de débordement horizontal :

bla bla blabla
blu blu blublu blu blu blu blublu blu blu blu blublu blu blu blu blublu blu blu blu blublu blu blu blu blublu blu
bla bla bla

p Le rectangle bleu, plus large, déborde du rouge.

h1 Balises de contenu

p Certaines balises ne déclenchent pas la création d'un nouveau rectangle et ne provoquent pas de changement de ligne. Elles défi particularisent une partie du contenu d'un rectangle. Par exemple b pour les caractères gras, u pour le soulignement, s pour le barrage, span pour les cas complexes, font pour la police.

h1 Styles

Les caractéristiques, propres au rectangle, et son contenu, balise de contenant, ou au contenu, balise de contenu, définissent le style appliqué.
Il y a la largeur, la hauteur, les pourtours, les bordures, les marges. Il y a aussi la police, sa taille, sa couleur. Et il y en a encore beaucoup d'autres.

Le style peut être défini dans la balise ou ailleurs, selon une grille avec 4 priorités.
Priorité 1, le coeur de la balise, grâce au paramètre style=.
Priorité 2, une caractéristique identitaire, définie dans le fichier de la page, ou dans une feuille de style.
Priorité 3, une caractéristique de classe, définie dans le fichier de la page, ou dans une feuille de style.
Priorité 4, une caractéristique par défaut, détenue jalousement par le navigateur.

h1 Inline-block

p Avec le paramètre de style inline-block, le «block» reste un rectangle mais est aligné.
Dans l'exemple, la dernière ligne de chaque bloc est dans la continuation du texte qui le précède.

blu blu blublu blu
bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla
blu blu blublu blu blu
blu blu blublu blu blu blu blublu blu blu blu blublu blu blu blu blublu blu blu blu blublu blu blu blu blublu blu

p Combiné avec le paramètre de style vertical-align, les côtés supérieurs des rectangles peuvent être alignés avec le côté supérieur du texte.

blu blu blublu blu
bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla
blu blu blublu blu blu
blu blu blublu blu blu blu blublu blu blu blu blublu blu blu blu blublu blu blu blu blublu blu blu blu blublu blu

p Cette combinaison permet d'aligner des blocs.

div id=div81 bla bla bla blabla bla bla bla blabla bla bla bla blabla
div id=div82 blu blu blublu blu blu blu blublu

p L'espace entre les blocs peut être supprimé grâce à une marge gauche de -4 pa. Avec -5 pa, les 2 bordures sont superposées.

h1 Float

p Autre paramètre de style. Faire flotter un rectangle à gauche ou à droite permet au texte de son contenant de l'entourer au lieu de se placer au dessus ou en dessous.

bla bla blabla bla bla bla blabla bla
blu blu blublu blu
bla bla blabla bla bla bla blabla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla

h1 Le navigateur

p Le navigateur adapte les instructions qu'il reçoit à la situation pour offrir ce que ses programmeurs espèrent être le meilleur affichage possible.
Il calcule la taille de la fenêtre disponible. En largeur il tient compte de sa propre fenêtre et de l'ascenseur. En hauteur, il tient compte de sa propre fenêtre, des onglets, de la barre de navigation, des favoris, des téléchargements, du métro.
Si la fenêtre disponible est trop basse sur oi, il ajoute un ascenseur. Si la fenêtre disponible est trop étroite sur oi, il ajoute un métro.
Connaissant les dimensions disponibles, il ajuste les width par défaut et agence les rectangles conformément aux instructions.

Si le concepteur veut ce qui suit, quelles que soient les circonstances,

blu blu blublu blu
bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla
blu blu blublu blu blu
blo blo bloblo blo blo blo bloblo blo blo blo bloblo blo blo blo bloblo blo blo blo bloblo blo blo blo bloblo blo
Voici ce qu'il verra, avec une fenêtre plus étroite, s'il ne prend pas les précautions nécessaires
blu blu blublu blu
bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla
blu blu blublu blu blu
blo blo bloblo blo blo blo bloblo blo blo blo bloblo blo blo blo bloblo blo blo blo bloblo blo blo blo bloblo blo


En matière de style, le navigateur contient aussi une masse inimaginable de valeurs par défaut, connues de lui seul, parfois conditionnées. Par exemple body,m libre,b libre,p libre donne body,m 0,b 0,p 0 alors que body,m libre,b 1,p libre donne body,m 8,b 1,p 0. Pq cette marge de 8 pa ?

h1 Les précautions à prendre

h2 Maîtriser les largeurs

Une page conçue pour un écran d'ordinateur de 1600 pa de large, vue sur un écran d'asel de 800 pa, risque de ne plus ressembler à rien. Je préfère un métro à un empilement et je fixe la width de body, ce qui protège tous ses rectangles intérieurs.

h2 Maîtriser les styles

Le navigateur palie le manque d'imagination du concepteur en appliquant les styles par défaut, connus de lui seul.
Pour éviter les mauvaises surprises, je m'astreins à exprimer tous les paramètres importants.