Initiation à l’intégration XHTML/CSS - séance 1

sept
20
2009

Première séance de cours, dans le cadre de la formation proposée aux étudiants SRC Hunan, dispensée par l’IUT Michel de Montaigne, Bordeaux III.

Sources

Cet article correspond à la séance n°1, il a été rédigé en compilant les sources provenant de multiples auteurs que nous remercions tous :

http://www.la-grange.net/w3c/html4.01/cover.html
Nicolas Royackkers - Le langage xhtml/css - Université de Picardie Jules Verne.

Initiation au XHTML

Le XHTML est un langage ayant sa propre sémantique (grammaire)

Le XHTML est un langage de description de document, c’est à dire que son vocabulaire et sa grammaire, sa sémantique ont pour but non pas de définir l’aspect de la page mais décrire son contenu.
Il est du ressort d’un autre composant de définir l’aspect final à l’écran ou à l’impression. Ce composant est le module d’affichage par défaut du navigateur que vous utilisez mais vous pourrez utiliser des feuilles de style (Cascading Style Sheets ou CSS) pour l’adapter.

Les règles de grammaire en XHTML sont assez simples mais strictes

Les mots clés sont des balises contenus entre des “<” et des “>”.
Les balises sont obligatoirement en minuscules.

Une balise peut contenir une ou plusieurs informations complémentaires appelées “attributs“. Chaque attribut doit avoir une valeur qui s’écrit entre “guillemets doubles” (”) précédés du signe “=” :
Ici, la balise qui débute un lien, contient l’attribut “href” (sa destination) dont la valeur est #top (le haut de la page). Ce qui donne : haut de la page
1 <a href="#top">haut de la page</a>
Toute balise doit être ouverte puis fermée. Pour fermer une balise on la répète après son contenu en ajoutant un “/”
1 <strong>...</strong>
La plupart des balises s’ouvrent puis se ferment, mais certaines sont auto-fermantes.
Les balises peuvent être imbriquées mais elles ne peuvent pas être entrelacées.
1. Exemple correct
  1
  <h1>Bonjour le <a href="#top">monde</a></h1>
2. Exemple incorrect
  1
  <h1>Bonjour le <a href="#top">monde</a></h1>
Il ne peut y avoir qu’un élément racine, dans notre cas la balise :
<html> </html>

Remarque

Les navigateurs web actuels ont l’habitude de travailler avec des pages pas toujours très propres au niveau du code html. Cependant, cela ne doit pas nous servir de prétexte pour écrire n’importe comment ! La qualité technique du code de la page est la garantie du bon affichage chez le maximum d’utilisateurs.

Le code source d’une page web…

Dans un nouveau navigateur ouvrée la page http://www.natural-net.fr/ et afficher son code source

Les lignes d’initialisation

En tout début de fichier XHTML, on trouve une série de lignes ne faisant pas partie de la page en elle-même :

Cette ligne obscure signifie juste que la page qui suit déclare être conforme strictement au standard « XHTML 1.0 strict ». C’est à dire que l’auteur a vérifié que la page respecte la totalité des règles techniques du standard XHTML 1.0 strict avant de la publier.



1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

La balise racine du document XHTML

Après la ou les lignes d’initialisation, se positionne la balise racine du document. C’est le début de la page web.

La balise HTML est pourvue de 3 attributs :

xml:lang et lang, ces 2 attributs renseignent sur la langue du document
xmlns indique le standard selon lequel sera construite la page



1
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">Contenu de la page ici</html>

La page web est scindée en 2 grandes parties :

Toutes les pages web sont en fait composées de 2 grandes parties séparées dans 2 balises différentes :

head : entête de la page web
Les éléments contenus entre les balises <head></head> sont dits invisibles car ils n’apparaissent pas dans le navigateur Internet.
1 2 3 <head> Code html non visible de l’internaute </head>
body : le corps de la page web
Les éléments contenus entre les balises <head></head> correspondent au code html qui permet de générer la page web sur l’écran de l’internaute.
1 2 3 <body> Code html visible de l’internaute </body>

Le contenu des balises HEAD

La balise TITLE

La tête du document contient obligatoirement un élément TITLE dans lequel vous indiquez le titre du document (uniquement du texte sans aucune autre balise). Cet élément ne fait pas parti du texte affiché de la page. Il est généralement utilisé dans la barre de titre de la fenêtre. C’est le seul sous-élément obligatoire de ….



1
<title>Titre de mon document</title>

La balise d’encodage des documents

Pour des raisons de compatibilité l’encodage de la page (iso-8859-15; utf-8,…) est précisé grâce à une balise <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/>.



1
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/>

Les autres balises importantes pour le référencement

Au sein de la tête du document se trouvent des balises importantes pour le référencement :

Description : décrit en une vingtaine de mots sous forme de phrase le contenu de la page
Keywords : présente la liste de mots clés associés par la page, chaque mot clé est séparé par des virgules.



1
<meta name="description" content="Cet attribut contient la description de la page" />



1
<meta name="keywords" content="mot clé n°1, mot clé n°2, mot clé n°3, mot clé n°4," />

Remarque : Les balises META sont des balises auto-fermantes.

Le contenu des balises BODY

Le contenu du corps de page est bien sur le plus complexe car il doit pouvoir décrire la hiérarchisation du contenu du texte (chapitres, sous-chapitres, paragraphes et sauts de ligne, listes multiples, tableaux complexes de présentation de résultats, images) que du contenu fonctionnel de la page (présence d’un menu de navigation, liens hypertextes au sein de la page, vers d’autres pages ou sites et autres éléments éventuellement interactifs).

Un contenu hiérarchisé :

La page web contient entre les balises <body></body> du contenu structuré et hirérachisé :

Balises <p>texte</p> contiennent les paragraphes de texte
Balises <h1>titre</h1> à <h6>titre</h6> contiennent les titres et sous-titres sui structurent le texte
Balise <ul><li>premier item de la liste 1</li></ul> permettent de construire des listes, des énumérations.

La page web contient entre les balises <body></body> du contenu fonctionnel :

Balises <a>texte du lien hypertexte</a> contient les hyperliens
- La balise a possède comme attribut l’élément href=” ” qui contient le lien hypertexte.
  1 <a href="http://www.google.fr">Un lien vers www.google.fr</a>
Balises <img/> permettent d’appeler au sein de la page des images. L’appel à l’image se fait via l’attribut src=” ”
- La balise img contient un attribut alt =” “ permettant de « traduire » l’image pour les internautes naviguant sans images.
  1 <img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="Google" />
- Remarque : Les balises <img> sont des balises auto-fermantes.

Exemple du code source d’une page web simple et de son rendu

Le code suivant permet d’afficher dans un navigateur la page web proposée dans l’image ci-dessous.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" />
<title>Titre de mon document</title>
<meta name="description" content="Cet attribut contient la description de la page" />
<meta name="keywords" content="mot clé n°1, mot clé n°2, mot clé n°3, mot clé n°4," />
</head>
<body>
<h1>titre de l'ouvrage</h1> 
<h2>titre du livre</h2>
<h3>titre de la section</h3> 
<h4>titre du chapitre</h4>
<h5>titre du sous-chapitre</h5> 
<h6>titre du 2ème niveau de sous-chapitrage</h6>
<p>ici le premier paragraphe de texte du paragraphe du 2ème niveau de chapitrage</p>
<p>ici le second paragraphe de texte du paragraphe du 2ème niveau de chapitrage</p>
<p><a href="http://www.google.fr">Un lien vers  www.google.fr</a></p>
<p><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" /></p>
<ul>
	<li>choix n°1</li>
	<li>choix n°2</li>
	<li>choix n°3</li>
	<li>choix n°4</li>
	<li>choix n°5</li>
</ul>
</body>
</html>

Sélectionner ce code source avec votre souris et le copier
Ouvrir un éditeur de texte (bloc note ou notepad,…)
Coller le code dans l’éditeur de texte
Enregistrer ce document sur votre bureau avec comme extension .html
Exécuter ce document avec un navigateur Internet
Vous devriez obtenir pour cette première page Internet que vous avez créé le rendu suivant :

Rendu de la page web générée avec le code source présenté précédemment