Ta première page web

Toutes les pages web sont écrites dans le langage HTML, qui consiste à utiliser des balises pour ajouter des éléments aux pages. Par exemple, la balise <p> ajoute un paragraphe, la balise <img> ajoute une image, et la balise <a> ajoute un lien vers une autre page.

Deux autres langages peuvent apparaître sur une page web : le CSS qui définit le style visuel, et le JavaScript qui permet d’ajouter des interactions plus complexes. Même si ces deux langages sont importants, ils sont optionnels, contrairement au HTML qui est la fondation d’une page web : c’est lui qui dicte la structure de la page, le texte qu’elle contient, les titres, les liens, etc.

Pour se rendre compte de l’utilité HTML, rien de tel que de regarder un site qui ne contient que du HTML. C’est le cas du premier site du monde, publié en 1991 par Tim Berners-Lee, l’inventeur du Web.

Comme tu peux le voir, l’apparence est extrêmement simple ! C’est parce que le site ne précise pas de style visuel en CSS. Par défaut, les navigateurs présentent donc le HTML sous cette forme. Tu peux constater que la page contient un titre, des paragraphes, des liens et quelques autres éléments. Dans l’exemple suivant, nous allons utiliser ces mêmes ingrédients pour concocter une première page web.

À vos claviers !

Jette un œil au code HTML ci-dessous. Chaque élément est délimité d’abord par une balise ouvrante (<h1>), puis par une balise fermante qui commence par une barre oblique (</h1>). Les titres principaux sont des <h1> (pour heading), les titres de deuxième niveau sont des <h2>, et ainsi de suite jusqu’à <h6>. Les paragraphes sont des <p>.

L’utilité des paragraphes

Dans ton code HTML, il est tout à fait possible d’écrire du texte directement, sans l’englober dans des balises de paragraphe. Cependant, même si tu écris des retours à la ligne, les textes s’afficheront les uns à la suite des autres. C’est parce qu’en HTML, le texte est un élément en ligne (inline) qui commence sur la même ligne que le précédent.

Pour séparer un texte, tu dois l’englober dans un élément de bloc, qui commence sur une nouvelle ligne. L’élément <p> est justement un élément de bloc.

Pour ajouter un simple retour à la ligne sans créer de nouveau bloc, écris <br /> à l’endroit désiré. Cela peut être utile pour écrire des poèmes ou d’autres textes où il est nécessaire de contrôler l’emplacement des retours à la ligne. Comme <br /> est un élément vide, tu ne peux rien imbriquer à l’intérieur. Il faut donc fermer la balise avec une barre oblique à la fin.

La balise de lien

Les liens sont des <a> (pour anchor) et ont une particularité : il faut ajouter l’attribut href (hypertext reference) pour préciser la destination du lien entre guillemets.

<a href="https://wikipedia.org">Wikipédia</a>

En ajoutant également l’attribut target="_blank", le lien s’ouvre dans un nouvel onglet.

<a href="https://wikipedia.org" target="_blank">Wikipédia</a>

Imbriquer les balises

Les balises HTML peuvent être imbriquées entre elles. Par exemple, tu peux mettre un mot en italique au sein d’un paragraphe avec la balise <em>, ou en gras avec <strong>.

<p>En HTML, on utilise des <em>balises</em> et on les <strong>imbrique</strong>.</p>

Attention : les éléments peuvent être imbriqués mais ne doivent pas se chevaucher. Ceci serait du HTML invalide : <p>En HTML, on utilise des <em>balises.</p></em> Le navigateur tentera quand même d’afficher la page, mais le résultat ne sera pas garanti.

Certaines balises sont faites pour accueillir des éléments imbriqués précis. <ul> représente une liste non ordonnée (unordered list). À l’intérieur, chaque élément de liste est un <li>. Il existe aussi <ol> pour les listes ordonnées (ordered list).

Par défaut, <ol> numérote en chiffres, mais d’autres styles de numérotation (par exemple A, B, C) pourront être choisis via le style CSS.

Exercice final

Utilise les balises que tu as découvertes (<h1>, <h2>, <p>, <em>, <strong>, <ul>, <li>, <a>) pour reproduire cet exemple.

Si tu as besoin de voir la solution, tu peux faire un clic droit sur l’exemple ci-dessus puis « Inspecter l’élément ». Cela ouvre l’inspecteur de ton navigateur, que tu peux utiliser pour examiner le code de tous les sites web.