HTML : HyperText Markup Language
Le langage HTML est un texte descriptif servant à insérer des éléments dans une page Web : du texte, des titres, des images, des documents audio et vidéo, etc. Ce langage est le point de départ incontournable pour réaliser des sites.
Les balises : marquage du début et de la fin d'une zone
Lorsque qu'on va se baigner à l'océan, les drapeaux bleus indiquent la zone de baignade autorisée. Ces drapeaux bleus servent à baliser une zone.
Le langage HTML s'appuie sur un système de <balises>, mots entourés de symboles < et > servant à marquer le début et la fin d'une zone. Par exemple, pour indiquer une zone de texte au navigateur, on écrit : <p>Du texte</p>.
Remarque : Certaines balises ne définissent pas de zones, comme la balise <br> qui permet un retour à la ligne; on les appelle balises vides.
Les outils du HTML
Pour créer vos pages HTML, vous avez besoin de 2 outils :
- un éditeur de texte tout simple comme le Bloc-Notes de Windows, mais je conseille l'usage d'éditeurs de texte plus élaborés comme Notepad++ ou Brackets qui colorent le code de manière à identifier plus facilement les erreurs de syntaxe.
- un bon navigateur : Edge, Firefox, Opera, Chrome, Safari.
Pour créer vos pages HTML, vous n'avez pas besoin :
- d'être connecté : tous les navigateurs fonctionnent hors-connexion.
- d'avoir le dernier éditeur HTML certainement très performant mais inutile pour apprendre.
Les éditeurs HTML comme Dreamweaver ou KompoZer ne sont pas parfaits. En effet, le code source HTML généré par ces éditeurs contient beaucoup d’erreurs et d'informations inutiles. Il est bon de connaître un minimum le langage HTML pour corriger, maîtriser et simplifier le code.
Votre première page
Tapez le code suivant dans votre éditeur de texte :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ma première page</title>
</head>
<body>
<p>Ma première page</p>
</body>
</html>A la manière d'une partition musicale, le navigateur va déchiffrer et interpréter le code HTML de haut en bas et de gauche à droite. Il est très important d'intégrer cette notion du sens de lecture, car cela nous amène à réfléchir sur l'ordre des balises, et ultérieurement, sur le placement de certains programmes PHP ou JavaScript.
Signification du code
<!doctype html>
Cette balise signale aux navigateurs que la page est au format HTML5. Cette balise est facultative, mais elle permet, par exemple, la gestion de l’audio et de la vidéo qui appartiennent au HTML5.
<html>
Cette balise unique indique le début de la page HTML.
</html>
Celle-ci indique la fin de la page HTML.
<head>
Cette balise unique marque le début de la zone d’en-tête (prologue à la page contenant des informations destinées au navigateur : titre, balises Meta, liaison CSS, fonctions JavaScript).
</head>
Fin de la zone d’en-tête.
<title>
Début du titre de la page affiché dans l'onglet du navigateur. Cette balise unique est intégrée à la zone d’en-tête.
</title>
Fin du titre de la page.
<body>
Ceci est le corps de la page. Cette balise unique concerne l’affichage de la page. En général l’essentiel du code se trouve entre <body> et </body>.
</body>
Ceci est la fin du corps de la page.
<p>
Début d'une zone de texte standard écrit sous forme de paragraphe.
</p>
Fin de paragraphe.
Majuscules ou minuscules ?
Même si les codes sources HTML rencontrés sur le web sont traditionnellement écrits en minuscules, le World Wide Web Consortium indique que les balises peuvent être écrites aussi bien en majuscules qu'en minuscules.
Enregistrez votre page Web
- Enregistrer dans le bureau par exemple
- Nom du fichier : page.html (extension .html)
- Encodage : UTF-8 (permet de gérer correctement les accents). Cet encodage est maintenant réglé par défaut sur la plupart des éditeurs de texte.
Double-cliquez sur l’icône page.html sur le bureau puis admirez votre première page HTML.
Modifier la page et actualisation
Revenez à l'éditeur de texte contenant le code source. Modifiez le code en remplaçant <p>Ma première page</p> par <h1>Ma première page</h1>
Enregistrez, puis cliquez sur le bouton Actualiser du navigateur ou touche F5 pour voir les modifications.
Ordre logique de fermeture
Il faut veiller à ce que les balises soient fermées dans l'ordre logique.
- <b><i>...</i></b> → correct
- <b><i>...</b></i> → incorrect
Vocabulaire
Dans cet exemple :
<a href="fichier.html">Cliquez ici</a>
- <a href='fichier.html'> est la balise de début
- </a> est la balise de fin
- Cliquez ici est le contenu de la balise <a>
- href est l’attribut de la balise <a>
- fichier.html est la valeur de l’attribut href
Liste des principales balises HTML
Mise en forme du texte
<h1>Titre</h1> <h2>Sous-titre</h2> <h6>...</h6>
Titres ou « headings ». Ces balises permettent d’écrire les titres de chapitres dans vos pages Web. <h1> écrit très gros, jusqu’à <h6> qui écrit tout petit mais toujours en caractères gras. Ces numéros correspondent à la hiérarchie des titres. <h1> affiche le titre le plus haut dans la hiérarchie.
<p>...</p>
Paragraphe standard, texte normal, en général suite à un titre.
<br>
Retour à la ligne. A mettre de préférence au sein d'un paragraphe.
<b>...</b> ou <strong>…</strong>
Texte affiché en caractère gras ou texte renforcé.
<i>...</i> ou <em>…</em>
Texte affiché en italique ou texte mis en évidence.
<hr>
Trait horizontal dont la largeur par défaut occupe celle de son conteneur. Balise vide.
Balise structurelles et divisions
<div>...</div>
Marque une zone de division. Cette balise ne fait rien de spécial, à part un saut de ligne. Elle est en revanche très utile pour les mises en forme avec les CSS.
<span>...</span>
Marque une sous division, sans saut de ligne. Cette balise ne fait strictement rien, à part marquer une zone, pour permettre une mise en forme spécifique avec les CSS.
<nav>...</nav>
Marque la zone de navigation en HTML5, c’est-à-dire le menu d’un site contenant les liens vers les autres pages.
<header>...</header>
Marque la zone d’entête d’une page ou d’un article dans une page.
<main>...</main>
Marque le contenu principal d'une page qui se situe entre le header et le footer.
<article>...</article>
Marque une zone d’article dans une page de type blog.
<footer>...</footer>
Marque la zone de pied de page d’une page ou d’un article dans une page.
Exemple de structure d'une page en HTML5 :
Listes non numérotées à puces et éléments de liste
<ul> <li>Des tomates</li> <li>Des carottes</li> </ul>
Listes numérotées et éléments de liste
<ol> <li>Des tomates</li> <li>Des carottes</li> </ol>
Liens
<a href="fichier.html">Cliquez ici</a>
Lien vers la page locale fichier.html située dans le même dossier.
<a href="https://www.lemonde.fr">Journal Le Monde</a>
Lien vers une page Web.
<a href="mailto:jean.dupont@free.fr">Contactez-moi</a>
Lien vers une adresse mail. Ce type de lien communément appelé mailto chargera le client mail par défaut de votre système d'exploitation : Outlook, Thunderbird, etc.
<a href="fichier.html" target="_blank">Cliquez ici</a>
- target='_self' (valeur par défaut) Affichage de la cible du lien dans la même fenêtre.
- target='_blank' Affichage de la cible du lien dans un nouvel onglet du navigateur.
Remarque : La tradition veut qu'un lien externe à votre site s'ouvre dans un nouvel onglet.
<h1 id="chapitre5">Chapitre 5</h1>
Définition d'une ancre avec l'attribut id. Une ancre permet de faire un lien interne dans une longue page de texte par exemple.
<a href="#chapitre5">Chapitre 5</a>
Lien vers une ancre à l’intérieur de la page.
<a href="fichier.html#chapitre5">Chapitre 5</a>
Lien vers une ancre dans une autre page HTML.
Images
<img src="chateau.gif"> <img src="chateau.jpg"> <img src="chateau.png">
Insertion d'une image au format gif, jpg ou png
<img src="chateau.jpg" title="Château de Duras">
Texte affiché (info bulle) lorsque le pointeur est au-dessus de l’image.
Les formats d’images sont affichables par tous les navigateurs. Voici leurs particularités :
| Format / extension | Caractéristiques | Licence | Compression |
| gif | Limité à 256 couleurs, permet des animations, une couleur transparente. Utilisé pour logo et dessins. | Licence commerciale à Compuserve | Compression sans perte excellente pour les images qui ont peu de couleurs. |
| jpg | 16 millions de couleurs. Utilisé pour les photos. | Licence commerciale à IBM | Compression avec perte, meilleur gain que le gif avec beaucoup de couleurs. |
| png | 16 millions de couleurs. 256 nuances de transparence. Existe en 256 couleurs indexées. | Format ouvert développé par W3C | Compression sans perte. Fichier volumineux mais qualité maximum. |
| webp | 16 millions de couleurs. 256 nuances de transparence. Permet les couleurs indexées et les animations. | Format ouvert développé par Google | Compression avec ou sans perte. Gain de 30% à 40% par rapport au PNG et JPG. |
| bmp | 16 millions de couleurs. | Format ouvert développé par Microsoft et IBM | Non compressé. Ce format est très rarement utilisé dans le Web, car très gourmand en mémoire. |
Audio
<audio src="bagdadcafe.mp3" controls> </audio>
Permet de lire un fichier audio avec les boutons de contrôle.
<audio src="bagdadcafe.mp3" autoplay> </audio>
Lire un fichier audio automatiquement au chargement de la page.
Le format audio libre OGG n’est pas lu par Internet Explorer :
| Format / extension | Navigateurs | Licence | Compression |
| mp3 | tous | Licence commerciale à Philips, France Telecom, Fraunhofer | Compressé. Musique de 3 minutes qualité CD : 6 Mo |
| ogg | Firefox, Opera, Safari, Chrome | Développé par Xiph, format libre dégagé de tout brevet | Compressé. Musique de 3 minutes qualité CD : 5 Mo |
| wav | Tous | Format ouvert développé par Microsoft | Non compressé. Musique de 3 minutes qualité CD : 40 Mo |
Vidéo
<video src="bagdadcafe.mp4" controls> </video>
Permet de lire un fichier video avec les boutons de contrôle.
<video src="bagdadcafe.mp4" controls poster="apercu.jpg"> </video>
L’attribut poster permet de choisir une image représentative de la vidéo.
A l’instar des fichiers audio, certains formats ne sont lisibles que par certains navigateurs :
| Format / extension | Navigateurs | Licence |
| H.264 / .mp4 | Tous | Développé par MPEG LA, utilisation soumise à Licence |
| Ogg Theora et Vorbis / .ogv | Firefox, Opera, Chrome | Développé par Xiph, format ouvert |
| WebM VP8 / .webm | Tous | Développé par Google, format ouvert |
Balises <meta>
Les balises meta se placent dans la zone d’en-tête <head>.
<meta charset="utf-8">
Indique aux navigateurs l’encodage des caractères au format UTF-8. Cela permet de gérer de nombreuses langues avec leurs accents.
Remarque : votre page doit être également enregistrée au format UTF-8. Vérifiez le paramétrage de votre éditeur de texte.
<meta name="description" content="Le Premier Service d'impression en ligne haut de gamme.">
Description du contenu de la page à destination des moteurs de recherche. La valeur de l’attribut content sera le texte affiché par les moteurs de recherche lorsqu’ils trouveront votre page. Voir le cours sur le référencement.