[Résolu] Afficher un code source à destination des visiteurs

Bonjour à tous,

Je souhaite mettre en ligne une page contenant des bannières et autres logos de mon site, à destination des partenaires qui souhaiteront les afficher sur leurs propres vitrines Internet.
Pour cela, je souhaite également (sous chaque bannière) afficher le code source qui est à copier/coller pour afficher correctement l'image.
Et, c'est là que mon problème intervient.
En effet, je souhaite que ma page soit validée W3C et je n'arrive pas à trouver la solution me permettant d'afficher les code sources tout en ayant l'agrément W3C.

Quelqu'un aurait-il une solution pour m'aider sur ce coup-là ?

D'avance, merci pour votre aide qui me sera (forcément) bien utile !
Modifié par Ouebma_ETC (12 Jan 2008 - 19:13)

Salut à toi.

Comment ça, ta page n'est pas valide ? Quel code utilises-tu actuellement ? Pour indiquer du code, le mieux est de mettre le code en question entre les balises <pre> et </pre>, et ce sera tout à fait valide.

Voici ma page de test :
http://www.escalopetour.com/Site2/index.php?action=ban_form

Si j'utilise les balises <pre>, la bannière s'affiche et le code (forcément) disparait.

Qu'en penses-tu ? ... où est mon erreur ?

Bonjour Ouebma,

Affichage ok sous IE6 et 7 et sous opéra (Firefox plante il faudra que je réinstalle la bestiole )
C'est bien cela que tu désires obtenir ?

Le code de ta page n'est pas valide, mais a priori pas à cause de cette partie : Markup validation service

Cdt,
Slvain

Hello Sylvain,

Oui, c'est bien cela que je souhaite obtenir
Ma page n'est pas validée à cause du <marquee>, certes, mais c'est normal car je ne m'en suis pas encore occupé ... cela dit ... si j'enlève le <marquee>, j'ai bien 2 erreurs, les voilà :

Validation Output:  2 Errors

   1. Error Line 179, Column 5: required attribute "action" not specified.

      <form>

      &#9993;

      The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

      Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
   2. Error Line 182, Column 53: document type does not allow element "a" here.

      <a href="http://www.escalopetour.com" target="_blank">

      &#9993;

      The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

      One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

Comment y remédier ?
Modifié par Ouebma_ETC (12 Jan 2008 - 10:42)

Bonjour,

il vaudrait mieux utiliser la balise pre. Pour que le code que tu veux afficher ne soit pas lu comme du code par les navigateurs, il faut remplacer les chevrons par les entités html correspondantes : "<" devient "&lt;" et ">" devient "&gt;"
Modifié par Thomas D. (12 Jan 2008 - 11:09)

Gaylord.P a écrit :
Quel code utilises-tu actuellement ?

Voilà mon code actuel :

<!-- (1) Bannière 468*60 -->
<blockquote>
        <div class="init_zondis">T</div>
            <p>
u souhaites afficher ce bandeau sur ton site ?
			</p>
</blockquote>			
<img src="http://www.escalopetour.com/Images/Logos/c46860.gif" border="0" title="Swing Baby ! ... Swing !!!" alt="Swing Baby ! ... Swing !!!" />
<blockquote>
        <div class="init_zondis">I</div>
            <p>
nsère dans le source de ta page le code suivant :
			</p>
</blockquote>			
<form>
<textarea name="source" cols="60" rows="8">
<!-- lien etc-->
<a href="http://www.escalopetour.com" target="_blank">
<img src="http://www.escalopetour.com/Images/Logos/c46860.gif" border="0" title="Swing Baby ! ... Swing !!!" alt="Swing Baby ! ... Swing !!!" /></a>
<!-- fin lien etc-->
</textarea>
</form>
<!-- Fin (1) bannière 468*60  -->	

Modifié par Ouebma_ETC (12 Jan 2008 - 11:32)

Ce bout de code n'a absolument rien à faire dans un champ de formulaire. Il me semble que j'ai donné la solution la plus logique (et la plus simple) un peu plus haut

Thomas D. a écrit :
Ce bout de code n'a absolument rien à faire dans un champ de formulaire. Il me semble que j'ai donné la solution la plus logique (et la plus simple) un peu plus haut

Je t'ai bien lu ... mais lorsque j'utilise les balises <pre> et </pre> et que j'insère les "&lt;" "&gt;", je dois mal m'y prendre car le navigateur interprète le code et affiche l'image (donc plus le code).

En même temps, c'est sûrement moi qui ne comprend pas ce que tu veux tenter de m'expliquer ... ... si tu pouvais avoir la gentillesse de reprendre mon code ci-dessus et le modifier en fonction de la solution que tu tentes d'expliquer à mon petit cerveau à moi que j'ai, ce serait super sympa ... et ça me permettrait d'être tout suite (un peu) moins con après
Modifié par Ouebma_ETC (12 Jan 2008 - 12:13)

Bonjour,

Utiliser un textarea (peu importe qu'il soit ou non dans un form) pour afficher du code HTML est une de ces vieilles solutions résolument pragmatiques, simples et indifférentes aux aspects normatifs: il se trouve simplement que les navigateurs affichent le code HTML contenu dans un textarea au lieu de l'exécuter. Cela simplifiait donc les choses en évitant d'avoir à transcrire les chevrons en entités (&machin; et &truc;).

Cela dit, la solution normative ne conduit à utiliser pre que si le code en question est indenté (le respect de l'indentation est justement le rôle de pre).

Si on veut vraiment être normatif, c'est code qui est requis dans tous les cas (avec ou sans pre, mais pas autour ou dans un textarea)

(Maintenant, si vous voulez, on peut déraper sur l'usage de var et autres samp, mais bon... )

<edit>@Ouebma_ETC : personne n'en mourra si tu utilises textarea en supprimant le form et en étant, du coup, valide, à défaut d'être conforme: très très peu de sites valides sont conformes </>
Modifié par Laurent Denis (12 Jan 2008 - 12:19)

Laurent Denis a écrit :
Bonjour,

Utiliser un textarea (peu importe qu'il soit ou non dans un form) pour afficher du code HTML est une de ces vieilles solutions résolument pragmatiques, simples et indifférentes aux aspects normatifs: il se trouve simplement que les navigateurs affichent le code HTML contenu dans un textarea au lieu de l'exécuter. Cela simplifiait donc les choses en évitant d'avoir à transcrire les chevrons en entités (&machin; et &truc;).

Cela dit, la solution normative ne conduit à utiliser pre que si le code en question est indenté (le respect de l'indentation est justement le rôle de pre).

Si on veut vraiment être normatif, c'est code qui est requis dans tous les cas (avec ou sans pre, mais pas autour ou dans un textarea)

(Maintenant, si vous voulez, on peut déraper sur l'usage de var et autres samp, mais bon... )

Merci pour votre message qui est censé m'apporter votre aide, mais compte tenu de mon niveau de rookie en chef , j'ai bien peur de ne comprendre que 70% de son contenu ... les 30% manquants étant certainement l'essentiel car j'avoue ne pas tout comprendre.

Pour un novice comme moi, est-il possible de vulgariser l'explication ?

Laurent Denis a écrit :
<edit>@Ouebma_ETC : personne n'en mourra si tu utilises textarea en supprimant le form et en étant, du coup, valide, à défaut d'être conforme: très très peu de sites valides sont conformes </>

Voilà une solution simple que je comprends

Cela dit, en faisant ça, le validateur me renvoie encore cette erreur.

Désolé d'être légèrement "lourd" sur le sujet, mais ma maitrise de l'anglais version W3C étant également à un niveau frisant le parquet de mon salon, j'avoue ne pas savoir ce que je dois faire.

Quelqu'un peut-il me dire svp ?
Modifié par Ouebma_ETC (12 Jan 2008 - 15:48)

Ma dernière question étant toujours sans réponse, puis-je me permettre de retenter ma chance et vous demander de nouveau votre avis pour corriger l'erreur de validation ?


Merci d'avance pour votre aide et votre indulgence.

Tu as sûrement mis les <a> directement dans le body ou un autre élément n'autorisant pas l'ajout d'éléments en ligne directement.

Sinon, une des explications a dû t'échapper à cause d'un bug apparant du forum. IL faut remplacer < et > par &lt et &gt pour que tes visiteurs voient le code correspondant (il faut ajouter un point-virgule après mais je ne l'ai pas fait pour éviter le dit bug)

Bonjour,

Pas bien compris pourquoi ça n'est pas accepté par le validateur (il faudrait que j'étudie la question des contenus PCDATA, annoncés comme type de contenu accepté pour l'élément textarea...).

Le moyen simple pour éviter cette erreur de validation, c'est tout simplement d'encoder les signes < et >. Par exemple, pour ton premier textarea:

<textarea class="dept" readonly="readonly" cols="60" rows="6">
<!-- DEBUT lien ETC -->
&lt;a href="http://www.escalopetour.com" target="_blank">=&gt;&lt;img src="http://www.escalopetour.com/Images/Logos/c46860.gif" border="0" title="Swing Baby ! ... Swing !!!" alt="Swing Baby ! ... Swing !!!" /&gt;&lt;/a&gt;
<!-- FIN lien ETC -->
</textarea>

(On pourrait aussi le faire pour les commentaires, mais là j'ai eu la flemme.)

Florent V. a écrit :
Bonjour,

Pas bien compris pourquoi ça n'est pas accepté par le validateur (il faudrait que j'étudie la question des contenus PCDATA, annoncés comme type de contenu accepté pour l'élément textarea...).

Le moyen simple pour éviter cette erreur de validation, c'est tout simplement d'encoder les signes < et >. Par exemple, pour ton premier textarea:

<textarea class="dept" readonly="readonly" cols="60" rows="6">
<!-- DEBUT lien ETC -->
&lt;a href="http://www.escalopetour.com" target="_blank">=&gt;&lt;img src="http://www.escalopetour.com/Images/Logos/c46860.gif" border="0" title="Swing Baby ! ... Swing !!!" alt="Swing Baby ! ... Swing !!!" /&gt;&lt;/a&gt;
<!-- FIN lien ETC -->
</textarea>

(On pourrait aussi le faire pour les commentaires, mais là j'ai eu la flemme.)

Merci beaucoup Florent, c'est parfait à présent.

Fausse alerte quand je parlais de bug tout à l'heure .. c'est jaws qui a un bug !!