[XHTML] Les bases
1) Introduction
Bonjour
Le langage XHTML , signifiant Xtensible Hyper Text Markup Langage est le langage principal à utiliser pour créer votre site web.
Le XHTML est un langage de transition entre le HTML 4 et le XML 1.0. Il utilise la syntaxe et les mots de HTML 4 ce qui lui assure une bonne compatibilité avec les navigateurs d'anciennes générations. Le XHTML répond aussi à certaines règles de XML ce qui impose une rigueur dans la codification des pages.
2) Les balises
Ce langage est basé sur l'utilisation de balises qui s'ouvrent par "<balise>" et se ferment par "</balise>". Ces balises sont utilisées pour souligner un texte, le mettre un gras, créer des paragraphes etc...
- Par exemple pour créer un paragraphe vous devez écrire ceci:
<p>Texte du paragraphe</p>
- Vous pouvez ajouter des balises en plus pour par exemple mettre le texte en gras ou le souligner.
<p><u>Texte du paragraphe souligné</u></p>
- Les balises peuvent comporter des attribut servant a définir le style, l'adresse de l'image ou du lien,... On note :
<balise attribut=""></balise>
- Un petit exemple pour mettre en couleur rouge un texte :
<span style="color:#FF0000">Texte</span>
Ici <span> fait office de balise, style=" " d'attribut, et color:#FF0000 de valeur.
3) Organisation d'une page
3.1) Le header
3.1.1) Les DOCTYPE
Une page XHTML doit toujours commencer par le type du document. Voici les différents doctypes qui sont utilisés :
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.1 DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Pour pouvoir utiliser l'un d'eux, vous devez l'écrire au tout début de votre document.
Directement après le doctype, vous devez mettre la balise " <html> " suivie de l'entête " <head > ". et enfin le corps du texte " <body> ".Ce qui nous donne par exemple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body></body>
</html>
L'entête <head> peut contenir :
- Les meta-tags
- Le titre de la page
- Autres déclarations de style ou de script (javascript notamment)
3.1.2) Les Meta-Tags
Les meta-tags sont utilisés pour référencer votre site en utilisant une phrase de description ou des mots-clés.
La balise correspondant au meta-tag est la balise <meta>. Contrairement aux autres balises, elle ne se fermera pas avec </meta> mais par une fin de balise courte />.
Voici les différents meta-tags:
- La description
<meta name="description" content="votre description" />
- Les mots clés
<meta name="keywords" content="mot1,mot2,..." />
- Il existe un autre meta-tag indispensable pour définir le type de contenu du document.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Ici le document est défini selon la norme iso-8859-1
Voici un exemple typique de page web reprenant ce que nous venons de voir:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="mot1,mot2,..." />
<meta name="description" content="votre description" />
</head>
<body></body>
</html>
Ce qui est a configurer est uniquement la valeur de l'attribut content.
3.2) Le Contenu
Vous devez écrire le contenu de votre page web entre les balises "<body>" et "</body>"
Vous pouvez y insérer des balises comme <p>, <div> etc...
Il faut faire attention à l'ordre des balises d'ouvertures et de fermetures. Par exemple vous ne pouvez pas écrire:
<u><p>texte</u></p>
La forme correcte sera
<p><u>texte</u></p>
3.2.1) Les balises usuelles
Les balises les plus utilisées sont celles permettant de faire des liens, de la mise en forme avec CSS, des menus, etc... Nous allons voir leur syntaxe en plus des quelques balises que nous avons déjà vu précédemment.
Pour les liens on utilise la balise <a> qui a pour attribut href. Dans cet attribut nous devons spécifier l'url de la page vers laquelle doit pointer le lien. Par exemple pour faire un lien pointant vers mon site.com on devra écrire ceci
<a href="http://monsite.com">Mon site</a>
Entre les balises on peut spécifier le titre du lien, ici Mon site.
Pour créer un menu avec des puces, on utilisera la balise <ul> et <li> pour les puces. Pour créer un menu simple avec quelques puces on écrira ceci:
<ul>
<li>Element 1 du menu</li>
<li>Element 2 du menu</li>
</ul>
Ensuite la plupart des balises de mise en forme possèdent un attribut style permettant de définir la couleur, l'alignement, ou la taille des éléments. Les valeurs de cet attribut style sont en CSS. Pour comprendre le CSS, veuillez vous reporter au tutorial CSS
Les balises les plus utilisées pour définir un style sont <div> et <span>. La balise <div> est plutôt utilisée pour définir un bloc et <span> pour définir un style sur une seule ligne.
Par exemple pour centrer un bloc de texte on écrira :
<div style="text-align: center;">
texte
texte
</div>
Je vous invite à consulter la référence HTML, qui vous sera certainement utile tout au long de votre apprentissage
« Trouve un travail qui te plaît et plus jamais tu ne travailleras » Confucius
3 commentaire(s)
| leknishen | Date inconnue |
| Bon tuto bien expliquer. On regrettera simplement le manque de detail des balises. |
|
| Worm | Date inconnue |
| Je ne pouvais pas décrire toutes les balises dans ce tuto, c'est la raison pour laquelle j'ai rajouté la référence HTML à la fin du tuto |
|
| ChibiBlasphem | Il y a 2 semaines |
| Très bon tuto, bien expliqué et qui pose bien les bases du langage comme définit dans le titre ;) | |
Ajouter un commentaire
Vous devez vous être connecté pour poster des commentaires