Pendant de nombreuses années, les webmasters construisaient leurs pages internet en utilisant les tableaux en HTML. C'était bien pratique, les tableaux fournissaient les cadres et les boites nécessaires pour y placer du texte et des images... comme l'exemple suivant :
Mais voilà, le monde a tourné 10000 fois depuis et les tableaux, ne sont plus que tolérés par les normes actuelles. Les standards du W3C ont mis un terme à ces techniques de construction, au profit de l'utilisation du CSS et des balises <div></div>.
Le XHTML Transitional tolère les tableaux, mais le XHTML Strict vous rappellera que ces balises sont obsolètes.
Alors comment construit-on de nos jours, une page internet ?
Dans le body, pour faire un bloc invisible qui va contenir vos textes et images, vous utiliserez les balises <div> :
<div>Mon texte</div>
<html>
<head></head>
<body>
<table>
<tr>
<td>
Mon texte
</td>
</tr>
</table>
</body>
</html>
Jusque là rien de sorcier. Ce qui va être plus difficile c'est de placer les blocs les uns par rapport aux autres, sans avoir de mauvaises surprises d'un navigateur internet à l'autre. Pour dompter les <div>, il vous faudra être ingénieux avec l'utilisation des CSS. Les styles vont vous permettre de préciser la taille de vos blocs, leur position dans la page, leur attribuer des contours ou des couleurs de fond...
Image 1
Image 2
Image 3
Image 4
Image 5
Concrètement si vous voulez construire une galerie d'images en employant des div, voici un code possible :
<div style="float:left;width:85px;height:35px;margin-right:10px;margin-bottom:5px;border:1px solid gray">
<p style="text-align:center;margin-top:8px">Image 1</p>
</div>
<div style="float:left;width:85px;height:35px;margin-right:10px;margin-bottom:5px;border:1px solid gray">
<p style="text-align:center;margin-top:8px">Image 2</p>
</div>
...
Ce code peut bien sûr être simplifié en employant par exemple des feuilles de style qui évitent de répéter les styles à l'intérieur des <div> et des <p>
Nous venons d'employer des balises div accompagnées de style css qui nous permettent d'apporter des effets visuels aux balises.
float : left indique au bloc où il doit se situer dans le bloc parent qui le contient, c'est-à-dire s'il doit se trouver à gauche (left) ou à droite (right).
width : 85px indique la longueur du bloc, ici 85 pixels
height : 35px indique la hauteur du bloc, ici 35 pixels
margin-right : 10px permet de séparer les blocs en fixant une marge à droite de 10 pixels
margin-bottom : 5px place une marge de 5 pixels sous le bloc
border : 1px solid gray donne une bordure d'1 pixel, en trait continu (solid), de couleur grise
Evidemment, il est possible d'ajouter d'autres effets, comme une couleur de fond (background-color), des marges intérieures (padding), etc.
La structure complète de votre page (mapage.html) doit donc ressembler à ce qui suit. Pour paramétrer les blocs <div> et les balises <p>, c'est-à-dire pour donner une taille, une hauteur..., une feuille de style externe est utilisée. Elle porte le nom de mes_styles.css, elle est placée dans le même dossier que mapage.html. Ce fichier mes_styles.css contient 3 classes : .conteneur{ }, .img{ } et .para{ }.
<html>
<head>
<title>Le titre de ma page</title>
<link href="mes_style.css" rel="stylesheet" type="text/css" media="all" /> <-- Appel à la feuille de style externe contenant tous les styles de la page
</head>
<body>
<div class="conteneur"> <-- Appel de la classe conteneur présente dans la feuille de style
<div class="img"> <-- Appel de la classe img qui indique la taille du bloc
<p class="para">Mon paragraphe</p> <-- Appel de la classe para pour le texte
</div>
</div>
</body>
</html>
Reproduction interdite - SITES-INTERNATIONAUX © 2024
Tutoriel : Construire une page web