[HTML/CSS] - 10. Comment ajouter des images en HTML

par Tychic Obanda


HTML | 0 commentaire



Bienvenue à nouveau sur mon blog ! De nature, je suis du genre à offrir des cadeaux à ceux qui me sont fidèles. Je t'offre alors l'extrait de mon ebook : 50 conseils aux blogueurs débutants et futurs blogueurs. Clique ici pour recevoir l'ebook. Merci d'être arrivé sur mon blog !


Nous sommes arrivé à un chapitre très utile en ce qui est de création des pages web : ajouter des images en HTML.

Au début de cette série de tutoriels, je vous avez dit qu"on pourrait même ajouter des images dans une page web et c"est ce que nous allons faire dans ce chapitre.

Balise <img /> pour les images

Pour ajouter une image en HTML, on utilise la balise <img /> qui est une balise orpheline.

Cette balise en elle seule, ne peut jamais ajouter une image dans une page web. Elle a toujours eu besoin des attributs que je vous laisse découvrir bientôt.

Les attributs de <img />

Plusieurs attributs peuvent accompagner la balise <img /> et je vais vous lister ces attributs ici.

  • src : le premier attribut à connaître est src. Cet attribut précise la source ou le chemin de l"image. Quand vous utilisez l"attribut src, vous devez bien vérifier le chemin de l"image, le nom de l"image et son extension car à moindre, l"image ne sera pas affichée.
<img src="logo-243tech.png" />
  • alt : le deuxième attribut est alt qui, sa valeur n"est rien d"autre qu"un texte qui décrit en quelques mots le contenu de l"image. Ce texte sera affiché dans le navigateur au cas où l"image n"est pas chargée et c"est aussi important de placer vos mots clés à l’intérieur de cet attribut.
<img src="logo-243tech.png" alt="Cette image contient le logo de 243tech" />
  • title : l"attribut title permet d"afficher une infobulle quand on survole l"image.
<img src="logo-243tech.png" alt="Cette image contient le logo de 243tech" title="Cette image contient le logo de 243tech" />
  • width et height : bien que la mise en forme d"une page web soit réservée à CSS, on peut aussi faire quelques mises en forme en HTML. Quand il s"agit de diminuer ou augmenter la largeur d"une image, on utilise l"attribut width. Et pour la hauteur, on utilise height.
<img src="logo-243tech.png" alt="Cette image contient le logo de 243tech" title="Cette image contient le logo de 243tech" width=100 height=100/>

Quelques conseils pour l"ajout des images en HTML

  • Éviter de renommer les fichiers avec des caractères accentués
  • Éviter des espaces dans le nom de fichiers. Remplacer les espaces par des undescore "-" .
  • C"est conseiller de nommer les fichiers en lettres minuscules.

C"est tout pour ce chapitre. On se retrouve bientôt pour un nouveau chapitre auquel on verra comment insérer des vidéos et audio en HTML. Si vous avez des questions à poser, laissez-les en commentaire et je vais répondre.







Laisser un commentaire
Recherche
Site hébergé chez Ikoula

Mon site est hébergé chez Ikoula. Un hebergeur web de qualité et si vous cherchez à mettre votre site en ligne, cliquez ici pour profiter de l'offre de 0,99€ par mois !

Logo hébergeur web Ikoula

Extrait : 50 conseils aux blogueurs

50 conseils aux blogueurs débutants et futurs blogueurs

Besoin d'apprendre plus sur le Blogging ? Dans cet ebook, je vous donne 50 conseils que tous les débutants en Blogging aimeriaient écouter avant de se lancer.

Ebook : Mes grosses erreurs en Blogging

50 conseils aux blogueurs débutants et futurs blogueurs

Cet ebook contient les erreurs à éviter quand on souhaite se lancer dans le Blogging. Il vaut de l'or et téléchargez-le dès maintenant.

M'écrire sur Whatsapp

Cliquez sur l'image ci-dessous pour entrer en contact avec moi sur Whatsapp. J'aimerais vraiment échanger avec vous!!!

Contactez Tychic Obanda sur Whatsapp

Avatar Tychic Obanda

Envie d'apprendre plus sur la création de sites web ? Vous êtes au bon endroit ! 120 articles publiés, 806 commentaires ont été postés sur 243tech. Tout ce que vous cherchez se trouve peut-être ici...