Mise en place des balise H1, H2...etc

le Jeu Avr 17, 2008 23:15

Je suis allé voir les CSS du site dans ton profil, et en effet, tu gères très mal tes styles.

En fait, tu te compliques la vie.

Toutes ces propriétés, tu dois les regrouper dans un seul fichier que tu appelles "styles.css" par exemple.

À l'intérieur, tu insères tes propriétés au fur et à mesure, tout en gardant un ordre logique : d'abord les propriétés de la page, puis du menu, puis du texte ... etc

Exemple avec un de mes CSS : http://www.danielsimon.fr/pictures.css

Ensuite tu insère cette feuille de style dans le <head> de tes pages (x)HTML :

<link rel="stylesheet" type="text/css" href="styles.css" />

Tout est synthétisé dans un seul fichier bien organisé !

le Ven Avr 18, 2008 16:50

Merci pour ces conseils Ravn (et les autres) je suis en train d'épurer mon code avec ta solution,
qui en plus à le mérite de me faire mettre la main dans le "cambouis" et de code un peu.

Pour revenir au code, j'ai crée un style h1 pour styliser mon format H1 :

Code: Tout sélectionner: .h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #000000; text-decoration: none; }

Questions :

* Puis je le nommer/renommer le style .hotel par exemple ?

* Puis je l'appliquer à tous mes titres H1, sans influencer le référencement ? Autrement dit, le fait de d'appliquer un style à un format peu il changer qq chose ?

* le nom même du style .hotel par exemple - peu t il aussi influencer le référencement ?

* La différence de taille entre le titre H1, H2...etc une fois stylisés est t elle importante ? H1 > H2

* Pourquoi Dream averti avant de créer un style nomé H1 - Qu'appelle t ils classe chez Adobe ? (Balise HTML = format et classe = style c'est ça ?)

la suite au prochain épisode

le Ven Avr 18, 2008 18:47

Pour te répondre rapidement :

1) oui

2) non. Dans ce cas précis, c'est une mise en forme du texte de la balise titre, c'est tout.

3) non.

4) Tu n'as pas bien saisis les bases on dirait.

:arrow:

Une balise permet de faire une action. Exemple, la balise "h1" permet de faire un titre de niveau1.

:arrow:

Une class permet de mettre en forme les éléments d'une page web. Exemple, font-family: Verdana, Arial, Helvetica, sans-serif; permet de définir la police à afficher pour le texte.

Il vaut mieux éviter de choisir pour les noms de class des noms de balises existantes. D'où le message d'avertissement de ton soft.

:wink:

le Ven Avr 18, 2008 19:05

Aïe Aïe Aïe, je dois mal m'y prendre car c'est pourtant très simple.
Merci pour ta présentation claire des questions, on va pouvoir détailler ça de façon propre

Déjà il faut une mise au point sur le voc : :

Balise : élément HTML avec lequel tu codes : <body>, <title>,<h1> et <a> sont des balises.
Style : règle en CSS que tu rentres dans ta feuille de style entre deux accolades { }

Si j'ai bien compris, dans ton code, tu as des titres encadrés par des balises <h1>, ce qui est très bien pour le référencement. Tu as donc ce code sur toutes tes pages :

<h1>Le titre de ma page</h1>

Si toutes tes titres <h1> sont les mêmes, alors la logique, veut que tu règle les propriétés standards des tes titres <h1>.

Code: Tout sélectionner: h1 { /* Je n'ai pas mis de point devant h1 !! */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #000000; text-decoration: none; }

De même que si tout des paragraphes sont en rouge :

Code: Tout sélectionner: p {color: red; }

Ça ce sont les règles générales pour chaque type de balise. Tu me suis ?

Maintenant les class et les id, imagine qu'un paragraphe soit particulier et qu'il doivent être vert. On utilise une class dans le code HTML pour le signaler :

Code: Tout sélectionner: <p class="couleur-verte">bla bla bla bla</p>

Et ont insère un style pour ce class dans le CSS :

Code: Tout sélectionner: .couleur-verte {color: green;}

Tu peux ensuite réutiliser cette classe pour rendre un lien vert par exemple !
As-tu remarqué que j'ai choisi un nom "intelligent" pour ce class ? Il est bon de nommer les class en fonction de ce qu'ils font !

D'où l'avertissement d'Adobe, tu crée un attribut class est nommé .h1 c'est très ambigu vu que ça rapelle la balise <h1> !

Il vaut mieux l'appeller .hotel si ça te chante (mais ce n'est pas un bon nom quane même

)

Pour finir, sache que tu ce qui concerne le code pur : balises, class, commentaire n'influe pas sur le référencement : les robots s'intéressent surtout à ce qui est dans les balises : le texte, les images ...

le Ven Avr 18, 2008 19:08

Aïe Aïe Aïe, je dois mal m'y prendre car c'est pourtant très simple.
Merci pour ta présentation claire des questions, on va pouvoir détailler ça de façon propre

Déjà il faut une mise au point sur le voc : :

Balise : élément HTML avec lequel tu codes : <body>, <title>,<h1> et <a> sont des balises.
Style : règle en CSS que tu rentres dans ta feuille de style entre deux accolades { }

Si j'ai bien compris, dans ton code, tu as des titres encadrés par des balises <h1>, ce qui est très bien pour le référencement. Tu as donc ce code sur toutes tes pages :

Code: Tout sélectionner: <h1>Le titre de ma page</h1>

Si toutes tes titres <h1> sont les mêmes, alors la logique, veut que tu définissent les caractéristiques de ces titres une bonne fois pour toutes :

Code: Tout sélectionner: h1 { /* Je n'ai pas mis de point devant h1 !! */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #000000; text-decoration: none; }

De même que si tous tes paragraphes sont en rouge :

Code: Tout sélectionner: p {color: red; }

Ça ce sont les règles générales pour chaque type de balise. Tu me suis ?

Maintenant les class et les id. Imagine qu'un paragraphe soit particulier et qu'il doive être vert. On utilise une class dans le code HTML pour le signaler :

Code: Tout sélectionner: <p class="couleur-verte">bla bla bla bla</p>

Et ont insère un style pour ce class dans le CSS :

Code: Tout sélectionner: .couleur-verte {color: green;}

Tu peux ensuite réutiliser cette classe pour rendre un lien vert par exemple !
As-tu remarqué que j'ai choisi un nom "intelligent" pour ce class ? Il est bon de nommer les class en fonction de ce qu'ils font !

D'où l'avertissement d'Adobe, vu que tu crée un attribut class nommé .h1 ! C'est très ambigu car ça rappelle la balise <h1> !

Il vaut mieux l'appeller .hotel si ça te chante (mais ce n'est pas un bon nom quane même

)

Pour finir, sache que tu ce qui concerne le code pur : balises, class, commentaires ... n'influe pas sur le référencement, car les robots s'intéressent surtout à ce qui est dans les balises (le texte, les images ...).

PS : Un peu de lecture !

le Ven Avr 18, 2008 22:29

Les nuages se dissipent peu à peu et je commence à y voir + clair grace à tes - vos - explications.

Tu me dira, il serai temps !!

J'ai réussi à intégré et rangé mes CSS au sein d'un seul et même fichier nommé style.css comme tu me l'a suggéré.

Encore une petite :

Puis je attribuer un lien à un texte qui à un H1 par exemple ?

le Ven Avr 18, 2008 22:45

Tu veux dire inclure un lien dans un titre <h1> ?

Comme ça ? : <h1><a href="#">Mon lien</a></h1>

Tu joues avec le feu ...
Ne crois-pas que c'est la balise <h1> en elle même qui est importante, sinon tu vas vite rejoindre le côté obscur de la force.

L'important est de structurer son code avec des balises Hx. Google y verra un point positif (donc quelques places de plus

). N'oublie pas :

Code: Tout sélectionner: <h1>Titre principal</h1> <h2>Sous-titre 1</h2> <h2>Sous-titre 2</h2> <h3>Rubrique</h3>

Il semble que tu débutes, alors autant éviter d'entrée les erreurs de jeunesse :

Oublie :
- le bourrage de mots-clés dans la page,
- les liens dans les balises <h1>
- le "PR 4 ever"
- Les inscriptions à la pelle dans les annuaires.

L'avenir du référencement c'est :
- un code propre et valide (les balises <Hx>

)
- un vrai contenu
- des titres et des URL optimisés
- des liens en dur sémantiques
- etc ....

Voilà un petit sommaire qui devrait t'éclairer, mais n'oublie pas que Tout commence ici !

Je pars pour le WE, alors bonne chance avec ton code

le Sam Avr 19, 2008 18:23

RavN a écrit:Tu veux dire inclure un lien dans un titre <h1> ?

Comme ça ? : <h1><a href="#">Mon lien</a></h1>

Tu joues avec le feu ...

ça se discute. Ce n'est pas interdit de le faire.

Après faut voir l'utilité de la manœuvre. Perso, je ne le fais uniquement que pour la page du plan de site. Cela permet d'accéder directement à la page en cliquant sur le nom qui est dans le titre. Pour le reste, pour moi, cela n'a strictement aucune utilité. :wink:

Mise en place des balise H1, H2...etc

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne