Initiation à HTML

Bref historique

HyperText Markup Language est une des trois inventions à la base du World Wide Web, avec le HyperText Transfer Protocol et les adresses web.

Un hypertexte est un document ou un ensemble de documents contenant des unités d'information liées entre elles par des hyperliens.

HTML a été inventé pour permettre d'écrire des documents hypertextuels liant les différentes ressources d’Internet.

En 1991, Tim Berners-Lee – ci-contre – un informaticien britannique travaillant au CERN, annonce publiquement le web et donne le lien d'un document .html.

En 2021, nous en sommes à la version 5 de HTML.

Langage à balise interprété

Le HTML est un langage descriptif. C'est à dire qu'il se contente de décrire l'apparence du résultat mais qu'il ne donne pas lieu à une exécution d'instructions.

Un fichier .html est un simple fichier texte. À l'aide de balises il indique les éléments de mise en forme. Quand on ouvre le fichier avec un éditeur de texte, on voit les balises telles qu'elles sont écrites dans le fichier.

Un navigateur – Firefox, Chrome, Safari… – à l'ouverture du fichier, interprète ces balises ce qui modifie l'apparence du texte.

La plupart des balises fonctionnent comme des parenthèses : balise ouvrante, balise fermante.

Page élémentaire

Contenu d'un fichier .html élémentaire.

<!DOCTYPE html>
<html>
  <head>
    <!--
    la zone head = entête permet de préciser la configuration de la page
    -->
    <title>Titre de la page</title>
  </head>
  <body>
    <!-- corps = contenu de la page -->
  </body>
</html>

Les indentations ne sont pas indispensables.

block et inline

Dans un document .html, les retours à la ligne sont ignorés et en l'absence de balises, tout le contenu apparaîtrait à la suite, sans retour à la ligne. Dans cette perspective, on distingue deux types de balises :

Les balises de type block qui forment un paragraphe. Elles commencent sur une nouvelle ligne et quand elles se terminent on revient en début de ligne.
Les balises de type inline qui ne font pas revenir à la ligne.

Par exemple, si je veut mettre des mots en gras, c'est un élément de mise en forme qui nécessite une paire de balises, mais je ne veux pas que ces balises fassent revenir en début de ligne. C'est un cas inline.

Les balises ont un fonctionnement par défaut, soit block, soit inline. Mais tout est modifiable.

Les balises

Les commentaires

<!-- Début d'un commentaire
  qui peut s'étaler sur plusieurs lignes...
Fin du commentaire -->

Le charset

Dans un fichier texte, les caractères sont codés avec un code – Voir cours. Comme un fichier internet peut être vu dans le monde entier et que les caractères des différents pays peuvent être très différents, il est important de préciser l'encodage utilisé. En Europe on utilisera le plus souvent UTF8.

<meta charset="UTF-8"> <!-- à placer dans <head> -->

Retour à la ligne

En général, on ne devrait pas en avoir besoin. On peut utiliser des éléments de type block et des marges.

Si on a besoin de laisser un espace vertical, il est plus rigoureux d'utiliser des marges plutôt que de sauter des lignes. Cela est également vrai pour un document de traitement de texte comme Word.

<br/>

Titres

Balises de type block

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

Mises en forme élémentaires

Balises de type inline

<b>Texte en gras</b>
<i>Texte en italique</i>

Paragraphes

Élément standard permettant de former proprement les paragraphes de texte sans recours à  .

<p>mon paragraphe...</p>

Blocs génériques

Il peut être utile de délimiter une zone pour lui appliquer une mise en forme personnalisable ou pour identifier la zone.

<span>...</span> <!-- balise générique inline -->
<div>...</div> <!-- balise générique block -->

Liens hypertextes

<a href="adresse du lien">Texte d'un lien hypertexte</a>
<img src="adresse de l'image" >

Listes à puces

<ul>
  <li>Un item</li>
  <li>Un autre item</li>
</ul>

Listes numérotées

<ol>
  <li>Un item</li>
  <li>Un autre item</li>
</ol>

Tableaux

<table> <!-- Début table -->
  <tr>  <!-- Début d'une ligne -->
    <td>Une cellule</td>
    <td>Une autre cellule</td>
  </tr>
  <tr> <!-- Une autre ligne -->  ... </tr>
</table>

Styles

Pour ajouter des couleurs, des marges, des cadres… on utilise les styles CSS Cascading Style Sheets.

Il existe beaucoup d'options CSS. Le mieux est d'aller voir sur une Référence chaque fois que nécessaire.

Les éléments de style CSS peuvent être indiqués de diverse façons.

Méthode 1 : au niveau des balises

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Illustration méthode 1</title>
  </head>
  <body style="width=80%;">
    <p style="font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px;">Petit bloc de texte comme exemple.</p>
    <p style="font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px;">Autre bloc de texte comme exemple.</p>
    <p style="font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px; color:#FF0000;">Autre bloc de texte mais écrit en couleur.</p>
  </body>
</html>

Cette méthode est mauvaise :

rend le code HTML très embrouillé, très peu lisible : on a du mal à trouver le contenu au milieu des éléments de styles,
répète de nombreuses fois la même chose puisque tous les paragraphes seront stylés de la même façon,
risque de rendre l'affichage inhomogène : si on se trompe d'une balise à l'autre, elles pourront avoir un style différent ce qui n'est pas rigoureux,
d'une façon général, il faut séparer fond et forme.

Méthode 2 : Les styles regroupés dans le head

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Illustration méthode 1</title>
    <style type="text/css">
        body { width:80%; }
        p {
           font-family:Arial, sans-serif;
           font-size:12pt;
           text-align:justify;
           text-indent: 20px;
        }
        p.encouleur { color: #FF0000; }
    </style>
  </head>
  <body>
    <p>Petit bloc de texte comme exemple.</p>
    <p>Autre bloc de texte comme exemple.</p>
    <p class="encouleur">Autre bloc de texte mais écrit en couleur.</p>
  </body>
</html>

Cette méthode est déjà meilleure : elle est beaucoup plus lisible.

Le style défini en ligne 8 s'applique à tous les éléments de type ,
le style en ligne 14 s'applique à tous les éléments de type  ayant la classe encouleur
En lignes 18 et 19, les balises  se voient affecter le style de la ligne 8
En ligne 20, la balise  a la classe encouleur. Le bloc se verra affecter les styles des lignes 8 et 14.

Méthode 3 : Fichier CSS à part

On commence par définir un fichier CSS :

/* Fichier styles.css */
body { width:80%; }
p {
  font-family:Arial, sans-serif;
  font-size:12pt;
  text-align:justify;
  text-indent: 20px;
}
p.encouleur { color: #FF0000; }

Et on fait le lien vers ce fichier dans le HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Illustration méthode 1</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>Petit bloc de texte comme exemple.</p>
    <p>Autre bloc de texte comme exemple.</p>
    <p class="encouleur">Autre bloc de texte mais écrit en couleur.</p>
  </body>
</html>

C'est la meilleure option :

Le graphiste s'occupe de créer les styles et il les rassemble dans le fichier CSS,
Celui qui écrit le contenu se contente de faire référence au fichier CSS et il a la garantie que le styles sera toujours homogène,
On peut récupérer des styles tout fait.

Une même balise peut recevoir plusieurs classes CSS en même temps.

Table des matières