Introduction au langage HTML

HyperText Markup Language (HTML) est un langage de balisage qui définit la structure logique d'un document diffusé sur le Web. Le HTML découle de la norme SGML mais il s'agit d'une version extrêmement simplifiée de cette dernière.

Le HTML est conçu comme un langage de structuration logique d'un document. Il est utilisé comme langage de présentation et de mise en page. Il permet aussi de se déplacer facilement d'un document à un autre par le biais de liens hypertextes.

Dans les premières versions de HTML, le contenu était mélangé avec la mise en forme, le style. On ne pouvait pas changer facilement une mise en forme sans modifier la structuration du contenu. Puis sont apparus les Cascading Style Sheets (CSS), c'est à dire les feuilles de style. L'évolution du HTML tend à définir le design et le style (couleurs, polices de caractères, gras, italique, marges, etc...) dans des feuilles CSS alors que le HTML n'est utilisé que pour la structuration du document (titres, paragraphes, listes à puce, formulaires...).

La notion de balise

Les informations de structure sont matérialisées par des balises insérées au coeur du document. Chaque marqueur de balise est délimité par les signes < et >
<balise> ....... le contenu ...... </balise>

Le nombre de balises en html n'est pas extensible comme ça peut être le cas en XML.

L'imbrication des balises est possible mais leur chevauchement est interdit c'est-à-dire que l'on doit refermer une seconde balise ouverte avant de refermer la première.
Exemple :
Cette syntaxe est parfaitement correcte
<h1>titre principal</h1> <h2>sous-titre</h2> <b>contenu en gras <i>contenu en gras et en italique</i></b>
Alors que celle-ci est interdite
<h1>titre principal</h1> <h2>sous-titre</h2> <b>contenu en gras <i>contenu en gras et en italique</b> contenu en italique</i>
Vous remarquerez que dans la seconde syntaxe on referme la balise <b> alors que la balise <i> qui est imbriquée dans la balise <b> est toujours ouverte. Ca provoque un chevauchement.

Une syntaxe correcte serait la suivante :
<h1>titre principal</h1> <h2>sous-titre</h2> <b>contenu en gras <i>contenu en gras et en italique</i></b> <i>contenu en italique</i>
Cette fois on referme bien la balise <i> imbriquée avant de refermer la balise <b>. Ensuite, pour afficher le texte en italique seul, on doit ouvrir une seconde balise <i> mais cette dernière n'est plus imbriquée à l'intérieur d'une balise <b>.

Les balises html peuvent comporter des attributs

Un attribut sur une balise html permet de modifier son comportement.
Voici un exemple qui définit la couleur du texte (text), la couleur des liens non-visités (link) et celle des liens visités (vlink) pour le corps du document.
<BODY text="FFFFFF" link="FFFF00" vlink="FFAA00">

On peut également associer à une balise une classe et un style. La classe associe la balise à des règles de style définies dans une feuille de style indépendante. L'attribut style permet d'associer directement un style au sein même du document html.
Dans l'exemple qui suit on associe un style particulier pour aligner le texte à droite :
<h2 style="text-align:right">sous-titre qui sera aligné à droite</h2>

On pourrait faire la même chose en déclarant la classe "txtdroite" dans une feuille de style CSS et en associant la classe ainsi créée à notre balise html :
<h2 class="txtdroite">sous-titre qui sera aligné à droite</h2>

On peut bien entendu associer les trois types d'attributs à une balise.
<img class="frm-simple1" src="_media/img/small/DSC06418_carre_320_NB.jpg" style="max-width:100%;width:320px" alt="Texte alternatif pour décrire l'image">
Dans cet exemple nous appliquons une classe particulière à une image (frm-simple1) et nous définissons un style particulier. En plus, l'attribut "alt" est précisé.

Structure interne d'une page HTML

Tout document qui se veut conforme à la norme HTML doit se trouver encadré par les balises <html> et </html>

On trouve ensuite deux balises qui servent à déclarer l'entête (le “head”) et le corps du document (le “body”).

L'entête est utilisé pour y stocker des informations relatives au document lui-même. Le minimum requis est de donner un titre au document. On trouve ensuite ce qu'on appelle les balises meta. On les appelles comme ceci car ce sont des balises qui servent à donner de l'information sur l'information.

C'est également dans le HEAD que l'on va effectuer des appels à des scripts CSS ou des scripts javascript.

L'ensemble du document HTML proprement dit (sa partie visible dans le navigateur) est inclus dans ce qui s'appelle le corps du document (“body”).

Voici donc la structure minimum d'un document HTML qui ne contiendrait rien :
<html> <head> </head> <body> </body> </html>

Que dois-on mettre dans la partie HEAD d'un document HTML ?

Le TITLE est un balise qui sert à donner un titre au document. Elle est utilisée par le navigateur pour afficher le titre dans la barre supérieure de la fenêtre et elle sert également aux moteurs de recherche pour afficher ce titre dans la présentation des résultats d'une recherche. Elle est donc de loin la plus importante de toutes les balises et elle est très utilisée en référencement naturel.

<meta charset="utf-8"> est une balise qui sert à informer les robots et les navigateurs concernant le type d'encodage des caractères. Il existe différentes valeurs normalisées pour le charset. Les anglais utilisent la norme utf-8 alors que les européens utilisent la norme ISO avec des charsets ISO-8859-1 pour les caractères accentués latins et la norme ISO-8859-15 pour la prise en compte du symbole euro (€). Il est nécessaire de toujours préciser le type d'encodage pour éviter qu'il n'y ait confusion et que tous les caractères soient bien interprétés convenablements, en particulier les caractères accentués.

<meta name="ROBOTS" content="ALL"> est une balise indiquant aux robots les autorisations d'indexation. Les valeurs d'attributs les plus répendues sont les suivantes :
<meta name="ROBOTS" content="noindex, follow"> : ne permet pas l'indexation mais autorise à suivre les liens
<meta name="ROBOTS" content="index, follow"> : l'indexation est permise et les liens sont suivis, identique à "ALL"
<meta name="ROBOTS" content="noindex, nofollow"> : l'indexation est interdite et les liens ne doivent pas être suivis

<meta name="description" content="Description succinte du contenu du document">
C'est dans cette balise que l'on doit décrire en quelques lignes le contenu du document. Elle est utilisée par les moteurs de recherche pour afficher une description du lien dans les résultats de recherche. Elle doit donc être très soignée et ne doit pas correspondre à une liste de mots clés.

<link href="style.css" rel="stylesheet" type="text/css"> est un appel à un fichier de style CSS. Il peut y en avoir plusieurs.

<script type="text/javascript" src="_scripts/js/cookieleave4.js"></script> est un appel à un fichier contenant un script javascript.

<meta name="date-creation-ddmmyyyy" content="30092015"> est la date de création du document.

<meta name="date-revision-ddmmyyyy" content="30092015"> est la date de modification du document.

Il existe de nombreuses autres balises mais celles-ci sont les plus importantes et constituent presque un minimum.

Comment structurer le corps d'un document HTML ?

C'est surtout le corps du document html, le body, qui va nous intéresser plus particulièrement car il représente ce qui sera affiché sur la page du navigateur.

Balises titres de paragraphe

Pour structurer un document html on peut tout d'abord utiliser des titres. Il existe en tout 6 niveaux de titrage qui sont H1, H2, H3, H4, H5 et H6.
Un retour chariot automatique est inséré après chaque titre.

Syntaxe: <Hn></Hn> n étant compris entre 1 et 6.
H1 est le titre de plus haut niveau, le titre de l'article. H2 est un titre de paragraphe et H3 et suivants les titres de sous-paragraphes.
En toute logique, on ne devrait pas utiliser un niveau de titre si le niveau supérieur n'a pas été utilisé.
<H1>Titre de niveau 1</H1> <H3>Titre de niveau 3</H3> <H4>Titre de niveau 4</H4>

Paramètre:
ALIGN est un attribut qui sert à indiquer l'alignement d'un titre dans le sens horizontal.
Syntaxe: align="left" ou align="center" ou align="right"
<h1 align="center">Texte du titre centré dans son conteneur</h1>

Les paragraphes

Le marqueur de paragraphe <p> produit un double retour à la ligne.

Syntaxe: <p> ...contenu du paragraphe... </p>

Paramètre:
ALIGN sert à préciser comment sera l'alignement du paragraphe dans le sens horizontal.
Syntaxe: ALIGN="LEFT" ou ALIGN="CENTER" ou ALIGN="RIGHT"
<p align="right">Le chien s'amuse sur la balançoire</p>
<p align="center">Le chat mange une pomme</p>

La balise “blockquote” produit un décalage de paragraphe sur la droite. On peut lui appliquer un style particulier avec un fichier CSS, c'est ce qu'on fait en général.

Syntaxe: <blockquote> ...contenu du paragraphe à décaler... </blockquote>
<blockquote style="BORDER-LEFT: 5px solid; padding:8px; color:#cccccc">

Les avions volent dans le ciel

</blockquote>

La balise HTML "pre" est très utile si on désire afficher du texte avec un espacement de caractères non proportionnel. C'est-à-dire qu'un "m" ne prendra pas plus de place qu'un "i". C'est la police COURRIER que tout le monde connait bien.
Lorsqu'on insère toute une série d'espaces à la suite, ces derniers seront conservés à l'affichage alors que ce n'est pas le cas sans le marqueur "pre".

Syntaxe: <pre> ... </pre>
<pre>

ligne 1

         ligne 2 précédée d'espaces

</pre>

Les séparateurs

La balise <br> effectue un retour à la ligne simple. contrairement à la plupart des balises HTML, il n'est pas obligatoire de la refermer par </br>, c'est même une erreur en HTML 4.0. Le HTML 5 a trouvé la parade en remplaçant cette balise par une balise auto-fermée : <br />.

La balise <hr> insère une ligne séparatrice horizontale.

Voici les paramètres de <hr>:
SIZE
spécifie l'épaisseur de la barre horizontale en pixels. La valeur par défaut est 1.
Syntaxe: SIZE=n
<hr size=3>

WIDTH
spécifie la longueur de la ligne horizontale. Elle peut être exprimée en pixels ou en pourcentage de la largeur de la fenêtre.
Syntaxe: WIDTH=n
<hr width=200>
<hr width=60%>

ALIGN
spécifie l'alignement de la barre
Syntaxe: ALIGN="LEFT", "RIGHT" ou encore "CENTER"
<hr aligh="CENTER">

Balise DIV

Cette balise permet de regrouper des éléments afin de leur associer une mise en forme particulière, souvent déclarée en tant que classe dans une feuille de style CSS.

Il s'agit d'une balise très importante pour la structuration du document à l'écran car les balises DIV s'articulent les unes par rapport aux autres. Si deux blocs de texte sont mis dans des balises DIV de largeur définie ils vont être affichés côte à côte à l'écran, si la largeur de l'écran le permet. Sinon ils seront affichés l'un en dessous de l'autre.

C'est grâce à cette balise DIV que l'on peut construire des sites responsive design.

Mises en forme du contenu ?

Voici quelques-uns des marqueurs de mise en forme de mots les plus utilisés en HTML.

<B>Gras</B> <I>Italique</I> <U>Souligné</U> <S>Barré</S> <SUP>Exposant</SUP> <SUB>Indice</SUB> <EM>Emphasé, mise en évidence</EM> <STRONG>Mise en évidence prononcée</STRONG> <CODE>Code</CODE> <CITE>Citation</CITE> 
Voici leur représentation à l'affichage, avant d'utiliser des styles particuliers.

Gras Italique Souligné ~~Barré~~ ^Exposant _Indice Emphasé, mise en évidence Mise en évidence prononcée Code Citation

Notez que certaines de ces balises sont dépréciées et qu'il est recommandé d'utiliser l'équivalent en CSS. Mais la plupart des navigateurs les plus utilisés continuent de les utiliser. C'est quand même beaucoup plus simple d'écrire un texte souligné en utilisant la balise <u>....</u> que d'avoir à coder <span style="text-decoration:underline">....</span>.

Je viens d'utiliser la balise <span> que nous n'avions pas encore vue. Qu'est-ce que c'est ?
Il faut s'avoir qu'en HTML il existe deux types de balises : les balises de type block et les balises de type inline. Les balises de type block provoquent un retour à la ligne avant et après la balise et occupent toute la largeur disponible. A l'inverse, les balises inline affichent le contenu à la suite.

La balise SPAN est l'équivalent de la balise DIV, mais la balise span est de type inline alors que la balise div est de type block. C'est donc avec la balise span que l'on peut appliquer des styles sur une partie du texte sans affecter sa disposition à l'écran.

Notez aussi que même si les balises <b> et <strong> apparaissent de la même façon à l'écran : en gras, elles n'ont pas la même signification. La balise <b> sert à mettre en gras, c'est une balise de mise en forme visuelle. La balise <strong> sert à appuyer sur un mot pour bien le mettre en évidence. C'est une balise sémantique. On peut d'ailleurs affecter une mise en forme différente aux balises <b> et <strong> en utilisant le CSS.

Les liens hypertextes

Les liens permettent de reliers les documents entre-eux. Ils peuvent être de différents types :

externes : le document cible est un autre document qui se trouve quelque part sur le web
internes : un pointeur renvoie à une section du même document
externes avec ancre : un pointeur renvoie à un signet d'un autre document du réseau

La balise <a>

Un lien se définit par le marqueur <a ...> suivi du paramètre HREF=”URL” qui définit l'adresse du document cible vers lequel le lien pointe. Il se termine par </a>.

Le texte (qu'on appelle texte d'ancrage ou tout simplement "ancre") ou l'image qui sont insérés entre les marqueurs de début et de fin de la balise <a> sont les parties cliquables du lien et déclencheront le chargement du document dans le navigateur lorsqu'on clique dessus. Le document cible peut être chargé à la place du document source ou peut être ouvert dans une nouvelle fenêtre en fonction d'un autre paramètre "target".

Syntaxe: <A HREF="http://www.indg.fr/WEB/XML.html">lien vers le document traitant du XML</A>
<A HREF="/">Retour à l'accueil</A>
<A HREF="../MOE/cobol.html" target="_blank"> Remonter d'un niveau puis ouvrir le document cobol.html dans une nouvelle fenêtre</A>

Dans ces trois exemples, le premier lien est absolu car il indique l'url complète de la page. Le second lien est relatif en partant de l'accueil. Le "/" indique qu'il s'agit de la racine du nom de domaine, quel que soit le nom de domaine sur lequel est hébergé le site. Le dernier lien est relatif par rapport au document en cours.

Les liens internes

Pour définir un lien interne il faut tout d'abord poser un signet dans le document.
Syntaxe: <A NAME="nom_du_signet"></A>

Ensuite il est possible d'effectuer un lien vers ce signet en utilisant la notation #
Syntaxe: <A HREF=”#nom_du_signet”>Voici un lien vers le signet : nom_du_signet</A>

Mixte de liens externes avec signet

On peut tout à fait combiner les deux et coder des liens externes qui utilisent des signets pour se positionner à un endroit précis de la page de destination.
Syntaxe: <A HREF=”page2.html#signetA”>Voici un lien vers la page page2.html en position signetA</A>

Les images

Pour afficher des images à l'intérieur d'une page HTML, on utilise la balise “img”.

Syntaxe: <img src=”URL” align=”alignement” alt=”description” width="n" height="n">

Paramètres:
Le paramètre “src” est obligatoire et contient l'URL de l'image au format .gif ou .jpg ou .png
Le paramètre “align” permet de spécifier l'alignement de l'image par rapport au texte. Les valeurs possibles sont : top, bottom, middle, right, left
Syntaxe: ALIGN = "TOP" ou "BOTTOM" ou "MIDDLE" ou "RIGHT" ou "LEFT"
<img src=”vache.jpg” align="LEFT">
Le paramètre “alt” contient la description alternative de l'image pour les navigateurs n'affichant pas les images et pour les moteurs de recherche.
Les paramètres “width” et “height” se réfèrent à la largeur et à la hauteur de l'image (en pixels). Utiliser cette procédure est préférable car ça permet de réserver la place de l'image sans attendre qu'elle soit chargée complètement. Le texte peut donc s'afficher alors que l'image est toujours en cours de chargement.
Syntaxe: WIDTH="n" HEIGHT="m" où n et m sont un nombre de pixels
<img src=”chien.jpg” width="300" height="200">

Il existe d'autres paramètres qui sont aujourd'hui dépréciés car gérés en CSS, donc je n'en parle pas.

Les tableaux

Les tableaux sont très utiles pour présenter des données à l'écran d'une façon alignée en lignes et en colonnes. La balise pour commencer un tableau est <table>.

Pour chaque ligne du tableau on utilisera ensuite la balise <tr>.

Vient ensuite la cellule qui est encadrée par le marqueur <td>.

Il est possible de spécifier la largeur des cellules et la hauteur des lignes ainsi que la taille des bordures.

Le HTML permet également de fusionner des cellules entre-elles en utilisant les paramètres colspan et rowspan.

Le paramètre ROWSPAN

Rowspan détermine le nombre de lignes qu'une cellule occupe et s'introduit à l'intérieur de la balise <td....
On peut ainsi fusionner des cellules verticalement.
Lorsque vous définissez les cellules de la ligne suivante (dans le prochain marqueur <tr>) il ne sera pas nécessaire de redéfinir la cellule fusionnée.
Syntaxe: ROWSPAN="n" où n est un nombre de lignes
<TD ROWSPAN=2> (pour une cellule qui occupe deux lignes)

Le paramètre COLSPAN

Colspan permet de fusionner une cellule sur plusieurs colonnes. Le résultat est l'étirement de la cellule en largeur.
Syntaxe: COLSPAN="m" où m est un nombre de cellules
<TD COLSPAN=2>

Les autres balises

Ces quelques balises HTML que je viens de vous présenter ne sont pas les seules. Il est possible en html de formater des listes à puce ou encore de découper un document en plusieurs "frames", d'insérer une "iframe", de gérer des formulaires, de réduire ou d'augmenter d'un point la taille des caractères.

Pour connaitre l'ensemble des balises html je vous invite à consulter ce site qui vous en donne la liste : http://www.codeshttp.com/baliseh.htm

Ces articles pourraient vous intéresser

Revenir au sommaire de la section Internet

Sommaire

... Cette page est listée dans le Glossaire Informatique Plus...