html -> Xhtml

reg34000 · le 19 septembre 2006

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

<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

________________________________________________________
|					 |			  |								  |						|	 
|  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">

que je passe toutes mes balises en minuscules

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

et

par

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é

Cubic-Design · le 19 septembre 2006

Je sais pas ou tu as vu que les div était déconseillé, mais c'est du gros n'importe quoi. Au contraire c'est très conseillé (contrairement au span) pour le CSS2, c'est même d'ailleur impossible sans les div.

reg34000 · le 19 septembre 2006

oui il est soubent dit qu'il ne faut utiliser que les balises sémentiques et éviter les div au tant que possible pas les ssupprimer mais les limiter

Quarky · le 19 septembre 2006

Euh pour le code, je sais pas si tu sais mais il faut travailler avec les indentations. Ca rend ton code carrément plus lisible donc il est plus facile de s'y retrouver. :mdr:

Ceci donne pour ton cas :

<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>

On parlais justement des div trop utilisée dans un autre topic. Et oui il ne faut pas en abuser. Comme le souligne reg34000, quand des balises sémaniques sont utilisables, il ne faut pas chercher plus loin et utiliser ces dernières.

Petit lien pour comprendre sur un exemple concret.

Cubic-Design · le 19 septembre 2006

On parlais justement des div trop utilisée dans un autre topic. Et oui il ne faut pas en abuser. Comme le souligne reg34000, quand des balises sémaniques sont utilisables, il ne faut pas chercher plus loin et utiliser ces dernières.

Petit lien pour comprendre sur un exemple concret.

On est d'accord qu'il faut pas en abuser, mais là vu la mise en forme tout en tableau il en faudra forcément. Et puis sur le net on trouve des sites complexes avec plus de 30 div pas page et qui rest accessible

windu.2b · le 24 septembre 2006

Salut,

Voici quelques petis conseils sur ton code, pour le rendre XHTML:

Les balises doivent obligatoirement être en minuscules me semble-t-il (le XML n'accepte pas les balises en majuscules, donc le XHTML aussi pour autant que je sache...)
Les balises autofermantes (<br /> <link /> <img />) doivent être refermées comme je viens de le faire
Les balises <img /> doivent avoir un attibut alt="bla bla bla" obligatoirement: c'est un contenu alternatif (un message de description de préférence) pour le cas où l'image ne s'afficherait pas (navigateur pour {mal|non}-voyants, moteur de recherche, navigateur texte-only, ou même dans le cas où le lien vers l'image serait cassé)
La balise <center> est invalide, de même que pas mal de balises/attributs du même genre (souvent ceux des tableaux comme valign...) car il s'agit de balises/attributs décrivant une mise en page, ce qui est le travail du CSS
Les tableaux, ca passe à la trappe (sauf dans le cas de données tabulaires, bien sûr... mais ca n'est pas le cas dans le code que tu nous montres)
Privilégier au maximum les balises sémantiques: donc éviter les <span style="color: red; font-size: 32;">Titre</span> alors qu'un simple <h1>Titre</h1> avec le CSS-qui-va-bien fera aussi bien et sera correct sémantiquement parlant!
En effet, ce point est important: visuellement, la balise <span> et la balise <h1> peuvent donner le même résultat, mais il faut penser à ceux qui ne peuvent pas voir ta page (les {mal|non}-voyants.... mais aussi les moteurs de recherche!!!). Pour eux, il y a une différence ENORME entre les 2! <span> signifie que ce qui suit est un simple texte, alors que <h1> signifie clairement que ce qui suit est le titre du document (les moteurs de recherche en tiennent compte eux aussi)
Enfin, refermer toujours les balises proprement, en les imbriquant les unes dans les autres, et non en les faisant se recouper, même si les navigateurs sont assez permissifs et sont souvent capables de gérer les erreurs de balisage

Voilà, c'est un début, il y a d'autres règles à respecter mais elles ne me viennent pas pour le moment!

bonne continuation en XHTML, et tu verras: une fois les bons réflexes pris, ca devient plus rapide et plus facile de coder proprement que le contraire :byebye:

Et puis, pour finir le site w3cvalidator.org est ton ami, n'hésite pas à lui faire tester ta page au fur et à mesure de ton avancement il te sera d'une grande aide!

Je te recommande aussi l'extension Web Developper Toolbar (si tu travailles Firefox, mais attention! Cette extension ne marche pas encore avec Firefox 2.0 beta), elles peut pas mal t'aider et sait d'ailleurs envoyer ta page vers le validateur...

Edit: après vérification, les balises et les attributs DOIVENT être en minuscules

playstation.2.fg · le 24 septembre 2006

Euh pour le code, je sais pas si tu sais mais il faut travailler avec les indentations. Ca rend ton code carrément plus lisible donc il est plus facile de s'y retrouver.

Tient d'ailleur est-ce qu'il existe un programme qui réindente du code (avec le max de langage possible) ?

windu.2b · le 24 septembre 2006

Euh pour le code, je sais pas si tu sais mais il faut travailler avec les indentations. Ca rend ton code carrément plus lisible donc il est plus facile de s'y retrouver.

Tient d'ailleur est-ce qu'il existe un programme qui réindente du code (avec le max de langage possible) ?

Beaucoup d'éditeurs/IDE proposent l'indentation automatique du code. Eclipse le fait, Zend Studio (payant mais utilisable pendant une période d'essai de 30j) aussi...

playstation.2.fg · le 24 septembre 2006

J'ai pas dis auto-indenteur (pendant que tu tapes ton code).

theocrite · le 24 septembre 2006

p   hindent						 - Reformats HTML code					   
p   indent						  - C language source code formatting program

Connexion

html -> Xhtml

Messages recommandés

reg34000

Lien vers le commentaire

Partager sur d’autres sites

Cubic-Design

Lien vers le commentaire

Partager sur d’autres sites

reg34000

Lien vers le commentaire

Partager sur d’autres sites

Quarky

Lien vers le commentaire

Partager sur d’autres sites

Cubic-Design

Lien vers le commentaire

Partager sur d’autres sites

windu.2b

Lien vers le commentaire

Partager sur d’autres sites

playstation.2.fg

Lien vers le commentaire

Partager sur d’autres sites

windu.2b

Lien vers le commentaire

Partager sur d’autres sites

playstation.2.fg

Lien vers le commentaire

Partager sur d’autres sites

theocrite

Lien vers le commentaire

Partager sur d’autres sites

Archivé

Naviguer

Activité