Ajout d'images - Créer un site en HTML (3/5)

3 minutes pour coder - Créer un site en HTML

Chargement de la playlist en cours...

Comment ajouter des images sur un site en HTML ? 

On a maintenant une page HTML, mais qui manque un peu de style ! On peut peut-être essayer de corriger ça en ajoutant des images. 

Si tu as raté les précédentes vidéos, retrouvez les ici : « Démarrage (1/5) » et « Ajout de texte (2/5) ».

Pour ajouter des images, il faut une balise nommée <img src="   "/> . C’est à l’intérieur de cette balise que l’on va pouvoir ajouter l’image que l’on veut.

Mais avant d’ajouter une image il faut connaître les différents formats d’images. Les plus utilisés sont le .jpeg, le .png et le .gif. Les gifs, ce sont les images drôles qui bougent en boucle que l’on voit un peu partout sur Internet. 

Ajouter un gif

Je vais d'ailleurs ajouter un gif à ma page. C’est un gif que j’ai fait moi-même. (voici le lien : https://static.education.francetv.fr/images/raw/1501679008/micodegif1.gif)

Image Contenu

 

Copie le dans l’espace laissé dans la balise, sans oublier de fermer le guillemet à la fin de l’adresse que l’on vient de copier. Si on enregistre le fichier et que l’on va voir sur le navigateur, on devrait voir l’image s’afficher. 

J’ai envie de mettre plus d’images. Je vais lui faire une liste de quelques conseils drôles pour que son anniversaire se passe bien. On commence par ajouter un titre avec la balise H2 cette fois-ci. Si tu te souviens ça veut dire que c’est un titre un peu moins important que le premier titre qui lui est un H1.

<h2>La liste illustrée de ce qu'il ne faut pas faire en soufflant ses bougies</h2>

Puis on peut commencer à travailler sur la liste. Pour faire une liste en HTML,  il faut comme d’habitude utiliser une balise. Cette balise c’est : <ul> </ul>

Je l’ajoute dans mon code, et pour ajouter chaque point de la liste je vais ajouter une autre balise : <li> </li>

À l’intérieur de cette balise on va pouvoir écrire du texte. Je vais y écrire mon premier conseil : Être vraiment trop enrhumée. Et je vais l’illustrer avec un petit gif que j’ai fait. Pour ce faire c’est identique à ce que l’on a déjà fait au début de la vidéo. (lien de l’image : https://static.education.francetv.fr/images/raw/1501679191/micodegif2.gif)

Image Contenu

 

Je vais maintenant copier la dernière balise <li> et la coller deux fois pour que ma liste ait 3 points.

Tu peux maintenant enregistrer le document et aller voir ce que ça donne sur ton navigateur internet. Les trois points de la listes sont identiques. C’est normal. Je vais commencer par régler un petit problème. L’image est sur la même ligne que le texte. J’aimerais que le texte soit au-dessus des images donc je vais ajouter des balises <br> pour le faire. Maintenant pour ne pas avoir 3 fois la même chose, il suffit de changer le texte et les liens des images pour le faire.

Donc je vais lui donner mon deuxième conseil : Se méfier des trolls et ajouter l’image correspondante dont voici le lien : https://static.education.francetv.fr/images/raw/1501679250/micodegif3.gif

Image Contenu

 

Et enfin le troisième conseil : Oublier de s'entraîner avant de souffler et ajouter l’image ci-dessous : https://static.education.francetv.fr/images/raw/1501679300/micodegif4.gif

Image Contenu

 

Une fois que c’est fait on peut enregistrer et regarder ce que ça donne dans le navigateur.

On a des images, mais notre page reste très blanche et les titres ne sont pas très beaux. Donne lui un peu plus de style en regardant la prochaine vidéo  : Ajout du CSS (4/5) !

 

NOTE

  • Code pour ajouter une image

<img src="lien de l’image"/>

  • Code entier de la liste :

<ul>

<li>Être vraiment trop enrhumée<br>

<img src="https://static.education.francetv.fr/images/raw/1501679191/micodegif2.gif">

 </li>                         

<li>Se méfier des trolls<br>

<img src="https://static.education.francetv.fr/images/raw/1501679250/micodegif3.gif”>

</li>

<li>Oublier de s'entraîner avant de souffler<br>

<img src="https://static.education.francetv.fr/images/raw/1501679300/micodegif4.gif">

</li>

</ul>

Réalisateur : Valentin Levelli

Producteur : Coyote Conseil

Auteur : Arnaud Gantier et MICODE

Diffusion : 2017

Publié le - Mis à jour le 10-07-2018

Recommandations

Je t’accompagne dans
tes révisions du bac