par
stever » 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 ©</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é
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]
<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 ©</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>[/code]
Dans l'idée ma page se presente comme cela
[code]_________________________________________________________________________
| | | | |
| background | menu | corps de texte | background |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
|______________|__________|____________________________|_________________|[/code]
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é