h1 Cette recherche illustre les caractéristiques et les possibilités de styles de html

h2 html

p html est, avant tout, un langage de mise en page, interprété par le navigateur de réseau, Chrome, Firefox, Internet Explorer, ....
Interprété signifie traduit du langage humain en langage machinique, par le navigateur, au fur et à mesure de l'exécution du programme.

h2 Le navigateur

p Installé sur l'ordinateur personnel, le navigateur, client, reçoit du site consulté, serveur, des instructions relatives aux contenants et aux contenus. Par exemple,mets un rectangle de 500x200 au centre, contenant, et inscrit Toto vit en Belgique, contenu.

Toto vit en Belgique

h2 Les contenants

h3 Un ensemble de rectangles

p Une page html est constituée de rectangles.

h4 Structure d'un rectangle

p Le contenu, texte, images, autres rectangles, a une largeur (width, w) et une hauteur (height, h). Il est entouré des rembourrages (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).

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)

h4 Position des rectangles

p Par défaut, les rectangles se placent les uns sous les autres

0,1,0,450,libre
bla bla blabla bla
10,2,0,libre,libre
bla bla blabla bla
10,1,10,400,100
bla bla blabla bla

ou les uns dans les autres.

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

h4 Largeur d'un rectangle

p Largeur = width + paddings + borders + margins. width, par défaut est calculé pour atteindre la largeur maximum possible. Ce maximum vaut le width du rectangle qui le contient ou celui de body.

h4 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 ou est illimité.

h4 Body

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

h4 Balises html

p Tout l'affichage d'une page html est piloté par des balises. La plupart des balises html déclenchent la création d'un nouveau rectangle. Ces balises sont dites "de type block". body, les titres, headers, h1 à h6, les paragraphes, p, les divisions, div, sont des exemples de telles balises. Ces balises sont associées à des styles par défaut. Ces styles peuvent être redéfinis par les feuilles de style, les fichiers .css.

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 des styles complexes, font pour la police. Ces balises sont dites "de type line".

h3 Position des rectangles

h4 Position par défaut

p Immédiatement en bas et à droite de la position en vigueur, sans chevauchement. Sauf instruction particulière, la posistion en vigueur est le début de la ligne suivante.

0,1,0,450,libre
bla bla blabla bla
10,2,0,libre,libre
bla bla blabla bla
10,1,10,400,100
bla bla blabla bla

h4 Imbrication

p Dans le cas où un rectangle fait partie du contenu d'un autre, le contenu précédent est, bien entendu, pris en compte.

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

p Dans cet exemple, le rectangle vient après la première ligne de texte. Il est positionné au début de la ligne suivante avec une marge de 10 px. A défaut de largeur imposée, il occupe toute la largeur du rectangle hôte.

h5 Débordement

p Le navigateur remplit le contenu du rectangle sur toute sa largeur 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.

h4 Inline-block

p Avec 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 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 ombinaison 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 px. Avec -5 px, les 2 bordures sont superposées.

h4 Float

p 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

h2 Récapitulation

h3 Fixer la largeur de page et centrer

p Le but est d'éviter l'écrasement causé par la résolution d'écran ou par le redimensionnement de fenêtre par l'utilisateur.
En cas de largeur insuffisante, le navigateur place un métro.
Largeur fixée à 1500 px et marges automatiques. Rétrécir pour observer le métro.

h3 Définir une banderolle. Enseigne à gauche et titre à droite

Enseigne du site
Nom du site
Slogan du site

h3 Définir un menu simple.

 Choix 1 
 Choix 2 
 Choix 3 
 Choix 1 
 Choix 2 
 Choix 3 

h2 Bouton

h3 Bouton mobile

Mobile

h3 Bouton fixe

Fixe

h2 Liens à l'intérieur d'une page

h3 Usage

Lien permettant de se rendre directement à un emplacement précis dans la page.

h3 Lien

p Le lien interne est libellé a href='#identité' et est placé au point de départ. C'est le # qui indique qu'il s'agit d'un endroit, à l'intérieur de la page, identifié par id='identité'. N'importe quelle balise, pouvant contenir un id=, peut être utilisée.
Cliquer pour essayer et retourner en haut.

h2 Liens vers d'autres pages

p Cliquer pour retourner vers l'autre partie du site (a href='http://www.yvesdelehaye.eu/yves_rech_cine.php').