2.2 Syntaxe HTML

• HyperText = utilise la partie HTTP de l’Internet
• Markup = le code que vous écrivez est annoté de mots-clés
• Language = peut être lu à la fois par l’humain et l’ordinateur

Comme n’importe quel langage, HTML est livré avec un ensemble de règles. Ces règles sont relativement simples. Cela revient à définir des limites, à savoir où quelque chose commence et où finit.

Voici un exemple de paragraphe en HTML :

<p>Si Tetris m'a appris quelque chose, c'est que les erreurs s'accumulent et que les réalisations disparaissent.</p>

Ce que vous voyez entre crochets < et > sont des balises HTML. Elles définissent où quelque chose commence et prend fin.

Chaque balise porte une signification précise, p représente le paragraphe.

Les balises vont généralement par paires :

• La balise d’ouverture <p> définit où commence le paragraphe.
• La balise de fermeture </p>définit la fin du paragraphe.
  

La seule différence entre une balise d’ouverture et une balise de fermeture est la barre de fraction / (slash) qui précède le nom de la balise utilisée.

Lorsque vous combinez une balise d’ouverture, une balise de fermeture et tout le reste, vous obtenez un élément HTML. La ligne entière est un élément HTML qui utilise les balises HTML <p> et </p>.

Si vous affichez cet exemple dans votre navigateur, vous remarquerez que les balises HTML ne sont pas affichées par le navigateur. Elles sont uniquement lues par le navigateur pour savoir quel type de contenu vous avez écrit.

Où écrire le HTML

Vous avez probablement rencontré de simples fichiers texte, ceux qui ont une extension .txt.

Pour qu’un tel fichier texte devienne un document HTML (au lieu d’un document texte), vous devez utiliser une extension .html.

Ouvrez votre éditeur de texte et copiez les éléments suivants :

<p>Ceci est ma première page Web !</p>

Enregistrez ce fichier sous ma-premiere-page-web.html et ouvrez-le simplement avec votre navigateur. Vous verrez alors:

Rappel :

• utiliser un éditeur de texte tel que Notepad++ pour créer des documents HTML
• utiliser un navigateur comme Firefox pour ouvrir des documents HTML

Les attributs

Les attributs agissent comme des informations supplémentaires liées à un élément HTML. Ils sont écrits dans une balise HTML. En tant que tels, ils ne sont pas non plus affichés par le navigateur.

Par exemple, l’attribut href est utilisé pour définir la cible d’un lien (qui utilise une balise d’ancrage) :

<a href="https://www.mozilla.com/firefox">Téléchargez Firefox</a>

Il existe 16 attributs HTML pouvant être utilisés sur tout élément HTML. Tous sont optionnels.

Vous utiliserez principalement class (classe – qui est utilisée pour CSS), et title (titre – l’info-bulle qui apparaît lorsque vous survolez un élément).

Certains éléments HTML ont des attributs obligatoires. Par exemple, lors de l’insertion d’une image, vous devez fournir l’emplacement de l’image à l’aide de l’attribut src (source) :

<img src="#" alt= "Description of the image" >

Étant donné que l’élément <img> a pour but d’afficher une image, il est logique de définir/spécifier le chemin d’accès à l’image.

Commentaires

Vous pouvez écrire des commentaires dans votre code – cela peut être utile si vous travaillez à plusieurs sur une page ou vous permettre de vous remémorez quelque chose en prévision de corrections futures.
Ces commentaires seront ignorés par le navigateur et ne sont utiles que pour nous, les humains, qui écrivons le code.

Un commentaire commence avec <!-- et prend fin avec -->.

<!-- Cette phrase (commentée) sera ignorée par le Navigateur -->
<p>Bonjour tout le monde !</p>

Éléments auto-englobants

Certains éléments HTML n’ont seulement qu’une balise d’ouverture :

<br> <!-- line-break --> (Saut de ligne)
<img src="https://placehold.it/100x100" alt="Description"> <!-- image --> (l'appel d'une image & sa description)
<input type="text"> <!-- text input --> (un champ texte de formulaire)

Parce qu’ils n’ont pas de balise de fermeture et qu’ils ne peuvent donc rien contenir, les éléments auto-englobants portent généralement quelques attributs, ce qui leur fournit des informations supplémentaires.