• Fredcloclo2

    Il est simple d'utiliser l'icône "Image" de la création d'article, ce qui va nous permettre d'aller chercher, dans nos fichiers, l'image à publier, d'en déterminer les dimensions et le positionnement.

    Il semble naturel de commencer comme ça !

    Cependant, à part l'ouverture en grand de votre vignette, au clic, vous n'aurez pas le choix de faire grand chose d'autre.

    L'autre façon, moins simple, est de copier un code html, par exemple, une adresse d'image, afin de pouvoir la décorer et l'animer.

    Une chose très importante: un code html, du genre adresse image: https://rigolotes.fr/img/normal/20210217/BJVU/20210217.jpg

    Ne doit pas être copiée sur une page de traitement de texte (Word ou open office...) car ces programmes transforment l'adresse ce qui fait que, l'éditeur html ou code source (<>) ne saura plus la lire !

    Comme beaucoup, je ne comprenais pas pourquoi et j'ai fait cette erreur, au début; ce n'est pas la peine que vous perdiez du temps à faire mon erreur !

    Dans les programmes de votre système de gestion (Windows,Mac ou Linux pour moi), vous trouverez un programme Bloc-note, Editeur de texte ou Editeur html, qui est adapté à enregistrer ces adresses et les codes; à vous de le rendre accessible facilement car il va vous servir souvent.

    Ouvrir ce programme vous ouvre une page vierge, souvent avec <p></p> en première ligne, qui vous ouvre un paragraphe (<p>) pour y écrire votre texte.

    Fredcloclo2

    Icône code source <> qui ouvre:

    Fredcloclo2

    Si vous ouvrez le code source après avoir sélectionné une image dans vos fichiers, vous trouverez ce genre d'écriture:

    <p style="text-align: center;"><img src="https://rigolotes.fr/img/normal/20210217/BJVU/20210217.jpg" alt="Fin de semaine" /></p>

    L'attribut surligné en jaune est le choix de positionnement que vous avez défini.

    L'écriture d'une adresse d'image doit être précédé et suivi par ce qui est surligné en vert.

    alt est un code qui s'ajoute automatiquement selon le titre de votre article: pas de commentaire.

    Nous voilà avec les bases d'une écriture par code html puis CSS, que nous verrons ensuite.