Introduction au World Wide Web et à XHTML

Cours introduction au World Wide Web et à XHTML, tutoriel & guide de travaux pratiques en pdf.

Caractéristiques :
successeur de HTML (langage simple utilisé pour générer des documents portables),
conforme aux normes XML (eXtended Markup Language), développé par le W3C (World Wide Web Consortium) regroupant industriels (Microsoft, IBM, Apple. . . ) et académiques (INRIA, MIT. . . )
Principes :
format ouvert : lecture possible dans des conditions correctes sans contrainte matérielle ou logicielle description de la structure d’un document, accent sur l’accessibilité
Conséquence :
votre code doit pouvoir être validé par un validateur tel que http://validator.w3.org/
XHTML permet de décrire la structure d’un document. Ne pas chercher à décrire la présentation (ce sera fait avec CSS) ! XHTML est un langage qui alterne texte et balises ( <blabla> ou </blabla>)
I Les balises définissent les propriétés de chaque partie du document et sont analysées par le navigateur pour réaliser la mise en page du document.
Les fichiers XHTML
I sont des fichiers texte
I ont (conventionnellement) pour extension .html
I sont structurés en deux parties principales : l’en-tête
<head> … </head> ) et le corps <body> … </body> )
En XHTML, les blancs (espace, tabulations, retours à la ligne) sont en général équivalents et servent juste à délimiter mots, balises. . .
Leur nombre n’a pas d’importance.
Leur syntaxe est (balises ouvrante et fermante)
<balise attributs>contenu</balise>
ou (balise sans contenu)
<balise />
où :
balise mot clé associé à une propriété particulière contenu peut représenter du texte ou d’autres balises attributs représente les diﬀérents paramètres associés à la balise, sous la forme d’une liste de nom= »valeur » ou nom=’valeur’ , séparés par des espaces
Les noms des balises et les types des attributs sont toujours écrits en minuscule.
Les balises sont ouvertes et refermées dans l’ordre ( et non ).
Des règles strictes déterminent quelles balises peuvent être mises à l’intérieur de quelles balises.
Exemples
 pour obtenir un saut de ligne (en poésie, par exemple)
<title>coucou</title> pour attribuer le titre coucou au document
cuicui pour mettre en emphase le texte cuicui (cela sera rendu, le plus souvent, par une mise en italique).
cuicui pour indiquer que le texte cuicui est important (cela sera rendu, le plus souvent, par une mise en gras).
<!–zut.–> pour ajouter un commentaire, ici zut., dans le document, qui ne sera ni aﬃché ni interprété par le navigateur.
Contre-exemple
bouh
<!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 »
lang= »fr » xml:lang= »fr »>
<head>
<!– En-tête du document –>
</head>
<body>
<!– Corps du document –>
</body>
</html>
La déclaration <!DOCTYPE …> précise la version d’(X)HTML utilisée.
La langue du document est précisée avec les deux attributs (redondants !) lang et xml:lang de la balise principale <html>.