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

Publié le - Mis à jour le 08-11-2017

Comment ajouter des images sur un site en HTML ?

On a maintenant un page HTML qui ressemble à ça. Elle manque un peu de style quand même ! On peut peut-être essayer de corriger ça en ajoutant des images.

Pour ajouter des images il faut une balise nommée <img src=”   “/>  Je vais laisser exprès quelques espaces avant de fermer cette balise.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. Je vais d'ailleurs ajouter un GIF à ma page. C’est un gif que j’ai fait moi-même. Pour ajouter ce GIF sur notre site, il faut que tu trouves le lien GIF 1 qui est dans la description. *

Maintenant on copie ça dans l’espace que l’on a 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. 

Ça apporte un peu de couleur. Mais 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

On va écrire notre titre entre ces balises.

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> </ul>

Je l’ajoute dans mon code, et pour ajouter chaque point de la liste je vais ajouter une autre balise, la balise LI

<li> </li>

À l’intérieur de cette balise on va pouvoir écrire du texte. Je vais y écrire mon premier conseil. Ne pas éternuer sur son gâteau d'anniversaire. 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.

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 faire troller” et ajouter l’image 2

Et enfin le troisième conseil en ajoutant l’image 3:

Oublier de s'entraîner avant de souffler

Texte :
Titre h2 : La liste illustrée de ce qu'il ne faut pas faire en soufflant ses bougies

Liste ul :

  • Éternuer sur son gâteau
  • Se faire troller
  • Oublier de s’entraîner avant de souffler

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

Si tu as eu un problème avec cette partie, tout ce qu’on a ajouté est écrit dans la description en dessous de cette vidéo. Tu peux aussi voir à l’écran la totalité du code que l’on a écrit jusqu’à présent.

Maintenant on a des images, mais notre page reste très blanche, les titres ne sont pas très beaux. Bref. Il est temps de lui donner un peu plus de style.

Pour le faire c’est dans la prochaine vidéo !

NOTE

Code pour ajouter une image

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

 

Lien de l’Image 1 : http://static.education.francetv.fr/images/raw/1501679008/micodegif1.gif

 

Image Contenu

 

Lien de l’Image 2 : http://static.education.francetv.fr/images/raw/1501679191/micodegif2.gif

 

Image Contenu

 

Lien de l’Image 3 : http://static.education.francetv.fr/images/raw/1501679250/micodegif3.gif

 

Image Contenu

 

Lien de l’Image 4 : http://static.education.francetv.fr/images/raw/1501679300/micodegif4.gif

 

Image Contenu

 


 

Code entier de cette vidéo :

 

<img src="http://static.education.francetv.fr/images/raw/1501679008/micodegif1.gif">

<ul>

<li>Être vraiment trop enrhumée

<br>

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

 </li>                         

<li>Ne pas se méfier des trolls

<br>

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

</li>

<li>S'entraîner avant de souffler sur les bougies<br>

<img src="http://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

Recommandations