Développement Web

Lu	Ma	Me	Je	Ve	Sa	Di
29	30	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	30	31	1	2

Structure

Le XHTML est une évolution du HTML qui se distingue de son parent, par la nécessité :
d’avoir une présentation gérée par des feuilles de style CSS,
d’être conforme aux contraintes de balisage du XML (fermeture des balises simples, usage des minuscules, valeurs des attributs entre guillements ou apostrophes,...). La structure générale d’un document XHTML va être décrite ci-après.

Au début de votre page, vous avez le renseignement concernant le DOCTYPE qui contient les exigences auxquelles les balises et les attributs du document doivent se conformer. Il y a deux spécifications possibles :

DTD strict (interprétation rigoureuse)

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

DTD transitional (interprétation plus souple)

<!DOCTYPE html PUBLIC ''-//W3C//DTDXHTML 1.0Transitional//EN'' ''http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd''>

Ensuite, vous avez la balise racine <html> dont le premier attribut obligatoire est l’espace de nommage XML "http://www.w3.org/1999/xhtml" et le second indique la langue.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

Tout le reste du code xhtml se trouve entre cette balise ouvrante et la balise fermante </html> et doit être structuré en deux parties. La première, délimitée par les balises <head> et </head> correspond à l’en-tête et la deuxième délimitée par les balises <body> et </body> est le corps de la page.

La balise head

La balise <head> est la balise marquant le début d’un bloc qui regroupe les informations complémentaires. Elles ne seront pas visibles à l’écran, mais leurs effets quant à eux le seront.

De nombreuses balises peuvent être insérées entre <head> et </head>. Seules 4 d’entre elles (et leurs fermantes s’il y a lieu) seront explicitées ici parce qu’elles seront pour nous incontournables.

1. La balise <meta />

Le premier attribut http-equiv reçoit la valeur "Content-Type" qui indique qu’il s’agit d’une balise meta précisant le type de contenu.
Le deuxième attribut content reçoit la valeur "text/html ; charset=iso-8859-1" ou "text/html ; charset=utf-8"qui indique qu’il s’agit d’une page html et précise l’encodage utilisé.

2. La balise <title >

<title> Le titre de mon site</title>

Les balises<title> et </title> sont les balises qui encadrent le titre de votre page. Or ce titre est essentiel car :

il apparaît dans la barre de titre,

il est utilisé par défaut pour l’enregistrement de la page dans les favoris,

il est utilisé par les moteurs de recherche pour le référencement.

3. La balise <link/>

Le premier attribut rel reçoit la valeur "stylesheet" afin de préciser que le lien concerne une feuille de style.
Le deuxième attribut href reçoit la valeur qui correspond à l’URL du fichier auquel le lien fait référence.

Le troisième attribut type reçoit la valeur "text/css" qui indique que le style appliqué a la spécification css.

4. La balise <script>

<script type="text/javascript" src="url/javascript.js" ></script>

Les balises <script> et </script> permettent de lier votre page à un fichier de script externe.
Le premier attribut type reçoit la valeur "text/javascript" indiquant qu’il s’agit d’un programme javascript.
Le deuxième src reçoit la valeur qui correspond à l’URL du fichier auquel le lien fait référence.

La balise body

Le corps de votre page sera constitué de plusieurs blocs correspondant à des balises qui se succèdent ou s’imbriquent.

Il existe un très grand nombre de types de balises HTML et il ne s’agit pas ici d’en dresser la liste exhaustive. Bien au contraire, nous ne présenterons succinctement que les deux balises qui ne sont, par défaut, associées à aucune présentation précise. Il s’agit des balises génériques <div> et <span>.

La balise <div> est de type block. Elle entraîne automatiquement un retour à la ligne avant et après le bloc qu’elle délimite. Elle sert à découper votre page en plusieurs conteneurs.

La balise <span> est de type inline. Elle n’entraîne aucun retour à la ligne et s’insère automatiquement à la suite de ce qui la précède.

Les attributs class et id permettent de spécifier ou identifier toutes les balises que vous inclurez dans le corps de votre page html, donc en particulier les balises <div> et <span>.

Vous pourrez par ce biais déterminer la façon dont ces éléments seront affichés dans la fenêtre du navigateur.

Imaginons que vous ayez plusieurs blocs <div> qui doivent avoir une apparence commune. Il suffira alors de leur attribuer une classe commune ; par exemple l’attribut class recevra la valeur "apparencecommune" et vos blocs <div> deviendont <div class="apparencecommune">. Ensuite, il suffira de déterminer le style CSS relatif à cette classe.

L’attribut id fonctionne de façon semblable mais ne permet d’identifier qu’un seul élément. Cette correspondance unique permettra aussi de manipuler cet élément lorsque l’on modifiera le DOM à l’aide de javascript.

Notre page XHTML blanche

Notre page minimale vide fait référence aux fichiers style.css et javascript.js vides situés à l’adresse url. Elle correspond à la page blanche (du point de vue du navigateur) que l’on va remplir dans les prochains chapitres.

<!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" xml:lang="fr">

<title>Le titre de mon site</title>

</head>