Mini-cours de HTML

Partie I

Le principe du HTML

La chose la plus importante à retenir est qu'il faut délimiter des zones dans le texte.

Pour créer un paragraphe, il faut délimiter une "zone "paragraphe".
Pour créer un lien, il faut délimiter une "zone cliquable".
Etc ...

Ces zones ont un début et une fin. Elles sont donc délimitées par deux balises.
Très logiquement, la balise de début est toujours suivie (plus ou moins loin) par une balise de fin.

Une balise est un (seul) "mot" entouré par les caractères "<" et ">".
Exemples de ce principe : <lien>, <titre>, <mot>, <balise>, ...

Il existe deux balises - une au début de la zone et l'autre à la fin - celle de fin a le même nom précédé du caractère "/" pour la distinguer de celle de début.
Exemples de ce principe : </lien>, </titre>, </mot>, </balise>, ...

En HTML 5, vous ne pouvez pas inventer des noms de balises. Chaque zone a un rôle : Afficher un paragraphe, afficher un lien (dans un paragraphe), ...
Et chaque balise a un nom en fonction de la zone qu'elle délimite. Il existe 110 balises.

Liste des balises

Puisque ce cours est "mini", votre étude se limitera à 29 balises (soit environ le quart du nombre de balises en HTML 5). La présentation de ce mini-cours n'utilise d'ailleurs que 29 balises.

Les langages évoluent avec le temps. Aujourd'hui, la version utilisée du HTML est la cinquième. Cependant, les bases que vous apprenez maintenant n'ont pas changé et ne changeront pas.

Voici le premier couple de balises : 

<html></html>

On constate ici que la zone (actuellement vide) commence par <html> et se termine par </html>.
La balise </html> se situe toujours à la fin d'un fichier HTML.

<html> et </html> forment un couple de balises.

Évidemment, il n'existe pas qu'une seule zone dans une page web et une zone contient souvent d'autres zones. Donc, il existe plusieurs couples de balises et un couple de balises peut contenir d'autres couples de balises.

Contrairement à un fichier TXT, dans un fichier HTML, l'information est structurée, répartie dans différentes zones. 

<html><head></head><body></body></html>

Ci-dessus, la zone html n'est plus vide puisqu'elle contient deux zones : head et body.
Actuellement, ces deux zones sont vides.

Voilà, vous connaissez déjà le principe du HTML.

Une page vide

Seules 5 balises sont obligatoires : html, head, meta, title, body

html sert à dire : "Ici commence la zone écrite en HTML"
head sert à dire : "Ici commence la "tête" (instructions pour le navigateur)"
meta sert à dire : "Ici commence une "meta" ..."
title sert à dire : "Ici commence le titre de la page"
body sert à dire : "Ici commence le "corps" (ce qui s'affiche à l'écran)"

Le code - l'ensemble des balises - est écrit dans un fichier texte dont l'extension est htm (ou html).

Un navigateur web est un programme qui lit le contenu du fichier HTML et, sur base des instructions (les balises), construit une page web.

Structure d'un fichier HTML 

<!DOCTYPE html>

<html lang="fr-BE" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-BE">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Titre de la page</title>
      <!-- À Â Ç É È Ê Ë Î Ï Ô Ù Û Ü Ÿ Æ Œ æ œ -->
      <!-- ¼ ½ ¾ α β γ Δδ μ π Σ φ Ωω -->
      <!--h1 ============================-->
      <!--h2 ++++++++++++++++++++++++++++-->
      <!--h3 -.-.-.-.-.-.-.-.-.-.-.-.-.-.-->
      <!--h4 ............................-->
      <!--h5 . . . . . . . . . . . . . . -->
   </head>
   <body>
     <main>
       <h1>Titre 1</h1>













     </main>
   </body>
</html>

NB : Les espaces ou lignes vides entre les balises sont facultatives. Mais, ils rendent le code plus lisible.

La première ligne est spéciale et sert à dire que c'est du HTML 5. Elle dit au navigateur ce "type de document = html". (Ce n'est pas une balise).

Cette ligne n'existait pas dans les 4 premières versions du HTML.
En l'ajoutant, le navigateur sait alors que le texte en dessous devrait être écrit en HTML 5.

Évolution des versions du HTML

En décembre 1992, le HTML est né.
Le jeudi 3 décembre 1992 à 09:37:20 GMT a été publiée le première page web.

En décembre 1997, la version 4 est née.

La période entre 2000 et 2014 est trouble. Fin 1999, abandon du HTML 4 au profit du XHTML (car plus strict). Mais, dès 2004, certains prônent le retour au HTML. En 2007, la W3C reprend les travaux pour une nouvelle version du HTML. En 2009, le XHTML 2 est abandonné.

En octobre 2014, la version 5, celle étudiée ici, est née.

Un fichier XHTML est plus facilement analysable par un programme (notamment un navigateur). Pour qu'un fichier HTML5 soit considéré comme un fichier XHTML5, quelques règles supplémentaires doivent être respectées :

  • Le fichier doit être codé en UTF-8.
  • La balise html doit contenir : xmlns="http://www.w3.org/1999/xhtml"
  • Tout attribut dispose d'une valeur (même vide, tel que alt="").
  • ...
  • + Une vive recommandation : Tous les noms de balises et d'attributs sont en minuscules.

Si votre fichier est facilement analysable, votre probabilité d'être bien référencé par un moteur de recherche augmente. Il est donc recommandé de coder en XHTML5.

Les versions 5.1 et 5.2 ajoutent deux nouvelles balises (<picture> et <dialog>) et des nouveaux attributs qui ne seront pas abordés dans ce min-cours.

<html> est la première balise. On retrouve la balise </html> qui ferme la zone tout à la fin du fichier. On n'écrit plus rien après cette balise.

Ce couple de balises semble inutile lorsqu'on commence par la ligne spéciale, mais il faut malgré tout commencer par ce couple de balises (qui est plus important que la ligne spéciale). Le navigateur fait des vérifications pour savoir si le fichier est valide (bon). Avant même de l'ouvrir, comme tout programme, il regarde l'extension du fichier (.htm ou .html). Puis, il regarde son contenu.

Les premières instructions sont destinées au navigateur.

Si la première chose qu'il trouve est :
<html>
il sait que la suite devrait être du HTML

S'il trouve :
<!DOCTYPE html>
<html>
il sait que la suite devrait être du HTML 5

S'il trouve :
<!DOCTYPE html>
<html lang="fr-BE" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-BE">
il sait que la suite devrait être du XHTML 5

Si la page est placée sur internet, il est recommandé que la seconde ligne soit :
<html lang="fr-BE" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-BE">

Dans la zone html, il n'existe que 2 zones : head et body. Il ne peut qu'exister qu'une seule zone head, une seule zone body. De plus, la zone head doit précéder la zone body.

La zone head est celle qui contient les instructions pour le navigateur.

Souvent, la première instruction est : 

      <meta charset="UTF-8" />

...  car elle devrait apparaître parmi les 512 premiers octets.

La valeur de charset ne devrait pas contenir que de minuscules.

Si le jeu de caractères n'est pas défini, le navigateur choisira, en Europe Occidental, le jeu ISO-8859-1

L'encodage indiqué doit être celui utilisé dans l'éditeur. Et, l'encodage de cet éditeur doit être réglé avant de commencer à taper le texte.

Plus d'info

Souvent, la seconde instruction est : 

      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Cette balise permet d'adapter l'affichage aux petits écrans (smartphone).
Plus d'info

Elle doit être située entre les balises meta charset="UTF-8" et title.

La balise title est obligatoire. Son contenu (ci-dessus, "Titre de la page") s'affiche dans un onglet de la barre des onglets du navigateur et dans les résultats d'un moteur de recherche. Le titre ne devrait pas dépasser 55 caractères.

Avant la balise de fermeture du head, les commentaires suivants permettent de faire des copier/coller lorsqu'on travaille le code HTML. 

      <!-- À Â Ç É È Ê Ë Î Ï Ô Ù Û Ü Ÿ Æ Œ æ œ -->
      <!-- ¼ ½ ¾ α β γ Δδ μ π Σ φ Ωω -->
      <!--h1 ============================-->
      <!--h2 ++++++++++++++++++++++++++++-->
      <!--h3 -.-.-.-.-.-.-.-.-.-.-.-.-.-.-->
      <!--h4 ............................-->
      <!--h5 . . . . . . . . . . . . . . -->

Les deux premiers commentaires concernent des caractères qui ne peuvent pas être écrits via une seule frappe au clavier. Les 5 autres commentaires peuvent être collés après chaque balise de fermeture des balises h1 à h5, pour améliorer la lisibilité du code.

Après la zone head, débute immédiatement la zone body

La zone body est celle qui contient les instructions concernant ce qui doit être affiché dans la fenêtre du navigateur.

La fenêtre du navigateur ne doit pas être confondue avec l'écran de l'ordinateur. La fenêtre du navigateur est située sous son menu. Il suffit de réduire la taille du navigateur pour s'en rendre compte.

L'absence d'une zone main et d'un titre h1 lancera un avertissement (en cas d'analyse du code HTML par un programme spécialisé, tel qu'un HTML Validator).

Dans la zone head, il existe une balise particulière : <meta>
Elle sert à définir l'encodage des caractères (!). On en reparlera plus tard.

Dans la zone head, la balise <title> délimite la zone où on indique le titre de la page.

Les balises <meta> et <title> ne peuvent pas être placées dans la zone body. Rappel, ces deux balises servent à donner des instructions au navigateur web; et, toutes les instructions "générales" doivent se trouver dans la zone head.

En cliquant ici, on voit la page construite par un navigateur sur base des instructions contenues dans le fichier "vide.htm". La fenêtre du navigateur est vide ! C'est normal car il n'existe rien dans la zone body. Mais en regardant attentivement le navigateur (au dessus de son menu), on peut lire le titre de la page : "Page vide !"

N.B. : Le nom du fichier HTML s'affiche à la fin de l'adresse affichée dans la barre d'adresse du navigateur.

Dans la page vide, faites un clic droit et cliquer sur "Afficher la source". Vous verrez que le code que ressemble à celui de l'encadré blanc ci-dessus, excepté qu'entre les balises title se trouve le texte : "Page vide !"

Les navigateurs ne sont pas les seuls programmes à lire un fichier HTML. Google et les autres moteurs de recherche utilisent des "robots" (des programmes) qui lisent le début des fichiers HTML situés sur internet pour trouver des informations.

Si le code est mal écrit, le navigateur risque de mal afficher la page. Mais surtout, si la page est sur internet et indexable, Google lui attribuera un mauvais classement ...

L'attribut et sa valeur

Une balise peut contenir un ou plusieurs attributs.

Certains attributs, appelés "attributs globaux", sont valides pour toute balise. Tel que l'attribut : id.
Les autres attributs (non-globaux) ne sont valides que pour une (ou plusieurs) balises. Tel que l'attribut : charset, uniquement valide pour la balise meta.

Un attribut peut être lié à une valeur en HTML,
Un attribut doit être lié à une valeur en XHTML (recommandé). Même si cette valeur est vide : ""

La valeur est encadré de guillemets (recommandés) ou d'apostrophes.
Entre le nom de l'attribut et sa valeur se trouve le signe =.
Le couple attribut="valeur" est précédé d'un espace.

Exemple : 

      <meta charset="UTF-8" />

Ci-dessus, la balise "meta" contient un attribut ("charset"), en rouge, et une valeur ("UTF-8").

Les navigateurs sont "permissifs". Ils autorisent qu'une valeur d'attribut ne soit pas encadrée de guillemets ou d'apostrophes (si la valeur ne contient pas d'espace). Cette permissivité est exploitée par certains minifiers pour compresser le code HTML au maximum et ainsi réduire le poids du fichier HTML et donc protéger les autoroutes de l'information. Exemple : cette page identique à la présente pèse 26 % de moins !
L'inconvénient est que le code-source devient quasi illisible (pour un humain) et que certains logiciels moins permissifs (tel que des parseurs) ne pourront pas analyser correctement le fichier HTML.

Même si, pour le moment, le but n'est pas de publier des pages sur internet, mieux vaut prendre les bonnes habitudes dès maintenant.

Évitons de créer des fichiers avec des différentes extensions. Optons pour l'extension .htm (cela nous facilitera la tâche lors de la création des liens)

Code d'une page vide

Vous connaissez déjà 5 balises : html, head, meta, title, body

Les 28 balises différentes, utilisées sur cette page, sont : ['html', 'head', 'meta', 'link', 'title', 'body', 'div', 'header', 'p', 'a', 'article', 'h1', 'mark', 'br', 'strong', 'pre', 'em', 'h2', 'details', 'summary', 'span', 'u', 'ul', 'li', 'code', 'aside', 'footer', 'script']