**\ Exemple HTML 4\ **

Le langage xhtml ================ HTML / xhtml ------------ Cet exemple illustre les différences syntaxiques les plus courantes entre un document écrit en HTML 4 et en XHTML 1.0 | **** | ****\ Exemple HTML 4\ **** | **

**\ Des éléments comme HTML, HEAD et BODY sont implicites, leurs balises ouvrantes et fermantes sont optionnelles.\ **
**\ De nombreuses balises fermantes sont optionnelles, notamment pour P (paragraphe) et LI (entrée de liste). | **
**\ Les noms d'éléments et d'attributs peuvent ****\ librement\ **** mélanger majuscules et minuscules.\ **
**\ Certains attributs ont une valeur par défaut ****.\ **
**\ Les guillemets ne sont pas ****\ toujours\ **** obligatoires autour des valeurs d'attribut.\ **
**\ Les éléments vides n'ont pas de syntaxe fermante ****.\ **

** ** **\ Exemple XHTML 1.0\ **

**\ Tous les éléments doivent être explicitement balisés.\ **
**\ Les balises fermantes ne sont pas optionnelles.\ **
**\ Les noms d'éléments et d'attributs ****\ doivent **** être en minuscules.\ **
**\ Tous les attributs doivent avoir une valeur explicite **** .\ **
**\ Les guillemets sont ****\ toujours\ **** obligatoires autour des valeurs d'attribut.\ **
**\ Les éléments vides doivent être fermés ****.\ **

** Balises de premier niveau ------------------------- Ce sont les balises qui structurent une page XHTML. Elles sont indispensables pour réaliser le "code minimal" d'une page web. - - - **Ainsi, voici le code minimal d'une page XHTML:** | | | | Titre du site | | | | | Balises d'en-tête ----------------- Ces balises sont situées entre et - - <style> - <script> - <meta /> - | Auteur de la page | <meta name="author" content="Jean Dupont" /> - | Description de la page | <meta name="description" content="La page personnelle de Jean Dupont" /> - | Mots-clés de la page | <meta name="keywords" content="expériences, recherche, laboratoire, chimie" /> - | Adresse de contact | <meta name="reply-to" content="monadresse@email.com" /> - | Empêcher la mise en cache de la page par le navigateur | <meta http-equiv="pragma" content="no-cache" /> - | Table de caractères | <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> - | Rafraîchissement automatique au bout de 10 secondes | <meta http-equiv="refresh" content="10; URL=http://www.monsite.com" /> - <link /> - | Une feuille de style CSS. | <link rel="stylesheet" media="screen" type="text/css" title="Mon design" href="design.css" /> - | La page d'accueil du site | <link rel="start" title="Accueil" href="index.html" /> - | Page d'aide du site | <link rel="help" title="Politique d'accessibilité" href="accessibilite.html" /> - | Fil RSS du site (permet à vos visiteurs de suivre l'actualité de votre site depuis un logiciel spécial) | <link rel="alternate" type="application/rss+xml" title="News de mon site" href="news.xml" /> - | Icône du site (apparaît à gauche de l'adresse dans le navigateur) | <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> Le lien hypertexte -------------------- Balise <a> (de type "inline") - | **Lien classique** | Indiquez l'url de destination grâce à l'attirbut href - | **lien vers un e-mail** | <a href="mailto:Mon\_Adresse?subject=Le\_sujet">Lien</a> - **lien vers une ancre** - cible : <a name="nom\_ancre"> - Lien sur la même page : <a href="#nom\_ancre"> - Lien sur une page externe : <a href="ancre.html#nom\_ancre"> Balises génériques ------------------ +----------+----------+-----------------------------------+ | Balise | Type | Description | +----------+----------+-----------------------------------+ | <span> | Inline | Balise générique de type Inline | +----------+----------+-----------------------------------+ | <div> | Block | Balise générique de type block | +----------+----------+-----------------------------------+ Balises de structuration du texte +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | Balise | Type | Description | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <p> | Block | Paragraphe | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <br /> | Inline | Retour à la ligne | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <img /> | Inline | Insère une image. | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <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 | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <em> | Inline | Mise en valeur (faible, le texte est généralement mis en italique.) | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <strong> | Inline | Mise en valeur (forte, le texte est généralement mis en gras.) | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <sub> | Inline | Mise en indice | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <sup> | Inline | Mise en exposant | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <q> | Inline | Citation (courte) | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <cite> | Inline | Citation (moyenne) | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <blockquote> | Block | Citation (longue). Vous devez obligatoirement mettre une balise de paragraphe à l'intérieur du blockquote | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <acronym> | Inline | Sert à définir des acronymes. (exemple:<acronym title="Central Intelligence Agency">C.I.A.</acronym>) | | | | On utilise généralement l'attribut title pour donner la définition de l'acronyme quand on pointe dessus | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <hr /> | Block | Crée une ligne de séparation horizontale | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <address> | Block | Permet d'indiquer une adresse, ou éventuellement l'auteur d'un document. | | | | Le texte est généralement mis en italique. | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <del> | Inline | Permer d'indiquer un texte qui a été supprimé. | | | | Le texte est généralement barré. | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <ins> | Inline | Permet d'indiquer un texte qui a été inséré. | | | | Le texte est généralement souligné. | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <dfn> | Inline | Permet d'indiquer une définition. | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <kbd> | Inline | Permet d'indiquer un code que doit taper le visiteur. | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <pre> | Block | Le texte à l'intérieur de la balise sera affiché tel qu'il a été tapé dans le code (espaces et entrées compris). Une police de taille fixe est utilisée. | +----------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------+ Balises de listes ----------------- +----------+-------------+------------------------------------------------------------------------------------------------------------------------------------------------------+ | Balise | Type | Description | +----------+-------------+------------------------------------------------------------------------------------------------------------------------------------------------------+ | <ul> | Block | Liste à puces non numérotée. | | | | Vous devez mettre un <li></li> par élément de la liste. | | | | Exemple : | | | | <ul> | | | | <li>Un élément</li> | | | | <li>Un autre élément</li> | | | | </ul> | +----------+-------------+------------------------------------------------------------------------------------------------------------------------------------------------------+ | <ol> | Block | Liste à puces numérotée. | | | | Vous devez mettre un <li></li> par élément de la liste. | | | | Exemple : | | | | <ol> | | | | <li>Elément n°1</li> | | | | <li>Elément n°2</li> | | | | </ol> | +----------+-------------+------------------------------------------------------------------------------------------------------------------------------------------------------+ | <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. On dit qu'elle est de type list-item. | +----------+-------------+------------------------------------------------------------------------------------------------------------------------------------------------------+ | <dl> | Block | Liste de définitions. Vous devez alterner chaque terme <dt> par sa définition <dd>. Exemple : | | | | <dl> | | | | <dt>Porte</dt> | | | | <dd>Ouverture dans un mur permettant d'entrer et de sortir</dd> | | | | <dt>Théâtre</dt> | | | | <dd>Lieu où l'on représente des ouvrages dramatiques</dd> | | | | </dl> | +----------+-------------+------------------------------------------------------------------------------------------------------------------------------------------------------+ | <dt> | Block | Terme à définir | +----------+-------------+------------------------------------------------------------------------------------------------------------------------------------------------------+ | <dd> | Block | Définition du terme | +----------+-------------+------------------------------------------------------------------------------------------------------------------------------------------------------+ Balises de tableau ------------------ +-------------+---------+---------------------------------------------------------------------+ | Balise | Type | Description | +-------------+---------+---------------------------------------------------------------------+ | <table> | Block | | Délimite un tableau. Voici un exemple de tableau simple : | | | | | <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> | - | Titre du 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. | +-------------+---------+---------------------------------------------------------------------+ | <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. | +--------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | <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 /> | Block | Champ de formulaire. Il existe de nombreux types de champs différents. Vous le spécifiez grâce à l'attribut type : | | | | | | | | 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> | Block | 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> | Block | Liste déroulante. Utilisez la balise <option> pour créer chaque élément de la liste : | | | | <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. Vous devez utiliser l'attribut label pour donner un nom au groupe. | +--------------+----------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+