Skip to content

Langage HTML

Objectifs

On aborde dans ce cours/activité les principales notions liées au langage HTML.

Consignes

Consigne à suivre

jsfiddle.net : pour un travail en ligne sur des petits projets

Pour un travail en ligne, sur des petits projets, vous pouvez utiliser le site jsfiddle.net en cliquant ici pour tester vos codes HTML/CSS.

Regardez la vidéo explicative associée en cliquant ici.

Pensez à sauvegarder régulièrement le projet en cliquant sur le bouton Save. La première fois que vous le faîtes, vous obtenez alors une nouvelle adresse URL avec un code.

Pour chaque question :

  • ajoutez cette adresse à votre compte-rendu et assurez-vous qu’elle fonctionne avant de poursuivre ;
  • ajoutez aussi une capture d'écran du fiddle dans votre compte-rendu pour plus de sécurité.

Pour chaque nouvelle question, créez un nouveau fiddle, sauvegardez-le et référencez-le dans votre compte-rendu.

replit.com : pour un travail en ligne sur des projets plus ambitieux

Pour un travail en ligne, sur des projets comportant plusieurs fichiers, vous pouvez utiliser replit.com en cliquant ici pour tester vos codes HTML/CSS.

Pour utiliser replit.com, vous devez créer un compte et créer un projet HTML/CSS pour chaque question :

Pour chaque question :

  • ajoutez l'adresse URL du projet à votre compte-rendu et assurez-vous qu’elle fonctionne avant de poursuivre ;
  • ajoutez aussi une capture d'écran de la page replit.com dans votre compte-rendu pour plus de sécurité.

Pour chaque nouvelle question, créez un nouveau projet.

VSCodium : pour un travail en local sur des projets plus ambitieux

Pour un travail en local, sur des projets comportant plusieurs fichiers, vous pouvez utiliser l'IDE VSCodium en enregistrant un répertoire par projet contenant les fichiers HTML/CSS du projet.

Regardez la vidéo explicative associée en cliquant ici.

Si besoin, pour chez vous, VSCodium est téléchargeable ici.

Le langage HTML

Définition

L'HTML, pour "HyperText Markup Language" (langage balisé hypertexte) est un langage permettant de décrire le contenu et la structure d'une page web.

Code HTML minimal

Définition

Au minimum, une page décrite en HTML comporte le code suivant :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!doctype html>

<html lang="fr">

    <head>
        <meta charset="utf-8"/>
        <title>Titre de la page</title>
    </head>

    <body>
        Contenu de la page
    </body>

</html>
Le rendu par le navigateur est le suivant :

La structure de la page est donnée par des balises (nommées balises HTML) qui sont une suite de caractères entre chevrons <...>. Les noms de balise sont toujours écrits en minuscule.

Balise doctype

Le code d'une page web doit commencer par le doctype spécifiant les règles d'écriture du code HTML saisi (le doctype <!doctype html> est celui de l'HTML dans sa version 5).

Balise html

La deuxième ligne est constituée de la balise ouvrante <html> et la dernière de la balise fermante </html> afin de délimiter le code HTML (devant respecter les règles imposées par le doctype).

La balise html doit contenir l'attribut lang (ici de valeur fr) afin de spécifier la langue utilisée dans les zones de texte (ceci permettra de profiter notamment des outils de traduction).

Balise head

Les balises ouvrantes et fermantes <head> </head> délimitent l'entête de la page HTML et permet, à minima, de spécifier le titre de la page (dans l'onglet) à l'aide des balises <title> </title>.

Ici l'ajout de la balise orpheline <meta charset="utf-8"/> permet d'indiquer l'encodage utilisé pour les caractères (ici utf-8).

Balise body

Le contenu (on parle du corps de la page) de la page (ce qui sera visible dans la page) est ajouté entre les balises <body> </body>.

Attention

Les balises <head> </head> et <body> </body> ne peuvent être présentes qu'une seule fois dans la page HTML.

Type de balise

  • En absence de slash /, on parle de balise ouvrante, exemples :

    <html lang="fr"> <head> <title> <body>

  • En présence de slash /, on parle de balise fermante, exemples :

    </html> </head> </title> </body>

  • Si la balise est de la forme <.../>, on parle de balise orpheline, exemples :

    <meta charset="utf-8"/> <img ..../> <br/>

Balise et notion d'attribut

  • Dans la balise <meta charset="utf-8"/>, charset est un attribut de la balise meta.

  • De la même manière, dans la balise <html lang="fr">, lang est un attribut de la balise html permettant spécifier la langue utilisée dans la page. La valeur des attributs est une chaîne de caractères.

Application

Exercice 1.1

Concevoir une page HTML permettant d'obtenir la page web suivante :

Les balises de base

Toutes les balises décrites ci-dessous doivent être placées dans l'élément body de la page HTML.

Titre de section

Les balises <h1> </h1> (et h2, h2, ... , h6) délimitent un titre de section selon 6 niveaux de titre.

1
2
3
4
<h1>La NSI</h1>
<h2>J'adore cela !</h2>
<h2>Mais j'aime aussi...</h2>
<h1>En résumé</h1>

Paragraphe

Les balises <p> </p> délimitent un paragraphe.

1
2
3
4
5
6
<p>La NSI c'est de la
    poésie !</p>
<p>Les mathématiques
    c'est sympathique !</p>
<p>Les sciences de l'ingénieur
    me donnent du baume au cœur.</p>

Liste non énumérée

Les balises <ul> </ul> délimitent des listes non énumérées d'éléments placés entre balises <li> </li>.

1
2
3
4
5
<ul>
    <li>NSI</li>
    <li>Mathématiques</li>
    <li>Sciences de l'ingénieur</li>
</ul>

Liste énumérée

Les balises <ol> </ol> délimitent des listes énumérées d'éléments placés entre balises <li> </li>.

1
2
3
4
5
<ol>
    <li>NSI</li>
    <li>Mathématiques</li>
    <li>Sciences de l'ingénieur</li>
</ol>

Application

Exercice 1.2

Concevoir une page HTML permettant d'obtenir la page web suivante :

La balise Table

Il est possible d'organiser le contenu d'une page.

Table

L'élément table permet d'organiser du texte dans un tableau à deux dimensions.

Les balises <tr> </tr> contenues dans l'élément table permet de décrire une ligne de la table.

Les balises <td> </td> contenues dans l'élément tr permet de décrire une case de la ligne.

Les cases peuvent si besoin être fusionnées en spécifiant un attribut à la balise <td> :

  • rowspan="x" : fusion de la case sur x cases en ligne ;
  • colspan="y" : fusion de la case sur y cases en colonne.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<table>
    <tr>
        <td rowspan="2">Choix</td>
        <td>NSI</td>
        <td>Maths</td>
        <td>SI</td>
    </tr>
    <tr>
        <td colspan="3">Mon coeur balance, ah ah ah ah !</td>
    </tr>
</table>

Application

Exercice 1.3

Concevoir une page HTML, en utilisant les balises <table> ... </table> <tr> ... </tr> <td> ... </td> permettant d'obtenir la page web suivante :

Eléments de type inline ou block

Les éléments d'une page sont classifiés en deux types.

Les éléments de type block vu précédemment :

Type block

Les éléments de type block occupent toute la largeur de son conteneur et sont espacés d'un saut de ligne avec le bloc suivant.

Exemples d'éléments de type block : h1, p, div, etc..

Et les éléments de type inline :

Type inline

Les éléments de type inline apparaissent à la suite de la ligne en cours sans occuper toute la largeur de son conteneur.

Exemples d'éléments de type inline : img, a, span, etc...

Balises de texte

Parmi les balises de type inline, on trouve les balises de texte :

Texte

Les balises de texte permettent de modifier le visuel du texte. Quelques exemples :

Balise Visuel du texte
<b>...</b> Texte en gras
<u>...</u> Texte souligné
<i>...</i> Texte en italique
<br/> Saut de ligne 

1
2
Mon <b>coeur</b> balance,<br/>
<u>ah</u> ah <i>ah</i> ah !</td>

Lien hypertexte

La balise orpheline d'ancragea (lien hypertexte) est aussi une balise de type inline :

Lien hypertexte

Une page HTML se caractérise par le fait qu'elle peut renvoyer vers d'autres pages HTML via des liens hypertextes.

Les balises <a> </a> (comme ancre) permettent s'insérer un lien hypertexte dans une page HTML :

1
<a href="https://www.ac-aix-marseille.fr/">Lien hypertexte vers la page ac-aix-marseille.fr</a>

Ici le lien pointe vers l'adresse web https://www.ac-aix-marseille.fr/ (on parle de lien absolu).

L'attribut href permet de spécifier l'emplacement de la page ou de la ressource à atteindre.

Le texte contenu entre les balises est le texte d'affichage du lien (ce texte à un style coloré et souligné par défaut).

Considérons l'arborescence suivante pour notre site :

1
<a href="page2.html">Lien hypertexte vers la page 2</a>

Le fichier page2.html se trouve ici dans le même répertoire que la page index.html. On parle ici de lien relatif.

La page 3 est contenue dans un sous-répertoire (nommé dossier) du répertoire contenant la page index.html.

Le code à ajouter dans la page index.html est :

1
<a href="dossier/page3.html">Lien hypertexte vers la page 3</a>

La page 4 est contenue dans un sur-répertoire du répertoire contenant la page 1.

Le code à ajouter dans la page index.html est :

1
<a href="../page4.html">Lien hypertexte vers la page 2</a>

La balise image est aussi de type inline :

Image

La balise orpheline <img .../> permet d'afficher une image dans la page.

1
<img src="nsi.png" alt="Visuel NSI"/>

L'attribut src permet de spécifier l'emplacement du fichier image.

L'attribut alt permet de spécifier un texte alternatif s'affichant uniquement dans le cas ou l'emplacement du fichier image est inaccessible.

Il existe beaucoup d'autres balises (voir ici par exemple), ce cours ne se veut volontairement pas exhaustif, car le programme de NSI ne l'impose pas.

Application

Exercice 1.4

Concevoir les pages web suivantes (lien vers l'image de l'ordinateur ici)

Les balises de structure

Les balises neutres de structure <div> </div> et <span> </span> servent à regrouper des éléments pour leur appliquer un style visuel (vous verrez cela dans le chapitre suivant sur le langage CSS).

Elément div de structure

  • L'élément div associé aux balises <div> </div> est un élément dit neutre (sans rôle particulier) de type block. On dit que les balises <div> </div> sont des balises de structure.

Elément span de structure

  • L'élément span associé aux balises <span> </span> est un élément dit neutre (sans rôle particulier) de type inline. Les balises <span> </span> sont aussi des balises dites de structure.

Les balises structurantes de l'HTML5

On peut noter la présence, depuis l'HTML 5, de balises permettent de mieux structurer une page :

Balises Détails
<main> </main> Contenu principal du body
<section> </section> Section générique regroupant un même sujet
<header> </header> Section d'introduction d'une section ou du document entier (en-tête de page)
<footer> </footer> Section de conclusion d'une section (pied de page) 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Page HTML </title>
    </head>
    <body>
        <header>
            <h1> Entête </h1>
            <nav> 
                <a href="page1.html"> page 1</a>
                <br/>
                <a href="page2.html"> page 2</a>
            </nav>
        </header>
        <main>
            <section>
            <h2> Section 1 </h2>
            <p> Bla bla bla </p>
            </section>

            <section>
            <h2> Section 2 </h2>
            <p> Blo blo blo </p>
            </section>
        </main>
        <footer> 
            Pied de page
        </footer>
    </body>
</html>