Le wiki de WIMS EDU

L'association WIMS EDU a ouvert ce wiki afin de favoriser les collaborations entre utilisateurs de WIMS.

Outils pour utilisateurs

Outils du site


documentation:devel:htmlerror

\defWIMSnamevalidation{Validation W3C}

Erreurs html classiques

Caractéristiques

Objectif : Faire des exercices qui soient le plus compatible W3C possible avec la déclaration html proposée par WIMS

Prérequis : Avoir des exercices en développement

Commentaires :

Niveau : Avancé

Explications

- Erreur: line xxx, end tag for “br” omitted, but OMITTAG NO was specified

Remplacez les balises <br> par <br />

- Erreur: line xxx, there is no attribute “name”

Erreur: line xxx, ID “oefform” already defined

Là c'est la faute de WIMS en général.

- Erreur: line xxx, end tag for “p” omitted, but OMITTAG NO was specified

Vous avez sûrement oublié de fermer la balise <p>.

- Erreur: line xxx, element “center” undefined

Ah oui ! cela, c'est fréquent … Une classe CSS qui centre a été définie dans le noyau de WIMS. Elle fait un peu plus que centrer et laisse un peu de marge.

<div class="wimscenter"> .... </div>
<table class="wimscenter"> .... </table>
<p class="wimscenter"> .... </p>
<h1 class="wimscenter">...</h1>, ...

- Erreur: line xxx, there is no attribute “align”

Il va falloir remplacer par des balises CSS. Par exemple,

<p style=“text-align:center”> …. </p>

- Erreur: line xxx, element “font” undefined

Remplacez par <span style=“….”> </span>. Ce que vous pouvez utiliser et qui est prédéfini dans WIMS

<span class="bold"> <span class="small"> <span class="smaller"> <span class="tt">

(en remplacement de <tt>). Regroupez les différentes propriétés dans une seule balise : <span class=“bold small”>

- Erreur: line xxx, there is no attribute “size”

Tout dépend de quoi cela dépend (image, …), de nouveau utilisez un style CSS.

- Erreur: line xxx, there is no attribute “target”

Cela peut être dû à WIMS. Si cela a été ajouté par vous : il faut éviter d'ouvrir des “popups”, c'est pourquoi l'attribut “target” a été retiré de la norme xhtml (pensez à la navigation sur mobile où basculer entre différentes fenêtres n'est pas aussi évident). Il reste tout de même parfois des cas où on peut difficilement faire autrement !

- Erreur: line xxx, there is no attribute “bgcolor”

Remplacer par un style CSS : style=“background-color:XXXX” Cependant, il faut aussi penser que le serveur peut choisir ses couleurs. Vous trouverez à la fin des classes CSS correspondant aux couleurs de WIMS.

- Erreur: line xxx, there is no attribute “color”

Utilisez les styles CSS : <tag style=“color:green”>. Mais la remarque précédente sur la couleur de fond s'applique.

- Erreur: line xxx, document type does not allow element “style” here Si c'est dans un exercice de correspondance, c'est la faute de WIMS ! (on ne doit pas mettre un style dans la partie body de la page html).

- <p><i><b> </b></i></p> ou <i><b> </b></i>

Simplifiez ! <p class=“bold” style=“font-style:italic”> … </p> ou

<span class=“bold” style=“font-style:italic”> … </span>

Utilisez la balise <strong> </strong>, s'il s'agit d'un message important qu'un handicap visuel doit être capable de distinguer.

- Attention: line xxx, character “<” is the first character of a delimiter but occurred as data

Il doit s'agir du signe mathématique <, mettre par exemple dans le mode mathématique ou le code html \&lt; .

- Erreur: line xxx, document type does not allow element “p” here; missing one of “button”, “map”, “object”, “ins”, “del”, “noscript” start-tag

Quelque chose n'a peut-être pas été fermé avant. À propos, <p><table> n'est pas permis. De même, Dans un exercice, si vous entourez la commande embed{\} et si vous ne connaissez pas les balises qui se trouvent à l'intérieur du type de réponse (et celles-ci peuvent évoluer), il est conseillé d'utiliser la balise <div> qui est plus souple dans son utilisation.

-

Erreur: line xxx, end tag for "td" omitted, but OMITTAG NO was specified
Erreur: line xxx, end tag for "p" omitted, but OMITTAG NO was specified

Les erreurs sont claires !

- Erreur: line xxx, there is no attribute “autocomplete”

Tant pis !

Quelques classes CSS utilisables :

.wimscenter ou center
.wimsborder, .wimsnoborder (pour <table>)
.spacer : <br class="spacer" /> un peu plus d'espace.
.white, .smaller, .small, .bold, .nowrap,.wims_emph
.float_right, .float_left
.clearall : <br class="clearall" />, .inline

Pour analyser les réponses, des couleurs sont utilisées dans les exercices OEF. Vous pouvez les utiliser.

.oef_indgood bonne réponse
.oef_indbad mauvaise réponse
.oef_indpartial réponse partielle
.oef_indprec mauvaise précision
.oef_condgood bonne condition
.oef_condbad mauvaise condition

Beaucoup de tables ont été utilisées dans les exercices de manière à rigidifier la disposition. Ce n'est pas forcément une bonne idée (pensez à la taille des écrans qui peuvent être petits). Il vaudrait mieux les enlever et garder les tableaux lorsqu'on veut vraiment mettre des données en tableaux. Par exemple :

<div class="float_left spacer"> image </div>
 blablabla

<br class="clearall" />

permet de mettre une image à gauche et laisse le texte principal se placer sur la droite.

Pour un tableau, mettez le plus de renseignements possibles dans le CSS. Par exemple,

\css{<style type="text/css">
table.montableau { background-color:blue}
table.montableau td {text-align:left; color:red;}
table.montableau th {text-align:center;padding:10px;}
}

\statement{
<table class="montableau">
 <tr>
  <th>En-tête1</th><td>3</td>
 </tr>
 <tr>
  <th>En-tête2</th><td>6</td>
 </tr>
 </table>
 }

Classes CSS des couleurs de WIMS :

wims\_color1 : couleur des menus.

wims\_color2 : correspond aux boutons permettant de soumettre.

wims\_color3 : correspond aux boutons d'aide.

Classes CSS pour la balise audio

wims\_audio

Classes CSS pour jsxgraph (par défaut, centre)

.jxgbox
.jsxgraph_button

Privilégiez html5 et xhtml. Quand vous trouvez un conseil sur un site, vérifiez qu'il est correct et valide !

http://www.w3schools.com/

http://www.w3schools.com/css/

Vous pourriez laisser un commentaire si vous étiez connecté.
documentation/devel/htmlerror.txt · Dernière modification: 27/07/2016 05:00 (modification externe)