• Orthorexique 2

    Nous avons vu comment récupérer les adresses de nos images et les dimensionner selon nos besoins; voyons comment les intégrer dans un texte, les décorer puis les animer (code CSS=page suivante !).

    Vous trouverez, sur le net, des sites qui abordent le sujet complètement; je ne vais faire que proposer les décorations (attributs) les plus classiques.

    Pour simplifier les explications, je vais utiliser de unités fixes, le pixel (px); si votre largeur de blog est paramétré en 100%, l'affichage s'adaptera chez votre visiteur.

    Les icônes de la barre d'outils vous fournissent des codes tout fait mais standards: lorsque vous choisissez un caractère en gras (B=Bold), le code va être écrit directement dans le code source par le programme.

    De même pour les positionnements, la taille de la police, la famille de caractères, la couleur du texte, le surlignage...

    Pour vérifier l'écriture automatique des attributs, vous les définissez puis vous ouvrez le code source (<>) et vous regardez les lignes écrites.

    Bien entendu, la barre d'outils ne peut comporter toutes les possibilités des attributs HTML et pouvoir intervenir dans le code source pour en écrire d'autres vont multiplier les possibilités de présentation.

    Pour les images placées dans un article, par l'icône "Image", par exemple, vous pouvez les dimensionner en cliquant dessus et en tirant sur les carrés aux angles (poignées de dimensionnement), au risque de les déformer puisque le ratio de vos images pourra être modifié.

    Mais voyons quelques attributs non proposés.

    Les bordures de cadre ou d'image:

    Une image est toujours placée sans un cadre (paragraphe p) par le programme:<p><img src="http...jpg"></p>

    Un paragraphe est toujours défini par une balise d'entrée: <p> et une balise de sortie </p>; ce principe est général pour la plupart des attributs.

    Les attributs sont toujours affectés à un élément sous la forme:style="les attributs séparés par un ;, à la suite"

    Un paragraphe dont nous voulons que la largeur et la hauteur soient de 400px et 200px va s'écrire:

    <p style="width:400px; height:200px;">son contenu</p>

    Si nous voulons que ce paragraphe, ou cette image, reçoive une bordure (dont il existe différentes formes):

    <p style="width:400px; height:200px; border:5px solid red;">son contenu</p>

    Si nous voulons que ce paragraphe ou cette image reçoive une ombre (différents paramètres):

    <p style="width:400px; height:200px; border:5px solid red; box-shadow:8px 8px 10px black;">son contenu</p>

    Si nous voulons que ce paragraphe ou cette image reçoive des angles arrondis (différents paramètres):

    <p style="width:400px; height:200px; border:5px solid red; box-shadow:8px 8px 10px black; border-radius:50%;">son contenu</p>

    Vous l'avez compris, c'est du meccano ! Vous trouverez différents attributs utiles pour la décoration sur le net.

    D'autres attributs permettent le positionnement de votre élément; il peut être placé à la suite des autres: position: relative ou en indépendant: position:absolute;

    Il peut être positionné dans la page par l'attribut transform: transform:translate(50px,20px); va le positionner à 50 px du bord gauche et à 20 px du bord haut du contenant.

    Il peut être positionné en profondeur: z-index:1; plus le chiffre est élevé et plus l'élément est en premier plan.

    Voilà une petite idée du principe général