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>.
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".
