Agence creation de site internet
Debutant : Creez votre premiere page web
Thèmes associés : Integration images. Intégrer image html et integration image ou comment intégrer une image... Intégrer une image, intégrer image. Image intégration. Liens associés : integration image et integration image
E-Commerce

Integrez une image sur votre site

Vous allez maintenant intégrer une image à votre premier article. Les images doivent être stockées dans votre dossier "Mon-site". Nous avons crée un dossier /images/ afin de les placer à l'intérieur.

4.1 - Les explications de la balise img

Le code pour insérer l'image est le suivant :
<img src="" alt="" />
 
Pour afficher image-gite.jpg, qui se trouve dans votre dossier images, vous devez écrire :
<img src="images/image-gite.jpg" alt="Photo de mon gite">
Vous devez aller chercher l'image dans le dossier /images/ et ajouter le nom de l'image à afficher image-gite.jpg.
 
La balise alt permet d'écrire la description de votre image.

4.2 - Ajoutez une class a l'image

Vous allez maintenant ajouter une classe qui va chercher un style à ajouter sur l'image à partir de la feuille de style.
<img src="images/image-gite.jpg" alt="Photo de mon gite" class="imageGauche">
 
Vous allez ajouter la balise class="", et appeler le style imageGauche que nous avons défini dans le ficher style.css.
 
Le style placera la photo à gauche de votre article et lui attribuera un contour.

4.3 - Affichez l'image sur votre page

Vous allez maintenant afficher l'image sur votre page. Pour cela, ouvrez votre bloc note et copier le code suivant avant la balise <h2>.
<img src="images/image-gite.jpg" class="imageGauche" alt="Photo de mon gite" />
Image de Integrez une image sur votre site
Aperçu dans votre bloc note.
zoom sur image
Aperçu dans votre bloc note.
Image de Integrez une image sur votre site
Aperçu dans votre navigateur.
zoom sur image
Aperçu dans votre navigateur.
Nous avons ajouté une option dans la feuille de style, afin que vous puissiez placer votre image à droite. Il suffit d'appeler la classe imageDroite. Remplacez class="imageGauche" par class="imageDroite".

Création de sites Internet
& référencement naturel

Découvrez les références de l’agence web
STUDIO VITAMINE. Des spécialistes et passionnés
Ă  votre service ! Devis gratuit.
mascotte de l'agence web STUDIO VITAMINE
l'agence web STUDIO VITAMINE