HTML

 Encadrer une photo HTML


en dessous de la src photo je met : style="border-radius: 10px; border: 4px solid rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 10px; padding: 4px;"

 
 Explication rapide

  • border: crée le cadre (tu peux changer la couleur et l'épaisseur).
  • padding: ajoute de l’espace entre la photo et le cadre.
  • border-radius: rend les coins arrondis.
  • width: ajuste la taille de l’image.

Appliquer le même style à toutes les images

Tu peux appliquer le même style à toutes les images d'une page HTML d'un seul coup sans avoir besoin de le répéter partout, en utilisant le CSS.
Avec une règle CSS pour toutes les images

Dans ton fichier HTML, dans la partie <head>, ajoute ceci :

<style> img { border-radius: 10px; border: 4px solid rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 10px; padding: 4px; } </style>


👍Encadrer un texte

Avec une règle CSS créer class : class="encadre"

Dans ton fichier HTML, dans la partie <head>, ajoute ceci :

<!--encadre quelque chose <div class="encadre">Ceci est un texte encadré......</div>--> <style> .encadre { border: 2px solid #4CAF50; /* bordure verte */ padding: 10px; width: fit-content; font-family: Arial;

        background-color: #fff9c4; /* jaune clair */ } </style> <!--après pour encadrer quelque chose <div class="encadre">Ceci est un texte encadré......</div>-->

avant le texte que je veux encadrer je met :

 <div class="encadre"><!--/*-debut encadre-------------------------*/-->

et à la fin du texte que je veux encadre je met :

</div>--&gt; <!--/*-fin encadre-------------------------*/-->

👍Ajouter des commentaires dans fichier html

Les commentaires dans un fichier HTML sont très utiles pour ajouter des annotations ou des explications sans qu'elles n'affectent l'affichage de la page. En HTML, les commentaires sont entourés par la balise spéciale <!-- au début et --> à la fin.

    👍Étapes pour insérer un tableau dans un article Blogger :

    1. Va sur Blogger et ouvre ton article (ou en crée un nouveau).

    2. Cliquez sur l’icône < >    HTML  (ou "HTML view", selon la version).
    3. Colle ce code HTML pour un tableau simple :

      HTML tableau avec 4 colonnes

      <table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">

        <tr>

          <th>En-tête 1</th>

          <th>En-tête 2</th>

          <th>En-tête 3</th>

          <th>En-tête 4</th>

        </tr>

        <tr>

          <td>Donnée 1</td>

          <td>Donnée 2</td>

          <td>Donnée 3</td>

          <td>Donnée 4</td>

        </tr>

        <tr>

          <td>Donnée 5</td>

          <td>Donnée 6</td>

          <td>Donnée 7</td>

          <td>Donnée 8</td>

        </tr>

      </table>

      Explication :

      • <table> : commence un tableau.

      • <tr> : définit une ligne (table row).

      • <th> : cellule d’en-tête (table header), souvent en gras et centrée.

      • <td> : cellule de données (table data), les vraies données du tableau.

      Tu peux ajouter autant de lignes <tr> que nécessaire selon le nombre d’entrées.

      1. Tu peux ensuite revenir en mode Rédiger" pour voir le tableau.

      HTML tableau une colonne 2 ligne

      <table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">

        <tr>

          <th>En-tête 1</th>

        </tr>

        <tr>

          <td>Donnée 1</td>

         </tr>


      </table>

        💡 Astuces :

        • Tu peux personnaliser le style avec du CSS

          (couleurs, bordures, alignement...).
          Pour éviter les tableaux moches, pense à ajouter ceci dans la balise <style>

        • Et pour uniformiser le style de tableau entête et corps je mais en haut de la page

        HTML

        <!--Début le même style à tout les tableau--> <style> table { width: 100%; table-layout: auto; border-collapse: collapse;

        margin-left: auto; /* centrer vos tableaux sur la feuille */ margin-right: auto;/* centrer vos tableaux sur la feuille */ } th { padding: 10px; font-weight: normal; background-color: #f5f5dc; <!-- Beige clair --> color: #333333; <!--Gris fonce doux --> } </style> <style> td { padding: 10px; font-weight: normal; color: #444444; background-color: #fff9c4; <!-- JAUNE CLAIRE --> } </style> <!--Fin le même style à tout les tableau-->


        Tu peux coller ce style en haut de ton article HTML, juste avant le tableau.

        🧾 Explication des propriétés
        • width: 100%; : Permet au tableau de s'étendre sur toute la largeur de son conteneur, quelle que soit la taille de l'écran.

        • table-layout: auto; : Laisse le navigateur ajuster automatiquement la largeur des colonnes en fonction du contenu, assurant ainsi une adaptation optimale.

        • border-collapse: collapse; : Fusionne les bordures adjacentes des cellules pour une apparence plus propre et uniforme.​
        • CSS-Tricks
        Couleur
        		Code Hex Remarque
        Jaune pâle #fff9c4
        Bleu vif #2196f3
        Bleu ciel #81d4fa
        Gris anthracite #424242
        Vert sauge #a8d5ba
        Gris clair #e0e0e0
        Lavande clair #e1bee7

        Appliquer le même style à toutes les images & a tout les tableau 

        Avec une règle CSS copier coller en haut de HTML

         <!--Début le même style à tout les tableau-->

        <style>

          th {

            padding: 10px;

            font-weight: normal;

            background-color: #f5f5dc; <!-- Beige clair -->

            color: #333333;  <!--Gris fonce doux  -->

          }

        </style>

        <style>

          td {

            padding: 10px;

            font-weight: normal;

            color: #444444;

            background-color: #fff9c4; <!-- JAUNE CLAIRE -->

          }

        </style>

         <!--Fin le même style à tout les tableau-->

        <!--***********************************-->

         <!--début le même style à toutes les images-->

        <style>

        img {

          border-radius: 10px;

          border: 4px solid rgb(51, 51, 51);

          box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 10px;

          padding: 4px;

        }

        </style>

         <!--Fin le même style à toutes les images-->

        <!--***********************************-->

        insérer une ligne de séparation en HTML

        Cela crée une ligne horizontale grise fine.
        HTML 

        <hr>


        Générer automatiquement un sommaire cliquable à partir des balises h1 h2 h3 etc

        ✅ 1. Méthode semi-automatique avec un script JavaScript (fonctionne sur Blogger)

        Tu peux insérer ce script JavaScript au début de ton article (dans la section HTML), il va scanner les balises H2 à H4 et générer un sommaire automatiquement :

        HTML 
        <!--générer automatiquement un sommaire cliquable  Script complet avec  <h2>, <h3>, <h4>-->

        <div id="toc"></div>

        <script>
        document.addEventListener("DOMContentLoaded", function () {
          const article = document.querySelector('.post-body.entry-content'); // adapte ce sélecteur si besoin
          if (!article) return;

          const headers = article.querySelectorAll('h1, h2, h3, h4');
          if (headers.length === 0) return;

          const toc = document.getElementById("toc");
          const list = document.createElement("ul");

          headers.forEach((header, index) => {
            if (!header.id) header.id = "toc-" + index;
            const li = document.createElement("li");
            li.style.marginLeft = (parseInt(header.tagName[1]) - 1) * 10 + "px";
            li.innerHTML = `<a href="#${header.id}">${header.innerText}</a>`;
            list.appendChild(li);
          });

          toc.innerHTML = "<h2>Sommaire</h2>";
          toc.appendChild(list);
        });
        </script>

        <!--FIN générer automatiquement un sommaire cliquable  Script complet avec <h1>, <h2>, <h3>, <h4>-->

        🔧 Ce script :

        • scanne toutes les balises h1,h2, h3, h4,

        • crée un ID s’il n’y en a pas,

        • construit automatiquement une liste cliquable (sommaire),

        • fonctionne dans Blogger (à condition d'être en mode "HTML" dans l'article).

        📌 À faire :

        1. Colle ce code au début de ton article Blogger en mode HTML.

        2. Écris tes titres normalement avec les balises <h1>, <h2>, etc.

        3. Au chargement de la page, un sommaire cliquable s'affichera automatiquement avec tous les titres détectés.

        ✅ 2. Ajouter ce code dans un gadget Blogger (si tu veux l’avoir dans tous tes articles)

        Tu peux intégrer ce code dans un gadget HTML/Javascript ou dans le modèle Blogger (template), mais cela demande de modifier le thème.

        Commentaires

        Enregistrer un commentaire

        Posts les plus consultés de ce blog

        🛠 Utilisation de CustomUIEditor pour Personnaliser le Ruban Excel

        Image
          🛠 Utilisation de CustomUIEditor pour Personnaliser le Ruban Excel 📥 1. Téléchargement de CustomUIEditor CustomUIEditor est un outil gratuit qui permet de modifier le ruban d'Excel (ou Word) en ajoutant des onglets, groupes et boutons personnalisés via du code XML. → Voici comment le télécharger : Rendez-vous sur ce lien de confiance (ou recherchez "CustomUIEditor for Office 2007" sur Google). Téléchargez le fichier ZIP. Extrayez-le puis installez-le sur votre ordinateur (double-cliquez sur setup.exe ). ✨ Il fonctionne même avec les versions récentes d'Excel (2013, 2016, 365). ⚙️ Instructions de téléchargement et installation Clique sur le lien ci-dessus pour lancer le téléchargement du fichier  OfficeCustomUIEditorSetup.exe . Une fois téléchargé, lance l’exécutable pour installer l’éditeur. La plupart du temps, l’installation se fait rapidement sans intervention complexe.
        Lire la suite

        🗓️ Simulateur de Congés et Calendrier Collaboratif sous Google Sheets

        Image
        🗓️ Simulateur de Congés et Calendrier Collaboratif sous Google Sheets ✨ Objectif du simulateur Ce simulateur a été conçu pour gérer efficacement les congés du personnel d'une école ou d'une petite structure. Il permet : D'enregistrer les périodes de congé prises par chaque salarié. De calculer automatiquement les jours éligibles, hors dimanches et jours fériés. De visualiser les chevauchements de congés sur un agenda annuel. D'avoir un affichage par personne ou par date (vue calendrier). ⚡ Structure globale Le simulateur est composé de deux grandes parties : Agenda individuel (par personne) avec dates, jours fériés, dimanches exclus. Calendrier global condensé où les colonnes représentent les dates, et les lignes les personnes. 📋 Partie 1 : Simulation individuelle (feuille principale) ✅ Saisie des périodes de congés Période 1 : Date début N4 et date fin O4 Période 2 : (facultatif) Date début N5 et date fin O5 🔹 Affichage des dates dans la colo...
        Lire la suite

        Explication VBA : Facturation automatique Gestion client

        Mettre à jour automatiquement les noms des colonnes (en-têtes)  dans un tableau structuré Excel appelé  Client ModifierEntetesEtLibelles Sub ModifierEntetesEtLibelles()     Dim ws As Worksheet     Set ws = Param_CL_et_PRIX ' Feuille contenant les tableaux     Dim tblClients As ListObject     Set tblClients = ws.ListObjects("Clients")     Dim tblParam As ListObject     Set tblParam = ws.ListObjects("param_nom_service_produit")     Dim i As Long     Dim ancienNom As String, nouveauNom As String     Dim cell As Range     ' Parcourir chaque...
        Lire la suite