• ACCUEIL
  • DEBUTER
  • CONFIGURER
  • AMELIORER
  • PERFECTIONNER
  • PHOTOS
  • MEDIAS
  • GERER
  • DIVERS
  • AIDE
    • blogger

    Présenter les images avec du code HTML & CSS

    Quelques éléments pour mieux configurer l'affichage des ses images et photos,
    mais ici il faut travailler en mode HTML,et parfois utiliser le CSS.
    Uniquement des notions de base pour créer des cadres, aligner correctement ses photos, arrondir les angles...

    1-MODIFIER LA PRESENTATION D' UNE IMAGE avec du code HTML : bases
    2-ARRONDIR les COINS d'une image (en ligne)
    3-QUELQUES IMAGES PRESENTEES en HTML & CSS
    4-UNE SERIE D'IMAGES bien ALIGNEES
    -en HTML (via un tableau)
    -en CSS
    5-AUTRE SOLUTION : CREER UN ARTICLE en 2 ou 3 COLONNES




    1-MODIFIER LA PRESENTATION D' UNE IMAGE avec du code HTML :  bases

     1-1 Photo de base
    le code pour insérer une image en HTML

    <img src="https://URL IMAGE">

    Plus, éventuellement
    -avec texte alternatif: <img src="URL IMAGE" alt="texte">
    -avec lien: <a href="URL LIEN"> <img src="URL IMAGE" alt="texte"></a>
    -taille de l'image avec "width" en indiquant la largeur en px (pixels) ou en pourcentage (%) de la largeur disponible. Ex: width: 600px; width: 50%


    PHOTO Classique, insérée en html de base


    1-2 Ajout de bordure

    EXEMPLE 1
    <img src="URL IMAGE" style="border: 1px solid rgb(187, 187, 187); margin: 0px auto 10px; padding: 4px;">






    EXPLICATIONS
    Il faut ajouter une balise style=
    border: 1px solid rgb(187, 187, 187);
    -épaisseur bordure => en px (passer à 6 ou 8 pour effets relief)
    -nature ligne: =>"solid" (trait) / "dotted" (pointillé) "/ "dashed" (pontillé épais) / "double" (double trait) / "ridge" ou "groove" (double avec 2 couleurs), "outset"ou "inset" ( avec double couleurs)

    -couleur rgb =>ici gris pour autre gris foncé rgb(128,128,128)
    margin: 0px auto 10px; => marge
    padding: 4px; => marge intérieure

     EXEMPLE 2
    <img src="URL IMAGE" style="border: 8px ridge rgb(187, 187, 187); padding: 5px;">





    EXEMPLE 3

    <img src="URL" style="border: 5px outset rgb(187, 187, 187);">
    2 -ARRONDIR les COINS d'une image EN LIGNE 

     Aller sur ce site ROUNDPIC
    vous pouvez configurer :

    RESULTAT


    3- IMAGES présentées en HTML & CSS  

     3-1 Présentation de  2 images 
    Explication
    Le code utilisé comprend
    • d'abord une partie en CSS (dans balise< style>)
    • l'affichage des photos qui fait référence au css via  l'attribut class="image"
    • ici :  les images sont réduites de 50% par rapport à la largeur de l'article, sont centrées et sont arrondies










    3-2 Une Image arrondie en CSS
    Explication
    • d'abord une partie en CSS (dans balise< style>)
    • l'affichage des photos  fait référence au css via  l'attribut class="image1"
    • ici :  les bords de l'image sont arrondis (si la photo était en  "carré" l'image serait ronde)








    4-PRESENTER UNE SERIE D'IMAGES bien ALIGNEES 

    Comment mettre dans un article plusieurs photos bien positionnées ?

    Essentiel
    => Lire le dossier consacré à la création de tableaux dans un article  Blogger
    + 
    =>si vous avez beaucoup de photos créer un "slider/diaporama" : voir notre dossier dans le Menu  rubrique "Photos"

    A-en HTML (tableau)

     Lorsque vous avez de nombreuses photos à publier dans votre article, il est utile de maîtriser la mise en page. Le plus simple consiste à créer un tableau correspondant à votre mise en page et d'y insérer vos photos.

    La difficulté consiste à concevoir le tableau et, ensuite, copier/coller le code en mode HTML.

    Exemple 1 : 2 photos côte à côte

    Dans l’onglet HTML insérez le code suivant pour mettre 2 photos sur la même ligne :

    <table><tbody> <tr><td>photo 1-1 </td><td>photo 1-2 </td></tr></tbody></table>

    Revenez à l’onglet “texte” et vous avez ceci :
     
    Il suffit à présent d'insérer vos photos dans les cases ou se situe le texte


    Exemple 2 : 2 colonnes de 3 lignes

     il suffit de copier le code suivant:
    <table><tbody> <tr><td>photo 1-1 </td><td>photo 1-2 </td></tr> <tr><td>photo 2-1 </td><td>photo 2-2 </td></tr> <tr><td>photo 3-1 </td><td>photo 3-2 </td></tr> </tbody></table>

     Comment  obtenir le code correspondant  à un tableau plus complexe ?  voir notre dossier consacré aux tableaux qui donne plusieurs pistes simples


    Résultat  pour l'exemple 2
    Nous avons inséré une photo entre "photo" et  "son chiffre"
    Le texte des cellules est volontairement resté, et dans la dernière cellule, il n'y a pas de photos.
    Il suffit à présent de supprimer le texte.
    A noter que les photos ont des tailles différentes.


    photo
    1-1    		photo
    1-2
    photo 2
    -1    		photo 2
    -2
    photo 3
    -1    		photo 3-2


    IDEM  4 photos (taille identique)avec tableau couleurs...







    B- en CSS 




    blablabla

    blablabla

    blablabla

    blablabla

    blablabla

    blablabla


     LE CODE  source
    Objectif : Présenter des photos alignées  (3 par ligne)
    Remarque : on peut ajouter
    -des blocs de code  pour de photos supplémentaires
    -arrondir les angles en ajoutant dans #photos img :   border-radius: 20px;
    Modifier :
    -Taille des photos : ici  300px sur 200px  pour un affichage régulier
    -Indiquer : URL, titre  (s'affiche avec survol souris) et  commentaire (blablabla)



    5-AUTRE SOLUTION  : CREER UN ARTICLE en 2 ou 3 COLONNES

    Vous souhaitez écrire un article sur deux colonnes, sans créer de tableau ? 
    un peu comme dans la presse et surtout y positionner des photos ? 

    METHODE
    Là où vous souhaiter avoir vos 2 colonnes, en mode "HTML",  coller le code ci-dessous
    (bien sûr, vous pouvez/devez adapter la largeur des colonnes !)
    <div style="width: 66%; float: left;">Compléter ici le contenu de la colonne GAUCHE avec du texte, images, vidéo...</div>
    <div style="width: 34%; float: right;">Compléter ici le contenu de la colonne DROITE  avec du texte, images, vidéo...</div>
    <div style="clear: both;"></div>

    Remarque : pour faire 3 colonnes, même principe
    <div style="float: left; width: 33%;">
    Compléter ici le contenu de la colonne GAUCHE avec du texte, images, vidéo...</div>
    <div style="float: right; width: 34%;">
    Compléter ici le contenu de la colonne CENTRE  avec du texte, images, vidéo...</div>
    <div style="float: right; width: 33%;">
    Compléter ici le contenu de la colonne DROITE  avec du texte, images, vidéo...</div>
    <div style="clear: both;">
    </div>


    EXEMPLE AVEC 2 COLONNES INÉGALES


    COLONNE GAUCHE

    Compléter ici le contenu de la colonne gauche avec du texte, images, vidéo...
    Compléter ici le contenu de la colonne gauche avec du texte, images, vidéo..
    .Compléter ici le contenu de la colonne gauche avec du texte, images, vidéo...
    Compléter ici le contenu de la colonne gauche avec du texte, images, vidéo...




    Compléter ici le contenu de la colonne gauche avec du texte, images, vidéo...
    Compléter ici le contenu de la colonne gauche avec du texte, images, vidéo...
    COLONNE DROITE

    Compléter ici le contenu de la colonne droite avec du texte, images, vidéo...
    Compléments pour utiliser  HTML &  CSS
    Publié par
    Libellés :