C'est quoi HTML en informatique ?

L'HyperText Markup Language, HTML, désigne un type de langage

informatique descriptif. Il s'agit plus précisément d'un format de données utilisé
dans l'univers d'Internet pour la mise en forme des pages Web. Il permet, entre
autres, d'écrire de l'hypertexte, mais aussi d'introduire des ressources
multimédias dans un contenu.
Le HTML5, pour HyperText Markup Language 5, est une version du célèbre
format HTML utilisé pour concevoir les sites Internet.
Le langage HTML tout entier repose sur l’utilisation d’éléments qui permet de
créer la structure d’une page HTML, de définir chaque contenu de notre page et
également de passer certaines informations utiles au navigateur pour afficher la
page (comme le type d’encodage utilisé par exemple pour que celui-ci affiche
bien nos accents français). Selon l’élément utilisé, un navigateur va reconnaître
le contenu comme étant de telle ou telle nature.
Ainsi, on va utiliser des éléments pour définir un paragraphe ou un titre par
exemple, ou encore pour insérer une image ou une vidéo dans un document.
L’élément h1, par exemple, sert à définir un titre très important, tandis que
l’élément a va nous permettre de créer un lien, etc.
Dans ce cours nous allons étudier une grande partie des éléments de Html 5 pour
nous servir de créer notre premier site.

Les balises HTML :

Premièrement on va commencer par les balises HTML qui constitué d’une paire
de balises (ouvrante et fermante) et d’un contenu, soit d’une balise unique qu’on
dit alors « orpheline ».

L’élément h1 (qui sert à définir un titre) est par exemple constitué d’une balise
ouvrante, d’une balise fermante et d’un contenu textuel entre les balises. L’idée
ici est que le texte contenu entre les deux balises va être le texte considéré par le
navigateur comme étant un titre.

Voici comment on va écrire cela :

La différence entre la balise ouvrante et la balise fermante de notre élément h1 :
la balise fermante contient un slash avant le nom de l’élément.
Vous pouvez retenir cette syntaxe qui sera toujours la même en HTML.
Certains éléments en HTML ne vont être constitués que d’une balise qu’on
appelle alors orpheline. Cela va être le cas pour certains éléments qui ne
possèdent pas de contenu textuel comme l’élément br par exemple qui sert
simplement à créer un retour à la ligne en HTML et qui va s’écrire comme ceci :
Les attributs HTML :
Les attributs vont en venir compléter les éléments en les définissant plus
précisément ou en apportant des informations supplémentaires sur le
comportement d’un élément. Un attribut contient toujours une valeur.

Prenons ici l’exemple de l’élément img. Cet élément permet de représenter une
image dans un document.

Pour le faire fonctionner correctement, nous allons devoir lui ajouter un

attribut src pour spécifier le nom du fichier image à charger.

La structure d’une page HTML :

Voici ci-dessous le code minimum pour créer une page HTML valide. Nous
allons dans la suite de ce chapitre expliquer le rôle de chaque élément et attribut.
• Le DOCTYPE : sert à indiquer le type du document.
• L’élément HTML : représente notre page en soi. On va
insérer tout le contenu de notre page (et donc les autres
éléments) à l’intérieur de celui-ci.
• L’élément head : est un élément d’en-tête. Il va contenir des
éléments qui vont servir à fournir des informations sur la
page au navigateur, comme le titre de la page ou encore le
type d’encodage utilisé pour que celui-ci puisse afficher les
caractères de texte correctement.
• L’élément body : contient tous les éléments définissant les
contenus « visibles » de la page, c’est-à-dire les contenus à
destination de l’utilisateur et notamment les différents textes
présents dans la page, les images, etc.
• L’élément title : permet d’indiquer le titre de la page en soi.
Ce titre de page est le texte visible sur le haut des onglets de
votre navigateur par exemple :

• L’élément meta : transmit des informations sur la page. Cet

élément possède de nombreux attributs différents.
Ici, ce qui nous intéresse va être de préciser le type
d’encodage utilisé dans nos pages. Cela va permettre aux
navigateurs d’afficher correctement nos différents textes
avec les accents, les cédilles, etc.

Pour faire cela, nous allons utiliser l’attribut charset pour «

characters set » c’est-à-dire « ensemble de caractères » de
l’élément meta et lui fournir la valeur utf-8.

La valeur utf-8 est de loin la valeur la plus utilisée sur le

web et est la valeur de référence pour tous les alphabets
latins. Cela va permettre à chacun de nos caractères de
s’afficher correctement dans le navigateur.
L’enregistrement de notre fichier :
Il y a quelques règles à respecter lorsqu’on enregistre un fichier de code : le nom
du fichier ne doit pas contenir d’espace ni de caractères spéciaux (pas de
caractères accentués ou de ponctuation ni de sigles) et doit commencer par une
lettre. Ici, on peut enregistrer notre fichier sous le nom index.html par exemple.

Afficher le résultat d’un code HTML dans le navigateur :

Pour afficher notre fichier dans le navigateur, il faut effectuer un clic gauche sur
le fichier.
Voici le résultat que vous devriez avoir :
Les titres en HTML :
Les éléments H1, H2... H6 permettent de définir des titres de différents niveaux.
On parle aussi d'entêtes pour faire la distinction avec l'élément TITLE placé dans
l'élément HEAD.
Il y a 6 niveaux d'entête, H1, H2, H3, H4, H5 et H6. H1 correspond au titre
principal, H2 au titre secondaire, jusqu’à H6.
Exemple :
Les paragraphes en HTML :
Pour créer des paragraphes en HTML, nous allons utiliser l’élément p.
Pour chaque nouveau paragraphe, un retour à la ligne va être créé
automatiquement et affiché par votre navigateur.
Exemple :
Les retours à la ligne en HTML :
Pour effectuer un retour à la ligne en HTML nous allons devoir utiliser
l’élément br qui est représenté par une unique balise orpheline.
Exemple :

Les balises strong, em,i et mark :

• Strong : Utilisé dans un paragraphe pour mettre un texte
en gras.
• Em : Utilisé dans un paragraphe pour mettre une partie de
texte en emphase.
• i : Utilisée dans un paragraphe pour indiquer qu'une partie
du texte est différent du reste. Il ne faut pas utiliser cette
balise lorsque <b>, <cite>,<dfn>,<em>,<q>,<small> ou
<strong> peuvent être utilisées. Note : Certains analyseurs de
site nous disent que cette balise est obsolète, ce qui est
totalement faux.
• Mark : Pour marquer du texte, par exemple surligner un
résultat de recherche. On stylisera cette balise en CSS.
Les listes en HTML:
Les listes non ordonnées :
Les listes non-ordonnées vont être utiles pour lister des éléments sans
hiérarchie ni ordre logique.
Pour créer une liste non-ordonnée, nous allons avoir besoin d’un
élément ul qui va représenter la liste en soi ainsi que d’un élément li pour
chaque nouvel élément de liste.
Exemple :

➢ Les listes ordonnées :

Nous allons utiliser les listes ordonnées lorsqu’il y aura une notion d’ordre
ou de progression logique ou encore de hiérarchie entre les éléments de
notre liste.
Pour créer une liste ordonnée, nous allons cette fois-ci utiliser
l’élément ol pour définir la liste en soi et à nouveau des éléments li pour
chaque élément de la liste.
Exemple :

Les attributs HTML des listes ordonnées :

➢ L’attribut type permet de changer l’apparence des puces d’une liste
ordonnée.
• « 1 » : valeur par défaut. Des chiffres apparaitront devant chaque
élément de la liste ;
• « I » : Des chiffres romains majuscules apparaitront devant chaque
élément de la liste ;
• « i » : Des chiffres romains minuscules apparaitront devant chaque
élément de la liste ;
• « A » : Des lettres majuscules apparaitront devant chaque élément de
la liste ;
• « a » : Des lettres minuscules apparaitront devant chaque élément de
la liste.
Exemple :

➢ L’attribut start va nous permettre de choisir un point de

départ pour notre liste ordonnée. On va donc le placer dans la
balise ouvrante de l’élément représentant la liste ol.
Exemple :
 ➢ L’attribut value va lui en revanche nous permettre de choisir la
valeur de chaque puce d’éléments de liste.
Exemple :

➢ L’attribut reversed permet d’inverser le compte des puces

des éléments de liste ordonnées grâce à l’attribut reversed.
Exemple :
➢ Les listes de définitions :
Ils permettent de lister des termes et d’ajouter des définitions ou
descriptions pour chacun de ces termes.
Pour créer une liste de définitions, nous allons cette fois-ci utiliser
l’élément dl pour définir la liste en soi, puis des éléments dt pour
chaque élément à décrire et enfin l’élément dd pour la définition.
Exemple :

➢ L’imbrication de listes :
Pour imbriquer une liste dans une autre, il suffit de définir une
nouvelle liste à l’intérieur de l’un des éléments d’une autre liste,
juste avant la balise fermante de cet élément.
Les formulaires HTML :
Les formulaires HTML vont permettre à nos visiteurs de nous envoyer des
données que nous allons ensuite pouvoir manipuler et / ou stocker.
Exemple :

L’élément form et ses attributs :

Pour créer un formulaire, nous allons utiliser l’élément HTML form. Cet
élément form va avoir besoin de deux attributs pour fonctionner
normalement : les attributs method et action.
L’attribut method va indiquer comment doivent être envoyées les données
saisies par l’utilisateur. Cet attribut peut prendre deux valeurs : get et post.
• Get : Avec la méthode GET, les données à envoyer au serveur
sont écrites directement dans l’URL.
• Post : La méthode POST écrit les paramètres URL dans la
requête HTTP pour le serveur. Les paramètres ne sont donc pas
visibles pour les utilisateurs et la portée des requêtes POST est
illimitée.

L’attribut action va lui nous servir à préciser l’adresse de la page qui va traiter
les données.

L’élément input :
L’élément HTML input est un élément qui va permettre à l’utilisateur d’envoyer des
données. Il se présente sous la forme d’une balise orpheline et va obligatoirement
posséder un attribut type auquel on va pouvoir donner de nombreuses valeurs.

La valeur passée à l’attribut type va déterminer le type de données que l’utilisateur va

pouvoir envoyer : un texte avec input type="text", une adresse mail avec input
type="email", une date avec input type="date", etc.
Notez également que les navigateurs proposent aujourd’hui des présentations
différentes en fonction du type d’input et notamment sur mobile : pour un input
type="date", par exemple, un calendrier sera souvent affiché pour aider l’utilisateur à
choisir une date.

L’élément label:
Pour donner des indications sur les données attendues dans chaque champ aux
utilisateurs, nous allons utiliser des éléments label. Cet élément va permettre
d’attribuer un libellé (c’est-à-dire une étiquette ou une description) à chaque
champ de notre formulaire.

Pour lier un label et un input ensemble, nous allons attribuer un attribut id unique à
chacun de nos éléments input pour les identifier de manière formelle et allons
également rajouter un attribut for à chacun de nos label qui devra avoir la même valeur
que l’id de l’input auquel il doit être lié.

Les éléments de formulaires HTML :

L’élément input et les valeurs de l’attribut type :
Ce formulaire proposera :

✓ Un champ texte recueillant l'adresse mail de l'utilisateur ;

✓ Un champ texte recueillant son mot de passe ;
✓ Un champ texte recueillant la confirmation de son mot de passe ;
✓ Un champ texte recueillant son nom d'utilisateur (optionnel).