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.

Html, un format brut

Une page web un simple fichier texte, proche du format .txt pour le texte. Contrairement à d’autres fichiers comme le format .doc ou le format .rtf, qui sont d’autres formats de texte plus complexe, il y a très peu d’informations d’en-tête ou de formatage invisibles à l’utilisateur. A part quelques informations sur l’encodage, la date de création par exemple, tout le reste sera affiché si on ouvre le fichier avec un simple éditeur. Contrairement à d’autres format comme le .pdf de Adobe, il ne contient que des données de type "texte", et ne contient pas d’images matricielles ou de polices de caractère.
Enfin, le html est une norme ouverte, ce qui signifie que la création d’un fichier html ne demande pas un logiciel payant ou un accord de licence.

Le html et le balisage sémantique

Le html est un langage de description. Il entoure un contenu textuel et des liens vers des images ou d’autres pages, qu’il décrit sémantiquement.

La sémantique est une branche de la linguistique qui étudie les signifiés, ce dont on parle, ce que l’on veut énoncer. (Wikipedia)

en tant qu’humains, nous identifions la plupart du temps le sens d’un texte : sur un affiche, nous pouvons identifier le titre d’un spectacle, ses acteurs, le lieu de sa présentation, le prix d’entrée, etc. Les navigateurs web ne peuvent faire ce travail : il lisent les textes comme un ensemble continu de caractères. Pour pouvoir traiter et afficher les documents, les scientifiques qui ont travaillé à son développement ont inventé le principe de balisage. Par exemple, ce texte :

Comprendre le balisage Aidez votre navigateur en associant des balises à votre texte brut.

Est une succession de lettres que nous pouvons identifier mais qu’un navigateur ne peux pas hiérarchiser.
Le code html décrit pour les machines la hiérarchie du texte, et accompagne sa signification.

<h1>Comprendre le balisage</h1>
<p>
Aidez votre navigateur en associant des balises à votre texte brut.
</p>

En plaçant le texte entre une balise ouvrante <h1> et une balise fermante </h1> on signifie pour le logiciel -navigateur, lecteur braille, analyseur de texte- que le rôle de cette portion de texte est d’être le titre principal du document. de la même manière, p entoure un paragraphe, c’est à dire une portion cohérence de texte. Ce balisage permet un meilleur traitement automatique par les machine (un lecteur sonore fera une courte pause dans la lecture entre deux paragraphe, par exemple, ou le navigateur créera une séparation visuelle ).

Ce balisage a donc aussi 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.