Version complète: sur le forum Webmaster Hub : BZHcool.com Valide!
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
Pages: 1, 2
BZHcool
Bonjour,

Depuis quelques temps je souhaitais me lancer dans la création d'une page présentant mon Pseudo... mais une page qui devait être accessible à tous.

Suite à un post d'un membre sur ce forum je me suis permis de lui emprunter (avec son accord... merci MissMonde) un modèle de page et un CSS. Grace a cet emprunt j'ai pu étudier un code qui me semblait simple et ainsi comprendre un peu mieux le principe d'un CSS pour une page. Avec ensuite l'aide trouvé sur OPENWEB j'ai modifié à ma sauce le CSS et ma page et j'obtiens une page valide HTML et un CSS valide... rolleyes.gif

Ce que je souhaite maintenant savoir c'est si cette page passe bien sur tous les navigateurs et si vous pouviez me donner quelques astuces pour la passer valide XHTML... si c'est possible?

Sinon biensur je suis preneur des remarques concernant cette page... c'est comme celà qu'on avance!!!

Merci d'avance...
Anonymus
Première remarque :
CITATION
le Forum "Webmaster-Hub.com.com".


Seconde remarque : Ton adresse mail va être aspirée par .......

Troisième remarque : Tu ne devrais pas aligner au centre, mais justifier à gauche, avec une petite marge pour les textes.

Sinon, félicitations pour ton nom de domaine wink.gif
Ganf
pour ceux qui comme moi ne sont pas doués, l'adresse de la page est dans le titre du fil de discussion.

Aligner à gauche ... la page ? je ne suis pas d'accord, centrer me parait beaucoup mieux. Enfin c'est une affaire de gout je pense.
ultrajoe
CITATION(BZHcool @ jeudi 10 juin 2004, 17:20)
Bonjour,

Depuis quelques temps je souhaitais me lancer dans la création d'une page présentant mon Pseudo... mais une page qui devait être accessible à tous.

Suite à un post d'un membre sur ce forum je me suis permis de lui emprunter (avec son accord... merci MissMonde) un modèle de page et un CSS. Grace a cet emprunt j'ai pu étudier un code qui me semblait simple et ainsi comprendre un peu mieux le principe d'un CSS pour une page. Avec ensuite l'aide trouvé sur OPENWEB j'ai modifié à ma sauce le CSS et ma page et j'obtiens une page valide HTML et un CSS valide... rolleyes.gif

Ce que je souhaite maintenant savoir c'est si cette page passe bien sur tous les navigateurs et si vous pouviez me donner quelques astuces pour la passer valide XHTML... si c'est possible?

Sinon biensur je suis preneur des remarques concernant cette page... c'est comme celà qu'on avance!!!

Merci d'avance...

Salut,

J'aime bien ce style sobre et lisible, le texte en violet j'accroche pas trop mais c'est une histoire de goût, par contre le a:hover j'aime vraiment pas du tout, c'est trop trop gras.

Une petite coquille m'a sauté aux yeux lors du survol de ta page "Une autre de mes passions se sont les « Porches »"

A plus,

PS : testé sous xp avec mozilla firefox 0.8
Cleden
Salut à toi Breton,

CITATION
Ce que je souhaite maintenant savoir c'est si cette page passe bien sur tous les navigateurs et si vous pouviez me donner quelques astuces pour la passer valide XHTML... si c'est possible?

Il ne te manque pas grand chose pour passer au xhtml 1.1.
  • Changer le doctype tongue.gif
  • Fermet les balise <meta />
  • N'utiliser que des balises, attributs et éléments en minuscule
  • Fermer les balise <img />
  • Fermer les balises <li></li>
  • Ajouter l'attribut alt aux <img>
J'ai surement oublié des trucs mais, si tu fais ça, il ne te manquera plus grand chose.

Loïc.
BZHcool
Merci pour ces premières remarques... je vais étudier celà dès ce soir...

Au fait oui dans la précipitation tout à l'heure j'ai oublié de vous donner mon adresse : www.BZHcool.com
Arlette
CITATION(BZHcool @ jeudi 10 juin 2004, 19:34)
Au fait oui dans la précipitation tout à l'heure j'ai oublié de vous donner mon adresse :  www.BZHcool.com

Elle est bien la page, mais il manque l'essentiel : La photo de Méléna wub.gif
Dinostrate
Salut BZHcool le fou de "la torche" (je crois qu'on se comprend wink.gif , avis aux autres, c'est un vrai compliment)

Comme te le dit cleden, c'est presque fait..... de passer au xhtml, essaie et tu n'auras aucun mal....

... mais le alt, c'est pour tout, pas que pour xhtml.... là, je pige pas trop....

Dino
Dinostrate
Encore un truc et après, c'est promis, j'arrete les parenthèses....

La photo que tu nous montre fait plutot vieux briscard du désert.... on s'attend à trouver des dunes infinies derrière ton portrait, et peut être même une oasis. T'as même pas besoin de rajouter un chapeau saharien... Bref, c'est classe, mais ça ne fait pas très Breton... enfin, c'est mon avis... Ceci dit, j'aime beaucoup !!!

voili voilou.....
BZHcool
Désolé Dino... mais je ne vais pas dévoilé mes photos de bon vieux breton avec une coiffe sur la tête comme nos grand-mères... ici au Pays!
BZHcool
CITATION
par contre le a:hover j'aime vraiment pas du tout, c'est trop trop gras.


J'essaye depuis 10 minutes et je n'arrive pas à modifier le trait voir a le supprimé... çà doit pas être sorcier... arrgh!!!

Cleden tu me conseilles de fermer mes balises <META> mais comment...

Moi j'ai dans ce style :

CODE
<META name="robots" content="follow,index">
Denis
Alors là, quelle déception ! Je m'empresse d'aller voir c'te merveille de page valide et qu'est-ce que je trouve ? Rien... sad.gif

www.bhzcool.com could not be found. Please check the name and try again. dry.gif

Bah, je reviendrai demain. En espérant que ce sera en ligne.
BZHcool
Oups!!!

Comprends pas Denis car elle est bien là...

Pourtant le courant passe bien entre la Bretagne et le Canada normallement wink.gif
ultrajoe
CITATION(BZHcool @ jeudi 10 juin 2004, 21:56)
J'essaye depuis 10 minutes et je n'arrive pas à modifier le trait voir a le supprimé... çà doit pas être sorcier... arrgh!!!

euh "text-decoration:none" non ?

Pour Denis inverse le Z et le H dans le domaine ;-)
BZHcool
Bien vu pour le BZH....

Sinon voici mon bout de code...

CODE
#navigation A:hover {
    COLOR: #990033; BORDER-BOTTOM: #990033 3px solid; TEXT-DECORATION: none
}
#active A:link {
    COLOR: #990033; BORDER-BOTTOM: medium none; TEXT-DECORATION: none
}
#active A:visited {
    COLOR: #990033; BORDER-BOTTOM: medium none; TEXT-DECORATION: none
}
#active A:hover {
    COLOR: #990033; BORDER-BOTTOM: medium none; TEXT-DECORATION: none
}
Denis
CITATION(ultrajoe @ jeudi 10 juin 2004, 16:19)
Pour Denis inverse le Z et le H dans le domaine ;-)

Ah, je suis trop con ! shutup.gif

Tiens, j'en ai envie, je t'en propose une version XHTML 1.1. Je reviens dès que c'est fait. smile.gif
Denis
Voilà, vendu ! smile.gif

http://www.cybercodeur.net/webmasterhub/bz...ZHcool.com.html
http://validator.w3.org/check?verbose=1&ur...ZHcool.com.html

Je mettrais quand même le CSS à part, pas dans les éléments eux-mêmes.
BZHcool
Alors là... chapeau bas! et merci pour ce coup de pouce...

C'est promis si un jour je dois passer par chez toi (là bas...) je te paye un bon verre...

Encore merci... :up:

CITATION
Je mettrais quand même le CSS à part, pas dans les éléments eux-mêmes.


C'est à dire dans un dossier a la racine du site!
ultrajoe
CITATION(BZHcool @ jeudi 10 juin 2004, 22:23)
Bien vu pour le BZH....

Sinon voici mon bout de code...

CODE
#navigation A:hover {
    COLOR: #990033; BORDER-BOTTOM: #990033 3px solid; TEXT-DECORATION: none
}
#active A:link {
    COLOR: #990033; BORDER-BOTTOM: medium none; TEXT-DECORATION: none
}
#active A:visited {
    COLOR: #990033; BORDER-BOTTOM: medium none; TEXT-DECORATION: none
}
#active A:hover {
    COLOR: #990033; BORDER-BOTTOM: medium none; TEXT-DECORATION: none
}

Pour le soulignement retire la bordure ;-) BORDER-BOTTOM: #990033 3px solid;

Denis si tu t'ennuis tu peux toujours rendre compatible le site de mon profile tongue.gif XHTML1.1 ca me plait bien, j'avais commencé un jour (h**p://w*w.apparticulier.com/V2/), mais j'ai pas réussi le positionnement des calques sur le coup et du coup j'ai plus le temps de le faire...
Dinostrate
Denis,

Ne les écoutes pas tous, sinon, tu ne vas plus bosser que pour eux....
... faut bien qu'ils se décarcassent un peu les aminches.... wink.gif
... et moi alors..... non mais....

Au fait, comme je risque de déborder, je sens que je vais t'envoyer un mp.
Mais comme j'en ai trop dit ou pas assez, la question qui me turlupine est la suivante : connais tu rivierre à pierre ?

Suite via mp....

Dino
pierredureau
Quelques trucs tirés par les cheveux :

1. <div id="milieu">, je mettrai un identifiant avec plus de sens.
2. <p>J'ai créé cette page pour 3 raisons: <br /> ... et la suite...
Il y a beaucoup trop de <br />, une liste non ordonnée ne conviendrai pas mieux ?
3. J'ai pas testé avec IE (Linux oblige) mais enlever l'en-tête XML rendra le DTD switch actif.
4. Caprice : BTS pourrait faire l'objet d'un <acronym>
5. Dans ta partie validation, met des titles aux <a>.
6. L'attribut style, c'est bof bof.
7. Détail qui tue : en CSS, 0pt s'écrit tout simplement 0.
8. <h1><span>BZHcool.com</span></h1>, je ne comprend pas la redondance.
9. <h2></h2>, mystère... à moins que ça soit pour ne pas sauter un niveau.

Je n'ai plus de cheveux, j''ai du y aller un peu fort là ;-)
LaurentDenis
Ah... Me voilà encore à jouer les rabat-joie :

Très joli, le passage au XHTML1.1. :up:
Mais maintenant, il n'y a plus qu'à... remettre ça avec le bon vieux DocType XHTML1.0 laugh.gif

(Autrement dit, juste changer le doctype en gardant l'excellent code de Denis)

En effet, à la différence du XHTML1.0, le XHTML1.1:
- ne doit pas être servi comme étant du HTML (avec le type Mime text/html)
- doit être servi comme étant du XML ( avec le type mime application/xml + xhtml). Voir http://www.w3.org/TR/xhtml-media-types/ (attention à la différence entre "may" et "should" qui ont chacun un sens bien précis dans les spécifications du W3C)

Pour ceux qui se posent la question, disons que le type mime est une information envoyée par le serveur qui indique au navigateur ce qu'il va recevoir :
- du HTML,
- du XML,
- une image GIF, PNG...
- de la soupe,
- des brocolis
- ou une claque.

Actuellement, la page est servie incorrectement en text/html, autrement dit, c'est de la soupe. Coup de bol, les navigateurs s'en accommodent et font comme si c'était du HTML.

Passer en application/xml + xhtml ne serait pas une bonne solution, car :
- ce type mime n'est pas supporté (entre autres) par Internet Explorer (Win et Mac). Le document se transforme alors en brocolis à télécharger.
- le document étant interprété par les navigateurs Gecko et par Opera comme étant du xml, il ne doit comporter aucune erreur de syntaxe sinon... c'est la claque ! Le moteur de rendu du navigateur s'arrête sur l'erreur, affiche un message d'alerte et la suite du code XHTML. On peut être un peu masochiste et apprécier ce mode de validation radical (c'est mon cas et celui de Denis aussi, il me semble), mais il faut être sûr de bien maîtriser sa syntaxe ! ce serait encore jouable ici, mais ce serait très dangereux par exemple dans un weblog où les commentaires et trackbacks risquent d'amener du code invalide : Denis témoignera (avec accablement) que j'ai souvent (et involontairement) dézingué son CyberCodeur juste avec la petite esperluette du Blog & Blues de ma signature dans un trackback... whistling.gif

Déclarer correctement du XHTML1.1 est donc plutôt contraignant:
- Il faut faire de la négociation de contenu au niveau serveur pour n'envoyer du XHTML1.1 en application/xml+xhtml qu'aux navigateurs qui déclarent le supporter, et du XHTML1.0 en text/html aux autres.
- pas de droit à l'erreur

Et ces contraintes n'apportent... aucun avantage concret ici. En effet, XHTML1.1 sert principalement à intégrer un élément supplémentaire (le module ruby) qui n'est pas utilisé dans cette page (où il ne servirait à rien d'ailleurs).

voilà, voilà... Bon, j'avoue : on l'a tous fait, de s'offrir brièvement le frisson d'une page en XHTML1.1 whistling.gif

Sinon, pour l'accessibilité : il y a deux liens adjacents dans la page à cause des stikers de validation qui ne sont séparés par aucun caractère affichable.

[edit]: du danger des forums pour les blogueurs : on finit par faire des posts en guise de message au lieu de bloguer ça chez soi wink.gif
LaurentDenis
CITATION(pierredureau @ vendredi 11 juin 2004, 01:01)
3. J'ai pas testé avec IE (Linux oblige) mais enlever l'en-tête XML rendra le DTD switch actif.

Autre contrainte du XHTML1.1 justement : la page n'étant pas en UTF-8 ou en UTF-16, mais en iso-8859-1, le prologue xml est nécessaire pour spécifier l'encodage.
Denis
Laurent : Rabat-joie... wink.gif

Moi je persiste à demeurer en XHTML 1.1, juste pour vous embêter tous autant que vous êtes.
LaurentDenis
On déborde un peu là, mais rapidement : j'ai toujours supposé que tu servais du XHTML1.0 à IE. je vois que ce n'est pas le cas. Argh !!! evil.gif

Shame on you !

Tu seras damné pour l'éternité...

(Sauf si Bleizig modifie ta négociation de contenu pour servir du XHTML1.0 à Internet Explorer. Il te règlera bien ça en deux coups de cuillères à pot, non ? B) )
BZHcool
Houlà!!! Je ne voudrais pas déclarer une guerre de Xhtml entre vous...

Donc dans mon cas si j'ai bien compris LaurentDenis pour ne pas prendre une claque si je ne mange pas ma soupe de brocoli... il faudrait que je change le doctype de mon document...

Au passage peux tu me le donner...

Mais si je suis le code de Denis en Xhtml 1.1 je risque quoi principalement avec cette page... au niveau des navigateurs...

Sinon pour le soulignement des liens c'était bien çà Ultrajoe!

Je viens de comparer ma version valide HTML et celle (aidé par Denis) valide xhtml... effectivement il n'y avait pas grand chose à faire le tout c'était de savoir qu'il fallait le faire... C'est OK maintenant! Par contre, pour exemple :

CODE
<meta name="robots" content="follow,index" />


On est toujours obligé de laisser un espace à la fin entre " et />?
LaurentDenis
C'est tellement évident que j'en oubliais de le signaler : Pour les changements à apporter en passant du HTML au XHTML, voir Passer du HTML au XHTML wink.gif

Le Doctype XHTML1.0 strict :
CODE
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

Voir List of valid DTDs you can use in your document sur le site du W3C pour toutes les DTD disponibles.

L'espace dans les metas est nécessaire en effet, pour certains vieux navigateurs qui auraient du mal à comprendre le />

Enfin, comme dit plus haut, les navigateurs sont gentils pour l'instant et acceptent de traiter du XHTML1.1 comme si c'était du HTML quand le doctype est incorrect. Mais rien ne dit que ça durera wink.gif
Bobe
CITATION(Denis @ vendredi 11 juin 2004, 05:20)
Moi je persiste à demeurer en XHTML 1.1, juste pour vous embêter tous autant que vous êtes.

Rhaa :nono:

Tu pourrais au moins mettre un doctype xhtml 1.0 quand tu envoies en text/html..
Monique
Bonjour,

Je reviens sur deux points soulevés par Pierre.

Pourquoi un span dans le h1 puisqu'il concerne la totalité du texte ?
Pourquoi ce h2 vide, avec une image en background qui n'est pas visible ?

J'ai fait un essai avec IE...
c'est lisible mais tout le texte est centré wacko.gif
BZHcool
CODE
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 <head>
   <title>Votre titre</title>
   <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
 </head>


Donc si je mets ceci j'ai tout bon selon ton site Laurent...

Pour monique... l'image en H2 invisible c'est pour l'instand j'ai en tête de mettre en Background un drapeau breton qui flotte au vent wink.gif ... mais vaut que je fasses quelques photos avant... histoire de ne pas copier ce drapeau ailleurs whistling.gif

CITATION
c'est lisible mais tout le texte est centré


Que veux tu dire par là... effectivement ma page est centrée... mais de là à faire wacko.gif je ne comprends pas... t'as une copie d'écran sous la main...
Denis
Cette déviation me fait soudainement rapeller qu'un site n'est jamais parfait et n'est jamais terminé. biggrin.gif

En fait, j'hésite encore à conserver mon XHTML 1.1 - il est possible qu'au cours de ma prochaine refonte, je retombe en XHTML 1.0 strict. Tous vos commentaires vont dans le sens de cette réflexion, mais comme d'ahbitude, c'est le temps qui manque pour organiser tout ça. J'ai bon espoir qu'un jour, j'aurai du temps de qualité à accorder à cybercodeur.net ! D'ici là, vous aurez à vivre avec l'imperfection. ^_^

Mais effectivement, BZHcool, si tu prends cette structure, tu auras un site en XHTML 1.0 strict et non plus en XHTML 1.1. Par contre, pour ce qui est de faire une négoce de type mime en fonction du browser (text/html ou applicationhtml+xml), ça te prendrait un peu de programmation. Je te propose une version en PHP, offerte il y a longtemps par Anubis et Darken (deux illustres membres de ce forums wink.gif) et que j'utilise depuis sur mon site :

CODE
<?php
// Indique un Mime type correct si le client accepte le vrai xhtml
    if( stristr($HTTP_SERVER_VARS["HTTP_ACCEPT"], "application/xhtml+xml") )
    {
 header("Content-type: application/xhtml+xml");
 echo "<?xml version='1.0' encoding='iso-8859-1'?>\n";
    }
    else
    {
 header("Content-type: text/html; charset=iso-8859-1");
    }
?>

Bon évidemment, faudrait passer le bon doctype en fonction du browser aussi, mais là...
Nudrema
CITATION(Denis @ vendredi 11 juin 2004, 15:27)
Bon évidemment, faudrait passer le bon doctype en fonction du browser aussi, mais là...

Bah, si c'est du XHTML 1.0 Strict, tu peux l'envoyer à tout le monde, c'est bon...
BZHcool
Merci Denis pour ce bout de code mais je vais être au regret de ne pas en tenir compte pour le moment... en effet pour ce domaine qui ne devrait pas faire changer la face du monde je n'ai pris que le minimun proposé chez OVH... Histoire de loger 1 ou 2 pages sur ce BZHcool... et donc j'ai légérement sacrifié l'option PHP pour profité du meilleur prix!!! whistling.gif

Sinon c'est fait je viens de passer en XHTML 1.0 !
Monique
CITATION(BZHcool @ vendredi 11 juin 2004, 14:45)
Que veux tu dire par là... effectivement ma page est centrée... mais de là à faire wacko.gif je ne comprends pas... t'as une copie d'écran sous la main...

En voilà une... tu comprendras le wacko.gif

Pour le span dans le h1... j'insiste, je ne comprends pas son utilité rolleyes.gif

PS : je n'ai pas résisté à l'occasion de vous montrer ce qui me fait toujours rire quand j'ouvre IE... regardez le logo devant test-jaws.html dans la barre des liens hypocrite.gif
MissMonde
J'avais le même problème que Monique (IE6), mais je ne l'ai pas compris tout de suite, j'ai réalisé hier soir que je ne voyais pas la même chose que vous tous, en lisant les réponses à cette page.

Du coup, je lui ai refait ce matin sa page en XHTML 1.0 strict.

merci de me dire comment elle passe chez vous.

il me reste un problème non résolu (il y en a toujours un), c'est l'image bitmap de validation html, qui a une petite bordure sur le côté droit.

si quelqu'un a une idée.
LaurentDenis
CITATION(MissMonde @ vendredi 11 juin 2004, 19:01)
Du coup, je lui ai refait ce matin sa page en XHTML 1.0 strict.

elle est là :BZHcool

merci de me dire comment elle passe chez vous.

Très bien, sauf pour le
CODE
<h1>BZHcool.com</h1>

suivi d'un
CODE
<h3>QUI SUIS-JE? </h3>


Il manque un petit <h2> quelque-part, non ? whistling.gif

Outre la logique structurelle, c'est important pour l'accessibilité (navigation dans le contenu via la hiérarchie des titres)

Allez-y... Je les démolirai toutes ! :yoot:
(Je sors, c'est ça ?) shutup.gif
MissMonde
oui, oui, je sais bien, mais au vu de la page sans feuille de style, ça me paraissait bien comme dimensions de titres.

mais bon, et puis zut ! j'ai passé ma matinée là-dessus avec un code sortant de dreamweaver, je ne le connais pas celui-là, mais il met des majuscules partout, les guillemets nulle part, les point virgules on n'en parle pas, l'horreur.

alors, bon, on veut aider et puis voilà. :nono: angry.gif evil.gif je n'ai pas l'habitude des smileys, mais leur tête correspond à peu près à ce que je veux dire.

wink.gif
Dinostrate
CITATION(LaurentDenis @ vendredi 11 juin 2004, 20:08)
Il manque un petit <h2> quelque-part, non ? whistling.gif

C'est à ce stade que mon âme de contestataire s'insurge....
Vrai de vrai qu'il faudrait théoriquement des h2 si on place des h3

.... mais moi qui suis un adepte du h ..... jusques aux six..... je me dis, ce n'est pas normal.....

Les h + les css permettent une présentation aussi harmonieuse que possible (enfin, harmonieuse, selon le réalisateur)

Alors, faut pas m'e...... mmmmm... bêter avec ces conventions trop rigides....

Bref, je ne suis pas d'accord du tout sur ce point, et je revendique le droit de placer un h6, même si je n'ai placé qu'un h1.....
.... non mais..... wink.gif

<edit> pourquoi vouloir être aussi puriste ? à quoi ça sert ? </edit>

Dino
MissMonde
merc Dino
p_flower01.gif p_flower01.gif p_flower01.gif p_flower01.gif p_flower01.gif p_flower01.gif
LaurentDenis
Bon, sérieusement cette fois, ne confondons pas purisme et rigueur.

Le purisme, c'est dire que:
- le portait de BZHcool n'a rien à faire dans la <div id="navigation">
- que l'élément de liste unique de cette div pour l'adresse mail est injustifié
- que la liste de définition de la partie Pourquoi cette page? est inacceptable, vu qu'aucun <dt> n'est défini par un <dd> (Pas si puriste que ça, ce dernier point, d'ailleurs)...
- etc.

La rigueur, c'est de relever une erreur qui a des conséquences très concrètes pour un certain nombre d'utilisateurs du site : une mauvaise hiérarchie des titres:
- peut faire échouer des traitements de la source XHTML visant à en extraire les titres pour former un résumé, une table des matières...
- fait échouer un procédé d'accessibilité : la navigation dans une page par les titres dans Jaws. Voir Jaws, label, titres, liens et CSS en général (Yoan Simonian me corrigera je l'espère si je me trompe).

[edit: j'en rajoute une couche]
CITATION
9.2 : La page web est-elle structurée de manière cohérente ?

Commentaire :
L’utilisation des styles proposés par le HTML du type H1, H2… permet de structurer la page. Ces balises sont très importantes pour structurer une page Web : la balise H1 pour le titre principal H2 pour les sous-menus, ... H6. Ces balises doivent être utilisées pour leur fonction première, la structuration, et non pour leur dimension graphique. De plus, les blocs d'informations doivent être distincts les uns des autres.

Source : Le plus récent référentiel d'accessibilité concret à ma connaissance (celui d'AccessiWeb)
[/edit]

Outre le fait que c'est à peu près aussi logique que :
CITATION
Mon grand 1 : de quoi je cause
Et tout de suite mon petit z, juste de ça



Tout ça pour que ce soit plus joli avec des h3 ? :down:
ams51
Je vous lis mais j'avoue que ça me dépasse toutes ces règles pointilleuses wacko.gif
J'avoue préférer travailler à la louche car la finition coûte souvent plus qu'elle ne rapporte.

Néanmoins ce débat est très interessant smile.gif à la pointe de la technologie
BZHcool
Après quelques heures d'absence je reviens... et oh! grand discussion sur cette page!

Tout d'abord je tenais a remercier MissMonde qui a passé un certain temps sur ma page pour faire en sorte que cette dernière soit parfaite... et je signale au passage que notre Miss apprend tous les jors comme nous tous, n'étant professionnel en programmation si j'ai bien compris!

Donc pour ceci
CITATION
alors, bon, on veut aider et puis voilà
je suis ravi de voir que des personnes peuvent s'entraider sur un Forum c'est le but 1er je pense...

Sinon LaurentDenis a lire ceci :

CITATION
- le portait de BZHcool n'a rien à faire dans la <div id="navigation">
- que l'élément de liste unique de cette div pour l'adresse mail est injustifié
- que la liste de définition de la partie Pourquoi cette page? est inacceptable, vu qu'aucun <dt> n'est défini par un <dd> (Pas si puriste que ça, ce dernier point, d'ailleurs)...
- etc.


Je me dis que ma page est encore loin d'etre parfaite... mais alors pourquoi lorsque je la teste avec un validateur elle est OK!!!

Sinon, que veux tu dire par cette phrase :

CITATION
que l'élément de liste unique de cette div pour l'adresse mail est injustifié


Décidement, lorsque j'ai mis cette page en ligne je ne pensais pas faire parler d'elle autant... a cette allure là mon BZHcool va devenir une référence dans le monde de la validation XHTML tongue.gif biggrin.gif
meta nando
CITATION(Monique @ vendredi 11 juin 2004, 13:37)
Pourquoi un span dans le h1 puisqu'il concerne la totalité du texte ?


Cette bricole, à mon avis, a peut-être été popularisée par celui qui ont crée le gabarit CSS Zen Garden.
Son utilisation est souvent quelque chose comme ça dans les quelques pages que j'ai vu:
CODE
h1 {
   background: url(fichier.png) no-repeat left top;
   margin: ...px ...px ...px ...px;
   width: ...px;
   height: ...px;
   ....
}
h1 span {
   display: none;
}


Dans la liste de diffusion des Pompeurs-css le problème avait été abordé.
Fil de discussion:
Conception d'une page "skinable" au maximum
Re: Conception d'une page "skinable" au maximum
Re: Conception d'une page "skinable" au maximum
Re: Conception d'une page "skinable" au maximum
Re: Conception d'une page "skinable" au maximum
....
LaurentDenis
CITATION(BZHcool @ samedi 12 juin 2004, 00:01)
Tout d'abord je tenais a remercier MissMonde qui a passé un certain temps sur ma page pour faire en sorte que cette dernière soit parfaite... et je signale au passage que notre Miss apprend tous les jors comme nous tous, n'étant professionnel en programmation si j'ai bien compris!

C'est également dans cet état d'esprit que je me suis permis de reprendre la seule "erreur" de l'excellent travail de MissMonde : la hiérachie des titres, parce qu'elle aura des conséquences bien concrètes pour une partie des visiteurs.

En revanche, quand j'ai parlé ensuite du portait, de la liste réduite à un seul élément et de la liste de définition, ce n'était pas pour apporter d'autres critiques, mais pour donner au contraire des exemples de (mauvaises) critiques "puristes" et subjectives.

Si mon message était maladroitement formulé (fatigue de fin de semaine aidant), veuillez m'en excuser.

(J'ai tout de même un doute de plus en plus sérieux sur la liste de définition réduite aux <dt>... puisque le but de l'élément <dl> est explicitement de faire correspondre des termes à des définitions (au sens large).)

CITATION
Je me dis que ma page est encore loin d'etre parfaite... mais alors pourquoi lorsque je la teste avec un validateur elle est OK!!!


Ta page est au contraire tout prêt d'être excellente.

Mais il ne faut pas trop en demander au validateur du W3C !
Comme tout validateur, ce n'est qu'une machine aux capacités limitées, qui fait une vérification plutôt formelle : la conformité du code aux règles de syntaxe requises par sa DTD.
Une page formellement validée peut très bien être totalement aberrante, si les éléments HTML sont détournés de leur fonction. Exemple : ces pages où on n'utilise que des <div> transformées en pseudo-paragraphes, pseudo-titres... à coup de CSS. Voir Les Précieuses Ridicules (ou Cathos, XHTML et CSS).

CITATION
Sinon, que veux tu dire par cette phrase :

QUOTE 
CITATION
que l'élément de liste unique de cette div pour l'adresse mail est injustifié



Tout simplement qu'utiliser une liste pour un seul item me gêne, et que j'y verrais mieux un paragraphe par exemple. Une liste... n'est-ce pas l'idée de plusieurs choses ?
Voilà un bon exemple de purisme subjectif, ça : la vieille histoire du à partir de combien de grains de blé a-t-on un tas de grains de blé ? Un ? Deux ? Trois et plus ?. C'est la porte ouverte à tous les coupages de cheveux en quatre. Aucun intérêt ! Donc, concrètement, à chacun de faire comme il sent wink.gif
Dinostrate
CITATION(LaurentDenis @ samedi 12 juin 2004, 09:22)
la hiérachie des titres, parce qu'elle aura des conséquences bien concrètes pour une partie des visiteurs.

Alors, si les h ne concernent que les titres, tu as raison.... mais si les h ne doivent considérer que les titres, alors, je trouve que c'est un peu léger....

Je ne suis pas parti du principe que les h concernaient essentiellement la présentation, mais aussi et surtout le niveau d'importance (qui tout de même, doit influer sur la présentation). C'est pour moi un concept qui va au delà des simples titres et sous titres.

Enfin, si cette règle est aussi stricte que tu le dis (je veux bien l'entendre) dans ce cas, le validateur doit faire son boulot et la considérer en erreur....

On n'aura plus qu'a recréer artificiellement les h avec des div et se contenter des h pour les seuls titres et sous titres.... ça ne fera que compliquer le code un tout petit peu plus....

Moi, je veux bien, mais conséquence=apauvrissement des potentialités.

ma conclusion actuelle : cet aspect n'est pas assez réfléchi dans toutes ses conséquences concrêtes

Dino
Dinostrate
CITATION(LaurentDenis @ samedi 12 juin 2004, 09:22)
Une page formellement validée peut très bien être totalement aberrante, si les éléments HTML sont détournés de leur fonction. Exemple : ces pages où on n'utilise que des <div> transformées en pseudo-paragraphes, pseudo-titres... à coup de CSS. Voir Les Précieuses Ridicules (ou Cathos, XHTML et CSS)

Je complète et je précise un peu mon post précédent :

Tu dis qu'il ne faut pas trop en demander au validateur. Là aussi, je suis d'accord, mais une vérification de hiérarchie, c'est une chose relativement simple à réaliser, je l'ai vue proposée dans d'autres validateurs bien moins performants par ailleurs.

Je connaissais l'exemple que tu exposes sur les précieuses ridicules. J'avais trouvé ton propos très pertinent. C'est vrai qu'on peut détourner les css et proposer une infame confiture tout en passant correctement au validateur. L'exemple que tu sites est parfait pour comprendre l'état d'esprit dans lequel il faut aborder les css et j'approuve à 200%.

Au bout du compte, le sujet qui nous occupe est relativement limité, mais il a son importance.
Je me répète : la norme concerne-t-elle seulement les titres ? Dans ce cas, on n'a pas le droit de sauter un niveau.
ou bien mieux que celà, la norme concerne-t-elle les niveaux d'importance ?... dans ce deuxième cas, on doit avoir le droit de sauter un ou plusieurs niveaux.

Si on se situe dans le premier cas, on est obligé de multiplier les div en aval (div ou autres procédés) à des fins de présentation, et ce faisant, on perd la "signification du niveau d'importance"

Si on se situe dans le deuxième cas, tout va bien... On place en fonction de l'importance que l'on veut accorder, et la présentation, qui n'est qu'une résultante, suit..... et on conserve de manière cohérente toute la "signification du niveau d'importance" et encore, on n'est pas obligé de multiplier des div......

Alors, ou est l'erreur ?
Je veux bien admettre que les "machines qui interprètent" ne sont pas à ce jour conçues pour cela.... mais ce n'est pas une raison pour ne pas évoluer....

Dino
MissMonde
LaurentDenis
CITATION
l'excellent travail de MissMonde


et voilà le travail !! c'est-y pas beau ça, un compliment de LaurentDenis d'Openweb, je ne pensais pas arriver à ce résultat en si peu de temps. wink.gif

tu auras compris, Laurent, que le smiley le plus important dans ma réponse d'hier est celui-ci : wink.gif

plus sérieusement, pour en revenir à cette page :

je suis d'accord pour la liste appliquée à "contact", elle ne se justifie pas.

mais, la liste de définition, je l'ai mise sciemment.
c'est une habitude que j'ai prise récemment pour me faciliter la vie, je trouve que c'est plus facile à positionner que la liste ordonnée, avec son espace pour la puce.
eh oui, encore une mauvaise raison!!

Dinostrate
CITATION
C'est pour moi un concept qui va au delà des simples titres et sous titres.


Est-ce qu'on peut utiliser les h en dehors des titres et sous-titres ?

Dernière chose : je n'utilise les validateurs qu'en fin de parcours, pour corriger les oublis, un peu comme on vérifie les liens une fois que les pages sont faites.

Bon week-end à tous
p_flower01.gif
Dinostrate
CITATION(MissMonde @ samedi 12 juin 2004, 11:17)
Est-ce qu'on peut utiliser les h en dehors des titres et sous-titres ?

Eh bien justement, non, et c'est ça le problème...

h signifie heading (chapitre)
C'est en ce sens que mon raisonnement est contestable.

Mais j'ai bien le droit de critiquer une norme....
Que je sois entendu, c'est autre chose...

<edit> j'ajoute le lien :
It is not normal practice to jump from one header to a header level more than one below, for example for follow an H1 with an H3. Although this is legal, it is discouraged, as it may produce strange results for example when generating other representations from the HTML.
http://www.w3.org/MarkUp/1995-archive/Headings.html
</edit>

Dino
BZHcool
Allez juste au passage...

BZHcool.com sujet d'inspiration pour un article sur blog-and-blues.org
Denis
CITATION
BZHcool.com sujet d'inspiration pour un article sur blog-and-blues.org

Et de ma pause d'une longueur indéterminée pour ré-évaluer l'ensemble de mon site ^_^
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.