Table des matières
Initiation à HTML
Bref historique
HyperText Markup Language est une des trois inventions à la base du World Wide Web, avec le HyperText Transfer Protocol et les adresses web.
Un hypertexte est un document ou un ensemble de documents contenant des unités d'information liées entre elles par des hyperliens.
HTML a été inventé pour permettre d'écrire des documents hypertextuels liant les différentes ressources d’Internet.
En 1991, Tim Berners-Lee – ci-contre – un informaticien britannique travaillant au CERN, annonce publiquement le web et donne le lien d'un document .html
.
En 2021, nous en sommes à la version 5 de HTML.
Langage à balise interprété
Le HTML est un langage descriptif. C'est à dire qu'il se contente de décrire l'apparence du résultat mais qu'il ne donne pas lieu à une exécution d'instructions.
Un fichier .html
est un simple fichier texte. À l'aide de balises il indique les éléments de mise en forme. Quand on ouvre le fichier avec un éditeur de texte, on voit les balises telles qu'elles sont écrites dans le fichier.
Un navigateur – Firefox, Chrome, Safari… – à l'ouverture du fichier, interprète ces balises ce qui modifie l'apparence du texte.
La plupart des balises fonctionnent comme des parenthèses : balise ouvrante, balise fermante.
Page élémentaire
Contenu d'un fichier .html
élémentaire.
<!DOCTYPE html> <html> <head> <!-- la zone head = entête permet de préciser la configuration de la page --> <title>Titre de la page</title> </head> <body> <!-- corps = contenu de la page --> </body> </html>
Les indentations ne sont pas indispensables.
block et inline
Dans un document .html
, les retours à la ligne sont ignorés et en l'absence de balises, tout le contenu apparaîtrait à la suite, sans retour à la ligne. Dans cette perspective, on distingue deux types de balises :
- Les balises de type block qui forment un paragraphe. Elles commencent sur une nouvelle ligne et quand elles se terminent on revient en début de ligne.
- Les balises de type inline qui ne font pas revenir à la ligne.
Par exemple, si je veut mettre des mots en gras, c'est un élément de mise en forme qui nécessite une paire de balises, mais je ne veux pas que ces balises fassent revenir en début de ligne. C'est un cas inline.
Les balises ont un fonctionnement par défaut, soit block, soit inline. Mais tout est modifiable.
Les balises
Les commentaires
<!-- Début d'un commentaire qui peut s'étaler sur plusieurs lignes... Fin du commentaire -->
Le charset
Dans un fichier texte, les caractères sont codés avec un code – Voir cours. Comme un fichier internet peut être vu dans le monde entier et que les caractères des différents pays peuvent être très différents, il est important de préciser l'encodage utilisé. En Europe on utilisera le plus souvent UTF8.
<meta charset="UTF-8"> <!-- à placer dans <head> -->
Retour à la ligne
En général, on ne devrait pas en avoir besoin. On peut utiliser des éléments de type block et des marges.
Si on a besoin de laisser un espace vertical, il est plus rigoureux d'utiliser des marges plutôt que de sauter des lignes. Cela est également vrai pour un document de traitement de texte comme Word.
<br/>
Titres
Balises de type block
<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>
Mises en forme élémentaires
Balises de type inline
<b>Texte en gras</b> <i>Texte en italique</i>
Paragraphes
Élément standard permettant de former proprement les paragraphes de texte sans recours à <br/>
.
<p>mon paragraphe...</p>
Blocs génériques
Il peut être utile de délimiter une zone pour lui appliquer une mise en forme personnalisable ou pour identifier la zone.
<span>...</span> <!-- balise générique inline --> <div>...</div> <!-- balise générique block -->
Liens hypertextes
<a href="adresse du lien">Texte d'un lien hypertexte</a> <img src="adresse de l'image" >
Listes à puces
<ul> <li>Un item</li> <li>Un autre item</li> </ul>
Listes numérotées
<ol> <li>Un item</li> <li>Un autre item</li> </ol>
Tableaux
<table> <!-- Début table --> <tr> <!-- Début d'une ligne --> <td>Une cellule</td> <td>Une autre cellule</td> </tr> <tr> <!-- Une autre ligne --> ... </tr> </table>
Styles
Pour ajouter des couleurs, des marges, des cadres… on utilise les styles CSS Cascading Style Sheets.
Il existe beaucoup d'options CSS. Le mieux est d'aller voir sur une Référence chaque fois que nécessaire.
Les éléments de style CSS peuvent être indiqués de diverse façons.
Méthode 1 : au niveau des balises
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Illustration méthode 1</title> </head> <body style="width=80%;"> <p style="font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px;">Petit bloc de texte comme exemple.</p> <p style="font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px;">Autre bloc de texte comme exemple.</p> <p style="font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px; color:#FF0000;">Autre bloc de texte mais écrit en couleur.</p> </body> </html>
Cette méthode est mauvaise :
- rend le code HTML très embrouillé, très peu lisible : on a du mal à trouver le contenu au milieu des éléments de styles,
- répète de nombreuses fois la même chose puisque tous les paragraphes seront stylés de la même façon,
- risque de rendre l'affichage inhomogène : si on se trompe d'une balise à l'autre, elles pourront avoir un style différent ce qui n'est pas rigoureux,
- d'une façon général, il faut séparer fond et forme.
Méthode 2 : Les styles regroupés dans le head
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Illustration méthode 1</title> <style type="text/css"> body { width:80%; } p { font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px; } p.encouleur { color: #FF0000; } </style> </head> <body> <p>Petit bloc de texte comme exemple.</p> <p>Autre bloc de texte comme exemple.</p> <p class="encouleur">Autre bloc de texte mais écrit en couleur.</p> </body> </html>
Cette méthode est déjà meilleure : elle est beaucoup plus lisible.
- Le style défini en ligne 8 s'applique à tous les éléments de type
<p>
, - le style en ligne 14 s'applique à tous les éléments de type
<p>
ayant la classeencouleur
- En lignes 18 et 19, les balises
<p>
se voient affecter le style de la ligne 8 - En ligne 20, la balise
<p>
a la classeencouleur
. Le bloc se verra affecter les styles des lignes 8 et 14.
Méthode 3 : Fichier CSS à part
On commence par définir un fichier CSS :
/* Fichier styles.css */ body { width:80%; } p { font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px; } p.encouleur { color: #FF0000; }
Et on fait le lien vers ce fichier dans le HTML :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Illustration méthode 1</title> <link rel="stylesheet" href="styles.css"> </head> <body> <p>Petit bloc de texte comme exemple.</p> <p>Autre bloc de texte comme exemple.</p> <p class="encouleur">Autre bloc de texte mais écrit en couleur.</p> </body> </html>
C'est la meilleure option :
- Le graphiste s'occupe de créer les styles et il les rassemble dans le fichier CSS,
- Celui qui écrit le contenu se contente de faire référence au fichier CSS et il a la garantie que le styles sera toujours homogène,
- On peut récupérer des styles tout fait.
Une même balise peut recevoir plusieurs classes CSS en même temps.