5568 sujets

Sémantique web et HTML

Bonjour à tous,
je ne sais pas très bien si mon post se trouve au bon endroit, je vous demande de m'excuser sinon.

Après avoir passé un apm à chercher dans la faq, les post etc.. du site je n'ai pas vraiment trouvé ma réponse donc je vous soumet le problème.
J'ai réalisé un site (un projet ancien commencé en 2003 que je viens de finaliser) que je suis en train de reprendre avant de le soumettre la semaine prochaine pour d'éventuelles ultimes corrections (de contenus).

En lisant plein de posts ici, j'ai remarqué qu'on ne m'avait pas assez sensibilisée aux standards etc... pendant ma formation en 2003 et je m'en mort les doigts mais je n'ai plus le temps de le reprendre entièrement pour actualisation en XHTML par ex.
Du coup, la conception ne semble pas forcément très "propre" à priori, le tout est de limiter les erreurs et qu'il soit lisible par la plupart des navigateurs avant de le mettre en ligne. Bref, j'ai fait un peu comme je pouvais pour le tout premier projet web.

Mon problème : si j'essaye de valider sur w3c mes pages pour voir si mon code a besoin d'être corrigé (c'est le cas) on me répond que la balise embed n'est pas autorisée (entre autre) et je l'ai lu dans plusieurs posts ici.
J'ai donc voulu supprimer cette balise en utilisant uniquement la balise object mais là, problème ! :

Quand j'utilise object, la page est lisible uniquement sous IE7 sur PC ! (problème avec FF2 sur PC et rien non plus sur FF2 et safari sous Mac !)

Quand j'utilise embed, la page devient lisible sur FF2, IE7 sur PC et aussi bien sur FF2 et safari sur Mac !!!
Je ne comprends pas très bien ?
Est-ce lié d'après vous à l'utilisation d'un flash + xml (diaporama simpleviewer) ? je suppose que non car on parle de balise html, non ?

Le seul bémol, mais qui n'a rien à voir avec le lien flash, c'est le chargement de la feuille de style qui ne se fait pas sous safari 2.0.4, là c'est peut-être le "import" qui n'est pas supporté ?

Autre question, faut-il changer toutes les balises indiquées par w3c validator pour que ma page passe ne HTML 4 transitional ?

Je vous poste le code et si vous pouviz m'éclairer, ça serait super !
merci d'avance ! Smiley smile
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Odorico, Mosaïstes - Partir à la découverte d'Etables-sur-Mer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv=imagetoolbar content="no">
<meta http-equiv="Content-Language" content="fr">
<meta name="Reply-to" content="rozenn.micault@wanadoo.fr">
<meta name="description" content="Ce site présente la technique de la mosaïque à travers l'histoire de la famille Odorico, mosaïstes Italiens installés à Rennes en 1882. Partez à la découverte de quelques réalisations à travers l'Ouest de la France...">
<meta name="keywords" content="Etables-sur-Mer, Etable sur mer, découverte, visite, mosaïque, mosaïques, mosaïstes, Odorico, Art déco,photographie">
<meta name="Author" content="Rozenn Micault">
<meta name="Identifier-URL" content="http://..................................................................">
<meta name="Copyright" content="Rozenn Micault">
<meta name="Revisit-after" content="1 month">
<meta name="Robots" content="all">
<style type="text/css">
<!-- @import url(../../css/decouverte.css);
@import url(../../css/decouverte.css);
.Style1 {font-size: 14px; color: #B96A7A; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
-->
</style>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var aa,j=d.MM_p.length,a=MM_preloadImages.arguments; for(aa=0; aa<a.length; aa++)
    if (a[aa].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[aa];}}
}

function MM_swapImgRestore() { //v3.0
  var aa,x,a=document.MM_sr; for(aa=0;a&&aa<a.length&&(x=a[aa])&&x.oSrc;aa++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,aa,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (aa=0;!x&&aa<d.forms.length;aa++) x=d.forms[aa][n];
  for(aa=0;!x&&d.layers&&aa<d.layers.length;aa++) x=MM_findObj(n,d.layers[aa].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var aa,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(aa=0;aa<(a.length-2);aa+=3)
   if ((x=MM_findObj(a[aa]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[aa+2];}
}
//-->
</script>
</script>
<script language="javascript" type="text/javascript" src="../../javascripts/mistral.js">
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body onLoad="MM_preloadImages('../../../navigation/imprimer-b.gif','../../../navigation/accueil2.gif','../../navigation/imprimer2.png','../../navigation/accueilb.gif','../../navigation/puce-violineg.jpg')">
<div style="position:absolute; left:51px; top:179px; width:580px; height:420px;" id="contenu">
  <div align="center">
    <p>
      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="550" height="420" align="middle">
        <param name="quality" value="high" />
        <param name="scale" value="noscale" />
        <param name="BGCOLOR" value="FFFFFF" />
        <embed src="index.swf" width="550" height="420" align="middle" quality="high" scale="noscale" bgcolor="FFFFFF" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />                         
</object>    </p>
    <blockquote><blockquote><blockquote>&nbsp;</blockquote>
      </blockquote>
    </blockquote>
  </div>
</div>
<div id="rubrique" style="position:absolute; left:82px; top:141px; width:477px; height:20px"> <span class="rubrique3violine"><!-- #BeginLibraryItem "/Library/go-back-violine.lbi" --><span class="lienvioline"><a href="#" onClick="history.back()" onMouseOver="MM_swapImage('Image8','','../../navigation/puce-violineg.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../../navigation/puce-violine.gif" name="Image8" width="19" height="18" border="0" align="absmiddle"></a></span><!-- #EndLibraryItem --> <a href="../../visiteguidee.htm" class="lienvioline">Les r&eacute;alisations</a> &gt; <span class="medium">Visite guid&eacute;e &gt; SAINT-LUNAIRE </span></span></div>
<div id="Layer1" style="position:absolute; left:636px; top:640px; width:0px; height:10px; z-index:2"></div>
<base target=_top>
<center>


<br>
<div id="imprimer" style="position:absolute; left:34px; top:104px; width:21px; height:19px; z-index:1"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','../../navigation/imprimer2.png',1)"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','../../navigation/imprimer2.png',1)"><img src="../../navigation/imprimer1.png" alt="Imprimer la page" name="Image11" width="20" height="30" border="0" onClick="javascript:window.print()"></a></div>
<div id="accueil" style="position:absolute; left:-10px; top:139px; width:71px; height:49px; z-index:1"><a href="../../accueil.htm" target="_parent" onMouseOver="MM_swapImage('Image9','','../../navigation/accueilb.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../../navigation/accueila.gif" alt="Retour vers page d'accueil" name="Image9" width="28" height="26" border="0"></a></div>
</center>
</body>
</html>

Modifié par Thomas D. (16 Feb 2007 - 13:09)
Salut.

As-tu lu ce point de la FAQ ? Ton utilisation de la balise <object> ne me semble pas valide Smiley cligne

Pour les erreurs du validateur du W3C, difficile de te répondre sans les voir. Mais en règle générale, ce ne sont pas des balises qu'il faut changer, mais bien des erreurs de syntaxe à corriger : imbrications de balises incorrectes, balises ou attributs déprécies, ...
Thomas D. a écrit :
Salut.

As-tu lu ce point de la FAQ ? Ton utilisation de la balise <object> ne me semble pas valide Smiley cligne

Pour les erreurs du validateur du W3C, difficile de te répondre sans les voir. Mais en règle générale, ce ne sont pas des balises qu'il faut changer, mais bien des erreurs de syntaxe à corriger : imbrications de balises incorrectes, balises ou attributs déprécies, ...


Bonjour Thomas,
oui j'ai lu cette page mais à la relire je me dis que je vais essayer une petite modif pour voir si ça règle le pb car la syntaxe n'est effectivement pas la même.

Pour la réponse de validation w3c, comment la publier pour vous la montrer ?

Sinon pour le post sur simpleviewer, je l'ai déjà lu mais nous n'utilisons pas la même version donc je ne pense pas que ça vienne de ça (je n'utilise pas de js pour charger mon diaporama)
a écrit :
Pour la réponse de validation w3c, comment la publier pour vous la montrer ?
Le plus simple c'est de donner une page en ligne. Il y a beaucoup d'erreurs ?

Au passage, il y a une balise fermante </script> de trop dans la section <head>. Et, sauf erreur de ma part, l'attribut language de <script> n'est plus utilisé et il faut simplement indiquer type
<script type="text/javascript" src="..."></script>
Thomas D. a écrit :
Le plus simple c'est de donner une page en ligne. Il y a beaucoup d'erreurs ?


Hum Smiley confus ...je saisi pas bien ? je dois être un peu fatiguée... Je proposais de soumettre le résultat du validator donc de copier la réponse. (14 erreurs !!! )
En fait mon dilemme c'est de savoir ce qui me prendrait le plus de temps (pour pouvoir boucler ce week end en 3 jrs maxi) corriger les erreurs de mes pages en HTML4 ou les convertir en XHTML (je ne sais pas si c'est possible facilement ?) pour que le site soit plus cohérent avec les régles de développement actuel.

Voici ce que j'ai comme résultat :

Result: Failed validation, 14 errors
File: C:\Documents and Settings\micault\Mes documents\Site_Odorico_Mosaistes\page_corrigee_windows\st-lunaire.htm
Encoding: iso-8859-1
Doctype: HTML 4.01 Transitional

This page is not Valid HTML 4.01 Transitional!
Below are the results of attempting to parse this document with an SGML parser.

Error Line 69 column 8:
end tag for element "SCRIPT" which is not open.
</script>The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occured in a script section of your document, you should probably read this FAQ entry.

&#9993;

Error Line 82 column 19:
there is no attribute "SRC".
<embed src="index.swf" width="550" height="420" align="middle" quality="You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

&#9993;

Error Line 82 column 37:
there is no attribute "WIDTH".
<embed src="index.swf" width="550" height="420" align="middle" quality="&#9993;

Error Line 82 column 50:
there is no attribute "HEIGHT".
...d src="index.swf" width="550" height="420" align="middle" quality="high" scal&#9993;

Error Line 82 column 62:
there is no attribute "ALIGN".
....swf" width="550" height="420" align="middle" quality="high" scale="noscale" &#9993;

Error Line 82 column 79:
there is no attribute "QUALITY".
... height="420" align="middle" quality="high" scale="noscale" bgcolor="FFFFFF" &#9993;

Error Line 82 column 92:
there is no attribute "SCALE".
... align="middle" quality="high" scale="noscale" bgcolor="FFFFFF" type="applica&#9993;

Error Line 82 column 110:
there is no attribute "BGCOLOR".
...ality="high" scale="noscale" bgcolor="FFFFFF" type="application/x-shockwave-f&#9993;

Error Line 82 column 124:
there is no attribute "TYPE".
...cale="noscale" bgcolor="FFFFFF" type="application/x-shockwave-flash" pluginsp&#9993;

Error Line 82 column 168:
there is no attribute "PLUGINSPAGE".
...ation/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashpl&#9993;

Error Line 82 column 214:
element "EMBED" undefined.
...ww.macromedia.com/go/getflashplayer" /> .You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case.

&#9993;

Error Line 90 column 466:
value of attribute "ALIGN" cannot be "ABSMIDDLE"; must be one of "TOP", "MIDDLE", "BOTTOM", "LEFT", "RIGHT".
...ight="18" border="0" align="absmiddle"></a></span><!-- #EndLibraryItem --> <aThe value of the attribute is defined to be one of a list of possible values but in the document it contained something that is not allowed for that type of attribute. For instance, the “selected” attribute must be either minimized as “selected” or spelled out in full as “selected="selected"”; a value like “selected="true"” is not allowed.

&#9993;

Error Line 90 column 467:
required attribute "ALT" not specified.
...ght="18" border="0" align="absmiddle"></a></span><!-- #EndLibraryItem --> <a 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>.

&#9993;

Error Line 92 column 17:
document type does not allow element "BASE" here.
<base target=_top>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).
Modifié par Rozenn (16 Feb 2007 - 14:50)
Thomas D. a écrit :
Salut.

As-tu lu ce point de la FAQ ? Ton utilisation de la balise <object> ne me semble pas valide Smiley cligne


Je viens d'effectuer le changement de façon strictement identique à la Faq et ça fonctionne ! Smiley ravi
Par contre le classid et le codebase ne doivent pas du tout apparaître ?!
(j'ai essayé avec et sans et avec ça ne fonctionne pas)
Comment le navigateur sait quelle version de flash est utile ?
désolée je n'ai pas été jusqu'au liens complémentaires Smiley confused Je saurai pour la prochaine fois Smiley cligne

Merci pour tes réponses, ça m'a permis de régler pal mal de choses !
Reste un point à régler pour que mes pages soient lues par les différents navigateurs sur PC et Mac : ma feuille de style css qui n'est pas lue par safari malgré le code suivant
<style type="text/css">
@import url("css/decouverte.css");
</style>

et avoir lu la Faq Link ou @import ?
Je suppose que ça doit venir du contenu même de la feuille css car elle est lue ar FF sur Mac et FF + IE sur PC mais le problème se pose uniquement sur Safari sur Mac ? (un erreur de propriété peut-être ?)
Bonjour a tous et tout d'abord merci pour votre disponibilite.
Je profite de ce sujet pour vous expliquer mon probleme relativement similaire.
J'essai donc d'inserer une animation flash dans ma page et cela via la methode Satay... Si tout marche tres bien sous IE6 et 7, l'animation ne se charge pas sous FF... Plus etrange encore... je la vois moi meme sous FF sur mon ordi mais pas sur les autres (les versions FF et lecteurs flash sont pourtant identiques)

Voici mon bout de code
<object type="application/x-shockwave-flash" data="images/slideshow.swf" width="634" height="250">
    <param name="movie" value="images/slideshow.swf" />
    <img src="images/banners/door.jpg" width="634" height="250" alt="Door" />
</object>


Encore merci pour votre aide.
Modifié par arolland (20 Feb 2007 - 09:42)
Rozenn a écrit :

Reste un point à régler pour que mes pages soient lues par les différents navigateurs sur PC et Mac : ma feuille de style css qui n'est pas lue par safari malgré le code suivant
<style type="text/css">
@import url("css/decouverte.css");
</style>

et avoir lu la Faq Link ou @import ?
Je suppose que ça doit venir du contenu même de la feuille css car elle est lue ar FF sur Mac et FF + IE sur PC mais le problème se pose uniquement sur Safari sur Mac ? (un erreur de propriété peut-être ?)

J'ai déplacé cette question dans le bon forum Smiley smile