# Hypertext Markup Language/Version imprimable

* Si vous imprimez cette page, choisissez « Aperçu avant impression » dans votre navigateur, ou cliquez sur le lien Version imprimable dans la boîte à outils, vous verrez cette page sans ce message, ni éléments de navigation sur la gauche ou en haut.
* Cliquez sur Rafraîchir cette page pour obtenir la dernière version du cours.
* Pour plus d'informations sur les version imprimables, y compris la manière d'obtenir une version PDF, vous pouvez lire l’article Versions imprimables.
Une version à jour et éditable de ce livre est disponible sur la Wikiversité, une bibliothèque de livres pédagogiques, à l'URL : http://fr.wikiversity.org/wiki/Hypertext_Markup_Language

# Introduction

Pour développer en HTML, plusieurs outils sont nécessaires :

## Éditeurs de texte

Un logiciel de saisie de texte rudimentaire tel le Bloc-notes de Windows ou TextEdit (Mac OS X) suffisent amplement pour créer un site web. Le Bloc-notes se trouve par défaut dans le menu Accessoires du menu Démarrer de Windows, TextEdit dans le dossier Applications de Mac OS X. L'utilisation de logiciels de création de sites web n’est pas conseillée car ils sont la plupart du temps optimisés pour un navigateur particulier (par exemple Microsoft FrontPage est optimisé pour Internet Explorer…) et ils créent des pages «lourdes» (en moyenne 20% plus lourdes qu'avec le Bloc-notes) et donc longues à charger par le navigateur. De plus, le jour où le besoin d'ajouter une fonction que votre logiciel ne permet pas d'ajouter se fera ressentir, il sera intéressant d’être familier avec le langage HTML pour faire les modifications nécessaires. Il faut également faire attention aux logiciels de traitement de texte « puissants » tels que Word qui utilisent des caractères non standards (comme des apostrophes inversées) qui peuvent générer des erreurs d'interprétation par les navigateurs.
Pour créer une page web, il suffit de taper le code HTML dans le Bloc-notes et d'enregistrer le tout avec l'extension .html ou .htm (attention à ne pas oublier de préciser l'extension. Par défaut le Bloc-notes et TextEdit enregistrent au format .txt). Il existe deux extensions, sans aucune différence entre les deux. Vous pouvez donc choisir entre .html ou .htm. Pour cela, cliquez sur Fichier → Enregistrer sous… puis dans le champ Nom du fichier, tapez nomfichier.html ou nomfichier.htm.

#### Éditeurs de textes pour développeurs

On peut également utiliser des logiciels un peu plus évolués et supportant la coloration syntaxique. Ils ont les mêmes atouts que le Bloc-notes et ont l'avantage supplémentaire de colorer de différentes couleurs les éléments du langage afin d’en faciliter la lecture. Ils sont fortement conseillés !
Pour Microsoft Windows, on peut conseiller :
* Notepad++ ;
* Scite.
Pour Mac OS X, on peut conseiller :
* Coda ;
* Smultron ;
* TextMate ;
* TextWrangler.
Pour les systèmes d'exploitation de type Unix (GNU/Linux, BSD, etc.), on peut conseiller :
* vi/vim ;
* GNU Emacs (également disponible pour plateforme Windows) ;
* gedit (bureau GNOME) ;
* Kate (bureau KDE);
* Geany léger avec autocomplétion (également disponible pour plateforme Mac OS X ou Windows).

### Navigateurs Web

Du plus utilisé au moins utilisé en 2017 :
* Chrome
* Safari
* Edge (+ IE)
* Firefox
* « Opera » (consulté le 17 juin 2017)
| Sommaire | Première page |

# Première page
## Introduction

Une page HTML est composée d’un ensemble d'instructions données grâce à des balises. Pour écrire du code HTML, il suffit d’utiliser n’importe quel éditeur de texte simple. N'utilisez pas de logiciel de traitement de texte, qui a tendance à reformater le texte écrit par l'utilisateur.

## Les balises
### Définition

Les instructions en HTML sont définies grâce à des balises (ou tags en anglais). Ce sont ces balises qui vont permettre au navigateur qui interprétera le code de faire la différence entre la présentation et le texte proprement-dit.
Les balises indiquent donc au navigateur comment mettre en forme le texte. Une balise s'écrit entre les signes inférieur (<) et supérieur (>), appelés également chevrons. Cela donne : <balise>. Une balise est en général accompagnée d’une seconde balise de la forme </balise>. La première balise est appelée balise d'ouverture ou balise ouvrante et la deuxième est nommée balise de fermeture ou balise fermante. La balise de fermeture permet d'indiquer au navigateur qu’il faut arrêter d'appliquer la mise en forme introduite par la balise ouvrante.
Prenons un exemple pour expliquer ce principe de balises ouvrante et fermante. La balise <i> permet de mettre le texte en italique. Ainsi, si dans la phrase Le langage HTML est un langage informatique, on veut mettre seulement le mot HTML en italique, on utilise la syntaxe suivante :
affichera
La balise ouvrante <i> indique au navigateur que la suite du texte doit apparaître en italique et la balise fermante </i> indique au navigateur qu’il doit cesser d'écrire en italique.
Les balises peuvent être écrites indifféremment en majuscules ou en minuscules. Cependant, il est conseillé de les écrire en minuscules pour assurer une plus grande compatibilité avec le XHTML et faciliter la migration vers ce langage le moment venu.
Une balise peut avoir un ou plusieurs attributs. Les attributs permettent de préciser les propriétés de la balise. Ils se présentent sous la forme <balise attribut="valeur">. Les guillemets autour de la valeur ne sont pas obligatoires mais sont recommandés pour des raisons de compatibilité avec le XHTML. Les attributs ne doivent pas être répétés dans la balise fermante.
On appelle code source (ou source tout court), l’ensemble des balises et du texte de la page.
Il est possible d'observer le code source de toute page web en faisant :
* Un clic droit puis Code source de la page sous Firefox
* Un clic droit puis Afficher la source sous Internet Explorer
* Un clic droit puis Afficher le code source de la page sous Chrome
* Un contrôle+clic puis "code source" sous Safari
* Un clic droit puis Source, ou CTRL+U sous Opera

### L'imbrication

Une des forces du HTML est le fait que les balises puissent être imbriquées. En effet pour écrire un texte en italique (balise <i>) et souligné (balise <u>), il suffit d'écrire <i><u>texte</u></i>. Cependant les balises ne doivent pas se chevaucher. En d'autres termes, il est impératif de fermer la première balise ouverte après la deuxième. Ainsi, <u>Firefox est un <i>navigateur Web</i></u> est correct mais <u>Firefox est un <i>navigateur Web</u></i> est incorrect puisque la balise <u> a été ouverte avant la balise <i> et a été fermée en premier. On peut bien évidemment imbriquer plus de deux balises.

## Le document HTML minimum

Nous avons déjà vu qu'un document HTML n'est qu'un document texte avec l'extension .html ou .htm. Cependant, pour que le navigateur reconnaisse le fichier comme un fichier HTML, il faudrait au minimum écrire :
La balise <html> permet de déclarer le document comme un document HTML, et annonce son début. La balise </html> annonce la fin du document HTML au navigateur.
La page web possède une entête délimitée par les balises <head> et </head> et qui permet de donner un titre à la page (avec <title>…</title>), ainsi que des informations au navigateur et aux moteurs de recherches.
La balise <title> permet de définir le titre du document, qui n'est composé que de texte. Celui-ci n’est pas affiché dans le document, mais comme une donnée à propos du document.
Enfin les balises <body> et </body> délimitent le corps de la page HTML, c'est-à-dire ce qui sera affiché dans le navigateur.
Cette disposition est équivalente à celle d’une lettre. En effet, l'entête d’une lettre comporte les informations concernant l’objet et des informations sur l'expéditeur. Elle est représentée par la balise <head>. Le corps de la lettre comprend le message proprement-dit et est représenté par la balise <body>.

## Première page web

Créons maintenant une première page web. La syntaxe de base doit être celle du paragraphe précédent. Nous allons créer une page qui affiche Bonjour et bienvenue sur Wikiversité. Le code source est le suivant :
La balise <title> permet d'ajouter un titre au document qui s'affichera dans la barre de titre du navigateur. Attention à ne pas oublier de la fermer avec la balise </title>.
| Introduction | Mise en forme du texte |

# Mise en forme du texte
## Introduction

Afin de créer des pages qui soient agréables à lire, il faut savoir présenter le texte. Il y a cependant une remarque préliminaire à faire.
Les navigateurs ne prennent pas en compte les retours à la ligne et les tabulations et quel que soit le nombre d'espaces à la suite que vous tapez, un seul sera affiché. Pour mieux comprendre, le code suivant :
affichera
On remarque que le texte n’est pas passé à la ligne après Bonjour et Bienvenue et que le fait de mettre 10 espaces entre et et Bienvenue n'a eu aucun effet.
Ceci est un avantage car ça permet d'indenter et d'espacer le document sans que cela n'ait d'influence sur le page web finale. L'indentation est le fait d’utiliser la touche tabulation pour mettre en valeur la structure du document. Il est fortement conseillé de bien indenter le document afin d’en faciliter la relecture et la maintenance.
Cependant, il est souvent nécessaire de sauter une ligne. Pour passer à la ligne, il faut utiliser la balise <br />. En ce qui concerne les espaces, nous verrons comment faire lorsque nous aborderons les caractères spéciaux.
Ainsi, il suffit d'ajouter la balise <br /> à l'endroit où l’on veut passer à la ligne.
affichera

## Les niveaux de titres

Pour qu'un document soit aisément lisible, il se doit de comporter des titres. Il existe des balises permettant de créer des titres, ce sont <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Il existe bien sûr les balises fermantes associées.
La balise <h1> correspond aux titres les plus gros et la balise <h6> aux titres de la plus petite taille.
Il est à noter que les titres sont toujours en gras et impliquent un retour à la ligne. Ils ne nécessitent donc pas l’utilisation de la balise <br />.

### La police du texte

La police du texte se spécifie grâce à la balise <font face="police"> qui est associée à la balise fermante </font>.
police doit être un nom de police comme Arial ou Comic sans MS.
Il existe un problème de compatibilité avec cet attribut puisque la personne qui visite le site doit avoir la police sur son ordinateur pour qu'elle s'affiche. Il faut donc choisir des polices qu'une majorité de personnes possède. Si le visiteur ne possède pas la police sur son ordinateur, c’est la police par défaut qui va s'afficher. La police par défaut dépend du système du visiteur.
Il existe cependant une astuce pour assurer la plus grande compatibilité possible. Si vous voulez être sûr que soit Arial (police très populaire sur PC), soit Chicago (police très populaire sur Macintosh) s'affiche écrivez la chose suivante : <font face="Arial,Chicago">.
Le navigateur recherchera alors la police Arial et s'il ne la trouve pas, il cherchera la police Chicago. S'il n'en trouve aucune des deux, il affichera la police par défaut.

### La taille du texte

La taille du texte se spécifie grâce à la balise <font size="taille"> qui est associée à la balise fermante </font>.
taille est un chiffre compris entre 1 et 7, où 1 correspond à la taille la plus petite et 7 à la taille la plus grande. Malheureusement, c’est la numérotation contraire aux titres ce qui ne simplifie pas la mémorisation.
La taille par défaut est 3.
Il existe une autre manière de choisir la taille, c’est en donnant à taille une valeur du type +1, -1, +2, -2… La taille du texte sera alors celle du texte alentour ajoutée de la valeur spécifiée.
Par exemple, <font size="3">Je suis plus <font size="+1">grand</font> que les autres</font> affichera la phrase je suis plus grand que les autres en taille 3 sauf le mot grand qui sera en taille 3+1=4.
Au contraire, <font size="taille">Je suis plus <font size="-1">petit</font> que les autres</font> affichera la phrase je suis plus petit que les autres en taille 3 sauf le mot petit qui sera en taille 3-1=2.
Il est impossible d’utiliser une valeur inférieure à 1 ou supérieure à 7. Ainsi, font size="+10"> équivaut à font size="7">.
Ainsi, le code :
affichera

### La couleur du texte

La couleur du texte se spécifie grâce à la balise <font color="couleur"> qui est associée à la balise fermante </font>.
Il existe deux manières de définir les couleurs.
La première consiste à remplacer couleur par le code hexadécimal de la couleur voulue précédé du signe #. Cette méthode étant fastidieuse, les couleurs « basiques » peuvent être appelées par leur nom en anglais. Ainsi, pour afficher du bleu, on tapera <font color="blue">.
Ainsi, le code :
affichera

### Polices de caractères

donne :
Lorem ipsum.

### Les commentaires

Les commentaires se placent entre les balises <!-- et --> :
Les commentaires sont des lignes que le navigateur ne «lira» pas. Ils sont très utiles pour documenter le code, facilitant ainsi la relecture et la maintenance. Ils sont par conséquent fortement recommandés.

### Les paragraphes

Les paragraphes sont des blocs de textes compris entre les balises <p> et </p>.
Un paragraphe implique un saut de ligne avant et après celui-ci.
On ajoute parfois à la balise <p> l'attribut align qui permet de définir l'alignement du texte à l'intérieur du paragraphe. align peut prendre les valeurs left pour un alignement à gauche, right pour un alignement à droite, center pour obtenir un texte centré ou justify pour avoir un paragraphe justifié (c'est-à-dire aligné à la fois à droite et à gauche).

## Les caractères spéciaux

Certains caractères peuvent être absent du jeu de caractères utilisé par votre éditeur lors de la création du document. On utilise alors les entités commençant par le caractère & et se terminant par un ;.
Pour en savoir plus sur ces entités, consulter la table des caractères.
Par exemple, pour afficher le signe €, il peut être nécessaire d'écrire €.
De même, certains caractères spéciaux peuvent être difficiles à saisir directement ou à retrouver ensuite sous leur forme littérale. Ainsi, pour écrire un espace insécable, on utilise fréquemment l'entité &nbsp;.
| Première page | Liens hypertextes |

# Liens hypertextes
## Introduction

Les liens hypertextes sont des références « en ligne » navigables vers des ressources, en particulier d'autres documents HTML, pages Web, ou médias.
Deux balises partagent la syntaxe des liens hypertextes :
* Les liens eux-mêmes.
* Les marques.

## Syntaxe

Les liens hypertextes sont introduits par la syntaxe générale :
où
* lien est la spécification du lien.
* contenu est la portion du document qui référence la ressource.
Le « a » vient de la première lettre du mot anglais anchor (ancre).
Contrairement à la spécification, le contenu ne varie pas d’un type de lien à l'autre.

## Marques

Les marques servent à introduire un point pouvant être référencé dans le document. Elles sont introduites par la syntaxe
où
* marque est le nom de la marque, par lequel on la référencera.

## Liens

Les liens servent à référencer un document ou une marque dans un document.
Ils sont introduits par la syntaxe
où
* lien est une référence non nulle vers une ressource, composée d’une URL, suivie optionnellement d’un « # » et d’un nom de marque, qui n'est pertinent que lorsque la ressource est une page HTML.
« href » signifie hypertext reference.
Dans le cas de référence vers une ressource, la syntaxe est
Dans le cas de référence vers une marque dans une ressource, la syntaxe est
Dans le cas où le lien référence une marque interne, l'URL est optionnelle. La syntaxe peut être raccourcie en
Pour ouvrir le lien dans un nouvel onglet sur clic gauche (au lieu de CTRL + clic par défaut) :

## Remarques

* Les liens hypertextes s'affichent de manière standard en bleu souligné, pour les distinguer du texte courant.
* Il est conseillé de faire des liens descriptifs, comme
et non comme
* Lorsque la ressource est un document HTML, le navigateur l'affiche. Lorsqu’il s'agit d’un média quelconque, le navigateur le télécharge.
| Mise en forme du texte | Listes |

# Listes
## Introduction

Les listes peuvent être très utiles pour tout ce qui est énumération, sommaire, menu… En HTML, il existe trois types de listes :
* Les listes non ordonnées
* Les listes ordonnées
* Les listes de définitions

## Les listes non ordonnées

Les listes non ordonnées ou listes à puces sont délimitées par les balises <ul> et </ul>, (ul signifiant unordered list). Chaque élément de la liste est délimité par les balises <li> et </li> (li signifiant LIste entry).
La syntaxe est donc :
Il est à noter que la puce a la même couleur que le texte qui la suit.
Les listes non ordonnées disposent de l'attribut type qui permet de choisir la forme de la puce. Les valeurs possibles sont disc qui affiche un cercle plein comme puce, circle qui affiche un cercle vide comme puce et square qui affiche un carré.

## Les listes ordonnées

Les listes ordonnées ou listes numérotées sont délimitées par les balises <ol> et </ol> (ol signifiant ordered list). Chaque élément de la liste est délimité par les balises <li> et </li> comme pour les listes non ordonnées.
La syntaxe est donc :
Il est à noter que la puce a la même couleur que le texte qui la suit.
Les listes ordonnées disposent de l'attribut type qui permet de choisir le type de numérotation. Les valeurs possibles sont A (le système de numérotation sera les lettres majuscules), a (le système de numérotation sera les lettres minuscules), I (le système de numérotation sera les chiffres romains majuscules), i (le système de numérotation sera les chiffres romains minuscules) et 1 (le système de numérotation sera les chiffres arabes).
Elles disposent également de l'attribut start qui prend pour valeur le numéro (en chiffres arabes) à partir duquel le navigateur doit compter. Par exemple, si l’on entre <ol type="a" start="4">, la numérotation débutera à d.

## Les listes de définitions

Les listes de définitions ou listes de glossaire sont délimitées par les balises <dl> et </dl> (dl signifiant definition list). Chaque élément de la liste est délimité par les balises <dt> et </dt> (dt signifiant definition term) et sa définition est délimitée par les balises <dd> et </dd> (dd signifiant definition description). La syntaxe est donc :
| Liens hypertextes | Éléments de présentation |

# Éléments de présentation
## Introduction

L'attractivité d’un site dépend en grande partie de son ambiance visuelle. Nous allons voir comment mettre un fond d'écran sur votre site et comment inclure des séparateurs horizontaux.

## Les fonds d'écran
### Couleur de fond

L'ajout d’une couleur de fond se fait par l'intermédiaire de l'attribut bgcolor de la balise <body>. La valeur de l'attribut bgcolor est une couleur. Pour plus d'information, sur les couleurs, consultez la table des couleurs.
En fonction de la couleur que vous choisissez, le texte risque de devenir illisible. Pour corriger ce problème, il existe l'attribut text de la balise <body> qui modifie la couleur du texte de la page. La valeur de l'attribut text est une couleur.
Prenons un exemple :
Cet exemple permet d'afficher une page ayant un fond de couleur bleu et le texte « Voilà une page écrite en blanc sur fond bleu » écrit en blanc.

### Une image en fond d'écran

Il est aussi possible d'ajouter une image en fond. Pour cela, on utilise l'attribut background de la balise <body>. La valeur de l'attribut background doit être une adresse qui peut être absolue ou relative.
Il est recommandé d’éviter les images trop lourdes qui augmentent le temps de chargement de la page. Cependant, une fois que l’image est chargée, elle passe dans la cache du navigateur et ne nécessitera plus de temps de chargement pour la session en cours.
Prenons un exemple :

## Les séparateurs horizontaux
### Définition

Le HTML intègre un élément intéressant de mise en page, la ligne horizontale. La ligne horizontale est introduite par la balise <hr> (hr signifie horizontal rule soit règle horizontale). Il n'y a pas de balise fermante associée.
Prenons un exemple :
Cet exemple permet d'insérer une ligne horizontale entre les deux lignes de texte.

### Les attributs

La balise <hr> dispose de nombreux attributs.
L'attribut size permet de définir l'épaisseur de la barre. La valeur de l'attribut size doit être une valeur numérique exprimée en pixels.
L'attribut width permet de définir la largeur de la barre. La valeur de l'attribut width est soit une valeur numérique exprimée en pixels soit une valeur numérique suivie du symbole % et alors la valeur correspond à la largeur de la barre en pourcentage de la fenêtre. On préférera cette deuxième méthode car la largeur de la barre s'adapte ainsi à la taille et à la résolution de l'écran de l'utilisateur.
L'attribut align permet de définir l'alignement de la barre. Les valeurs possibles sont left, center et right.
L'attribut noshade permet d'appliquer ou non un ombrage à la barre.