Skip to content

Langage HTML

Rappel : Accès à l'énoncé

Cette vidéo rappelle comment accéder à l'énoncé d'une activité :

Objectifs

On aborde ici la thématique du Web et particulièrement les princidales notions liées au langage HTML.

Le langage HTML (ou code HTML) est un langage informatique utilisé par les développeurs Web pour concevoir des pages Web.

L'objectif ici est de vous faire découvrir comment le contenu d'une page Web peut être décrit à l'aide du langage HTML.

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>

Ce code est enregistré dans un fichier généralement nommé index.html.

Le rendu de ce fichier index.html dans un navigateur web (comme Firefox) 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 de la page (on parle du corps 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.

Consignes

Consigne à suivre

Vous allez devoir ici décrire le contenu d'une page Web à l'aide du langage HTML.

A l'image des développeurs Web, vous allez utiliser le logiciel (ou IDE) nommé VSCodium pour saisir le code HTML de la page Web que vous allez concevoir.

Création d'un dossier de travail et accès depuis VSCodium

Visionner les vidéos suivantes :

Faire les étapes décrites dans les vidéos :

  • Créer un dossier nommé SNT dans le répertoire u:/devoir/filoe/.

  • Dans ce dossier SNT, créer un dossier nommé 1_Web_HTML.

  • Ouvrir le logiciel VSCodium dont le raccourci est dans le répertoire S:/Dossiers Dossup/SNT/Activités/Activité FILOE/1 - Web/_Divers/ :

  • Depuis le logiciel VSCodium, ouvrir le répertoire u:/devoir/filoe/SNT/1_Web_HTML/ en cliquant sur l'onglet File puis Open Folder :

Répertoire de travail dans VSCodium

Visionner la vidéo suivante :

Faire les étapes décrites dans la vidéo :

  • Dans VSCodium, créer un dossier intitulé Exercice_1_1 en cliquant sur l'icone :

  • Dans VSCodium, dans le dossier Exercice_1_1, créer un fichier nommé index.html en cliquant sur l'icone :

Application

Exercice 1.1

Visionner la vidéo suivante :

Faire les étapes décrites dans la vidéo en faisant un copier-coller du code suivant dans le fichier index.html.

 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>

Dans VSCodium, enregistrer le fichier index.html en appuyant sur les touches CTRL+S.

Ouvrir le fichier index.html avec le navigateur Firefox (en cliquant sur le fichier index.html puis en cliquant sur Reveal in File Explorer).

Dans VSCodium, modifier le code HTML présent dans le fichier index.html afin 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

Visionner la vidéo suivante :

Dans VSCodium, suivre les étapes de la vidéo afin de :

  • Créer un dossier intitulé Exercice_1_2 en cliquant sur l'icone .

  • Dans le dossier Exercice_1_2, créer un fichier nommé index.html en cliquant sur l'icone .

Copier-coller le code HTML ci-dessous dans le fichier index.html :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8"/>
        <title>Ma première page</title>
    </head>

    <body>
        <h1>Sujets</h1>

        <p>Ma première page pourra porter sur :</p>

        <ol>
            <li>L'automobile</li>
        </ol>

        <p>J'hésite encore !</p>
    </body>
</html>

Ouvrir le fichier index.html avec le navigateur Firefox.

A présent, modifier le code HTML présent dans le fichier index.html afin 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>

Application

Exercice 1.3

Dans VSCodium :

  • Créer un dossier intitulé Exercice_1_3 en cliquant sur l'icone .

  • Dans le dossier Exercice_1_3, créer un fichier nommé index.html en cliquant sur l'icone .

Copier-coller le code HTML ci-dessous dans le fichier index.html :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8"/>
        <title>Ma premiere page</title>
    </head>

    <body>
        <h1>Sujets possibles</h1>

        <p>Mon <b>coeur</b> balance, <u>ah</u> ah <i>ah</i> ah !</p>
    </body>
</html>

Ouvrir le fichier index.html avec le navigateur Firefox.

A présent, dans VSCodium, modifier le code HTML présent dans le fichier index.html afin d'obtenir la page web suivante :

Lien hypertexte (absolu)

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

Lien hypertexte absolu

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).

Application

Exercice 1.4

Dans VSCodium :

  • Créer un dossier intitulé Exercice_1_4 en cliquant sur l'icone .

  • Dans le dossier Exercice_1_4, créer un fichier nommé index.html en cliquant sur l'icone .

Copier-coller le code HTML ci-dessous dans le fichier index.html :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8"/>
        <title>Ma premiere page HTML</title>
    </head>

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

Ouvrir le fichier index.html avec le navigateur Firefox.

A présent, dans VSCodium, modifier le code HTML présent dans le fichier index.html afin d'obtenir la page web suivante :

Lien hypertexte (relatif)

Lien hypertexte relatif

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>

Application

Exercice 1.5

Dans VSCodium :

  • Créer un dossier intitulé Exercice_1_5 en cliquant sur l'icone .

  • Dans le dossier Exercice_1_5, créer un fichier nommé index.html en cliquant sur l'icone .

  • Dans le dossier Exercice_1_5, créer un dossier ordinateur en cliquant sur l'icone .

  • Dans le dossier ordinateur, créer un fichier nommé page2.html en cliquant sur l'icone .

Copier-coller le code HTML ci-dessous dans le fichier index.html :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8"/>
        <title>Ma premiere page</title>
    </head>
    <body>
        <h1>Choix du sujet</h1>

        <p>Lien relatif vers la page web <b>page2.html</b> contenue dans le sous-répertoire (nommé <b>ordinateur</b>) du répertoire
        contenant cette page :</p>
    </body>
</html>

Copier-coller le code HTML ci-dessous dans le fichier page2.html :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8"/>
        <title>Ma deuxième page</title>
    </head>
    <body>
        <p>Lien absolu vers la page Wikipédia https://fr.wikipedia.org/wiki/Ordinateur en cliquant <b><a href="https://fr.wikipedia.org/wiki/Ordinateur">ici</a></b>

        <p>Lien relatif vers la première page web <b>index.html</b> : <a href="../index.html">page 1</a></p>
    </body>
</html>

Ouvrir le fichier index.html avec le navigateur Firefox, puis le fichier page2.html. Vous constatez alors que les liens hypertextes ne sont pas présents.

On souhaite obtenir les liens hypertextes suivants :

index.html
page2.html

A présent, dans VSCodium, modifier le code HTML présent dans le fichier index.html de façon à ce que le lien hypertexte vers le fichier page2.html soit fonctionnel.

A présent, dans VSCodium, modifier le code HTML présent dans le fichier page2.html de façon à ce que les liens hypertextes :

  • vers le fichier page2.html ;
  • vers vers la page Wikipédia ;

soient fonctionnels.

Image

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.

Application

Exercice 1.6

Dans VSCodium :

  • Créer un dossier intitulé Exercice_1_6 en cliquant sur l'icone .

  • Dans le dossier Exercice_1_6, créer un fichier nommé index.html en cliquant sur l'icone .

  • Glisser-déposer l'image nsi.png dans le répertoire Exercice_1_6 de VSCodium (l'image nsi.png est située dans le répertoire S:/Dossiers Dossup/SNT/Activités/Activité FILOE/1 - Web/ressources/).

Copier-coller le code HTML ci-dessous dans le fichier index.html :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8"/>
        <title>Ma premiere page</title>
    </head>
    <body>
        <img src="nsi.png" alt="Visuel NSI"/>
    </body>
</html>

Ouvrir le fichier index.html avec le navigateur Firefox.

A présent, dans VSCodium, modifier le code HTML présent dans le fichier index.html afin d'obtenir la page web suivante :

L'image de l'ordinateur pc.png est accessible dans le répertoire S:/Dossiers Dossup/SNT/Activités/Activité FILOE/1 - Web/ressources/.

Exercice 1.7

Dans VSCodium :

  • Créer un dossier intitulé Exercice_1_7 en cliquant sur l'icone .

  • Dans le dossier Exercice_1_7, créer un fichier nommé index.html en cliquant sur l'icone .

  • Dans le dossier Exercice_1_7, créer un dossier ordinateur en cliquant sur l'icone .

  • Dans le dossier ordinateur, créer un fichier nommé page2.html en cliquant sur l'icone .

  • Glisser-déposer l'image pc.png dans le répertoire Exercice_1_7 de VSCodium (l'image pc.png est située dans le répertoire S:/Dossiers Dossup/SNT/Activités/Activité FILOE/1 - Web/ressources/).

En s'appuyant sur l'ensemble des exercices précédents, concevoir les codes HTML des pages index.html et page2.html afin d'obtenir les rendus suivants dans le navigateur Firefox :

index.html
page2.html

Le son

Pour diffuser de la musique ou n'importe quel son, il existe de nombreux formats. La plupart d'entre eux sont compressés ce qui permet de réduire la taille du fichier, quelques exemples :

  • MP3 : c'est l'un des plus vieux, mais aussi l'un des plus compatibles (tous les appareils savent lire les MP3), ce qui fait qu'il est toujours très utilisé aujourd'hui.
  • AAC : utilisé majoritairement par Apple, c'est un format de bonne qualité.
  • OGG: le format Ogg Vorbis est très répandu dans le monde du logiciel libre, notamment sous Linux.
  • WAV: (format non compressé) : évitez autant que possible de l'utiliser dans une page web car le fichier son est très volumineux avec ce format.

Pour des raisons de droit, au moment où cette activité a été écrite, aucun navigateur ne gèrait nativement tous ces formats. La compatibilité native des navigateurs pour le MP3 et OGG était :

  • MP3 : reconnu par Chrome, Internet Explorer et Safari.
  • OGG : reconnu par Firefox, Opéra et Chrome.

Aujourd'hui il est probable que tous les navigateurs interprêtent correctement le mp3. Il est toujours possible de proposer plusieurs versions d'un même fichier son aux divers formats. Le navigateur joue le premier qu'il arrive à lire.

Paire de balises <audio> </audio>

Pour jouer un son sur une page, on utilise la paire de balises <audio> </audio>, par exemple :

<audio src="Le_nom_de_votre_fichier.mp3" controls> </audio>

Vous pouvez ajouter les attributs suivants à une balise audio :

  • controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
  • width : pour modifier la largeur de l'outil de lecture audio.
  • loop : la musique sera jouée en boucle.
  • autoplay : la musique sera jouée dès le chargement de la page. Évitez d'en abuser, c'est en général irritant d'arriver sur un site qui joue de la musique tout seul !

La balise <audio> est de type paires de balises, on peut afficher un texte alternatif pour les navigateurs qui ne peuvent pas lire le fichier. Ceux qui ont un navigateur récent ne verront pas le texte alternatif.

<audio src="Le_nom_de_votre_fichier.mp3" controls> Le navigateur ne peut pas lire ce fichier son </audio>

On peut proposer plusieurs versions d'un fichier audio. Dans ce cas, on va utiliser la balise <source/>.

<audio controls>
<source src="Le_nom_de_votre_fichier.mp3"/>
<source src="Le_nom_de_votre_fichier.ogg"/>
</audio>

A faire: - Ajouter les fichiers sons fournis avec cette activité dans le dossier "Site Root" puis les afficher dans la page web. Vous trouverez les fichiers dans le dossier sons de l'activité.

Exercice 1.8

Ajouter les fichiers sons fournis dans le dossier "Ressources" puis les afficher dans la page index.html de l'exercice 1.7. Vous trouverez les fichiers dans le dossier sons.

La vidéo

Pour stocker une vidéo on a besoin de trois éléments :

  • Un format conteneur : c'est un peu comme une boîte qui va servir à contenir deux autres éléments. On reconnaît en général le type de conteneur à l'extension du fichier : AVI, MP4, MKV… Le conteneur contient :

1- Un codec audio: c'est le format du son de la vidéo. Nous venons de les voir, on utilise les mêmes : MP3, AAC, OGG… 2- Un codec vidéo: c'est le format qui va compresser les images, ces formats ne sont pas libres et on ne peut pas toujours les utiliser gratuitement.

Les principaux codecs vidéos pour le Web sont :

  • H.264 : l'un des plus puissants et des plus utilisés aujourd'hui, il n'est pas 100% gratuit. En fait, on peut l'utiliser gratuitement pour la diffusion de vidéos sur un site web personnel.
  • Ogg Theora : un codec gratuit et libre de droits, mais moins puissant que H.264. Il est bien reconnu sous Linux , sous Windows il faut installer des programmes pour pouvoir le lire.
  • WebM : un autre codec gratuit et libre de droits, plus récent. Proposé par Google, c'est le concurrent le plus sérieux de H.264 à l'heure actuelle.

Paire de balises <video> ...</video>

Il est possible de proposer chaque vidéo dans plusieurs formats pour qu'elle soit lisible avec un maximum de navigateurs, vous utilisez alors la paire de balises <source>... </source> à l'intérieur de la paire de balises <video> ...</video>.

Le navigateur lit le premier qu'il reconnaît :

<video controls>
<source src="votre_fichier_vidéo.mp4" />
<source src="votre_fichier_vidéo.webm" />
<source src="votre_fichier_vidéo.ogv" />
</video>

Les attributs de la balise <video> sont :

  • controls: pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
  • width : pour modifier la largeur de la vidéo.
  • height : pour modifier la hauteur de la vidéo.
  • loop: la vidéo sera jouée en boucle.
  • autoplay: la vidéo sera jouée dès le chargement de la page.

Exercice 1.9

Ajouter les fichiers sons fournis dans le dossier "Ressources" puis les afficher dans la page index.html de l'exercice 1.7. Vous trouverez les fichiers dans le dossier videos.