Images, boutons et liens

Ajoutez une image avec HTML.

Les images sont ajoutées avec la balise img.

Contrairement à de nombreuses autres balises HTML, img n’a pas besoin de balise fermante.

Nous trouvons ici deux attributs importants :

src indique l’emplacement du fichier image.

alt fournit une alternative textuelle adaptée lorsque l’image transmet une information.

Organisez vos images.

Lorsqu’un site se développe, il est utile d’organiser les fichiers dans des dossiers.

Nous pouvons créer un dossier nommé :

images

La structure du projet pourrait être la suivante :

mi-primera-web/
├── index.html
├── styles.css
└── images/
└── escritorio.jpg

Depuis `index.html`, l’image serait alors chargée avec :

Les chemins doivent correspondre exactement au nom et à l’emplacement des fichiers.

L’attribut alt.

L’attribut alt ne doit pas être utilisé comme une liste de mots-clés.

Sa fonction principale est de fournir une alternative textuelle lorsqu’une image apporte une information et ne peut pas être perçue visuellement.

Par exemple :

Si une image est purement décorative et n’apporte aucune information, vous pouvez utiliser un alt vide :

Rendez les images responsive.

Nous avons vu cette règle dans la leçon précédente :

img {
max-width: 100%;
height: auto;
}

Elle évite qu’une image soit plus large que l’espace disponible.

Nous pouvons aussi contrôler la façon dont elle occupe un conteneur :

.project-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

object-fit: cover permet de remplir l’espace en conservant les proportions, même si une partie de l’image est recadrée.

Créez des liens entre vos pages.

Nous connaissons déjà la balise a.

Pour ouvrir une autre page de notre propre site, nous pouvons écrire :

<a href="servicios.html">Voir les services</a>

Et pour revenir à l’accueil :

<a href="index.html">Accueil</a>

Lorsque vous créez plusieurs pages, vérifiez toujours que le nom écrit dans `href` correspond exactement au fichier réel. Un nom incorrect peut provoquer une erreur 404 après publication.

Créez des liens vers une section.

Nous pouvons aussi naviguer à l’intérieur de la même page.

Nous ajoutons d’abord un identifiant :

<section id="servicios">
<h2>Services</h2>
</section>

Nous pouvons ensuite créer un lien vers celui-ci :

<a href="#servicios">Voir les services</a>

En cliquant sur le lien, le navigateur amènera le visiteur à cette section.

Liens vers d’autres sites.

Nous pouvons aussi créer un lien vers une page externe :

<a href="https://ejemplo.com">
Consulter la page
</a>

Si vous devez l’ouvrir dans un autre onglet :

<a
  href="https://ejemplo.com"
  target="_blank"
  rel="noopener noreferrer"
>
  Consulter la page
</a>

Tous les liens externes ne doivent pas ouvrir un nouvel onglet. Utilisez cette option lorsque cela convient à l’expérience du visiteur.

Un bouton peut être un lien.

Sur de nombreuses pages, des éléments ressemblent visuellement à des boutons, mais sont en réalité des liens.

<a href="contacto.html" class="button">
Présentez-moi votre projet
</a>

CSS contrôle leur apparence :

.button {
  display: inline-block;
  padding: 14px 24px;
  background: #222222;
  color: #ffffff;
  text-decoration: none;
}

Si l’élément mène à une autre page ou un autre emplacement, nous utilisons généralement un lien. L’élément button sert aux actions, comme envoyer un formulaire ou activer une fonction.

Ajoutez des états hover et focus.

Il est utile d’indiquer visuellement qu’un élément peut être utilisé.

.button:hover {
opacity: 0.8;
}

Nous devons aussi prendre en compte la navigation au clavier :

.button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}

L’état focus-visible permet d’indiquer quel élément interactif est sélectionné lors de la navigation au clavier.

Utilisez des textes de lien clairs.

Le texte d’un lien doit aider à comprendre ce qui se passera après le clic.

MOINS CLAIR

Cliquez ici

N’explique pas à lui seul la destination du lien.

PLUS CLAIR

Voir les services

Indique directement ce que le visiteur trouvera.

Créez une section visuelle complète.

Nous pouvons associer une image, du contenu et un appel à l’action :

<section class="project">

  <img
    src="images/proyecto-web.jpg"
    alt="Vue d’un projet de création web"
  >

  <h2>Projet à la une</h2>

  <p>
    Une page simple, claire et responsive.
  </p>

  <a href="#" class="button">
    Voir le projet
  </a>

</section>

Cette combinaison revient régulièrement sur les pages professionnelles : un visuel, du contexte et une action claire.

Optimisez vos images avant de les ajouter.

Une image peut être parfaitement affichée et malgré tout ralentir une page si son fichier est inutilement lourd.

Utilisez des dimensions adaptées à l’usage réel.

Compressez les images avant de les publier.

Utilisez des formats modernes lorsque c’est pertinent.

Donnez des noms descriptifs aux fichiers.

Par exemple, il vaut mieux :

proyecto-diseno-web.jpg

que :

IMG_847293.jpg

RÉSUMÉ

Ce que vous avez appris.

Les images sont ajoutées avec la balise img.
src indique l’emplacement du fichier.
alt fournit une alternative textuelle lorsque cela est nécessaire.
Les images doivent s’adapter aux différents écrans.
Les liens internes relient les pages d’un même site.
Les identifiants permettent de créer des liens vers les sections.
Nous pouvons aussi créer des liens externes.
Un lien peut être présenté visuellement comme un bouton.
Les boutons et les liens ont des fonctions différentes.
Les états hover et focus améliorent l’interaction.
Le texte des liens doit être descriptif.
Les images doivent être optimisées avant la publication.

MISE EN PRATIQUE

Complétez le contenu de votre site.

Ouvrez le projet construit dans les leçons précédentes.

Créez un dossier nommé images.
Ajoutez au moins une image.
Écrivez un alt adapté.
Vérifiez que l’image est responsive.
Ajoutez un lien vers une section de votre page.
Ajoutez un lien vers une autre page HTML.
Transformez un appel à l’action en bouton visuel.
Ajoutez un état hover.
Vérifiez la navigation au clavier.
Vérifiez que tous les chemins fonctionnent.

Testez tous vos liens avant de continuer. Un site peut être très beau, mais un lien cassé nuit immédiatement à l’expérience du visiteur.

Ajoutez des images, des boutons et des liens.