icu.next-video

Contenu proposé par

France Télévisions

Regarde cette vidéo et gagne facilement jusqu'à 15 Lumniz en te connectant !

Il n’y a pas de Lumniz à gagner car tu as déjà consommé cet élément. Ne t'inquiète pas, il y a plein d'autres contenus intéressants à explorer et toujours plus de Lumniz à gagner.

->   En savoir plus
Techno02:34Publié le 23/10/2017

Ajout d'images (3/5)

3 minutes pour coder

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

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

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

📌 On a des images, mais notre page reste très blanche et les titres ne sont pas très beaux. Donne à ta page 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

Nom de l'auteur : Arnaud Gantier et MICODE

Producteur : Coyote Conseil

Année de production : 2017

Année de diffusion : 2017

Publié le 23/10/17

Modifié le 20/02/24

Ce contenu est proposé par