<< Retour au sommaire

 

HTML 5, Design de base

 

 

Dans cette leçon, nous allons découvrir quelques techniques CSS 3 et HTML 5 histoire de nous initier à l’élaboration d’un design correct.

Si nous nous en reportons au manuel « La structure de page » de la formation HTML 5 du site, nous savons que nous avons à notre disposition des balises structurantes dont le rôle est de mieux présenter nos pages WEB.

En effet, 4 balises de type « super-bloc » permettent de diviser nos pages en 4 parties distinctes :

1.      La balise <header>, c’est l’en-tête de la page, généralement utilisée pour afficher une bannière ;

2.       La balise <nav>, il s’agit d’un bloc permettant d’afficher la liste des liens de navigation du site ;

3.      La balise <section>, généralement celle qui occupe le plus la surface de la page, elle permet d’afficher le contenu à proprement parler de la page ;

4.      La balise <footer>, le pied de page, peut contenir une variété illimitée de types d’informations, et on peut même y placer un autre menu de navigation.

 

Qu’allons-nous faire dans le css ?

 

Pour la balise <header>, rien d’incroyable, on place une bordure de 2 pixels et on centre le texte.

border: 2px outset;

text-align: center

 

Alors, pour le bloc <nav>, que fait-on ?

Un peu mieux !

Pour commencer, on l’écarte un peu du bloc <header> en imposant une marge extérieure haute de 10 pixels :

margin-top: 10px;

Et puis, pendant qu’on y est, nous définissons une bordure !

border: 2px inset

 

Maintenant, nous devons nous arranger pour que les liens de navigation du bloc <nav> soient affichés horizontalement. Alors, on convertit la balise <li> de la liste <ul> en bloc, mais uniquement pour le bloc <nav> !

nav ul li /* Définition de la liste flottante pour les liens de navigation */

{

display: block; /* Convertit la balise <li> en une balise de type block */

float: left; /* Balise désormais flottante à gauche */

list-style-type :none; /* Aucune puce ne sera affichée */

padding: 15px /* Marges intérieures de 15 pixels */

}

 

Nous arrivons maintenant au contenu principal de la page, le bloc <section>.

Ici, nous allons :

1.      Créer une marge extérieure haute de 10 pixels pour séparer la section du bloc précédent ;

margin-top: 10px;

2.      Fixer la hauteur du bloc à 550 pixels :

height: 550px;

3.      Et puisque la hauteur du bloc est fixe, il faut afficher un ascenseur au cas ou il y aurait un dépassement du contenu, ce qui est souvent le cas d’ailleurs…

overflow: scroll;

4.      Pour finir, on définit 4 marges intérieures :

padding: 10px

 

Quant au pied de page, on va faire au plus simple, une marge extérieure haute pour l’écarter du bloc précédent, 4 marges intérieures et une bordure :

margin-top: 10px; /* Marge extérieure haute de 10 pixels */

padding: 15px; /* Marges intérieures de 15 pixels */

border: 2px inset /* Bordure d'une épaisseur de 2 pixels */

 

Voici donc la définition CSS au complet :

header /* Définition du bloc <header> pour l'en-tête de la page*/

{

border: 2px outset; /* Bordure d'une épaisseur de 2 pixels */

text-align: center /* Centrer le texte dans le bloc */

}

nav /* Définition du bloc <nav> pour les liens de navigation à venir */

{

margin-top: 10px; /* Marge extérieure haute de 10 pixels */

padding: 15px; /* marges intérieures de 15 pixels */

border: 2px inset /* Bordure d'une épaisseur de 2 pixels */

}

nav ul li /* Définition de la liste flottante pour les liens de navigation */

{

display: block; /* Convertit la balise <li> en une balise de type block */

float: left; /* Balise désormais flottante à gauche */

list-style-type :none; /* Aucune puce ne sera affichée */

padding: 15px /* Marges intérieures de 15 pixels */

}

section /* Définition de la section, le contenu de la page */

{

margin-top: 10px; /* Marge extérieure haute de 10 pixels */

height: 550px; /* Fixe la hauteur du bloc à 550 pixels */

overflow: scroll; /* Affiche un ascenseur */

border: 2px outset; /* Bordure d'une épaisseur de 2 pixels */

padding: 10px /* Marges intérieures de 10 pixels */

}

footer /* Définition du bloc <footer>, le pied de page */

{

margin-top: 10px; /* Marge extérieure haute de 10 pixels */

padding: 15px; /* Marges intérieures de 15 pixels */

border: 2px inset /* Bordure d'une épaisseur de 2 pixels */

}

 


 

Maintenant, voici la page HTML :

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Un design</title>

<!-- Inclusion de la feuille de style MonCSS.css -->

<link rel="stylesheet" href="MonCSS.css" />

</head>

<body>

<header>

<p>Un séjour en CHARENTE-MARITIME</p>

</header>

<nav>

<ul>

<li>

<a href="index.html">Accueil</a>

</li>

<li>

<a href="#commune">LA TREMBLADE</a>

</li>

<li>

<a href="#chaluts">Qu'est-ce qu'un chalut ?</a>

</li>

<li>

<a href="#ostréiculture">Le métier de l'ostréiculture</a>

</li>

</ul>

</nav>

<section>

<h1>La TREMBLADE, sa pêche et son ostréiculture</h1>

<hr />

<h2 id="commune">Présentation de la commune de LA TREMBLADE, CHARENTE-MARITIME</h2>

<p>

La commune est située dans la presqu'île d'Arvert, sur la rive gauche de l'estuaire de la

Seudre.<br />

L'océan Atlantique limite la commune sur sa partie occidentale, où une station balnéaire s'est développée au XIXe siècle, Ronce-les-Bains.<br />

La Tremblade se situe à proximité immédiate du bassin ostréicole

de Marennes-Oléron.

</p>

<h2 id="chaluts">Les chaluts</h2>

<p>

Le chalut est le filet trainé par le chalutier. Il a une forme caractéristique en

entonnoir, prolongé à l'ouverture par des ailes pour en élargir la portée. Il peut être tracté par un seul ou par deux navires (on parle alors de chalutage en bœuf,

expression évoquant les bœufs qui tiraient la charrue). Le chalut est trainé par des câbles appelés « funes ». Il est fermé à son extrémité (le « cul du

chalut ») par un cordage dit Raban de cul. Un système combiné de panneaux, de chaines (lest) et de lièges ou flotteurs plus techniques (dans le cas de la pêche dans les grands fonds)

permet de maintenir béante son ouverture et d'en régler la forme et la profondeur. La dimension des mailles varie des ailes jusqu'au « cul de chalut ».<br />

Elle a été règlementée pour mieux sauvegarder les juvéniles...

</p>

<h2 id="ostréiculture">L'ostréiculture, le métiers des huîtres, son histoire</h2>

<p>

Depuis la Préhistoire, l’homme du littoral se nourrissait d’

huîtres sauvages, les Romains étaient très friands d’

huîtres plates.<br />

Louis XIV était un grand amateur des plates de l’estuaire de la

Seudre.<br />

Face à la régression des bancs naturels d'huitres, des élevages en ont été fait depuis plusieurs siècles, comme en témoigne l'une des planches illustrant de l'Encyclopédie de Diderot

présentant les "claires" ou "parcs à verdir les huîtres".<br />

Les huîtres connurent un tels succès sur les tables averties sous le

Second Empire qu'en 1852, donnant suite à un rapport alarmiste du ministère de l'agriculture et du commerce relatif à la chute de la production des gisements naturels d'huîtres,

l'administration maritime a du réglementer alors la drague.

</p>

</section>

<footer>

<p>

Avez-vous compris ?

</p>

</footer>

</body>

</html>

 

Tester la page >>

 

Philippe BOULANGER