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 : EdgeFirefox, 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.

premiere-page

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="http://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 / extensionCaractéristiquesLicenceCompression
gifLimité à 256 couleurs, permet des animations, une couleur transparente. Utilisé pour logo et dessins.Licence commerciale à CompuserveCompression sans perte excellente pour les images qui ont peu de couleurs.
jpg16 millions de couleurs. UtilisĂ© pour les photos.Licence commerciale Ă  IBMCompression avec perte, meilleur gain que le gif avec beaucoup de couleurs.
png16 millions de couleurs. 256 nuances de transparence.
Existe en 256 couleurs indexées.
Format ouvert développé par W3CCompression sans perte. Fichier volumineux mais qualité maximum.
bmp16 millions de couleurs.Format ouvert développé par Microsoft et IBMNon 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 / extensionNavigateursLicenceCompression
mp3tousLicence commerciale Ă  Philips, France Telecom, FraunhoferCompressĂ©. Musique de 3 minutes qualitĂ© CD : 6 Mo
oggFirefox, Opera, Safari, ChromeDĂ©veloppĂ© par Xiph, format libre dĂ©gagĂ© de tout brevetCompressĂ©. Musique de 3 minutes qualitĂ© CD : 5 Mo
wavTousFormat ouvert développé par MicrosoftNon 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 / extensionNavigateursLicence
H.264 / .mp4TousDéveloppé par MPEG LA, utilisation soumise à Licence
Ogg Theora et Vorbis / .ogvFirefox, Opera, ChromeDéveloppé par Xiph, format ouvert
WebM VP8 / .webmTousDé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.

Articles connexes