Accueil - HTML - CSS - Propriétés CSS - Création de page web - Exercices des élèves - Retour

Premiers pas dans la création d'une page web

Une balise <div> sert à créer une subdivision dans la page. Elle permet de regrouper d'autres éléménts HTML, de les formater ensemble et de les positionner.

Si on ne lui donne pas de dimensions, elle occupe toute la place dont elle a besoin pour afficher son contenu.

La balise <div> (pour division) peut être utilisée pour diviser un document en plusieurs sections qui seront, par exemple, alignées chacune d'une façon différente. Dans les premiers navigateurs,cette balise ne possédait d'ailleurs qu'un seul attribut : align avec comme valeurs possibles : center, right, left ou justify.

<div align="center"> Exemple </div> donnera :

Exemple

***

La balise <div> est assez similaire à la balise <span> pour ce qui concerne sa fonction, avec cependant une distinction importante : <div> est une balise encadrant tout un "bloc" du document (block-level element). Elle occasionne un saut de ligne, contrairement à la balise <span>. Elle peut contenir des paragraphes, des titres, des tableaux, et même d'autres divisions. Ce qui en fait la balise idéale pour marquer différentes sortes de blocs tel qu'un chapitre, un résumé ou une note.

L'utilisation des balises <span></span> permet aussi d'appliquer un style CSS de type gras ou italique, les div permetteront plutôt une mise en page.

<span style="font-style:italic">Exemple</span> donnera :

Exemple

***

Réalisons une <div> de largeur de 50% de la page, d'une hauteur de 50px, d'une couleur bleue, et située à droite de la page web. Nous écrirons un texte avec certains mots en vert dans ce <div>. Ceci sans feuille de style externe.

On va donc utiliser cette syntaxe :

<div style="width:50%; height:50px; background-color:#00F: float:right"><p align="center">Testons voir si ce <span style="color:#0f0"><div></span> se place là où l'on veut...</p></div>

Testons voir si ce <div> se place là où l'on veut...



***