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
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<base href="http://danielhagnoul.developpez.com/">
<title>Page type comme HTML 5</title>
<style>
@import url(styles/html5Default.css);
canvas#canvasID1 {
float:right;
margin:12px;
/* border:1px dotted grey; */
/* width="200" et height="200" */
/* doivent être renseignés dans le tag canvas */
/* sinon le rapport height/width est faussé */
/* ne jamais écrire "200px" sinon bug dans excanvas.js */
}
</style>
<script src="lib/jquery-1.4a2.min.js"></script>
<!--[if IE]>
<script src="lib/ie-html5.js"></script>
<script src="lib/excanvas.js"></script>
<![endif]-->
<script>
$(window).ready(function(){
$("section.article p:first").css("color","red");
$("aside p:eq(1)").css("fontFamily","cursive");
if ($("#canvasID1")[0].getContext){
var ctx = $("#canvasID1")[0].getContext('2d');
ctx.fillStyle = "rgb(255,222,173)";
ctx.fillRect(40,50,80,80);
ctx.strokeStyle = "rgb(0,128,0)";
ctx.arc(120, 60, 40,0, Math.PI+(Math.PI*2)/2, true);
ctx.stroke();
}
});
</script>
</head>
<body>
<section id="conteneur">
<header>
<h1>Ce que je crois savoir.</h1>
<p>Si je ne me trompe pas !</p>
</header>
<aside>
<figure>
<dd>
<img src="images/Capture.jpg" alt="danielhagnoul" title="danielhagnoul" />
</dd>
<dt><a href="http://www.developpez.net/forums/u285162/danielhagnoul/">danielhagnoul</a></dt>
</figure>
<p>
Duis pretium aliquam lectus. Mauris in eros. Morbi sit amet neque nec lacus fermentum molestie. Nulla tempus, mi eu dictum accumsan, felis neque fringilla mi, vel fermentum magna orci vel felis. Vestibulum lacinia pulvinar libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent quis ante id justo pharetra gravida. Nullam tempor gravida quam. Sed ut turpis non nunc dictum pellentesque. Aliquam vel metus. Ut gravida, justo a elementum iaculis, magna orci vulputate libero, at accumsan quam diam eget leo. Morbi dictum metus sed quam. Morbi consequat porta magna. Aenean viverra orci ac velit.
</p>
<p>
Sed sed erat vitae tortor lobortis hendrerit. Donec a diam quis neque dignissim feugiat. Vivamus eu eros. Maecenas vulputate accumsan leo. Proin et elit. Fusce est. Vestibulum consectetur dui sed dolor. Curabitur ante tortor, ultricies quis, ultrices ac, convallis sed, neque. Aliquam pellentesque, augue sed pretium sodales, massa diam auctor metus, sed feugiat nunc quam ac justo. Quisque mattis, nisi at venenatis scelerisque, lectus tortor rutrum quam, at venenatis orci dui rhoncus massa. Nullam imperdiet, eros non auctor ornare, nisi lacus dictum mauris, ut pretium tellus mauris id nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut luctus, velit vel tristique faucibus, libero quam rutrum nibh, eget scelerisque urna odio vel sem. Mauris in enim.
</p>
<p>
Praesent sagittis, felis pharetra convallis adipiscing, est urna laoreet mi, ut rutrum libero tortor vel tellus. Vivamus blandit venenatis augue. Curabitur ut neque. Nam tempus, libero vel aliquet ullamcorper, dolor diam commodo est, non dictum lacus justo faucibus dolor. Donec feugiat felis ac urna egestas molestie. Nam massa. Nam urna. Donec dolor sapien, porttitor sit amet, commodo non, adipiscing sit amet, ipsum. Aliquam erat volutpat. Maecenas consequat, urna a fringilla dictum, eros nunc rutrum nisi, a euismod lacus eros nec turpis. Maecenas magna odio, molestie eu, feugiat et, interdum a, tellus. Mauris vehicula. Maecenas ac quam vel sem ultricies pretium.
</p>
</aside>
<article>
<h1>Le Premier Essai</h1>
<section class="article">
<h1>Introduction</h1>
<p>
Quisque laoreet libero ac mi pellentesque aliquet. Phasellus at est. In consectetur urna vel leo. Nulla est arcu, posuere quis, tempor vel, rutrum vel, neque. Quisque non enim eu ipsum tincidunt iaculis. Sed vehicula consequat felis. Nulla scelerisque. Curabitur sem erat, cursus nec, eleifend et, accumsan in, ipsum. Suspendisse mauris urna, aliquet id, facilisis lacinia, vehicula vitae, est. Curabitur ac ante nec felis hendrerit scelerisque. Morbi felis neque, venenatis mollis, dignissim ut, faucibus sed, ipsum. Nullam bibendum enim vel nulla eleifend elementum. Fusce rhoncus augue. Duis in est nec nulla dictum vehicula. Nulla consequat, leo in commodo venenatis, sapien eros accumsan velit, tempus tincidunt mauris sem et mi. Nulla nisl.
</p>
<canvas id="canvasID1" width="180" height="160"></canvas>
<p>
Aliquam erat volutpat. Sed sagittis leo et elit. Vivamus blandit venenatis nisl. Fusce lectus. Curabitur venenatis magna vel est. Sed enim turpis, luctus ut, convallis at, rhoncus at, purus. Fusce congue tempor tellus. Suspendisse sit amet nisl. Donec congue orci nec augue. Aliquam egestas venenatis mi. Ut elit velit, imperdiet fermentum, ullamcorper vitae, tincidunt facilisis, diam. Mauris vitae erat.
</p>
<p>
Donec ultrices lectus et nibh mattis pharetra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tristique erat vel massa. Morbi faucibus pulvinar ipsum. Cras venenatis, felis et molestie vehicula, ante dui semper sem, vitae fermentum erat urna posuere lectus. Fusce rhoncus, libero ut laoreet vulputate, sapien nibh varius urna, eu suscipit neque nulla ut justo. In rutrum augue quis lacus. Vestibulum ultricies, turpis vel auctor egestas, risus dolor semper nisl, eu rhoncus sem ante a lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed at justo a purus volutpat auctor.
</p>
<p>
Pellentesque quam. Morbi ornare. Sed sodales laoreet felis. Maecenas adipiscing fermentum lorem. Aenean sed odio et nisl cursus dignissim. Pellentesque laoreet lacus a tortor. Vivamus sem risus, venenatis non, pretium a, tincidunt et, sem. Ut tincidunt velit cursus lorem. Aliquam fringilla mauris. Nunc sit amet diam. Fusce ullamcorper. Aliquam tempor, erat volutpat convallis tristique, ligula sapien pellentesque neque, vitae vulputate velit augue sodales ante. Mauris dapibus. Donec laoreet turpis eu dolor. Nam at sem quis justo vehicula venenatis. Phasellus tincidunt vestibulum ipsum.
</p>
</section>
<section class="article">
<h1>Il y a encore du travail !</h1>
<p>
Duis pretium aliquam lectus. Mauris in eros. Morbi sit amet neque nec lacus fermentum molestie. Nulla tempus, mi eu dictum accumsan, felis neque fringilla mi, vel fermentum magna orci vel felis. Vestibulum lacinia pulvinar libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent quis ante id justo pharetra gravida. Nullam tempor gravida quam. Sed ut turpis non nunc dictum pellentesque. Aliquam vel metus. Ut gravida, justo a elementum iaculis, magna orci vulputate libero, at accumsan quam diam eget leo. Morbi dictum metus sed quam. Morbi consequat porta magna. Aenean viverra orci ac velit.
</p>
<p>
Sed sed erat vitae tortor lobortis hendrerit. Donec a diam quis neque dignissim feugiat. Vivamus eu eros. Maecenas vulputate accumsan leo. Proin et elit. Fusce est. Vestibulum consectetur dui sed dolor. Curabitur ante tortor, ultricies quis, ultrices ac, convallis sed, neque. Aliquam pellentesque, augue sed pretium sodales, massa diam auctor metus, sed feugiat nunc quam ac justo. Quisque mattis, nisi at venenatis scelerisque, lectus tortor rutrum quam, at venenatis orci dui rhoncus massa. Nullam imperdiet, eros non auctor ornare, nisi lacus dictum mauris, ut pretium tellus mauris id nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut luctus, velit vel tristique faucibus, libero quam rutrum nibh, eget scelerisque urna odio vel sem. Mauris in enim.
</p>
<p>
Praesent sagittis, felis pharetra convallis adipiscing, est urna laoreet mi, ut rutrum libero tortor vel tellus. Vivamus blandit venenatis augue. Curabitur ut neque. Nam tempus, libero vel aliquet ullamcorper, dolor diam commodo est, non dictum lacus justo faucibus dolor. Donec feugiat felis ac urna egestas molestie. Nam massa. Nam urna. Donec dolor sapien, porttitor sit amet, commodo non, adipiscing sit amet, ipsum. Aliquam erat volutpat. Maecenas consequat, urna a fringilla dictum, eros nunc rutrum nisi, a euismod lacus eros nec turpis. Maecenas magna odio, molestie eu, feugiat et, interdum a, tellus. Mauris vehicula. Maecenas ac quam vel sem ultricies pretium.
</p>
<p>
Suspendisse et nibh at sem scelerisque malesuada. Morbi nec turpis. Fusce ac ligula in risus ornare imperdiet. In hac habitasse platea dictumst. Integer lacinia eleifend dolor. Quisque sit amet mi vel lacus pulvinar condimentum. Duis tempor dignissim augue. Aenean vitae metus id nisl venenatis varius. Nulla sodales interdum nibh. Phasellus aliquam lorem vitae libero. In non nunc id arcu pellentesque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas nec lorem sed mauris adipiscing eleifend. Morbi vitae felis. Curabitur egestas convallis elit. Suspendisse scelerisque aliquam leo. Maecenas mi.
</p>
</section>
</article>
<footer>
<p>Copyleft Daniel Hagnoul</p>
</footer>
</section>
</body>
</html> |
