Introduction à HTML

Dans cette partie, nous allons voir l’utilisation de base du HTML. Si vous avez déjà travaillé avec ce langage, n’hésitez pas à sauter ce cours.

Qu’est ce que c’est ?

HTML (pour HyperText Markup Language) désigne un langage de balisage destiné à concevoir des pages Web.

Les fichiers de ce type forment le squelette d’une page Web : les titres, les paragraphes, les images de votre site par exemple. Il est souvent agrémenté de CSS (voir partie "Introduction à CSS") pour styliser cette page.

Structure du langage

HTML repose sur l’utilisation de balises, à l’instar de fichiers XML.

Il existe deux types de balises en HTML :

les balises conteneur, qui commencent avec une balise "ouvrante" <[nom balise]> et se termine toujours par une balise "fermante" </[nom balise]>.
les balises auto-fermantes, qui contrairement aux balises traditionnelles, n’ont pas besoin d’être fermées. Elles ressemblent à cela : <[nom balise] />.

Chaque balise peut contenir un ou plusieurs attributs. Par exemple, une propriété qu’on utilisera plus tard dans le cours permettra d’ajouter une classe à un élément pour en définir son style. On peut donc faire cela :

<p class="bonjour"></p>

Ici par exemple, j’ai défini que mon élément p allait avoir la classe bonjour.

Structure globale d’une page

Un fichier HTML débute toujours par une balise <html> et termine toujours par une balise </html>.

Dans une page Web, on distingue deux parties principales :

la partie "invisible" de votre page, représenté par la balise <head>
la partie "visible", représenté par la balise <body>

Par convention, la partie head est placée avant la partie body. Cela nous donne un fichier qui ressemble globalement à :

<html>

    <head>
        <!-- Votre partie head -->
    </head>

    <body>
        <!-- Votre partie body -->
    </body>

</html>

Dans la partie head, vous retrouvez des éléments qui ne nécessite pas forcément d’être affichés sur la page, comme le titre de votre page (ce qui est affiché en guise de titre sur l’onglet de votre page), l’encodage des caractères (UTF-8, Unicode, ASCII, …).

Dans la partie body, vous trouverez l’ensemble de la structure visible sur votre page.

Mise en place

Pour commencer, il faut créer la structure globale de votre page. On va reprendre celle qu’on a pu voir précédemment.

Si vous utilisez Visual Studio Code/Codium, vous pouvez juste taper ! dans votre éditeur, puis Entrée, pour afficher cette structure.

On y ajoute le titre de la page à l’aide de la balise <title>, ainsi que les métadonnées de la page, comme par exemple l’encodage en UTF-8, à l’aide de la balise <meta>. Notre page ressemble désormais à cela :

<html>

    <head>
        <title>Ma première page</title>
        <meta charset="UTF-8" />
    </head>

    <body>
        <!-- Votre partie body -->
    </body>

</html>

On va désormais l’agrémenter de balises dans le corps de la page.

Corps de la page

Voyons quelques balises utiles en HTML.

Organisation du contenu

Une page HTML est généralement organisée en plusieurs sections afin de séparer clairement les différents éléments du contenu :

La balise <header> définit l’en-tête du document, souvent utilisée pour le logo et la navigation principale.
La balise <main> regroupe le contenu principal de la page, c’est-à-dire les éléments directement liés au sujet du site.
La balise <footer> correspond au pied de page, où l’on place habituellement les informations complémentaires comme les crédits ou les mentions légales.

Titres

Les balises de titre permettent de structurer le contenu par importance.

Les titres sont définis par 6 tailles différentes : <h1> qui désigne le titre principal, tandis que <h6> désigne le titre le plus petit.

<h1>Ceci est un titre !</h1>

Paragraphes

Les balises de paragraphes permettent d’écrire du texte. Ils sont définis par la balise <p>.

<p>Je peux écrire un paragraphe entier dans cette balise, je ne vais pas le faire car nous avons d'autres choses à aborder dans ce cours !</p>

Liens

Les balises de liens permettent de rediriger un utilisateur vers une autre page ou un autre site.

Il existe plusieurs types de liens :

les liens à URL absolue, qui permettent de rediriger vers un autre site Web (exemple 1)
les liens à URL relative, qui permettent de rediriger vers une autre page de votre site local (exemple 2)
les liens d’ancre, qui permettent d’aller sur l’ancre sélectionnée (exemple 3)

<a href="http://google.fr/">Lien de redirection 1</a>
<a href="../page.html">Lien de redirection 2</a>
<a href="#ancre">Lien de redirection 3</a>

Listes

Les balises de listes permettent d’ordonner des éléments dans l’ordre.

On distingue 2 types de listes :

les listes non-ordonnées (à puces)
les listes ordonnées (numérotées)

Voici un exemple pour définir des listes en HTML :

<!-- Liste non-ordonnée -->
<ul>
    <li>Elt 1</li>
    <li>Elt 2</li>
</ul>

<!-- Liste ordonnée -->
<ol>
    <li>Elt 1</li>
    <li>Elt 2</li>
</ol>

Images

Les balises d’image permettent d’afficher des images sur votre site. Elles sont définis par la balise <img>.

Ces balises ont plusieurs paramètres, dont notamment src qui représente la source de l’image (URL d’un site ou locale), et alt qui représente le texte à afficher en cas d’erreur de chargement de l’image (l’image n’existe pas par exemple).

<img src="photo.png" alt="Photo quelconque">

Conteneurisation

Voici sans doute l’une des sections les plus utiles en HTML.

Les balises <div> et <span> permettent de créer des conteneurs, c’est-à-dire des zones dans lesquelles vous pouvez placer du contenu. La différence entre les deux tient à la manière dont elles occupent l’espace :

<div> crée une boîte en bloc : elle s’étend automatiquement sur toute la largeur disponible. Elle commence sur une nouvelle ligne et pousse ce qui suit à la ligne suivante.
<span>, en revanche, crée une boîte en ligne : elle ne prend que la largeur nécessaire au contenu qu’elle contient, et elle s’insère au milieu du texte, sans retour à la ligne.

Lier d’autres langages

Les balises <style> et <script> permettent d’introduire respectivement du code CSS et du code JavaScript dans votre page.

Il existe aussi une autre balise : <link>. Elle permet de faire le lien entre le document courant et des sources externes. Cette balise sert principalement à lier du CSS.

Si vous utilisez Visual Studio Code/Codium, vous pouvez taper link:css dans votre éditeur, puis Entrée, pour avoir la balise <link> déjà prête pour ajouter votre fichier CSS.

<style>
    /* Votre code CSS ici */
</style>

<script>
    /* Votre code JavaScript ici */
</script>

<link href="style.css" rel="stylesheet" /> <!-- Liaison avec du CSS dans un autre fichier -->

Et pleins d’autres

La majorité des balises importantes ont été listées ici, mais il en existe pleins d’autres ! N’hésitez pas à consulter la documentation officielle, elle peut toujours vous être utile.