Structuration d'une page web en HTML5
On souhaite structurer une page web de la manière suivante à l'aide des balises HTML5.
Question
Créer une page web en HTML5 dont la partie body est structurée de la même façon, sans se soucier du style (CSS).
Indice
Résultat HTML exercice1.1 | 
Informations[1]
Vous devriez obtenir une page comme ceci :
Informations[1]Indice
La version en HTML4 :
1
2
<html>3
4
<head>5
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
6
<title>HTML4</title>
7
</head>8
9
<body>10
11
<div id="header">
12
<h1>Monday Times</h1>
13
</div>14
15
<div id="menu">
16
<ul>17
<li>News</li>
18
<li>Sports</li>
19
<li>Weather</li>
20
</ul>21
</div>22
23
<div id="content">
24
<h1>News Section</h1>
25
26
<div id="post">
27
<h1>News Article</h1>
28
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 29
lurum hurum turum.</p>30
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 31
lurum hurum turum.</p>32
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 33
lurum hurum turum.</p>34
</div>35
36
<div id="post">
37
<h1>News Article</h1>
38
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 39
lurum hurum turum.</p>40
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 41
lurum hurum turum.</p>42
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 43
lurum hurum turum.</p>44
</div>45
46
</div>47
48
<div id="footer">
49
<p>© 2014 Monday Times. All rights reserved.</p>
50
</div>51
52
</body>53
</html>54
Solution
Solution en HTML5
1
2
<html>3
4
<head>5
<title>HTML5</title>
6
<meta charset="utf-8"/>
7
</head>8
9
<body>10
11
<header>12
<h1>Monday Times</h1>
13
</header>14
15
<nav>16
<ul>17
<li>News</li>
18
<li>Sports</li>
19
<li>Weather</li>
20
</ul>21
</nav>22
23
<section id="news">
24
<h1>News Section</h1>
25
26
<article>27
<h1>News Article</h1>
28
<p>Ipsum lurum hurum turum ipsum lurum hurum turum29
ipsum lurum hurum turum ipsum lurum hurum turum.</p>30
<p>Ipsum lurum hurum turum ipsum lurum hurum turum31
ipsum lurum hurum turum ipsum lurum hurum turum.</p>32
<p>Ipsum lurum hurum turum ipsum lurum hurum turum33
ipsum lurum hurum turum ipsum lurum hurum turum.</p>34
</article>35
36
<article>37
<h1>News Article</h1>
38
<p>Ipsum lurum hurum turum ipsum lurum hurum turum39
ipsum lurum hurum turum ipsum lurum hurum turum.</p>40
<p>Ipsum lurum hurum turum ipsum lurum hurum turum41
ipsum lurum hurum turum ipsum lurum hurum turum.</p>42
<p>Ipsum lurum hurum turum ipsum lurum hurum turum43
ipsum lurum hurum turum ipsum lurum hurum turum.</p>44
</article>45
46
</section>47
48
<footer>49
<p>© 2014 Monday Times. All rights reserved.</p>
50
</footer>51
52
</body>53
</html>Question
Ajouter les sections Sports et Weather, puis les référencer dans le menu de navigation. Quand on clique sur le lien dans le menu navigation, la page doit afficher la section voulue.
Indice
Penser à ajouter un id à chaque section.
Ajouter des liens à l'élément nav renvoyant vers des ancres internes.
Indice
1
<a href="#mon_element_reference"></a>
2
<!-- ... -->3
<div id="mon_element_reference"></div>
Solution
1
2
<html>3
4
<head>5
<title>HTML5</title>
6
<meta charset="utf-8"/>
7
</head>8
9
<body>10
11
<header>12
<h1>Monday Times</h1>
13
</header>14
15
<nav>16
<ul>17
<li><a href="#news">News</a></li>
18
<li><a href="#sports">Sports</a></li>
19
<li><a href="#weather">Weather</a></li>
20
</ul>21
</nav>22
23
<section id="news">
24
25
<h1>News Section</h1>
26
27
<article>28
<h1>News Article 1</h1>
29
<p>Ipsum lurum hurum turum ipsum lurum hurum turum30
ipsum lurum hurum turum ipsum lurum hurum turum.</p>31
<p>Ipsum lurum hurum turum ipsum lurum hurum turum32
ipsum lurum hurum turum ipsum lurum hurum turum.</p>33
<p>Ipsum lurum hurum turum ipsum lurum hurum turum34
ipsum lurum hurum turum ipsum lurum hurum turum.</p>35
</article>36
37
<article>38
<h1>News Article 2</h1>
39
<p>Ipsum lurum hurum turum ipsum lurum hurum turum40
ipsum lurum hurum turum ipsum lurum hurum turum.</p>41
<p>Ipsum lurum hurum turum ipsum lurum hurum turum42
ipsum lurum hurum turum ipsum lurum hurum turum.</p>43
<p>Ipsum lurum hurum turum ipsum lurum hurum turum44
ipsum lurum hurum turum ipsum lurum hurum turum.</p>45
</article>46
47
</section>48
49
50
<section id="sports">
51
52
<h1>Sports Section</h1>
53
54
<article>55
<h1>Sports Article 1</h1>
56
<p>Ipsum lurum hurum turum ipsum lurum hurum turum57
ipsum lurum hurum turum ipsum lurum hurum turum.</p>58
<p>Ipsum lurum hurum turum ipsum lurum hurum turum59
ipsum lurum hurum turum ipsum lurum hurum turum.</p>60
<p>Ipsum lurum hurum turum ipsum lurum hurum turum61
ipsum lurum hurum turum ipsum lurum hurum turum.</p>62
</article>63
64
<article>65
<h1>Sports Article 2</h1>
66
<p>Ipsum lurum hurum turum ipsum lurum hurum turum67
ipsum lurum hurum turum ipsum lurum hurum turum.</p>68
<p>Ipsum lurum hurum turum ipsum lurum hurum turum69
ipsum lurum hurum turum ipsum lurum hurum turum.</p>70
<p>Ipsum lurum hurum turum ipsum lurum hurum turum71
ipsum lurum hurum turum ipsum lurum hurum turum.</p>72
</article>73
74
</section>75
76
77
<section id="weather">
78
79
<h1>Weather Section</h1>
80
81
<article>82
<h1>Weather Article 1</h1>
83
<p>Ipsum lurum hurum turum ipsum lurum hurum turum84
ipsum lurum hurum turum ipsum lurum hurum turum.</p>85
<p>Ipsum lurum hurum turum ipsum lurum hurum turum86
ipsum lurum hurum turum ipsum lurum hurum turum.</p>87
<p>Ipsum lurum hurum turum ipsum lurum hurum turum88
ipsum lurum hurum turum ipsum lurum hurum turum.</p>89
</article>90
91
<article>92
<h1>Weather Article 2</h1>
93
<p>Ipsum lurum hurum turum ipsum lurum hurum turum94
ipsum lurum hurum turum ipsum lurum hurum turum.</p>95
<p>Ipsum lurum hurum turum ipsum lurum hurum turum96
ipsum lurum hurum turum ipsum lurum hurum turum.</p>97
<p>Ipsum lurum hurum turum ipsum lurum hurum turum98
ipsum lurum hurum turum ipsum lurum hurum turum.</p>99
</article>100
101
</section>102
103
104
<footer>105
<p>© 2014 Monday Times. All rights reserved.</p>
106
</footer>107
108
</body>109
</html>Question
[Question complémentaire, à faire chez soi]
Ajouter le style CSS afin d'obtenir la page voulue.
Style CSS en HTML4 :
1
<style>2
body {font-family:Verdana,sans-serif;font-size:0.8em;}
3
div#header,div#footer,div#content,div#post
4
{border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}5
div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
6
div#content {background-color:#ddd;}
7
div#menu ul {margin:0;padding:0;}
8
div#menu ul li {display:inline; margin:5px;}
9
</style>Solution
Solution complète
1
2
<html>3
4
<head>5
<title>HTML5</title>
6
<meta charset="utf-8"/>
7
</head>8
9
<style>10
body {11
font-family:Verdana,sans-serif;font-size:0.8em;
12
}
13
header,footer,section,article {
14
border:1px solid grey;
15
margin:5px;margin-bottom:15px;padding:8px;
16
background-color:white;
17
}
18
header,footer {
19
color:white;background-color:#444;margin-bottom:5px;
20
}
21
section {22
background-color:#ddd;
23
}
24
nav ul {
25
margin:0;padding:0;
26
}
27
nav ul li {
28
display:inline; margin:5px;
29
}
30
</style>31
32
<body>33
34
<header>35
<h1>Monday Times</h1>
36
</header>37
38
<nav>39
<ul>40
<li><a href="#news">News</a></li>
41
<li><a href="#sports">Sports</a></li>
42
<li><a href="#weather">Weather</a></li>
43
</ul>44
</nav>45
46
<section id="news">
47
48
<h2>News Section</h2>
49
50
<article>51
<h3>News Article 1</h3>
52
<p>Ipsum lurum hurum turum ipsum lurum hurum turum53
ipsum lurum hurum turum ipsum lurum hurum turum.</p>54
<p>Ipsum lurum hurum turum ipsum lurum hurum turum55
ipsum lurum hurum turum ipsum lurum hurum turum.</p>56
<p>Ipsum lurum hurum turum ipsum lurum hurum turum57
ipsum lurum hurum turum ipsum lurum hurum turum.</p>58
</article>59
60
<article>61
<h3>News Article 2</h3>
62
<p>Ipsum lurum hurum turum ipsum lurum hurum turum63
ipsum lurum hurum turum ipsum lurum hurum turum.</p>64
<p>Ipsum lurum hurum turum ipsum lurum hurum turum65
ipsum lurum hurum turum ipsum lurum hurum turum.</p>66
<p>Ipsum lurum hurum turum ipsum lurum hurum turum67
ipsum lurum hurum turum ipsum lurum hurum turum.</p>68
</article>69
70
</section>71
72
73
<section id="sports">
74
75
<h2>Sports Section</h2>
76
77
<article>78
<h3>Sports Article 1</h3>
79
<p>Ipsum lurum hurum turum ipsum lurum hurum turum80
ipsum lurum hurum turum ipsum lurum hurum turum.</p>81
<p>Ipsum lurum hurum turum ipsum lurum hurum turum82
ipsum lurum hurum turum ipsum lurum hurum turum.</p>83
<p>Ipsum lurum hurum turum ipsum lurum hurum turum84
ipsum lurum hurum turum ipsum lurum hurum turum.</p>85
</article>86
87
<article>88
<h3>Sports Article 2</h3>
89
<p>Ipsum lurum hurum turum ipsum lurum hurum turum90
ipsum lurum hurum turum ipsum lurum hurum turum.</p>91
<p>Ipsum lurum hurum turum ipsum lurum hurum turum92
ipsum lurum hurum turum ipsum lurum hurum turum.</p>93
<p>Ipsum lurum hurum turum ipsum lurum hurum turum94
ipsum lurum hurum turum ipsum lurum hurum turum.</p>95
</article>96
97
</section>98
99
100
<section id="weather">
101
102
<h2>Weather Section</h2>
103
104
<article>105
<h3>Weather Article 1</h3>
106
<p>Ipsum lurum hurum turum ipsum lurum hurum turum107
ipsum lurum hurum turum ipsum lurum hurum turum.</p>108
<p>Ipsum lurum hurum turum ipsum lurum hurum turum109
ipsum lurum hurum turum ipsum lurum hurum turum.</p>110
<p>Ipsum lurum hurum turum ipsum lurum hurum turum111
ipsum lurum hurum turum ipsum lurum hurum turum.</p>112
</article>113
114
<article>115
<h3>Weather Article 2</h3>
116
<p>Ipsum lurum hurum turum ipsum lurum hurum turum117
ipsum lurum hurum turum ipsum lurum hurum turum.</p>118
<p>Ipsum lurum hurum turum ipsum lurum hurum turum119
ipsum lurum hurum turum ipsum lurum hurum turum.</p>120
<p>Ipsum lurum hurum turum ipsum lurum hurum turum121
ipsum lurum hurum turum ipsum lurum hurum turum.</p>122
</article>123
124
</section>125
126
127
<footer>128
<p>© 2014 Monday Times. All rights reserved.</p>
129
</footer>130
131
</body>132
</html>
