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.
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.
p Une page html est un assemblage de contenants rectangulaires.
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.
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>
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.
p Dans le cas où un rectangle fait partie du contenu d'un autre.
Le reste du contenu du contenant est, bien entendu, conservé.
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.
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.
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é.
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.
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.
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.
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 :
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 :
p Le rectangle bleu, plus large, déborde du rouge.
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.
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.
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.
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 blup Cette combinaison permet d'aligner des blocs.
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.
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.
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,
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.