LES BALISES HTML



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 :
  • 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 : HTML

<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 : 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
1
<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 : HTML

<!-- 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" />
<!-- 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.

<meta />
Cette balise permet de définir les propriétés de la page web.Voici quelques exemples pratiques :

Code : HTML

<!-- 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" />


<script>
Permet de placer un script.
On l'utilise souvent pour mettre du code Javascript :

Code : HTML
1
2
3
<script type="text/javascript">
/* Votre script ici */
</script>
<style>
Permet de définir du code CSS pour la page.
On lui met l'attribut type="text/css".

Exemple :
Code : HTML

<style type="text/css">
/* Votre code CSS ici */
</style>
<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

<title>Les petites expériences chimiques de M. Dupont</title>

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

<acronym title="Central Intelligence Agency">C.I.A.</acronym>
<blockquote>
Block
Citation (longue)
Vous devez obligatoirement mettre une balise de paragraphe à l'intérieur du blockquote. Par exemple :

Code : HTML

<blockquote>
    <p>
        Texte de la citation
    </p>
</blockquote>
<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
1
<img src="Templates/images/smiley.png" alt=":)" />
<a>
Inline
Lien hypertexte.
Indiquez l'url de destination grâce à l'attribut href :

Code : HTML

<a href="autrepage.html">Rendez-vous sur l'autre page</a>
<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

<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 :
  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

<!-- 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

<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.

Aucun commentaire:

Enregistrer un commentaire