Introduction au XHTML
Contents
1 Introduction
XHTML est un langage de balisage servant à l'écriture de pages du World Wide Web. Conçu à l'origine comme le successeur de HTML, XHTML se base sur la syntaxe définie par XML, plus récente et plus simple que la syntaxe définie par SGML sur laquelle se base HTML.
Comme de nombreux langages basés sur XML, XHTML commence par la lettre X, qui représente le mot extensible. Ainsi le premier document décrivant officiellement XHTML s'appelle XHTML™ 1.0 The Extensible HyperText Markup Language (« XHTML 1.0 Le langage de balisage hypertexte extensible »). C'est cependant l'abréviation XHTML qui est une marque du World Wide Web Consortium (W3C) et qui est seule utilisée dans les spécifications qui ont suivi la version 1.0.
2 Les balises
Une balise, est un mot-clé entouré de chevrons < et >.
Le XHTML nécessite que toutes les balises soient écrites en minuscules.
Les balises fonctionnent toujours par paires. Une balise ouvrante et une balise fermante.
Les deux balises transformeront tout ce qu'il y a entre elles.
Et, comme toute règle, celle-ci a ses exceptions... Il en existe en effet certaines qui préfèrent la solitude... On les reconnaît au / juste avant le chevron fermant. Un exemple avec la balise suivante, qui permet un retour à la ligne :
<br/>
Certaines balises prennent ce que l'on appelle des arguments ou attributs. Ceux-ci sont en fait des paramètres supplémentaires qui permettent un peu plus de variétés dans le choix des couleurs, la position sur la page, etc... Ils se placent toujours avant le chevron fermant de la balise ouvrante.
Exemple :
<body bgcolor="#000000">
Il s'agit de la balise indiquant le début du corps de la page; cette balise met un fond noir sur la page.
3 Les commentaires
Les commentaires sont des morceaux de codes qui ne seront pas interprétés par le navigateur.
Imaginons que l’on soit plusieurs à faire un site. Il est fortement probable que chacun programmera un morceau de page dans son coin, et qu’on réunira les parties par la suite. Mais, s’il y a un problème et que l’on demande à un quelqu’un de l’aide, il lui faudra comprendre le code ! Donc, mettre quelques indications ne pourra que lui être utile.
Pour écrire des commentaires en XHTML, il y a une balise spécialement conçue pour l'occasion. Elle est assez particulière, car en plus d'être une solitaire, elle s'écrit à sa façon, à savoir :
<!-- Ecrire le commentaire ici -->
4 Structure minimale
Enfin, on commence :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3c.org/1999/xhtml" xmllg="fr" lang="fr"> <head> <title>Ma première page Web</title> </head> <body> Ceci constitue le corps de ma page ! </body> </html>
5 Explications
- Tout d'abord, il faut écrire une ligne plutôt méchante
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Cette ligne permet de faire savoir que l’on utilise le langage XHTML, version 1.1. Il s'agit de la version la plus récente à ce jour, enfin je crois ( 1er juin 2005 ).
En déclarant ce DocType, on indique au navigateur Internet que l’on connaisse les standards du Web, et qu’on va les utiliser. Ainsi, il interprétera de façon très rigoureuse tout le code. De cette manière, la page respectera les différentes normes en vigueur, et l'affichage de celle-ci sera alors la même partout. Si on ne l’a met pas, chaque navigateur essaiera de comprendre le code à sa manière, et des variations pourront se voir selon le browser utilisé. D'où l'importance de cette ligne !
- Ensuite la ligne
<html xmlns="http://www.w3c.org/1999/xhtml" xmllg="fr" lang="fr"> (ne pas oublier le </html> qui ferme !!)
Ici, on va chercher tout ce dont nous aurons besoin pour programmer en XHTML sur le site du W3C (World Wide Web Consortium). Il s'agit de l'organisme international qui fixe les règles et normes en vigueur sur le Web.
Le premier argument indique l'espace de nom à utiliser. C'est un lien vers une page du W3C, qui définit les différents mots-clef du langage.
Le deuxième argument, il s'agit de la langue des pages. Dans ce cas, ce sera une page française (valeur fr). Pour une page anglaise, il vous faudra mettre en, pour une italienne it, etc... Cela est utile pour augmenter l'accessibilité des pages : les moteurs de recherche sauront quelle est la langue du site, ce qui permettra un meilleur référencement.
Le troisième argument n'est normalement pas obligatoire, mais il est conseillé de le mettre afin de rendre les pages compatibles avec les anciens navigateurs, qui ne sont pas encore à jour au niveau des normes Internet (n'est-ce pas IE ?).
- Balises <head> et </head>
La zone de tête ( head en anglais) concerne tout ce qui n'est pas sur la page à proprement parler. Elle concerne tout ce qu'il y a autour : dans la barre de titre du navigateur, dans la barre d'état, etc. Pour info :
<title>Ma première page Web</title>
C’est le message dans la barre de titre du navigateur.
- Balises <body> et </body>
Le corps de la page (body en anglais) comportera tout ce qui devra s'afficher sur la page, dans la zone principale du navigateur.
6 Les balises videos
Les balises videos sont apparues avec l'HTML5. Il y a pas mal d'inconvénients sur les formats videos de chaque browser. Bref pour mettre tout le monde d'accord, on peut embarquer plusieurs formats videos au sein d'une même balise video. Un peu compliquer ? Allez, c'est parti pour l'exemple :
<video controls="" preload="" width="510"> <source type='video/ogg; codecs="theora, vorbis"' src="http://www.deimos.fr/blog/wp-content/uploads/2010/05/usb_locker.ogv"></source> <source type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' src="http://www.deimos.fr/blog/wp-content/uploads/2010/05/usb_locker.mp4"></source> <source type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' src="http://www.deimos.fr/blog/wp-content/uploads/2010/05/usb_locker_iphone.mp4"></source> Internet Explorer n'est pas aux normes pour lire cette video, utilises plutot <a href="http://getfirefox.com">Firefox</a> </video>
- Ligne 1 : Le format OGV est utilisé pour les vidéos pouvant être lues avec Firefox. Utilisez de préférence ceci car c'est libre et open source. Pas besoin de payer quoi que ce soit en terme de licences.
- Ligne 2 : Le format mp4 est propriétaire, mais reconnu par les autres navigateurs que Firefox.
- Ligne 3 : Encore du mp4 mais cette fois ci dont les dimensions ont été modifiées pour que la vidéo puisse être lue sur iPhone (480x320)
- Ligne 4 : Cette ligne indique pour les usager d'IE que cette daube infâme ne lis pas encore les vidéos au format HTML5. Comme par hasard, c'est le dernier navigateur à ne pas avoir ces fonctionnalités !
7 Une page de chargement en HTML
Voici un moyen subtile de n'utiliser que le HTML pour faire une page de chargement avec simplement un div et un innerHTML. J'ai trouvé cette solution ici[1]. Voici donc un simple formulaire avec le bouton 'Envoyer' qui prendra le texte souhaité une fois cliqué dessus :
<form action="target.asp" onsubmit="document.getElementById('submitdiv').innerHTML='Merci de patienter...'"> other fields <div id="submitdiv"> <input type="Submit" value="Submit" id="Submit" name="Submit"/> </div> </form>
