Formation I.S.N.

Html - Brève description

Avant de concevoir un site internet dans son ensemble, il faut apprendre à rédiger/composer une page au format .html.
Un fichier .html est un simple fichier texte, un bloc-note suffit donc pour écrire un tel fichier. Toutefois, utiliser un éditeur de texte avec coloration syntaxique permet de travailler plus confortablement.

Le suffixe du fichier devra être .html, le fichier sera donc nommé sous la forme exemple.html pour être interprété par le navigateur. Attention aux piètres OS (windows notamment) qui, par défaut, cachent les extensions des fichiers empêchant ainsi partiellement l'utilisateur de comprendre ce qu'il manipule. Pour être certain de manipuler un fichier .html et non un fichier .txt par exemple, vous aurez intérêt à modifier les réglages par défaut de façon à afficher les extensions des fichiers.

Le navigateur n'affichera jamais de message d'erreur même si le fichier .html comporte des erreurs de syntaxe. Dans ce cas l'affichage obtenu risque d'être différent de celui attendu.

Pour vérifier que son fichier est conforme, il est donc indispensable de le valider sur le site du W3C. On peut alors arborer fièrement en bas de sa page web le logo : .

Rédiger un fichier au format Html

On rappelle que ce site permet de tester des «petits» bouts de code. Pour construire une page web complète, il faudra créer un fichier .html à l'aide d'un éditeur de texte.

Un fichier .html a une structure d'éléments emboîtés appelés balises.

  • Ces balises ont des noms différents selon les informations qu'elles définissent/délimitent.
  • Une balise nommée <balise> marque le début d'une information. Cette partie doit être fermée avec </balise> (les noms des balises existantes sont définis par le langage, vous ne pouvez décider par vous même d'un nouveau nom de balise).
  • Les balises s'imbriquent dans l'ordre, comme les parenthèses (ou les crochets) en mathématiques :
  • Certaines balises comportent des attributs qui permettent de préciser davantage le contenu des balises. La valeur de chaque attribut est à indiquer entre guillemets :

Fichier .html minimal

Un fichier .html conforme est composé comme ci-dessous. Les indentations ainsi que les commentaires ne sont pas obligatoires (ils ne sont pas interprétés par le navigateur), mais ils permettent de mieux se repérer dans le fichier source.
Par exemple :

Le fichier écrit ci-dessus donnera l'affichage :

On peut constater que trois types de balises se détachent :

  • celles qui définissent des blocs comme <html>, <head>, <body> et <p> ;
  • les balises en-ligne comme <strong>, qui s'appliquent à une phrase ou à une partie de phrase ;
  • et les balises de type marqueur comme <meta>, qui sont «auto-fermantes».

Explorer le code-source avec un navigateur

Tous les navigateurs internet permettent d'afficher directement le code source du fichier .html consulté.

Dans le cas du navigateur Firefox, il suffit d'aller dans le menu :
[Outils] → [Développement web] → [Code source de la page] (ou [Ctrl]+[U]).
Pourquoi ne pas essayer en explorant le code-source de cette page web ?