15 min
15 min
Etude du langage HTML
Un document HTML est un fichier composé de texte et de balises HTML. Les balises HTML encadrent des parties de texte et précisent l'apparence, le sens et la structure du texte.
Exemples :
un texte est encadré par un balise qui précise qu'il doit apparaître en rouge dans le navigateur,
un texte est encadré par une une balise qui précise qu'il s'agit d'une citation,
un texte est encadré par une une balise qui précise qu'il s'agit d'un titre.
Une balise HTML s´écrit :
<balise> texte concerné par la balise </balise>
Certaines balises, comme le retour chariot (<br> en HTML4 et <br/> en XHTML1), sont uniques, c'est à dire qu'elles n'encadrent pas de texte et qu'elle ne sont pas fermées (pas de </balise>).
Les balises peuvent avoir un ou plusieurs attributs. Les valeurs des attributs sont toujours écrites entre guillemets. On écrit les balises avec des attributs de cette manière :
<balise attribut1="valeur" attribut2="autrevaleur">
ou <balise attribut1="valeur" attribut2="autrevaleur"> texte concerné par la balise </balise>
Un document HTML peut aussi contenir des commentaires qui ne seront pas affichés par le navigateur.
Exemple (visualisez le source de la page pour voir le rél commentaire) :
<!-- Ceci est un commentaire -->
Pour qu'un document soit considéré comme HTML il faut :
qu'il commence par une balise appellée DOCTYPE qui précise la version de HMTL utilisée, dans notre cas la version 4
que le contenu du document proprement dit soit contenu dans une balise <html> qui indique au navigateur web qu'il doit mettre en forme le texte comme du HTML. Sans ça le texte est considéré comme du texte simple et n'est pas mis en forme.
Les documents HTML comportent toujours 2 parties : l'entête, délimité par la balise <head> et le corps du document délimité par la balise <body>.
Exemple de document HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<!-- Entête du document -->
</head> <body>
<!-- Corps du document -->
</body>
</html>
L'entête, ou header, contient des informations sur la présentation et le contenu du document. Il est toujours placé au début, avant le corps du document.
L'entête contient :
Des informations sur la présentation du document. C'est dans l'entête que est indiqué quelles feuilles de styles sont employées :
Sous la forme d'un ou plusieurs liens vers une feuille de style externe (ici la feuille de style des documents SEMIR) : <link rel="stylesheet" href="/semir/CSS/general.css" type="text/css">
Sous la forme d'une balise <style>, dans laquelle seront spécifiés un ou plusieurs styles : <style type="text/css">
acronym { font-style : italic; }
.boite {
border-width: thin;
border-style: solid;
width: 80%;
padding: 0.2em;
background-color:#D0D0D0;
white-space: pre;
font-family: monospace;
}
</style>
Pour des informations détaillées sur l'utilisation des styles, consulter les pages Utiliser les feuilles de styles et Référence des balises autorisées
Des informations utilisées pour référencer le document dans les moteurs de recherche (Altavista).
Ces informations sont définies à l'intérieur de balises <meta>. Ces balises sont intégrées dans les modéles de document du SEMIR sous la forme :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Ludovic MAITRE">
<meta name="date" content="18/10/2000">
<meta name="description" content="Guide pour créer un document HTML avec les modèles du SEMIR">
<meta name="keywords" content="SEMIR,conseils,guide,CSS,dhtml,html,créer,structurer,structure,accessibilité">
Une balise Content-Type précise la page de code (l'alphabet) utilisée pour le document.
Cette balise n'a pas besoin d'être modifiée.
Une balise author précise l'auteur du document sous la forme "Prenom NOM".
Une balise date précise la date de derniére modification du document sous la forme "jj/mm/aa". Comme Altavista indexe le contenu de cette balise sous la forme d'une chaîne, il n'est pas obligatoire d'écrire la date en anglais. Pour information, les recherches avancées sur la date de modification d'un document se basent sur la date "système" de modification du document. Pour effectuer une recherche sur une date, on écrira dans le formulaire de recherche d'Altavista : date:07/11/00
Une balise description donne un résumé de la page.
C'est ce résumé qui est affiché en dessous du titre lors d'une recherche avec Altavista.
Une balise keywords contient les mots sous lesquels sera référencée la page dans les moteurs de recherche. Les mots-clés doivent être séparés par des virgules et peuvent contenir des accents.
Le titre est indiqué dans l'entête du document :
<title>Créer un document HTML</title>
Le titre est affiché en haut de la fenêtre du butineur web, et sert aussi pour référencer la page.
Certains moteurs de recherche ne permettent pas d'afficher les caractères accentués, ce qui oblige à utiliser les codes HTML pour les accents dans le titre du document.
Le corps du document peut contenir du texte, des images (les formats recommandés sont GIF et JPEG), des tableaux et tout autre élément autorisé en HTML (son,Flash...).
On trouve dans un document :
Un titre
Un sommaire
Une ou plusieurs parties
Le titre est présenté à l'intérieur d'une balise h1 :
<h1>Créer un document HTML</h1>
Ce qui donne :
En utilisant le modèle de document, il suffit de remplacer le titre du modèle par celui que l'on veut donner à son document.
On remarquera que l'on a deux fois le titre dans le document, une fois dans l'entête (balise <title>) et une autre fois au début du corps du document (balise <h1>).
Après le titre, se trouve le sommaire du document.
Il s'agit d'une liste des différentes parties du document, avec un lien vers chacune d'entre elles.
Exemple :
<ol> <!-- Indique le début de la liste numérotée Sommaire -->
<li> <!-- Indique le début d'un élément de la liste -->
<a href="#partie1"> <!-- Lien vers la 1ere partie (à l'intérieur de la page, d'où le # devant le nom du lien) -->
Partie 1 <!-- Titre de la partie, -->
</a>
</li> ....
</ol>
<!-- fin du sommaire -->
Ce qui donne :
....
Chaque partie du document expose une étape de réalisation ou un point du discours général.
Ces parties sont numérotées cependant si vous travaillez avec Netscape Composer ou StarOffice, ces logiciels modifient les balises et par conséquent les différentes parties ne sont plus numérotées après l'enregistrement du document.
Une partie de document se compose :
Le titre de partie est noté dans une balise <h2>.
Exemple :
<h2> Objectifs </h2>
donne :
Chaque partie du document est composée de plusieurs paragraphes, chacun exprimant une idée différente. Les paragraphes sont encadrés par une balise <p>. Si l'on a plusieurs phrases dans un paragraphe on peut les séparer par un retour à la ligne avec la balise <br>.
Exemple :
<p>Ce paragraphe illustre la manière d'utiliser la balise <p> pour structurer un document HMTL.<br> La structuration est nécessaire pour adapter l'information aux différents types de navigateurs susceptibles de lire les pages web.<br> Par exemple un navigateur i-mode ou WAP (deux normes concurrentes pour l'accès mobile à l'Internet) va afficher la page paragraphe par paragraphe (une page entière ne peut pas être affichée sur l'écran d'un portable).<br> Si le document n'est pas stucturé, le texte apparaîtra comme une "bouillie" trés longue et difficile à lire.</p>
Donne :
Ce paragraphe illustre la manière d'utiliser la balise <p> pour structurer un document HMTL.
La structuration est nécessaire pour adapter l'information aux différents types de navigateurs susceptibles de lire les pages web.
Par exemple un navigateur i-mode ou WAP (deux normes concurrentes pour l'accès mobile à l'Internet) va afficher la page paragraphe par paragraphe (une page entière ne peut pas être affichée sur l'écran d'un portable).
Si le document n'est pas stucturé, le texte apparaîtra comme une "bouillie" trés longue et difficile à lire.
On peut également trouver à l'intérieur d'une partie :
Sur l'usage de ces balises, consulter le site du World Wide Web Consortium.
Exemple de contenu de document :
<ol> <!-- Début de la liste des parties -->
<li> <!-- Début de partie -->
<a name="partie1"><h2> Titre de la partie </h2></a> <!-- Identique au titre du sommaire -->
<p> idée 1 </p> <!-- Paragraphes -->
<p> idée 2 </p>
<ul>
<!-- Liste simple -->
<li> élément 1 </li>
</ul> <h3>Souspartie 1</h3>
<p> idée 3 </p>
<!-- Tableau -->
<table border="1" summary="Tableau des numéros de téléphone">
<tr>
<th colspan=2> Tableau des numéros de téléphone </th>
</tr>
<tr>
<td> Nom </td><td> Tel. </td>
</tr>
<tr>
<td> Ubik </td><td> 0877853456 </td>
</tr>
</table>
....
<p> idée n< /p>
<!-- Image (ne pointe sur rien, pour voir l'intérêt de l'attribut ALT) -->
<img src="/images/image1.jpg" height="300" width="200" alt="Interactions des schémas, ne pointe sur rien, pour voir l'intérêt de l'attribut ALT">
</li> <!-- Fin de partie -->
<li>
<!-- autre partie -->
</li>
</ol> <!-- Fin de la liste des parties -->
Cela donne :
idée 1
idée 2
élément 1
idée 3
|
Tableau des numéros de téléphone |
|
|---|---|
|
Nom |
Tel. |
|
Bob |
0877853465 |
....
idée n
