Intégration des Images en HTML

Les balises pour les images et les figures
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Cours HTML5 et CSS3 / Part 1
Revoir le teaser Je m'abonne
5,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
5,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont :

  • Comprendre l'utilisation de la balise img.
  • Apprendre à configurer les attributs src et alt.
  • Découvrir la balise figure et son utilisation en HTML5.

Cette leçon porte sur l'intégration des images en HTML, en utilisant les balises img et les attributs src et alt.

Dans cette session, nous explorons en détail le processus d'intégration des images dans une page web en utilisant la balise img. Vous apprendrez à spécifier la source de l'image avec l'attribut src, et l'importance de l'attribut alt pour l'accessibilité et le référencement. Nous discutons également de la balise figure introduite en HTML5, qui permet de regrouper des images et des légendes de manière cohérente.

Nous démontons également comment les images s'affichent inline par défaut et comment contrôler leur placement à l'aide de la balise figure et figcaption.

En suivant cette leçon, vous serez capable de :

  • Inclure des images dans vos pages web en utilisant la balise img correctement configurée.
  • Améliorer l'accessibilité de vos images avec l'attribut alt.
  • Utiliser la balise figure pour créer des groupes d'images.
Voir plus
Questions réponses
Pourquoi l'attribut alt est-il important ?
L'attribut alt est crucial pour l'accessibilité car il permet aux lecteurs d'écran de décrire l'image aux personnes malvoyantes. Il aide également au référencement sur les moteurs de recherche.
Que se passe-t-il si vous oubliez l'extension de l'image dans l'attribut src ?
Si l'extension de l'image est oubliée, le navigateur ne pourra pas trouver et afficher l'image car le chemin spécifié sera incorrect.
Comment les balises img s'affichent-elles par défaut en HTML ?
Par défaut, les balises img sont des éléments inline, ce qui signifie qu'elles s'affichent les unes à côté des autres horizontalement si l'espace le permet.
Nous allons à présent aborder l'intégration des images. J'ai ouvert la fenêtre à partir de laquelle nous allons travailler, donc j'ai mon dossier sur lequel je travaille, j'ai un dossier images et mon fichier index, toujours le même, celui qui est situé dessous, à partir duquel nous avons l'habitude de travailler. Il est très important de bien repérer comment est configuré notre dossier. J'ai un fichier index, j'ai un dossier images et à l'intérieur de dossier images, j'ai trois images qui se nomment carré 8, carré 9 et carré 10.jpg. Je vais à présent incorporer ces images à l'intérieur de ma page. Pour incorporer une image, nous utilisons de manière très générale, pour l'instant, la balise img que nous avons vue dans une leçon précédente. La balise img tout court ne sert à rien, puisqu'à priori elle ne va pas chercher d'image. Nous devons lui ajouter un attribut qui s'appelle src, qui signifie source, égal guillemets guillemets, donc c'est l'écriture classique des attributs. A l'intérieur de ces guillemets, nous allons devoir recréer le chemin, spécifier le chemin entre ce document qui s'appelle index et les images. Je rouvre mon petit dossier et, simplement pour vérifier, je dois entrer dans ce dossier et aller chercher ce document. Pour entrer dans le dossier, il suffit simplement de dire à partir de là où je suis, c'est à dire à partir de ce document index, il y a un dossier images. Ensuite, nous mettons un slash qui permet de faire la coupure entre dossiers. S'il y avait plusieurs dossiers, nous mettrions des slashes à chaque fois entre les différents dossiers, mais là, en l'occurrence, il n'y en a qu'un. Images, et ensuite je nomme l'image à aller chercher. Cette image doit obligatoirement avoir son extension. Si vous oubliez l'extension, ça ne marche pas puisque cette image s'appelle carré8.jpg et non pas carré8. Bien, là, nous pourrions déjà regarder dans un navigateur, cela fonctionne. La balise img doit obligatoirement avoir un attribut. Alors, lorsque je dis obligatoire, c'est pour être conforme aux spécifications d'un organisme qui s'appelle le W3C, dont je ne vous ai pas encore parlé, mais qui est un organisme chargé de normaliser le code HTML et CSS et l'ensemble des différents langages utilisables sur le web. Alors, l'attribut alt signifie alternatif. Elle permet de donner une courte description de l'image. Ceci est nécessaire, d'une part, pour les navigateurs non visuels. Alors, il s'agit des navigateurs pour les gens malvoyants qui utilisent les navigateurs Oro. Donc, tout ce qui est texte seront lus. Comme une image ne peut pas être lue, c'est cet attribut alt qui sera lu dans leur audio. Mais également, cet attribut alt permettra de référencer cette image, puisqu'a priori, un moteur de recherche n'est pas capable de voir ce qu'il y a sur l'image, et c'est les indications que vous allez donner là qui vont le permettre. Et en troisième lieu, si l'image ne peut pas s'afficher, vous avez déjà certainement vu dans vos navigateurs qu'à la place, eh bien, il y a tout simplement une petite description, un court texte. Enfin, certains navigateurs profitent de cet attribut alt pour ajouter un petit cartouche jaune pâle avec cette description. Sachez, malgré tout, que ce n'est pas l'usage de base de l'attribut alt. Il existe un autre attribut qui permet effectivement de réaliser ce fameux petit cartouche. Donc, je vais mettre image, immeuble. Voici, j'enregistre. Nous allons à présent regarder dans un navigateur, index, et voilà mon image qui apparaît. Nous allons maintenant poursuivre un petit peu. Je vais ajouter une seconde image. Alors, je vais faire simplement un copier-coller de cette image, puisque finalement, il s'agira pratiquement de la même chose. Donc, image, img, src, nous sommes dans le même dossier, mais cette fois-ci, il s'agira de l'image numéro 9. Je vais simplement écrire une image, car je ne me souviens plus de la description. Enregistrons et regardons ce qui se passe. Image, et j'ajoute un petit guillemet. Voici, je rajoute cela également ici. Alors, nous allons regarder dans un navigateur ce qui se passe. J'actualise, et à présent, l'image s'est placée à côté. Par rapport à ce comportement, la balise img est une balise de type inline. Donc, les éléments se placent les uns à côté des autres. Il n'y a pas de retour à la ligne, comme c'est le cas pour certaines balises, telles que p, div, ou h, qui sont des balises de type bloc et qui imposent un retour à la ligne. Donc, deux images placées l'une en dessous de l'autre dans le code s'affichent l'une à côté de l'autre dans la page, avec un petit espace entre les deux espaces sur lequel nous aurons l'occasion de revenir un peu plus tard. Pour pouvoir créer des groupes d'images, par exemple, ou des groupes de figures, il existe en HTML5 une nouvelle balise qui s'appelle tout simplement figure. Cette balise permet de créer des regroupements. Il permet de signifier qu'attention, à cet endroit-là, dans cette zone-là, il va y avoir des images, des schémas, différentes choses graphiques. La balise figure a également, en son sein, une balise qui s'appelle fig.caption, qui permet d'écrire le titre de ce regroupement d'images ou de cette image. Alors, par exemple, je peux mettre transport parisien ou vue parisienne. Voici. Alors, comme d'habitude, il est important de bien imbriquer nos balises. Début de figure, début de fig.caption, le texte, fin de fig.caption, nos images et fin de figure. J'enregistre et regardons dans le navigateur. Voici. Donc, nous avons bien le titre situé en haut. Nous aurions pu également, éventuellement, le mettre dans la partie inférieure.
8 commentaires
5,0
8 votes
5
4
3
2
1
Polyores
Il y a 11 months
Commentaire
Bravo et bravo encore. Belle méthodologie. Hâte de voir la suite de la démystification du Html
ralahoul
Il y a 1 year
Commentaire
Une formation très intéressante et très bien construite.
eric.gk78
Il y a 3 years
Commentaire
excellent, compréhensible pour les débutants
alexwebtv
Il y a 3 years
Commentaire
Très bonne formation .
gabamano85
Il y a 3 years
Commentaire
Très belle présentation et facile à comprendre même pour un novice.
olivier_89
Il y a 3 years
Commentaire
explication très organisée et simple de comprendre pour les débutants
a.platiau_1
Il y a 3 years
Commentaire
Super formation. Très claire et très bien organisée.
ezerrou
Il y a 3 years
Commentaire
est ce la 2éme partie existe sur ce cours?
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5