LES BALISES HTML :
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 :
En temps normal, votre balise <html> doit ressembler à ceci : Code : 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 : HTML
Code : HTML
<!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
|
||||
<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 : HTML
On peut aussi s'en servir pour 2-3 autres choses : Code : HTML
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. |
||||
<meta />
|
Cette balise permet de définir les
propriétés de la page web.Voici quelques exemples pratiques :
Code : HTML
|
||||
<script>
|
Permet de placer un script.
On l'utilise souvent pour mettre du code Javascript : Code : HTML
|
||||
<style>
|
Permet de définir du code CSS pour
la page.
On lui met l'attribut type="text/css". Exemple : Code : HTML
|
||||
<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 : HTML
|
Balises de
structuration du texte
Balise
|
Type
|
Description
|
||
<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 : HTML
|
||
<blockquote>
|
Block
|
Citation (longue)
Vous devez obligatoirement mettre une balise de paragraphe à l'intérieur du blockquote. Par exemple : Code : HTML
|
||
<cite>
|
Inline
|
Citation (moyenne)
|
||
<q>
|
Inline
|
Citation (courte)
|
||
<sup>
|
Inline
|
Mise en exposant
|
||
<sub>
|
Inline
|
Mise en indice
|
||
<strong>
|
Inline
|
Mise en valeur (forte)
Le texte est généralement mis en gras. |
||
<em>
|
Inline
|
Mise en valeur (faible)
Le texte est généralement mis en italique. |
||
<h6>
|
Block
|
Titre de niveau 6
|
||
<h5>
|
Block
|
Titre de niveau 5
|
||
<h4>
|
Block
|
Titre de niveau 4
|
||
<h3>
|
Block
|
Titre de niveau 3
|
||
<h2>
|
Block
|
Titre de niveau 2
|
||
<h1>
|
Block
|
Titre de niveau 1
|
||
<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
|
||
<a>
|
Inline
|
Lien hypertexte.
Indiquez l'url de destination grâce à l'attribut href : Code : HTML
|
||
<br />
|
Inline
|
Retour à la ligne
|
||
<p>
|
Block
|
Paragraphe
|
||
<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
|
||
<ol>
|
Block
|
Liste à puces numérotée. Vous
devez mettre un <li></li> par élément de la liste. Exemple :
Code : HTML
|
||
<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
|
||
<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
|
||
<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 :
|
||
<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>
|
||
<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
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
|
||
<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. |
Aucun commentaire:
Enregistrer un commentaire