Hypertext Markup Language, abrégé en HTML, est un langage informatique de balisage conçu pour écrire des pages web, et notamment pour créer de l'hypertexte, d'où son nom.
Il s'agit d'un langage s'attachant à décrire sémantiquement la structure et le contenu d'un document. Cela est obtenu en encadrant chacune des différentes structures du texte par une paire de balises, qui seront biensûr invisibles au moment du rendu du document par le navigateur. Le langage HTML possède aussi des outils avancés pour mettre en page le contenu du document, inclure des ressources multimédias dont des images, des formulaires de saisie, et des applets. Il permet de créer des documents interopérables avec des équipements très variés et de soutenir l'accessibilité du web.
Un fichier HTML est un fichier texte contenant le code. Le fichier doit avoir l'extension .htm ou .html et peut être créé avec un simple éditeur de texte. Vous pouvez à titre d'exemple examiner le code source du présent document.
<html> <head> <title>Titre de la page</title> </head> <body> Contenu de la page. </body> </html> |
La première balise du document HTML est <html>. Elle indique au navigateur le début du document, la fin du document est indiquée par la balise fermante correspondante </html>. Le texte entre les balises <head> et </head> contient les informations d'en-tête du document, comme le titre (<title>), l'auteur (<meta name="author" content="Moi">), la table des caractères utilisés dans le code (la balise <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1"/> indique que le document utilise l'encodage ISO-8859-1 et permet donc les caractères accentués dans le code), etc. Ces informations ne sont pas affichées par le navigateur. Le texte entre les balises <body> est celui qui sera affiché par le navigateur.
Le code HTML peut facilement être généré par des programmes WYSIWYG (what you see is what you get) au lieu d'être écrit à la main dans un fichier texte. Cependant, pour apprendre le langage, il est préférable d'écrire soi-même le code dans un premier temps.
Créer la structure générale d'un document HTML avec pour titre "Exercice de HTML".
Les titres sont définis à l'aide des balises <h1> à <h6>. <h1> definit un titre de 1er niveau, <h6> un titre de 6e niveau. Des espaces sont automatiquement insérés avant et après un titre.
<h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3> <h4>Titre de niveau 4</h4> <h5>Titre de niveau 5</h5> <h6>Titre de niveau 6</h6> |
Titre de niveau 1Titre de niveau 2Titre de niveau 3Titre de niveau 4Titre de niveau 5Titre de niveau 6 |
Les paragraphes sont définis avec la balise <p>. Des espaces sont automatiquement insérés avant et après un paragraphe.
<p>Ceci est un paragraphe.</p> <p>Ceci est un autre paragraphe.</p> |
|
Ceci est un paragraphe. Ceci est un autre paragraphe. |
La balise <br> sert à insérer un saut de ligne à l'endroit où elle est placée. Elle ne doit pas être utilisée pour démarrer un nouveau paragraphe (balise <p>). La balise <br> est une balise vide, il n'existe pas de balise fermante correspondante.
<p>Ceci <br> est un para-<br>graphe avec des sauts de ligne.</p> |
|
Ceci |
Une ligne horizontale est obtenue par la balise vide <hr>.
<hr> |
|
|
La balise de commentaires permet d'insérer un commentaire dans le code source HTML, qui sera ignoré par le navigateur. Cette balise peut être utilisée pour expliquer le code, ce qui permet d'aider à la compréhension lorsque le code est modifié plus tard.
<!-- Ceci est un commentaire --> |
Insérez dans votre document HTML le contenu ci-dessous en plaçant les balises adéquates de titre, de paragraphe et de ligne horizontale.
[niveau1] Exercice de HTML Prénom Nom -------------------------------------------------------------------- [niveau2] Lévorphanol Le /lévorphanol/ (formule brute C_17H_23NO) est, au même titre que la morphine, un *alcaloïde* utilisé en médication pour ses propriétés *analgésiques*. C'est une molécule de synthèse, commercialisée sous le nom de Levo-Dromoran(R). La structure du lévorphanol est la suivante : [image] [niveau2] Groupes 14, 15 et 16 La famille des *cristallogènes* correspond à la 14^e colonne du tableau périodique des éléments. Les *pnictogènes* sont les éléments de la 15^e colonne de la classification périodique des éléments. Le mot pnictogène est issu du grec /pnigein/ signifiant asphyxier ou étouffer. La famille des *chalcogènes*, du grec /chalcos/ signifiant minerais, est formée par la 16^e colonne. Les éléments des groupes 14, 15 et 16 sont donnés dans le tableau suivant : 14 15 16 2 C N O 3 Si P S 4 Ge As Se 5 Sn Sb Te 6 Pb Bi Po
Les balises HTML possèdent des attributs qui fournissent des informations supplémentaires sur l'élément, par exemple l'attribut border de la balise <table> permet de donner la largeur en pixels de la bordure du tableau. Les attributs sont toujours spécifiés avec leur valeur dans la balise ouvrante de l'élément, par exemple <table border="2">. On verra ci-dessous d'autres attributs spécifiques aux balises <a>, <img> et <table>.
La mise en forme des éléments (taille, position, couleur, etc.) peut être ajustée à l'aide des propriétés de style. Par exemple, pour obtenir du texte de couleur rouge, on utilisera la propriété color avec la valeur red (color:red).
Le style peut être défini localement pour n'importe quel élément à l'aide de l'attribut style, auquel on passe les propriétés de style et les valeurs désirées, séparées par des ";". Le style s'appliquera alors uniquement à l'élément concerné.
<h1 style="color:blue;text-align:center">Titre bleu centré</h1> <h1>Titre par défaut</h1> |
Titre bleu centréTitre par défaut |
Lorsqu'on veut modifier globalement la mise en forme du document (par exemple changer le style de tous les titres), le style peut être défini globalement en insérant la définition dans l'en-tête du document à l'aide de la balise <style>. L'exemple suivant met en bleu et centre tous les titres de niveau 1 du document. Voir aussi le code source du présent document pour des exemples de définition globale.
<html>
<head>
<title>Titre</title>
<style type="text/css">
h1 {
color:blue;
text-align:center;
}
</style>
</head>
<body>
<h1>Titre bleu centré</h1>
<h1>Titre bleu centré</h1>
</body>
</html>
|
| Propriété | Description | Valeurs | Exemples |
|---|---|---|---|
| color | Couleur du texte | valeur hexadécimale valeur rgb nom de couleur |
#0000FF rgb(0,0,255) blue |
| background-color | Couleur de fond d'un élément | valeur hexadécimale valeur rgb nom de couleur transparent |
#0000FF rgb(0,0,255) blue |
| font-family | Police de caractères pour un élément | nom de police | times arial courier monospace serif sans-serif |
| font-size | Taille de la police de caractères | dimension | small medium large 12px 5% |
| text-align | Aligne le texte d'un élément | left right center justify |
|
| vertical-align | Alignement vertical d'un élément | top middle bottom |
|
| height | Hauteur d'un élément | dimension | auto 30px 5% |
| width | Largeur d'un élément | dimension | auto 30px 5% |
Les couleurs peuvent être définies par leur nom pour les plus courantes (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, et yellow) ou par un code hexadécimal donnant la composition dans le système RGB (Red Green Blue). La valeur de chaque composante est codée sur 2 octets dont chacun peut prendre une valeur comprise entre 0 et F (en hexadécimal). Le nombre de couleurs disponibles est donc supérieur à 16 millions.
| Couleur | nom | HEX | RGB |
|---|---|---|---|
| black | #000000 | rgb(0,0,0) | |
| red | #FF0000 | rgb(255,0,0) | |
| lime | #00FF00 | rgb(0,255,0) | |
| blue | #0000FF | rgb(0,0,255) | |
| yellow | #FFFF00 | rgb(255,255,0) | |
| cyan | #00FFFF | rgb(0,255,255) | |
| fuchsia | #FF00FF | rgb(255,0,255) | |
| silver | #C0C0C0 | rgb(192,192,192) | |
| white | #FFFFFF | rgb(255,255,255) |
<h1 style="color:blue;text-align:center">Titre bleu centré</h1> <p style="background-color:yellow">Paragraphe avec fond jaune</p> <p style="text-align:justify"> Le texte de ce paragraphe est justifié. Le texte de ce paragraphe est justifié. Le texte de ce paragraphe est justifié. Le texte de ce paragraphe est justifié.</p> <p style="text-align:right"> Le texte de ce paragraphe est aligné à droite. Le texte de ce paragraphe est aligné à droite. Le texte de ce paragraphe est aligné à droite. Le texte de ce paragraphe est aligné à droite.</p> <p style="font-size:40px">Taille de texte 40px</p> <p style="font-family:monospace">Police monospace</p> <p style="font-family:times">Police times</p> <p style="font-family:courier">Police courier</p> <p style="width:120px;height:80px;border-style:solid;"> Paragraphe de taille 120px sur 80px avec bordure.</p> |
Titre bleu centréParagraphe avec fond jaune Le texte de ce paragraphe est justifié. Le texte de ce paragraphe est justifié. Le texte de ce paragraphe est justifié. Le texte de ce paragraphe est justifié. Le texte de ce paragraphe est aligné à droite. Le texte de ce paragraphe est aligné à droite. Le texte de ce paragraphe est aligné à droite. Le texte de ce paragraphe est aligné à droite. Taille de texte 40px Police monospace Police times Police courier Paragraphe de taille 120px sur 80px avec bordure. |
Centrez le titre de niveau 1 de votre document ainsi que vos nom et prénom. Changez la couleur de fond, la couleur des titres, la couleur du texte ainsi que la police et la taille des caractères.
Des balises permettent de changer localement la mise en forme du texte, par exemple en gras ou italique.
| Balise | Description |
|---|---|
| <i> | Texte en italique |
| <b> | Texte en gras |
| <em> | Texte appuyé |
| <strong> | Texte fortement appuyé |
| <big> | Texte plus gros |
| <small> | Texte plus petit |
| <sub> | Texte en indice |
| <sup> | Texte en exposant |
| <code> | Texte de code informatique |
| <pre> | Texte préformatté :
Ce texte est rendu dans une police à chasse fixe et il préserve les espaces et les sauts de ligne |
Mettre en forme le texte de votre document, italique pour le texte entre "/", gras pour le texte entre "*", indice pour le texte après "_" et exposant pour le texte après "^".
Certains caractères comme < ont une signification spéciale en HTML et sont interprétés par le navigateur, ils ne peuvent donc pas être utilisés tels quels dans le code. Pour afficher un signe <, il faut utiliser le code <. Un caractère spécial très commun en HTML est l'espace insécable, obtenu par le code .
| Résultat | Description | Code |
|---|---|---|
| espace insécable | | |
| < | inférieur à | < |
| > | supérieur à | > |
| & | esperluette | & |
| € | euro | € |
| © | copyright | © |
| ® | registered trademark | ® |
Placez si nécessaire des espaces insécables dans votre document (avant les ":") et insérez le caractère "registered trademark" après le nom commercial de la molécule.
Les images sont définies par la balise <img>, qui est une balise vide, c'est à dire qu'elle n'a pas de balise fermante correspondante. Pour afficher une image, il faut utiliser l'attribut src, qui signifie "source". La valeur à indiquer pour l'attribut src est l'URL de l'image à afficher.
L'attribut alt est obligatoire et sert à définir un texte alternatif à l'image. Ceci est par exemple important pour les utilisateurs déficients visuels ou pour ceux qui naviguent en mode texte.
Autres attributs :
<img src="http://upload.wikimedia.org/wikipedia/commons/ thumb/9/90/Levorphanol_2D_skeletal_500px.png/ 200px-Levorphanol_2D_skeletal_500px.png" alt="levorphanol" width="220px"> |
|
|
Insérez une image représentant la structure du lévorphanol à l'endroit indiqué dans votre document.
Les hyperliens ou liens hypertexte permettent de référencer d'autres documents sur le web. On peut ainsi passer automatiquement du document consulté au document lié. Le langage HTML utilise la balise <a> (ancre) pour créer les hyperliens.
Une ancre peut pointer vers une autre page HTML, une image, un fichier son, un film, une adresse mail, etc. La cible de l'ancre est donnée par l'attribut href.
Lien vers une page HTML :
<a href="http://www-ulp.u-strasbg.fr"> Université Louis Pasteur</a> |
| Université Louis Pasteur |
Lien vers une adresse mail :
<a href="mailto:prenom.nom@mail.com"> Prénom Nom</a> |
| Prénom Nom |
L'élément cliquable peut être autre chose que du texte, par exemple une image :
<a href="http://www-ulp.u-strasbg.fr"> <img src="http://www-ulp.u-strasbg.fr/media/img/bando/p-logo-ulp.png" alt="logo ULP"> </a> |
|
L'attribut name peut être utilisé pour nommer une ancre et ainsi créer un label (une sous-adresse) dans le document.
<a name="liens">Liens</a> |
Il est ensuite possible de créer un lien pointant directement vers une section spécifique d'une page, ce qui permet à l'utilisateur d'éviter de faire défiler le texte. Il suffira pour cela de rajouter # et le nom de l'ancre à la fin d'une URL.
<a href="#liens"> aller à la section Liens de ce document</a> |
aller à la section Liens de ce document |
Insérez un lien pointant vers votre adresse email au niveau de vos nom et prénom.
Le langage HTML supporte les listes ordonnées, non-ordonnées et les listes de définitions.
Une liste ordonnée est obtenue avec la balise <ol>. Les éléments de la liste sont introduits avec la balise <li> et sont marqués par des numéros.
<ol> <li>Hydrogène</li> <li>Hélium</li> </ol> |
|
Une liste non-ordonnée est obtenue avec la balise <ul>. Les éléments de la liste sont introduits avec la balise <li> et sont marqués par des points.
<ul> <li>Hydrogène</li> <li>Hélium</li> </ul> |
|
Une liste descriptive est obtenue avec la balise <dl>. Les termes de la liste sont introduits avec la balise <dt> et les définitions correspondantes par la balise <dd>.
<dl> <dt>H</dt> <dd>Hydrogène</dd> <dt>He</dt> <dd>Hélium</dd> </dl> |
|
Créez un sommaire pour votre document en vous inspirant de celui du présent document, c'est à dire sous forme d'une liste non-ordonnée avec des liens internes pointant vers les titres de niveau 2.
Les tableaux sont définis avec la balise <table>. Un tableau est divisé en lignes (balise <tr>), et chaque ligne est divisée en cellules (avec la balise <td>). Une cellule peut contenir différents types de contenu, texte, images, listes, paragraphes, tableaux, etc. Les titres du tableau sont définis par la balise <th>.
<table border="1"> <tr> <th>titre 1</th> <th>titre 2</th> </tr> <tr> <td>ligne 1, cellule 1</td> <td>ligne 1, cellule 2</td> </tr> <tr> <td>ligne 2, cellule 1</td> <td>ligne 2, cellule 2</td> </tr> </table> |
|
La forme générale du tableau peut être contrôlée par les attributs de la balise <table> :
Les attributs de la balise <tr> permettent d'ajuster les propriétés de toutes les cellules de la ligne, comme l'alignement du texte :
Enfin, les attributs de la balise <td> contrôlent les propriétés d'une cellule et sont alors prioritaires sur les attributs de la balise <tr> :
La balise de titre <th> fonctionne de manière similaire à <td> mais le centrage du texte et l'utilisation de caractères gras sont automatiques.
<table cellpadding="4" border="2" width="40%"> <tr align="center"> <td width="25%"></td> <td width="25%">A</td> <td width="25%">B</td> <td width="25%">C</td> </tr> <tr align="center"> <td rowspan="2">1</td> <td align="left">D</td> <td>E</td> <td align="right">F</td> </tr> <tr align="center"> <td>G</td> <td>H</td> <td>I</td> </tr> </table> |
|
Disposez sous forme d'un tableau les éléments des groupes 14, 15 et 16. Modifiez la mise en forme du tableau à l'aide des attributs des balises (border, cellpadding, align, width, bgcolor, etc.).
L'interopérabilité est essentielle en HTML puisque le document peut être consulté par un grand nombre de navigateurs différents (Firefox, Internet Explorer, Opera, etc.) et différents systèmes d'exploitation (Windows, Mac, Linux, etc.). Afin de garantir que le code sera affiché de façon correcte pour tous les utilisateurs, il est donc important de respecter les normes du langage HTML, établies par le World Wide Web Consortium (W3C).
Pour un fichier HTML en ligne, comme le présent document, on peut insérer facilement un validateur de code HTML sous forme de lien. Lorsqu'on clique sur l'image ci-dessous, le validateur indique si le code de la page est correct et liste les erreurs dans le cas contraire. Au dela du respect des normes, la validation permet aussi de découvrir des erreurs courantes comme les oublis de fermeture de balises, etc.
<a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31px" width="88px"></a> |
Pour que la validation automatique fonctionne, il faut également préciser au début du document quelle norme HTML précise on veut respecter, par exemple pour ce document, il s'agit de HTML 4.01 Transitional.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
Si le document HTML n'est pas en ligne, on peut tout de même valider le code en fournissant le fichier au validateur à l'adresse suivante :
http://validator.w3.org/#validate_by_upload
On peut également valider le style du document :
Validez le code de votre document HTML et corrigez les erreurs éventuelles.
Ce document d'initiation à HTML s'inspire des tutoriels du W3C disponibles à l'adresse http://www.w3schools.com. On trouve également à cette adresse des listes de commandes auxquelles on pourra se référer.