Contribuez à la FAQ HTML/DHTML/XHTML [FAQ]

**Community Management** · 10/09/2003, 23h25

Salut à tous,

La FAQ (X)HTML est actuellement en ligne avec plus de 60 questions/réponses et en évolution constante.

Vous pouvez la consulter avant de poser une question sur le forum. De plus, pour faciliter vos investigations, un moteur de recherche y a été intégré.

Toutefois nous pouvons la faire grandir avec votre collaboration. En effet, pour participer à son évolution, vous pouvez poster dans le forum Contribuez toutes les questions/réponses qui vous semblent pertinentes.

Merci de mettre les Q/R sous ce format :

Question ? (Version: XXX)

Réponse à la question

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

agrémentée d'un bout de code le cas échéant

pour votre future participation

**davidc2** · 18/08/2004, 11h36

Il s'agit de compléter la doc sur le choix d'un DOCTYPE pour XHTML ou HTML. En espérant que ces précision saillent rejoindre les documents déjà présents. Cet article concerne ceux qui utilisent XHTML histoire d'avoir du HTML propre et moderne.
(ceux qui font du vrai xml y trouveront des informations intéressantes mais ne sont pas directement concernés.)

Une question fréquente est de savoir quel DOCTYPE mettre.
Et heureusement on trouve de plus en plus de doc à ce sujet.

Malheureusement (et malgré moi) je me suis retrouvé contraint de pousser les recherches un peu plus loin. Les choses ne sont pas si simples qu'elles le semblent.

Si vous voulez faire du XHTML, vous allez fier de vous débuter le document par:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<?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 lang="fr" xml:lang="fr">

( XHTML n'étant pas du html mais du xml, il lui faut la première ligne si vous utilisez un encodage ISO et non UTF. C'est notre cas à nous les francophones, d'où la présence de cette première ligne. De même pour le dédoublement de la langue "fr". Qu'importe, tel n'est pas notre sujet.)

Et là vous êtes fier mais le problème est que la pesque totalité des navigateurs ne passeront PAS en mode XHTML !!!
(mais qu'est-ce qu'il nous dit ???)

Et oui... d'après la norme du W3C, le type MIME d'un document Xhtml doit être application/xhtml+xml au lieu de text/html

c'est un détail ? Oui mais un détail qui change tout...
on retrouve parfois cela dans une balise META:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

vous voyez ce petit text/html ?
(il est d'ailleurs souvent envoyé d'office par le serveur donc on ne joue pas dessus si facilement)
c'est lui le fautif !

à cause de cela le navigateur va passer dans son "quirk mode" c'est à dire qu'il va considérer que vous ne suivez aucune norme (ça valait le coup de mettre un DOCTYPE) et va essayer d'interpréter votre code comme un vieux html fin 80, début années 90

et cela est dommage parce que vos belles balises <br />
fermantes deviennt des attributs étranges et inconnus.
( < /> c'est pas permis en html)

donc l'effort de faire du propre tombe à l'eau.

Les optimistes diront, ok, qu'à ne cela ne tienne, envoyons le bon type mime au navigateur, allez une ligne php et c'est réglé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
 <?PHP header('Content-Type: application/xhtml+xml; charset=ISO-8859-1') ?>

Essayez pour voir... les utilisateurs Internet Explorer (IE6) ne pourront plus consulter le site !!!! (et MacOS plantera carrément). Certes les autres navigateurs commuteront comme il faut en XHTML, mais bon...
se priver des nombreux utilisateur de IE, c'est pas malin !

Alors, pas le choix, il FAUT rester en text/html

mais là, le W3C est clair dans sa norme:
XHTML 1.1 exige le type mime application/xhtml+xml (text/html interdit)

et si XHTML 1.0 pourrait accepter text/html, cela est très fortement déconseillé et banni par cette même norme. Motif ayant poussé les navigateurs à ne pas en tenir compte ! (sauf 1 ou deux très rares, mais aucun des connus, pas même Opera ou Mozilla qui restent en vieux HTML comme on l'a dit)

(NB: le CSS peut en pâtir car les dimensions des boîtes ne sont plus calculées pareil non plus dans ce cas de figure. )

Bilan ? Seule façon de respecter les normes du W3C, d'en profiter dans les navigateurs et d'écrire un code propre:
c'est de rester en HTML 4.01 strict
(du moins dans le doctype)

Bien sûr, en ayant écrit quand même du XHTML pour être prêt pour plus tard (un jour, IE acceptera le XHTML)...

on n'aura plus qu'à convertir les <br> en <br />
et idem pour les img et hr

on peut déjà même en html écrire les balises en minuscules, les attributs entre guillemets, etc.

Mais à l'heure actuelle, le seul DOCTYPE utilisable à grande échelle est le bon vieux html (100% de réussite, bien sûr on laisse le type mime habituel text/html)

En espérant avoir apporté une contribution utile.
Mes sources:

http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html

un fou a même eu l'amabilité et le courage de tout tester (tous OS, tous navigateurs, tous doctype)

http://www.w3.org/People/mimasa/test...-types/results

**Ricou13** · 11/07/2005, 23h25

Salut,

La même question posée 2 fois en 7 jours. C'est un peu un mélange entre CSS et Javascript. Il faudrait peut-être la mettre dans les 2 FAQ.

Q : Comment surligner toute une ligne de tableau en la survolant

R : En utilisant 2 classes différentes et en basculant d'une classe à l'autre avec un peu de Javascript puisque IE ne reconnait le pseudo-code :hover QUE sur les balises <a>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<table border="1">
<tr class="trnormal" onMouseOver="this.className='trhover';" onMouseOut="this.className='trnormal';">
   <td>aaaaaaa</td>
   <td>bbbbbbb</td>
</tr>
<tr class="trnormal" onMouseOver="this.className='trhover';" onMouseOut="this.className='trnormal';">
   <td>ccccccc</td>
   <td>ddddddd</td>
</tr>
</table>

Avec le code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.trnormal {
	background-color: #fff;
	color: #000;
	}
.trhover {
	background-color: #000;
	color: #fff;
	}

De plus, si on veut que la ligne réagisse comme un lien, il suffit d'ajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="location.href='page1.html';"

dans les balises <tr> et de modifier le CSS pour ajouter la petite main :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.trnormal {
	background-color: #fff;
	color: #000;
	cursor: default;
	}
.trhover {
	background-color: #000;
	color: #fff;
	cursor: pointer;
	}

Testé sous IE6-SP1 et FF 1.0.4, sous W2K Pro - SP4

**elraton** · 14/09/2005, 22h42

Trop bien le truk du menu :

Tout d'abord un petit hack CSS tres important qui permer de corriger les bug de IE.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
padding-left:18px; /** Code interpreter par FF et IE **/
_padding-left:14px; /** Code interpreter uniquement par IE **/

Et voila comment faire pour avoir des propriété differentes entre IE et FF, sans se prendre la tete avec du java ou du php

**Maxoo** · 03/08/2006, 11h53

Question qui devrait être dans la FAQ HTML, même si le code n'est quasiement que du javascript. Parce que hier je cherchais ce bout de code, et déja je ne le trouve pas dans la FAQ HTML, alors je vais dans la FAQ javascript, car je sais que c'est en javascript que l'on peut faire cela, mais du coup il n'y avait pas le code HTML ( href="javascript: ) et du coup, j'ai chercher super longtemps avant de comprendre mon erreur ... sniff

Question :
Comment aller à la page précédente, suivante ?

Réponse à la question :
En javascript, il y a l'objet history qui permet de gérer l'historique du navigateur.

Pour aller à la page précédente, il faut faire un lien du type :
(deux solutions)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="javascript:history.back();">précédente</a>
<a href="javascript:history.go(-1);">précédente</a>

Pour aller la page suivante, il faut faire un lien du type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="javascript:history.next();">suivante</a>

j'ai mis la FAQ comme au format demandé dans le forum PHP.

**denisC** · 31/10/2006, 17h17

Pour les cadres sur les liens :

http://www.developpez.net/forums/sho...49#post1476349

**Bisûnûrs** · 02/12/2006, 11h01

Q : Comment faire passer un div au-dessus d'une balise object ?

R : En rajoutant cette ligne dans la balise <object> :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<param name="wmode" value="opaque" />

Q : Comment rendre le fond de mon animation flash transparent ?

R : En rajoutant cette ligne dans la balise <object> :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<param name="wmode" value="transparent" />

NB : Ne fonctionne qu'à partir de la version 6 de Flash PLayer. Les utilisateurs qui ont une version inférieure verront un fond opaque.

**Maxoo** · 03/12/2006, 13h54

Envoyé par Bisûnûrs

Comment rendre le fond de mon animation flash transparent ?
NB : Ne fonctionne qu'à partir de la version 6 de Flash PLayer. Les utilisateurs qui ont une version inférieure verront un fond opaque.

Qu'entends tu par le fond ?

Ca rend le fond d'un animation transparente, quelque soit l'animation ?

**Bisûnûrs** · 03/12/2006, 14h10

Envoyé par Maxoo

Qu'entends tu par le fond ?

La couleur de fond définie dans ton document flash.

En effet, quand tu créés une animation flash tu es obligé de définir une couleur de fond (blanc par défaut). Sans cette balise, si tu mets ton animation sur un fond rouge, tu auras le fond de ton animation blanc. Avec cette balise, le fond blanc sera devenu transparent et laissera apparaître le rouge derrière.

Envoyé par Maxoo

Ca rend le fond d'un animation transparente, quelque soit l'animation ?

Oui.

**Christophe P.** · 12/12/2006, 15h43

Comment ne pas mettre ma page HTML dans le cache ?

Il semble que pragma ne fonctionne pas correctement avec tous les navigateurs, les lignes suivantes semblent fonctionner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache,no-store">
<meta http-equiv="expires" content="0">

Utilité de la suivante ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta http-equiv="cache" content="no store">

**Linaa** · 04/02/2007, 15h52

Envoyé par FremyCompany

Comment rendre un élément inselectionnable (HTML+JS+CSS) ?

1) Sur IE :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<obj onselectstart="return false;" />

2) Sur Mozilla :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<obj style="-moz-user-select: none" />

3) Sur certains autres navigateurs

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<obj unselectable="on" />

4) Ce code marche sur FF, dans une moindre mesure, mais est beaucoup moins propre :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<obj onmousedown="return false;" >

Ce qui donne :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<obj unselectable="on" onselectstart="return false;" style="-moz-user-select: none;" />

**ANISSS** · 24/02/2007, 11h47

est comment puis je l'integrer dans ma page?

**FremyCompany** · 02/03/2007, 20h07

Envoyé par ANISSS

est comment puis je l'integrer dans ma page?

Tu parles de quel script ?

Si c'est du miens tu copies les attributs et tu les places sur la balise de ton choix, body pour que cela porte sur le document entier...

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body unselectable="on" onselectstart="return false;" style="-moz-user-select: none;" onmousedown="event.stopPropagation(); e.preventDefault(); return false;">Vous ne pourrez pas sélectionnez ce texte, quelque soit le navigateur</body>

**lamachine_fr** · 15/05/2007, 16h13

Son :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<object type="audio/mpeg" data="monfichier.mp3" height="0" width="0">
   <param name="filename" value="monfichier.mp3" />
   <param name="autostart" value="true" />
   <param name="loop" value="true" />
   Texte alternatif
</object>

Il y a une error dans le code de Bisûnûrs.
object type="audio/mpeg"
doit être
object type="audio/mp3"

**Erwan31** · 22/02/2008, 01h53

Bonjour,
il y a quelques erreurs et imprécisions dans certaine réponses.

Mes proposition:

Déclarer un doctype qui ne déclenche pas le mode Quirks permet de:

* valider son document avec les validateurs (x)HTML et leur indiquer
à quelles règles d'écriture le document doit obéir en l'informant de la version de (x)HTML que vous utilisez.

* déclencher tel ou tel mode de rendu (Quirks, Standard ou
Almost standard) selon le Doctype choisi sur les navigateurs modernes.

* assurer une plus grande cohérence d'affichage d'un navigateur à
l'autre grâce à un comportement plus conforme aux spécifications (x)HTML en vigueur.

Comment centrer horizontalement n'importe quel élément en CSS ?

On peut le faire en CSS grâce au code présenté ci-dessous
Corps de la page (X)HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<body>
  <div class="centrer">Mon bloc centré horizontalement</div>
</body>

Et le code CSS utile au positionnement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
body {
  margin : 0; 
  padding : 0;
  text-align: center; /* pour centrer le bloc enfant dans les anciennes version d'IE et en mode Quirks*/
 
}
 
.centrer {
  margin: 0 auto;
  width : 400px;
  text-align : left;  /* pour récupérer l'alignement par default*/
}

Note : Il faut obligatoirement spécifier une largeur width au bloc à centrer.

Comment décaler un objet vers la droite, sans pour autant le centrer ?

Note : Les marges latérales peuvent être appliquées à n'importe quel élément et les marge verticales au éléments de niveau bloc et aux élément en-ligne remplacés.

Comment éviter dans une page le retour à la ligne d'une phrase ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part