Recherche personnalisée

Liste des balises XHTML

Cette liste non exhaustive des balises XHTML qui existent. Vous trouverez un nombre de balises XHTML, dont certaines qu'on a vues dans le cours, d'autres non . Généralement, les balises qu'on n'a pas étudiées dans le cours sont des balises plus rarement utilisées. Vous pouvez vous servir de cette page comme page d'aide lorsque vous développez votre site web

Balise obligatoires d'une page Web

Ce sont les balises qui constituent le code minimale d'une page Web vide.

1. La balise de declaration :

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Cette balise sert à la page pour se faire reconnaître par l'explorateur du visiteur.

2. La balise html :

<html> Elle englobe tout le code de la page

3. Les balise d'entête :

Balise	Utilisation
<head>	Balise entête qui englobe tout le code de l'entête
<title>	Elle se trouve dans la balise de l'entête et donne letitre de la page <title>Titre du site</title>
<meta>	Elle indique le type du contenue de la page <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

4. La balise du corp

Balise	Utilisation
<body>	Elle englobe tout le code du texte de la page

Retourner au haut de la page.. haut de page…

1. Les balises d'entête :

Elles doivent toutes être situées dans l'en-tête de la page web, c'est-à-dire entre <head> et </head>

Balise	utilisation
<link />	Cette balise donne des informations sur la page web. On l'utilise aussi pour inclure une feuille de style CSS, Code : <link rel="stylesheet" media="screen" type="text/css" title="Mon style" href="style.css" /> Elle sert aussi à autres choses. Exemple code Pour indiquer la page d'accueil du site : <link rel="start" title="Accueil" href="entree.html" /> Pour indiquer la page d'aide du site : <link rel="help" title="Aide" href="Aide.html" /> Pour indiquer Fil RSS du site : <link rel="alternate" type="application/rss+xml" title="News de mon site" href="news.xml" /> Pour aficher l'icône du site (favicon) --> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta />	Elle définit les propriétés de la page web. Exemples Code : Table de caractères <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> Donne des informations sur Auteur de la page <meta name="author" content="Mr Seguin" /> Description de la page <meta name="description" content="La page de ..." />< Empêcher la mise en cache de la page par le navigateur <meta http-equiv="pragma" content="no-cache" /> Donne les Mots-clés de la page <meta name="keywords" content="art, sport, football, natation" /> Adresse de contact <meta name="reply-to" content="carabe@gmail.com" /> Rafraîchissement automatique tous les 10 secondes <meta http-equiv="refresh"content="10;URL=http://ab1de2ll3ah4.ifrance.com/>
<script>	Permet de placer un script.Exemple du code Javascript code : <script type="text/javascript">mettre votre script ici</script>
<style>	Définit du code CSS pour la page dans le cas où vous ne voulez pas de feuille de style. Attribut type="text/css" Exemple Code: <style type="text/css">Mettre votre code CSS ici </style>
<title>	Indique le titre de la page web. Code : <title>La perle du net</title>

Balises de structuration du texte

Ces baleses doivent être mises entre les balise body c'est à dire entre et </body>

Balise	Type	utilisation
<acronym>	Inline	Sert à définir des acronymes, comme P.T.T On utilise l'attribut title pour donner la définition de l'acronyme quand on pointe la sourie dessus Code : <acronym title="Poste Téléphone Télégramme">P.T.T.</acronym>
<blockquote>	Block	Citation (longue) Vous devez obligatoirement mettre une balise de paragraphe à l'intérieur du blockquote. Par exemple Code : <blockquote> <p> Texte de la citation</p></blockquote>
<cite>	Inline	Citation moyenne code: <cite>Texte de citation</cite>
<q>	Inline	Citation courte code: <q>Texte de citation</q>
<sup>	Inline	Mise en exposant code : <p>soit 2<sup>n</sup></p>
<sub>	Inline	Mise en indice code : <p>soit n<sub>2</sub></p>
<strong>	Inline	Forte mise en valeur généralement mis en gras.
<em>	Inline	Faibe mise en valeur généralement mis en italique.
<h1>	Block	Titre de niveau 1
<h2>	Block	Titre de niveau 2
<h3>	Block	Titre de niveau 3
<h4>	Block	Titre de niveau 4
<h5>	Block	Titre de niveau 5
<h6>	Block	Titre de niveau 6
<img />	Inline	Insère une image.Attributs obligatoires :src indique l'adresse de l'image et alt indique un texte de remplacement. Code: <img src="Templates/images/smiley.png" alt=":)" />
<a>		Lien hypertexte. Indiquel'url de destination par l'attirbut href. Code : <a href="autrepage.html">Rendez-vous sur l'autre page</a>
<br />	Inline	Retoure àla ligne
<p>	Inline	Paragraphe
<hr />	Inline	Crée une ligne de séparation horizontale
<pre>	Block	Le texte à l'intérieur de la balise <pre> sera affiché tel qu'il a été tapé dans le code (espaces et entrées compris). Une police de taille fixe est utilisée.

Retourner au haut de la page.. haut de page…

Balises de liste

Les balises XHTML permettant de créer des listes (listes à puces, listes numérotées, listes de définitions...)

Balise	Type	utilisation
<ul>	Block	Liste à puces non numérotée. Vous devez mettre un <li></li> par élément de la liste. Code : <ul> <li>Un élément</li> <li>Un autre élément</li> </ul>
<li>	list-item	Permet de créer un élément de liste. Le type de la balise est particulier car elle n'est ni block ni inline.
<ol>	Block	Liste à puces numérotée. Vous devez mettre un <li></li> par élément de la liste. Code : <ol> <li>Elément n°1</li> <li>Elément n°2</li> </ol>
<dl>	Block	Liste de définitions. Vous devez alterner chaque terme <dt> par sa définition <dd>. Code : <dl> <dt>Scie</dt> <dd>instrument pour couper</dd> <dt>Element</dt> <dd>Unité d'un ensemble</dd> </dl>
<dt>	Block	Elément à définir
<dd>	Block	Définition

Balises de tableau

Balise	Type	utilisation
<table>	Block	Délimite un tableau. Exemple de tableau simple. Code : <table> <caption>Liste d'éléves</caption> <tr> <th>Nom</th> <th>Age</th> <th>Sex</th> </tr> <tr> <td>Lila</td> <td>16 ans</td> <td>fille</td> </tr> <tr> <td>Michelle</td> <td>16 ans</td> <td>Garçon</td> </tr> <tr> <td>Salah</td> <td>17 ans</td> <td>Garçon</td> </tr> </table>
<caption>		Donne un titre à la table
<tr>		ligne de la table
<th>		Cellule d'entête du tableau
<td>		Cellule du tableau

Balises de formulaire

Balise	Type	utilisation
<form>	Block	Délimite un formulaire. On lui donne 2 attributs : 1. method : indique la méthode d'envoi du formulaire (get ou post). 2. 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. S'utilise à l'intérieur d'un <fieldset>
<label>	Inline	Titre d'un élément de formulaire.Onlui done l'attribut for pour indiquer l'ID de l'élément auquel correspond le label
<input />	Inline	Champ de formulaire. Il existe plusieur types de champs différents. Choisissez le type de champ qui vous convien grâce à l'attribut type Code : <!-- 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 d'envoi --> <input type="submit" /> <!-- Bouton de remise à zéro --> <input type="reset" /> <!-- Champ caché --> <input type="hidden" />
<textarea>	Inline	Zone de saisie multiligne.On définit sa taille grâce aux attributs rows et cols (nombre de lignes et colonnes) ou 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 : <select name="pays"> <option value="france">France</option> <option value="espagne">Espagne</option> <option value="italie">Italie</option> <option value="maroc">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 une grande liste déroulante. On utiliser l'attribut label pour donner un nom au groupe.

Retourner au haut de la page.. haut de page…

Vous pouvez copier, modifier des copies de cette page, tant que cette note apparaît clairement
Vous devez citer le nom de l'auteur original et faire un lien hypertexte vers http://apprendre.uuuq.com