TONER KEBAB WIKI

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== 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
