Ajout d'image

Ajout d'image

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)

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)

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

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

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