Code

Page exemple

A retenir sur la balise img

• la balise img permet d'insérer des images dans une page html

• deux attributs sont obligatoires pour que la balise fonctionne :

  1. src précise le path d'un fichier image

  2. alt précise un texte alternatif

     • la valeur de alt peut être vide
     • si le fichier image mentionné dans href n'est pas disponible, ce sera le texte mentionné dans alt qui sera affiché à l'écran
     • la valeur de cet attribut est très utilisé par les moteurs de recherche pour le référencement
• les images peuvent être sur la même machine ( = aussi appelé serveur ) ou sur un serveur distant
• Il s'agit d'une balise de catégorie inline
• + de détails dans la documentation officielle : img sur MDN
• + de détails dans la documentation officielle : img sur w3school

Types de fichier images

• .jpg ou jpeg
• .png
• .gif

Dimension et poids des Images

plus l'image est lourde et plus le serveur va travailler pour la livrer + la navigateur va mettre de temps à l'afficher

Propriété intellectuelle sur les images

• Attention, certain site bloque l'utilisation

Générateur en ligne d'image

Comme pour le lorem ipsum, il existe des sites internet qui permettent de générer des images fictives et libre de droit pour pouvoir tester l'apparence de son codage html :

• lorempixel.com
• placekitten.com
• placehold.it
• unsplash.com

Générateur de gif animé

Transformer une petite partie de vidéo youtube, viméo ou dailymotion en gif animé et la diffuser aur Facebook est devenu très à la mode. Voici quelques site internet qui permettent de créer des gifs animés à partir d'une vidéo :

• makeagif.com
• gifs.com

Générateur de favicon

Le favicon est une image particulière qui est s'affiche à côté du titre de la page dans le nagivateur :

• favicon-generator.org
• www.favicon.cc