Exemple 01 : Mise en page d'une structure XHTML sans CSS

Explications :

L'exemple ci-dessus représente une page web XHTML qui n'est associée à aucun code CSS autre que celui de la feuille de style par défaut du navigateur. Cette feuille de style, qui est propre à chaque navigateur, ne fait que gérer le style basique des éléments du document. L'affichage se fait donc de manière brute, sans réelle mise en page autre que celle associée aux éléments (X)HTML eux-mêmes.

Consultez l'exemple ci-dessus en pleine page : exemple 01a sur la mise en page XHTML sans CSS.

Code XHTML :

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

<!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">
<head>
<title>Exemple 01 : Mise en page d'une structure XHTML sans CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

<h1>
Exemple 01 : Mise en page d'une structure XHTML sans CSS
</h1>

  <div id="entete">
    <img src="../../commun/images/logo.gif" alt="Logo" />
    <h2>
Exemple de site sans CSS
    </h2>
    <p>
Un exemple de présentation avec et sans code CSS.
    </p>
  </div>

  <div id="corps">
    <div id="menu">
      <h3>
Menu
      </h3>
      <ul>
        <li>
	  <a href="#">
Lien 1
	  </a>
        </li>
        <li>
	  <a href="#">
Lien 2
	  </a>
        </li>
        <li>
	  <a href="#">
Lien 3
	  </a>
        </li>
      </ul>
    </div>

    <div id="contenu">
      <img src="../../commun/images/logo_css.gif" alt="Logo CSS" />

      <h3>
Contenu
      </h3>

      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat quam quis dui. Proin sit amet purus 
ac quam interdum placerat. Aliquam a tellus eget arcu placerat pellentesque. Maecenas sed ligula. 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt 
libero at turpis. Suspendisse consequat rhoncus sapien. Aenean quam ipsum, adipiscing ac, interdum ut, 
pharetra et, est. Integer id magna in erat consectetur posuere. Nam vehicula nulla id urna. Aenean neque 
lectus, scelerisque in, condimentum sit amet, congue eu, lectus. Ut mattis. Quisque bibendum tincidunt 
velit. Sed laoreet. Nunc eleifend.
      </p>
      <p>
Sed sed felis. Mauris a dui. Ut metus. Suspendisse dictum nisl et dui. Sed metus elit, vehicula at, 
elementum quis, tincidunt ac, sem. Aenean eleifend, ipsum sed gravida porta, ante est tincidunt velit, 
sed commodo sapien quam ut arcu. Curabitur eu purus. Phasellus vulputate mi a felis. Suspendisse potenti. 
Sed at nisi et felis viverra adipiscing. Morbi ac nibh. Vestibulum in risus. Nullam auctor vehicula tortor. 
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut metus at magna 
sollicitudin molestie. Nunc nec diam sit amet lectus consectetur feugiat. Curabitur varius bibendum nisl. 
Sed viverra justo sed eros. In tempor dolor.
      </p>
      <p>
Suspendisse potenti. Sed vitae elit sed ligula dignissim semper. Pellentesque ligula leo, mollis quis, 
consequat sit amet, fringilla at, justo. Ut eros erat, fringilla vel, lobortis vel, faucibus nec, lorem. 
In vel felis. Sed sagittis neque lobortis nunc. Donec rhoncus mollis purus. Sed ac ligula non quam dictum 
blandit. Praesent at dui id lectus lacinia laoreet. In justo mi, congue et, convallis vitae, consectetur 
vitae, eros. Proin mattis est eu erat. Fusce pretium condimentum lorem. Suspendisse potenti. Quisque luctus 
mollis sem. Donec sollicitudin aliquam mauris. Sed pharetra libero vitae est. Vestibulum sagittis, tellus 
id suscipit semper, ligula velit pretium odio, sed pharetra magna neque a ante.
      </p>
      <p>
Duis rhoncus cursus tellus. Donec pharetra est vitae massa. Quisque neque neque, blandit ut, ultrices ut, 
pulvinar sit amet, ligula. Aliquam commodo. Donec dictum eros in magna. Suspendisse pulvinar dapibus risus. 
Sed eu nunc. Integer posuere urna ac arcu dapibus tincidunt. Aenean erat lorem, pulvinar sit amet, pretium 
sit amet, tristique in, velit. Etiam gravida, eros sollicitudin pellentesque eleifend, nunc mi commodo nisl, 
eget eleifend massa erat et mauris. Suspendisse potenti. Fusce tincidunt lobortis lectus. Phasellus molestie 
accumsan dolor. Duis massa ipsum, pretium nec, dignissim sed, porttitor pretium, purus.
      </p>
      <p>
Cras arcu ante, sagittis quis, dapibus vel, varius eu, dui. Morbi gravida nisl sit amet dui. Mauris fringilla 
adipiscing justo. Maecenas luctus justo sed nunc. Cras nisi nisl, euismod nec, malesuada eu, viverra quis, 
nulla. Cras gravida vestibulum sem. Etiam aliquet, quam sed convallis semper, quam quam congue sem, eget 
tincidunt ipsum eros vitae massa. Nunc sem. Fusce mollis lorem sed nisl elementum sollicitudin. Etiam 
convallis nisi in urna. Morbi lorem felis, tincidunt sit amet, tempor et, sollicitudin vitae, sem. Aenean 
ante. Morbi fermentum venenatis dui. Curabitur tincidunt lobortis ipsum. Phasellus sed erat eu mi tempor 
porttitor. Suspendisse potenti. Nam mollis ante nec libero. Quisque vehicula, neque non vestibulum 
malesuada, enim dolor congue leo, sit amet laoreet tellus tortor a purus. Fusce eu nibh. Duis et urna 
non odio dignissim gravida. 
      </p>
    </div>
  </div>

  <div id="pied">
    <p>
Pied de page
    </p>
  </div>

</body>
</html>

Copyright © 2011 Christophe F. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 Euros de dommages et intérêts. Cette page est déposée.