Accueil › Cours › Pages web : HTML

Les leçons de ce chapitre

1. La structure d'une page
2. Texte, listes, liens et images
3. Tableaux et formulaires

Leçon 11.1 : La structure d'une page

8 min

Une page web est écrite en HTML (HyperText Markup Language). Ce n'est pas un langage de programmation : c'est un langage de balises qui décrit le contenu. Le navigateur lit les balises et dessine la page.

Les balises

Une balise s'écrit entre < et >. La plupart vont par paires : une balise ouvrante <p> et une balise fermante </p>. Entre les deux, il y a le contenu : <p>Bonjour</p>.

Le squelette

• <html> entoure toute la page.
• <head> contient les informations sur la page, dont <title> : le titre affiché dans l'onglet.
• <body> contient tout ce qui est visible : titres <h1> à <h6>, paragraphes <p>…

Attention : Les balises doivent être bien imbriquées : la dernière ouverte est la première fermée. <p><strong>Texte</p></strong> est faux.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ma page</title>
  </head>
  <body>
    <h1>Un titre</h1>
    <p>Un paragraphe.</p>
  </body>
</html>

Exemple

Modifie le texte dans la zone de gauche : la page de droite change toute seule.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Bienvenue à Carthage</h1>
    <h2>Un sous-titre</h2>
    <p>Voici ma première page web.</p>
    <p>Chaque paragraphe commence sur une nouvelle ligne.</p>
  </body>
</html>

Leçon 11.2 : Texte, listes, liens et images

9 min

Le HTML a des balises pour presque tout ce qu'on voit sur une page.

• Mettre en valeur : <strong> (gras), <em> (italique). <br> passe à la ligne (elle n'a pas de balise fermante).
• Listes : <ul> (à puces) ou <ol> (numérotée), avec un <li> par élément.
• Lien : <a href="adresse">texte</a>. L'attribut href donne la destination.
• Image : <img src="logo.png" alt="Logo">. src donne le fichier, alt le texte de remplacement.

Astuce : Un attribut s'écrit dans la balise ouvrante sous la forme nom="valeur". Une balise peut en avoir plusieurs.

Exemple

Ajoute un quatrième élément à la liste, puis change l'adresse du lien.

<h2>Mes villes préférées</h2>
<ul>
  <li>Tunis</li>
  <li>Sfax</li>
  <li>Bizerte</li>
</ul>
<p>Plus d'infos sur <a href="https://fr.wikipedia.org/wiki/Tunisie">la Tunisie</a>.</p>
<p>Un texte en <strong>gras</strong> et en <em>italique</em>.<br>Une nouvelle ligne.</p>

Leçon 11.3 : Tableaux et formulaires

9 min

Un tableau

Un tableau se construit ligne par ligne : <table> entoure tout, <tr> (table row) est une ligne, <th> une cellule d'en-tête (en gras) et <td> (table data) une cellule normale.

Un formulaire

Un formulaire <form> permet à l'utilisateur de saisir des informations. La balise <input> crée un champ : l'attribut type en choisit la sorte (text, password, number, submit…). <label> donne son nom au champ.

Astuce : Un champ type="password" cache les caractères tapés (ils apparaissent comme des points).

Exemple

Ajoute une troisième ligne au tableau avec un nouvel élève.

<table border="1">
  <tr><th>Nom</th><th>Note</th></tr>
  <tr><td>Amira</td><td>16</td></tr>
  <tr><td>Sami</td><td>14</td></tr>
</table>
<form>
  <p><label>Prénom : <input type="text" name="prenom"></label></p>
  <p><label>Mot de passe : <input type="password" name="mdp"></label></p>
  <input type="submit" value="Envoyer">
</form>

S'entraîner gratuitement

Chaque leçon a 3 exercices gratuits avec indices pour appliquer ce chapitre avec Hannibot.

← Chapitre précédent : Fonctions et procédures · Chapitre suivant : Mise en forme : CSS →

Tous les chapitres · Voir les devoirs corrigés de 2ème TI

Cours écrit pour Mission Carthage d'après le programme officiel. Ton professeur reste la référence.