nettoyer code d'un site récupéré

**aqualum** · 30/06/2013, 12h49

Bonjour à tous,
Je ne suis pas développeur, mais une petite graphiste. J'avais appris a créer un site il y a 15 ans surtout avec Dreamweaver version 3, flash et très peu Fireworks. Connaissance HTML très basique. Je ne maîtrise pas du tout les feuilles de style CSS, pourtant bien utiles.
Je me reforme sur Dream CS5 avec l'excellente vidéo de mes amis wisibility.com
Le site est http://www.tarrago-mur-escalade.fr
J'ai dû récupérer ce site que j'avais heureusement aspiré, car le webmasteur a disparu et avait auparavant détruit le site. Je l'ai refait et traduit en français. Ce site était en PHP, après récup il est en HTML. J'ai procédé du fait de mon manque de compétence à des remplacements, par exemple des images, mises en place de nouvelles photos en raw, dont j'ai retouchées la plupart dans photoshop, des dupliqué de pages pour mettre à jour par exemple le portfolio etc.
J'aimerais voir si le code source de la page index ne comporte pas des redondances et pire des contradictions dans les balises.
Par exemple :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />et
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />Les 2 sont utiles ou si je peux supprimer la 2e ?
Je me suis inscrite chez google analytics, mais j'y comprends rien... J'ai mis le code google sur toutes mes pages.
J'ai 23 pages référencées dans google. Je tente d'améliorer mon positionnement qui pour l'instant est nul.
En général, j'ai un titre de page et une description pour chaque page.
Merci de vos conseils, et liens, éventuellement si vous pouviez m'indiquer ce que je peux supprimer du code de la page INDEX, merci infiniement !

**rodolphebrd** · 30/06/2013, 13h16

Bonjour,

vous pouvez supprimer <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /> et ne conserver que le premier.

Le contenu de la meta description doit se limiter à 150 caractères.
La méta keywords ne sert à rien (dans la majeure partie des cas).

L'ordre hiérarchique des balises Hn (H1, H2, ....) n'est pas logique et nuira au référencement du site. Vous commencez par une balise H3 et les balises H1, H2 sont absentes.

Concernant le code Html de votre page, j'ai jeté un coup d'oeil rapidement et cela semble cohérent.

**aqualum** · 30/06/2013, 14h12

Merci Rodolphe,
Je vais suivre les conseils. J'ai réactualisé le site pour l'index.

Envoyé par rodolphebrd

L'ordre hiérarchique des balises Hn (H1, H2, ....) n'est pas logique et nuira au référencement du site. Vous commencez par une balise H3 et les balises H1, H2 sont absentes.

Euh balise H3, je vois qu'elle est située avant le head : ne devrait-elle pas être après le body ?
où faut-il la déplacer, par exemple beaucoup plus loin et après la dernière balise h2 que je trouve ?

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#wrapper #header #logo h3 a {
	color: #cc0000;
}
body, td, th {
	font-size: 0.74em;
	color: #7f7f7f;
}

Je n'ai trouvé aucune h1 et je ne sais pas les créer
j'ai trouvé h2, à 3 endroits
<h2>Béton projeté</h2>
j'ai trouvé aussi des h4 à plusieurs endroits

**Auteur** · 30/06/2013, 15h29

bonjour,

les balises Hn (h1, h2, h3, etc.) sont des balises entre lesquelles le texte est préformaté et sont utilisées pour les titres.
Voici un petit tutoriel sur ces balises :
http://cssglobe.developpez.com/tutor...iliser-titres/

J'avoue que la balise <script> juste après la balise <body> m'a fait tiquer, mais finalement laisse là où elle est.

J'ai repéré une faute d'orthographe :

Vidéo promotionnel de Boreal en Terres levantinas

Vidéo promotionnelle

J'ai également repéré un paragraphe (balise <p>) fermé, mais pas ouvert :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="article">
        <h4><a href="http://vimeo.com/26803468" target="_blank">Une bonne vidéo sur la motivation et le dépassement de soi </a><a href="http://vimeo.com/26803468" target="_blank">&raquo;</a>
          </p>
        </h4>
      </div>

il doit manquer un <p class="short"> si je prends exemple sur les autres paragraphes.

Autre point : dans la balise <meta name="keywords" inutile de répéter des expressions, cela ne va pas améliorer le référencement

[edit]
Pour ce qui est de l'attribut target="_blank" des balises <a> il n'est pas valide XHTML1.0 :
http://xhtml.developpez.com/faq/?page=liens#LIEN_target
[/edit]

**rodolphebrd** · 30/06/2013, 15h39

La première balise qui apparait dans votre code Html, pas avant le HEAD, mais entre <body> et </body> est celle-ci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<h3>
<a href="index.html"><img src="images/logo_tarragoSITE.png" alt="logo" width="157" height="70" class="logo"></a> 
<font color="#EE3333">Fabricant de murs d'escalade et de parcours d'aventure</font>
</h3>

note: la balise font color est à supprimer et peut aisément être remplacée par une ligne de code CSS.
avec le code CSS correspondant (à toutes les balises H3 du site):

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
h3 {
   font: normal 1.4em "Trebuchet MS", Helvetica, Arial;
   margin: 0 0 20px;
   font-weight: bold;
   color: #EBECEC;
   font-size: 1,4; /*attention de mettre des unités et un point entre les chiffres (corrigé plus loin)*/
}

et (celui-ci correspond spécifiquement à la balises H3 concernée sans la cibler puisque la déclaration CSS est liée à l'ancre -balise a-)

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#wrapper #header #logo h3 a {
color: #cc0000;
}

POUR SIMPLIFIER VOTRE CODE (je n'avais pas regardé votre code CSS) ET PLACER COMME PREMIERE BALISE H1, voici ce que vous pouvez faire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<h1>
<a href="index.html"><img src="images/logo_tarragoSITE.png" alt="logo" width="157" height="70" class="logo"></a> 
Fabricant de murs d'escalade et de parcours d'aventure
</h1>

A ajouter à votre feuille de style

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
h1 {
   font: normal 1.4em "Trebuchet MS", Helvetica, Arial;
   margin: 0 0 20px;
   font-weight: bold;
   color: #cc0000;
   font-size: 1.4em; /*attention de mettre des unités et un point entre les chiffres*/
}

Cette ligne de code ne sert à rien

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#wrapper #header #logo {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

**aqualum** · 30/06/2013, 18h06

OK J'ai lu pour les boutons et leMERCI : Tes explications sont vraiment super, car je comprends presque tout !
Je procède très prudemment, car c'est une autre personne qui a créé la feuille de style, et de plus je ne maîtrise pas les CSS...

J'ai réussi à supprimer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

wrapper etc

j'ai ajouté dans le fichier <estill.css> la balise H1, ça me fait 2 balises H1. Mais si je supprime celle qui existait ça modifie mon texte

Pour la question des couleurs, par exemple j'ai rajouté le logo qui est importé et rouge, code web CC0000 et la ligne <fabricant de mur d'escalade...> doit être avec le même rouge. Je ne sais pas où il faudrait modifier le rouge dans les CSS pour qu'il n'y ait qu'un seul rouge sans avoir à faire des petits rajouts pour chaque texte rouge. J'ai fait des tentatives un peu hasardeux en fesant rechercher la couleur #de0711 (je ne sais même pas à quoi ça correspond, et remplacer par #cc0000.
Donc peut-être serait-il plus simple de faire une nouvelle règles juste pour le logo et la ligne en dessous, je ne sais pas faire de nouvelles règles CSS (sans mettre le bazar). Mais le problème reste de retrouver tous les rouges du site et de les mettre tous en CC0000. j'ai l'impression qu'il y a des abréviation de code couleur...

J'ai bien bidouillé pour tenter de faire les corrections, très bien indiquée.

Il doit rester encore pas mal de bêtises...

Merci de me dire si cela te paraît correct.

**rodolphebrd** · 30/06/2013, 18h46

- Sous dreamweaver avec la fonction rechercher/remplacer vous pouvez tracker n'importe quelle chaine de caractères.
- Avec l'extension ColorZilla pour Firefox qui permet via une pipette de récupérer la couleur d'un élément de la page.
- il y a http://www.colorschemer.com/online.html pour reconnaitre la couleur correspondant à #DE0711 mais cette couleur n'est plus présente dans votre feuille de style.

nettoyer code d'un site récupéré

HTML

Vue hybride

Discussions similaires

Partager

Partager