Liens, images et formulaires

Objectifs

À la fin de cette leçon, vous saurez :

• créer des liens internes, externes et ancres ;
• insérer des images accessibles ;
• construire un formulaire complet avec ses labels.

Les liens

<a href="https://exemple.fr">Site externe</a>
<a href="/cours/terminal">Lien interne</a>       <!-- même site -->
<a href="#objectifs">Aller aux objectifs</a>     <!-- ancre dans la page -->
<h2 id="objectifs">Objectifs</h2>

Trois destinations : absolue, relative, ancre (via id). Pour un nouvel onglet : target="_blank" — à utiliser avec parcimonie.

Les images

<img src="images/photo.jpg" alt="Paul devant son terminal" width="400">

• src : chemin relatif ou URL ;
• alt : texte alternatif obligatoire ;
• largeur conseillée pour éviter les sauts de mise en page au chargement.

Chemin relatif = relatif au fichier HTML courant. images/photo.jpg cherche le dossier images à côté de votre page.

Le formulaire : collecter des données

<form action="/inscription" method="post">
  <label for="nom">Nom</label>
  <input type="text" id="nom" name="nom" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="niveau">Niveau</label>
  <select id="niveau" name="niveau">
    <option value="debutant">Débutant</option>
    <option value="intermediaire">Intermédiaire</option>
  </select>

  <button type="submit">S'inscrire</button>
</form>

Points essentiels :

type change tout : text, email, password, number, date, checkbox… Chaque type apporte clavier adapté sur mobile et validation intégrée.

Exercice

1. Ajoutez une image locale avec alt pertinent et un lien externe dans votre page.
2. Construisez le formulaire d'inscription ci-dessus ; soumettez-le avec method="get" et observez l'URL générée.
3. Passez en method="post" : où vont les données ? (Indice : elles ne sont plus visibles — c'est le corps de la requête HTTP.)

Résumé

• Liens : trois destinations ; images : toujours un alt.
• Formulaire = action + method + champs nommés + labels appariés.
• GET met les données dans l'URL, POST dans le corps — lien direct avec le chapitre HTTP.