HTML #5 | Images

Pour intégrer une image, le tag <img> est nécessaire. Comme pour le tag <br>, le tag de fermeture n’est pas nécessaire. Je vous renvoie à cet article, si vous n’avez pas tout suivi.

Pour spécifier l’image que nous souhaitons intégrer, nous utilisons l’attribut « src » pour source.

Dans mon cas, mon image est située au même endroit que mon fichier index.html autrement dit, sur mon bureau.

Il me suffit de spécifier le nom de ce fichier-image.

Cependant [oui tout n’est pas si simple], il faut faire la distinction entre un chemin relatif et un chemin absolu.

Le chemin relatif

Si je crée un dossier Images sur mon bureau où je range toutes mes photos dont celle que j’ai utilisé ci-dessus « oss117.jpg »

En laissant le code que je viens de taper, j’aurais un problème d’image puisque l’emplacement d’oss117.jpg » a changé.

images

Pourquoi ce bug ?

images

 

 

 

 

Le fichier index.html est le fichier de référence. Pour voir apparaître ma photo située dans le dossier Images, je dois taper ce code :

Il s’agit donc d’un chemin R E L A T I F puisqu’il dépend du fichier index.html

L’attribut ALT

Le tag <alt> est une alternative pour la description d’images. Il est très important en terme de référencement.

 Si la photo n’apparaît pas (lenteur de connexion etc…), le tag « alt » s’affichera.

Le chemin absolu

Il ne dépend pas du fichier index.html

Je prends l’adresse url d’une image trouvée sur le net : http://magbodo.com/blog/wp-content/uploads/2016/08/funny-use-ur-head.jpg

Je l’insère dans mon code.

Cela fonctionne parfaitement ! [Impec Niguel]

Images et Liens

J‘ai sauvegardé une image « post.png » que j’ai rangée dans mon dossier Images.

Lorsque je clique sur cette image, je souhaite être renvoyée vers mon blog www.granolann.com

Si je dirige mon curseur sur l’image, une main apparaît. Je clique. Je suis bien renvoyée vers www.granolann.com

Nous avons donc créé un lien à partir d’une image.


       La suite, c’est par I C I, les gars !

         Si tu es à la ramasse et que tu n’as rien suivi, on reprend depuis le début :

titres

Ann

Laisse un commentaire