Écrire une page HTML5
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> <title>Exemple de mise en forme de boîtes</title> <style type="text/css"> body {background-color:#FFF;color:#004} div { box-shadow:0em 0em 2em 2em #855; width:80%; margin:3em auto; } article:first-of-type { box-shadow:inset 1em 1em 3em 0em #558; } article~article { box-shadow:inset -1em 1em 3em -0.3em #585, inset 1em -1em 3em -0.3em #858, 0 0 1em 0.3em #F00, 0 0 1em 0.6em #F80, 0 0 1em 1.3em #FF0, 0 0 1em 1.4em #0F0, 0 0 1em 1.7em #0FF, 0 0 1em 2.4em #00F, 0 0 1em 2.7em #F0F; position:fixed; top:30%; right:30%; width:45%; background-color:#FCC; } </style> </head> <body> <h1>Exemple de mise en forme de boîtes</h1> <div> <article> <h2>Voici un article sur <em>Rabelais</em></h2> <p>François Rabelais était un médecin et écrivain humaniste français de la Renaissance, né à <em>La Devinière</em>, près de Chinon (dans l’ancienne province de Touraine), à une date indéterminée entre 1483 et 1494, et mort à Paris le 9 avril 1553.</p> <p>Son œuvre littéraire tient à la fois du conte avec ses personnages géants et de la parodie du roman de chevalerie.</p> <p>Admirateur d'Érasme, maniant la parodie et la satire avec éclat, Rabelais est de ceux qui luttent avec enthousiasme en faveur de la tolérance, de la paix et du retour aux valeurs antiques, par-delà ces <q>ténèbres gothiques</q> qui caractérisèrent selon lui le Moyen Âge. Rabelais s'en prend aux abus des princes et des hommes d'Église, et leur oppose la culture populaire, paillarde, <q>rigolarde</q>, faite de vin et de jeux, pétrie d'une morale chrétienne légère, loin des lourdeurs ecclésiastiques.</p> <p>Ses critiques et ses expressions crues, proches parfois de la pornographie, lui valent la mise à l'<q>Index Librorum Prohibitorum</q>. Il partage avec le protestantisme la critique de la scolastique et du monachisme, mais le réformateur religieux Jean Calvin s'en prend à lui de manière très virulente, l'associant aux libertins et aux <q>pourceaux</q>.</p> </article> <article> <h2>Et voici un autre article sur <em>Rabelais</em></h2> <p>Parmi les Pantagruélistes du dix-septième siècle, il faut citer Bernier, le philosophe admirateur de Gassendi, l'ami de Ninon de Lenclos et de madame de La Sablière, le savant Huet, évêque d'Avranches, Ménage, madame de Sévigné, La Fontaine, Racine, Molière, Fontenelle : la liste est assez belle. Quant à La Bruyère, tel est son jugement : Où il est mauvais, il passe bien loin au delà du pire, c'est le charme de la canaille ; où il est bon, il va jusqu'à l'exquis et à l'excellent ; il peut être le mets des plus délicats. Certes, le Pantagruel est le mets des plus délicats, de la Fontaine, de Molière, de La Bruyère lui-même. Quant à charmer la canaille, si l'on entend par canaille les gens qui n'ont ni esprit, ni lettres, ni belles connaissances, comment Rabelais l'eût-il pu faire à l'époque où La Bruyère écrit, vers 1688, puisque alors sa langue n'était plus intelligible qu'aux lettrés et que, pour un paysan, un crocheteur, un petit commis, un marchand, c'était de l'hébreu ?</p> </article> </div> <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p> </body> </html>
Écrire une page HTML5
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>Exemple de mise en forme de boîtes</title> <style type="text/css"> body {background-color:#FFF;color:#004} div { border-radius: 2em; border:solid 0.3em #F00; } article { border:solid 0.2em #088; margin:1em; padding:1em; } article:first-of-type { background-color:#FCC; border-top-left-radius:1em 2em; border-top-right-radius:2em 1em; border-bottom-left-radius:2em 2em; border-bottom-right-radius:1em 1em; } article~article {border-radius:1em 2em 2em 1em /2em 1em} </style> </head> <body> <h1>Exemple de mise en forme de boîtes</h1> <div> <h2>Voici un article sur <em>Michel de Montaigne</em></h2> <article> <p>Michel Eyquem de Montaigne, né et mort (28 février 1533 - 13 septembre 1592) au château de Montaigne à Saint-Michel-de-Montaigne en Périgord, est un écrivain, philosophe, moraliste et homme politique français de la Renaissance, auteur d’un livre, les Essais, qui a influencé toute la culture occidentale.</p> <p>Fondateur de l’introspection, il en vient peu à peu à l’unique projet de faire son propre portrait : <q>Je n’ai d’autre objet que de me peindre moi-même</q> Mais il dépeint principalement ses pensées, il veut voir plus clair en lui-même, dans ce qu’il appelle son <q>arrière-boutique</q> : <q>Ce ne sont pas mes actes que je décris, c’est moi, c’est mon essence.</q>. Un pareil dessein est alors très neuf et personne, même dans l’antiquité, ne l’a expressément formé.</p> <p>Mais s'il se peint, cela peut servir aux autres. <q>Tout homme, dira-t-il en 1588, porte en soi la forme entière de l’humaine condition.</q> : quiconque me lit peut se reconnaître en moi et tirer profit de mon expérience. Pascal a jugé l'entreprise avec sévérité dans ses Pensées: <q>Le sot projet qu'il a de se peindre</q>, reprochant notamment à Montaigne son manque de piété et sa désinvolture vis à vis du salut. Mais Voltaire a écrit : <q>Savant dans un siècle d’ignorance, philosophe parmi des fanatiques, (Montaigne) qui peint sous son nom nos faiblesses et nos folies, est un homme qui sera toujours aimé.</q> Et Nietzsche : <q>Qu'un tel homme ait écrit, vraiment la joie de vivre sur cette terre en a été augmentée.</q></p> </article> <h2>Et voici un autre article sur <em>Montaigne</em></h2> <article> <p>Dans les deux derniers chapitres des Essais, Montaigne révèle, en guise de conclusion, sa conception du bonheur du sage, aimer la vie et la goûter pleinement : <q>C'est une perfection absolue et pour ainsi dire divine que de savoir jouir loyalement de son être.</q></p> <p>La vie de Montaigne est mouvementée. Il s'est engagé, a mené une action publique, a risqué sa vie. Sa personnalité a suscité des images contradictoires : <q>Sceptique retiré dans sa tour d’ivoire, égoïste ou généreux, lâche ou courageux, ambitieux ou sage souriant, stoïcien ou épicurien, chrétien sincère ou libre-penseur masqué, catholique convaincu ou sympathisant de la Réforme, esprit serein ou mélancolique redoutant la folie ? Les portraits qu’on a donnés de Michel de Montaigne sont aussi divers que les interprétations des Essais.</q></p> </article> </div> <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p> </body> </html>
Écrire une page xHTML contenant 1 div :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>Exemple de comportement de ellipsis</title> <style type="text/css"> body {font-family:sans-serif; background-color:#888; margin:0; } div { border:#F80 solid 1px; width:50%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } div:hover { white-space:normal; text-overflow: normal; overflow:visible; } </style> </head> <body> <h1>Un texte en latin pour tester <samp>ellipsis</samp>.</h1> <div>Ultimam sessionem Latinam huius anni academici novem sodales participaverunt, inter quos et seniores et iuniores; minor natu, puella 15 tantum annorum, discipula est Scholae Novae, ubi duos annos linguae Latinae studuit et hoc maximo cum fructu, ut patebat ex facilitate qua colloquia Latina intellegebat et nubeculatas Titini fabulas in Latinum vertebat.</div> <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> <title>Test de mise en forme des sections</title> <style type="text/css"> body * {margin:0} body>* {padding:0.2em 1em} section {background-color:#FF4} header {background-color:#F4F} footer {background-color:#4FF} nav { background-color:#F80; position:fixed; position:fixed; right:1em; top:1em; border:0.2em solid #F44; } section:target>h1 {background-color:#000;color:#FF0} </style> </head> <body> <header> <hgroup> <h1>Test de mise en forme des sections</h1> <h2>présentation HTML 5.0</h2> </hgroup> </header> <nav> <dl> <dt><a href="#chap1">Chapitres I</a> :</dt> <dd>le matin.</dd> <dt><a href="#chap2">Chapitres II</a> :</dt> <dd>le soir.</dd> <dt><a href="#chap3">Chapitres III</a> :</dt> <dd>la nuit.</dd> </dl> </nav> <section id="chap1"> <h1>Chapitre I</h1> <p>Aujourd'hui le jour se lève, le début d'une nouvelle aventure, celle de la vie durant un jour.</p> </section> <section id="chap2"> <h1>Chapitre II</h1> <p>Maintenant le soir arrive, la fin de cette aventure extraordinaire qui se déroula aujourd'hui.</p> </section> <section id="chap3"> <h1>Chapitre III</h1> <p>Au cœur de la nuit les esprits se reposent, preparant ainsi une nouvelle expérience de la vie, celle qui se déroulera demain. Ne <strong>vivons pas sans le projet du landemain !</strong></p> </section> <footer> <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p> </footer> </body> </html>