Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
836 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Votre méthode pour avoir du code HTML propre ?

 


Vous utilisez quoi comme marqueur avec les feuilles de styles ?




Attention si vous cliquez sur "voir les résultats" vous ne pourrez plus voter

 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Votre méthode pour avoir du code HTML propre ?

n°229245
AZorbas
That's me , Alexis Zorbas !
Posté le 17-10-2002 à 10:36:20  profilanswer
 

Bonjour,
 
J'aimerais tout d'abord connaître votre manière d'utiliser les feuilles de style.  
Je m'explique, on peut grace aux feuilles de style utiliser un style pour des zones de textes particulières avec les balises <div>, <p>, <a>, <font>, etc ... je dois avouer que c'est un peu le bordel!
 
Donc qu'est-ce qu'il vaut mieux utiliser pour obtenir un code uniforme (propre) ?  
Egalement, est-ce qu'il y aura des balises qui ne seront plus utilisés (ou avec la commande class="" ) ?
 
 
Deuxièmenent, j'aimerais savoir si les balises <p> ont encore un intérêt ? Sauf erreur il est parfois mieux d'utiliser des <div> + <br> pour un long texte ?
 
merci d'avance :jap:


Message édité par AZorbas le 17-10-2002 à 10:36:42

---------------
www.astrocosmos.net, le portail belge francophone sur l'astronomie et les Sciences.
mood
Publicité
Posté le 17-10-2002 à 10:36:20  profilanswer
 

n°229246
lorill
Posté le 17-10-2002 à 10:38:34  profilanswer
 

pardon ?

n°229248
antp
Super Administrateur
Champion des excuses bidons
Posté le 17-10-2002 à 10:39:17  profilanswer
 

déjà <a> a rien à voir avec <p> et <div>, vu que c'est pour faire des liens et non pas des zones de texte :heink:
 
puis <font> ça sert plus à rien


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
n°229253
AZorbas
That's me , Alexis Zorbas !
Posté le 17-10-2002 à 10:45:44  profilanswer
 

antp a écrit a écrit :

déjà <a> a rien à voir avec <p> et <div>, vu que c'est pour faire des liens et non pas des zones de texte :heink:
 
puis <font> ça sert plus à rien




 
 
ok ... je reprend ...  
 
bon c'est peut-être pas très standard, mais sur IE un :
 

Code :
  1. <font class="style"></font>
  2. <a class="lien"></a>
  3. <p class="paragraphe"></p>


 
marche ... et je me dis vaut-il mieux pas de mettre son texte (avec ou sans lien) dans un <div></div> (ou autre chose)
 
et de définir par exemple comme classe un truc du genre :
 

Code :
  1. .paragraphe{...}
  2. .paragraphe:link{...}
  3. etc


 
C'est plus clair là maintenant ? :D


Message édité par AZorbas le 17-10-2002 à 10:48:38

---------------
www.astrocosmos.net, le portail belge francophone sur l'astronomie et les Sciences.
n°229254
lorill
Posté le 17-10-2002 à 10:48:07  profilanswer
 

en gros tu veux virer toutes les balises, et tout faire avec les classes :??:

n°229258
AZorbas
That's me , Alexis Zorbas !
Posté le 17-10-2002 à 10:51:14  profilanswer
 

lorill a écrit a écrit :

en gros tu veux virer toutes les balises, et tout faire avec les classes :??:  




 
En gros je veux en utiliser le minimum ... je pense que cela facilite la maintenance du site et minimise les erreurs de balises qui trainent ;)
 
Bon je dois avouer qe j'aurais pu chercher moi même pour trouver la meilleur solution :D
 
:jap: :jap:


Message édité par AZorbas le 17-10-2002 à 10:58:55

---------------
www.astrocosmos.net, le portail belge francophone sur l'astronomie et les Sciences.
n°229260
lorill
Posté le 17-10-2002 à 10:52:28  profilanswer
 

AZorbas a écrit a écrit :

 
En gros je veux en utiliser le minimum ... je pense que cela facilite la maintenant du site et minimise les erreurs de balises qui trainent ;)




 
Bon, ben je pense que c'est une grosse ânerie. <b> est plus lisible que <span class="textegras">, et c'est surtout plus logique.

n°229262
AZorbas
That's me , Alexis Zorbas !
Posté le 17-10-2002 à 10:55:55  profilanswer
 

lorill a écrit a écrit :

 
 
Bon, ben je pense que c'est une grosse ânerie. <b> est plus lisible que <span class="textegras">, et c'est surtout plus logique.




 
peut-être pour un <b> mais si tu fais ça pour un size="4" ... même un petit morceau de texte tu n'as plus le contrôle sur le style du site.
Imagine des zones de texte avec une feuille de style avec une police en 12 et un morceau de texte avec un size 4. Si l'utilisateur met taille du texte "la plus grande" dans son browser ça va ressembler à rien.


Message édité par AZorbas le 17-10-2002 à 10:57:44

---------------
www.astrocosmos.net, le portail belge francophone sur l'astronomie et les Sciences.
n°229265
antp
Super Administrateur
Champion des excuses bidons
Posté le 17-10-2002 à 10:59:06  profilanswer
 

Je suis pas sûr d'avoir pigé ce que tu veux faire avec les <a>, mais je trouve très dangereux et surtout très bizarre de spécifier les liens dans les CSS plutôt que dans le href du <a>
- on ne sait plus accéder au contenu avec un vieux browser
- les liens c'est du contenu, pas de la présentation, donc pourquoi les mettre dans le CSS :heink:


Message édité par antp le 17-10-2002 à 10:59:56

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
n°229267
_Mac_
Posté le 17-10-2002 à 10:59:57  profilanswer
 

lorill a écrit a écrit :

 
 
Bon, ben je pense que c'est une grosse ânerie. <b> est plus lisible que <span class="textegras">, et c'est surtout plus logique.




 
Chui d'accord : pourquoi faire compliquer quand on peut faire simple ?
 
Dans tous les cas, si c'est pour formater des bouts de texte (pas des paragraphes, par exemple), il est vivement recommandé d'utiliser la balise <SPAN>, elle est faite pour.

mood
Publicité
Posté le 17-10-2002 à 10:59:57  profilanswer
 

n°229269
gm_superst​ar
Appelez-moi Super
Posté le 17-10-2002 à 11:01:03  profilanswer
 

AZorbas a écrit a écrit :

Bonjour,
 
J'aimerais tout d'abord connaître votre manière d'utiliser les feuilles de style.  
Je m'explique, on peut grace aux feuilles de style utiliser un style pour des zones de textes particulières avec les balises <div>, <p>, <a>, <font>, etc ... je dois avouer que c'est un peu le bordel!



Déjà, <font> n'existe plus donc son utilisation est à proscrire. Ensuite chaque élément à son utilité et sert à faire la part des choses. <div> et <p> ce sont des blocs : <p> pour distinguer des paragraphes (!) et <div> est une balise neutre qu'on utilise la plupart du temps pour définir le layout de la page.

AZorbas a écrit a écrit :

Donc qu'est-ce qu'il vaut mieux utiliser pour obtenir un code uniforme (propre) ?  
Egalement, est-ce qu'il y aura des balises qui ne seront plus utilisés (ou avec la commande class="" ) ?



Effectivement les balises peuvent être complètement redéfinies avec les CSS, et en théorie on pourrait faire une page HTML avec seulement des <div>, des <span> et des <a> mais je te laisse considérer la lisibilité d'un tel document...
Un document HTML doit refléter la structure de tes données. Si ton document à un titre, tu utilises <h1>, un sous-titre tu utilises <h2>, des paragraphes (au vrai sens du terme) <p>, une portion de code <code>, une légende pour un formulaire ou un tableau <legend> ou <caption>, etc, etc.
De plus il faut penser aux navigateurs qui ont du mal avec les CSS.

AZorbas a écrit a écrit :

Deuxièmenent, j'aimerais savoir si les balises <p> ont encore un intérêt ? Sauf erreur il est parfois mieux d'utiliser des <div> + <br> pour un long texte ?



Cf ma réponse au dessus, si tu ne fais qu'un seul <div> tu perds une partie des informations sur la structure de ton document. Si celui ci a des paragraphes, cela devrait se refléter au niveau HTML. De plus tu modifieras beaucoup plus facilement les styles avec des <p> (notamment l'espacement entre les paragraphes) qu'avec un seul <div>.


Message édité par gm_superstar le 17-10-2002 à 11:02:25

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°229273
AZorbas
That's me , Alexis Zorbas !
Posté le 17-10-2002 à 11:06:53  profilanswer
 

antp a écrit a écrit :

je trouve très dangereux et surtout très bizarre de spécifier les liens dans les CSS plutôt que dans le href du <a>
- on ne sait plus accéder au contenu avec un vieux browser
- les liens c'est du contenu, pas de la présentation, donc pourquoi les mettre dans le CSS :heink:




 
voilà un avis intéressant ... pour toi alors il faudrait utiliser le texte avec des CSS et pas les liens ?
 
Le prob c'est que chez moi les liens ont une taille et parfois un code de couleur bien définis.
 
Tu proposerais quoi comme solution de syntaxe alors ?
 
J'aimerais connaître vos avis aussi sur la balise <p> |-> bon ou pas ?
 
Je me pose tout ces question pacqu'il y a malheureusement souvent moyen en HTML d'avoir le même résultat de façon différente ... et cela m'énerve assez, j'ai l'impression de chipoter plus qu'autre chose :D
 
Ici je veux rien imposer, je veux juste savoir vos avis et comment vous feriez pour avoir un code "potable" (dont ne pas passer 10 jours pour la maintenance)
 
:jap: :jap:  
 
ps: je n'ai peut-être pas préciser mais j'utilise des pages dynamique en php. Donc il il y a une certaine séparation entre contenu/structure du site.


---------------
www.astrocosmos.net, le portail belge francophone sur l'astronomie et les Sciences.
n°229275
AZorbas
That's me , Alexis Zorbas !
Posté le 17-10-2002 à 11:08:23  profilanswer
 

gm_superstar a écrit a écrit :

 
Déjà, <font> n'existe plus donc son utilisation est à proscrire. Ensuite chaque élément à son utilité et sert à faire la part des choses. <div> et <p> ce sont des blocs : <p> pour distinguer des paragraphes (!) et <div> est une balise neutre qu'on utilise la plupart du temps pour définir le layout de la page.
 
Effectivement les balises peuvent être complètement redéfinies avec les CSS, et en théorie on pourrait faire une page HTML avec seulement des <div>, des <span> et des <a> mais je te laisse considérer la lisibilité d'un tel document...
Un document HTML doit refléter la structure de tes données. Si ton document à un titre, tu utilises <h1>, un sous-titre tu utilises <h2>, des paragraphes (au vrai sens du terme) <p>, une portion de code <code>, une légende pour un formulaire ou un tableau <legend> ou <caption>, etc, etc.
De plus il faut penser aux navigateurs qui ont du mal avec les CSS.
 
Cf ma réponse au dessus, si tu ne fais qu'un seul <div> tu perds une partie des informations sur la structure de ton document. Si celui ci a des paragraphes, cela devrait se refléter au niveau HTML. De plus tu modifieras beaucoup plus facilement les styles avec des <p> (notamment l'espacement entre les paragraphes) qu'avec un seul <div>.




 
+10  
 
Merci bcp :jap:


---------------
www.astrocosmos.net, le portail belge francophone sur l'astronomie et les Sciences.
n°229277
gm_superst​ar
Appelez-moi Super
Posté le 17-10-2002 à 11:11:53  profilanswer
 

AZorbas a écrit a écrit :

peut-être pour un <b> mais si tu fais ça pour un size="4" ... même un petit morceau de texte tu n'as plus le contrôle sur le style du site.
Imagine des zones de texte avec une feuille de style avec une police en 12 et un morceau de texte avec un size 4. Si l'utilisateur met taille du texte "la plus grande" dans son browser ça va ressembler à rien.



J'ai pas tout compris... j'ai l'impression que tu mélanges 2 choses : l'utilisation de certaines balises HTML et l'utilisation de certains attributs de mise en forme (size=".." ). Dans les dernières normes ces attributs n'existent pas, donc il faut recourir aux CSS. Mais ça ne te dispense pas d'utiliser certains tags comme <p>. Cf la FAQ : HTML -> structuration/présentation des données. CSS -> mise en forme. Il est donc logique que des attributs comme "size" ou "align" n'existent plus.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°229279
gm_superst​ar
Appelez-moi Super
Posté le 17-10-2002 à 11:15:32  profilanswer
 

AZorbas a écrit a écrit :

Le prob c'est que chez moi les liens ont une taille et parfois un code de couleur bien définis.
 
Tu proposerais quoi comme solution de syntaxe alors ?



Tu sais qu'on peut redefinir le style d'un tag ?  
 

a {
  color: red;
  font-weight: bold;
  border: 1px solid yellow;
}


 
Ou alors je n'ai pas compris ton problème...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°229282
antp
Super Administrateur
Champion des excuses bidons
Posté le 17-10-2002 à 11:19:00  profilanswer
 

AZorbas a écrit a écrit :

pour toi alors il faudrait utiliser le texte avec des CSS et pas les liens ?




 
j'ai pas compris là :??: ... un lien tu fais un <a>, un texte normal tu fais un <p> ou un <div> mais faut pas commencer à utiliser un <div> pour un lien ou un <a> pour un texte normal... c'est ce que je voulais dire, mais je sais pas si j'avais bien compris ton post précédent :D


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
n°229290
AZorbas
That's me , Alexis Zorbas !
Posté le 17-10-2002 à 11:25:02  profilanswer
 

antp a écrit a écrit :

 
 
j'ai pas compris là :??: ... un lien tu fais un <a>, un texte normal tu fais un <p> ou un <div> mais faut pas commencer à utiliser un <div> pour un lien ou un <a> pour un texte normal... c'est ce que je voulais dire, mais je sais pas si j'avais bien compris ton post précédent :D




 
non non tu as raison :D
je me suis mal exprimé là :D


Message édité par AZorbas le 17-10-2002 à 11:31:50

---------------
www.astrocosmos.net, le portail belge francophone sur l'astronomie et les Sciences.
n°229295
AZorbas
That's me , Alexis Zorbas !
Posté le 17-10-2002 à 11:31:35  profilanswer
 

gm_superstar a écrit a écrit :

 
Tu sais qu'on peut redefinir le style d'un tag ?  
 

a {
  color: red;
  font-weight: bold;
  border: 1px solid yellow;
}


 
Ou alors je n'ai pas compris ton problème...




 
je sais que l'on peut ... je vais essayer d'être plus explicite.
 
Dans mon cas j'utilise des liens de style différents en fonction de la page.
 
Bref je voulais savoir s'il était judicieux de taper un long texte avec des liens, titre, etc ... sans me soucier d'une quelconque référence du style DANS mon texte.
 
En gros j'aurais ça :
 

Code :
  1. <div class="monArticle">
  2.   Blablabla
  3.   <a href...>un lien de mon article</a>
  4.   blalblala
  5. </div>


 
et à coté de ça je crée un CSS
 
comme cela :
 

Code :
  1. .monArticle{}
  2. .monArticle:link{}
  3. .monArticle:xxx{}


 
donc clairement minimiser l'utilisation du code "class" dans les différentes balises..
 
Maintenant ton conseil est le plus judicieux et je vais tâcher de travailler comme cela (en virant les balises mortes)
 
 
Ai-je été clair ? :D
 
:jap::jap:


Message édité par AZorbas le 17-10-2002 à 11:32:44

---------------
www.astrocosmos.net, le portail belge francophone sur l'astronomie et les Sciences.
n°229297
Toucouch
Posté le 17-10-2002 à 11:32:42  profilanswer
 

A mon avis, tout dépend du document que tu traites... Si c'est une page isolée ou à un endroit tu doit mettre un gros message en rouge fluo, ça ne vaut pas le coup de créer une classe css pour ça...
Maintenant, si ta page fait partie d'un site où tu essaies de présenter clairement des informations avec une mise en forme rigoureuse pour une clarté optimale, là, il me semble clair qu'un fichier css externe avec des classes pour chaque type de section est indispensable...

n°229300
Toucouch
Posté le 17-10-2002 à 11:34:49  profilanswer
 

J'ajouterai que si la plupart de tes paragraphes ou liens (par exemple) ont le même format, tu as intérêt à redéfinir le style de la balise sans t'emmerder à faire une classe que tu utiliserais 9 fois sur 10...

n°229302
AZorbas
That's me , Alexis Zorbas !
Posté le 17-10-2002 à 11:35:10  profilanswer
 

Toucouch a écrit a écrit :

A mon avis, tout dépend du document que tu traites... Si c'est une page isolée ou à un endroit tu doit mettre un gros message en rouge fluo, ça ne vaut pas le coup de créer une classe css pour ça...
Maintenant, si ta page fait partie d'un site où tu essaies de présenter clairement des informations avec une mise en forme rigoureuse pour une clarté optimale, là, il me semble clair qu'un fichier css externe avec des classes pour chaque type de section est indispensable...




 
Le plus simple c'est de visiter mon site et d'aller voir les articles pour vous faire une idée ... vous remarquerez que tous les articles ont exactement la même structure :
 
liens en bleu
source en bordeau
titre bien défini
etc ...
 
>> www.astrocosmos.net


---------------
www.astrocosmos.net, le portail belge francophone sur l'astronomie et les Sciences.
n°229308
gm_superst​ar
Appelez-moi Super
Posté le 17-10-2002 à 11:41:11  profilanswer
 

AZorbas a écrit a écrit :

je sais que l'on peut ... je vais essayer d'être plus explicite.
 
Dans mon cas j'utilise des liens de style différents en fonction de la page.
 
Bref je voulais savoir s'il était judicieux de taper un long texte avec des liens, titre, etc ... sans me soucier d'une quelconque référence du style DANS mon texte.



Tu devrais jeter un oeil sur les sélecteurs : http://www.yoyodesign.org/doc/w3c/ [...] or.html#q1
 
Tu définis ensuite le style de tes liens comme ça :
 

div.monArticle a {
  ...
}
 
div.monArticle a:hover {
  ...
}
 
...


 
Ceci permet de définir un style pour l'élément <a> qui est contenu dans un <div class="monArticle"> C'est plus élégant car tu n'as pas de class="plop" dans tes <a>


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°229314
Toucouch
Posté le 17-10-2002 à 11:43:20  profilanswer
 

AZorbas a écrit a écrit :

 
 
Le plus simple c'est de visiter mon site et d'aller voir les articles pour vous faire une idée ... vous remarquerez que tous les articles ont exactement la même structure :
 
liens en bleu
source en bordeau
titre bien défini
etc ...
 
>> www.astrocosmos.net




C'est bôôôôôôô!!!! (Les photos aussi sont chouettos !)

n°229315
AZorbas
That's me , Alexis Zorbas !
Posté le 17-10-2002 à 11:43:30  profilanswer
 

gm_superstar a écrit a écrit :

 
Tu devrais jeter un oeil sur les sélecteurs : http://www.yoyodesign.org/doc/w3c/ [...] or.html#q1
 
Tu définis ensuite le style de tes liens comme ça :
 

div.monArticle a {
  ...
}
 
div.monArticle a:hover {
  ...
}
 
...


 
Ceci permet de définir un style pour l'élément <a> qui est contenu dans un <div class="monArticle"> C'est plus élégant car tu n'as pas de class="plop" dans tes <a>




 
 
+1000000 là :D
 
ok c'est exactement ce que voulais faire  :bounce:
 
merci  :jap:  
 
 
désolé si je n'étais pas assez clair :D
 


Message édité par AZorbas le 17-10-2002 à 11:48:43

---------------
www.astrocosmos.net, le portail belge francophone sur l'astronomie et les Sciences.
n°229319
AZorbas
That's me , Alexis Zorbas !
Posté le 17-10-2002 à 11:45:21  profilanswer
 

Toucouch a écrit a écrit :

 
C'est bôôôôôôô!!!! (Les photos aussi sont chouettos !)




 
merci :jap:


---------------
www.astrocosmos.net, le portail belge francophone sur l'astronomie et les Sciences.
n°229326
Toucouch
Posté le 17-10-2002 à 11:50:35  profilanswer
 

AZorbas a écrit a écrit :

 
merci :jap:




Non, c'est vrai...
 
 
 
gm_superstar > La question que je me pose c'est quels sont les navigateurs qui gèrent déjà le CSS2? (Parce que c'est propre à CSS2 ça, non?)
Sinon, c'est vrai que c'est cool comme truc...
 

n°229332
gm_superst​ar
Appelez-moi Super
Posté le 17-10-2002 à 11:53:27  profilanswer
 

Toucouch a écrit a écrit :

gm_superstar > La question que je me pose c'est quels sont les navigateurs qui gèrent déjà le CSS2? (Parce que c'est propre à CSS2 ça, non?)
Sinon, c'est vrai que c'est cool comme truc...



http://www.webreview.com/style/css [...] tors.shtml
 
Bon il manque IE 6, mais je crois qu'il fait guère mieux que IE 5.x...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°229349
Toucouch
Posté le 17-10-2002 à 12:07:56  profilanswer
 

gm_superstar a écrit a écrit :

 
http://www.webreview.com/style/css [...] tors.shtml
 
Bon il manque IE 6, mais je crois qu'il fait guère mieux que IE 5.x...




Merci pour toutes ces infos... :jap:

n°229549
mogg
Posté le 17-10-2002 à 16:27:53  profilanswer
 

j'ai pas tout lu mais moi je mets les class dans les <td> et sur les liens ...


---------------
Les signatures c'est MAL
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Votre méthode pour avoir du code HTML propre ?

 

Sujets relatifs
[CSS] tuto pour full-CSS [CSS] [mozilla] media="print"
Envoie de mail de type text/html avec mailto[HTML] Solution simple pour faire défiler du texte sur une page
Statistiques en HTML [CSS] opacité d'un element
[HTML]Form désactiver la touche entrée ?[PHP] Methode d'authentification?
FAQ XHTML/CSS -- La FAQ évolue ! Détails inside[HTML] Comment enlever un banniere?
Plus de sujets relatifs à : [CSS] Votre méthode pour avoir du code HTML propre ?


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR