Publié le par benoit
dans la ou les catégorie(s) : code

Aujourd’hui, je poste une correction rapide pour évoquer une technique simple pour trouver les erreurs dans le code. Cet article en complète un autre sur le même thème.

cmd+alt+u ou 🍏+🍳+u

Le raccourci sous Chrome cmd + alt + u ouvre la source HTML de la page (si un JavaScript modifie celle-ci vous n’aurez pas les modifications).
Voici une capture d’écran avec des erreurs fréquentes :

Il y a sans doute des fautes de frappes plus difficile à voir « fianl.css ». Soyez vigliant vigilant !
Voici quelques règles à suivre pour débusquer plus facilement les erreurs :

  1. « Beautify » le code avec Brackets ✌️;
  2. Pas d’espace dans les noms des dossiers et des fichiers, ils se transforment en %20 illisible, utilisez des tirets !
  3. Pas d’accent dans les noms des dossiers et des fichiers ;
  4. C’est tentant d’inventer des balises, mais non <img-portfolio> sera plutôt <img class='img-portfolio'> ;
  5. li aura toujours pour balise parent ol ou ul ;
  6. <img src="Monogramme/Num%C3%A9riser.png" alt=""height="100", width="100", >, src est bien écrit (scr), les couleurs du code sont logiques, mais il manque quelques espaces et les virgules ne devrait pas être dans la balise, alt="le titre de l’image" est très important, je conseille de faire img + tab dans Brackets + Emmet;
  7. Attention au > et/ou < en trop !
  8. Enfin, vérifiez que les liens en bleu fonctionnent, surveillez les adresses des fichiers et leur correspondance dans le Finder ou Explorer.

Voici le code sans correction :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>xxx</title>
      <link rel="stylesheet" href="xxx%20fianl.css">
      <link href="https://fonts.googleapis.com/css?family=Cormorant+Infant" rel="stylesheet">
       <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
 
<body>
   <div class="header">
        <div class="sidebar">
            <nav>
 
                    <li class="current"><a href="xxx%20final.html">Les projets</a></li>
 
                    <img src="Monogramme/Num%C3%A9riser.png" alt=""height="100", width="100", >
 
                    <li><a href="%C3%80%20propos.html">À propos</a></li>
 
            </nav>
        </div>
    </div><!--/header-->
    <h1>Présentation de projets personel, professionel et scolaire</h1>
<div>
<img-portfolio>
<<a href=""><img src="Samedi,%2520diamnche/Image-depart.jpg" alt=""></a>
</img-portfolio>
</div>
</body>
</html>

Corrections

Voici une correction sans savoir le résultat final, j’ai mis l’image dans le li et ajouté une balise main pour mettre le contenu principal de la page (ça évite trop de div).

<!DOCTYPE html>
<html lang="fr">
 
<head>
  <meta charset="UTF-8">
  <title>xxx</title>
  <link rel="stylesheet" href="xxx-final.css">
  <link href="https://fonts.googleapis.com/css?family=Cormorant+Infant" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
 
 
<body>
  <div class="header">
    <div class="sidebar">
      <nav>
        <ul>
          <li class="current">
            <a href="xxx-final.html">Les projets</a>
            <img src="Monogramme/Numeriser.png" alt="monogramme" height="100" width="100">
          </li>
          <li><a href="a-propos.html">À propos</a></li>
        </ul>
      </nav>
    </div>
    <!--sidebar-->
  </div>
  <!--/header-->
 
  <main>
    <h1>Présentation de projets personel, professionel et scolaire</h1>
    <div class="portfolio">
      <a href="#"><img src="Samedi-dimanche/Image-depart.jpg" alt="samedi dimanche départ"></a>
    </div>
  </main>
 
</body>
</html>