Introduction au HTML
Internet ne peut fonctionner que dans un cadre normalisé (comme nous tous, d’ailleurs ; mais c’est une autre histoire). Citons par exemple le protocole TCP/IP qui permet d’échanger les informations, les URL (adresses web) ou encore le système DNS qui transforme magistralement un nom de domaine en adresse IP. Cette normalisation de s’arrête pas à la transmission d’informations. Elle concerne aussi sa lecture. En d’autres termes, une page web doit pouvoir s’afficher de la même façon par n’importe quel navigateur, sur ordinateur comme sur smartphone.
Ce n’est pas vérifié à \(100\%.\) Selon les navigateurs il peut y avoir des différences sensibles d’affichage mais cet inconvénient n’est pas l’objet de cette page. L’essentiel est d’avoir un langage qui soit lu par tous les navigateurs. C’est le cas du HTML.
Le HTML
Le HTML (hypertext markup language) est un langage de balisage (ne pas confondre avec un langage de programmation !). Nous expliquerons un peu plus loin ce terme. Sa fonction est descriptive. Mais ce langage sert aussi à créer des liens entre pages.
On situe sa date de naissance en 1992. Après cet heureux évènement, le HTML a évolué et plusieurs versions se sont succédé. L’actuelle est HTML5. Il ne devrait pas y en avoir d’autres.
Il fut question d’abandonner HTML au profit de XHTML mais ce dernier a perdu la bataille en 2009. Précisons qu’il n’y a pas d’énormes différences entre les deux. Le site que vous êtes en train de consulter avait été écrit en XHTML puis est passé au HTML5 quelques années plus tard sans que cela demande un travail de titan.
Le balisage
Le M de HTML signifie Markup, c’est-à-dire balisage.
Les balises sont des éléments de structuration de la page web. La plupart des éléments sont encadrés par une balise de début et une balise de fin. Par exemple, au début d’un paragraphe se trouve la balise ouvrante <p> et à la fin se trouve la fermante </p>. Une balise se présente toujours entre un symbole « inférieur » et un symbole « supérieur ». La balise de fin commence par un slash.
Celle-ci n’est pas systématique : pour un retour à la ligne, une seule balise suffit. En l’occurrence, <br>.
Mentionnons aussi le doctype. Ce n’est pas une balise mais l’instruction située au tout début de la page qui indique au navigateur quelle version de HTML il doit lire. Pour HTML5 il suffit d’écrire <!doctype html>.
HTML est insensible à la casse (au contraire de Python, par exemple). Vous pouvez aussi bien écrire en majuscules <!DOCTYPE html>.
La deuxième instruction d’une page web est <html>. Elle englobe tout le document qui se termine bien sûr par </html>.
Une balise peut contenir un attribut. Par exemple, pour fixer le français comme langue de votre page, la balise définissant le langage devient <html lang = "fr">, la balise de fin étant inchangée. La plupart des balises peuvent se passer d'attribut.
Si l’on excepte ces deux premiers éléments, la page web est divisée en deux parties. La première est l’en-tête (qui ne s’affiche pas) et la seconde est le corps qui apparaît à l’écran.
L’en-tête est défini par la balise <head>. Il comprend le titre (qui s’affiche dans la barre du navigateur), des liens avec d’autres pages (voir plus loin les pages CSS) et diverses métadonnées.
Le corps est défini par la balise <body>. Lui-même est subdivisé, en principe en trois parties : d'abord l'en-tête (à ne pas confondre avec le head) qui comprend notamment un titre et un menu. Balise : <header>. Ensuite vient le corps du texte qui peut lui-même être subdivisé en colonnes. Balise : <main>. À la fin, un pied de page balisé par <footer>.
En résumé :
<!DOCTYPE html><html>
<head> … </head>
<body>
<header> … </header> <main> … </main> <footer> … </footer>
</body>
</html>
Remarquez qu'une balise ouverte après une autre est obligatoirement fermée avant que la première le soit.
À quoi ressemble une page de code ? Avec un ordinateur connecté à Internet, c’est très facile à voir. Faites un clic droit sur la page que vous visitez (dans le texte, pas dans une image) puis, dans le menu contextuel qui s’affiche, choisissez View Page Source ou Afficher le code source de la page ou quelque indication approchante (le texte dépend du navigateur). En revanche, sur smartphone il vous faut télécharger une appli pour goûter ce plaisir. Si vous vous amusez à le faire sur plusieurs sites, vous constaterez que certaines pages sont codées de façon très claire tandis que d’autres sont incompréhensibles !
Les liens hypertextes
Vous avez tous expérimenté le lien hypertexte (le HT de HTML) ou hyperlien. Vous cliquez sur un mot ou un groupe de mots, repérable par une couleur spéciale ou un soulignement, et vous êtes téléporté ailleurs : soit à un autre endroit de la même page, soit sur une autre page du même site, soit sur un autre site (lien externe). Vous pouvez ainsi atterrir sur une page HTML, une image, un fichier PDF, etc.
Pour le code, voir la page sur les hyperliens.
Les images
Une image est un fichier séparé du fichier HTML. Les navigateurs lisent les formats les plus courants (JPEG, PNG, GIF). Plusieurs pages HTML peuvent pointer vers un même fichier image (par exemple un logo).
Exemple de code :
<img src = "Graphes/liens.png" alt = "cartographie" width = "388" height = "176" class = "image">
Cette balise <img> indique nécessairement une adresse avec son chemin d'accès (src). alt précise le nom de l'image, qui n'est pas obligatoire mais fortement conseillé. widht et height sont ses dimensions. class renvoie à la classe CCS image (voir ci-dessous). Notez que cette balise est orpheline (pas de balise fermante).
Hors HTML
Jusqu’au milieu des années 90, HTML suffisait pour coder une page. Mais de nouveaux besoins apparurent : mises en page plus sophistiquées et adaptées à des tailles d'écrans très variables, formulaires, animations… Bref, HTML devenait trop limité.
Aujourd’hui, un langage complémentaire est utilisé pour la mise en forme : le CSS (cascading style sheets).
Les instructions en CSS peuvent figurer sur la même page que sur la page HTML. Cette option se rencontre rarement car l’un des intérêts du CSS est d'être placé dans des fichiers séparés. Ainsi la présentation est écrite une seule fois et s’applique à toutes les pages HTML. Si par exemple vous décidez de changer la couleur du texte d’un site qui comporte cent pages de contenu, vous pouvez le faire en quelques secondes alors que si la couleur du texte figurait dans chaque page, il faudrait toutes les modifier. Il est donc difficile de trouver du CSS en hasardant un clic droit en naviguant sur le web !
JavaScript et PHP sont des langages de programmation. Ils rendent les pages web interactives (notamment pour commander un article sur un site marchand). Pas d’exemple à vous proposer sur ce site qui ne fait décidément aucun effort pour être interactif.
D’autres fichiers peuvent être « appelés » par HTML sans figurer dans la page. Ce sont des photos, des fichiers PDF, des vidéos, etc.
Selon le rendu souhaité par le concepteur du site, le choix peut exister entre un fichier à part ou un codage HTML. Sur ce site, certains tableaux et quelques formules mathématiques sont des images PNG tandis que d’autres sont écrits en code…
Sur ce site, vous pouvez vous atteler à un exercice d'initiation au HTML.