Profitez de milliers de films, de jeux, de musiques, de livres, de magazines, et plus encore. À tout moment, où que vous soyez, sur tous vos appareils.

Problèmes -> Solutions

Liste des articles
+
Configurer .htaccess pour protéger un dossier avec .htpasswd
Manipuler des fichiers avec PHP
Optimiser toutes les tables d'une base MySQL
Théâtres de Béziers Saison 2022-2023
Quel répulsif contre les moustiques
Récupération de mot de passe BIOS pour ordinateurs portables
Les numéros d'urgence
Prince of Persia
Passer au 100% l'électrique
Comment entretenir un cactus de Noël
Choisir son vélo
Mettre de l'eau dans son moteur
Introduction au système Unix
Documents comptables
Envoyez votre CV à la bonne entreprise !
Parchance.fr : un créateur de documents d'activité en ligne
Que faire contre le moustique
Comment créer un modèle enfant Joomla 4
Cours Java
Apprendre la conjugaison
MariaDB / MySQL - Changer le mot de passe root
Code HTML de base pour les débutants
Activer Windows7 gratuitement
Rechercher une image sur le Web
Soumettre son site à Google, Bing, Aol, Entireweb
Taille des arbres
Comment échanger des variables entre PHP et JavaScript ?
Validation du balisage des documents Web
10 animations CSS sympas à ajouter à votre site
Formation HTML5
Optimiser la description d'une page Web
Changer le texte d'un élément HTML avec le CSS ou Javascript
30 exemples CSS

30 exemples CSS


la suite...

Comment empêcher le redimensionnement d’un textarea en CSS

Code...
textarea {
                    resize: none;
                }
                

 

Comment écrire des commentaires en HTML

Code...
<!-- Ceci est un commentaire HTML sur une seule ligne -->
                <!-- Ceci est un exemple de
                     Commentaire HTML multiligne -->
                

 

Comment placer une bordure à l’intérieur d’un bloc div en CSS en utilisant simplement la propriété CSS3 box-sizing avec la valeur border-box.  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                  <style type="text/css">
                 div {
                    box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                    width: 500px;
                    height: 100px;
                    border: 15px solid red;
                    background: black;
                    margin: 10px;
                    color: #fff;
                }
                  </style>
                  </head>
                  <body>
                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                  </body>
                </html>
                

 

Comment remplacer le Checkbox par un icone fontawesome  voir la démo

Code...
<html>
                <head> 
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                <style>
                .fancy-checkbox input[type="checkbox"],
                .custom-checkbox .checked {
                  display: none;
                }
                .custom-checkbox input[type="checkbox"]:checked~.checked {
                  display: inline-block;
                }
                .custom-checkbox input[type="checkbox"]:checked~.unchecked {
                  display: none;
                }
                </style>
                </head>
                <body style="font-size: 2em;">
                <label class="custom-checkbox">
                    <input type="checkbox" />
                    <i class="fa fa-fw fa fa-bell-o unchecked"></i>
                    <i class="fa fa-fw fa fa-bell-slash-o checked"></i>
                    Notification
                </label>
                </body>
                </html>
                

 

Comment créer deux div côte à côte de la même hauteur en CSS  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <style>
                      .row {
                        display: flex;
                      }
                      .col {
                        flex: 1; 
                        padding: 1em;
                        border: solid;
                      }
                    </style>
                  </head>
                  <body>
                    <div class="row">
                      <div class="col">Lorem ipsum gravida vitae tristique a, porttitor sit amet enim.</div>
                      <div class="col">Donec auctor sodales nunc quis tristique. Pellentesque et sollicitudin nisl, sed blandit quam. Quisque tortor enim, blandit id congue eget, sagittis quis ligula. Aenean gravida sagittis ultrices. Duis in erat nec ligula laoreet faucibus.</div>
                    </div>
                  </body>
                </html>
                

 

Comment supprimer l’espace entre les cellules d’une colonne d’un tableau en CSS en définissant simplement la valeur de la propriété CSS border-collapse pour les éléments <table> à collapse  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <style>
                      table{
                        border-collapse: collapse; 
                      }
                      table th, table td{
                        padding: 10px;
                      }
                      table, th, td{
                        border: 1px solid #000;
                      }
                      table th {
                        background-color: #272b33;
                        color: #fff;
                        vertical-align: middle;
                        padding-left: 10px;
                        padding: 20px;
                      }
                    </style>
                  </head>
                  <body>
                    <table>
                      <thead>
                        <tr>
                          <th>Ligne</th>
                          <th>Nom</th>
                          <th>Prénom</th>
                          <th>E-mail</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>1</td>
                          <td>Jean</td>
                          <td>Baptise</td>
                          <td>jeanbaptise@gmail.com</td>
                        </tr>
                        <tr>
                          <td>2</td>
                          <td>Thomas</td>
                          <td>Skant</td>
                          <td>thomasskant@gmail.com</td>
                        </tr>
                      </tbody>
                    </table>
                  </body>
                </html>
                

 

Comment changer une image au survol avec CSS en utilisant la propriété CSS background-image en combinaison avec la pseudo-classe :hover  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                  <style type="text/css">
                    .person {
                      width: 380px;
                      height: 720px;
                      margin: 60px;
                      background: url("/drupal/sites/default/files/pictures/2023-02/face.png") no-repeat;
                    }
                    .person:hover {
                      background: url("/drupal/sites/default/files/pictures/2023-02/dos.png") no-repeat;
                    }
                  </style>
                  </head>
                  <body>
                    <div class="person"></div>
                  </body>
                </html>
                

 

Comment rendre une DIV modifiable en HTML

Code...
<!DOCTYPE html>
                <html>
                  <body>
                    <h1 contentEditable="true">Titre</h1>
                    <div contentEditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac magna aliquam, venenatis lectus ut, efficitur felis.</div>
                  </body>
                </html>
                

 

Comment changer la couleur du texte au survol en CSS  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <style type="text/css">
                a {
                    -webkit-transition: color 2s;
                    transition: color 2s;
                }
                a:hover {
                    color: green;
                }
                    </style>
                  </head>
                  <body>
                    <h1>Lorem <a href="#">Survoler ce lien</a> ipsum.</h1>
                  </body>
                </html>
                

 

Comment ajouter l’ombre sur un texte en CSS en utilisant la propriété CSS text-shadow  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <style>
                    h1 {
                      text-shadow: 2px 2px blue;
                    }
                    </style>
                  </head>
                  <body>
                    <h1>Lorem ipsum dolor sit amet.</h1>
                  </body>
                </html>
                

 

Comment ajouter l’ombre aux éléments HTML en CSS en utilisant la propriété CSS box-shadow  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                  <title>Ajouter l’ombre aux éléments HTML en CSS</title>
                  <style> 
                    .box {
                      border: 1px solid;
                      padding: 10px;
                      box-shadow: 5px 10px #888888;
                    }
                  </style>
                  </head>
                  <body>
                    <div class="box">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                  </body>
                </html>
                

 

Comment créer un curseur personnalisé avec CSS  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <title>créer un curseur personnalisé avec CSS</title>
                    <style type="text/css">       
                      a{
                        cursor: url("cursor: url(’/drupal/sites/default/files/pictures/2023-02/cursorr.png’), default;"), default;
                      }
                    </style>
                  </head>
                  <body>
                    Lorem ipsum dolor sit amet, <a href="#">survoler ce lien</a> adipiscing elit.
                  </body>
                </html>
                

 

Comment afficher du texte sur une image avec HTML / CSS avec la propriété margin  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="UTF-8">
                    <title>Afficher du texte sur une image avec HTML / CSS</title>
                    <style type="text/css">
                .container {
                    display: inline-block;
                    position: relative;
                }
                .container .text {
                    background: rgba(0, 0, 0, 0.8);
                    z-index: 1;
                    position: absolute;
                    text-align: center;
                    font-family: Georgia;
                    margin: 0 auto;
                    left: 0;
                    right: 0;
                    top: 30%;
                    color: white;
                    width: 70%;
                }
                    </style>
                  </head> 
                  <body>
                    <div class="container">
                      <img src="/drupal/sites/default/files/pictures/2023-02/css-demo-fleur.jpg">
                      <div class="text">
                        <h1>Fleurs</h1>
                      </div>
                    </div>
                  </body>
                </html>
                

 

Comment supprimer l’espace blanc sous une image avec CSS  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <title>Supprimer l’espace blanc sous une image avec CSS</title>
                    <style>
                .box1,
                .box2 {
                    width: 200px;
                    border: 4px solid black;
                }
                .box2 img {
                    display: block;
                }
                    </style>
                  </head>
                  <body>
                    <h3>Comportement par défaut</h3>
                    <div class="box1">
                      <img src="/drupal/sites/default/files/pictures/2023-02/image-sans-espace-blanc.jpg">
                    </div>
                    <br>
                    <h3>Après la modification de la propriété display</h3>
                    <div class="box2">
                      <img src="/drupal/sites/default/files/pictures/2023-02/image-sans-espace-blanc.jpg">
                    </div>
                  </body>
                </html>

 

Comment changer la transparence du background sans affecter le texte  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <title>Comment changer la transparence du background</title>
                    <style type="text/css">
                body {
                    background-image: url("/drupal/sites/default/files/pictures/2023-02/background-bois.jpg");
                }
                p {
                    padding: 30px;
                    color: #fff;
                    font: 18px Georgia;
                    background: rgba(0, 0, 0, 0.7);
                }
                    </style>
                  </head>
                  <body>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </body>
                </html>
                

 

Comment créer une ligne verticale en HTML  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <title>Créer une ligne verticale en HTML</title>
                    <style>
                      .vertical-line{
                        border-left: 2px solid #000;
                        display: inline-block;
                        height: 130px;
                        margin: 0 20px;
                      }
                    </style>
                  </head>
                  <body>
                    Lorem ipsum
                    <span class="vertical-line"></span>
                    Lorem ipsum
                  </body>
                </html>
                

 

Comment redimensionner automatiquement une image pour l’adapter à un bloc DIV avec CSS en appliquant la propriété max-width afin qu’elle puisse s’adapter tout en maintenant ses proportions  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <title>Comment redimensionner automatiquement une image pour l’adapter à un bloc DIV</title>
                    <style>
                      img{
                        max-width: 100%;
                        max-height: 100%;
                        display: block;
                      }
                      .container{
                        width: 250px;        
                        border: 5px solid black;
                      }    
                    </style>
                  </head>
                  <body>
                    <h3>Auto adapter la taille de l’image au bloc div</h3>
                    <div class="container">
                      <img src="/drupal/sites/default/files/pictures/2023-02/image-sans-espace-blanc.jpg">
                    </div>
                  </body>
                </html>
                

 

Comment changer la couleur de la balise HR avec CSS  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <title>Changer la couleur de la balise HR avec CSS</title>
                    <style>       
                      hr{
                        height: 3px;
                        background-color: #ff7d95;
                        border: none;
                      }
                    </style>
                  </head>
                  <body>
                    <h1>Titre</h1>
                    <hr>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </body>
                </html>
                

 

Comment aligner un bloc DIV horizontalement avec CSS en utilisant la propriété margin avec la valeur « auto »  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <title>Aligner un bloc DIV horizontalement avec CSS</title>
                    <style>
                      .box {
                        width: 70%;
                        margin: 0 auto;
                        padding: 15px;
                        background: #ff7d95;
                      }
                    </style>
                  </head>
                  <body>
                    <div class="box">
                      <h1>Titre</h1>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                  </body>
                </html>
                

 

Comment définir la hauteur d’une DIV à 100% avec CSS

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <title>Comment définir la hauteur d’une DIV à 100%</title>
                    <style type="text/css">
                      html, body {
                        height: 100%;
                        margin: 0px;
                      }
                      .wrapper {
                        height: 100%;
                        background: #f285a4;
                      }
                    </style>
                  </head>
                  <body>
                    <div class="wrapper">La hauteur de cet élément DIV est égale à 100% de la hauteur de son élément parent.</div>
                  </body>
                </html>
                

 

Comment aligner le texte verticalement au centre d’une DIV avec CSS

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <title>Aligner le texte verticalement au centre d’une DIV avec CSS</title>
                    <style type="text/css">
                      .box{
                        height: 30px;
                        line-height: 30px;
                        padding: 15px;        
                        border: 2px solid #000;
                      }
                    </style>
                  </head>
                  <body>
                    <div class="box">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </div>
                  </body>
                </html>
                

 

Comment ajuster la taille d’une div à son contenu en CSS en utilisant la propriété CSS display avec la valeur inline-block  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <title>Ajuster la taille d’une div à son contenu</title>
                    <style>
                img {
                    border: 20px solid white;
                }
                .container {
                    display: inline-block;
                    border: 20px solid #000;
                }
                    </style>
                  </head>
                  <body>
                    <div class="container">
                      <img src="/drupal/sites/default/files/pictures/2023-02/image-sans-espace-blanc.jpg">
                    </div>
                  </body>
                </html>
                

 

Comment créer une liste sans puces en HTML  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <title>Créer une liste sans puces</title>
                    <style>       
                      ul{
                        list-style-type: none;
                      }
                    </style>
                  </head>
                  <body>
                    <ul>
                      <li>Lorem ipsum</li>
                      <li>Lorem ipsum</li>
                      <li>Lorem ipsum</li>
                      <li>Lorem ipsum</li>
                    </ul>
                  </body>
                </html>
                

 

Comment superposer une div sur une autre div avec CSS en utilisant la propriété CSS position en combinaison avec la propriété z-index  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <title>Superposer une div sur une autre div avec CSS</title>
                    <style> 
                .parent {
                    position: relative;
                    width: 300px;
                    height: 300px;
                    margin: 10px;
                }
                .child1 {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    opacity: 0.7;
                    background: red;
                }
                .child2 {
                    z-index: 1;
                    margin: 30px;
                    background: green;
                }
                    </style>
                  </head>
                  <body>
                    <div class="parent">
                      <div class="child1"></div>
                      <div class="child1 child2"></div>
                    </div>
                  </body>
                </html>
                

 

Comment redimensionner une image en background avec CSS en utilisant la propriété CSS background-size: cover  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <title>Redimensionner l’image en background avec CSS</title>
                    <style>
                .container {
                    width: 500px;
                    height: 400px;
                    background: url("/drupal/sites/default/files/pictures/2023-02/image-sans-espace-blanc.jpg") no-repeat;
                    background-size: cover;
                    border: 5px solid #000;
                    margin: 10px;
                }
                    </style>
                  </head>
                  <body>
                    <div class="container"></div>
                  </body>
                </html>
                

 

Comment désactiver un lien en utilisant uniquement CSS en utilisant la propriété CSS pointer-events  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <title>Désactiver un lien en CSS</title>
                    <style>
                      .disabled{
                        cursor: default;
                        pointer-events: none;        
                        text-decoration: none;
                        color: grey;
                      }
                    </style>
                  </head>
                  <body>
                    <a href="#" class="disabled">Ceci est un lien désactivé</a>
                  </body>
                </html>
                

 

Comment aligner verticalement une image dans une DIV en CSS en utilisant la propriété CSS vertical-align en combinaison avec display: table-cell  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <title>Aligner verticalement une image dans une DIV</title>
                    <style>
                img {
                    display: block;
                    margin: 0 auto;
                }
                .container {
                    display: inline-block;
                    margin: 30px;
                }
                .box {
                    display: table-cell;
                    text-align: center;
                    vertical-align: middle;
                    width: 250px;
                    height: 200px;
                    border: 1px solid black;
                }
                    </style>
                  </head>
                  <body>
                    <div class="container">
                      <div class="box">
                        <img src="/drupal/sites/default/files/pictures/2023-02/image-sans-espace-blanc.jpg">
                      </div>
                    </div>
                  </body>
                </html>
                

 

Changer le bouton parcourir d’un input de type file avec CSS  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="UTF-8">
                    <title>Changer le bouton parcourir</title>
                    <style>
                .parent-div {
                  display: inline-block;
                  position: relative;
                  overflow: hidden;
                }
                .parent-div input[type=file] {
                  left: 0;
                  top: 0;
                  opacity: 0;
                  position: absolute;
                  font-size: 90px;
                }
                .btn-upload {
                  background-color: #fff;
                  border: 3px solid #000;
                  color: #000;
                  padding: 10px 25px;
                  border-radius: 10px;
                  font-size: 22px;
                  font-weight: bold;
                }
                    </style>
                  </head>
                  <body>
                    <div class="parent-div">
                      <button class="btn-upload">Choisir le fichier</button>
                      <input type="file" name="upfile" />
                    </div>
                  </body>
                </html>
                

 

Personnaliser la balise select avec CSS  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="UTF-8">
                    <title>Personnaliser la balise select avec CSS</title>
                <style>
                .select-style {
                    padding: 0;
                    margin: 0;
                    border: 1px solid #ccc;
                    width: 120px;
                    border-radius: 3px;
                    overflow: hidden;
                    background-color: #fff;
                    background: #fff;
                    position: relative;
                }
                .select-style select {
                    padding: 5px 8px;
                    width: 130%;
                    border: none;
                    box-shadow: none;
                    background-color: transparent;
                    background-image: none;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
                }
                .select-style:after {
                    top: 50%;
                    left: 85%;
                    border: solid transparent;
                    content: " ";
                    height: 0;
                    width: 0;
                    position: absolute;
                    pointer-events: none;
                    border-color: rgba(0, 0, 0, 0);
                    border-top-color: #000000;
                    border-width: 5px;
                    margin-top: -2px;
                    z-index: 100;
                }
                .select-style select:focus {
                    outline: none;
                }
                </style>
                  </head>
                  <body>
                    <div class="select-style">
                      <select>
                      <option value="javascript">JavaScript</option>
                      <option value="html">HTML</option>
                      <option value="css">CSS</option>
                      <option value="php">PHP</option>
                      </select>
                    </div>
                  </body>
                </html>
                

 

Personnaliser les boutons checkbox avec CSS  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="UTF-8">
                    <title>Personnaliser les boutons checkbox avec CSS</title>
                <style>
                label {
                  display: block;
                  cursor: pointer;
                  line-height: 2;
                  font-size: 1em;
                }
                input[type="checkbox"] {
                  position: absolute;
                  opacity: 0;
                  z-index: -1;
                }
                input[type="checkbox"]+span {
                  font: 16pt sans-serif;
                  color: #000;
                }
                input[type="checkbox"]+span:before {
                  font: 16pt FontAwesome;
                  content: ’\00f096’;
                  display: inline-block;
                  width: 16pt;
                  padding: 2px 0 0 3px;
                  margin-right: 0.5em;
                }
                input[type="checkbox"]:checked+span:before {
                  content: ’\00f046’;
                }
                input[type="checkbox"]:focus+span:before {
                  outline: 1px dotted #aaa;
                }
                input[type="checkbox"]:disabled+span {
                  color: #999;
                }
                input[type="checkbox"]:not(:disabled)+span:hover:before {
                  text-shadow: 0 1px 2px #77F;
                }
                </style>	
                  </head>
                  <body>
                    <label>
                      <input type="checkbox"><span>Développement logiciel</span>
                    </label>
                    <label>
                      <input type="checkbox"><span>Développement Web</span>
                    </label>
                    <label>
                      <input type="checkbox"><span>Développement mobile</span>
                    </label>
                  </body>
                </html>
                

 

Personnaliser les boutons radio avec CSS  voir la démo

Code...
<!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="UTF-8">
                    <title>Personnaliser les boutons radio avec CSS</title>
                <style>
                label {
                  display: block;
                  cursor: pointer;
                  line-height: 2;
                  font-size: 1em;
                }
                [type="radio"] {
                  clip: rect(0 0 0 0); 
                  position: absolute; 
                }
                [type="radio"] + span {
                  display: block;
                }
                [type="radio"]:checked + span:before {
                  box-shadow: 0 0 0 0.2em #000;
                  background:  #8EB2FB;
                }
                [type="radio"] + span:before {
                  content: ’’;
                  width: 1em;
                  height: 1em;
                  border-radius: 1em;
                  display: inline-block;
                  border: 0.125em solid #fff;
                  transition: 0.5s ease all;
                  vertical-align: -0.25em;
                  box-shadow: 0 0 0 0.15em #000;
                  margin-right: 0.75em;
                }
                </style>
                  </head>
                  <body>
                    <label for="logiciel">
                      <input type="radio" name="radiobtn" id="logiciel"> <span>Développement logiciel</span>
                    </label>
                    <label for="web">
                      <input type="radio" name="radiobtn" id="web"> <span>Développement Web</span>
                    </label>
                    <label for="mobile">
                      <input type="radio" name="radiobtn" id="mobile" checked> <span>Développement mobile</span>
                    </label>
                  </body>
                </html>
                

 

Changer le texte d'un élément HTML avec le CSS ou Javascript


la suite...

Changer avec Font-size

La solution la plus simple consiste à réduire la taille du texte d’origine à zéro, grâce à la propriété « font-size », et redéfinir à la valeur initiale la taille du contenu ajouté par le CSS, dans notre exemple "Bonjour tout le monde !".

voici le code:  
 

    .content {
                  font-size: 0;
                }
                .content::before {
                  content: "Bonjour tout le monde!";
                  font-size: initial;
                }
            

Changer le texte d’un bouton d’envoi

 

document.getElementById("monBoutonEnvoi").value="Nouveau texte";
            

 

Optimiser la description d'une page Web


la suite...

Optimiser la description de la page

 

Pour chaque page Web (page d’accueil, sous-page, etc.), il est possible d’ajouter une courte description des contenus de la page Web. Cette description de page est ajoutée en tant que balise méta dans le code HTML et n’apparaît pas sur la page Web.

Les moteurs de recherche affichent la description de la page dans leurs résultats de recherche (directement sous le titre de la page). Quand une page Web ne possède pas de description, c’est généralement le texte de la page Web qui apparaît à la place.

Les mots-clés actuels apparaissent en gras dans les résultats de recherche. Idéalement, la description de la page devrait pour cette raison également contenir le mot-clé pour lequel la page Web est optimisée.Des descriptions de page bien entretenues pour le site Web et les sous-pages permettent un meilleur classement dans la liste des résultats des moteurs de recherche connus comme Google et Bing.

 

Voici les spécificités d’une description de page optimale

 

Une description doit contenir entre 140 et 180 caractères et résumer le thème de la page. Elle doit être rédigée de manière à attirer l’attention des visiteurs et les inciter à cliquer sur le lien.    
La plupart du temps, la description est affichée avec le titre de la page. Pour cette raison, veillez à ce que le titre et la description de la page s’accordent bien.

Google affiche uniquement des descriptions de pages de haute qualité. Il est donc préférable que vous rédigiez des descriptions de page personnalisées pour chacune des sous-pages de votre site Web.

 

Modifier la description de la page dans MyWebsite Creator

 

Vous pouvez entretenir les descriptions de page directement et en toute simplicité dans votre éditeur MyWebsite Creator.

Modifier la description de la page de MyWebsite Creator

 

Modifier la description de la page dans WordPress

 

Pour WordPress, il est recommandé d’utiliser un plug-in qui simplifie l’entretien de descriptions de page :

Installez l’un de ces plug-ins dans votre section d’administration WordPress et insérez les descriptions de page de la manière indiquée dans la description du plug-in.

 

Insérer la description de la page manuellement

Pour cela, insérez le code suivant dans la section <head> de chaque page :

 

<meta name="description" content="Votre description" />

Formation HTML5


la suite...

Vous désirez vous former et devenir autonome. Voici une formation HTML5 avec laquelle vous apprendrez à concevoir des sites web optimisés et performants; à savoir, structurer vos contenus, ajouter des images, des vidéos, concevoir des tableaux et des formulaires dans vos pages.

 

Pour accéder à la formation c'est ici > https://ronan-hello.fr/series/html

10 animations CSS sympas à ajouter à votre site


la suite...

Validation du balisage des documents Web


la suite...

Vous pouvez vérifier la validité du balisage des pages HTML ici >  https://validator.w3.org/

Comment échanger des variables entre PHP et JavaScript ?


la suite...

Passer une variable de PHP à JavaScript

La méthode la plus simple consiste à afficher grâce à PHP la valeur de la variable directement dans le code JavaScript. Il s’agit de la méthode la plus directe. La fonction json_encode permet alors d’éviter des injections avec par exemple du code malveillant inséré depuis PHP. Il peut également être difficile de se retrouver dans son code quand on insère des données structurées (JSON, HTML) et parce que les deux langages sont mélangés.

Exemple :
<script>
             var variableRecuperee = <?php echo json_encode($variableAPasser); ?>;
            </script>

La méthode suivante consiste à afficher la variable PHP dans le HTML. Par exemple, dans un <input> caché ou dans une <div> puis dans le code JavaScript servant à récupérer la valeur en utilisant le DOM. Avec cette méthode, l’exécution du code est très rapide en JavaScript, car les opérations faites avec le DOM sont courtes. Cette méthode oblige cependant le code à être valide en HTML pour que cela fonctionne, sinon il faut échapper ou encoder les caractères posant problème.  
Le code HTML est aussi plus long en conséquence.

Exemple :
<!-- HTML -->
            <input type=hidden id=variableAPasser value=<?php eco $variableAPasser; ?>/>
            //JavaScript
            var variableRecuperee = document.getElementById(variableAPasser).value;

Une autre solution est d’utiliser AJAX. Le code JavaScript va envoyer une requête AJAX à un script PHP qui affichera la valeur. Grâce à l’événement onLoad qui est appelé lors du chargement du script PHP, on peut récupérer la valeur dans le code JavaScript. C’est la méthode la plus propre, car les langages sont alors bien séparés. Elle permet également de charger plus vite la page, car l’appel du script PHP peut être effectué dans un deuxième temps (par exemple, lors d’un clic sur un bouton). Le code écrit est par contre plus difficile à comprendre pour un débutant, et cela génère plus de latence dans la page (le code doit attendre que le JavaScript ait appelé la fonction PHP).

Exemple :
//Fichier PHP script.php
            <?php
            echo $variableAPasser;
            ?>
            //Code JavaScript
            var requete = new XMLHttpRequest();
            requete.onload = function() {
             //La variable à passer est alors contenue dans l’objet response et l’attribut responseText.
             var variableARecuperee = this.responseText;
            };
            requete.open(get, script.php, true); //True pour que l’exécution du script continue pendant le chargement, false pour attendre.
            requete.send();

La dernière méthode consiste à utiliser les cookies. PHP et JavaScript ont tous deux des méthodes pour créer et lire des cookies. La méthode est rapide et facile à mettre en place en PHP, mais demande un petit peu plus de traitement en JavaScript. Les deux langages sont bien séparés également avec cette méthode.

Exemple :
//PHP
            setcookie(MonCookie, $variableAPasser);
            //JavaScript
            //Ce bout de code permet de trier les cookies pour les stocker dans un tableau associatif.
            var cookies = document.cookie.split(;).
            map(function(el){ return el.split(=); }).
            reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});
            //Récupération de la variable dans le tableau
            var variableRecuperee = cookies[MonCookie];

Passer une variable JavaScript à PHP

JavaScript est le langage côté client et PHP est le langage de script côté serveur. Dans ce tutoriel nous allons découvrir comment passer une variable de JavaScript à PHP via une requête HTTP.

Vous pouvez créer une URL de manière dynamique via JavaScript et l’envoyer au serveur via un appel AJAX (comme la méthode .ajax de jQuery) ou via quelque chose comme JavaScript.location.href = URL;  

Dans cette URL, vous aurez les données que vous souhaitez envoyer à PHP. Vous trouverez ci-dessous un exemple de fonction JavaScript pouvant être appelée en appuyant sur un bouton.

<?php
              function add() {
                var a = 1;
                var b = 2;
                window.location.href = "add.php?var1=" + a + "&var2=" + b;
              }
            ?>
            

Dans cette fonction ci-dessus, nous avons deux variables JavaScript dans l’URL. Nous disons ensuite à « window » d’accéder à la page « add.php » avec les deux paramètres « var1 » et « var2 » qui contient les données. Ici, nous passons deux variables de JavaScript à PHP. Le navigateur accéderait alors à l’URL http://www.exemple.com/add.php?var1=1&var2=2.

Réception et traitement des variables en PHP

Maintenant que JavaScript a émis la requête et passé certains paramètres, PHP peut récupérer les données dans le tableau $_GET.

<?php
              function add() {
                 // Vérifiez si les paramètres var1 et var2 sont transmis au script via l’URL
                 if (isset($_GET["var1"]) && isset($_GET["var2"])) {
                  $somme = $_GET["var1"] + $_GET["var2"];
                  echo $_GET["var1"]." + ".$_GET["var2"]." = ".$somme;
                 }
              }
            ?>
            

Ce code afficherait alors la somme des deux variables envoyé depuis le code JavaScript :

Sortie :

1 + 2 = 3

Taille des arbres


la suite...

Néflier, Olivier, Laurier, Mûrier

Taille du néflier :

Il est tout à fait possible de tailler le néflier tout au long de sa vie, pour le garder à la taille que vous déciderez et pourra donc s’intégrer de façon très homogène dans l’ensemble de votre jardin.

Ces quelques gestes amélioreront également la croissance du néflier :

Supprimez les branches mortes ou malades au fur et à mesure. À l’automne, taillez les branches fragiles À la fin de l’hiver, supprimez les branches qui poussent vers l’intérieur et équilibrez la ramure.

Taille de l’olivier

Généralement, la taille de l’olivier se pratique avant la floraison (qui débute vers la fin du mois de mai) mais après la période des fortes gelées, c’est-à-dire au cours des mois de mars et d’avril.

Taille d’un laurier rose en terre :

Au tout début du printemps,

Taillez les branches à environ 1/3 de leur longueur afin de redonner de la vigueur à l’arbuste. Vous pouvez rabattre jusqu’à 50 cm du sol sans problème, les lauriers roses ne craignent pas la taille. En cas de laurier rose gelé, certaines branches ont noircies durant l’hiver, il faut couper toute cette partie car elle ne repoussera pas.

Taille d’un laurier rose en pot :

Après la floraison et avant de mettre vos pots à l’abri du gel, taillez les tiges de l’année de moitié afin de garder une belle silhouette compacte.

Taille du Mûrier

Les muriers platanes sont des arbres d’ombrages, que l’on utilise et taille comme des "parasols en arbres". Ce n’est pas du tout la taille en têtards, qui était utilisée pour les muriers blancs, pour avoir de longs rameaux dont les feuilles pouvaient être facilement retirées en un geste pour la nourriture des vers à soie.

Enormément de personnes dans le midi, ont des muriers platanes pour pouvoir prendre le pastis à l’ombre pendant l’été

La plupart des gens les taillent effectivement trop tôt, au risque de les faire repartir pour l’hiver ! C’est ainsi qu’on les tue (j’en ai vus en parfaite santé ne pas se remettre de cette manie), pour éviter d’avoir à ramasser des feuilles ! Il faudrait au moins attendre que le feuillage jaunisse et que quelques feuilles tombent naturellement. Si vous taillez des arbres quand ils ont perdu leurs feuilles, pendant la dormance c’est très bien. Tout le monde devrait faire ça.

C’est réellement une taille d’entretien formation, puisque les gens qui ont ces arbres et qui veulent les conserver en état "parasol à pastaga" doivent à la fois créer cette forme d’année en année (formation), mais aussi l’améliorer pour que le "parasol" s’élargisse au lieu de filer naturellement vers le ciel (entretien), et aussi tailler court chaque année pour que les feuilles soient très larges (ombrage).

Meilleure période pour tailler une haie :

La haie est composée d’arbustes dont la croissance s’active deux fois dans l’année, au printemps et à la fin de l’été. Vous attendrez la fin de ces deux périodes de croissance pour tailler, vous maintiendrez ainsi le plus longtemps possible la forme et la taille que vous leur avez données. Vous taillerez donc en avril-mai et en septembre-octobre. Mais attention, rien ne vous contraint à respecter scrupuleusement ces périodes, car les haies peuvent être taillées plus régulièrement, cela ne réclamera juste qu’un peu plus de travail.

 

 

Premier      Précédent              Suivant      Dernier

Publié le samedi 18 novembre 2023 par Philippe SCHMITT