Comprendre le Formattage HTML

Version imprimable

17/06/2010, 22h17
grominnetto

Comprendre le Formattage HTML

Bonjour tout le monde...je construit un site sur Dreamweaver et je me retrouve avec quelque chose que je ne comprend pas...le formattage de page HTML

J'ai ma page, avant le formattage: http://grominnettowrestling.web44.net/ProfilsMSang.html

et j'ai une page après le formattage: http://grominnettowrestling.web44.net/ProfilsMSesp.html

Je comprend le résultat...ce que je ne comprend pas, c'est quand je regarde ma page en mode "design", je vois des images à gauche et au centre...et je vois de noms au centre et à gauche (oui vous pouvez voir avec "Afficher la source")

En voyant cela, sur quoi puis-je me baser pour placer une autre image....ou même faire une nouvelle page avec touts les noms de A
à Z...

Quelqu'un peut m'éclairer?

Merci
18/06/2010, 08h39
Bisûnûrs

Je n'ai absolument rien compris ...
18/06/2010, 08h53
Vil'Coyote

:aie: c'est moi ou le décodeur est en panne?

OK, regardez le vieux code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
 
<p align="center">&nbsp;</p>
<p align="center" class=style14>Click on your wrestler </p>
 
<table width="1213" border="0">
 
 
 
  <tr>
 
 
 
	    <td valign="top"><p><a href="MaddDogReaperang.html"><img src="Photo/MaddDogReaperA.gif" width="130" height="110" border="0" /></a></p>
    <p align="center"><a href="MaddDogReaperang.html" class="style8">Madd Dog Reaper</a> </p></td>
 
 
		    <td valign="top"><a href="Makabreang.html"><img src="Photo/Makabre Makabre Makabre A.gif" width="130" height="110" border="0" /></a></p>
    <p align="center"><a href="Makabreang.html" class="style8">Makabre Makabre Makabre </a></p></td>
 
 
 
 
 
 
	        <td valign="top"><p><a href="MaliaHosakaang.html"><img src="Photo/Malia Hosaka A.gif" width="130" height="110" border="0" /></a></p>
    <p align="center"><a href="MaliaHosakaang.html" class="style8">Malia Hosaka </a></p></td>
 
	      <td valign="top"><p><a href="Mansonang.html"><img src="Photo/Manson A.gif" width="130" height="110" border="0" /></a></p>
    <p align="center"><a href="Mansonang.html" class="style8">Manson</a></p></td>
 
	 <td valign="top"><p><a href="MarcFieldang.html"><img src="Photo/Marc Field.jpg" width="130" height="110" border="0" /></a></p>
    <p align="center"><a href="MarcFieldang.html" class="style8">Marc Fields </a></p></td>
 
 
	 <td valign="top"><p><a href="MareaRojaang.html"><img src="Photo/Marea Roja A.gif" width="130" height="110" border="0" /></a></p>
    <p align="center"><a href="MareaRojaang.html" class="style8">Marea Roja </a></p></td>
 
 
	  <td valign="top"><p><a href="Marionang.html"><img src="Photo/Marion.jpg" width="130" height="110" border="0" /></a></p>
    <p align="center"><a href="Marionang.html" class="style8">Marion</a></p></td>
 
 
    <td valign="top"><p><a href="Mariusang.html"><img src="Photo/Marius.gif" width="130" height="110" border="0" /></a></p>
    <p align="center"><a href="Mariusang.html" class="style8">Marius</a></p></td>
 
	    <td valign="top"><p><a href="MarkJamesang.html"><img src="Photo/Marc James A.gif" width="130" height="110" border="0" /></a></p>
    <p align="center"><a href="MarkJamesang.html" class="style8">Mark James </a></p></td>
 
 
 
  </tr>

et maintenant le nouveau:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<p ALIGN="center">&nbsp;
 
    </p>
    <p ALIGN="center" CLASS="style11 style4 style8">
      Haga clic con el luchador
    </p>
    <p ALIGN="center" CLASS="style9">&nbsp;
 
    </p>
    <p ALIGN="center" CLASS="style2">&nbsp;
 
    </p>
    <table WIDTH="1213" BORDER="0">
      <tr>
        <td VALIGN="top">
          <p>
            <a HREF="MaddDogReaperesp.html"><img SRC="Photo/MaddDogReaperA.gif" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="MaddDogReaperesp.html" CLASS="style12">Madd Dog Reaper</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="Makabreesp.html"><img SRC="Photo/Makabre%20Makabre%20Makabre%20A.gif" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="Makabreesp.html" CLASS="style12">Makabre Makabre Makabre</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="MaliaHosakaesp.html"><img SRC="Photo/Malia%20Hosaka%20A.gif" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="MaliaHosakaesp.html" CLASS="style12">Malia Hosaka</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="Mansonesp.html"><img SRC="Photo/Manson%20A.gif" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="Mansonesp.html" CLASS="style12">Manson</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="MarcFieldesp.html"><img SRC="Photo/Marc%20Field.jpg" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="MarcFieldesp.html" CLASS="style12">Marc Field</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="MareaRojaesp.html"><img SRC="Photo/Marea%20Roja%20A.gif" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="MareaRojaesp.html" CLASS="style12">Marea Roja</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="Marionesp.html"><img SRC="Photo/Marion.jpg" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="Marionesp.html" CLASS="style12">Marion</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="Mariusesp.html"><img SRC="Photo/Marius.gif" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="Mariusesp.html" CLASS="style12">Marius</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="MarkJamesesp.html"><img SRC="Photo/Marc%20James%20A.gif" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="MarkJamesesp.html" CLASS="style12">Mark James</a>
          </p>
        </td>
      </tr>

Si vous mettez cela dans Dreamweaver en mode design, vous allez avoir deux résultats très différent, qui pourtant sont bien correct sur le Web!!!

Mais si je veux faire un seul tableau par langues, sans le découper comme présentement, comment je fais pour avoir un beau code HTML comme le nouveau, si je ne peux pas voir en mode Design?

Suis-je plus clair?

Merci...et bonne nuit!!

18/06/2010, 10h36
polymorphisme

Bonjour,

tu devrais te pencher sur le mode d'emploi de Dreamweaver.
18/06/2010, 13h41
grominnetto

Pas sur que le mode d'emploi va m'expliquer pourquoi les images sont ainsi....

Faudrait aller plus loin dans ton observation ou.......

Bonjour,

Pourquoi tous les attribut HTML sont en majuscules ?

Citation:

Envoyé par grominnetto

et maintenant le nouveau:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<p ALIGN="center">&nbsp;
 
    </p>
    <p ALIGN="center" CLASS="style11 style4 style8">
      Haga clic con el luchador
    </p>
    <p ALIGN="center" CLASS="style9">&nbsp;
 
    </p>
    <p ALIGN="center" CLASS="style2">&nbsp;
 
    </p>
    <table WIDTH="1213" BORDER="0">
      <tr>
        <td VALIGN="top">
          <p>
            <a HREF="MaddDogReaperesp.html"><img SRC="Photo/MaddDogReaperA.gif" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="MaddDogReaperesp.html" CLASS="style12">Madd Dog Reaper</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="Makabreesp.html"><img SRC="Photo/Makabre%20Makabre%20Makabre%20A.gif" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="Makabreesp.html" CLASS="style12">Makabre Makabre Makabre</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="MaliaHosakaesp.html"><img SRC="Photo/Malia%20Hosaka%20A.gif" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="MaliaHosakaesp.html" CLASS="style12">Malia Hosaka</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="Mansonesp.html"><img SRC="Photo/Manson%20A.gif" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="Mansonesp.html" CLASS="style12">Manson</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="MarcFieldesp.html"><img SRC="Photo/Marc%20Field.jpg" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="MarcFieldesp.html" CLASS="style12">Marc Field</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="MareaRojaesp.html"><img SRC="Photo/Marea%20Roja%20A.gif" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="MareaRojaesp.html" CLASS="style12">Marea Roja</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="Marionesp.html"><img SRC="Photo/Marion.jpg" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="Marionesp.html" CLASS="style12">Marion</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="Mariusesp.html"><img SRC="Photo/Marius.gif" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="Mariusesp.html" CLASS="style12">Marius</a>
          </p>
        </td>
        <td VALIGN="top">
          <p>
            <a HREF="MarkJamesesp.html"><img SRC="Photo/Marc%20James%20A.gif" WIDTH="130" HEIGHT="110" BORDER="0"></a>
          </p>
          <p ALIGN="center">
            <a HREF="MarkJamesesp.html" CLASS="style12">Mark James</a>
          </p>
        </td>
      </tr>

devyan

18/06/2010, 14h27
grominnetto

Étrangement, je te dirais que j'en ai aucune idée..

Avec site: http://www.websiteoptimization.com/services/analyze/

Je fais une tentative et je vois que la page arrive plus vite...donc cela me semble intéressant....mais avant de conclure, je veux comprendre!!!

Et c'est la raison de ma question!!!!

N'étant pas un Webmaster (et voyant l'engouement pour mon site de la part des lutteurs), je suis un peu confus avec ce "formattage de HTML"

Merci
20/06/2010, 01h18
thelvin

Citation:

Envoyé par grominnetto

N'étant pas un Webmaster (et voyant l'engouement pour mon site de la part des lutteurs), je suis un peu confus avec ce "formattage de HTML"

Oui nous aussi on est un peu confus.

Je suppose qu'il doit bien y avoir quelque part des experts Dreamweaver qui pourraient nous expliquer ce que c'est que ce "formattage de HTML", mais à moi ça me semble une lubie de plus de ce programme qui nous promet un gâteau qui n'existe pas.
20/06/2010, 07h08
grominnetto

C'est plutôt weboptimisation qui parlait de code formatté!!!
20/06/2010, 07h48
thelvin

Au temps pour moi, alors. J'imagine que weboptimisation ont une méthode selon quoi si on écrit certains noms d'attribut en majuscule, la page sera chargée un peu plus rapidement par certains navigateurs. Si ça se trouve, c'est peut-être même vrai de quelques millisecondes.

Mais ça me semble quand même être une lubie un peu fantaisiste. Le petit monde autour de ce site a de bonnes références, alors je suppose qu'en gros ils savent de quoi ils parlent. Mais formater le HTML, bof, quoi.

(Enfin, j'essaie de faire un peu profil bas devant des gens qui ont de bonnes références, mais quand je vois en 2010 un service qui nous met sans broncher les attributs d'une page XHTML en majuscule, je me dis qu'il y a un certain manque de compétence.)