36 lines
1.2 KiB
Markdown
36 lines
1.2 KiB
Markdown
|
# Image
|
||
|
|
|
||
|
|
## Description
|
||
|
|
|
||
|
|
Afin d'insérer une image dans son document, il convient d'utiliser la balise `<img>`. Cette dernière est particulière car elle n'a pas besoin de balise dite “fermante”
|
||
|
|
|
||
|
|
C'est une balise qui fait partie de la famille des [“Éléments remplacés”.](https://developer.mozilla.org/fr/docs/Web/CSS/Replaced_element)
|
||
|
|
|
||
|
|
Cette balise nécessite deux attributs obligatoires: `src` et `alt` et deux attributs recommandés: `width` et `height`.
|
||
|
|
|
||
|
|
L'attribut `src` nous permet de renseigner la source de l'image. Que ce soit une URL distante ou bien un chemin vers une image locale.
|
||
|
|
|
||
|
|
L'attribut `alt` est à renseigner si l'image est “porteuse de sens”. Si l'image est décorative, l'attribut `alt` doit rester vide mais ne doit pas être supprimé.
|
||
|
|
|
||
|
|
Les attributs `width` et `height` sont à renseigner dans la mesure du possible afin que le navigateur réserve la place nécessaire à l'image au moment du chargement de la page.
|
||
|
|
|
||
|
|
## Exemples
|
||
|
|
|
||
|
|
```html
|
||
|
|
<img
|
||
|
|
src="./images/banniere-promo.jpg"
|
||
|
|
alt="Économisez 40% avec le code BIENVENUE"
|
||
|
|
width="600"
|
||
|
|
height="60"
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
```html
|
||
|
|
<img
|
||
|
|
src="https://photos-de-chats.fr/felix.png"
|
||
|
|
alt=""
|
||
|
|
width="300"
|
||
|
|
height="400"
|
||
|
|
/>
|
||
|
|
```
|