Créer son site Web

livre création de site Internet-Bon de commande

div, hr, span, br
balises de structuration de texte

Formation site internet>compléments du livre>Exemples de code XHTML et CSS>Balises de structuration de texte>

Balises de structuration d'une page HTML, div, hr, span, br. Cette page internet est relative à la programmation en XHTML (pages 103 à 113 sur la syntaxe). Elle complète les pages 168-172 ( div, hr, span, br ) du livre-atelier Créer son site Web pas à pas."

Création site Web Formation site Web Livre site Web

balises de structuration de texte

balises div

Exemple de la page 169

balise div

Lignes CSS

body
{
   background-color:rgb(255,255,210); /*couleur du fond de la page entière*/
   color:rgb(51,66,132);/*couleur des caractères par défaut*/
}
#debut
{
   height:120;
   border:1px solid black;
}
#gauche
{
   float:left; /*le cadre suivant flottera à gauche*/
   width:19%;
   border:1px solid black;
   height:250px;/*enlever cette ligne quand la division contiendra du texte*/
}
#droite 
{
   float:right;/*le cadre suivant flottera à droite*/
   width:19%;
   border:1px solid black;
   height:250px;/*enlever cette ligne quand la division contiendra du texte*/
}
#corps
{
   border:1px solid black;
   height:250px;/*enlever cette ligne quand la division contiendra du texte*/   
}
#fin
{
	clear:both;/*le cadre suivant ne flottera pas, il sera en dessous*/
	width:100%;
	border:1px solid black;
}

Lignes XHTML correspondantes

	<div id="debut"><!-- bannière en haut-->
		<p>début </p>
	</div>
	<div id="gauche">
		<p>gauche </p><!-- marge de gauche du corps du texte visible-->
	</div>
	<div id="droite">
		<p>droite</p><!-- marge de droite du corps du texte visible-->
	</div>
	<div id="corps">
	<p>corps</p><!--  corps du texte visible-->
	</div>	
	<div id="fin"><!-- bandeau final-->
	<p>fin</p>
	</div>	

Balise hr

Exemple d'utilisation d'une balise hr entre deux paragraphes.

Illustration de la balise hr

Lignes XHTML correspondantes

<!-- Deux parties séparées par une ligne -->
<p>première partie de la page p</p>
<hr />
<p> deuxième partie de la page p</p>

Balise br

Exemple d'utilisation de la balise br :

Illustration de la balise br

Lignes XHTML correspondantes

Ce texte est tapé sans balise.
Voilà ce qu'il se produit entre deux paragraphes.

<p>Ce texte est tapé entre balise p.</p>
<p>Voilà ce qu'il se produit entre deux paragraphes.</p>

<p>Ce texte est tapé dans une même balise p.<br />
Voilà ce qu'il se produit quand les lignes sont séparées par une balise br.</p>

Les autres balises XHTML

Autres exemples de code XHTML à copier-coller :

Cet article vous a intéressé ?
Twitter Google +
Partagez-le !

Glossaire Outils pédagogiques Formation site Web Mentions légales Contact