html -> Xhtml

19 sept. 2006, 08:07

Salut voici le code de ma page HTML je souhaite la passer en XHTML et donc avoir vos conseil pour le pas faire de boulettes

Code : Tout sélectionner

<HTML>

<HEAD>
<TITLE>Mon titre</TITLE>


<LINK title="feuille de style" href="/style.css" type="text/css" rel="stylesheet">

<SCRIPT LANGUAGE="JavaScript">
image1 = new Image();
image1.src = "/includes/includes_images/sommaire/accueil02.gif";
image2 = new Image();
image2.src = "/includes/includes_images/sommaire/agence02.gif";
image3 = new Image();
image3.src = "/includes/includes_images/sommaire/contact02.gif";
image4 = new Image();
image4.src = "/includes/includes_images/sommaire/dossiers02.gif";
image5 = new Image();
image5.src = "/includes/includes_images/sommaire/projets02.gif";
</SCRIPT>

</HEAD>


<BODY BGCOLOR=#ffffff>

<TABLE WIDTH=100% HEIGHT=100% CELLSPACING=0 CELLPADDING=0 BORDER=0>

<TR>
<TD WIDTH=50% BACKGROUND="/includes/includes_images/background/fond.gif"></TD>

<TD WIDTH=14 VALIGN="top" BACKGROUND="/includes/includes_images/background/fond-01.gif">
<IMG src="/includes/includes_images/background/fond-01.gif"></TD>




<!-- SOMMAIRE -->
<TD WIDTH=150 BACKGROUND="/includes/includes_images/fond.gif" VALIGN="top">

<TABLE WIDTH=150 CELLSPACING=0 CELLPADDING=0 BORDER=0>

<TR><TD WIDTH=150 HEIGHT=150>
<IMG src="/includes/includes_images/sommaire/logo.gif" WIDTH=150 HEIGHT=150 TITLE="" BORDER=0></TD></TR>

<TR><TD WIDTH=150 HEIGHT=32>
<IMG src="/includes/includes_images/sommaire/archi.gif" WIDTH=150 HEIGHT=32 TITLE="" BORDER=0></TD></TR>

</TABLE><BR>



<TABLE WIDTH=150 CELLSPACING=0 CELLPADDING=0 BORDER=0>

<TR><TD WIDTH=20 HEIGHT=10></TD><TD></TD></TR>
<TR><TD WIDTH=20></TD>
<TD WIDTH=130 HEIGHT=30>
<A HREF="/accueil/" onmouseover="image1.src='/includes/includes_images/sommaire/accueil02.gif';"
onmouseout="image1.src='/includes/includes_images/sommaire/accueil01.gif';">

<IMG name="image1" src="/includes/includes_images/sommaire/accueil01.gif" WIDTH=130 HEIGHT=30 TITLE="" BORDER=0></A></TD></TR>

<TR><TD WIDTH=20 HEIGHT=10></TD><TD></TD></TR>
<TR><TD WIDTH=20></TD>
<TD WIDTH=130 HEIGHT=30>
<A HREF="/agence/" onmouseover="image2.src='/includes/includes_images/sommaire/agence02.gif';"
onmouseout="image2.src='/includes/includes_images/sommaire/agence01.gif';">

<IMG name="image2" src="/includes/includes_images/sommaire/agence01.gif" WIDTH=130 HEIGHT=30 TITLE="" BORDER=0></A></TD></TR>

<TR><TD WIDTH=20 HEIGHT=10></TD><TD></TD></TR>
<TR><TD WIDTH=20></TD>
<TD WIDTH=130 HEIGHT=30>
<A HREF="/contact/" onmouseover="image3.src='/includes/includes_images/sommaire/contact02.gif';"
onmouseout="image3.src='/includes/includes_images/sommaire/contact01.gif';">

<IMG name="image3" src="/includes/includes_images/sommaire/contact01.gif" WIDTH=130 HEIGHT=30 TITLE="" BORDER=0></A></TD></TR>

<TR><TD WIDTH=20 HEIGHT=10></TD><TD></TD></TR>
<TR><TD WIDTH=20></TD>
<TD WIDTH=130 HEIGHT=30>
<A HREF="/dossiers/" onmouseover="image4.src='/includes/includes_images/sommaire/dossiers02.gif';"
onmouseout="image4.src='/includes/includes_images/sommaire/dossiers01.gif';">

<IMG name="image4" src="/includes/includes_images/sommaire/dossiers01.gif" WIDTH=130 HEIGHT=30 TITLE="" BORDER=0></A></TD></TR>

<TR><TD WIDTH=20 HEIGHT=10></TD><TD></TD></TR>
<TR><TD WIDTH=20></TD>
<TD WIDTH=130 HEIGHT=30>
<A HREF="/projets/" onmouseover="image5.src='/includes/includes_images/sommaire/projets02.gif';"
onmouseout="image5.src='/includes/includes_images/sommaire/projets01.gif';">

<IMG name="image5" src="/includes/includes_images/sommaire/projets01.gif" WIDTH=130 HEIGHT=30 TITLE="" BORDER=0></A></TD></TR>

</TABLE><BR>



<TABLE WIDTH=150 CELLSPACING=0 CELLPADDING=0 BORDER=0>

<TR><TD WIDTH=150 HEIGHT=10></TD></TR>
<TR><TD WIDTH=150 HEIGHT=18><CENTER>
<IMG src="/includes/includes_images/sommaire/info.gif" WIDTH=136 HEIGHT=18 TITLE="" BORDER=0></CENTER></TD></TR>

<TR><TD WIDTH=150 HEIGHT=10></TD></TR>
<TR><TD WIDTH=150 HEIGHT=30><CENTER>
<A HREF="/contact/mail.php">
<IMG src="/includes/includes_images/sommaire/lettre.gif" WIDTH=30 HEIGHT=30 TITLE="" BORDER=0></A></CENTER></TD></TR>

</TABLE><BR>

</TD>

<TD WIDTH=600 VALIGN=top>



<TABLE WIDTH=600 CELLSPACING=0 CELLPADDING=0 BORDER=0 CLASS=texte>
<TR><TD HEIGHT=10></TD></TR>

<TR><TD>
<IMG src="/accueil/accueil_images/accueil.gif" WIDTH=580 HEIGHT=80 TITLE="" BORDER=0></TD></TR>

<TR><TD HEIGHT=20></TD></TR>
</TABLE>

<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0 CLASS=texte>
<TR><TD WIDTH=70></TD>

<TD>
Blabla
<B>Mot important</B>, blabla ligne 1. <BR>blabla ligne2
<BR><BR>
<CENTER>
<IMG src="/accueil/accueil_images/sport.gif" WIDTH=190 HEIGHT=110 TITLE="" BORDER=0></CENTER>

<BR>
Blabla ligne1.
<BR><BR>
<IMG src="/includes/includes_images/puce02.gif" WIDTH=15 HEIGHT=15 TITLE="" BORDER=0>
<B> Mot important</B> blabla <B>mot imporatnt</B> blabla <B>mot important.</B>
<BR><BR>

</TD>

<TD WIDTH=70></TD></TR>
</TABLE>



<BR><BR>
<CENTER><A HREF="/" CLASS="copyright">www.monsite.com &copy;</A></CENTER><BR>
</TD>

<TD WIDTH=14 VALIGN="top" BACKGROUND="/includes/includes_images/background/fond-02.gif">
<IMG src="/includes/includes_images/background/fond-02.gif"></TD>

<TD WIDTH=50% BACKGROUND="/includes/includes_images/background/fond.gif"></TD>

</TR></TABLE>
</BODY>
</HTML>

Dans l'idée ma page se presente comme cela

Code : Tout sélectionner

_________________________________________________________________________
|              |          |                            |                 |
|  background  |   menu   |      corps de texte        |    background   |
|              |          |                            |                 |
|              |          |                            |                 |
|              |          |                            |                 |
|              |          |                            |                 |
|              |          |                            |                 |
|              |          |                            |                 |
|              |          |                            |                 |
|              |          |                            |                 |
|              |          |                            |                 |
|              |          |                            |                 |
|              |          |                            |                 |
|______________|__________|____________________________|_________________|

Donc il faut que je rajoutre
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

que je passe toutes mes balises en minuscules

que je remplace le <BR> par <br />

et
<IMG src="/includes/includes_images/background/fond-02.gif">
par
<img src="/includes/includes_images/background/fond-02.gif" />

mais la ou cela se complique c'est pour la gestion des BLOCK surtout qu'il semble faloir éviter les <div> qui ne sont pas des balises sémentiques...

Avant de pouvoir travailler sur les CSS il faudrait que j'arrive a avoir un code XHTML bien structuré

19 sept. 2006, 13:02

Je te recommande l'utilisation de deux extensions de Firefox qui te permettront de dégrossir beaucoup le travail:

-1- la barre Web Developper qui permet un nombre considérable de possibilités de vérifications en tous genres;
-2- L'extension Tidy qui va modifier un poil l'interace lorsque tu afficheras la source html et te permettra de la transformer à la volée du HTML4 au XHTML 1.0, il ne te restera ensuite à faire qu'un copier/coller pour l'essentiel. Ce n'est pas parfait,, mais les détails restant à corriger seront relativement peu nombreux.

20 sept. 2006, 17:01

déjà sépare le contenu des règle d'affichage puis le mieux c'est d'être en minuscule.
Tu dois déclarés des css...

20 sept. 2006, 18:06

Tu as lu les articles d'OpenWeb?

22 sept. 2006, 14:44

Salut!

Surtout, ne pas oublier le début de code suivant (notamment la DTD):

Version XHTML 1.0 Strict

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Version XHTML 1.0 Transitional

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Version XHTML 1.0 Frameset

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

html -> Xhtml

Qui est en ligne