Balises

Cours de XHTML
Introduction
XHTML n'est pas un langage de programmation proprement dit, il s'agit simplement d'un langage de balisage dont le
rôle est de formaliser l'écriture d'un document web avec des balises.
Une page XHTML est donc un simple fichier texte contenant des balises permettant de mettre en forme la page (les
titres, les paragraphes, les images, les liens…) et peut donc très facilement être conçue grâce à un simple éditeur de
texte.
Les outils pour préparer et tester notre travail

Nous avons besoin seulement d’un éditeur de texte pour écrire notre code XHTML. Nous pourrions très bien prendre
le bloc note de Windows, mais pour nous faciliter le travail, nous allons télécharger un éditeur un peu plus évolué à
l’adresse : http://www.elie-vignal.fr/cours/pspad.exe
Et d’un navigateur internet pour tester notre page style Internet Explorer ou Mozilla Firefox ou Chrome ou encore
Safari ou …
Créez un dossier « Cours XHTML » dans votre dossier personnel.
Fonctionnement des balises

Structure des balises
Les balises délimitent une fraction du document XHTML (paragraphe, titre...). Elles peuvent être imbriquées entre
elles et se présentent comme ci-dessous :
<balise attribut="valeur" attribut2="valeur2" >chaîne de caractères</balise>
On peut remarquer qu'une balise peut contenir trois types d'informations :
 Un nom de balise.
 Une liste d'attributs.
 Une chaîne de caractères.
Les balises sont toujours écrites en minuscule et fonctionnent généralement par paire: une balise ouvrante <balise>,
une balise fermante </balise> délimitant ensembles le contenu. Néanmoins quelques balises ne fonctionnent pas
par paire. Les balises d'images et de saut de ligne par exemple auront la syntaxe suivante :
<balise />
Règles d’imbrication
Dans l'exemple, ci-dessous, la balise 1 est parente de la balise 2.
<balise1> <balise2> (...) </balise2> (...) </balise1>
Lorsque plusieurs balises sont imbriquées, une règle simple s'applique : une balise ouverte à l'intérieur d'une autre
doit obligatoirement être refermée avant la fermeture de sa balise mère. Les balises ne peuvent donc pas être
imbriquées comme ceci :
<balise1> <balise2> </balise2> </balise1>
XHTML - Définition de Type de Document

La première balise de votre document doit être la balise de DTD. Elle sert à indiquer à quelles règles
d'écriture obéit le code d'une page XHTML. Il n’est pas nécessaire de retenir les différents DTD. Servez-
vous seulement du premier.
Ci-dessous les différentes DTD existant actuellement pour le XHTML:
XHTML1.0 strict (Actuellement, je recommande de prendre celui-ci)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1.0 transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML1.0 frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Xhtml 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML - Structure générale

Structure
Après la DTD, il suffit d'ouvrir la balise <html> qui englobera l’ensemble des autres balises de votre page. Cette balise
contient deux paires de balises:
 Les balises <head> et </head> délimitant l’entête du document.

 Les balises <body> et </body> délimitant le corps du document.
L'entête
L'entête contient toutes les données relatives au document (le titre du document et sa description par exemple).
Le titre
Le plus important dans l'en-tête est le titre de la page, il se définit avec les balises <title>.
<title>Titre de votre page</title>

Les balises <meta>
Les balises <meta> sont facultatives, mais importantes pour le navigateur, et pour les moteurs de recherche.
Encodage de la page
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
Description de la page
<meta name="Description" content="Description de votre page" />
Langue de la page
<meta name="Language" content="fr" />
Le corps
Le corps de votre page (entre les balises <body> et </body>), est la partie visible du document XHTML, il peut être
constitué d’un grand nombre de types de balises différents (titres, paragraphes, liens,...).
Exemple
Exemple d'une page XHTML très basique:
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Titre de la page</title>
<meta name="Language" content="fr" />
<meta name="Description" content="Description de votre page" />
</head>
<body>
Corps de la page
</body>
</html>
Exercice :
Ouvrez l’éditeur de texte PSPAD. Ecrivez une page XHTML nommée « ma-page-web.htm » ayant pour titre « Ma
première page web », pour description « C’est la première page que j’écris en XHTML ».
Le corps de votre page contiendra :
- un titre («Le XHTML ») et une description (Expliquez ce que le XHTML),
- un sous titre (« La balise HEAD ») et une description (Expliquez à quoi sert la balise HEAD),
- un sous sous titre (« La Balise TITLE ») et une description (Expliquez à quoi sert la balise TITLE),
- un deuxième sous titre (« La balise BODY ») et une description (Expliquez à quoi sert la balise BODY),
Pensez a sauver votre page. Ouvrez le dossier contenant votre page web, double-cliquez sur votre page pour l’ouvrir
dans le navigateur. Dans le navigateur, vous devriez voir :
Le XHTML
C’est ……………………………….
La balise HEAD
C’est ………………………………
La balise TITLE
C’est ……………………………..
La balise BODY
C’est …………………………….
Revenez à l’éditeur de texte PSPAD sans refermer votre navigateur.
XHTML - Mise en forme de texte

Titres
Le langage XHTML définit 6 niveaux de titres, les balises <h1>, <h2>, <h3>, ..., <h6> (<h1> et <h6> représentent
respectivement la plus et la moins importante). Elles permettent de définir une structuration hiérarchique des
paragraphes d'une page.
<h1>Titre</h1>
Exercice :
Dans votre page web, encadrez votre titre avec la balise <h1>, vos sous titres avec la balise <h2> et vos sous sous
titres avec la balise <h3>. Enregistrer à nouveau votre page, rendez-vous sur votre navigateur et faites « Rafraichir la
page » pour constater les changements.
Paragraphes
Les paragraphes sont délimités par les balises <p> et </p>. Ils ne doivent être employés que lorsque leur contenu ne
peut être présenté d'aucune autre manière (liste, tableau,...).
<p>Votre paragraphe</p>
Exercice :
Dans votre page web, encadrez vos descriptions avec la balise <p> pour indiquer que ce sont des paragraphes.
Enregistrer à nouveau votre page, rendez-vous sur votre navigateur et faites « Rafraichir la page » pour constater les
changements.
Retour à la ligne
Les retours à la ligne sont définis à l'intérieur d'un paragraphe par la balise unique <br/>.
<br/>
Ligne horizontale
Des lignes horizontales peuvent être ajoutées aux paragraphes, elles sont définies par la balise unique <hr/>.
<hr/>
Exercice :
Dans votre page web, ajoutez à la fin de votre page un saut de ligne, puis une ligne horizontale. Rendez-vous sur
votre navigateur et faites « Rafraichir la page » pour constater les changements.
XHTML - Les balises de styles

Texte en gras
Les textes en gras peuvent être définis par les balises <b>.
<b>Texte en gras</b>
Texte en italique
Les textes en italique peuvent être définis par les balises <i>.
<i>Texte en italique<i/>
Texte souligné
Les textes soulignés peuvent être définis par les balises <u>.
<u>Texte souligné<u/>
Texte barré
Les textes barrés peuvent être définis par les balises <s>.
<s>Texte barré<s/>
Texte en indice
Les textes en indice peuvent être définis par les balises <sub>.
<sub>Texte en indice<sub/>
Texte en exposant
Les textes en indice peuvent être définis par les balises <sup>.
<sup>Texte en exposant<sup/>
Exercice :
Dans votre page web, mettez un peu de style dans vos descriptions. Enregistrer à nouveau votre page, rendez-vous
sur votre navigateur et faites « Rafraichir la page » pour constater les changements.
XHTML - Les liens

Structure
Les liens hypertextes sont définis par les balises <a> associées à l'attribut href qui spécifie la source du document
cible.
<a href="http://www.votre-site.fr/index.html">votre texte</a>
Liens spéciaux
Lien vers adresse de messagerie électronique
<a href="mailto:vous@domaine.com">votre texte</a>
Lien externe vers un serveur FTP
<a href="ftp://ftp.site.com">votre texte</a>
Exercice :
A la fin de votre page web, ajouter un lien vers le site de laclasse.com et ajoutez un lien « Me contacter » pour vous
écrire. Constatez les changements.
XHTML - Les images

Les images sont définies par la balise <img> associée à l'attribut src qui spécifie la source de l’image et à
l’attribut alt qui spécifie un texte alternatif au cas où l'image ne s'afficherait pas.
<img src="dossier/image.png" alt=" texte alternatif "/>
Exercice :
Cherchez une image sur Google. Enregistrez cette image dans votre dossier. Insérez-là dans votre page web.
XHTML - Les tableaux

Il est souvent utile de présenter des informations en ligne et en colonne, les tableaux sont la pour ça. Les
tableaux sont définis par les balises suivantes:
 Le tableau est encadré par les balises <table>

 Le titre du tableau est encadré par les balises <caption>
 Les lignes sont encadrées par les balises <tr>
 Les cellules d'en-tête sont encadrées par les balises <th>
 Les cellules de valeur sont encadrées par les balises <td>
<table>
<caption>Titre du tableau </caption>
<tr>
<th> Titre 1 </th>
<th> Titre 2 </th>
<th> Titre 3 </th>
<th> Titre 4 </th>
</tr>
<tr>
<td> Valeur 1 </td>
<td> Valeur 2 </td>
<td> Valeur 3 </td>
<td> Valeur 4 </td>
</tr>
</table>
Exercice :
Représentez le tableau correspondant au calendrier du mois de décembre 2009. Votre tableau aura donc 6 lignes et
7 colonnes et pour titre « Décembre 2009 ».
XHTML - Les listes

Listes de définitions
Les listes de définitions sont définies par les balises suivantes:
 La liste est encadrée par les balises <dl>

 Les termes sont encadrés par les balises <dt>
 Les définitions sont encadrées par les balises <dd>
<dl>
<dt>Premier terme</dt>
<dd>Première définition</dd>
<dt>Deuxième terme</dt>
<dd>Deuxième définition</dd>
</dl>
Exercice :
Dans votre page web, faites une liste des balises déjà vu avec leur définition.
Listes numérotées
Les listes numérotées sont définies par les balises suivantes:
 La liste est encadrée par les balises <ol>

 Les termes de la liste sont encadrés par les balises <li>
<ol>
<li>Premier terme</li>
<li>Deuxième terme</li>
</ol>
Exercice :
Dans votre page web, faites une liste numérotée des matières que vous aimez. Classez les par préférence de la plus
appréciée à la moins appréciée.
Listes à puces
Les listes à puces sont définies par les balises suivantes:
 La liste est encadrée par les balises <ul>

 Les termes de la liste sont encadrés par les balises <li>
<ul>
<li>Premier terme</li>
<li>Deuxième terme</li>
</ul>
Exercice :
Dans votre page web, ajoutez une liste à puces de vos professeurs.
XHTML - Sigles et acronymes

Sigles
Les sigles peuvent être définis par les balises <abbr>.
<abbr>Sigle</abbr>
Exercice :
Dans votre page web, donnez 5 abréviations comme SNCF …
XHTML - Les caractères spéciaux

Voici une petite liste des caractères spéciaux les plus courants en xhtml.
Caractères Codes HTML Caractères Codes HTML
" " © ©
& & ¶ ¶
‹ < ¼ ¼
› > ½ ½
espace ¾ ¾
€ € ÷ ÷
® ® ± ±
Exercice :
A la fin de votre page web, ajoutez votre copyright du style « Ma page web 2009 © votre nom »

Balises

Transféré par

Droits d'auteur :

Formats disponibles

Balises

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Balises

Transféré par

Droits d'auteur :

Formats disponibles

Cours de XHTML

Les outils pour préparer et tester notre travail

Fonctionnement des balises

<balise attribut="valeur" attribut2="valeur2" >chaîne de caractères</balise>

On peut remarquer qu'une balise peut contenir trois types d'informations :

<balise1> <balise2> (...) </balise2> (...) </balise1>

XHTML - Définition de Type de Document

Ci-dessous les différentes DTD existant actuellement pour le XHTML:

XHTML1.0 strict (Actuellement, je recommande de prendre celui-ci)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

XHTML - Structure générale

 Les balises <head> et </head> délimitant l’entête du document.

<title>Titre de votre page</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="Description" content="Description de votre page" />

<meta name="Language" content="fr" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

XHTML - Mise en forme de texte

XHTML - Les balises de styles

XHTML - Les liens

<a href="mailto:vous@domaine.com">votre texte</a>

Lien externe vers un serveur FTP

<a href="ftp://ftp.site.com">votre texte</a>

XHTML - Les images

<img src="dossier/image.png" alt=" texte alternatif "/>

XHTML - Les tableaux

 Le tableau est encadré par les balises <table>

XHTML - Les listes

 La liste est encadrée par les balises <dl>

 La liste est encadrée par les balises <ol>

 La liste est encadrée par les balises <ul>

XHTML - Sigles et acronymes

XHTML - Les caractères spéciaux

Vous aimerez peut-être aussi