HTML4 : les principales balises

Exemple

Le code de la page

Dans la page ci-dessous j'ai essayé d'intégrer les principales balises HTML4 à l'exception de celles relatives aux formulaires.

... <style> div {background :pink ; margin : 10px; padding : 10px; } </style> </head> <body> <div id ="titres"> <h1 id ="haut" >Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <p>Corps de texte associé au titre de niveau 2. <br>Blabla blabla Blabla blabla Blabla ... <h3>Titre de niveau 3</h3> <p>Corps de texte associé au titre de niveau 3. <br>Blabla blabla Blabla blabla Blabla ... <h3>Titre de niveau 3 </h3> <p>Corps de texte associé au titre de niveau 3. <br>Blabla blabla Blabla blabla Blabla ... <h2>Titre de niveau 2</h2> <p>Corps de texte associé au titre de niveau 2. <br>Blabla blabla Blabla blabla Blabla ... </div><!--fin boite titres--> <hr> <div id ="texte"> <h2>Les balises qui donnent des effets de style aux mots</h2> <p><b>Texte en gras </b><i>texte en italique </i><s>texte barré </s><u>texte souligné </u> <br>Le mot <sub>bas</sub> est en décalage bas <br>Le mot <sup>haut</sup> est en décalage haut <br> Le mot <q>cata</q> est entre guillemets <br><i>Texte en italique mais sans importance particulière.</i><em> Texte en italique mais important</em> <br><b>Texte en gras mais mais sans importance particulière.</b><strong> Texte en gras et très important</strong> <br><s>Texte barré mais effet de style</s>. <del> Texte barré mais indiquant une modification importante</del> </div><!--fin boite texte--> <hr> <div id ="listes"> <h2>Les listes</h2> <ul>Une liste à puces : <li>item 1 de la liste</li><li>item 2 de la liste</li><li>item 3 de la liste</li> </ul> <ol>Une liste numérotée : <li>item 1 de la liste</li><li>item 2 de la liste </li><li>item 3 de la liste </li> </ol> </div><!--fin boite listes--> <hr> <div id ="tableau"> <h2>Un tableau</h2> <table> <tr> <th>en-tête colonne 1</th><th>en-tête colonne 2</th><th>en-tête colonne 3</th> </tr> <tr> <td >contenu cellule</td><td>contenu cellule</td><td>contenu cellule</td> </tr> <tr> <td >contenu cellule</td><td >contenu cellule</td><td >contenu cellule</td> </tr> <tr> <td >contenu cellule</td><td >contenu cellule</td><td>contenu cellule</td> </tr> </table> </div><!--fin boite tableaux--> <hr> <div id ="images"> <h2>Les images</h2> <img src ="../images/plongeur2.gif" alt ="plongeur" width = "200" > <img src ="../images/requin.gif" alt ="requin" width ="200"> </div><!--fin boite images--> <hr> <div id ="liens"> <h2>Les liens hypertextes </h2> <a href = '#haut'>Haut de page </a> <a href = 'https://darchevillepatrick.info' target ='_blank'>Mes tutoriels en ligne </a> </div><!--fin boite liens--> </body></html>

Commentaire

La feuille de style est minimaliste !
Il y a une seule règle de style pour mettre en forme les boites DIV car sachez qu'il n'y a aucune mise en forme par défaut pour cette balise.

Concernant le code de la partie BODY notez les commentaires à la suite de chaque balise fermante DIV. En effet on ne disposait que de la balise DIV pour structurer la page : créer de grandes divisions. Mais si on avait le malheur de ne pas indenter le code HTML on se trouvait vite perdu dans les balises fermantes DIV ... D'ou l'intérêt de les commenter pour savoir si le compte y est.

Tests

Le rendu avec le navigateur

Grâce au rendu de cette page la notion de balise "inline" et balise "block" doit sauter aux yeux ;

Vous constatez que les textes balisés par b,strong,i,em,u,sub, sup,s, del,q sont côte à côte. Ce sont des balise "inline".
Par contre les textes balises par h1,h2,p,ul,ol,li,table,tr sont des balises "block" ou boites !
Les images et les liens sont aussi de front ; img, a sont des donc des éléments en ligne. De même que th,td.

La mise en forme par défaut

Sachez que même en l'absence de CSS le navigateur va afficher la page en appliquant une mise en forme par défaut pour chaque type de balise.
Examinons la mise en forme par défaut pour chaque type de balise !

Body

Par défaut la page a la largeur de l'écran (width : 100%) avec alignement gauche.
Le texte utilise une police de type serif (Times New Roman si installée sur le PC du visiteur).

Les balises titres

Les balises H1 à H6 apparaissent en gras avec un alignement gauche et avec des marges externes haute et basse.
La taille et les marges sont décroissantes : le titre balise par H1 a une taille plus grande que H2 et H2 une taille plus grande que H3, etc.

Les paragraphes

Le texte balise par P est aligné à gauche.
Le passage à la ligne dans un paragraphe est automatique ; un mot n'est jamais coupé.
Pour forcer le passage à la ligne utilisez BR !

Les balises "inline" de mise en forme des mots : strong,b,u,i,em,s,del, etc.

Différence entre B et STONG : dans les deux cas le texte est en gras. Mais STRONG a aussi une signification sémantique : texte d'une grande importance.
Dans le cadre du référencement naturel de votre site il faut baliser par STRONG les notions clefs.
B c'est simplement un effet de style.

Par défaut le texte à l'intérieur de STRONG apparait en gras mais rien ne vous interdit de changer cette mise en forme via le CSS ...

Différence entre I et EM : dans les deux cas le texte est en italique.
Mais EM signifie aussi : texte important ! Donc à utiliser également pour le référencement du site.
I c'est simplement un effet de style.
Comme pour STRONG rien ne vous interdit de changer la mise en forme par défaut de la balise EM.

Les listes

Par défaut les items de liste (balise LI) apparaissent précédés d'une puce (un rond plein) si ils sont compris dans UL et d'un numéro arabe s'ils sont compris dans OL (Ordonned List)

Les tableaux

Les tableaux sont alignés à gauche sans bordurage ; largeur adapté au contenu.
Notez bien la hiérarchie des conteneurs : TABLE contient des TR (Table Row) ; chaque TR contient des TH (Table Head) ou des TD (Table Data).

Différence entre TH et TD : ces deux conteneurs délimitent la cellule d'un tableau. Mais la mise en forme par défaut est différente : graisse et centrage horizontal pour TH, alignement gauche pour TD.
En effet la balise double TH est réservée aux en-tête de colonne.

Les images

IMG est une balise "inline" d'où les deux images de front.
L'attribut alt est utile : si l'image n'apparait pas (chemin relatif : faux) c'est le texte alternatif qui apparait.
ALT est aussi utile pour le référencement du site au travers de ces images.

N'oubliez pas de préciser une hauteur ou une largeur pour les images sinon elles sont affichées avec leur taille d'origine.
Si vous précisez une largeur le navigateur va calculer la hauteur pour respecter les proportions et vice-versa.

Les liens

Les balises A sont de type "inline".

Par défaut la légende d'un lien apparait en bleu et souligné !

Rajout d'une feuille de style

Le code de la partie BODY est inchangé.
Mais la page s'enrichit d'une feuille de style très complète.

La feuille de style

* {margin : 0; padding : 0; } body {font-family : 12px; width : 900px; margin : 20px auto 20px auto; } hr {display : none ; } h1, h2, h3 {text-align : center ; width : 80% ; margin : 10px auto 10px auto;background : gray; color : white;} h1 {font-size : 1.5em ; line-height : 50px ;} h2 {font-size : 1.2em ; line-height : 30px ;} li{margin-left : 20px ; } table {width : 50% ; margin : 5px auto 5px auto ; border : 2px solid black; } th,td {border : 1px solid red; } td {text-align : right ; paddding-right : 5px ;} img,a {display : block;} img {margin : 5px auto 5px auto;} a {text-decoration : none; } a:hover {font-size : 1.5em ; color : red; } div {background :pink ; margin : 10px; padding : 10px; }

Dans le cadre d'un site de N pages cette feuille de style ne serait pas interne mais externe !

Tests

Le rendu avec le navigateur

Commentaires

Le HTML c'est la sémantique et le CSS c'est le style.
Donc en principe il ne faudrait pas utiliser les balises b,i,u,s,sub,sup car elles ne précisent qu'une mise en forme.
Il faudrait utiliser la balise générique span associée à une classe.

La première règle de la feuille de style est fondamentale car elle supprime toutes les marges externes et internes par défaut dont vous ignorez les valeurs ...

Le texte aura une taille de 12 pixels ; la page aura une largeur de 900 pixels et sera centrée dans l'écran.

Attention en CSS il faut toujours préciser l'unité de mesure alors qu'en HTML par défaut il s'agit de pixels.

Les traits horizontaux (balise HR) sont masqués. Donc pas besoin de toucher au code HTML ...

Ne confondez pas le centrage du texte dans sa boite (text-align : center) et le centrage horizontal d'une boite dans son conteur (avec la propriété margin) dès que cette boite est moins large que son conteneur (width précisé et < à 100%)
Quant au centrage vertical, le texte est toujours centré verticalement dans sa ligne.
Toujours pour les titres la taille des caractères est augmentée par rapport à celle définie dans BODY. Pour exprimer de façon relative une taille de caractères on peut utiliser aussi %.

Par défaut les puces et numéros des items sont externes et peuvent se retrouver dans la marge gauche ce qui est très laid. Donc prévoyez une marge externe gauche ou encore réglez à "inside" (list-style : inside)

Les tableaux sont centrés horizontalement, une largeur de 50% et bordurés.
Les cellules de tableau sont aussi bordurées. Dans les cellules de type "data" le texte aligné à droite mais sans coller à la bordure droite grâce à une marge interne.

Les images et les liens sont transformés en boites !
Ainsi les images peuvent être centrées horizontalement dans leur parent.

Les liens perdent le trait de soulignement par défaut.
Si survol d'un lien sa taille augmente de 50% et le texte devient rouge.
Retour menu