[+18] FLOOD %~#{#{[|`\^[[`^°065489%°_è-")^%24[|[|`{[90¨%5670657FGY?.

<table> Block Délimite un tableau. Voici un exemple de tableau simple : 

Code : HTML - Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table>
   <caption>Passagers du vol 377</caption>

   <tr>
       <th>Nom</th>
       <th>Age</th>
       <th>Pays</th>
   </tr>

   <tr>
       <td>Carmen</td>
       <td>33 ans</td>
       <td>Espagne</td>
   </tr>
   <tr>
       <td>Michelle</td>
       <td>26 ans</td>
       <td>Etats-Unis</td>
   </tr>
   <tr>
       <td>François</td>
       <td>43 ans</td>
       <td>France</td>
   </tr>
</table>
<caption> - Permet de donner un titre au tableau
<tr> - Ligne de tableau
<th> - Cellule d'en-tête du tableau (généralement mise en gras)
<td> - Cellule du tableau
<thead> - Balise non obligatoire permettant d'insérer l'en-tête du tableau.
Si vous choisissez d'utiliser <thead>, <tfoot> et <tbody>, vous devez les mettre dans l'ordre suivant dans votre code source : 

  1. <thead>
  2. <tfoot>
  3. <tbody>
<tbody> - Balise non obligatoire permettant d'insérer le corps du tableau
<tfoot> - Balise non obligatoire permettant d'insérer le pied du tableau

Balises de formulaire

Balise Type Description
<form> Block Délimite un formulaire.
Vous devrez généralement donner 2 attributs à la balise <form> 

  • method : indique la méthode d'envoi du formulaire (get ou post). Si vous ne savez pas quoi utiliser, mettez post.
  • action : la page vers laquelle le visiteur doit être redirigé lorsqu'il a validé votre formulaire.
<fieldset> Block Permet de regrouper plusieurs éléments d'un formulaire.
On l'utilise généralement dans de grands formulaires. 

Pour donner un titre à votre groupe, utilisez la balise <legend>

<legend> Inline Titre d'un groupe dans un formulaire.
A utiliser à l'intérieur d'un <fieldset>
<label> Inline Titre d'un élément de formulaire.
Généralement, vous devrez mettre l'attribut for sur cette balise pour indiquer l'ID de l'élément auquel correspond le label.
<input /> Inline Champ de formulaire.
Il existe de nombreux types de champs différents. Vous choisissez le type de champ que vous désirez grâce à l'attribut type : 

Code : HTML - Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!-- Zone de texte d'une ligne -->
<input type="text" />
<!-- Mot de passe (le texte est caché) -->
<input type="password" />
<!-- Envoi de fichier -->
<input type="file" />
<!-- Case à cocher -->
<input type="checkbox" />
<!-- Bouton d'option -->
<input type="radio" />
<!-- Bouton -->
<input type="button" />
<!-- Bouton d'envoi -->
<input type="submit" />
<!-- Bouton de remise à zéro -->
<input type="reset" />
<!-- Champ caché -->
<input type="hidden" />

Pensez à donner un nom à vos champs grâce à l'attribut name

<textarea> Inline Zone de saisie multiligne.
Vous pouvez définir sa taille grâce aux attributs rows et cols (nombre de lignes et colonnes) ou bien le faire en CSS grâce aux propriétés width et height.
<select> Inline Liste déroulante.
Utilisez la balise <option> pour créer chaque élément de la liste : 

Code : HTML - Sélectionner

1
2
3
4
5
<select name="pays">
    <option value="france">France</option>
    <option value="espagne">Espagne</option>
    <option value="italie">Italie</option>
</select>
<option> Block Element d'une liste déroulante
<optgroup> Block Groupe d'éléments d'une liste déroulante.
A utiliser dans le cas d'une grande liste déroulante.
Vous devez utiliser l'attribut label pour donner un nom au groupe.

Balises sectionnantes

Ces balises permettent de construire le squelette de notre site web : 

Balise Type Description
<header> Block En-tête
<nav> Block Liens principaux de navigation
<footer> Block Pied de page
<section> Block Section de page
<article> Block Contenu ayant un sens propre (billet de blog, actualité...) pouvant être repris sur un autre site.
<aside> Block Informations complémentaires

Balises génériques

Les balises génériques sont des balises qui n'ont pas de sens sémantique. 

En effet, toutes les autres balises HTML ont un sens : <p> signifie "Paragraphe", <h2> signifie "Sous-titre" etc.
Parfois, on a besoin d'utiliser des balises génériques (aussi appelées balises universelles) car aucune des autres balises ne convient. On utilise le plus souvent des balises génériques pour construire son design.

Il y a 2 balises génériques : l'une est inline, l'autre est block.

Balise Type Description
<span> Inline Balise générique de type inline
<div> Block Balise générique de type block

Ces balises ont un intérêt uniquement si vous leur donnez un attribut class, id ou style :

  • class : indique le nom de la classe CSS à utiliser.
  • id : donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet d'identifier la balise. Vous pouvez vous servir de l'ID pour de nombreuses choses, comme par exemple pour un lien vers une ancre, pour un style CSS de type ID, pour des manipulations en Javascript etc.
  • style : cet attribut vous permet d'indiquer directement le code CSS à appliquer. Vous n'êtes donc pas obligés d'avoir une feuille de style à part, vous pouvez juste mettre directement les attributs CSS. Notez qu'il est préférable de ne pas utiliser cet attribut et de passer à la place par une feuille de style externe car cela rend votre site plus facile à mettre à jour par la suite.

Ces 3 attributs ne sont pas réservés aux balises génériques : vous pouvez aussi les mettre sur la plupart des autres balises sans aucun problème. :)

Comme je vous l'ai dit au début de ce chapitre, il y a plusieurs balises que j'ai volontairement omises. 

Vous l'aurez constaté, en HTML tout est affaire de sens (on parle de sémantique). Ce qui compte, c'est d'utiliser la balise qui convient le mieux à chaque moment.

En théorie, on pourrait faire presque tout un site rien qu'avec les balises génériques <div> et <span> (en utilisant du CSS), mais votre site n'aurait aucun sens logique ! Or, respecter la logique de son code source est une chose que les webmasters considèrent comme fondamentale. Une page sémantique a notamment plus de chances d'être mieux indexée dans Google qu'une page utilisant des balises inadaptées.

Souvenez-vous en ! ;)

Chapitre précédent Sommaire Chapitre suivant

Partager

90 commentaires pour "Mémento des balises HTML" 

Note moyenne : 3.85 / 4 (3109 votes)
Pseudo Commentaire
Hors ligne tahayassine madridi # Posté le 27/01/2012 à 00:06:58
Avatar salut c'est mon prmiere message
Hors ligne P@rAd0x # Posté le 02/02/2012 à 17:28:48
Avatar 

Avis : Très bon

Merci pour ce tuto vraiment superbe. Je m'en nourris matin midi et soir, une faim d'apprendre rassasié depuis que je vous connais. 

Et à chaque fois que je décide d'apprendre de nouvelles choses, vous ne me décevez jamais.

C'est juste exceptionnel un site comme ça, pour un autodidacte comme moi.

Merci .

Hors ligne gusfl # Posté le 06/03/2012 à 19:24:40
il y a une petite erreur dans le tuto 

Citation : le tuto

Code : HTML - Sélectionner 

1
2
<!-- Empêcher la mise en cache de la page par le navigateur -->
<meta http-equiv="pragma" content="no-cache" />

cette balise etait valide en xhtml, mais n'est plus valide en html5.

voir : https://www.w3.org/wiki/HTML/Elements/meta


Code : PHP - Sélectionner

1
2
3
4
<?php

    $boss =(gusfl)?true:false;
?>
:ange:
Hors ligne Sadious # Posté le 09/03/2012 à 02:54:52
Avis : Très bon Excellent ! Franchement au début j'ai délaissé le HTML mais plus j'avançais et plus j'étais passionné je te remercie énormément pour ce tuto ! :D 


Quand on est intelligent, il est plus facile de faire l’imbécile que l’inverse.

Hors ligne kakabesola # Posté le 15/03/espèces les plus connues des francophones sont le Hérisson commun (Erinaceus europaeus) et le Hérisson oriental (Erinaceus concolor) mais il existe d'autres « hérissons » sur divers continents y compris en Asie un genre apparenté mais dont les représentants sont dépourvus de piquants : les gymnures. Plusieurs espèces comme le Hérisson de Madagascar ou « tangue » sont encore consommées dans l'océan Indien, y compris à la Réunion, d'autres sont au contraire protégées. Ces espèces sont parfois très éloignées sur l'arbre phylogénique1.. 

Sommaire

[masquer]

Nomenclature[modifier]

La femelle du hérisson est appelée la "hérissonne". On dit le hérisson et non pas l'hérisson2.

Par analogie, le terme « hérisson » peut désigner d'autres animaux pourvus de piquants ou à poils raides comme le Grand aulacode (Thryonomys swinderianus), un gros rongeur au poil très dur, appelé improprement « hérisson » en Afrique Centrale. Mais aussi des espèces très éloignées comme certaines chenilles très poilues appelées « hérissonne » (Arctiidae sp.), les oursins, appelés parfois « hérissons de mer », les diodons appelés « poissons hérissons », etc. Mais ceux-ci, ne sont pas traités sur cet article car ils ne correspondent pas à la définition généralement admise de mammifère insectivore à piquants.

Il ne faut pas confondre non plus les hérissons avec les porcs épics.

Noms français et noms scientifiques correspondants[modifier]

Deux hérissons à oreilles dressées et au pelage très clair 

L'un des hérissons oreillards : H

entry-content">
								<p style="text-align: center;">Je m&#8217;entraîne. <a href="https://monpremiersiteinternet.com/2012/les-articles-de-le-cote-obscur/premier-essai#more-8653" class="more-link"><center><b><span class="meta-nav">&rarr;</span> LÀ TU VOIS PAS TOUT LE TRUC DONC CLIQUE ICI <span class="meta-nav">&larr;</span></b></center></a></p>
											</div><!-- .entry-content -->

			<div class="entry-utility">
									<span class="cat-links">
						<span class="entry-utility-prep entry-utility-prep-cat-links">C'est</span> <a href="https://monpremiersiteinternet.com/mes-categories/creations" title="Voir tous les articles dans Créas perso" rel="category tag">Créas perso</a>					</span>
					<span class="meta-sep">|</span>
								<span class="comments-link"><a href="https://monpremiersiteinternet.com/2012/les-articles-de-le-cote-obscur/premier-essai#comments" title="Commentaire sur Premier essai.">10 suce-boules</a></span>
													<span class="meta-sep">|</span>
					<span class="tag-links">
						<span class="entry-utility-prep entry-utility-prep-tag-links"><a href="#" title="Afficher / Masquer" class="displaytags">Tags</a></span> <div class="tagslist"><a href="https://monpremiersiteinternet.com/mes-mots-cles/bienvenue-sur-mpsi" rel="tag">bienvenue sur MPSI</a></div>					</span>
							</div><!-- .entry-utility -->
		</div><!-- #post-## -->

		<div class="sep"></div>

			<div id="post-8650" class="post-8650 post type-post status-publish format-standard hentry category-net tag-clip-sponsorise tag-consoles tag-geek tag-marques tag-rap tag-yo">
			<h2 class="entry-title"><a href="https://monpremiersiteinternet.com/2012/les-articles-de-iie-nandemonai/c-pourkoi-le-geek-son-tous-de-blero" title="Je kiffe trop &quot;C pourkoi lé geek son tous dé bléro&quot;" rel="bookmark">C pourkoi lé geek son tous dé bléro</a></h2>

			<div class="entry-meta">
				 <span class="meta-sep">Par</span> <span class="author vcard" name="author-4"><a class="url fn n" href="https://monpremiersiteinternet.com/les-articles-de/iie-nandemonai">Iie Nandemonai</a></span> <div class="tooltip" name="author-4"><img class="loadingtooltip" src="/loading.gif" alt="C.h.a.r.g.e.m.e.n.t" /></div> <span class="meta-prep meta-prep-author">le</span> <a href="https://monpremiersiteinternet.com/2012/les-articles-de-iie-nandemonai/c-pourkoi-le-geek-son-tous-de-blero" title="Ceci est un lien permanent." rel="bookmark"><span class="entry-date">16/04/2012 &agrave; 14H29</span></a> - <span class="metacommentslink"><a href="https://monpremiersiteinternet.com/2012/les-articles-de-iie-nandemonai/c-pourkoi-le-geek-son-tous-de-blero#comments" title="Tu peux r&eacute;pondre par ici.">17 COMS !</a></span>			</div><!-- .entry-meta -->

				<div class="entry-content">
								<p style="text-align: center;"><div class="myvideotag" style="width: 580px;"><iframe width="580" height="380" src="https://www.youtube.com/embed/8h9eE33aRV0" frameborder="0" allowfullscreen></iframe></div></p>
											</div><!-- .entry-content -->

			<div class="entry-utility">
									<span class="cat-links">
						<span class="entry-utility-prep entry-utility-prep-cat-links">C'est</span> <a href="https://monpremiersiteinternet.com/mes-categories/net" title="Voir tous les articles dans THE INTERNET" rel="category tag">THE INTERNET</a>					</span>
					<span class="meta-sep">|</span>
								<span class="comments-link"><a href="https://monpremiersiteinternet.com/2012/les-articles-de-iie-nandemonai/c-pourkoi-le-geek-son-tous-de-blero#comments" title="Commentaire sur C pourkoi lé geek son tous dé bléro">17 suce-boules</a></span>
													<span class="meta-sep">|</span>
					<span class="tag-links">
						<span class="entry-utility-prep entry-utility-prep-tag-links"><a href="#" title="Afficher / Masquer" class="displaytags">Tags</a></span> <div class="tagslist"><a href="https://monpremiersiteinternet.com/mes-mots-cles/clip-sponsorise" rel="tag">clip sponsorisé</a> ~ <a href="https://monpremiersiteinternet.com/mes-mots-cles/consoles" rel="tag">consoles</a> ~ <a href="https://monpremiersiteinternet.com/mes-mots-cles/geek" rel="tag">geek</a> ~ <a href="https://monpremiersiteinternet.com/mes-mots-cles/marques" rel="tag">marques</a> ~ <a href="https://monpremiersiteinternet.com/mes-mots-cles/rap" rel="tag">rap</a> ~ <a href="https://monpremiersiteinternet.com/mes-mots-cles/yo" rel="tag">YO</a></div>					</span>
							</div><!-- .entry-utility -->
		</div><!-- #post-## -->

		<div class="sep"></div>

			<div id="post-8636" class="post-8636 post type-post status-publish format-standard hentry category-ilfautetremajeurpourallerla tag-chatte-cousue tag-cousues tag-extreme tag-levres tag-maso tag-my-little-pony tag-sado tag-sm tag-vagin-cousu">
			<h2 class="entry-title"><span class="nsfw">[+18] </span><a href="https://monpremiersiteinternet.com/2012/les-articles-de-le-cote-obscur/stapled-pussy" title="Je kiffe trop &quot;Stapled pussy&quot;" rel="bookmark">Stapled pussy</a></h2>

			<div class="entry-meta">
				 <span class="meta-sep">Par</span> <span class="author vcard" name="author-3"><a class="url fn n" href="https://monpremiersiteinternet.com/les-articles-de/le-cote-obscur">Le côté obscur (cliquer pour souscrire)</a></span> <div class="tooltip" name="author-3"><img class="loadingtooltip" src="/loading.gif" alt="C.h.a.r.g.e.m.e.n.t" /></div> <span class="meta-prep meta-prep-author">le</span> <a href="https://monpremiersiteinternet.com/2012/les-articles-de-le-cote-obscur/stapled-pussy" title="Ceci est un lien permanent." rel="bookmark"><span class="entry-date">15/04/2012 &agrave; 23H26</span></a> - <span class="metacommentslink"><a href="https://monpremiersiteinternet.com/2012/les-articles-de-le-cote-obscur/stapled-pussy#comments" title="Tu peux r&eacute;pondre par ici.">8 COMS !</a></span>			</div><!-- .entry-meta -->

				<div class="entry-content">
								<p style="text-align: center;"><img class="aligncenter size-full wp-image-8637" title="Je savais pas quoi mettre." src="https://monpremiersiteinternet.com/wp-content/uploads/2012/04/Volkswagen.jpg" alt="" width="350" height="350" /> <a href="https://monpremiersiteinternet.com/2012/les-articles-de-le-cote-obscur/stapled-pussy#more-8636" class="more-link"><center><b><span class="meta-nav">&rarr;</span> LÀ TU VOIS PAS TOUT LE TRUC DONC CLIQUE ICI <span class="meta-nav">&larr;</span></b></center></a></p>
											</div><!-- .entry-content -->

			<div class="entry-utility">
									<span class="cat-links">
						<span class="entry-utility-prep entry-utility-prep-cat-links">C'est</span> <a href="https://monpremiersiteinternet.com/mes-categories/ilfautetremajeurpourallerla" title="Voir tous les articles dans +18" rel="category tag">+18</a>					</span>
					<span class="meta-sep">|</span>
								<span class="comments-link"><a href="https://monpremiersiteinternet.com/2012/les-articles-de-le-cote-obscur/stapled-pussy#comments" title="Commentaire sur Stapled pussy">8 suce-boules</a></span>
													<span class="meta-sep">|</span>
					<span class="tag-links">
						<span class="entry-utility-prep entry-utility-prep-tag-links"><a href="#" title="Afficher / Masquer" class="displaytags">Tags</a></span> <div class="tagslist"><a href="https://monpremiersiteinternet.com/mes-mots-cles/chatte-cousue" rel="tag">chatte cousue</a> ~ <a href="https://monpremiersiteinternet.com/mes-mots-cles/cousues" rel="tag">cousues</a> ~ <a href="https://monpremiersiteinternet.com/mes-mots-cles/extreme" rel="tag">Extrême</a> ~ <a href="https://monpremiersiteinternet.com/mes-mots-cles/levres" rel="tag">lèvres</a> ~ <a href="https://monpremiersiteinternet.com/mes-mots-cles/maso" rel="tag">maso</a> ~ <a href="https://monpremiersiteinternet.com/mes-mots-cles/my-little-pony" rel="tag">my little pony</a> ~ <a href="https://monpremiersiteinternet.com/mes-mots-cles/sado" rel="tag">sado</a> ~ <a href="https://monpremiersiteinternet.com/mes-mots-cles/sm" rel="tag">sm</a> ~ <a href="https://monpremiersiteinternet.com/mes-mots-cles/vagin-cousu" rel="tag">vagin cousu</a></div>					</span>
							</div><!-- .entry-utility -->
		</div><!-- #post-## -->

		<div class="sep"></div>

			<div id="post-8622" class="post-8622 post type-post status-publish format-standard hentry category-ilfautetremajeurpourallerla category-creations tag-amonium tag-mpsi tag-putricide tag-quizz tag-shemale tag-trans">
			<h2 class="entry-title"><span class="nsfw">[+18] </span><a href="https://monpremiersiteinternet.com/2012/les-articles-de-le-cote-obscur/grand-quizz-putricide-damonium%e2%80%8f" title="Je kiffe trop &quot;Grand quizz (Putricide d&#8217;amonium)‏&quot;" rel="bookmark">Grand quizz (Putricide d&#8217;amonium)‏</a></h2>

emiechinus auritus

Liste alphabétique des noms vernaculaires attestés3 en français.
Note : certaines espèces ont plusieurs noms et, les classifications évoluant encore, certains noms scientifiques ont peut-être un autre synonyme valide. En gras, l'espèce la plus connue des francophones.

On appelle aussi « hérissons d'Asie » les gymnures (Galericinae sp.) qui toutefois sont dépourvus de piquants8.

Classification[modifier]

Les hérissons sont classés dans les taxons suivants :

Évolution[modifier]

Les hérissons sont une bonne illustration de l'hypothèse selon laquelle l'évolution des espèces se fait en fonction de leurs besoins et non pas par mimétisme. Le Hérisson d'Algérie (Erinaceus algirus) et Neotetracus sinensis sont des espèces assez proches l'une de l'autre, de même que le Grand hérisson (Setifer setosus) l'est de Microgale longicaudata. Pourtant ce sont le Hérisson d'Algérie et le Grand hérisson qui ont un aspect physique très proches l'un de l'autre, ayant développé chacun de leur côté des piquants, sans même se rencontrer. Les poils piquants et durs se sont probablement révélés, de façon parallèle, une arme efficace contre les prédateurs de ces deux espèces plus grosses, contrairement à leur homologue respectif dont l'aspect fait penser aux musaraignes11.

Les hérissons dans la culture[modifier]

Article détaillé : Hérisson dans la culture.

Les hérissons sont très présents dans la culture, le folklore et les croyances populaires12.

En héraldique, le hérisson est souvent présent comme emblème sur des blasons.

Statut de protection du hérisson[modifier]

Le hérisson bénéficie d'un statut de protection total par l'arrêté du 17 avril 1981. Il est donc interdit en tout temps et sur tout le territoire français, de détruire, capturer ou enlever, de naturaliser, qu'il soit vivant ou mort, de transporter, d'utiliser, de commercialiser le Hérisson d'Europe.

Notes et références[modifier]

  1. Le Mercredi, on converge... [archive]. Consulté le 14 mars 2012
  2. Voir "Hérisson" dans TLFI [archive]
  3. Attention aux appellations et traductions fantaisistes circulant sur l'Internet
  4. Hérisson [archive] sur Terra nova [archive]
  5. a, b, c, d, e, f, g, h et i Hérisson [archive] sur l'Encyclopédie Larousse en ligne
  6. a, b, c, d, e, f, g, h, i, j, k, l, m et n (en) Murray Wrobel, 2007. Elsevier's dictionary of mammals: in Latin, English, German, French and Italian. Elsevier, 2007. ISBN 0444518770, 9780444518774. 857 pages. Rechercher dans le document numérisé [archive]
  7. Le Petit futé, Namibie Lire en ligne [archive] page 56.
  8. a et b Meyer C., ed. sc., 2009, Dictionnaire des Sciences Animales. consulter en ligne [archive]. Montpellier, France, Cirad.
  9. a et b Nom vernaculaire en français d’après Termium plus [archive], la banque de données terminologiques et linguistiques du gouvernement du Canada
  10. XMLittré v1.3 : Hérisson [archive]
  11. R. Dawkins, 1941. Climbing Monts Improbable. Ed. W. W. Norton & Company. ISBN 0-393-03930-7. Lire le document en ligne [archive], Chapitre 1 et figure 1.9
  12. Évolution de l'image du hérisson. Troisième partie d'une thèse de l'École Vétérinaire de Nantes. 2001 Lire le document pdf [archive]

Voir aussi[modifier]

Sur les autres projets Wikimedia :

Articles connexes[modifier]

Liens externes[modifier]

2012 à 23:13:47

Avis : Très bon excellent!

Voir tous les commentaires

Dans +18, Créas perso, Culturectum, THE INTERNET. Là t'as le permalien. Et là tu peux voir les tags.
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

10 coms pour FLOOD %~#{#{[|`\^[[`^°065489%°_è-")^%24[|[|`{[90¨%5670657FGY?.

Laisser un commentaire

C'est bon, les autres verront pas ton mail. Et les * c'est que c'est obligenculé.

Va vite sur monpremiersiteinternet.com pour plus de lol.

(J'déconne ça sert à rien)