Le Web - Première NSI

Bulle de dialogue

Bonjour, je m'appelle Pascale D. Bob.

Merci aux Terminales de m'avoir trouvé un nom.

Entrons dans le monde des sciences du numérique !

A la découverte de l'informatique !

Un jour, je serai le roi du Python !

Revenons sur la page d'accueil.

Où veux-tu aller ?

bannière clavier
⇡

Chapitre 5 - Le Web

Le World Wide Web est un système hypertexte public fonctionnant sur Internet créé dans les années 1989-90.


2 - HTML - Débuter son site Web

2.1. Les principales balises

2.2. Créer une page Web

2.3. Exercice



Revenir au menu principal




2 - HTML - Débuter son site Web


2.1. Les principales balises

La structure d'une page Web

Le squelette d'une page Web est toujours constitué des balises suivantes :

Code HTMLUtilité
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> </head> <body> </body> </html>
html
head
Les métadonnées de la page Web
body
Le contenu de la page

La balise html comprend deux balises : la balise head et la balise body.

La balise head comprend toutes des balises de métadonnées : meta, title, link, ...

La balise body comprend toutes des balises de contenu, tout ce que les utilisateurs et utilisatrices verront.

Les métadonnées

Deux balises de métadonnées sont indispensables dans une page Web :

Code HTMLUtilité
<meta charset="UTF-8"> Cette balise de métdadonnée indique l'encodage du texte de la page. Ici, l'encodage est l'UTF-8.
Code HTMLUtilité
<title>...</title> Cette balise donne un titre à la page.
Ce titre sera affiché dans l'onglet du navigateur, dans l'historique et dans les favoris.

Les titres principaux et les titres de parties/sections

Il existe 6 balises de titre :

Code HTMLAffichage
<h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3> <h4>Titre de niveau 4</h4> <h5>Titre de niveau 5</h5> <h6>Titre de niveau 6</h6>

Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5
Titre de niveau 6

Exemple d'utilisation :

Code HTMLAffichage
<h1> Titre principal </h1> <h2> Partie A </h2> <h3>Sous-partie 1 </h3> <h3>Sous-partie 2 </h3> <h2> Partie B </h2>

Titre principal

Partie A

Sous-partie 1

Sous-partie 2

Partie B

Les paragraphes

Sur une page Web, il ne faut jamais que du texte soit écrit sans être dans une balise HTML.

Pour écrire du texte simple, on utilise la balise de paragraphe p

Code HTMLAffichage
<p>Le paragraphe n°1.</p> <p>Le paragraphe n°2.</p> <p>Le paragraphe n°3.</p>

Le paragraphe n°1.

Le paragraphe n°2.

Le paragraphe n°3.
Code HTMLAffichage
<p> Le contenu de ce long paragraphe est écrit sur plusieurs lignes. Avec des tabulations partout !! </p>

Le contenu de ce long paragraphe est écrit sur plusieurs lignes. Avec des tabulations partout !!

Comme vous pouvez le voir, les retours à la ligne dans une balise p n'ont aucun impact lors de l'affichage.

Si un paragraphe est trop long par rapport à la taille de l'écran, il retourne automatiquement à la ligne.

Les images

Code HTMLUtilité
<img src="lien" alt="description"> L'attribut src contient le lien vers l'image à afficher.

L'attribut alt est un texte alternatif qui s'affichera si l'image n'est pas trouvée.

Exemple :

Code HTMLAffichage
<img src="logo.png" alt="le logo du site"> logo du site

Exemple où l'image ne s'affiche pas :

Code HTMLAffichage
<img src="yoda.png" alt="bébé yoda"> bébé yoda

Note : L'attribut alt sert aussi pour les logiciels des personnes malvoyantes.

Les liens hypertextes

Code HTMLUtilité
<a href="lien">texte</a> L'attribut href contient le lien de destination.

Il ne faut pas oublier de mettre un texte sur lequel l'utilisateur ou l'utilisatrice va cliquer.

Exemple :

Code HTMLAffichage
<a href="https://...">Cliquer ici</a> Cliquer ici

Note : Par défaut, les liens hypertextes s'affichent en bleu et soulignés.

Les listes

Les listes permettent d'afficher plusieurs éléments d'un même thème les uns à la suite des autres (ex : une liste de course).

Il existe deux types de listes :


Exemple de liste à puces :

Code HTMLAffichage
<ul> <li>Structures :</li> <ul> <li>html</li> <li>head</li> <li>body</li> </ul> <li>Métadonnées :</li> <ul type="square"> <li>meta</li> <li>title</li> </ul> <li>h1 à h6</li> <li>p</li> <li>img</li> <li>etc.</li> </ul>
  • Structures :
    • html
    • head
    • body
  • Métadonnées :
    • meta
    • title
  • h1 à h6
  • p
  • img
  • etc.

Il est possible de changer le type des puces avec l'attribut type.

Les types sont :


Exemple de liste numérotée :

Code HTMLAffichage
<ol> <li>Structures :</li> <ol type="a"> <li>html</li> <li>head</li> <li>body</li> </ol> <li>Métadonnées :</li> <ol type="A"> <li>meta</li> <li>title</li> </ol> <li>h1 à h6</li> <li>p</li> <li>img</li> <li>etc.</li> </ol>
  1. Structures :
    1. html
    2. head
    3. body
  2. Métadonnées :
    1. meta
    2. title
  3. h1 à h6
  4. p
  5. img
  6. etc.

Il est possible de changer le type de numérotation avec l'attribut type.

Les types sont :

Les tableaux

Code HTMLAffichage
<table> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> <tr> <td>a1</td> <td>b1</td> <td>c2</td> <td>d2</td> </tr> </table>
Col 1 Col 2 Col 3 Col 4
A B C D
a1 b1 c2 d2

Note : Par défaut, les cases des tableaux n'ont pas de contour. Pour facilité l'observation, nous en avons ajouté.

Si vous observez bien :


Il est possible d'étendre certaines cases sur plusieurs lignes et/ou plusieurs colonnes.

L'attribut rowspan="x" étend une case sur x lignes.

Code HTMLAffichage
<table> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> </tr> <tr> <td rowspan="4">A</td> <td>B</td> <td>C</td> <td>D</td> </tr> <tr> <td>b1</td> <td>c1</td> <td>d1</td> </tr> <tr> <td>b2</td> <td rowspan="2">c2</td> <td>d2</td> </tr> <tr> <td>b3</td> <td>d3</td> </tr> </table>
Col 1 Col 2 Col 3 Col 4
A B C D
b1 c1 d1
b2 c2 d2
b3 d3

L'attribut colspan="x" étend une case sur x colonnes.

Code HTMLAffichage
<table> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> </tr> <tr> <td>A</td> <td colspan="2">B</td> <td>D</td> </tr> <tr> <td>a1</td> <td>b1</td> <td>c1</td> <td>d1</td> </tr> <tr> <td colspan="3">a2</td> <td>d2</td> </tr> <tr> <td>a3</td> <td>b3</td> <td colspan="2">c3</td> </tr> </table>
Col 1 Col 2 Col 3 Col 4
A B D
a1 b1 c1 d1
a2 d2
a3 b3 c3

Mettre en gras, mettre en italique et souligner

Code HTMLAffichage
<p>Mettre en <b>gras</b>, mettre en <i>italique</i> et <u>souligner</u></p>

Mettre en gras, mettre en italique et souligner

QCM

De quelles balises est composées le squelette principal d'une page Wbe ?

Corriger


Quelle(s) balise(s) permet d'afficher une liste numérotée ?

Corriger


Quelles sont les deux balises correctement écrites ?

Corriger


2.2. Créer une page Web

Ce qui est pratique avec le langage HTML, c'est qu'il n'est pas essentiel d'installer un logiciel complexe pour l'utiliser.

En pratique, nous n'avons besoin que d'un navigateur et d'un logiciel de bloc-note (pré-installées sur les ordinateurs).

Le principal est de bien enregistrer le fichier au format ".html" pour que la page puisse s'afficher sans problème dans n'importe quel navigateur.


Les logiciels Notepad++ et Brackets sont installés sur les ordinateurs du lycée et vous permettent une coloration syntaxique des balises HTML. Je vous conseille fortement de les utiliser pour le développement de vos pages Web !



2.3. Exercice

Le but est de s'exercer à utiliser les différentes balises vues précédemment.

La correction sera déposée dans le OneDrive.


Créer un fichier "HTML_exercice.html" et reproduire la page suivante avec des balises HTML.

Page à reproduire

Contraintes et aides :




Revenir au menu principal