Exercices html-css

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.

1. Exercices sur les tableaux

Partie 1 : Tableau simple

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 : un joli tableau

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>

2. Exercice sur le 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>

3. Exercice sur la mise en forme d’un lien

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>

4. Tableau avec une entête fixe

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>

5. Création d’une 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>

6. Réalisation d’un 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>

7. Création d’un site

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>