Home
About

Introduction à html

Auteurs :
  • François Brucker
  • Yi Mei Jiang
  • Théophile Bonneau
Cours/Web/Introduction à html

Principes du html.

On ne traitera pas tous les détails. Il existe pleins de tutos pour apprendre les bases sur l'internet mondial :

Tutoriels généraux sur html/css :

Avant de choisir un tuto, Vérifier bien cependant qu'ils traitent de la dernière version, ici html5 et css3.

Premier fichier html

Prenez votre éditeur de texte favori et créez un nouveau fichier que vous nommerez index.html, et collez- le contenu suivant :

<!doctype html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Maison page</title>
  </head>
  <body>
    <h1>Bonjour Monde</h1>
    <p>Bienvenue sur ma page web.</p>
  </body>
</html>

Vous pouvez maintenant l'ouvrir en tant que fichier texte avec chrome :

  • "menu fichier > ouvrir un fichier ..."
  • dans dans explorateur de fichier, cliquez droit sur le fichier pour l'ouvrir avec chrome.

Si vous modifiez un fichier, chrome ne le mettra par à jour immédiatement. Il faut l'actualiser. Vous pouvez le faire dans : "menu Afficher > Actualiser cette page"

Vous voyez votre fichier html être interprété par chrome :

félicitations ! Vous venez d'écrire votre 1er fichier html constitué :

  • d'un titre <h1>Bonjour Monde</h1>
  • un paragraphe <p>Bienvenue sur ma page web.</p>

Balises html

Le html est un langage à balises, par exemple les balises <head></head> ou encore <body></body> de l'exemple. Il en existe de nombreuses.

Balises html

La liste des balises html

Formes de balises

Les balises peuvent être formées de deux façons. La plus classique comporte deux balise et un contenu :

Première forme d'une balise

Une balise ouvrante et une balise fermante :

<nom>
  [contenu de la balise]
</nom>

Où nom est le nom de la balise, par exemple : html, head, body ou encore p. Le contenu de la balise peut être vide, composé de texte ou encore d'autres balises.

Il existe également une autre forme, composé d'une unique balise auto-fermante :

Deuxième forme d'une balise

Une balise sans corps :

<nom option1="valeur1" option2="valeur2">

Son intérêt est d'avoir des options qui seront utile au navigateur.

Il existe une autre forme de balise sans corps, la balise auto fermante :

<nom option1="valeur1" option2="valeur2" />

Notez le /> à la fin. Cette notation, bien que correcte, est non recommandée.

Cette balise n'a pas de contenu, comme la balise de nom meta de l'exemple. Son intérêt réside dans ses attributs.

Attributs d'une balise

En plus de sa définition, une balise peut-être déclarée avec des attributs de la forme : clé="valeur". Dans l'exemple, la balise de nom meta possède l'attribut charset="utf-8" qui signifie que le texte est écrit en utf-8 (ce qui devrait être le cas si vous utilisez un éditeur de texte récent).

L'encodage utf-8 est l'encodage par défaut de tout texte, vous ne devriez pas utiliser autre chose.

Arbre DOM

Un fichier html est toujours composé de deux objets :

Les balises d'un fichier html s'organisent en arbre avec :

  1. la balise html comme élément racine
  2. les balises composant le contenu de html comme ses enfants
  3. on progresse dans l'arbre récursivement.

On appelle cette organisation arbre DOM. Dans l'exemple cet arbre correspond à :

html
├── head
│   ├── meta
│   └── title
└── body
    ├── h1
    └── p

On peut avoir plusieurs fois la même balise comme enfant. Il n'est pas rare d'avoir une balise <body></body> ayant plusieurs balises <p></p> comme enfants.

Structure d'un fichier html

Un fichier html minimal est constitué :

  1. d'un doctype qui détermine les noms des balises utilisables
  2. d'une balise balise <html></html> ayant exactement deux enfants :
    1. une balise <head></head>
    2. une balise <body></body>

La balise <head></head> est l'entête du fichier html et contient les déclarations utiles au <body></body> qui contient les balisent qui seront représentées à l'écran.

head

<head>
    <meta charset="utf-8">
    <title>Maison page</title>
</head>

Au minimum, la balise <head></head> va contenir deux enfants :

On mettra souvent également dans cette balise les fichiers css qui définissent le style de la page et les bibliothèques javascript à utiliser.

body

La balise body peut être vide (et dans ces cas là rien ne sera affiché), ou contient le contenu de la page html.

Validation du html

Il peut être compliqué d'écrire du html correct, c'est à dire :

Vérifions que notre exemple a bien écrit du html correct. Il est en effet très (trop) facile d'écrire quelque chose qui ressemble à du html sans en être. Pour cela on utilise le validateur du W3C.

Allez sur le site du validateur du W3C et choisissez "Validate by direct input" et copiez/collez le code html. Puis cliquez sur "check".

Il y a un soucis, il vous demande d'ajouter la langue dans laquelle est écrit votre texte. Faisons le :

<!doctype html>
<html lang="fr">
  <head>
      <meta charset="utf-8">
      <title>Maison page</title>
  </head>
  <body>
    <h1>Bonjour Monde</h1>
    <p>Bienvenue sur ma page web.</p>
  </body>
</html>

Re-tentez une validation.

Tout devrait être ok.

Re-Félicitation, vous venez d'écrire votre 1er fichier html correct !

Souvent, il existe des plugins pour les éditeurs de texte qui valident automatiquement le html. C'est le cas par défaut avec vscode par exemple.

Le navigateur qui lit de l'à-peu-prêt-html ne peut pas l'interpréter directement, il est obligé de faire des suppositions sur ce que vous avez voulu dire.

Si par exemple, vous placez des balises de présentation, comme un titre par exemple, dans la balise <head></head> elle devrait être ignorée et ne pas être représenté à l'écran. Vérifiez que ce n'est pas le cas en modifiant le fichier exemple.html :

<!doctype html>
<html lang="fr">
  <head>
      <meta charset="utf-8">
      <title>Maison page</title>
      <h1>coucou ! Je suis quand même visible.</h1>
  </head>
  <body>
    <h1>Bonjour Monde</h1>
    <p>Bienvenue sur ma page web.</p>
  </body>
</html>

Puis en l'ouvrant avec chrome

Vous devriez voir quelque chose du genre (avec les outils de développements ouvert) :

quirk

Chrome a d'autorité placé le titre de la balise head dans body... Il a souvent raison dans ces modifications mais cela comporte plusieurs effets de bords problématique :

Problème de l'à-peu-prêt-html :

  • ce n'est ce que vous avez écrit qui est interprété, c'est autre chose
  • les petites erreurs vont s'accumuler et, au moment où vous ne vous y attendrez pas, plus rien ne fonctionnera. Il sera alors très difficile de trouver l'erreur puisqu'il va y en avoir tout un tas les unes à la suite des autres
  • chaque navigateur fera des suppositions des suppositions différentes et le rendu sera différent

Pour éviter cela, il faut toujours faire en sorte que votre html soit correct. Cela vous évitera bien des soucis plus tard.

Balises classiques

Documentation

https://developer.mozilla.org/fr/docs/Web/HTML/Element

Il existe de nombreuses balises html, qui structurent le texte en blocs. Citons en quelques unes parmi les plus couramment utilisées :

D'autres balises permettent de mettre en lumière une partie d'un texte. Citons en deux fondamentaux :