Jump to content
Sign in to follow this  
Monique

Un code valide (2)

Rate this topic

Recommended Posts

Bonjour,

Quand on soumet son code à un validateur pour la première fois, une longue liste d'erreurs peut être décourageante :nono:

Pour vous aider à éviter cela, j'ai publié une liste d'erreurs fréquentes et faciles à éviter.

Cette liste n'est pas exhaustive, hélas, n'hésitez pas à en signaler d'autres.

Share this post


Link to post
Share on other sites

Pour faire une présentation sympa, j'utilisais le code #149; pour faire un bullet

N'étant pas au standard du W3C, je l'ai remplacé par •

Mais lorsque je regarde ma page avec le viewver lynx, je vois en clair • dans la page.

Qu'est ce que je peux utiliser de mieux ?

Share this post


Link to post
Share on other sites

Si l'utilisation d'un validateur est utile, il est indispensable d'utiliser une documentation VALIDE. Or j'ai fais tout mon site avec une doc fausse, tout du moins sur le plan 'validator'. Je me retrouve avec tout un tas de fautes..

Voilà, A+, AnonymuS.

Share this post


Link to post
Share on other sites

Dans ton article, tu dis :

  non valide <a href="foo.cgi?chapter=1&section=2">...</a>

  valide <a href="foo.cgi?chapter=1&section=2">...</a>

J'ai déjà lu ca quelque part, et ca m'avait paru tellement ... pas possible, que je n'y avais pas prété plus attention. J'aimerais en avoir le coeur net :

<a href="foo.php?id=1&id=2">foo</a>

Ca, c'est pas valable ????

Et tant qu'on y est : mettre des apostrophes ' ' ' ' ' ' à la place des guillements " " " " , dans le <a href, c'est valable, ou pas ?

Merci, A+, Anonymus.

Share this post


Link to post
Share on other sites

Anonymus,

Regarde ce post d'Ernestine: http://www.webmaster-hub.com/index.php?sho...findpost&p=1583

C'était très exactement le même cas de figure.

Je sais qu'Invision travaille à la validation XHTML de son forum, et que ces & dans les différents liens sont dans le champ de tir :)

Dan

Share this post


Link to post
Share on other sites
Si l'utilisation d'un validateur est utile, il est indispensable d'utiliser une documentation VALIDE. Or j'ai fais tout mon site avec une doc fausse, tout du moins sur le plan 'validator'. Je me retrouve avec tout un tas de fautes..

Voilà, A+, AnonymuS.

Effectivement, il y a un an encore, il n'existait pratiquement pas de sites valables en français. Aujourd'hui encore, plusieurs d'entre eux considérés comme référence, ne se sont pas encore mis à jour et continuent donc de recommander... des erreurs :down:

Quand j'ai débuté, en réponse à mes questions un peu naïves, on me proposait le site du W3C. Même si je parvenais à la page recherchée, je n'y comprenais rien... mon dictionnaire ne m'était pas très utile pour le vocabulaire trop spécialisé :(

Dans mes articles, je fais référence aux traductions (fidèles) du W3C. L'URL vers la version originale en anglais s'y trouve toujours.

Je prépare une petite liste d'autres sites indispensables à connaître <_<

Share this post


Link to post
Share on other sites

Il manque une erreur à la liste :(

Elle est assez fréquente, surtout si l'on utilise des langages qui génerent une page html, c'est le fait qu'il faut utiliser des ID uniques, en somme pas deux ID identiques dans une page.

C'est un oublit fréquent dans les faq ;)

Sinon, je pense ne rien avoir à redire si ce n'est que c'est du bon boulot :)

Share this post


Link to post
Share on other sites

Bonjour Xethorn,

Je parle de l'identificateur ID dans les articles consacrés aux feuilles de style, mais je pense que tu fais allusion à son utilisation dans les scripts (tel que JavaScript) ?

Il est vrai que je ne maîtrise pas du tout ce langage, et l'utilise très rarement.

Ce type d'erreur est-il signalé par le validateur HTML ?

Share this post


Link to post
Share on other sites

La mise en forme doit être séparée du contenu... Est ce que width et height peuvent quand même rester dans la balise ?? ou faut il creer une classe pour chaque image :wacko:

<img src="image.gif" width="460" height="108" alt="description">

Share this post


Link to post
Share on other sites

Anonymous >

<a href="foo.php?id=1&id=2">foo</a>

Ca, c'est pas valable ????

Et tant qu'on y est : mettre des apostrophes ' ' ' ' ' ' à la place des guillements " " " " , dans le <a href, c'est valable, ou pas ?

Non ce n'est pas valide ni l'un ni l'autre.

Il faut bien remplacer les "&" par des "&"

Il faut utiliser des " au lieu des ' pour les valeurs des attributs

ams51 >

La mise en forme doit être séparée du contenu... Est ce que width et height peuvent quand même rester dans la balise ?? ou faut il creer une classe pour chaque image 

<img src="image.gif" width="460" height="108" alt="description">

Effectivement il faut créer des classes pour les "types" d'images que tu utilise souvent (comme des boutons par exemple ou des screenshots)

Pour les autres images, ne mettre ni width, ni height, ni classe : Elle seront affichée à leur taille normale une fois chargée, pas la peine de fixer une taille prise par l'image.

Share this post


Link to post
Share on other sites
La mise en forme doit être séparée du contenu... Est ce que width et height peuvent quand même rester dans la balise ?? ou faut il creer une classe pour chaque image  :wacko: 

<img src="image.gif" width="460" height="108" alt="description">

Bonjour,

Les dimensions d'une image sont un cas un peu à part.

Si elles ne sont pas renseignées dans le code, le navigateur affichera d'abord le texte puis le déplacera en fonction des images à y insérer => un effet pas très heureux et assez inconfortable pour le visiteur, un temps plus long avant que le contenu puisse être réellement consulté.

Si elles sont renseignées, le navigateur affichera d'abord le texte mais en réservant l'espace utile aux images => l'internaute peut commencer sa lecture avant l'affichage complet de la page.

Share this post


Link to post
Share on other sites

Merci,

Mon problème est là, sur certains site j'ai plusieurs images, lorsque je teste avec un modem RTC l'affichage de la page est parfois lent (>10 secondes) et l'écran n'arrete pas de bouger, donc pour commencer à consulter la page il faut attendre le chargement complet.

Le hic, chaque image a ses propres dimensions et je ne vais pas creer une classe pour chacune d'elles....

Je crois que pour ce cas particulier je ferai une entorse aux normes :( Dans mes créations futures j'harmoniserai la taille des images dans la mesure du possible.

Share this post


Link to post
Share on other sites
Je crois que pour ce cas particulier je ferai une entorse aux normes :( Dans mes créations futures j'harmoniserai la taille des images dans la mesure du possible.

Tu peux être rassuré et tu dois continuer à renseigner la taille de tes images dans le code (et non via CSS) : ce n'est pas une entorse aux normes, width et height font partie des attributs de l'élément img

Share this post


Link to post
Share on other sites

merci :)

J'avoue avoir du mal avec les définitions des normes... beaucoup trop de doc à lire ;)

Share this post


Link to post
Share on other sites

salut

pour mettre mon grain de sel, si tes images ont toutes une dimension différente, il est mieux d'utiliser <img style="width:...px;height:...px" pour chacune

c'est tout à fait valide, et justifié, et cela te permet d'éviter les sauts de texte comme expliqué plus haut

sinon tu peux choisir de faire toutes les images à la même dimension, ou n'avoir que 2 dimensions, par exemple pour les images en portrait et en paysage, et dans ce cas là effectivement définir des classes est le plus simple

essaie aussi au maximum de mettre en css les images qui se retrouvent sur plusieurs pages et qui ne sont là que pour décorer, tu éviteras ce problème et tu n'auras pas besoin de alt ;)

Share this post


Link to post
Share on other sites
pour mettre mon grain de sel, si tes images ont toutes une dimension différente, il est mieux d'utiliser <img style="width:...px;height:...px" pour chacune

Totalement inutile. Comme le rappelait Monique, width et height sont des attributs (X)HTML valides pour l'élément img

<img src="..." width="..." height="..." alt="..." />

Passer les déclarations de dimensions d'images en CSS n'apporte aucun gain de validité ni de sémantique. En revanche, cela alourdit inutilement le code avec des styles internes et complique la tâche.

Quant à placer en css les images purement décoratives.... Oui, tout à fait.

Share this post


Link to post
Share on other sites
QUOTE

pour mettre mon grain de sel, si tes images ont toutes une dimension différente, il est mieux d'utiliser <img style="width:...px;height:...px" pour chacune

Totalement inutile. Comme le rappelait Monique, width et height sont des attributs (X)HTML valides pour l'élément img

<img src="..." width="..." height="..." alt="..." />

Passer les déclarations de dimensions d'images en CSS n'apporte aucun gain de validité ni de sémantique. En revanche, cela alourdit inutilement le code avec des styles internes et complique la tâche.

D'ailleurs width et height sont toujours valides même en xhtml, cf W3C :

http://www.w3.org/TR/xhtml-modularization/...l#s_imagemodule

Edited by Findel

Share this post


Link to post
Share on other sites

J'apporte mon support à Monique, Laurent et les autres à propos des dimensions des images. Mis à part que ces attributs demeurent tout à fait valides en (x)html, certains pourraient avancer que les dimensions des images sont de l'ordre de la présentation, donc qu'ils devraient faire parti de la CSS. Je ne suis pas sûrs qu'ils aient totalement tort, mais cela va tellement à contre-sens de la logique que je me refuse à m'y plier, ne serait-ce que pour ne pas me ramasser avec un fichier CSS et HTML combiné de 325k pour couvrir toutes les images avec les classes y étant rattachées. :wacko:

Si toutes mes images étaient de la même dimension, je le ferai probablement, simplement pour alléger au maximum mon code, mais comme c'est rarement le cas...

Pourrait-on plus avancer que les attributs height et width sont principalement de l'ordre de la structure du document et donc qu'ils devraient absolument demeurer dans le fichier HTML ? J'aimerais bien trouver une vraie référence là-dessus, c'est une question que je me pose souvent. Selon la simple logique, ils penchent plus du côté de la valeur structurelle que présentationelle.

Il semble y avoir une démarcation entre ces deux attributs et l'attribut border qui lui, est définitivement considéré comme de l'ordre de la présentation. En même temps, il est facile de le régler par un simple img {border: 0;} dans la feuile de style, peu importe le nombre d'image affectées. Mais quelle est l'argument irréfutable et documenté qui différencie border de width et height ? Je le cherche encore... <_<

Share this post


Link to post
Share on other sites

Denis, je te propose quelques éléments :

D'abord, voici le discours plutôt contourné de la spécification HTML4.01:

http://www.la-grange.net/w3c/html4.01/stru...cts.html#visual

Quand ils sont spécifiés, les attributs width et height indiquent à l'agent utilisateur de surclasser les dimensions naturelles de l'image, ou de l'objet, par leurs valeurs.

Donc height et width ne devraient être utilisés que quand on demande au media de ne pas respecter les dimensions natives de l'image ?

Mais non, car ce n'est pas fini :

Les attributs height et width donnent à l'agent utilisateur une indication sur les dimensions d'une image ou d'un objet, de sorte qu'il puisse réserver leur place et continuer à restituer le document en attendant les données d'image.

Autrement-dit, height et width peuvent être utilisés dans tous les cas pour faciliter le travail du navigateur... Ou alors, on ne les utilise pas... mais rien n'invite à les remplacer par des règles CSS.

Pour ma part, je prendrais le problème sous un autre angle, celui des objets :

- Une image est essentiellement un objet non HTML inclus dans le contenu. On peut l'assimiler à l'élément object, même s'il n'est pas utilisé, voir http://www.la-grange.net/w3c/html4.01/stru...ml#edef-OBJECT. Cet objet étant par nature visuel, il semble logique de le définir, outre la source, par ses paramètres visuels de base, c'est à dire ses dimensions. Il en est de même pour une animation Flash, du java ou surtout pour du SVG.

- En revanche, la présence ou l'absence d'une bordure ne définit en rien l'image ou l'objet inclus dans le contenu. Juste sa présentation...

- Enfin et surtout, d'un point de vue pratique et pédagogique, width et height sont des mécanismes valides, simples, relativement connus, dont bénéficie l'utilisateur puisque l'affichage de la page est amélioré pendant le chargement des images...

[edit]Voir une argumentation mieux documentée Taille des images et séparation excessive du contenu et de la présentation en cas de doute sur la validité de width et height ;)[/edit]

Edited by LaurentDenis

Share this post


Link to post
Share on other sites

Après réflexion je pense un peu comme vous... Il y a 2 cas :

- soit on fixe les dimensions pour que la présentation de l'image colle bien à notre design dans ce cas c'est le contenant donc ça va dans le CSS (image de déco ou diaporama par exemple)

- soit les dimensions sont utilisées pour fixer les dimensions de l'image pour aider le navigateur... Et là on est dans le contenu donc dans l'html.

Passez un bon 1er Mai et un bon week end ;)

Share this post


Link to post
Share on other sites

Merci Laurent pour l'éclaircissement... ce sont de très bonnes indications qui font beaucoup de sens. :up:

Share this post


Link to post
Share on other sites

salut

Totalement inutile. Comme le rappelait Monique, width et height sont des attributs (X)HTML valides pour l'élément img

<img src="..." width="..." height="..." alt="..." />

:blush:

merci laurent, alors ça veut dire que je n'ai plus besoin de m'embêter à changer ça quand j'insère une image avec dreamweaver ? cool :D

mon truc a-t-il un autre inconvénient, à part l'inutilité, et devrais-je revenir à <img src="..." width="..." height="..." alt="..." /> ?

(édité, j'avais confondu laurent et denis)

Edited by Clair de Lune

Share this post


Link to post
Share on other sites

Mais comment diable as-tu pu nous mélanger ? Il aime les chevaux et moi, les sushis... :whistling:

Share this post


Link to post
Share on other sites
mon truc a-t-il un autre inconvénient, à part l'inutilité, et devrais-je revenir à <img src="..." width="..." height="..." alt="..." /> ?

Cela pourrait être gênant pour l'évolutivité de tes pages, car les styles internes ne seront peut-être pas supportés dans toutes les spécifications futures (Le Working Draft XHTML2.0 hésite à les interdire)

Plus généralement, les styles internes sont à décourager, car ils ramènent les données de présentation dans le HTML. Cela dit, il arrive parfois qu'il soit difficile de s'en passer :-(

Share this post


Link to post
Share on other sites
... car les styles internes ne seront peut-être pas supportés dans toutes les spécifications futures (Le Working Draft XHTML2.0 hésite à les interdire)...

Bien que ce soit vrai, je ne crois pas que le commun des mortels ait à se soucier de ce qui prévaudra dans XHTML 2.0 pour l'instant. À la vitesse ou le médium évolue, il faudra bien encore 8 à 10 ans avant que XHTML 2.0 ne devienne massivement utilisé par les développeurs. XHTML 1.0 est LA norme plancher retenue par le W3C depuis le 26 janvier 2000 et encore aujourd'hui, plus de 4 années plus tard, le HTML demeure le langage le plus massivement utilisé par ceux-ci... et généralement très mal en plus. :wacko:

Bien sûr, parmi nous qui sommes plus au pouls du W3C, cparle t-on peut-être plus de l'ordre de 3 ou 4 ans avant de voir un virage important vers XHTML 2.0 (en autant que les navigateurs suivent), mais même dans ce cas, une telle préoccupation me semblerait excessive pour le moment, ne serait-ce que parce que rien n'est encore figé à ce niveau. :whistling:

À propos, a t-on des nouvelles de l'évolution de XHTML 2.0 ? L'année dernière, le HTML Working Group sortait un working draft aux trois mois et depuis plusieurs mois, plus rien. Peut-être y a t-il du monde qui s'essoufle au W3C ?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...