Cette page présente les exercices associés à la formation. Les fichiers servant de base aux exercices sont disponnibles ici : Exercices.
La correction est présentée sur cette page. Libre à vous de la consulter ou non pendant ou après la formation.

Tableaux

Partie 1 : structure

Réaliser le tableau suivant à partir des fichiers présents dans le dossier fournit. Pour afficher les lignes, il est possible d'ajouter à la balise <table> un attribut border="1px". Ceci sera déconseillé dans la suite des exercices, l'apparence étant de préférence gérée dans les css.

<html>
<head>
	<style>
		
	</style>
</head>

<body>
	<table border="1px">
		<caption>Espaces protégés et gérés en 2013</caption>
		<tr>
			<th rowspan="2">Types d espace</th>
			<th colspan="2">France métropolitaine</th>
			<th colspan="2">DOM</th>
			<th colspan="2">France</th>
		</tr>
		<tr>
			<th>Nombre</td>
			<th>Surface (en km²)</th>
			<th>Nombre</td>
			<th>Surface (en km²)</th>
			<th>Nombre</td>
			<th>Surface (en km²)</th>
		</tr>
		<tr>
			<td>Arrêtés préfectoraux de protection de biotope</td>
			<td>751</td>
			<td>1542</td>
			<td>31</td>
			<td>308</td>
			<td>782</td>
			<td>1850</td>
		</tr>
		<tr>
			<td>Zones relevant de la Convention de Ramsar</td>
			<td>32</td>
			<td>7701</td>
			<td>5</td>
			<td>2753</td>
			<td>37</td>
			<td>10493</td>
		</tr>
		<tr>
			<td>Réserves de biosphère</td>
			<td>9</td>
			<td>35564</td>
			<td>1</td>
			<td>2470</td>
			<td>10</td>
			<td>38034</td>
		</tr>
		<tr>
			<td>Sites Natura 2000</td>
			<td>1754</td>
			<td>110718</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr> 
	</table>
</body>
</html>

Partie 2 : habillage

Réaliser le tableau suivant en faisant évoluer le code de la partie 1 de cet exercice. La couleur de l'entête et des bordures est #337AB7, une ligne sur deux dans le corps du tableau est de la couleur #D8E2EB, les autres sont blanches.

<html>
<head>
	<style>
		table {
			border-collapse: collapse;
			border: 2px solid #337AB7;
		}
		thead th {
			background-color: #337AB7;
			color: white;
			text-align:center;
		}
		tbody th {
			border-right: 2px solid #337AB7;
		}
		th, td {
			text-align: left;
			padding: 8px;
		}
		tbody tr:nth-child(even){
			background-color: #D8E2EB;
		}
		table caption {
			caption-side: bottom; 
		}
	</style>
</head>

<body>
	<table>
		<caption>Espaces protégés et gérés en 2013</caption>
		<thead>
		<tr>
			<th rowspan="2">Types d espace</th>
			<th colspan="2">France métropolitaine</th>
			<th colspan="2">DOM</th>
			<th colspan="2">France</th>
		</tr>
		<tr>
			<th>Nombre</td>
			<th>Surface (en km²)</th>
			<th>Nombre</td>
			<th>Surface (en km²)</th>
			<th>Nombre</td>
			<th>Surface (en km²)</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<th>Arrêtés préfectoraux de protection de biotope</th>
			<td>751</td>
			<td>1542</td>
			<td>31</td>
			<td>308</td>
			<td>782</td>
			<td>1850</td>
		</tr>
		<tr>
			<th>Zones relevant de la Convention de Ramsar</th>
			<td>32</td>
			<td>7701</td>
			<td>5</td>
			<td>2753</td>
			<td>37</td>
			<td>10493</td>
		</tr>
		<tr>
			<th>Réserves de biosphère</th>
			<td>9</td>
			<td>35564</td>
			<td>1</td>
			<td>2470</td>
			<td>10</td>
			<td>38034</td>
		</tr>
		<tr>
			<th>Sites Natura 2000</th>
			<td>1754</td>
			<td>110718</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr> 
		</tbody>
	</table>
</body>
</html>

Positionnement

Réaliser la page suivante en vous servant du fichier fournit. Utiliser les balises html5 (main, nav, section) pour catégoriser les éléments de la page et pour pouvoir réaliser les sélecteurs css. La couleur utilisée pour l'entête et le pied de page est #337AB7

<html>
<head>
	<style>
		header, footer {
			padding: 1em;
			color: white;
			background-color: #337AB7;
			text-align: center;
		}
		nav {
			float: left;
			max-width: 160px;
			margin: 0;
			padding: 1em;
		}
		nav ul {
			list-style-type: none;
			padding: 0;
		}
		nav ul a {
			color: #337AB7;
		}
		article {
			margin-left: 170px;
			border-left: 1px solid gray;
			padding: 1em;
		}
	</style>
</head>

<body>
	<header>
		<h1>Site de julien</h1>
	</header>
	  
	<nav>
		<ul>
			<li><a href="#">Html</a></li>
			<li><a href="#">css</a></li>
			<li><a href="#">js</a></li>
		</ul>
	</nav>
	
	<article>
		<h1>Est-il important d utiliser les layout ?</h1>
		<p>
		 Oui, parce que de trop nombreux développements sont basés
		 sur des tableaux assez lourds à gérer en maintenance et 
		 qu il est important d utiliser au maximum les possibilités
		 des css.
		</p>
		<p>
		 Vous pouvez librement utliser autre chose mais si je dois 
		 assurer la maintenance d une application que vous avez
		 développé comme un cochon, je porterai sur vous un regard
		 plein de mépris :)
		</p>
	</article>
	
	<footer>Compris ?</footer>
</body>
</html>

Mise en forme d'une page

Créer le lien suivant en vous servant des fichiers fournits. Vous devrez utiliser les pseudo-classes associés aux liens pour y parvenir. La couleur utilisée est #337AB7

<html>
<head>
	<style>
		a:link, a:visited {
			border: solid 4px #337AB7;
			font-family:calibri;
			color: #337AB7;
			padding: 14px 25px;
			text-align: center;
			text-decoration: none;
		}
		a:hover, a:active {
			background-color: #337AB7;
			color: white;
		}
	</style>
</head>

<body>
	<br /><p>
		<a href="#">Texte du lien</a>
	</p>
</body>
</html>

Tableau entête fixée

Réaliser le tableau suivant sachant que l'entête est fixe et que le contenu peut défiler grâce à l’ascenseur sur la droite. Vous utiliserez les balises thead et tbody pour distinguer les parties fixes des parties qui sont déplacées avec l'ascensseur. La couleur utilisée pour l'entête est #337AB7, une ligne sur deux utilise est de la couleur #D8E2EB, l'autre est blanche

<html>
<head>
	<style>
		table tbody{
			border-collapse: collapse;
		}
		th, td {
			text-align: left;
			padding: 8px;
		}
		th {
			background-color: #337AB7;
			color: white;
		}
		tr {
			background-color: white;
		}
		tr:nth-child(even){
			background-color: #D8E2EB;
		}
		thead {
			display:block;
		}
		tbody {
			display:block;
			height:100px;
			overflow-y:scroll;
		}
		thead tr th:nth-child(1) {
			width:5em;
		}
		thead tr th:nth-child(2) {
			width:10em;
		}
		tbody tr:first-child td:nth-child(1) {
			width:5em;
		}
		tbody tr:first-child td:nth-child(2) {
			width:10em;
		}
	</style>
</head>

<body>
	<table>
	<caption>Participants de la formation</caption>
	<thead>
		<tr><th>Nom</th><th>Niveau</th></tr>
	</thead>
	<tbody>
		<tr><td>Émilie</td><td>Bon</td></tr>
		<tr><td>Ludovic</td><td>Bon</td></tr>
		<tr><td>Sébastien</td><td>Bon</td></tr>
		<tr><td>Gwenaël</td><td>Bon</td></tr>
		<tr><td>Arnaud</td><td>Bon</td></tr>
		<tr><td>Valérie</td><td>Bon</td></tr>
	</tbody>
	</table
</body>
</html>

Page html simple

Mettre en forme le texte du poème "A une passante" fournit dans les fichiers d'exercices afin d’obtenir le rendu visuel suivant. Dans un premier temps, vous pourrez uniquement catégoriser le contenu de la page html puis ensuite modifier la css afin d'obtenir le résultat attendu. Le lien vers la page de l'auteur ne fonctionne pas dans l'exemple ci-dessous, vous devrez le faire pointer vers la page du même nom.

<html>
<head>
	<style>
		body {
			background-color: #F2F2F2;
		}
		main {
			width:350px;
			margin-top: 40px;
			margin-left: auto;
			margin-right: auto;
			padding: 15px 30px 15px 30px;
			background-color: white;
			border: 1px solid black;
		}
		main h1 {
			text-align:center;
		}
		p.italic {
			text-align: center;
			font-style: italic;
		}
	</style>
</head>

<body>
	<main>
		<h1>A une passante</h1>
		<p>
			La rue assourdissante autour de moi hurlait.<br />
			Longue, mince, en grand deuil, douleur majestueuse,<br />
			Une femme passa, d une main fastueuse<br />
			Soulevant, balançant le feston et l ourlet ;
		</p>
		<p>
			Agile et noble, avec sa jambe de statue.<br />
			Moi, je buvais, crispé comme un extravagant,<br />
			Dans son oeil, ciel livide où germe l ouragan,<br />
			La douceur qui fascine et le plaisir qui tue.
		</p>
		<p>
			Un éclair... puis la nuit ! - Fugitive beauté<br />
			Dont le regard m a fait soudainement renaître,<br />
			Ne te verrai-je plus que dans l éternité ?
		</p>
		<p>
			Ailleurs, loin d ici ! trop tard ! jamais peut-être !<br />
			Car j ignore où tu fuis, tu ne sais où je vais,<br />
			Ô toi que j eusse aimée, ô toi qui le savais !
		</p>
		<p class="italic">
			<a href="Baudelaire.html">Baudelaire</a><br />
			Les Fleurs du mal, 1857
		</p>
	</main>
</body>
</html>

Menu css

Réaliser le menu déroulant suivant (vous vous servirez des balises html5). La couleur sombre est #333, la couleur claire est #111

<html>
<head>
	<style>
		body {
			background-color:#F2F2F2;
		}
		nav ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: #333;
		}
		nav ul li {
			float: left;
		}
		nav ul li a {
			display: block;
			color: white;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
		}
		nav ul li ul {
			display: none;
			position: absolute;
			border: 1px solid #333;
		}
		nav a:hover:not(.active) {
			background-color: #111;
			color: white;
		}
		nav ul li:hover ul {
			display: block;
		}
		nav ul li ul li {
			float: none;
			background-color:white;
			color: #333;
		}
		nav ul li ul li a {
			color: #333;
		}
	</style>
</head>

<body>
	<nav>
		<ul>
			<li><a href="#">Accueil</a></li>
			<li>
				<a>Menu 1</a>
				<ul>
					<li><a href="#">Sous menu 1</a></li>
					<li><a href="#">Sous menu 2</a></li>
				</ul>
			</li>
			<li>
				<a>Menu 2</a>
				<ul>
					<li><a href="#">Sous menu 1</a></li>
					<li><a href="#">Sous menu 2</a></li>
				</ul>
			</li>
			<li><a href="#">Menu 3</a></li>
		</ul>
	</nav>
	<p>Le paragraphe doit être recouvert par le menu</p>
</body>
</html>

Site complet

Créer la page d’accueil d’un site avec un bandeau de présentation, une barre de navigation en haut, une sidebar sur la droite et un pied de page. Le site pourra ressembler à ceci. Vous êtes libres de modifier l'aspect visuel de cette page selon vos goûts. Il convient de conserver les parties présentes sur cette page et disposées de manière identique (un menu en haut, une sidebar sur la droite, et des marges à gauche et à droite.

<html>
<head>
	<style>
		body { 
			font: normal 14px Arial, Helvetica, sans-serif;
			color: #000;
			background: #FFF;
		}
		h1, h2, h3, h4, h5, h6 {
			font: normal 175% Arial, Helvetica, sans-serif;
			color: #0183F0;
			margin: 0 0 10px 0;
		}
		section h1 { 
			font: normal 180% Arial, Helvetica, sans-serif;
			border-bottom:1px solid #0183F0;
			padding-top:10px;
		}
		
		h2 { 
			font: normal 150% Arial, Helvetica, sans-serif;
			padding-top:10px;
		}
		h3 {
			font: normal 130% Arial, Helvetica, sans-serif;
		}
		a, a:hover {
			color: #1D1D1D;
			background: transparent;
			outline: none;
			text-decoration: none;
		}
		a:hover  { 
			text-decoration: underline;
		}
		main, header, nav {
			margin-left: auto; 
			margin-right: auto;
		}
		header { 
			height: 120px;
			background: #1D1D1D;
			background: -moz-linear-gradient(#676767, #1D1D1D);
			background: -o-linear-gradient(#676767, #1D1D1D);
			background: -webkit-linear-gradient(#676767, #1D1D1D);
			-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
			-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
			box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
			padding: 15px 30px 15px 50px;
			text-align:center;
		}
		header h1{
			font: normal 300% Arial, Helvetica, sans-serif;
			color: white;
		}
		header h2 {
			font: normal 200% Arial, Helvetica, sans-serif;
			letter-spacing: -2px;
			color: white;
		}
		nav {
			height: 50px;
			background: #098EFF;
			background: -moz-linear-gradient(#43A9FF, #0183F0);
			background: -o-linear-gradient(#43A9FF, #0183F0);
			background: -webkit-linear-gradient(#43A9FF, #0183F0);
			text-align: center; 
			margin: 2px 0 0 0;
		}
		nav ul {
			margin:0;
		}
		nav ul li {
			padding: 0 0 0 0px;
			list-style: none;
			margin: 2px 0 0 0;
			display: inline;
			background: transparent;
		}
		nav ul li a {
			float: left;
			font: bold 120% Arial, Helvetica, sans-serif;
			height: 24px;
			margin: 10px 0 0 20px;
			padding: 6px 20px 0 20px;
			background: transparent; 
			border-radius: 7px 7px 7px 7px;
			-moz-border-radius: 7px 7px 7px 7px;
			-webkit-border: 7px 7px 7px 7px;
			text-align: center;
			color: #FFF;
			text-decoration: none;
		} 
		nav ul li.current a, nav ul li:hover a {
			color: #000; 
			background: none;
		}
		main {
			width: 1024px;
			overflow: hidden;
			-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
			-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
			box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
		} 
		aside {
			float: right;
			margin: 20px 10px 0 10px;
			width: 210px;
			padding: 0;
		}
		aside h2 {
			padding: 5px 0 0 0;
			font: normal 140% Arial, Helvetica, sans-serif;
			height: 30px;
			color: #0084D1;
		}
		aside p {
			color: #1d1d1d;
		}
		section {
			width: 680px;
			margin: 0 0 20px 20px;
			float: left;
		}
		article {
			width: 680px;
			margin-top: 20px;
			margin-bottom: 20px;
		}
		article table {
			background:#eaebec;
			border:#ccc 1px solid;
		}
		article table tbody tr:nth-child(2n+1) td{
		    background-color: #CBCCCD;
		}
		article table tr:hover td, article table tbody tr:nth-child(2n+1):hover td {
			background: #098EFF;
			background: -moz-linear-gradient(#A2D5FF, #43A9FF);
			background: -o-linear-gradient(#A2D5FF, #43A9FF);
			background: -webkit-linear-gradient(#A2D5FF, #43A9FF);
			
		}
		article table th {
			background: #098EFF;
			background: -moz-linear-gradient(#43A9FF, #0183F0);
			background: -o-linear-gradient(#43A9FF, #0183F0);
			background: -webkit-linear-gradient(#43A9FF, #0183F0);
			padding:10px;
			font-weight:bold;
			border:1px solid #e0e0e0;
			color:white;
		}
		article table td {
			padding:10px;
			border-top: 1px solid #e0e0e0;
			border-bottom:1px solid #e0e0e0;
			border-left: 1px solid #e0e0e0;
		}
		footer {
			height: 40px;
			background: #1D1D1D;
			background: -moz-linear-gradient(#676767, #1D1D1D);
			background: -o-linear-gradient(#676767, #1D1D1D);
			background: -webkit-linear-gradient(#676767, #1D1D1D);
			padding-top: 20px;
			text-align: center; 
			color: #FFF;
			text-decoration: none;
		}
		footer a, footer a:hover {
			color: #FFF;
			text-decoration: none;
		}
		footer a:hover{
			text-decoration: underline;
		}
	</style>
</head>

<body>
	<header>
		<h1>Service développement</h1>
		<h2>Centre National Informatique d Orléans</h2>
	</header>
	
	<nav>
		<ul>
			<li class="current"><a href="#">Accueil</a></li>
			<li><a href="#">Les domaines</a></li>
			<li><a href="#">Les projets</a></li>
			<li><a href="#">Formation</a></li>
			<li><a href="#">Infos pratiques</a></li>
		</ul>
	</nav>
	
	<main>
		<aside>
			<h2>Actualités</h2>
			<h3>13 septembre 2016</h3>
			<p>
				L EPOI Fidéli reçoit la maitrise d ouvrage pour
				une réunion sur l organisation du début de
				projet.
			</p>
			<h3>8 septembre 2016</h3>
			<p>
				Le CNIO reçoit la société Orsys pour animer
				la formation Lean Management les 8 et 9 septembre 2016
			</p>
			<h2>Contact</h2>
			<p>
				Téléphone: 02 38 69 54 97
				<br />
				Email: 
				<a href="mailto:julien.gauchet@insee.fr">
					julien.gauchet@insee.fr 
				</a>
			</p>
		</aside>
	
		<section>
			<article>
				<h1>Présentation du service</h1>
				<h2>Historique</h2>   
				<p>
					Création, le 1er juillet 1997 par fusion du Service
					Applications Maintenance (SAM) et des équipes de
					projets informatiques alors sous tutelle du Département
					des Projets (DP).  
				</p>
				<h2>Organisation du service</h2>
				<p>
					Le Service Développement est organisé autour de 
					3 groupes à vocation technologique : le groupe Java, le
					groupe SAS-SQL, le groupe Géographie
				</p>  
				<p>  
					Les Chefs de Projet Organisation et Informatique et la
					ressource Tests sont rattachés directement au chef du 
					service.
				</p>
				<h2>Les effectifs</h2>
				<p>
					Le tableau ci-dessous liste les effectifs par catégorie
					entre 2011 et 2014 :
					<table>
						<thead>
							<tr>
								<th rowspan= 2 >Catégorie</th>
								<th colspan= 4 >Effectifs</th>
							</tr>
							<tr> 
								<th>31/12/11</th>
								<th>1/09/2012</th>
								<th>1/09/2013</th>
								<th>24/09/2014</th>
							</tr>
						<thead>
						<tbody>
							<tr>
								<th>A</th>
								<td>9</td>
								<td>16</td>
								<td>14</td>
								<td>16</td>
							</tr>
							<tr>
								<th>B</th>
								<td>21</td>
								<td>19</td>
								<td>17</td>
								<td>16</td>
							</tr>
							<tr>
								<th>C</th>
								<td>-</td>
								<td>-</td>
								<td>-</td>
								<td>-</td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<th>Total</th>
								<td>30</td>
								<td>35</td>
								<td>31</td>
								<td>32</td>
							</tr>
						</tfoot>
					</table>
				</p>
			</article>
			<article>
				<h1>Les projets</h1>
				<p>
					Quatre projets sont actuellement en cours de
					développement au sein du service :
					<ul>
						<li>Le projet Pyrenes (du programme SIERA)</li>
						<li>Le projet données de caisses</li>
						<li>La partie géographie du projet RORCAL</li>
						<li>Le projet RSL</li>
					</ul>
				</p>
			</article>
			<article>
				<h1>Les applicatione en maintenance</h1>
				<p>
					Les applications en maintenance sont divisées en 3
					domaines : le domaine emploi salaires revenus, le domaine
					diffusion web enquetes, le domaine cartographie
				</p>
			</article>
		</section>
	</main>
	
	<footer>
		<a href="#">Mentions légales et crédits</a> | 
		<a href="#">Conditions d utilisation de nos données</a> | 
		<a href="#">Plan du site</a>
	</footer>
</body>
</html>

Positionnement grid

Modifier la page suivante de manière à obtenir le visuel ci-dessous, pour cela, utiliser le grid css

Utiliser le code suivant :

<html>
	<head>
		<style>
body {
	margin:auto;
	width:800px;
}
h1 {
	text-align:center;
}
h2 {
	text-align:left;
}
#wrapper {

}
#entete {

	border-bottom:1px solid black;
}
#colonne-gauche {

}
#colonne-droite {

}
#footer {

}
#footer h2 {
	text-align:center;
}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="entete">
				<h1>Lorem Ipsum</h1>
			</div>
			<div id="colonne-gauche">
				<h2>Qu'est-ce que le Lorem Ipsum?</h2>
				<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
			</div>
			<div id="colonne-droite">
				<h2>Pourquoi l'utiliser?</h2>
				<p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes).</p>
			</div>
			<div id="footer">
			<h2>Le passage de Lorem Ipsum standard, utilisé depuis 1500</h2>
			<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
			</div>
		</div>
	</body>
</html>
<html>
	<head>
		<style>
body {
	margin:auto;
	width:800px;
}
h1 {
	text-align:center;
}
h2 {
	text-align:left;
}
#wrapper {
	display: grid;
	grid-gap: 30px;
	grid-auto-rows: minmax(100px, auto);
}
#entete {
	grid-row: 1;
	grid-column : 1/3;
	border-bottom:1px solid black;
}
#colonne-gauche {
	grid-row: 2;
	grid-column : 1;
}
#colonne-droite {
	grid-row: 2;
	grid-column : 2;
}
#footer {
	grid-row: 3;
	grid-column : 1/3;
}
#footer h2 {
	text-align:center;
}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="entete">
				<h1>Lorem Ipsum</h1>
			</div>
			<div id="colonne-gauche">
				<h2>Qu'est-ce que le Lorem Ipsum?</h2>
				<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
			</div>
			<div id="colonne-droite">
				<h2>Pourquoi l'utiliser?</h2>
				<p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes).</p>
			</div>
			<div id="footer">
			<h2>Le passage de Lorem Ipsum standard, utilisé depuis 1500</h2>
			<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
			</div>
		</div>
	</body>
</html>