Aller au contenu

Les bases de HTML⚓︎

Une première page web⚓︎

La page la plus basique possible

Pour faire une page web, il suffit d'utiliser un éditeur de texte et de créer un fichier HTML. Pour cela, nous allons utiliser Notepad++.

Lorsque l'on enregistre un fichier avec une extension .html et qu'on l'ouvre ce fichier avec un navigateur comme Firefox ou Chrome, ce fichier est interprété comme une page HTML et le résultat est affiché.

Exercice 1
  1. Lancez Notepad++ sur l'ordinateur et écrivez Bonjour ! dedans.
  2. Enregistrez le fichier dans vos documents et appelez-le premiere_page.html.
  3. Ouvrez ce fichier avec Firefox en double-cliquant sur le fichier dans l'explorateur de Windows ou dans un nouvel onglet de Firefox puis en faisant Ctrl＋O.
  4. Si tout se passe bien vous devriez voir Bonjour ! s'afficher dans le navigateur. Bravo, vous avez fait votre première page web.
Bon, ok, ce n'était pas vraiment du HTML

Cette page est vraiment minimaliste et n'est pas vraiment du HTML (HyperText Markup Language). Ce langage permet de décrire la page. On ne programme pas en HTML. On ne fait qu'indiquer quelle est la structure du document. Chaque élément est défini à l'aide de balises.

Les balises sont de deux formes : <nom_de_balise> pour ouvrir une balise et </nom_de_balise> pour la fermer. Tout se qui se trouve entre ces deux balises aura les propriétés correspondantes.

Par exemple la balise <i> permet de mettre en italique. Donc tout ce qui sera entre <i> et </i> sera en italique.

Quand on ouvre plusieurs balises à la suite, il faut fermer le dernière ouverte avant de fermer la première, comme pour des parenthèses. En clair :

  • Oui : <balise1><balise2>...</balise2></balise1>
  • Non : <balise1><balise2>...</balise1></balise2>

Il est également possible de rajouter des paramêtres dans la balise ouvrante, comme nous le verrons plus tard.

Nous allons adopter une structure plus classique. Une page HTML est généralement composée de deux partie : l'entête <head>...</head> et le corps <body>...</body>. On indique également que le fichier contient du HTML à l'aide de la première ligne <!DOCTYPE html> et le reste du document est entre deux balises <html>...</html>.

Un fichier HTML a donc la structure suivante :

<!DOCTYPE html>
<html>
    <head>
        La tête de la page.
    </head>
    <body>
        Le corps de la page.
    </body>
</html>

Et bien entendu, une page n'a qu'une seule tête et un seul corps.

Dans les exercices suivants, nous allons régulièrement modifier la page et il faut bien faire attention à bien modifier la tête ou le corps comme indiqué, sans rajouter une nouvelle tête ou un nouveau corps.

Exercice 2

  1. Enlevez le contenu de votre fichier et le remplacer par le suivant :

    Nouveau contenu de `premiere_page.html`
    <!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        Bonjour !
    </body>
</html>

  2. Rechargez la page avec la touche F5.

Le résultat devrait être le même, mais au moins, la structure de la page va permettre d'aller plus loin.

Une tête bien pleine⚓︎

L'en-tête de la page

En fait, on ne dit pas tête pour une page HTML mais plutôt en-tête. Cet en-tête permet de définir certaines propriétés de la page, qui ne correspondent pas vraiment au contenu affiché dans la fenêtre :

  • le nom de la page (celui qui s'affiche en haut de la fenêtre du navigateur) avec la balise <title> ;
  • le type d'encodage utilisé avec la balise <meta>. C'est une balise spéciale qui est ouvrante et fermante. Elle permet d'éviter que les caractères accentués soient mal affichés ;
  • la feuille de style, pour changer l'aspect de la page, mais nous verrons ça plus tard.

Quasiment toutes nos pages contiendront l'en-tête suivant :

En-tête minimaliste
    <head>
        <title>Titre de la page</title>
        <meta charset="utf-8">
    </head>
Exercice 3
  1. Rajoutez <meta charset="utf-8"> dans l'en-tête de votre fichier.
  2. Rajoutez le titre Une page éclatée !.

Sur un corps sain⚓︎

Le corps de la page

Le corps est la partie la plus importante puisqu'il contient tout ce qui sera affiché par le navigateur. Dans cette partie, vous ne modifierez que ce qui se trouve entre les deux balises <body> et </body> dans votre fichier.

Une page basique s'articule à l'aide de titres et de blocs de texte. Les titres sont définis à l'aide des balises <h1> (gros titre), <h2> (un peu moins gros titre), jusqu'à <h6> (tout petit titre).

Plein de titres
    <body>
        <h1>Un gros titre</h1>
        <h2>Un moins gros titre</h2>
        <h3>Un titre moyen</h3>
        <h4>Un petit titre</h4>
        <h5>Un très petit titre</h5>
        <h6>Un très très petit titre</h6>
        Bonjour !
    </body>

Exercice 4

Rajoutez les différents titres dans le corps de votre fichier pour voir leur taille.

Mise en page du texte

Nous allons maintenant voir comment structurer du texte.

Contrairement à Python, les indentations ne sont pas obligatoires en HTML. En fait, elles ne changent rien au rendu final.

D'ailleurs, la mise en page du fichier n'a aucun impact sur le rendu final.

Exercice 5

Rajoutez les lignes suivantes dans le corps de votre fichier et regardez le résultat :

        <h1>Bonjour tout le monde</h1>
        J'adore faire du HTML.

        C'est trop facile.

Vous pouvez supprimer les autres lignes du corps du fichier. Il faut juste garder les balises <body> et </body>

Faire des paragraphes

On peut remarquer que les deux lignes de textes se retrouvent à côté l'une de l'autre. C'est parce que dans le code HTML, les sauts de lignes du fichier ne sont pas répercutés dans la page.

Si on veut faire deux paragraphes différents, il faut utiliser la balise <p> :

Exemples de paragraphes
        <h1>Bonjour tout le monde</h1>
        <p>J'adore faire du HTML.</p>
        <p>C'est trop facile.</p>
Exercice 6

Modifiez le fichier avec les lignes de l'exemple précédent dans le corps de votre fichier et regardez le résultat.

De vrais sauts de ligne

On peut également rajouter des saut de lignes avec la simple balise <br> qui est auto-fermante. Mais cette balise n'est pas conseillée parce qu'elle ne permet pas de contrôler la mise en page aussi finement que la balise <p>.

Un saut de ligne
Une ligne<br>Une autre ligne
Exercice 7

Faites l'exercice 1 de la feuille.

Faire des blocs⚓︎

Les blocs génériques

Afin de simplifier la mise en page, au delà des paragraphes, il est possible d'utiliser des blocs génériques contenant plusieurs sous-éléments. Pour cela on utilise principalement la balise <div>. Cela permet ensuite d'appliquer un style particulier à ce bloc, comme nous le verrons plus tard.

Un exemple de bloc
<div>
    <h1>Titre dans le bloc</h1>
    <p>Texte dans le bloc</p>
</div>

Les blocs <div> se mettent les uns en dessous des autres.

Si au contraire, on veut rester sur la même ligne, tout en mettant un style particulier, on peut utiliser la balise <span>.

Un bloc en ligne
<p>Début de la ligne <span>toujours la même ligne</span> fin de la ligne</p>
Les blocs particuliers

Si on veut structurer un peu mieux la page, il existe d'autes balises de type bloc comme <header> pour le haut du document, <section> pour le contenu et <footer> pour le bas de la page.

Pour que ces blocs soient pertinents, il faut utiliser du code CSS, comme nous le verrons plus loin.

Listes de listes⚓︎

Faire des listes

Parfois, il est pratique de faire des listes d'éléments. Pour cela il faut utiliser <ul> pour commencer la liste et <li> pour chaque éléments.

Des listes et des sous-listes
<ul>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
    <li>Troisième élément</li>
    <ul>
         <li>Sous-élément</li>
         <li>Encore un</li>
    </ul>
</ul>
Exercice 8

Rajoutez les listes de l'exemple précédent dans le corps de votre fichier et observez le résultat.

Des listes numérotés

On peut aussi numéroter les éléments d'une liste en remplaçant <ul> par <ol>.

Exercice 9

Dubliquez le bloc de listes et remplacez <ul> par <ol>.