Accueil » Articles » Apprenez à coder en HTML et en CSS !

Apprenez à coder en HTML et en CSS !

CHAPITRE 8 : INTEGRER DES IMAGES, DE L’AUDIO ET DES VIDEOS DANS UNE PAGE WEB GRACE AU HTML5

Introduction

Tout d’abord, il faut savoir que s’il est vrai que l’insertion d’images en HTML est assez simple et est bien gérée par tous les navigateurs depuis quelques années maintenant il n’en est pas de même pour l’audio et la vidéo.

En fait, il a fallu attendre le HTML5 pour voir l’insertion de contenus audio et vidéo facilités et pour trouver des navigateurs qui acceptaient ces contenus.

Dans ce nouveau chapitre, nous allons commencer par voir comment insérer une image puis nous verrons l’insertion de contenus audio et vidéo.

Insérer une image

Pour commencer sur de bonnes bases avec les images, je vais devoir vous parler des différents formats d’images.

Lorsque vous enregistrez une image sur votre ordinateur, vous pouvez en théorie choisir entre différents formats avec entre autre le png, le jpg ou jpeg, bitmap ou gif pour ne citer que les plus connus.

Comme vous vous en doutez, ces formats ne sont pas strictement équivalents et chaque format à été crée pour un type précis d’images.

Si votre image est une photographie, je vous recommande d’utiliser le format jpg. Si, en revanche, votre image est un dessin ou tout autre type d’image statique, préférez le png qui est un type qui gère également la transparence. Enfin, si votre image est animée, vous devrez choisir le format gif. Oubliez le bitmap qui est un format lourd et sans réel avantage.

Pensez à choisir avec attention le nom de vos images et évitez les caractères spéciaux et les espaces (préférez les underscores ou les tirets).

Pour insérer une image (finalement !), nous allons utiliser l’élément HTML img. L’élément img doit être placé au sein d’un élément de type block, comme l’élément p ou un div par exemple.

Pour que votre code soit valide, vous devez ajouter deux attributs à l’élément img : l’attribut source, abrégé src et l’attribut alternative, qu’on note alt.

L’attribut src indique le chemin de l’image. Vous pouvez lui donner un chemin relatif ou absolu. L’attribut alt sert à donner un texte descriptif à a photo. Ce texte est utile notamment dans les cas où votre image ne s’affiche pas ou pour les robots (de Google, entre autres).

Enfin, vous pouvez également ajouter l’attribut facultatif title, ce qui aura pour effet d’afficher un texte lorsque vos visiteurs passeront la souris sur votre image.

Illustrons immédiatement ce que nous venons de voir avec un exemple :

Utilisation de l element img en HTML pour inserer une image

Comme vous pouvez le voir, j’ai ici indiqué une adresse absolue en source de mon image (je suis allée la chercher sur Google Image). Notez que l’élément img est représenté par une balise orpheline.

Ajuster et positionner une image

Pour ajuster la taille d’une image en CSS, on utilise les propriétés height (hauteur) et width (largeur) que l’on connaît déjà sur notre élément img.

Si l’on ne spécifie qu’une hauteur ou qu’une largeur, la deuxième dimension va s’ajuster automatiquement. Attention, lorsque l’on spécifie une hauteur et une largeur, à ne pas trop casser les proportions initiales de l’image pour un meilleur rendu !

Une astuce performance et référencement : essayez tant que possible d’ajuster la taille de vos images avant de les mettre sur votre serveur (avec Paint ou PhotoShop par exemple).

En effet, si vous envoyez une image de 2000px de large sur votre serveur et que vous la redimensionnez à 400px par exemple par la suite avec le CSS, l’affichage peut être ralenti pour vos visiteurs.

Pourquoi ? Car, à chaque fois, notre serveur va envoyer l’image au format original et l’image devra être redimensionnée au format souhaité par le navigateur de vo visiteurs. Or, cela use évidemment beaucoup plus de mémoire et va donc influer sur le temps d’affichage de notre page web.

L’élément img est un élément de type inline par défaut. Cela sous-entend qu’une image va se positionner sur la même ligne qu’un autre contenu de type inline.

Utilisation de la propriete width pour redimensionner une image

Souvent, lors de la création d’un site web, nous voudrons qu’une image occupe sa propre ligne. Dans ce cas là, il nous faudra utiliser la propriété display en changer le type de l’élément img.

Changer le type d une image avec la propriete css display

On peut également utiliser la propriété float pour positionner une image, en utilisant les valeurs right ou left. Pour ajuster l’espace entre une image et le contenu qui l’entoure, on va utiliser la propriété margin. On peut même créer un cadre en utilisant également les propriétés padding et border.

Creation d un cadre pour habiller une image

Insérer de l’Audio

Tout comme pour les images, il existe différents formats audio. Cependant, ça se complique avec l’audio car il n’existe pas de format supporté par tous les navigateurs. Cela signifie qu’il va falloir indiquer plusieurs formats lorsque l’on va insérer de l’audio en HTML.

Les differents types de formats audio

Personnellement, je recommande d’utiliser au minimum les formats mp3 et ogg qui sont les deux formats les mieux supportés.

Pour ajouter de l’audio sur une page web, on va utiliser l’élément audio. Tout comme pour l’élément img, l’élément audio va demander un attribut src pour fonctionner. Cet attribut prendre en valeur l’URL du fichier audio.

Toutefois, si vous n’écrivez que cela, vous ne verrez rien à l’écran. En effet, par défaut, l’élément audio n’est pas affiché sur les pages web. Il va donc nous falloir utiliser d’autres attributs.

L’attribut controls, tout d’abord, va servir à afficher les boutons de contrôle tels que les boutons lecture, pause et volume entre autres. Cet attribut est donc bien évidemment obligatoire.

L’attribut autoplay va nous permettre de lancer automatiquement le fichier audio lors du chargement de la page. L’attribut loop nous permet de faire répéter la musique en boucle.

L’attribut width est utile pour modifier la largeur par défaut de la barre de l’élément audio.

Enfin, l’attribut preload nous permet de sauvegarder de la bande passante et d’accroître les performances de notre site. Cet attribut peut prendre trois valeurs différentes : metadata, auto et none. En pratique, on utilisera généralement la valeur auto qui va préloader toutes les informations et les données.

Entre les deux balises de l’élément audio, on peut ajouter un texte qui sera affiché dans le cas où le navigateur ne supporterait pas le format audio choisi comme par exemple : « Mettez à jour votre navigateur, on vit au 21è siècle ! ».

En théorie, il faudrait donc écrire ceci pour insérer de l’audio dans une page web :

Utilisation de l element audio pour insérer des musiques

Cependant, en écrivant notre élément audio comme cela, on ne peut pas insérer différents formats audio pour les différents navigateurs, ce qui est très gênant.

En pratique, nous utiliserons donc un deuxième élément source et écrirons cela pour insérer de l’audio qui sera lu par tous les navigateurs :

Gerer la compatibilite des differents formats audio avec les navigateurs

Ainsi, le navigateur de vos visiteurs lira la version qu’il reconnaît et ignorera les autres.

Notez que j’ai donné des valeurs égales aux noms des attributs pour controls et autoplay. En théorie, il n’est pas obligatoire de préciser de valeur pour ces attributs.

Cependant, comme tout attribut doit théoriquement posséder une valeur en HTML, il est plus « propre » d’écrire cela comme je l’ai fait. Libre à vous de faire comme vous le voulez !

Insérer de la Vidéo

Pour créer et afficher une vidéo, il nous faut obligatoirement trois choses : un codec audio (format mp3, ogg, etc.), un codec video (h.264, ogg thoera, webM) et un format contener dans lequel on va stocker ces deux éléments (généralement avi, mp4 ou mkv).

Là encore, il n’existe pas de format supporté par tous les navigateurs et il est donc recommandé d’en utiliser plusieurs pour être certain que la vidéo soit correctement affichée.

Liste des differents formats video

Pour ajouter une vidéo, on utilise l’élément video. Les attributs pris par cet élément sont exactement les mêmes que ceux pris par l’élément audio, à savoir : src, autoplay, controls, loop, preload et width.

Contrairement aux éléments audio, une vidéo sera par défaut affichée sur une page web.

Il est également possible d’ajouter un attribut poster à votre vidéo. L’attribut poster permet de télécharger et d’afficher une image qui sera affichée avant le lancement de la vidéo.

Une illustration ? Bien sûr !

Exemple pour insérer du contenu video

Une autre alternative, beaucoup plus simple, pour ajouter de la vidéo ou de l’audio sur son site est de stocker ces contenus sur des sites comme YouTube, Dailymotion ou Vimeo puis de les intégrer à votre site grâce au code d’intégration fourni.

De cette manière, vous n’aurez plus aucun problème d’affichage quelque soit le navigateur de vos visiteurs puisque la transcription dans différents formats est effectuée par les sites hébergeurs (et autant vous dire que c’est très complet !).

Les Eléments Figure et Figcaption

Les éléments figure et figcaption ont été créés pour marquer sémantiquement du contenu comme des images, de l’audio ou de la vidéo.

L’élément figure est un élément de type block. On l’utilise autour d’images, de contenus audio ou vidéo ou de blocs de code.

L’idée est d’utiliser l’élément figure pour envelopper du contenu lorsque celui-ci n’est pas strictement décoratif. A l’intérieur de l’élément figure, on peut utiliser l’élément HTML figcaption qui va nous permettre d’accoler une légende à notre contenu.

Presentation des elements figure et figcaption

59 commentaires

  1. Salut pierre j’ai déjà lu certaines de vos vidéos sur youtube et c’est là que je ai connu… honnêtement avec vous j’ai vite appris les bases et c’est pourquoi j’ai cherché votre site… Et je suis sûr qu’en suivant tous vos cours je pourrais me débrouiller, j’apprécie votre travail c’est vraiment une bonne pédagogie que vous suivez et cela aide les débutants comme nous surtout que les cours avec ce genre de méthode est difficile à trouver en français… Bon courage et je vous remercie pour le temps que vous avez pris pour faire ces cours, on sent que vous avez vraiment mis du sérieux

  2. Je tiens à vous remercier et à vous féliciter pour la simplicité et la clarté des tuto. Les videos sont une méthode très utiles et efficace pour apprendre la programmation. Vous êtes méthodique ce qui facilite la compréhension, mais ce que j’ai pas aimé c’est la pagination en fin d’articles. Je crois qu’un menu pour pouvoir accéder à un cour précis serai plus utile si on veut faire une petite révision.
    J’ai parcouru les tuto PHP, c’est génial, vous allez surement avoir du succès donc continuez comme ça, enrichissez la bibliothèque francophone, je sais que gérer un site à long terme et maintenir la même cadence n’est pas si facile que ça.
    J’adore la programmation web et je passe mon temps entre les sites, je suis heureux de tomber sur le votre par hasard en faisant une recherche google sur les fonctions PHP.
    J’utilise wordpress, je serai heureux si vous écriviez des tuto sur ce CMS, notamment la création d’un thème en utilisant des videos.
    Merci encore Pierre Giraud, bonne continuation.

    • Bonjour,

      Merci beaucoup pour votre commentaire et vos encouragements ! Je prends également note de vos remarques. Merci encore !
      Je vais essayer de faire quelques cours sur WordPress prochainement.

      Amicalement,
      Pierre

    • Bravo Pierre,
      Vos cours sont géniaux. De plus les mots employés par vous sont précis et explicites.
      Merçi et bonne continuation.

  3. Heu… désolé il y a bien un sommaire sur votre site… mille excuses !

  4. Bonjour,
    Votre site est très pédagogique et très bien conçu. Je l’utilise depuis une dizaine de jours. Comme la chronologie des thèmes abordés me convient très bien, j’y reviens chaque jour. Il manque un sommaire pour reprendre la lecture là où je l’avais laissée. Cela éviterait une recherche fastidieuse à la « molette » et améliorerait grandement le confort de l’utilisateur.
    J’ai hâte de découvrir vos œuvres sur PhP et JavaScript… pour le moment je n’est trouvé que des cours « lourding » et indigeste.
    Encore merci !

    • Bonjour,

      Merci pour votre commentaire ! Je réfléchis depuis quelques temps déjà à comment proposer une ergonomie optimale pour les lecteurs tout en gardant un format « blog »… Ce n’est pas si simple que cela, mais j’y travaille !

      Amicalement,
      Pierre

  5. Merci pour ces cours que vous mettez a la porte de tout le monde. Je suis passionne du web comme vous et le tuto me permet de me forme en autodidacte.
    Merci encor

  6. Bonjour,
    votre cour est très impressionnant. Moi je l’adore beaucoup.
    Et j’ai une question, au fait au niveau du css on ne pas créer d’autre papier(fichier)? ou c’est dans le seul papier css (style.css) qu’on a crée qu’ on va mettre tous nos codes css liés à différents pages.

    • Bonjour,

      Merci pour votre commentaire. Vous pouvez créer autant de fichier CSS que vous le souhaitez, le tout étant de ne pas oublier de lier les fichiers CSS voulus aux fichiers HTML.

      Amicalement,
      Pierre

  7. Bonjour Pierre Giraud! C’est cherchant des vidéos sur youtube concernant le HTML / CSS que je suis tombé sur par hasard une de tes vidéos:HTML/CSS. J’avoue que le cours sur HTML/CSS est très pédagogique simple . Je suis sûr qu’avec tes cours je vais savoir coder tout comme toi.

    Merci!

  8. bonjour Pierre,
    je saisi cela peut paraître c..
    mais je ne parviens pas à trouver une adresse mail pour télécharger js bin, lol
    on me renvois systématiquement à node que j’ai téléchargé, et puis … ?

    je suis sur mac maverick,;textWrangler

    merci; A+

  9. Bonjour Pierre,

    Merci infiniment pour vos cours (je suis celui sur le html/css actuellement.
    C’est clair et bien enseigné.

  10. Boivin Christophe

    Bonjour Pierre,

    C’est simple, l’un des meilleur tutoriel (voir le meilleur) pour apprendre HTML et CSS.
    Je commence à peine la construction de mon futur site dédié au Moyen Age.
    J’ai plus appris avec ce tutoriel en quelques heures que d’autres en plusieurs jours.

    Merci

  11. Bonjour Pierre,

    Il se fait tard, mais après avoir regarder tes quelques 4h30 de cours html/css, je ne pouvais pas m’endormir sans te laisser un commentaire. Ton approche pédagogique est tout bonnement incroyable (moi qui passe le concours de prof dans l’année, ça met la pression 🙂 ). Et j’en ai vu des tutos de tout genre, mais je dois dire que rares sont ceux avec une voix aussi agréable à écouter pendant plusieurs heures derrière un écran. Je ne peux que te féliciter pour ton travail en espérant pouvoir suivre tes prochaines vidéos (notamment sur le responsive design). Bon trêves de compliments, tu y prendrais gout…soit certain que je passerai par toi une fois mon site terminé pour prendre un herbergeur qui te rapporte quelques piecettes. Encore bravo et à bientôt.
    Boris

    • Bonjour,

      Merci beaucoup pour ce commentaire qui fait très plaisir à lire, d’autant plus de la part d’un futur professeur (je l’espère !) ! Et merci d’avance pour l’attention quant à l’hébergeur. Bon courage pour la suite !

      Amicalement,
      Pierre

  12. super votre approche – pouvez vous m’envoyer le fichier PDF
    merci
    cordialement
    alain

  13. Bjr mr Pierre avant tout merci pour ce tuto sur comment crée un site avec HTML et CSS encore merci mes j’aimerai avoir aussi la suite de vos vidéo pour ce cour. Je vais m’abonner maintenant sur votre compte youtube et j’espère avoir un liens pour avoir la suite des cours

    Merci

    • Bonjour,

      Vous pouvez trouver toutes les vidéos de mon cours HTML / CSS sur mon site dans l’article relatif, ou sur YouTube. Le cours est complet et toutes les vidéos sont là.

      Amicalement,
      Pierre

  14. Bonjour, et bonne et heureuse année 2015.
    Merci de votre aide pour un grand débutant comme moi. En formation Community Manager depuis 1 mois, j’ai effectivement compris qu’il va m’être utile d’avoir des bases pour gagner du temps avec les développeurs par exemple.
    Vos vidéos sont pédagogiques. Cela fait plaisir quand on trouve quelqu’un qui se met à la portée des autres.
    Pourriez vous en retour m’envoyer le support sur ma boite mail. Je vous écris en parallèle sur pierre.giraud@edhec.com.
    Bien à vous
    OA

  15. Bonjour,

    Tout d’abord une très bonne année à toi. Ensuite un grand merci pour tes tutos qui sont très explicites et très complets. Je me suis abonné à ta chaine Youtube et je vais suivre l’évolution de ton site. si j’ai besoin de ton aide je n’hésiterai pas à faire appel à toi. Encore merci pour tes tutos 😉

  16. Salut Pierre,

    tout d’abord, merci beaucoup pour tes cours et je te souhaite une très bonne et heureuse année. J’espère apprendre le HTML, le CSS et tout savoir sur le PHP via tes cours :). Autrement dit, j’espère que tu nous réserve encore de nombreuses vidéos. 🙂 Je n’ai malheureusement pas eu le doc PDF. Peux-tu me l’envoyer par mail stp ? 🙂

  17. Salut,
    Merci bcp pour tes efforts, je suis débutant et j’ai une petite question concernant le problème d’affichage des accents sachant que j’ai utilisé le metacharset « utf-8 » comme indiqué, et j’ai toujours des points d’interrogations à la place. Peux-tu m’aider sur ce point s’il te plait ?
    N.B. j’utilise un mac ; j’ai testé sur Firefox et Safari (même problème d’accents).
    Merci encore une fois.

    • Bonjour,

      Le meta charset va aider Google (ou Yahoo, etc.) à savoir comment lire ta page. Il n’y aura donc pas de problème d’accent une fois sur le web. Cependant, si tu travailles en local, il faut bien faire attention à ce que ton éditeur soit lui aussi en tuf-8. Par défaut, je sais qu’avec Mac on a droit au format étrange « Mac-Rom »… Il faut donc chercher l’onglet « encodage » dans ton éditeur de texte et fixer ça.

      Amicalement,
      Pierre

      • Mohamed FERSSIWI

        Je te souhaite d’abord une année 2015 pleine de succès dans tes projets.

        Effectivement, j’ai changé dans les préférences de Komodo « Custom encoding » et « Default encoding » à « Utf-8 » j’ai écrasé mes anciens fichiers html mais les « ? » persistent sur firefox et safari même avec un test en ligne !

        Merci bcp !

        • Bonjour,

          Merci, bonne année à toi aussi !

          Si tu utilises Komodo, regarde en bas de ta fenêtre lorsque tu as un fichier ouvert. Tu peux changer l’encodage à partir de là également. Ensuite, normalement, il n’y a plus qu’à enregistrer le fichier et à rafraichir la page si elle était déjà ouverte. Les points d’interrogations devraient disparaitre… en théorie.

          Bon courage !

  18. bonjour et MERCI.

    Super travail, tutos clairs, nets et précis (sans parler de la qualité pédagogique des vidéos).
    Vidéos découvertes par hasard au gré de mes navigations sur le web… maintenant votre site est épinglé dans mes favoris, et je viens le voir régulièrement.
    SUPER
    Philippe

  19. bonjour pierre
    j’essaye de partager sur fbook pour telecharger le pdf mais ca ne marche pas.
    je vous envoies alors un email à pierre.giraud@edhec.com

  20. Salut,
    J ai un soucis je tweet je share mais rien ne passe.j aimerai bien avoir le tuto en pdf ce serait plus utile pr moi.Merci d avance.

  21. Je viens de parcourir rapidement vos tutos,ils sont impecable.Merci de continuer avec cette allure.J;ai aussi le même problème avec un des internautes concernant le téléchargement.Voici mon adresse mail

  22. Salut Pierre,

    Merci beaucoup pour ces tutos très bien conçus !
    Je voulais télécharger le pdf mais malgré un partage sur twitter, et le partage facebook qui ne fonctionne pas, je n’ai pas pu me le procurer.
    Si tu peux faire qqch 🙂

    Merci à toi !

    Deborah

  23. J »ai prix gout aux html et css grace à tes tutos.ces derniers moments, je me suis vraiment accroché à mon ordi pour revoirr agréablement et sans cesse tes tutos.Bon courage et merci.

  24. Juste un grand merci pour toutes ces formations, ce temps passé à nous expliquer (ce que tu fais très bien).
    Un grand MERCI encore et continue c super !!!!!!

  25. Bonjour Mr.Pierre:
    Je voudrais vous remercier pour votre formation si instructive,mais,est-ce à tout ce qu’il y a à savoir dans ces deux langages ? Je veux apprendre plus
    Par exemple,votre formation PhP e SQL sur youtube ,est elle complète ou y a t-il d’autres vidéos à venir ?
    Et pour finr,où pourais-je apprendre plus ?

    • Bonjour,

      Il y a toujours à apprendre ! Mais concernant HTML et CSS, je fais quand même un joli tour d’horizon avec ce cours, donc on peut dire que la formation est « complète ». Concernant mon cours sur PhP et MySQL, celui ci est en cours; et est assez loin d’être terminé !

      Il existe de nombreuses autres ressources pour apprendre à coder, comme le site du w3c par exemple. Je vous laisse chercher sur ce point.

      Amicalement,
      Pierre

  26. Salut Pierre,

    Je viens de terminer cette excellente formation sur le html et le css. Merci de donner de ton temps et de partager tes connaissances! C’est un vrai plaisir de te suivre.
    Je commence de suite ta formation sur le php!

    A bientôt
    Grégory

  27. Bonjour Pierre, je tenais tout d’abord à prendre le temps de vous écrire un petit commentaire de remerciement (ce qui n’est pas dans mon habitude) mais le partage de vos connaissances avec une méthode très fluide comme la votre est vraiment super, vous aidez je pense beaucoup d’étudiants ou autres professionnels, je dois même vous avouer que vous êtes beaucoup plus clair dans vos explications que la plupart des professeurs d’informatique.
    Bonne continuation à vous et à votre travail.

  28. Bjr Pierre , j’ai suivi le cours sur html et css, c’est vraiment très claire et compréhensible, j’ai créer un compte sur youtube mais je ne sais pas comment acédé à vos vidéo étand dans mon compte youtube je vx uniquement suivre vos cours car tu explique clairement et ça m’aide à avancé sur le codage htmal & css.

    Que Dieu vous prolonge la vie bcp des d’années ,afin que d’autre génération soient former par votre expérience.
    MERCI EN TOUT CAS Pierre tu es excellent;

    J’attend impatiemment les cours de langage PHP

    Merci à vous !

  29. j’ai suivi vos cours avec beaucoup d’intérêt. ils sont vraiment très bien agencés, merci bcp!!
    par ailleurs, je ne sais toujours pas comment découper une page comme ta page d’accueil.

    encore merci

  30. Merci Pierre Giraud pour votre formation sur le HTML et le CSS, grâce à vous je suis prêt à attaquer le PHP et le SQL !

    Encore merci !

  31. Bonjour

    Merci, beaucoup pour la presentation, mais est ce tu peux m’aider à telechrger le jsbin pour et l’exemple de la presentation afin de relire l’esempe à tete repose.
    ça urge pour mettre l’evemple en ppratique afin de maitriser bien les cours .
    et est ce que tu as fait les cours de Javascript et PHP Merci d’avance et à bientot

    • Bonjour,
      Impossible de télécharger JsBin : c’est un service offert sur le web sous forme de site web, pas un logiciel téléchargeable. Concernant Js et PhP je suis en train de créer les scripts.
      Amicalement,
      Pierre

  32. fodemoudou kaba

    je suis lnformaticien et je souhaitrais apprendre beaucoup de langage avec pierre car j’aime sa façon d’enseigner c’est un vrai pédagogue

  33. Bonjour,

    Je navigue depuis longtemps sur le WEB pour examiner les tutoriels proposés sur divers sujets.
    Concernant l’apprentissage du HTML et du CSS, je trouve que vos cours sont d’une excellente qualité, même par rapports à des concurrents tels que le site du ZERO qui excelle dans la méthode.
    Bravo les 4 vidéos sont géniales.
    Apres avoir travaillé de longs mois sur ces 2 langages, j’essaie d’aborder doucement le JavaScript.
    Qui vivra verra !!
    Bravo encore et merci

    • Bonjour,

      Merci beaucoup pour ce commentaire qui fait plaisir à lire ! Je suis heureux que mes cours vous aient plu & aient pu vous être utiles.
      J’ai été un petit peu débordé par les événements ce mois-ci (déménagement, site e-commerce à créer…) ce qui explique le manque d’article. Cependant, je compte bien finir mon cors sur HTML et CSS et ensuite poursuivre sur ma lancée avec du PhP et le JavaScript. N’hésitez donc pas à revenir jeter un coup d’oeil de temps en temps !

      Dans tous les cas, bon courage dans votre apprentissage et encore merci,
      Pierre

Répondre

Votre adresse email ne sera pas publiée. Les champs obligatoires sont marqués d'une étoile *

*