2) Le html

Le html est un langage de description (et pas un langage de programmation), ce qui signifie qu’il décrit un contenu à un logiciel (le navigateur) chargé de l’afficher.

Précédent | 3/16 | Suivant

Une page web un simple fichier texte fait d’un contenu (les textes et images que vous voyez à l’écran, grosso modo) et d’un balisage qui l’entoure. Ce balisage a un but sémantique (il dit ce qu’est ce contenu, un titre, un paragraphe, une citation,...) et un but visuel : il permet au navigateur de l’afficher automatiquement de manière appropriée. Ceci était particulièrement important aux début du web : les pages étaient écrites par des scientifiques pour des scientifiques, et peu d’entre eux avaient envie de travailler le look des pages, mais ils étaient intéressé à pourvoir y structurer l’information pour une compréhension optimale de leurs textes par d’autres scientifiques.

La base est celle-ci :

<html>
   <head></head>
   <body>contenu visible de la page</body>
</html>

On a ici la structure minimale : le fichier commence par dire "ici commence du html" et se termine par "ici s’arrête le html". On fabrique une balise juste en enserrant un mot entre "<" et ">". En html, le mot doit figurer dans la syntaxe html. "head", par exemple, signifie que l’on va décrire se qui se trouve dans l’entête de la page, qui est une partie cachée au visiteur mais qui contiendra des informations utiles pour le navigateur. "body", quant à lui, contiendra ce qui va être affiché au visiteur, ici un simple texte.

Certaines balises, cependant, sont uniques : <br /> ou <img src="monimage.gif" /> par exemple, ne sont pas codées en deux éléments mais s’ouvrent et se ferment tout de suite, comme le montre le "/>" qui les ferme.

Tout ce qui s’ouvre se ferme

Les balises s’ouvrent puis se ferment, il est important de ne pas l’oublier sans quoi vous risquez d’avoir des comportement bizarre : en cas d’erreur, le navigateur va tenter de corriger, et chaque navigateur à son idée de comment corriger.
Il ne faut pas, bien sûr, oublier de fermer une balise, comme ceci :

<h1>mon titre
<p>voici une paragraphe
<h2>et un intertitre
<p>puis un second paragraphe

Le plus souvent, le navigateur va comprendre qu’il s’agit d’une erreur de code et la corriger. Mais comme chaque navigateur a sa propre interprétation des erreurs, cela donnera un résultat différent à chaque fois.

Il faut aussi veiller à fermer les balises dans le bon ordre. Pas comme ça :

<h1>mon titre
<p>mon paragraphe</h1></p>

mais comme ceci :

<h1>mon titre</h1>
<p>mon paragraphe</p>

Pour aller un peu plus loin, nous allons créer d’autre balises dans ce fichier html basique :

<html>
   <head>
   <title>Titre en haut de la page</title>
   </head>
   <body>
   <h1>ceci est un titre</h1>
   <p>Ceci est un paragraphe</p>
   </body>
</html>

Ce code plus complet comporte des balises dans des balises. Dans une page complète, on peut avoir beaucoup de niveaux d’imbrication de code. La page est alors comme un arbre, comportant des éléments se subdivisant en parties plus petites de nombreuses fois.

On parle aussi d’une structure avec parents et enfants, et même des ancêtres.

Commenter son code

A ce stade, on peut introduire une balise un peu spéciale : la balise de commentaire.

<html>
   <!-- commencement du head -->
   <head>
   <title>Titre en haut de la page</title>
   </head>
   <!-- fin du head, debut du body -->
   <body>
   <h1>ceci est un titre</h1>
   <p>Ceci est un paragraphe</p>
   <!-- fin du body -->
   </body>
</html>

Cette balise est ignorée par le navigateur lors de l’affichage, on peut donc y mettre ce qu’on veut généralement des informations que l’on s’adresse à soi-même dans le futur, lorsqu’on aura oublié l’une ou l’autre subtilité de la construction de page. Commentez votre code, c’est un conseil... Les éditeurs de code donnent une couleur spécifique pour les commentaires, ce qui permet de les reconnaitre rapidement à la lecture du code.

Eléments "blocs" et "en ligne"

Il faut maintenant introduire une distinction entre les deux grands types d’éléments d’une page web : les éléments en ligne et les éléments de type bloc. Tous les tags contenus dans le body appartiennent à un de ces deux groupes. Ils seront particulièrement importants au moment d’aborder l’habillage css.

Les caractéristiques des éléments de type block

Commence toujours sur une nouvelle ligne.
- Les attributs height, line-height, top et bottom, margins peuvent être modifiés
- La largeur est par défaut fixée à 100% de leur élément conteneur, si une autre largeur n’est pas spécifiée.

Les caractéristiques des éléments Inline

Commence sur la même ligne que l’élément précédent.
- Height, line-height, top et bottom, margins ne pourront être changées
- La longueur est déterminée par le contenu et ne peut être modifiée.
- l’élément remplit la largeur de gauche à droite (en langue européenne) jusqu’à rencontrer la largeur maximale de son parent, ensuite va à la ligne.

Type "block"Type "inline"
Exemples de tagh1, ul, li, p, div, article, sectiona, img, em, b, strong, em, i, input
Largeur100% de son parentDépendante de sa largeur.
EmpilementSe positionne sous l’élément précédentSe positionne à côté des éléments inline précédent, dans le sens de lecture, comme un caractère dans un texte.
PositionnementPeut être positionnéNe peut pas être positionné
ModificationsMargin et padding peuvent être modifiéseul le padding peut être modifié

Hierarchie des éléments inline et bloc

Il est important de retenir que
- on peut imbriquer des éléments de type bloc dans des éléments de type bloc.

<div>
<h1>titre</h1>
<div><p>mon paragraphe</p></div>
</div>


Attention cependant, la balise p (paragraphe) supporte mal de recevoir d’autres balises bloc. Elle est destinée à recevoir du texte (et des balises inline comme a, em et strong) et pas des div. Cela produit parfois des erreurs d’affichages.
- On peut imbriquer des éléments de types "inline" :

<span><a href="monlien.html">Ce <em>lien</em> est <strong>terrible</strong></a></span>

Donne ceci :
Ce lien est terrible

Par contre, on ne place pas des balises de type bloc à l’intérieur de balises "inline" :

<a href="monlien.html"><h3>un super lien</h3></a>

est incorrect... la balise a doit dans ce cas être placée à l’extérieur :

<h3><a href="monlien.html">Un super lien</a></h3>

Voilà qui est correct.