1. Les formats d'image


Il existe de nombreux formats d'images : .jpg, .bmp, .png, .webp, ... avec leurs avantages et inconvénients

Important : Veillez à nommer correctement vos fichiers d'images :


2. Insérer une image


2.1. Pour insérer une image, on utilise la balise orpheline comme ceci :




Remarque : l'url de l'image peut être locale ou distante, mais le code est alors généralement plus long !

Important : la commande width="20%" génèrera une erreur lors de la validation W3C, même si les navigateurs vont afficher correctement l'image ! En effet, HTML5 n'accepte qu'une valeur en pixel. Pour respecter la norme, il faut ajouter l'attribut CSS style, comme ceci : style="width:20%"


2.2. Le chemin d'accès au fichier de l'image doit généralement être indiqué. En effet, le fichier image et le fichier html se trouvent rarement dans le même dossier.



Dans cet exemple "essai.html" doit aller chercher une image nommée "tom.jpg" qui se trouve dans le dossier "minions". La bonne écriture serait donc :

<img src="./Images/minions/tom.jpg">


3. Quelques extras !


3.1. Icône personalisée.


Ajouter une icône personalisée sur l'onglet du navigateur, comme expliqué ici


3.2. La balise <figure> peut être utilisée pour afficher de l'image et du texte, comme ci-dessus. Plus d'informations ici, tout en bas de la page.


4. Travail à réaliser


4.1. A partir de votre fichier Html précédent, complétez la partie "body" pour obtenir le résultat ci-dessous :

Vous devez obtenir le résultat suivant :



4.2. Modifier/compléter votre code pour obtenir le résultat suivant en bas de page, en utilisant les balises figure et figcaption, tout en bas de cette page.


4.3. Créer et ajouter une icône du minion de votre choix dans l'onglet du navigateur (attention à la taille max de cette mini-image).

4.4. Répondre au questionnaire : ici