5: Attributs et liens

Qu'allez-vous apprendre ?

Comprendre l’utilisation des attributs et des liens pour enrichir vos pages HTML.

Suivez ce chapitre à la lettre

Dans ce chapitre, nous allons découvrir comment ajouter des attributs aux balises HTML et comment créer des liens internes et externes. Les attributs permettent d’ajouter des options et des informations supplémentaires aux balises, tandis que les liens relient votre contenu et créent une navigation cohérente sur votre site.

Chapitre 5: Attributs et liens

Dans ce chapitre, tu vas comprendre que les balises HTML peuvent recevoir des informations supplémentaires appelées attributs. Les attributs permettent de préciser le comportement ou la destination d’une balise. Sans eux, beaucoup de fonctionnalités du Web seraient impossibles, comme les liens, les images ou les formulaires.

Le lien hypertexte est l’un des piliers du Web. C’est grâce aux liens que les pages sont connectées entre elles. Apprendre à bien utiliser la balise <a> est donc une étape essentielle pour tout débutant en HTML.

  1. Qu’est-ce qu’un attribut ?
    Un attribut est une information ajoutée dans la balise ouvrante pour modifier son comportement.
  2. Syntaxe d’un attribut :
    nom="valeur"
  3. La balise de lien :
    La balise <a> permet de créer un lien cliquable.
  4. L’attribut href :
    href indique la destination du lien (page, site, fichier).
  5. Lien vers une autre page :
    Très utilisé pour relier les pages d’un même site.
  6. Lien vers un site externe :
    Permet d’ouvrir un autre site web.
  7. Lien interne (ancre) :
    Sert à naviguer vers une partie précise de la même page.
  8. Attribut target :
    Permet d’ouvrir un lien dans un nouvel onglet.
  9. Texte du lien :
    C’est ce que l’utilisateur voit et clique.
  10. Bonne pratique :
    Le texte du lien doit être clair et compréhensible.

Exemples pratiques :

<a href="index.html">Retour à l'accueil</a>
      
<a href="contact.html">Page contact</a>
      
<a href="https://developer.mozilla.org">Documentation MDN</a>
      
<a href="https://google.com" target="_blank">Google</a>
      
<a href="#section1">Aller à la section 1</a>
      
<h2 id="section1">Section 1</h2>
      
<a href="cours.html">Voir le cours HTML</a>
      
<a href="https://yotame.art">Site Yotame</a>
      
<a href="#top">Haut de la page</a>
      
<a href="mailto:contact@yotame.art">Envoyer un email</a>

Exercices pratiques :

  1. Crée un lien vers une autre page HTML de ton site.
  2. Crée un lien vers un site externe.
  3. Ajoute un lien qui s’ouvre dans un nouvel onglet.
  4. Crée un lien interne avec une ancre.
  5. Ajoute un id à un titre et lie-le.
  6. Crée un menu simple avec plusieurs liens.
  7. Teste un lien sur mobile.
  8. Corrige un lien cassé volontairement.
  9. Change le texte d’un lien pour le rendre plus clair.
  10. Vérifie que tous les href fonctionnent.

Maîtriser les attributs et les liens te permet de créer un vrai site web navigable. À partir de maintenant, tes pages ne sont plus isolées : elles communiquent entre elles, exactement comme sur les sites professionnels.

Passer au chaitre 06-->