-
Notifications
You must be signed in to change notification settings - Fork 11
/
tinytypo.html
executable file
·854 lines (699 loc) · 49.8 KB
/
tinytypo.html
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
<!doctype html>
<html dir="ltr" lang="fr">
<head>
<meta charset="utf-8">
<title>Tiny Typo</title>
<meta name="description" content="Base CSS pour la typo web">
<meta name="author" content="romy.tetue.net">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/tinytypo.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!-- Styles for demo only -->
<style>
body { text-align: center; }
.page { width: 40em; max-width: 768px; margin: 1em auto; text-align: left; }
@media ( max-width: 768px) { .page { width: 80%; } }
@media ( max-width: 480px) { .page { width: auto; margin: 1em 10px; } }
.left { float: left; }
.right { float: right; }
.center { margin-left: auto; margin-right: auto; }
.clear { clear: both; }
.half { float: left; width: 45%; margin-right: 5%; }
.third { float: left; width: 30%; margin-right: 3%; }
@media ( max-width: 768px) { .half, .third { float: none; width: 100%; margin-right: 0; } }
</style>
</head>
<body>
<div class="page">
<header role="banner">
<h1>Tiny Typo</h1>
</header>
<main role="main">
<div class="lead">
<p>Cette page présente un échantillon des éléments HTML, pour tester les enrichissements typographiques possibles d'un document web.</p>
</div>
<nav role="navigation" id="nav">
<ul class="list-inline"><!--
--><li><a href="http://tinytypo.tetue.net">Accueil</a></li><!--
--><li><a href="#typo">Typo</a></li><!--
--><li><a href="#links">Liens</a></li><!--
--><li><a href="#heading">Titres</a></li><!--
--><li><a href="#lists">Listes</a></li><!--
--><li><a href="#tables">Tableaux</a></li><!--
--><li><a href="#quotes">Citations</a></li><!--
--><li><a href="#boxes">Encadrés</a></li><!--
--><li><a href="#medias">Medias</a></li>
</ul>
</nav>
<section id="typo">
<h2>Paragraphes</h2>
<p>Tout paragraphe est marqué par l'élément HTML <code><p></code>. L'idée principale doit être exprimée clairement au début du paragraphe. Les autres phrases servent à expliquer et à illustrer le message qu'on veut transmettre. Bref, un paragraphe pour chaque idée et une idée par paragraphe.
<br>Ici, retour à la ligne, avec l'élément <code><br></code>. Espace insécable.</p>
<p>Deuxième paragraphe. Selon la norme typographique adoptée, la première ligne d'un paragraphe peut être en retrait (alinéa rentrant). Sur un document électronique comportant de nombreux paragraphes courts, on évite parfois ce retrait pour le remplacer par une ligne vierge, détachant mieux les paragraphes et les prêtant ainsi mieux à la lecture rapide.</p>
<hr>
<p>Troisième paragraphe, précédé d’une ligne horizontale de séparation <code><hr></code>. La lecture sur écran est fastidieuse et provoque rapidement de la fatigue oculaire. Il est donc recommandé d'aérer le texte : faire des paragraphes courts et sauter une ligne entre chaque.</p>
<h2 id="semantics">Marquages sémantiques</h2>
<!-- Cf. : http://www.la-grange.net/w3c/html4.01/struct/text.html#h-9.2.1 -->
<dl>
<dt><code><em></code> et <code><strong></code></dt>
<!-- Cf. : https://developer.mozilla.org/fr/docs/Web/HTML/Element/em -->
<dd>L'élément d'emphase <code><em></code> sert à <em>insister</em> sur un texte. L'élément <code><strong></code> sert à donner plus d'<strong>importance</strong> à un texte. Exemple : l'italique est moins <em>lisible</em> sur écran, il convient d'en user <strong>avec parcimonie</strong>.</dd>
<dt><code><i></code></dt>
<dd>L'élément <code><i></code> sert à différencier des mots du texte principal, par exemple des termes techniques, ou des mots dans une langue étrangère, comme les locutions latines non francisées <i lang="la">a priori</i> ou <i lang="la">modus vivendi</i>.</dd>
<dt><code><b></code></dt>
<dd>L'élément <code><b></code> sert à distinguer un texte, sans lui apporter une importance particulière. Habituellement utilisé pour les <b>mots-clés</b> dans les résumés, les <b>noms de produits</b> dans des tests, ou encore pour la première phrase d'un paragraphe.</dd>
<dt><code><abbr></code> <abbr title="Support incomplet" class="quiet">⚠</abbr> <del>et <code><acronym></code> <abbr title="N'existe plus en HTML5" class="quiet">⚠</abbr></del></dt>
<dd>L'élément <code><abbr></code> représente une abréviation et permet d'en fournir une description complète. Exemple : le <abbr title="Cascading Style Sheets" lang="en">CSS</abbr> sert à habiller la structure <abbr title="HyperText Markup Language" lang="en">HTML</abbr>. L'élément <code><acronym></code> représentait une abréviation se prononçant comme un mot normal : y'a-t-il un <acronym title="objet volant non identifié">ovni</acronym> à l'<acronym title="Ouvroir de Littérature Potentielle">OuLiPo</acronym> ? Ce dernier ne doit plus être utilisé mais remplacé par <code><abbr></code>.</dd>
<dt><code><dfn></code></dt>
<dd>L'élément <code><dfn></code> marque le terme que définit le texte environnant. Par exemple, le <dfn>courriel</dfn> est le système de courrier électronique qui nous permet d'envoyer des messages à travers le monde.</dd>
<dt><code><del></code> et <code><ins></code></dt>
<!-- Cf. : http://www.la-grange.net/w3c/html4.01/struct/text.html#h-9.4 -->
<dd>Les éléments <code><del></code> et <code><ins></code> sont utilisés pour marquer les parties d'un document qui ont été <del>supprimées</del> ou <ins>insérées</ins>. Par exemple, un shérif peut employer <del>3</del><ins>5</ins> suppléants.</dd>
<dt><code><u></code> <abbr title="Déprécié en HTML 4 et XHTML, ré-introduit en HTML5" class="quiet">⚠</abbr></dt>
<!-- Cf.: https://developer.mozilla.org/fr/docs/Web/HTML/Element/u -->
<dd>L'élément <code><u></code> permet d'afficher un <u>texte souligné</u>. Il s'utilise de façon exceptionnelle, pour signaler un texte mal <u>ortografié</u> ou un nom propre chinois, par exemple : <u lang="zh">汉代</u>. Le soulignement est réservé aux <a href="#links">hyperliens</a>.</dd>
<dt><code><mark></code></dt>
<dd>L'élément <code><mark></code> sert à <mark>surligner</mark> certains mots par rapport au contexte, comme les résultats d'une recherche dans le document ou pour attirer l'attention sur certains mots d'une citation. Pour le <span class="mark">même effet visuel</span>, non sémantique, utilisez <code>.mark</code>.</dd>
<dt><code><small></code> <del>et <code><big></code> <abbr title="N'existe plus en HTML5" class="quiet">⚠</abbr></del></dt>
<!-- Cf.: https://developer.mozilla.org/fr/docs/Web/HTML/Element/small -->
<dd>L'élément <code><small></code> représente des annotations et des petits caractères comme les <small>mentions légales</small> ou liées au <small>copyright</small>. Comme l'élément <code><big></code> ne se limite qu'à de la présentation formelle, il ne doit <big>plus</big> être utilisé, mais remplacé par le sélecteur CSS <code>.big</code>.</dd>
<dt><code><sub></code> et <code><sup></code></dt>
<!-- Cf.: http://www.la-grange.net/w3c/html4.01/struct/text.html#h-9.2.3 -->
<dd>Les éléments <code><sub></code> et <code><sup></code> marquent les indices et les exposants, par exemple : <abbr>H<sub>2</sub>O</abbr> et E=mc<sup>2</sup>. Ne pas confondre <abbr title="numéro">n<sup>o</sup></abbr> et <abbr title="degré Celsius">°C</abbr>.</dd>
<dt><code><time></code></dt>
<dd>L'élément <code><time></code> représente une heure ou une date précise du calendrier grégorien et pour les rendre interprétables par un ordinateur. Née le <time datetime="1815-12-10">10 décembre 1815</time> et morte le <time datetime="1852-11-27">27 novembre 1852</time> à Londres, Ada Lovelace est considérée comme <q>le premier programmeur du monde</q>.</dd>
</dl>
<p>Astuce : pour obtenir le même effet visuel, mais sans incidence sémantique, utilisez les sélecteurs CSS homonymes : <code>.i</code>, <code>.b</code>, <code>.del</code>, <code>.ins</code>, <code>.small</code>, etc.
<h3>Autres enrichissements typographiques</h3>
<p>Les enrichissements typographiques suivants ne sont pas disponibles nativement en HTML et sont donc proposés en CSS par Tiny Typo :</p>
<ul>
<li><code>.quiet</code> pour du texte discret : <span class="quiet">Majuscule et CAPITALES</span></li>
<li><code>.lw</code> pour passer en minuscules : <span class="lw">Majuscule et CAPITALES</span></li>
<li><code>.up</code> pour passer en capitales : <span class="up">Majuscule et CAPITALES</span></li>
<li><code>.sc</code> pour passer en petites capitales : <span class="sc">Majuscule et CAPITALES</span></li>
<li><code>.caps</code> pour des capitales avec majuscules : <span class="caps">Majuscule et CAPITALES</span></li>
<!-- Cf.: https://orthogaffe.wordpress.com/2010/03/01/petites-capitales/ -->
</ul>
</section>
<section id="links">
<h2>Ancres et liens</h2>
<!-- Cf.: https://developer.mozilla.org/fr/docs/Web/HTML/Element/a -->
<!-- Cf.: http://letrainde13h37.fr/43/signaletique-hyperliens/ -->
<p>L'hyperlien <code><a></code> est le fondement de la navigation sur le Web. Ceux-ci doivent être visuellement distingués du reste du contenu. Les hyperliens de même nature ont des couleurs, des formes et des comportements identiques sur toutes les pages. Tiny Typo les signale ainsi :</p>
<ul class="list-none">
<li><a href="">Lien interne</a></li>
<li><code>.external</code> : <a href="https://justinjackson.ca/words_fr.html" class="external">Lien externe</a></li>
<li><code>.mailto</code> : <a href="mailto:[email protected]" title="Écrire à [email protected]" class="mailto">Ecrivez-nous !</a></li>
<li><code>.tel</code> : <a href="tel:+33123456789" class="tel">+33 1 23 45 67 89</a></li>
<li><code>.download</code> : <a href="" download class="download">Document à télécharger <small class="ext">(<abbr title="Document PDF">PDF</abbr> – 215 Ko)</small></a></li>
</ul>
<p>Lorsqu'elle diffère de la page d'origine, la langue de la cible est renseignée dans l'attribut HTML <code>hreflang=""</code> qui s'affiche ainsi :</p>
<ul class="list-none">
<li><a href="" hreflang="en">Lien interne</a></li>
<li><code>.external</code> : <a href="https://justinjackson.ca/words.html" class="external" hreflang="en">Lien externe</a></li>
<li><code>.mailto</code> : <a href="mailto:[email protected]" title="Écrire à [email protected]" class="mailto" hreflang="en">Ecrivez-nous !</a></li>
<li><code>.tel</code> : <a href="tel:+442079460886" class="tel" hreflang="en">+44 20 7946 0886</a></li>
<li><code>.download</code> : <a href="" download class="download" hreflang="en">Document à télécharger <small class="ext">(<abbr title="Document PDF">PDF</abbr> – 215 Ko)</small></a></li>
</ul>
<p>Les <a href="">liens internes</a> et les <a href="https://checklists.opquast.com/oqs-v3/criteria/les-hyperliens-internes-et-externes-sont-differencies" title="Bonne pratique Opquast N°188" class="external">liens externes</a> sont différenciés. Lorsqu'elle différe de la page d'origine, mieux vaut spécifier la langue de destination : voici la liste des <a href="https://www.w3.org/2005/11/Translations/Lists/ListLang-fr.html" class="external">traductions françaises du <abbr title="World Wide Web Consortium">W3C</abbr></a> et la dernière <a href="https://www.w3.org/TR/html51/" hreflang="en" class="external">recommandation HTML 5.1</a>. Pour en savoir plus, lire cet article sur la <a href="http://letrainde13h37.fr/43/signaletique-hyperliens/" class="external">signalétique des hyperliens</a>.</p>
<p>Ancre de retour en haut de page : <a href="#top">#top</a></p>
</section>
<section id="heading">
<h1>Titre de niveau h1</h1>
<p>Chaque page web est identifiée par un titre, unique dans le site. C'est le titre de premier niveau du document. Il est balisé par l'élément HTML <code><h1></code>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h2>Titre de niveau h2</h2>
<p>Le titre ci-dessus est de niveau 2, balise <code><h2></code>. Il s'utilise après un élément <code><h1></code>, pour marquer un titre de niveau inférieur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h3>Titre de niveau h3</h3>
<p>Le titre ci-dessus est de niveau 3, balise <code><h3></code>. Il s'utilise après un élément <code><h2></code>, pour marquer un titre de niveau inférieur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h4>Titre de niveau h4</h4>
<p>Le titre ci-dessus est de niveau 4, balise <code><h4></code>. Il s'utilise après un élément <code><h3></code>, pour marquer un titre de niveau inférieur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h5>Titre de niveau h5</h5>
<p>Le titre ci-dessus est de niveau 5, balise <code><h5></code>. Il s'utilise après un élément <code><h4></code>, pour marquer un titre de niveau inférieur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h6>Titre de niveau h6</h6>
<p>Le titre ci-dessus est de niveau 6, balise <code><h6></code>. Il s'utilise après un élément <code><h5></code>, pour marquer un titre de niveau inférieur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="lead">
<p>Le chapeau, ici distingué par le sélecteur CSS <code>.lead</code>, est un texte généralement court, précédant le corps d'un article, et dont le but est d'en encourager la lecture, en résumant le propos qui va être développé.</p>
</div>
<h1>Titre 1 avec <a href="">lien</a> <small>et small</small></h1>
<h2>Titre 2 avec <a href="">lien</a> <small>et small</small></h2>
<h3>Titre 3 avec <a href="">lien</a> <small>et small</small></h3>
<h4>Titre 4 avec <a href="">lien</a> <small>et small</small></h4>
<h5>Titre 5 avec <a href="">lien</a> <small>et small</small></h5>
<h6>Titre 6 avec <a href="">lien</a> <small>et small</small></h6>
<p>Ci-dessus, titres avec <code><a></code> et <code><small></code>.</p>
<h2 id="fontsize">Tailles de texte</h2>
<p>La taille du texte est définie en une fois pour l'ensemble du document. Elle s'exprime en unités relatives (<code>em</code> et <code>%</code>) afin de permettre aux lecteur/trices de l'agrandir facilement si besoin.</p>
<p class="big">N'utilisez jamais les titres <code>h…</code> pour afficher un texte plus gros !</p>
<div class="half">
<ul class="list-none">
<li class="p"><span class="biggest">Texte plus gros</span><br>avec <code>.biggest</code></li>
<li class="p"><span class="bigger">Texte plus gros</span><br>avec <code>.bigger</code></li>
<li class="p"><span class="big">Texte plus gros</span><br>avec <code>.big</code></li>
<li class="p">Texte de base</li>
<li class="p"><span class="small">Texte plus petit</span><br>avec <code>.small</code></li>
<li><span class="smaller">Texte plus petit</span><br>avec <code>.smaller</code></li>
</ul>
</div>
<div class="half">
<p>Il est possible — par exemple lorsque l'habillage graphique ne coïncide pas parfaitement avec la réalité du document HTML — de styler d'autres éléments HTML comme des titres, avec <code>.h1</code>, <code>.h2</code>, <code>.h3</code>, etc. :</p>
<strong class="h1">Comme h1</strong>
<strong class="h2">Comme h2</strong>
<strong class="h3">Comme h3</strong>
<strong class="h4">Comme h4</strong>
<strong class="h5">Comme h5</strong>
<strong class="h6">Comme h6</strong>
</div>
</section>
<section class="clear" id="lists">
<h2>Listes</h2>
<div class="half">
<p>Liste, avec <code><ul></code> :</p>
<ul>
<li>Rouge tomate, chaud et dynamisant</li>
<li>Vert sapin, naturel et équilibrant</li>
<li>Bleu océan, profond et reposant</li>
<li>Jaune soleil, vif et réjouissant</li>
</ul>
</div>
<div class="half">
<p>Énumération, avec <code><ol></code> :</p>
<ol>
<li>Coupez les tomates et la mozzarella en fines tranches ;</li>
<li>Intercalez les tranches ;</li>
<li>Arrosez d'un filet d'huile d'olive ;</li>
<li>Parsemez de basilic fraîchement haché.</li>
</ol>
</div>
<p>Liste de définitions, avec <code><dl></code>, <code><dd></code>, <code><dt></code> :</p>
<dl>
<dt>Internet</dt>
<dd>Réseau informatique international qui connecte les ordinateurs entre eux, tout comme le réseau routier relie les villes entre elles. Ce réseau propose trois types de services fondamentaux : le courriel, le Web et l'échange de fichiers.</dd>
<dt>Web</dt>
<dd>Le <i lang="en">World Wide Web</i> est le système hypertexte permettant de visiter des pages sur le réseau Internet.</dd>
</dl>
<h3>Listes hétérogènes</h3>
<div class="half">
<ul>
<li>Rouge</li>
<li>Orange
<ul>
<li>Dans la nature
<ul>
<li>Courges
<ul>
<li>Citrouille</li>
<li>Potiron</li>
</ul>
</li>
<li>Carotte</li>
<li>Abricot</li>
</ul>
</li>
<li>Objets frabriqués
<ul>
<li>Mimolette</li>
<li>Feu clignotant</li>
<li>Robe des moines boudhistes</li>
</ul>
</li>
</ul>
</li>
<li>Jaune</li>
<li>Vert</li>
<li>Bleu</li>
<li>Indigo</li>
<li>Violet</li>
</ul>
</div>
<div class="half">
<ol>
<li>Premier item</li>
<li>Deuxième item</li>
<li>Troisième item</li>
<li>Quatrième item</li>
<li>Cinquième item
<ol>
<li>Premier</li>
<li>Deuxième
<ol>
<li>Premier</li>
<li>Deuxième
<ol>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
</ol>
</li>
<li>Troisième</li>
</ol>
</li>
<li>Troisième</li>
</ol>
</li>
<li>Sixième item</li>
<li>Septième item</li>
</ol>
</div>
<ul class="clear">
<li>Exemple de liste ordinaire</li>
<li>les éléments d’une liste dans une phrase commencent par une minuscule et se terminent par une virgule, sauf le dernier élément qui, s’il termine la phrase, prend un point
<ol>
<li>Exemple d'énumération</li>
<li>Avec du texte long, pouvant s'écouler sur plusieurs lignes. Les éléments d’une liste formée de plusieurs phrases se comportent comme des alinéas (majuscule en début, point à la fin).
<ul>
<li>Troisième niveau
<ul>
<li>Chat
<ol>
<li>Felix</li>
<li>Kiki la Doucette</li>
</ol>
</li>
<li>Chien</li>
<li>Perruche</li>
</ul>
</li>
<li>Troisième niveau</li>
<li>Troisième niveau</li>
</ul>
</li>
</ol>
</li>
</ul>
<dl>
<dt>Internet</dt>
<dd>
<p>Réseau informatique international qui connecte les ordinateurs entre eux, tout comme le réseau routier relie les villes entre elles. Ce réseau propose trois types de services fondamentaux :</p>
<ul>
<li>le courriel,</li>
<li>le Web</li>
<li>et l'échange de fichiers.</li>
</ul>
</dd>
<dt>Web</dt>
<dd>Le <i lang="en">World Wide Web</i> est le système hypertexte permettant de visiter des pages sur le réseau Internet.</dd>
</dl>
<div style="display: none;">
<h3>Effets de style</h3>
<p>Avec Tiny Typo, il est possible de varier le style des listes avec les sélecteurs CSS <code>.list-none</code>, <code>.list-square</code>, <code>.list-disc</code>, <code>.list-circle</code> ou <code>.list-decimal</code> :</p>
<div class="half">
<ul class="list-none">
<li>Rouge tomate, chaud et dynamisant</li>
<li>Vert sapin, naturel et équilibrant</li>
<li>Bleu océan, profond et reposant</li>
<li>Jaune soleil, vif et réjouissant</li>
</ul>
<ul class="list-square">
<li>Rouge tomate, chaud et dynamisant</li>
<li>Vert sapin, naturel et équilibrant</li>
<li>Bleu océan, profond et reposant</li>
<li>Jaune soleil, vif et réjouissant</li>
</ul>
<ul class="list-disc">
<li>Rouge tomate, chaud et dynamisant</li>
<li>Vert sapin, naturel et équilibrant</li>
<li>Bleu océan, profond et reposant</li>
<li>Jaune soleil, vif et réjouissant</li>
</ul>
<ul class="list-circle">
<li>Rouge tomate, chaud et dynamisant</li>
<li>Vert sapin, naturel et équilibrant</li>
<li>Bleu océan, profond et reposant</li>
<li>Jaune soleil, vif et réjouissant</li>
</ul>
</div>
<div class="half">
<ul class="list-decimal">
<li>Rouge tomate, chaud et dynamisant</li>
<li>Vert sapin, naturel et équilibrant</li>
<li>Bleu océan, profond et reposant</li>
<li>Jaune soleil, vif et réjouissant</li>
</ul>
<ul class="list-none">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit
<ul class="list-circle">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit
<ol>
<li>Rouge tomate, chaud et dynamisant</li>
<li>Vert sapin, naturel et équilibrant</li>
<li>Bleu océan, profond et reposant</li>
<li>Jaune soleil, vif et réjouissant</li>
</ol>
</li>
<li>Nam egestas, neque ac semper dictum</li>
<li>Jaune soleil, vif et réjouissant</li>
</ul>
</li>
<li>Nam egestas, neque ac semper dictum</li>
<li>Leo ante hendrerit ante</li>
</ul>
</div>
<h3 class="clear">Listes horizontales</h3>
<p>Il est possible d'afficher une liste à l'horizontale avec <code>.list-inline</code> :</p>
<ul class="list-inline">
<li>Rouge tomate, chaud et dynamisant</li>
<li>Vert sapin, naturel et équilibrant</li>
<li>Bleu océan, profond et reposant</li>
<li>Jaune soleil, vif et réjouissant</li>
</ul>
<p>Chaque liste horizontale peut être complétée avec <code>.list-inline-sep</code>, <code>.list-inline-dash</code> ou <code>.list-inline-comma</code> :</p>
<ul class="list-inline list-inline-sep">
<li>Rouge tomate, chaud et dynamisant</li>
<li>Vert sapin, naturel et équilibrant</li>
<li>Bleu océan, profond et reposant</li>
<li>Jaune soleil, vif et réjouissant</li>
</ul>
<ul class="list-inline list-inline-dash">
<li>Rouge tomate, chaud et dynamisant</li>
<li>Vert sapin, naturel et équilibrant</li>
<li>Bleu océan, profond et reposant</li>
<li>Jaune soleil, vif et réjouissant</li>
</ul>
<ul class="list-inline list-inline-comma">
<li>Rouge tomate, chaud et dynamisant</li>
<li>Vert sapin, naturel et équilibrant</li>
<li>Bleu océan, profond et reposant</li>
<li>Jaune soleil, vif et réjouissant</li>
</ul>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>
Consectetuer adipiscing elit
<ul class="list-inline list-inline-comma">
<li><a href="">Rouge tomate, chaud et dynamisant</a></li>
<li><a href="">Vert sapin, naturel et équilibrant</a></li>
<li><a href="">Bleu océan, profond et reposant</a></li>
<li><a href="">Jaune soleil, vif et réjouissant</a></li>
</ul>
</li>
<li>Nam egestas, neque ac semper dictum</li>
<li>Leo ante hendrerit ante</li>
</ul>
<nav>
<ul class="list-inline list-inline-sep">
<li><a href="">Rouge tomate, chaud et dynamisant</a></li>
<li><a href="">Vert sapin, naturel et équilibrant</a></li>
<li><a href="">Bleu océan, profond et reposant</a></li>
<li><a href="">Jaune soleil, vif et réjouissant</a></li>
</ul>
</nav>
</div>
</section>
<section id="tables">
<h2>Tableaux de données</h2>
<!-- Cf. : https://developer.mozilla.org/fr/docs/Web/HTML/Element/table -->
<p>Autrefois employé pour mettre en page, l'élément HTML <code><table></code> n'est pas stylé par défaut. Utilisez systématiquement le sélecteur CSS <code>.table</code> et les éléments associés — <code><tbody></code>, <code><thead></code>, <code><tr></code>, <code><td></code>, <code><th></code> — pour baliser les tableaux de données. Indiquez un titre via l'élément <code><caption></code>.</p>
<table class="table">
<caption>Titre du tableau</caption>
<thead>
<tr>
<th scope="col">entête</th>
<th scope="col">R</th>
<th scope="col">V</th>
<th scope="col">B</th>
</tr>
</thead>
<tfoot>
<tr>
<td>footer</td>
<td>footer</td>
<td>footer</td>
<td>footer</td>
</tr>
</tfoot>
<tbody>
<tr class="odd">
<td>Rouge</td>
<td>255</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="even">
<td>Vert</td>
<td>0</td>
<td>255</td>
<td>0</td>
</tr>
<tr class="odd">
<td>Bleu</td>
<td>0</td>
<td>0</td>
<td>255</td>
</tr>
</tbody>
</table>
<p>Un tableau présente des données, souvent chiffrées. Les tableaux de données doivent être titrés et les cellules reliées à leurs en-têtes.</p>
<div class="scroll">
<table class="table">
<caption>Tableau à cellules fusionnées</caption>
<thead>
<tr>
<th scope="col"><abbr title="numéro">#</abbr></th>
<th scope="col">Nom</th>
<th scope="col" class="text-right">Valeur</th>
<th scope="col" class="text-right"><abbr title="Évolution">Évol.</abbr></th>
<th scope="col" class="text-right"><abbr title="Pourcentage">%</abbr></th>
<th scope="col">URL</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td rowspan="2">1</td>
<td>Lorem ipsum dolor sit amet</td>
<td class="text-right">1.38</td>
<td class="text-right">-0.01</td>
<td class="text-right">-0.36 %</td>
<td><a href="">URL</a></td>
</tr>
<tr class="even">
<td>Consectetuer adipiscing elit</td>
<td class="text-right">1.15</td>
<td class="text-right">+0.02</td>
<td class="text-right">1.32 %</td>
<td><a href="">URL</a></td>
</tr>
<tr class="odd">
<td>2</td>
<td colspan="2">Nam egestas, neque ac semper dictum</td>
<td class="text-right">-0.04</td>
<td class="text-right">-0.99 %</td>
<td><a href="" class="external">URL</a></td>
</tr>
<tr class="even">
<td>3</td>
<td>Leo ante hendrerit ante</td>
<td class="text-right">4.00</td>
<td class="text-right">+0.06</td>
<td class="text-right">2.04 %</td>
<td><a href="">URL</a></td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="quotes">
<h2>Citations, code et poésie</h2>
<h3>Citations</h3>
<!-- Cf.: http://romy.tetue.net/361 -->
<p>Les citations s'emploient pour signaler un changement de locuteur/trice dans le texte. Voici une citation ordinaire, avec la balise HTML <code><blockquote></code>, où la source est ici distinguée par <code>.src</code> :</p>
<!-- Cf.: http://romy.tetue.net/1009 -->
<blockquote>
<p>Mettre le Web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales.
<br><small class="src">Tim Berners-Lee, inventeur du Web.</small></p>
</blockquote>
<p>Pour les citations au fil du texte, on utilise la balise HTML <code><q></code> (ci-après avec changement de langue) : <q lang="la" cite="http://fr.wikipedia.org/wiki/Mens_sana_in_corpore_sano">Mens sana in corpore sano</q>, dixième <cite>Satire</cite> de Juvénal. <q lang="ja">頑張ってください</q> s'exclama-t-il alors.<p>
<blockquote class="text-center big" lang="en" cite="http://www.evene.fr/citations/auteur.php?ida=760">
<p>Web Design is 95% Typography.</p>
<footer class="src"><a href="https://ia.net/topics/the-web-is-all-about-typography-period/" class="external">Oliver Reichenstein – iA</a>.</footer>
</blockquote>
<p>Les citations peuvent être imbriquées. Par exemple, le procès-verbal rapporte : <q>La professeur clôtura le dernier atelier en lançant : <q>Je vous dis à tous et toutes : <q lang="en">happy holidays!</q> et <q lang="ar" dir="rtl">أعيادا سعيدة</q> et j'espère vous retrouver en pleine forme au retour</q>.</q><p>
<p>N'oublions la balise HTML <code><cite></code> <abbr title="À réserver aux titres d'ouvrages" class="quiet">⚠</abbr>, qui signale un titre d'œuvre, par exemple dans une référence bibliographique : <span class="caps">Douglas</span> Adams, <cite>Le Guide du routard galactique</cite>, Paris, Denoël, 1982, 224 pages.</p>
<h3 id="code">Code</h3>
<!-- Cf.: http://romy.tetue.net/543 -->
<p>Plusieurs éléments HTML servent à citer des bouts de code informatique :</p>
<ul class="list-none">
<li><code><code></code> : <code>extrait de code</code></li>
<li><code><var></code> : <var>variable</var></li>
<li><code><samp></code> : <samp>extrait de script</samp></li>
<li><code><kbd></code> : <kbd>raccourci-clavier</kbd></li>
<li><code><tt></code> <abbr title="À éviter car obsolète" class="quiet">⚠</abbr> : <tt>teletype</tt></li>
</ul>
<p>L'élément <code><pre></code> matérialise un bloc de texte pré-formaté, par exemple de l'<abbr title="American Standard Code for Information Interchange" lang="en">ASCII</abbr> art :</p>
<pre> ____ ____ ____
||p |||r |||e ||
||__|||__|||__||
|/__\|/__\|/__\|
</pre>
<p>Autre exemple, avec du code informatique :</p>
<pre><code><!doctype html>
<html lang="fr">
<head>
<title>Titre de la page</title>
<link rel="stylesheet" href="css/tinytypo.css">
</head>
<body>
<h1>Ma première page web<h1>
<!-- Le reste du contenu -->
...
</body>
</html></code></pre>
<h3>Contact</h3>
<!-- Cf.: https://developer.mozilla.org/fr/docs/Web/HTML/Element/address -->
<p>Le moyen de contacter les auteur·e·s du document se marque avec <code><address></code> (et non pas pour toute adresse, par exemple postale), typiquement utilisé dans le <code><footer></code> :</p>
<address>
<a href="http://tinytypo.tetue.net">tinytypo.tetue.net</a>
<br>Contactez-nous via <a href="https://github.com/tetue/tinytypo" class="external">Github</a>
</address>
</section>
<section id="boxes">
<h2>Alignements et encadrés</h2>
<p>Avec Tiny Typo, il est possible d'aligner les blocs et de créer des encadrés, par l'ajout de sélecteurs CSS :</p>
<div class="half">
<ul class="list-none">
<li><code>.text-left</code> : ferre le texte à gauche</li>
<li><code>.text-right</code> : ferre le texte à droite</li>
<li><code>.text-center</code> : centre le texte</li>
<li><code>.text-justify</code> : justifie le texte</li>
<li><code>.box</code> : encadré</li>
</ul>
</div>
<div class="half">
<ul class="list-none">
<li><code>.left</code> : positionne le bloc à gauche</li>
<li><code>.right</code> : positionne le bloc à droite</li>
<li><code>.center</code> : centre le bloc</li>
<li><code>.p</code> : marge basse, calée sur la grille, comme les paragraphes</li>
</ul>
</div>
<h3 class="clear">Alignements</h3>
<div class="text-justify">
<p>Texte justifié avec <code>.text-justify</code>. Il est possible de justifier le texte, c'est-à-dire que toutes les lignes d'un paragraphe aient la même longueur. Est-ce intéressant de le faire ? D'un point de vue de lisibilité, des études montrent qu'un texte en drapeau est plus accessible à l'œil : l'irrégularité des fins de lignes sert de repère visuel et fatigue moins le lecteur. Pourtant, un alignement justifié donne un résultat esthétique plus agréable et une impression de plus grande régularité.</p>
</div>
<div class="text-left">
<p>Texte ferré à gauche avec <code>.text-left</code>. Il ne faut pas confondre le terme de justification avec l'expression « justifié » à gauche ou à droite souvent employée à tort à la place de « ferré » à gauche ou à droite. Les textes sont par défaut ferrés à gauche et sont par nature, selon la taille de l'écran, sa définition et la taille de la fenêtre dans laquelle le texte apparaît, d'une justification plus ou moins longue.</p>
</div>
<div class="text-center">
<p>Texte centré avec <code>.text-center</code>. Un texte peut être centré sur un axe vertical central. Lorsque vous centrez un texte, pensez à annuler le retrait de première ligne pour le paragraphe concerné, si vous l’utilisez. Pourquoi ? Parce que le texte ne se centre pas entre les marges de la page, mais entre le retrait de première ligne (à gauche) et la marge de droite. Hé oui, c’est la vie.</p>
</div>
<div class="text-right">
<p>Texte ferré à droite avec <code>.text-right</code>. Le terme de « fer » vient de la façon dont le compositeur alignait les lignes sur son composteur en typographie : les lignes étaient alignées sur le « fer » à gauche, sur la partie mobile du composteur, afin de créer un « drapeau » à droite ; elles étaient « ferrées » à droite, sur la partie fixe du composteur, afin de créer un « drapeau » à gauche.</p>
</div>
<h3>Encadrés</h3>
<!-- Cf. : https://developer.mozilla.org/fr/docs/Web/HTML/Element/aside -->
<p>Les encadrés, typiquement <code><aside></code>, sont caractérisés par le sélecteur CSS <code>.box</code>. Ils peuvent être positionnés avec <code>.left</code>, <code>.right</code> et <code>.center</code>, et ferrés avec les classes précédentes.</p>
<aside class="box">
<p>Encadré par défaut. Nulla facilisi. Integer venenatis, metus eu ultrices consectetur, lacus felis venenatis mi, quis condimentum turpis turpis nec elit. Ut vel est a lorem suscipit aliquam. Cras metus sem, sagittis sit amet <strong>important</strong> viverra quis, consectetur vel <i>italique</i> massa. Proin ante urna, aliquam eu dictum eu, eleifend ut leo. Nullam euismod lobortis nunc, non suscipit odio tristique at <a href="https://justinjackson.ca/words_fr.html" class="external">des mots</a>, encore des mots. Mauris dictum, ligula vitae accumsan interdum, leo quam sodales lectus, vel mattis leo lacus quis ante.</p>
</aside>
<p>Maecenas fringilla dignissim venenatis. Donec ut mi a odio sagittis facilisis. Fusce in risus elit. In quam turpis, elementum et elementum rutrum, dictum quis nibh. Morbi iaculis eros in purus pellentesque accumsan pellentesque sem porttitor. Aliquam erat volutpat. Donec vitae luctus neque.</p>
<aside class="box left text-right">
<p>Exemple d'encadré flottant à gauche et ferré à droite. Nulla facilisi. Integer venenatis, metus eu ultrices consectetur, lacus felis venenatis mi, quis condimentum turpis turpis nec elit. Ut vel est a lorem suscipit aliquam. Cras metus sem, sagittis sit amet <strong>important</strong> viverra quis, consectetur vel <i>italique</i> massa.</p>
</aside>
<p>Connaissez-vous l’histoire de l’inspecteur qui critique dans une classe l'importance que l’instituteur accorde à la ponctuation ? Ce dernier fait alors écrire par une élève au tableau : « L’inspecteur dit : l’instituteur est un âne ». L’inspecteur se récrie. L’instituteur fait alors corriger : « L’inspecteur, dit l’instituteur, est un âne ».</p>
<p>Duis sodales erat et odio imperdiet vitae sodales ligula dapibus. Sed commodo orci a nisi iaculis sit amet mollis ante sagittis. Praesent dapibus ligula eget massa vehicula rhoncus. Vestibulum purus odio, hendrerit nec faucibus vel, commodo eu justo. Sed rhoncus ligula vel velit consectetur pharetra. In pellentesque justo ut libero bibendum sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas viverra egestas felis, non vestibulum nibh hendrerit sit amet.</p>
<aside class="box right">
<p>Exemple d'encadré flottant à droite. Lorsque l’on trame un fond, c’est bien souvent pour faire ressortir l’information qu’il contient, or on arrive souvent à l’effet inverse, en augmentant la difficulté de lecture on décourage le lecteur. Un fond tramé ne nécessite pas de filet extérieur (encadrement).</p>
</aside>
<p>Mauris lacinia, ante id sodales pretium, eros est gravida sapien, nec auctor dolor massa a dui. Vivamus consequat suscipit elit in imperdiet. In consectetur varius tortor, vel dictum ipsum dignissim vel. Nulla faucibus suscipit ipsum non porttitor. Fusce non ante non mi adipiscing faucibus. Sed odio risus, malesuada eget placerat id, semper eget turpis. Cras ante lorem, pretium ut vestibulum nec, vehicula eget orci.</p>
<p><q>Les règles de typographie fine, que l’on nomme <i>microtypographie</i> dans le langage professionnel des métiers du livre, sont très souvent négligées sur le Web, faute de connaissance suffisante du code typographique</q> déplorent Marie-Valentine <span class="caps">Blond</span>, Olivier <span class="caps">Marcellin</span> et Melina <span class="caps">Zerbib</span>, dans <cite>Lisibilité des sites web : Des choix typographiques au design d’information</cite>, 2009, p. 279.</p>
<aside class="box center">
<p>Exemple d'encadré centré. En typographie, un <dfn>filet</dfn> est un trait de taille et de graisse variables qui accompagne les éléments de texte ou les images pour les mettre en valeur et les différencier ou pour créer des tableaux et des encadrés. Il marque aussi la fin d'un chapitre ou sert simplement d'élément décoratif dans la composition. Le filet sert aussi à composer des cadres ou des tableaux.</p>
</aside>
<p>Duis sodales erat et odio imperdiet vitae sodales ligula dapibus. Sed commodo orci a nisi iaculis sit amet mollis ante sagittis. Praesent dapibus ligula eget massa vehicula rhoncus. Vestibulum purus odio, hendrerit nec faucibus vel, commodo eu justo. Sed rhoncus ligula vel velit consectetur pharetra. In pellentesque justo ut libero bibendum sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas viverra egestas felis, non vestibulum nibh hendrerit sit amet.</p>
<aside class="box">
<h4>Exemple d'encadré avec contenu riche</h4>
<img src="http://lorempixel.com/200/150/food" alt="" width="200" height="150" class="thumb round border right">
<blockquote>
<p>Si vous utilisez des recettes de cuisine, vous avez probablement fait l'expérience de recevoir la copie d'une recette de la part d'un ami qui la partage avec vous. Et vous avez sans doute fait également l'expérience — à moins d'être un néophyte complet — de changer cette recette. Cette modification, vous la transmettez à d'autres en faisant des copies. Un programme d'ordinateur est comme une recette de cuisine.</p>
<footer class="src">Richard Stallman, 2001.</footer>
</blockquote>
<p>La recette de cuisine est l’exemple pris pour expliquer le <em>logiciel libre</em>. En réalité les recettes sont le plus souvent diffusées de façon privative, <q><abbr title="Copyright">©</abbr> tous droits réservés</q>. Qu’y comprendre ? <a href="http://romy.tetue.net/760" class="external">Les recettes de cuisine sont-elles libres ?</a></p>
</aside>
<p>Proin sit amet fringilla ipsum. Aenean pretium, nibh ac luctus tristique, odio nisi tincidunt tortor, quis dignissim sem nulla non neque. Morbi laoreet, neque nec ultrices volutpat, arcu odio pharetra tellus, sed bibendum mi dolor eget augue. Cras varius, mi ut eleifend convallis, diam leo molestie est, vitae feugiat ipsum mauris at ante. Vestibulum eu sapien metus. Pellentesque tincidunt sodales nibh eu adipiscing.</p>
</section>
<section id="medias">
<h2>Medias et albums</h2>
<!-- http://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-figcaption.html -->
<p>Les éléments <code><figure></code> et <code><figcaption></code> fonctionnent ensemble pour associer une légende à une image ou autre média. Ces illustrations peuvent être positionnées avec <code>.left</code>, <code>.right</code> et <code>.center</code>.</p>
<figure class="center">
<img src="http://pipsum.com/500x300.jpg" alt="" width="500" height="300">
<figcaption>La légende est un court texte accompagnant une photo ou un dessin et visant à lui donner un sens. Elle peut se placer avant ou après le media principal.</figcaption>
</figure>
<p>Paragraphe précédé d'une image centrée. Praesent egestas turpis ut risus lacinia eu cursus urna dapibus. Donec nibh enim, pulvinar vitae ornare ut, ultrices sit amet neque. Quisque ultrices venenatis mi, id fringilla eros malesuada a. Curabitur sagittis mollis arcu, sit amet scelerisque magna varius ac. Vivamus ullamcorper vulputate ipsum, adipiscing varius leo porttitor a. Curabitur luctus gravida nibh, sit amet auctor metus vulputate quis. Aliquam eu nulla risus. Cras in suscipit odio. Etiam ut nisl ut velit ornare pharetra a sed lacus.</p>
<figure class="left">
<img src="http://lorempixel.com/200/300/cats" alt="" width="200" height="300">
<figcaption>Titre de l'image<br><small class="quiet">© copyright</small></figcaption>
</figure>
<p>Paragraphe précédé d'une image calée à gauche. Connaissez-vous les <a href="https://webdesignledger.com/if-fonts-were-cats/" class="external" hreflang="en">Font Cats</a> ? Prenez un chat, une typo et mariez-les, vous obtenez les Chats-Typographiques, un moyen comme un autre de se souvenir de quelques fontes les plus connues grâce à la photo du chat qui lui correspond.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel lectus eget tortor cursus dapibus sit amet imperdiet lacus. Nullam purus ipsum, aliquet eget imperdiet scelerisque, interdum in felis. Maecenas dolor eros, iaculis et pretium ac, eleifend sit amet lacus. Etiam a lacus eget dui aliquet tempor. Duis dapibus magna dictum enim ultrices ac pharetra lacus convallis. Donec felis ipsum, tristique ornare fermentum quis, fringilla nec arcu. Nunc tortor arcu, fermentum in dictum sit amet, aliquam eu ante. Integer volutpat, erat cursus posuere rutrum, erat tellus varius erat, quis tempus eros risus a lacus.</p>
<figure class="right">
<img src="http://lorempixel.com/300/200/abstract" alt="" width="300" height="200">
<figcaption>En bonne théorie, aucune photo ne devrait<br>paraître sans sa légende.<br><small class="quiet">© copyright</small></figcaption>
</figure>
<p>Paragraphe précédé d'une image calée à droite. Duis sodales erat et odio imperdiet vitae sodales ligula dapibus. Sed commodo orci a nisi iaculis sit amet mollis ante sagittis. Praesent dapibus ligula eget massa vehicula rhoncus. Vestibulum purus odio, hendrerit nec faucibus vel, commodo eu justo. Sed rhoncus ligula vel velit consectetur pharetra. In pellentesque justo ut libero bibendum sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas viverra egestas felis, non vestibulum nibh hendrerit sit amet.</p>
<a id="album"></a>
<h3>Album</h3>
<p>Il est possible de regrouper plusieurs images pour constituer un album, avec <code>.album</code>.</p>
<figure class="album">
<ul>
<li><a href=""><img src="http://lorempixel.com/110/110/transport" alt="" width="110" height="110" class="thumb"></a></li>
<li><a href=""><img src="http://lorempixel.com/110/110/nature" alt="" width="110" height="110" class="thumb"></a></li>
<li><a href=""><img src="http://lorempixel.com/110/110/animals" alt="" width="110" height="110" class="thumb"></a></li>
<li><a href=""><img src="http://lorempixel.com/110/110/city" alt="" width="110" height="110" class="thumb"></a></li>
<li><a href=""><img src="http://lorempixel.com/110/110/technics" alt="" width="110" height="110" class="thumb"></a></li>
<li><a href=""><img src="http://lorempixel.com/110/110/people" alt="" width="110" height="110" class="thumb"></a></li>
<li><a href=""><img src="http://lorempixel.com/110/110/food" alt="" width="110" height="110" class="thumb"></a></li>
<li><a href=""><img src="http://lorempixel.com/110/110/cats" alt="" width="110" height="110" class="thumb"></a></li>
</ul>
<figcaption>Mon album de vacances. Je me suis bien amusée !</figcaption>
</figure>
<p>Proin sit amet fringilla ipsum. Aenean pretium, nibh ac luctus tristique, odio nisi tincidunt tortor, quis dignissim sem nulla non neque. Morbi laoreet, neque nec ultrices volutpat, arcu odio pharetra tellus, sed bibendum mi dolor eget augue. Cras varius, mi ut eleifend convallis, diam leo molestie est, vitae feugiat ipsum mauris at ante. Vestibulum eu sapien metus. Pellentesque tincidunt sodales nibh eu adipiscing.</p>
<h3>Effets de style</h3>
<p>Avec Tiny Typo, les images peuvent recevoir des effets de style, avec <code>.shadow</code> et <code>.border</code> et leurs angles peuvent être arrondis avec <code>.round</code> et <code>.circle</code>.<p>
<img src="http://pipsum.com/90x90.jpg" alt="" width="90" height="90" class="thumb">
<img src="http://pipsum.com/90x90.jpg" alt="" width="90" height="90" class="thumb shadow">
<img src="http://pipsum.com/90x90.jpg" alt="" width="90" height="90" class="thumb border">
<img src="http://pipsum.com/90x90.jpg" alt="" width="90" height="90" class="thumb border shadow">
<br>
<img src="http://pipsum.com/90x90.jpg" alt="" width="90" height="90" class="thumb round">
<img src="http://pipsum.com/90x90.jpg" alt="" width="90" height="90" class="thumb round shadow">
<img src="http://pipsum.com/90x90.jpg" alt="" width="90" height="90" class="thumb round border">
<img src="http://pipsum.com/90x90.jpg" alt="" width="90" height="90" class="thumb round border shadow">
<br>
<img src="http://pipsum.com/90x90.jpg" alt="" width="90" height="90" class="thumb circle">
<img src="http://pipsum.com/90x90.jpg" alt="" width="90" height="90" class="thumb circle shadow">
<img src="http://pipsum.com/90x90.jpg" alt="" width="90" height="90" class="thumb circle border">
<img src="http://pipsum.com/90x90.jpg" alt="" width="90" height="90" class="thumb circle border shadow">
<br>
<p>Les vignettes sont distinguées par la classe <code>.thumb</code>, par défaut sans effet.</p>
</section>
<section id="fonts">
<h2>Familles de fontes</h2>
<p>Les pangrammes suivants, qui contiennent toutes les lettres de l'alphabet, ainsi que les caractères accentués, cédille et ligatures, permettent de visualiser le rendu de chaque famille de fontes.</p>
<div class="font1">
<h3 class="font1">Fonte 1, avec <code>.font1</code> : agh! iIl1 0O</h3>
<p>Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l’alcôve ovoïde, où les bûches se consument dans l’âtre, ce qui lui permet de penser à la cænogénèse de l’être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.</p>
</div>
<div class="font2">
<h3 class="font2">Fonte 2, avec <code>.font2</code> : agh! iIl1 0O</h3>
<p>Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l’alcôve ovoïde, où les bûches se consument dans l’âtre, ce qui lui permet de penser à la cænogénèse de l’être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.</p>
</div>
<div class="font3">
<h3 class="font3">Fonte 3, avec <code>.font3</code> : agh! iIl1 0O</h3>
<p>Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l’alcôve ovoïde, où les bûches se consument dans l’âtre, ce qui lui permet de penser à la cænogénèse de l’être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.</p>
</div>
<div class="font4">
<h3 class="font4">Fonte 4, avec <code>.font4</code> : agh! iIl1 0O</h3>
<p>Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l’alcôve ovoïde, où les bûches se consument dans l’âtre, ce qui lui permet de penser à la cænogénèse de l’être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.</p>
</div>
</section>
</main>
<footer role="contentinfo">
<hr>
<p><small>© Tiny Typo v2.5.5 2017 - MIT License - <a href="http://tinytypo.tetue.net">tinytypo.tetue.net</a></small></p>
</footer>
</div><!--.page-->
</body>
</html>