TONER KEBAB WIKI

====== 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

<code> 
<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>
</code>

----

===== structurer la page =====

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

<code>
<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>
</code>

{{:wiki:tutoriels:html:web05.jpeg?300|}}

----

===== 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: [[wiki:tutoriels:html:html_03_css|HTML + CSS]]
TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Outils de la page
