|
Cet article constitue une introduction au langage XHTML .
Au départ, HTML ( HyperText Markup Language ) est le langage utilisé pour coder les pages web et leur donner le formatage ou l'aspect désiré.
Par la suite, il était plus avantageux de séparer la structure du texte ( paragraphes, listes, tableaux, titres... ) avec les éléments de décoration ( couleur de fond, couleur de police, images, bordures, ... ), ce qui a donné naissance au couple XHTML + CSS .
Un fichier HTML est un fichier portant une extension du type .html ou .htm . Rappelons qu'il y a deux sortes de programmes pour lire ce type de fichiers :
- un navigateur web, qui interprète le code HTML pour afficher la page telle que voulue,
- un éditeur de texte, pour voir ou modifier le code HTML.
Afin de créer nos propres pages web, il nous faudra donc un éditeur ( qui se nomme PsPad dans notre cas ) pour écrire la structure, et un navigateur ( Firefox ) pour observer le résultat.
Structure d'un document
Une balise HTML est un ensemble de caractères qui délimitent et précisent le formatage ou l'aspect d'un élément de la page.
Exemple :
On remarque que le "code" HTML est compris entre une balise "ouvrante" ( à savoir "<html>" ) et une balise "fermante" ( "</html>" ).
Nous verrons les types de balises un peu plus loin.
La structure d'une page se découpe en plusieurs morceaux :
- présentation du code de la page ( en bleu clair ) puis début du code HTML ( ouverture par la balise <html> avec quelques déclarations, comme la langue, …),
- les balises <head> qui contiennent un ensemble d'informations usuelles concernant la page ( mots-clé, scripts à utiliser, … ),
- les balises <body> avec le contenu de la page,
- fermeture de la balise <html>.
Le squelette d'une page HTML est donc de la forme :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
ENTÊTE DE LA PAGE
</head>
<body>
CONTENU DE LA PAGE
</body>
</html>
On remarque que les balises <head> et <body> sont des balises enfants de la balise <html>.
Afin de garder une certaine lisibilité, on décale de la même manière les "enfants" d'une balise : on voit ci-dessus que les balises <html> sont au même niveau, puis <head> et <body> sont décalés de la même manière, puis leurs contenus.
Balises élémentaires
Pour un codage dans les normes actuelles, la page html ne doit contenir que la structure de la page, sans se soucier de l'aspect. Celui-ci sera intégralement fait grâce aux feuilles de styles CSS, que l'on verra plus tard, et qui permet infiniment plus de variations.
Afin de coder correctement une page HTML, il faut bien garder en mémoire la remarque suivante :
A chaque type d'information, correspond une balise précise.
Voici donc quelques balises élémentaires pour structurer un texte :
- Titres ( de h1 à h6 par ordre décroissant de taille : les balises <h1> forment donc le titre le plus grand ) :
- Délimitation d'un paragraphe :
<p>Texte du paragraphe</p>
- Balise auto-fermante effectuant des sauts de ligne :
- Liste ordonnée : une liste numérotée
Chaque “li” représente une numérotation de la liste.
- Liste non-ordonnée : une liste à puce
Même remarque.
- Image : pour insérer une image. Le commentaire alternatif est prévu pour les gens n'affichant pas les images dans leurs navigateurs.
<img src="ADRESSE DE L'IMAGE" alt="COMMENTAIRE ALTERNATIF" />
C'est encore une balise auto-fermante.
- Lien : pour insérer un lien vers une autre page
<a href="ADRESSE DU LIEN">TEXTE POUR LE LIEN</a>
- Ancre : permet de créer un lien vers un paragraphe particulier d'une page
<a name="NOM DE L'ANCRE"></a>
Pour utiliser cette ancre, c'est-à-dire pour créer un lien vers l'intérieur d'une page, il suffit de l'appeler à l'aide d'un lien en précisant le nom de l'ancre avec le symbole # :
<a href="#NOM DE L'ANCRE">TEXTE POUR LE LIEN</a>
Une autre balise auto-fermante :
A propos des adresses de liens
On utilise des adresses soit pour des liens vers des pages, soit pour des images. Il existe à cet effet deux méthodes :
- les adresses relatives : une adresse construite à partir de celle du fichier html,
- les adresses absolues : l'adresse complète.
Exemple sous linux :
Imaginons que la page HTML se trouve dans le dossier /var/www/, et que cette page contienne une image chat.jpg se trouvant dans le même dossier, et une image chien.jpg se trouvant dans le dossier /var/www/images/. Alors :
- l'adresse relative de chat.jpg est simplement "chat.jpg", car l'image se trouve dans le même dossier que la page html,
- l'adresse absolue de chat.jpg est "/var/www/chat.jpg",
- l'adresse relative de chien.jpg est "images/chien.jpg",
- l'adresse absolue de chien.jpg est "/var/www/images/chien.jpg".
Utiliser des adresses absolues est plus lourd que des adresses relatives, mais limite aussi les erreurs.
Exemple sous windows :
Imaginons que la page HTML se trouve dans le dossier C:\users\www\, et que cette page contienne une image chat.jpg se trouvant dans le même dossier, et une image chien.jpg se trouvant dans le dossier C:\users\www\images\. Alors :
- l'adresse relative de chat.jpg est simplement "chat.jpg", car l'image se trouve dans le même dossier que la page html,
- l'adresse absolue de chat.jpg est "C:\users\www\chat.jpg",
- l'adresse relative de chien.jpg est "images\chien.jpg",
- l'adresse absolue de chien.jpg est "C:\users\www\images\chien.jpg".
Utiliser des adresses absolues est plus lourd que des adresses relatives, mais limite aussi les erreurs.
Exemple
Le résultat suivant a été obtenu avec le code situé en-dessous :
Un grand titre
Un petit titre
- Premier élément
- Deuxième élément
- Premier élément numéroté
- Deuxième élément numéroté
Lien vers Google
CODE :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<h1>Un grand titre</h1>
<h6>Un petit titre</h6>
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
</ul>
<br />
<hr />
<ol>
<li>Premier élément numéroté</li>
<li>Deuxième élément numéroté</li>
</ol>
<a href="http://www.google.de">Lien vers Google</a>
|
Le fait de sauter des lignes dans le code ne change rien, seules les balises sont prises en compte par le navigateur.
Remarques
Il y a cependant des remarques très importantes pour éviter les erreurs classsiques :
-
chaque navigateur web interprète les balises d'une façon sensiblement différente, donc l'affichage n'est pas forcément le même avec Firefox ou Internet Explorer ( par exemple… )
-
la structure de la page créée doit être bien ordonnée et lisible, pour faciliter la résolution d'éventuels problèmes.
-
les balises doivent toujours être imbriquées correctement. Par exemple :
n'est pas correct , il faudra plutôt écrire :
( ce qui signifie un lien dans un paragraphe ).
Exercice
-
Créer à l'aide de PsPad dans le dossier "Eigene Dateien" deux fichiers index.html et article1.html .
-
Insérer dans chacune de ces pages le squelette d'un document XHTML.
-
Modifier les deux pages de façon à obtenir le résultat affiché par le projecteur ou dans les images index.jpg et article1.jpg, en n'utilisant que les balises citées précédemment.
Tableaux
Utiliser la synthèse suivante pour organiser les 4 paragraphes de la page d'index comme sur l'image. Une fois cela de fait, trouver la propriété permettant d'afficher dans un tableau la bordure ou non.
Significations :
- th : Table Header ( facultatif ) : pour le titre d'une colonne
- tr : Table Raw : une ligne
- td : Table Data ( vive l'anglais ! ) : une cellule.
Types de balises et conteneurs
Cette notion est capitale pour créer des pages web conformes et pour réaliser une mise en page correcte :
Exercice
- Cherchez sur le web la définition et la différences entre les balises en ligne ( ou En-ligne ou Inline ) et les balises en bloc ( ou Bloc-level ).
- Classer les balises citées plus haut ainsi que les nouvelles dans les catégories “balise en ligne” et “balise en bloc”.
- Peut-on mettre une balise de type "ligne" dans une balise de type "bloc" ? L'inverse ?
Une balise de type"ligne" dans une balise de type "ligne" ?
Une balise de type "bloc" dans une balise de type "bloc" ?
- Voyons si vous avez compris : Est-il possible d'imbriquer
- une balise de type <h.></h.> dans un lien ?
- une balise de type <img … /> dans un paragraphe ?
- Chercher la signification et la différences entre les balises <div>…</div> et <span>…</span> .
|
XHTML
