Mon premier doc HTML

Nous sommes aujourd'hui le 19 mars, et je m'apprête à écrire mon premier document HTML.

Premiers pas

Un paragraphe HTML est un bloc de texte, d'une ou plusieurs phrases.

Mon premier lien : le validateur HTML5 - pour m'assurer que je n'ai pas fait d'erreur.

Je peux insérer une image :

Je peux également faire un lien-image :

On poursuit

Écrivons maintenant une liste (non-ordonnée) :

Tâche A
Tâche B
Tâche C

Remarquons que nous pouvons imbriquer des listes ensemble et ainsi réaliser des sous-listes :

Tâche A
Tâche B
1. D'abord
2. Puis
3. Enfin
Tâche C

Pour présenter des données, je peux aussi faire un tableau :

cellule 1.1	cellule 1.2	cellule 1.3
cellule 2.1	cellule 2.2	cellule 2.3

D'autres balises

`dl`

En plus des listes ordonnées ol et non-ordonnées ul, on dispose de la balise dl, par exemple pour décrire les caractéristiques d'un film:

Sorti en salle: le 16 septembre 1981
Réalisé par:: Steven Spielberg
Acteurs principaux
: Harrison Ford; Karen Allen; Paul Freeman; Ronald Lacey

`blockquote`

Si nous devons reprendre une autre source de contenu, nous pouvons utiliser la balise blockquote, comme par ex. pour une expression connue :

le mieux est l’ennemi du bien

ou bien pour un extrait de livre :

"Me souhaitez-vous le bonjour ou constatez-vous que c'est une bonne journée, que je le veuille ou non, ou que vous vous sentez bien ce matin, ou encore que c'est une journée où il faut être bon ?"
— Bilbo le Hobbit

`br`

Pour "sauter" une ligne de texte, comme en poésie, on pourra utiliser la balise br :

A grands plis sombres une ample tapisserie
De haute lice, avec emphase descendrait
Le long des quatre murs immenses d'un retrait
Mystérieux où l'ombre au luxe se marie.

`pre`

Si l'on doit insérer un block de texte préformatté, on pourra utiliser la balise pre :

+---------------------------------------+
|                Results                |
+---------------------------------------+
|             |        Contestant       |
+ Competition +-------------------------+
|             |  John | Andrea | Robert |
+-------------+-------+--------+--------+
| Swimming    |  1:30 |   2:05 |   1:15 |
+-------------+-------+--------+--------+
| Running     | 15:30 |  14:10 |  15:45 |
+-------------+-------+--------+--------+

On s'en servira également pour pouvoir afficher du code :


function square(number) {
  return number * number;
}

Encore d'autres balises usuelles

em/small/strong — pour les emphases, ex : discret, particulier, important
sub/sup — pour les indices/exposants, ex : HTML⁵ ou i_n
abbr — pour les abbreviations/acronymes, ex : HTML
time — pour le temps, ex : 19 mars

Multimedia

`audio`

avec différents formats :

`video`

avec différents formats

— Antoine BERNIER, le 19 mars 2018