Chapitre 50 | Placehold.co pour des images temporaires

Utilisation de Placehold.co pour des images temporaires

Objectif

Apprendre à utiliser le service Placehold.co pour générer rapidement des images de remplacement dans vos projets HTML et styliser ces images à l’aide de CSS.

À propos de Placehold.co

Placehold.co est un outil en ligne gratuit qui permet de générer des images temporaires avec des dimensions personnalisées. Vous pouvez également y ajouter des textes et des couleurs pour représenter des éléments spécifiques de vos projets web. Il est idéal pour les maquettes et les tests rapides.

Utiliser Placehold.co avec `img` et attributs HTML

Exemple de base

<img src="https://placehold.co/300x300" alt="">

Dans cet exemple :

300x300 définit les dimensions (largeur et hauteur en pixels) de l’image.
L’attribut alt est laissé vide pour indiquer qu’il s’agit d’une image de remplacement.

Ajouter du texte personnalisé

Vous pouvez ajouter du texte descriptif pour indiquer ce que l’image représente dans votre projet.

<img src="https://placehold.co/300x300?text=PhotoSalleDeConference" alt="">

Résultat attendu : une image de 300×300 pixels affichant le texte « PhotoSalleDeConference ».

Styliser les images avec CSS

Exemple d’image ronde

Pour afficher une image ronde, utilisez la propriété CSS border-radius.

HTML

<img src="https://placehold.co/300x300?text=AvatarArchi" alt="">

CSS

img {
    width: 150px; /* Taille ajustée */
    height: 150px; /* Taille ajustée */
    border-radius: 50%; /* Transformation en cercle */
    object-fit: cover; /* Assure le cadrage parfait */
}

Points importants

Personnalisation avec Placehold.co : ajoutez des paramètres supplémentaires dans l’URL pour changer les couleurs de fond, de texte ou ajouter des textes dynamiques.
Exemple : https://placehold.co/150x150/eeeeee/333333?text=DesignTest.
Accessibilité : même si vous utilisez des images temporaires, remplissez correctement les attributs alt pour les tests finaux.
Responsivité : pour des images adaptables, utilisez des pourcentages ou des unités relatives dans vos règles CSS (width: 50%; ou max-width: 100%;).

Ces pratiques vous permettront de gagner du temps tout en créant des maquettes réalistes et esthétiques.

Annexe 1

Pourquoi border ?

Le mot « border » signifie « bordure ».
Quand on veut personnaliser ou arrondir les bords d’un élément en HTML (comme une image ou un bouton), on utilise le mot-clé border.

Pourquoi radius ?

Le mot « radius » signifie « rayon ».
Imagine un coin carré : pour le rendre arrondi, on dessine une courbe.
La distance entre l’angle d’origine (le coin pointu) et la courbe s’appelle le rayon (radius). Plus ce rayon est grand, plus l’angle devient arrondi.

Exemple simple

Avec un coin normal, l’angle est net :
🔲 → c’est un carré.
Si on applique un radius (rayon), l’angle devient arrondi :
◗ → les bords sont plus doux.

Pourquoi utilise-t-on `border-radius` ?

Pour rendre un site plus joli et moderne ! Les angles arrondis sont souvent utilisés pour :

Rendre l’apparence générale plus douce et accueillante.

Créer des boutons avec un design plus agréable.

Transformer une image carrée en cercle.

Annexe 2

Pourquoi utilise-t-on `object-fit` et qu’est-ce que `cover` ?

1. Pourquoi « object » ?

En HTML, une image ou une vidéo est considérée comme un « objet » que l’on insère dans une page.
Le mot « object » fait référence à cet élément visuel.

2. Pourquoi « fit » ?

Le mot « fit » signifie « ajuster ».
Quand une image ne correspond pas parfaitement à la taille de son conteneur (comme une boîte ou un cadre défini avec width et height), on utilise object-fit pour décider comment l’image doit s’adapter.

3. Pourquoi « cover » ?

Avec object-fit: cover;, l’image est redimensionnée pour remplir tout le conteneur, même si une partie de l’image est coupée. Cela garantit qu’il n’y a jamais de zones blanches autour de l’image.

Le mot « cover » signifie « couvrir ».