Introduction au HTML

Langage de balisage HTML

HTML (Hyper Text Markup Language) est un langage de balisage hypertexte, qui est utilisé pour créer les pages web. Il est composé des éléments sémantiques et structurels, qui définissent comment des parties du document (les titres, les paragraphes, les listes, les images etc.) doivent être présentées dans le navigateur.

Les versions de HTML

Le langage HTML a été développé par le scientifique britannique Tim Berners-Lee en 1991. Plus tard, des versions améliorées de HTML ont commencé à apparaître.

Version	Année
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

Les conceptions principales en HTML

Les éléments, les attributs et les tags sont les conceptions principales en HTML.

L'unité structurelle de base d'une page Web est un élément HTML, pour la définition de lequel on utilise les tags HTML.

Les tags HTML

Les tags HTML sont utilisés pour définir les structures du contenu sur la page Web. À l'aide de tags, nous marquons le contenu et faisons comprendre au navigateur comment afficher quelque partie du contenu (par exemple, texte, image, lien hypertexte, etc.). Les tags ne sont pas affichés dans le navigateur.

Les tags HTML sont placés entre crochets angulaires < >, par exemple <html>.

La plupart des tags HTML sont appariés (par exemple, <p> </p>), c’est-à-dire, il sont composés des deux parties – le tag d’ouverture (< p>) et le tag de fermeture (< /p>) .

Les tags seuls n’ont pas de tag de fermeture. Par exemple, le tag <img> est seul, qui est utilisé pour spécifier des images.

Considérons ce qui précède avec un exemple :

Si nous devons marquer un paragraphe dans le document HTML (qui est un élément du document HTML), nous utilisons le tag HTML <p>. Nous allons écrire le contenu du paragraphe entre les tags d'ouverture (<p>) et de fermeture (</p>).

Ça va ressembler à ça :

<p>Un paragraphe entre les deux tags – tag d’ouverture et tag de fermeture.</p>

Pour donner des informations supplémentaires sur l’élément, on utilise <les attributs HTML>. Par exemple, si on marque l’image avec le tag < img/>, alors à l’aide des attributs on peut informer au navigateur sur l’adresse de l’image (src), son hauteur (height), sa largeur (width) etc.

La structure de la page HTML

L’élément <!DOCTYPE> indique que le document actuel appartient à un type spécifique de HTML. Comme nous l'avons déjà noté, il existe plusieurs versions de HTML, et pour que le navigateur ne soit pas confus et affiche le bon standard, il doit le spécifier.

Il existe plusieurs types de < !DOCTYPE>, pour chaque version du langage HTML existe le sien.

Ecrire un élément <!DOCTYPE html> dans différentes versions de HTML
HTML5	<!DOCTYPE html>
HTML 4.01	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd";>
XHTML 1.0	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Le début et la fin du document HTML sont indiqués par les tags <html> </html>

Le tag <head> contient d'autres éléments HTML, ainsi que des métadonnées destinées aux moteurs de recherche (méta-titre, description de méta, mots-clés, etc.). Le contenu de ce tag ne s'affiche pas sur la page Web, sauf pour le contenu du tag <title>, qui définit le titre de la fenêtre de la page Web.

Le titre de la page Web est écrit entre les tags d’ouverture <title> et de fermeture </title>.

L’élément <body> contient toute information sur la page Web (le texte, les images, les vidéos etc.). L’information est écrite entre le tag d’ouverture <body> et le tag de fermeture </body>.

Les tags de titre <h1-h6> sont utilisés pour indiquer les titres de différents niveaux.

Il y a 6 niveaux de titres en tout : le tag <h1> indique le titre le plus important de la page (ne pas confondre avec <title>, où se trouve le titre de la fenêtre de la page Web) et le tag <h6> le moins important.

Considérons ce qui précède avec un exemple :

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Titre de la page Web</title>
  </head>
  <body>
    <h1>L’en-tête le plus important de la page</h1>
    <p> Premier paragraphe </p>
    <h2> Deuxième en-tête par valeur  </h2>
  </body>
</html>

Essayez-vous-même!

Résultat

Pour commencer à écrire le code pour votre site Web, vous avez besoin d'un <éditeur HTML>. Parlons des éditeurs HTML dans le prochain chapitre.