Accueil 
Ce dont vous avez besoin Pages XHTML et CSS à télécharger.
Votre première page XHTML.
Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.
| Résumé de la matière | Description |
|---|---|
| DOCTYPE | La déclaration DOCTYPE à une double fonction... |
| Le « head » | Cette partie n'est pas visible lors de l'ouverture de la page, mais... |
| L'encodage de la page | Les fichiers XHTML sont enregistrés en utilisant un codage de caractère... |
| Un premier lien | Le premier lien de votre site concerne le CSS... |
| Insérer un commentaire | Vous pouvez insérer des commentaires dans le code... |
Télécharger le modèle.
D'abord, créer un nouveau dossier et nommer le Site en construction puis télécharger et décompresser l'archive Winrar dans ce dossier. Le modèle XHTML n'affichera qu'une page blanche sur fond gris, mais il est prêt à être personnalisé et c'est ce que nous ferons au cours des exercices, étape par étape.
 |
|---|
| Type : Archive WinRar. |
| Taille : 901 octets. |
| Téléchargement |
Pour éditer la page XHTML et CSS, faite tour à tour, un clic droit sur l'icône index.html (L'icône est reproduite selon le navigateur par défaut que vous utilisez) et global.css puis choisissez Edit with Notepad++ dans le menu contextuel.
Explication
La page XHTML
La déclaration DOCTYPE à une double fonction (ligne 1).
- Détermine la version dans laquelle la validation W3C doit être faite.
- Permets le rendu CSS avec les navigateurs modernes.
La déclaration DOCTYPE de notre modèle est conforme aux normes W3C pour la version XHTML 1.0 stricte et est obligatoire lors de la validation.
Sur la ligne 2 vous avez la balise d'ouverture <html> qui indique que le format du document est en HTML et que la langue par défaut est le français. La balise HTML est fermée avec la dernière balise </html> au bas du la page.
 |
Bien que la structure de notre modèle soit du XHTML, le « langage » lui reste toujours du HTML. Ce qui différencie les deux versions est la façon don les balises sont imbriquées. Par exemple,
pour être valide W3C vous n'étiez pas obligé avec la version html 4, de fermer un paragraphe (</p>), alors qu'avec la version XHTML, vous l'êtes. La structure XHTML est plus
propre et demande une construction plus stricte que les versions HTML précédentes. Nous dirons donc que le langage de la page est du HTML, mais que la structure de la page est du XHTML. |
|---|
Le « head »
Entre les lignes 4 à 10, vous avez ce qu'on appelle le « head ». Cette partie n'est pas visible lors de l'ouverture de la page avec le navigateur, mais à une grande importance.
- La balise title est le titre de la page et est obligatoire.
- La balise meta description est un cours commentaire sur la page courante.
- La balise meta keywords est un ensemble de mots résument le contenu de la page.
- La balise meta content-type est l'encodage de la page.
- La balise link indique qu'une feuille de style CSS est requise pour la mise en page.
Les titres
Pour plus de détails sur les balises title, meta description et meta keywords lisez la sous-rubrique de la page Conseille utiles — Le référencement.
L'encodage de la page
Les fichiers XHTML, comme tous les fichiers texte, sont enregistrés en utilisant un codage de caractère particulier. Comme il y a beaucoup d'encodage de caractères différents dans le monde et que vous n'avez aucune idée des paramettres par défaut du navigateur de votre visiteur, c'est toujours une bonne idée de déclarer explicitement le codage que vous avez utilisé pour faire votre page Web.
Voici l'exemple de notre modèle :
<meta http-equiv="content-type" content="text/html; charset=utf-8" />.
Il y a deux versions utf-8. La version avec BOM et la version sans BOM. Notre modèle utilise la version utf-8 (sans BOM). Vous pouvez vérifier dans le menu "Format\ Encoder en utf-8 sans BOM" de Notepad ++.
Le BOM est incompatible avec PHP en particulier avec les entêtes (les redirections, les sessions, les cookies...). Si vous utilisez le PHP, je vous conseille d'utiliser la version sans BOM pour la création de votre site. Si vous ajoutez un « include », assurez-vous qu'il est le même encodage.
Le principal avantage de l'encodage utf-8 est qu'il permet de représenter des milliers de caractères en différentes langues. Il permet donc de créer des sites web multilingues.
Ne pouvant pas présumer de l'insertion d'une langue autre que le français dans cette page, j'ai opté pour l'encodage universel UTF-8. Mais si votre site est uniquement en français, vous pouvez utiliser un autre encodage. Par exemple :
Si votre site est uniquement en français :
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
Si vous utilisez le symbole euro « € » ou « œ » comme « œuf » utilisé :
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
Cela fait, vous devez convertir votre page pour ce nouvel encodage. Dans le menu de Notepad++, cliquer sur "Format\ Convertir en ANSI". Si vous insérez un "include" ou un "require" sur la page en php, assurez-vous que l'encodage soit le même.
Un premier lien
Le premier lien de votre site se trouve sur la ligne 9 et signifie au navigateur qu'il doit tenir compte d'une page externe CSS pour la mise en page. Chaque page XHTML que vous concevrez aura cette référence vers ce CSS dont le nom est global.css. Vous pouvez changer son nom, mais en vous rappellent qu'il ne doit pas avoir ni majuscule, ni d'espace entre les mots.
<link rel="stylesheet" media="screen" type="text/css" href="global.css" />
Personnellement j’utilise plutôt :
<style type="text/css" media="screen">@import url(global.css);</style>
Parce que @impor n'est correctement interprété que par les navigateurs de dernière géné- rations, la page XHTML sera affichée sans mise forme par les vieux navigateurs, éloignés des nouveaux standards. Je préfère cette méthode au résultat plus que douteux que pourraient afficher les navigateurs obsolètes avec la première méthode.
La balise "body"
Ces entre <body> et </body> que votre site prendra forme. Tout ce qui sera inséré entre <body> et </body> sera votre site.
Sur la page CSS
Il n'y a rien d'extraordinaire pour le moment. La balise html indique que la police de caractère aura 100 % de la valeur par défaut du navigateur hôte, surtout pour Explorer 7, qui a un problème de redimensionnement et il n'y a aucune marge sur notre page.
Sous body vous avez principalement un choix de trois polices de caractère qui seront utilisées lors de la construction de votre site. Nous verrons plus loin comment changer ses caractères par défaut.
Remarquez min-height sur la ligne 21. Pour que vous puissiez voir l'espace réservé à <body>, je lui est donné une valeur minimale de 800px (pixels) de couleur blanche, sinon la page serait grise, la valeur de l'arrière-plan.
Vous avez donc deux choix :
- Conserver la valeur minimale de body qui aura au moins 800 pixels de haut.
- Changer la ligne 21 pour height:100% qui ajustera la hauteur de body selon le contenu.
C'est margin:auto qui centre la page (ligne 22).
Insérer des commentaires
Vous pouvez insérer des commentaires dans le code XHTML et dans le CSS pour vous y retrouvez. Ses notes sont invisibles pour le lecteur, mais évidemment, éviter de mettre des informations personnelles puisque la majorité des navigateurs offre la possibilité aux visiteurs de voir votre code.
À insérer sur votre page XHTML :
<!-- Exemple d'une note sur une page html -->
À insérer sur votre page CSS :
/* Expemple d'une note sur une feuille de style */
En général, on utilise assez peu les commentaires, mais cela pourrait être pratique surtout au début, le temps que vous soyez familier avec vos pages et votre code.
Ajouter ce site à vos favoris
