Besoin d'aide pour ameliorer cette page.

Question

cirvent

6 Feb 2007 à 11:56

Bonjour a tous,

voila j'ai deja pas mal ameliorer cette pas mais j'aimerai aller encore plus loin est faire valider xhtml :

voici la page html:


<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="Content-Language" CONTENT="fr">
<META NAME="GENERATOR" CONTENT="WebExpert5, NotePad++, Photoshop7">
<META NAME="ProgId" CONTENT="WebExpert5.Document">
<META NAME="Creation_Date" CONTENT="2007">
<title>titre</title>
<link type="text/css" href="../../interface/style.css" rel="stylesheet">
<SCRIPT type="text/javascript" LANGUAGE="javascript" SRC="../../interface/png_ie6.js"></SCRIPT>
</head>
<body>
<h1 class="titre">titre</h1>
<h1 class="titre">sous titre</h1>
<table width="90%" border="0" cellspacing="0" cellpadding="10" align="center">
	<tr>
		<td>
			<table border="0" cellspacing="0" cellpadding="0" height="100%">
				<tr>
					<td width="11"><img src="../../interface/hg.png" width="11" height="47" ALT="Image Tabeau Haut Gauche"></td>
					<td class="hm" width="100%">Correctif pour Windows x</td>
					<td width="40"><img src="../../interface/hd.png" width="40" height="47" ALT="Image Tabeau Haut Droit"></td>
				</tr>
			</table>
			<table border="0" cellspacing="0" cellpadding="0" height="100%">
				<tr>
					<td class="mg"></td>
					<td>
						<TABLE class="hhm" cellSpacing="0" cellPadding="6" width="100%" height="100%" border="1" style="border-collapse: collapse">
            <TR>
                <TD class="tfh" width="10%" height="31">Nom</TD>
				<TD class="tfh" width="10%" height="31">Date</TD>
				<TD class="tfh" width="5%" height="31">WGA*</TD>
                <TD class="tfh" width="55%" height="31">Description</TD>
                <TD class="tfh" width="10%" height="31">Taille</TD>
				<TD class="tfh" width="10%" height="31">Télécharger</TD>
			</TR>
<tr>
                <TD height="30" bgColor="#EFEFEF"></TD>
                <TD height="30" bgColor="#dee3e7"></TD>
				<TD height="30" bgColor="#dee3e7"></TD>
                <TD height="30" bgColor="#EFEFEF"></TD>
                <TD height="30" bgColor="#dee3e7"></TD>
				<TD height="30" bgColor="#dee3e7"></TD>
            </tr>
			<tr>
                <TD height="30" bgColor="#EFEFEF"></TD>
                <TD height="30" bgColor="#dee3e7"></TD>
				<TD height="30" bgColor="#dee3e7"></TD>
                <TD height="30" bgColor="#EFEFEF"></TD>
                <TD height="30" bgColor="#dee3e7"></TD>
				<TD height="30" bgColor="#dee3e7"></TD>
            </tr>
						</TABLE>
					</td>
					<td class="md"></td>
				</tr>
				<tr>
					<td><img src="../../interface/bg.png" width="11" height="10" ALT="Image Tabeau Bas Gauche"></td>
					<td class="bm" width="100%"></td>
					<td><img src="../../interface/bd.png" width="11" height="10" ALT="Image Tabeau Bas Droit"></td>
				</tr>
			</table>
		</td>
	</tr>
</table>

voici le fichier css:


td {
font : 80% "Segoe UI", "Trebuchet MS";
text-align : center;
font-size : 12px;
color : #565656;
}
P {
font : 80% "Segoe UI", "Trebuchet MS";
font-size : 12px;
}
DIV {
font : 80% "Segoe UI", "Trebuchet MS";
font-size : 12px;
}
th {
font : 80% "Segoe UI", "Trebuchet MS";
font-size : 12px;
}
body {
font : 80% "Segoe UI", "Trebuchet MS";
font-size : 14px;
color : #ffffff;
background : url('back.jpg');
background-attachment : fixed;
background-repeat: repeat;
background-color : #254194;
}

 /* Images Header */
.hhm {
background-image : url(hhm.png);
background-repeat: repeat;
}
td.tfh{
text-align : center;
font-family : "Segoe UI", "Trebuchet MS";
font-weight: bold;
font-size : 9pt;
color : #fff;;
}
 /* Images cadre Forums*/
td.hm {
background-image : url(hm.png);
background-repeat: repeat;
text-align : center;
font-family : "Segoe UI", "Trebuchet MS";
font-weight: bold;
font-size : 10pt;
color : #fff;
}
td.mg {
background-image : url(mg.png);
background-repeat: repeat;
}
td.md {
background-image : url(md.png);
background-repeat: repeat;
}
td.bm {
background-image : url(bm.png);
background-repeat: repeat;
}

.title {
color : #fff;
font-size : 12px;
font-weight : bold;
}
.content {
color : #fff;
font-size : 12px;
}
a:link {
color : #fff;
font-size : 12px;
text-decoration : none;
}
a:active {
color : #ffffff;
font-size : 12px;
text-decoration : none;
}
a:visited {
color : #ffffff;
font-size : 12px;
text-decoration : none;
}
a:hover {
color : #0005e1;
font-size : 12px;
text-decoration : underline;
}
a.copy:link {
color : #ffffff;
text-decoration : underline;
}
a.copy:visited {
color : #ffffff;
text-decoration : none;
}
a.copy:active {
color : #ffffff;
text-decoration : none;
}
a.copy:hover {
color : #0005e1;
text-decoration : underline;
}
a.tableau:link {
color : #565656;
text-decoration : underline;
}
a.tableau:visited {
color : #565656;
text-decoration : none;
}
a.tableau:active {
color : #565656;
text-decoration : none;
}
a.tableau:hover {
color : #0005e1;
text-decoration : underline;
}
h1.import {
color : #ffff00;
font-size : 11pt;
}
h1.avert {
color : #ffff00;
font-size : 14pt;
font-weight : normal;
font-variant : normal;
text-align : center;
}
h1.titre {
color : #ffffff;
font-size : 18pt;
font-weight : normal;
font-variant : normal;
text-align : center;
}
h1.pre {
color : #ffffff;
font-size : 14pt;
font-family : "Segoe UI", "Trebuchet MS";
font-weight : normal;
font-variant : normal;
text-align : left;
text-decoration : underline;
}
h2.normal {
color : #ffffff;
font-size : 14pt;
font-family : "Segoe UI", "Trebuchet MS";
font-weight : normal;
font-variant : normal;
text-align : left;
text-decoration : underline;
}
h2.center {
color : #ffffff;
font-size : 14pt;
font-family : "Segoe UI", "Trebuchet MS";
font-weight : normal;
font-variant : normal;
text-align : center;
text-decoration : underline;
}
h3.normal {
color : #ffffff;
font-size : 13pt;
font-family : "Segoe UI", "Trebuchet MS";
font-weight : normal;
font-variant : normal;
text-align : left;
text-decoration : underline;
}
h3.center {
color : #ffffff;
font-size : 13pt;
font-family : "Segoe UI", "Trebuchet MS";
font-weight : normal;
font-variant : normal;
text-align : center;
text-decoration : underline;
}
h4.normal {
color : #ffffff;
font-size : 12pt;
font-family : "Segoe UI", "Trebuchet MS";
font-weight : normal;
font-variant : normal;
text-align : left;
text-decoration : underline;
}
h4.center {
color : #ffffff;
font-size : 12pt;
font-family : "Segoe UI", "Trebuchet MS";
font-weight : normal;
font-variant : normal;
text-align : center;
text-decoration : underline;
}
h1.erreur {
color : #ffffff;
font-size : 14pt;
font-family : "Segoe UI", "Trebuchet MS";
font-weight : normal;
font-variant : normal;
text-align : center;
text-decoration : none;
}
a.erreur:link {
font-size : 14pt;
color : #ffffff;
text-decoration : underline;
}
a.erreur:visited {
color : #ffffff;
text-decoration : none;
}
a.erreur:active {
color : #ffffff;
text-decoration : none;
}
a.erreur:hover {
color : #ffff00;
text-decoration : underline;
}

Cirvent
Modifié par cirvent (06 Feb 2007 - 11:58)

Mikachu

6 Feb 2007 à 12:13

Salut,

Déja la première des chose pour faire valider un document est qu'il ait un doctype. Ainsi, tu devrais aller faire un tour sur cette page, qui t'en apprendrait déja suffisamment sur le sujet.
Vu l'aspect de ton code, un doctype xhtml 1.0 transitional serait le plus adéquat, mais il te faudrait bien évidemment pour celà supprimer du code les éléments de mise en forme non valide en transitional.

Dans l'idéal, il faudrait même supprimer tout élément de mise en forme, pour ne pas alourdir le code html pour rien en répétant des propriétés de style à chaque occurence d'un élément, pour s'y repérer plus facilement lors de modifications du site, etc.

Dans un idéal encore plus lointain, il serait même mieux que tu supprime la mise en page en tableau, en construisant ton site de façon sémantique en fonction de son contenu.

Tu peux aller faire un tour sur ces pages pour en apprendre plus :
Construire un site sans tableau
Design en CSS

Tu peux aussi par extension consulter les tutoriels et la la FAQ qui t'apporteront encore plus de connaissance.

m0ul-fr1t

6 Feb 2007 à 17:13

Mikachu a écrit :
Dans l'idéal, il faudrait même supprimer tout élément de mise en forme...

Dans l'idéal seulement ^^ ??
Le Xhtml, c'est une norme mais aussi une maniere de penser et de coder... Smiley cligne

cirvent:
j'ajouterais que ta page sera peut etre valide d'apres le validator du W3C, mais ce n'est pas pour ça qu'elle respectera "l'esprit" Xhtml

je serais partisan que tu te plonge dans un bon pti tuto XHTML (et CSS par la meme occasion).

sinon, Validome propose un validateur en francais pour ceux qui ont du mal à comprendre les erreurs et avertissements du validateur W3C

...(ca existe le mot validateur en Fr-fr ? Smiley lol

)

Julien Royer

6 Feb 2007 à 17:17

Salut,

m0ul-fr1t a écrit :
Le Xhtml, c'est une norme mais aussi une maniere de penser et de coder...

Bof...

Je conseille la lecture du tutoriel "XHTML, CSS, accessibilité : confusions et amalgames", en particulier la section "Pour finir : les différences entre XHTML et HTML".

Mikachu

6 Feb 2007 à 17:54

m0ul-fr1t a écrit :

Dans l'idéal seulement ^^ ??
Le Xhtml, c'est une norme mais aussi une maniere de penser et de coder...

Il n'est en rien obligé de séparer complètement le fond et la forme dès l'instant ou on code en transitional, même si c'est par contre fortement recommandé. Par contre en strict, les balises de mise en forme dépréciées, ainsi que les attributs de mise en forme intégrés au code ne sont pas validables.

Quand à la manière de penser et de coder... tu m'excuseras mais bon...
Je crois plus en la bonne utilisation d'un outil que l'outil lui même.

Sujet clos

Questions générales et questions de débutants

Besoin d'aide pour ameliorer cette page.