|
Balises de premier niveau
Les balises de premier niveau sont
les principales balises qui structurent une page XHTML. Elles sont
indispensables pour réaliser le "code minimal" d'une page web.
|
Balises
|
Description
|
|
<html>
|
Balise
principale de toute page web.
On lui donne généralement 2 attributs :
- xmlns : la
liste des balises xhtml existantes (appelée espace
de noms).
- xml:lang : la
langue utilisée sur votre page web. Utilisez "fr"
pour un document en français.
En temps normal, votre balise <html> doit ressembler à ceci :
Code : Xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr">
</html>
|
|
<head>
|
En-tête de
la page
|
|
<body>
|
Corps de
la page
|
Le code minimal d'une page XHTML
Vous trouverez ci-dessous le code minimal de toute page web XHTML.
Code : Xhtml
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr">
<head>
<title>Titre du site</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
</body>
</html>
Balises d'en-tête
Ces balises sont toutes situées dans
l'en-tête de la page web, c'est-à-dire entre <head>
et </head>
|
Balise
|
Description
|
|
<title>
|
Titre de
la page web.
C'est probablement la balise la plus importante d'une page web. Choisissez
bien votre titre car il a beaucoup d'importance pour les moteurs de recherche
(ils donnent de l'importance aux mots qui se trouvent dans le titre).
Code : Xhtml
<title>Les petites expériences chimiques de M. Dupont</title>
|
|
<style>
|
Permet de
définir du code CSS pour la page.
On lui met l'attribut type="text/css".
Exemple :
Code : Xhtml
<style type="text/css">
/* Votre code CSS ici */
</style>
|
|
<script>
|
Permet de
placer un script.
On l'utilise souvent pour mettre du code Javascript
:
Code : Xhtml
<script type="text/javascript">
/* Votre script ici */
</script>
|
|
<meta />
|
Cette
balise permet de définir les propriétés de la page web.
On s'en sert pour une foule de choses. Voici quelques exemples pratiques :
Code : Xhtml
<!--
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"
/>
En général, on utilise surtout le meta pour la
table de caractères.
La description et les mots-clés de la page n'influencent pratiquement plus
les moteurs de recherche.
Inutile donc de passer du temps à mettre tout plein de mots là-dedans
|
|
<link />
|
Cette
balise permet d'indiquer certaines informations sur la page web.
On l'utilise le plus souvent pour inclure une feuille de style CSS, comme
ceci :
Code : Xhtml
<link rel="stylesheet"
media="screen" type="text/css" title="Mon
design" href="design.css" />
On peut aussi s'en servir pour 2-3 autres choses :
Code : Xhtml
<!-- 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 -->
<link rel="alternate" type="application/rss+xml" title="News de mon site" href="news.xml"
/>
<!-- Icône du site (favicon) -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"
/>
La favicon est une icône qui s'affiche généralement
à gauche de l'adresse de votre site sur le navigateur de vos visiteurs. C'est
un moyen de personnaliser un peu plus son site.
Quant au fil RSS, il s'agit d'une technique permettant à vos visiteurs de
suivre l'actualité de votre site depuis un logiciel spécial (un navigateur
tel que Firefox le fait d'ailleurs). En général on
génère des fils RSS en PHP (si vous ne faites que du XHTML / CSS ça ne vous
intéresse donc pas pour le moment).
|
Balises de structuration du texte
|
Balise
|
Type
|
Description
|
|
<p>
|
Block
|
Paragraphe
|
|
<br />
|
Inline
|
Retour à
la ligne
|
|
<a>
|
Inline
|
Lien
hypertexte.
Indiquez l'url de destination grâce à l'attirbut href :
Code : HTML
<a href="autrepage.html">Rendez-vous sur
l'autre page</a>
|
|
<img />
|
Inline
|
Insère une
image.
Utilisez les attributs src (pour indiquer l'adresse
de l'image) et alt (pour indiquer un texte de
remplacement). Ces 2 attributs sont obligatoires. Exemple :
Code : HTML
<img src="Templates/images/smiley.png" alt=":)"
/>
|
|
<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. Par exemple :
Code : Xhtml
<blockquote>
<p>
Texte de la citation
</p>
</blockquote>
|
|
<acronym>
|
Inline
|
Sert à
définir des acronymes, comme C.I.A.
On utilise généralement l'attribut title pour
donner la définition de l'acronyme quand on pointe dessus :
Code : Xhtml
<acronym title="Central Intelligence Agency">C.I.A.</acronym>
|
|
<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 <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.
|
Balises de liste
Cette partie énumère toutes les
balises XHTML permettant de créer des listes (listes à puces, listes
numérotées, listes de définitions...)
|
Balise
|
Type
|
Description
|
|
<ul>
|
Block
|
Liste à
puces non numérotée. Vous devez mettre un <li></li> par élément
de la liste. Exemple :
Code : HTML
<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 :
Code : HTML
<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 :
Code : HTML
<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 :
Code : HTML
<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 :
- <thead>
- <tfoot>
- <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
/>
|
Block
|
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
<!--
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" />
Pensez à donner un nom à vos champs grâce à l'attribut name
|
|
<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 :
Code : HTML
<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 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 XHTML 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 : cette balise 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
|
