oujood.com

Comment insérer (ajouter) une image html dans une page Web

Aujourd'hui, dans le monde numérique moderne, les images sont indispensables, mettre une image html est très important
Comment insérer une image dans une page (site) Web. C'est l'objectif de ce chapitre.
Ce qui suit n'est pas un cours d'infographie mais simplement un panorama de ce qui est nécessaire à un cours HTML. Nous n'aborderons pas tous les formats d'images ni les moyens de les créer et les traiter.

search |

Insertion des images :

Avant de commencer, je vous demande de créer un dossier sur votre disque dur.
Nommez le "mon_site", dans ce dossier créez un sous-dossier nommez le "images".
Lorsque vous nommez un dossier, un fichier, une image ou une page html, il est conseillé d’utiliser des minuscules et sans espace entre les mots, utiliser à la place des espaces les traits d’union.
Dans le sous-dossier images placez une image de votre choix, vérifiez que son nom et son extension sont en minuscule,les nom ne doivent contenir ni espace ni caractère spéciaux( é è ê ä ç etc… ).
vous pouvez utiliser tirée ou sous tirée ("-" ou "_" )
Dans le dossier "mon_site" placez votre page "essai.html" que vous avez créez au cours de ce cours.
A partir de ce moment enregistrez tous vos exercices et testes que vous allez faire dans ce dossier, pour un peu d'organisation ou quoi ?

Pour insérer une image dans une page Web, on doit choisir un format qui s'adapte le mieux avec le Web.
Les formats d'images que l'on utilise sur le Web sont :

JPEG : le format JPEG est très répandu. Il est particulièrement adapté pour les photos,Les images de type JPEG ont généralement l'extension ".jpg", mais aussi parfois ".jpeg" .
PNG : le format PNG est le plus récent de tous. Ce format est adapté à la plupart des graphiques. L'avantage du PNG, c'est qu'il peut être rendu transparent, ce qui est très appréciable.
GIF : c'est un vieux format, qui a été très utilisé.

Le format GIF est limité à 256 couleurs. Si je je vous parle du GIF, c'est qu'il conserve quand même un avantage que le PNG n'a pas : il peut être animé



Résumé

les formats à adopter en fonction de l'image que vous avez :
• Une photo (ou une image avec beaucoup de couleurs) : utilisez un JPEG ou PNG 24 bits.
• Un graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits si possible, sinon utilisez un GIF.
• Une image animée : utilisez un GIF animé.

Revenons à notre code html
Pour insérer une image, on utilise la balise <img>.
C'est une balise de type seule (comme <br>).
Elle peut prendre plusieurs attributs, et 2 d'entre eux sont indispensables :

l'attribut src : il permet d'indiquer la source où se trouve l'image que l'on veut insérer.
Vous pouvez soit mettre :

1. un chemin en absolu (exemple : "http://www.site.com/image.png").
2. soit mettre le chemin en relatif (c'est le cas le plus souvent utilisé).
Ainsi, si votre image est dans un sous-dossier "images" vous devrez taper :
src="images/mon_image.png"

l'attribut alt : qui signifie "texte alternatif". On doit toujours indiquer un texte alternatif à l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (et ça arrive).
Si vous ne faites pas de texte alternatif, votre page ne sera plus une page html valide et votre site sera détecté comme non conforme aux normes.

Avec ces deux attributs nous aurons une syntaxe comme suit:

<img src="adress de l'image" alt="texte de remplacement"/>

exemple d'insertion d'image :


Dans le code suivant remplacez le mot "mon_image" par le nom de l'image que vous voulez insérer, n'oubliez pas l'extension.(.jpeg , .gif , .png) de votre image
Ah n'oublier pas l'image doit être placée dans le sous dossier images.
Insérez ce code dans le code de votre page Web, vous vous souvenez click droit sur l'icône de la page Web puis faite Edit with notepad++ si c'est votre éditeur.
Code : HTML

Sélectionner le code

	<p>		
	Voici une image :<br>		
	<img src="images/image.jpg" alt="image de…" >	
	</p> 	
	<p>C'est très facile.	</p>
					
 

Nous pouvons aussi définir la largeur (withd) et la hauteur (height) de notre image ce qui donne le code suivant :
<img src="images/image.jpg" alt="image de…" height="X" width="X">
où X et Y sont des nombres qui indiquent la largeur et la hauteur que doit avoir notre image à l'affichage

Par carabde 10 mars 2014 mis à jour 04/01/2022

chapitre précédent      chapitre suivant



Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

CSS3 couleur dégradé

Comment créer des couleurs dégradés en css3 ?

localeconv

Lit la configuration locale

Balise addresse

Définit les coordonnées de l'auteur / propriétaire d'un document



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci