Outils pour utilisateurs

Outils du site


wiki:tutoriels:html:html_02

HTML - Les div, les classes et identifiants

Afin de pouvoir mettre en forme une page HTML à l'aide d'une feuille de style (CSS), il faut structurer la page à l'aide des balises neutres div, span ainsi que les attributs class et id.


div_classes_identifiants.html

L'exemple ci-dessous présente une page comportant:

  • 1 entête avec titre général
  • 2 articles (image + texte + lien)
  • 1 pied de page avec formulaire de contact
 
<DOCTYPE html>
<html>

<head>
	<meta charset= "utf-8" />
	<title> HTML - Les div, les classes et identifiants </title>
</head>

<body>

	<div>
		<h1> FREAKY FIGHTERS </h1>
	</div>

<div>
<h2> BOB SAPP </h2>

<img src="images/bob-sapp_01.jpg" />

<p>
	Bob "The Beast" Sapp, né le 22 septembre 1973 à Colorado Springs dans le Colorado, est un célèbre combattant américain de mixed martial arts et de kickboxing ainsi qu'un ancien catcheur et un ancien joueur de football américain.
</p>

<p> <a href = "http://fr.wikipedia.org/wiki/Bob_Sapp" > source wikipédia </a> </p>
</div>

<div>
<h2> CHOI HONG MAN </h2>

<img src="images/choi-hong-man_01.jpg" />

<p>
	Hong-Man Choi est un combattant né le 30 octobre 1980 en Corée du Sud.
</p>

<p> <a href = "http://fr.wikipedia.org/wiki/Choi_Hong-man"> source wikipédia </a> </p>
</div>

<div>
<p> <h3> Thomas Ricordeau (CC) </h3> </p>
<p> <a href = "mailto:thomas.ricordeau@gmail.com"> contact </a> </p> 
</div>

</body>

</html>

structurer la page

Chaque partie de la page est encadrée par des balises div qui font office de conteneur.

<DOCTYPE html>
<html>

<head>
	<meta charset= "utf-8" />
	<title> HTML - Les div, les classes et identifiants </title>
</head>

<body>

	<div id= "entete">
		<h1> FREAKY FIGHTERS </h1>
	</div>

<div id="article01" class="americanfighter">
<h2> BOB SAPP </h2>
bob
<img src="images/bob-sapp_01.jpg" />

<p class= "contenu">
	Bob "The Beast" Sapp, né le 22 septembre 1973 à Colorado Springs dans le Colorado, est un célèbre combattant américain de mixed martial arts et de kickboxing ainsi qu'un ancien catcheur et un ancien joueur de football américain.
</p>

<p class= "source"> <a href = "http://fr.wikipedia.org/wiki/Bob_Sapp" > source wikipédia </a> </p>
</div>

<div id="article02" class="coreanfighter">
<h2> CHOI HONG MAN </h2>

<img src="images/choi-hong-man_01.jpg" />

<p class= "texte">
	Hong-Man Choi est un combattant né le 30 octobre 1980 en Corée du Sud.
</p>

<p class="source"> <a href = "http://fr.wikipedia.org/wiki/Choi_Hong-man"> source wikipédia </a> </p>
</div>

<div id="piededepage">
<p> <h3> Thomas Ricordeau (CC) </h3> </p>
<p> <a href = "mailto:thomas.ricordeau@gmail.com"> contact </a> </p> 
</div>

</body>

</html>


Les balises et les attributs

  • div: balise conteneur (avec saut de ligne)
  • class: balise classe, multiple, elle peut cibler plusieurs éléments
  • id: balise identifiant, unique elle cible un seul élément
  • span: balise conteneur (sans saut de ligne)

La suite ici: HTML + CSS

wiki/tutoriels/html/html_02.txt · Dernière modification: 2015/03/11 15:15 (modification externe)