1. La première étape pour s’améliorer
Ajoutez le bon DOCTYPE à la page
DOCTYPE est l'abréviation de type de document. Principalement utilisé pour indiquer quelle version de XHTML ou HTML est utilisée. Le navigateur interprète le code de la page selon la DTD (Document Type Definition) définie par DOCTYPE.
(1) Transitionnel (Transitionnel)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) Stricte
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)Type de cadre (Frameset)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Définir un espace de noms (Namespace)
Ajoutez le code suivant directement après la déclaration DOCTYPE :
<html XMLns="http://www.w3.org/1999/xhtml" >
Un espace de noms est une DTD détaillée qui collecte les types d'éléments et les noms d'attributs. La déclaration d'espace de noms vous permet d'identifier votre espace de noms via un pointeur d'adresse en ligne. Entrez simplement le code comme d'habitude.
Déclarez votre langage de codage
Afin d'être correctement interprétés par les navigateurs et de passer la validation du balisage, tous les documents XHTML doivent déclarer le langage de codage qu'ils utilisent. Le code est le suivant :
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
Le langage de codage déclaré ici est le chinois simplifié GB2312. Si vous devez produire du contenu en chinois traditionnel, vous pouvez le définir comme BIG5.
Écrivez toutes les étiquettes en lettres minuscules
XML est sensible à la casse, donc XHTML est également sensible à la casse. Tous les noms d’éléments et d’attributs XHTML doivent être en minuscules. Dans le cas contraire, votre document sera considéré comme invalide par validation W3C. Par exemple, le code suivant est incorrect :
<TITLE>Profil de l'entreprise</TITLE>
La bonne façon de l’écrire est :
<title>Profil de l'entreprise</title> De même, remplacez <P> par <p>, <B> par <b>, etc. Cette étape de conversion est simple.
Ajouter l'attribut alt à l'image
Ajoutez l'attribut alt à toutes les images. L'attribut alt spécifie que le texte de remplacement est affiché lorsque l'image ne peut pas être affichée. Ceci est inutile pour les utilisateurs normaux, mais c'est crucial pour les navigateurs texte uniquement et les utilisateurs utilisant des lecteurs d'écran. Ce n'est que lorsque l'attribut alt est ajouté que le code passera le contrôle d'exactitude du W3C. Notez que nous devons ajouter des attributs alt significatifs, écrire comme suit n'a aucun sens :
<img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif">
Façon correcte d'écrire :
<img src="logo_unc_120x30.gif" alt="Logo de la société UNC, cliquez pour revenir à la page d'accueil">
Citer toutes les valeurs d'attribut
En HTML, vous n'avez pas besoin de citer les valeurs d'attribut, mais en XHTML, elles doivent être citées.
Exemple : hauteur="100", et non hauteur=100.
Fermez tous les onglets
En XHTML, chaque balise ouverte doit être fermée. Comme ça:
<p>Chaque onglet ouvert doit être fermé. </p> <b>Le HTML peut accepter les balises non fermées, mais pas le XHTML. </b>
Cette règle peut éviter la confusion et les problèmes HTML. Par exemple : Si vous ne fermez pas la balise d'image, vous pouvez rencontrer des problèmes d'affichage CSS dans certains navigateurs. Utilisez cette méthode pour vous assurer que la page apparaît telle que vous l'avez conçue. Il convient de noter que les balises vides doivent également être fermées. Utilisez une barre oblique "/" à la fin de la balise pour se fermer. Par exemple:
<br /> <img src="webstandards.gif" />
Après avoir été traitée selon les sept règles ci-dessus, la page répond essentiellement aux exigences de XHTML1.0. Mais il reste encore à vérifier s’il répond réellement aux normes. Nous pouvons utiliser le W3C pour fournir des services de validation gratuits (http://validator.w3.org/). Corrigez les erreurs une par une après les avoir découvertes.
2. La deuxième étape de l'amélioration
Notre prochaine amélioration réside principalement dans la séparation de la structure et des performances. Cette étape n'est pas aussi facile à réaliser que la première étape. Nous avons besoin d'un changement de concept, ainsi que de l'apprentissage et de l'application de la technologie CSS2. Mais apprendre quelque chose de nouveau prend du temps, n'est-ce pas ? L’astuce est d’apprendre en faisant. Si vous avez toujours utilisé la disposition des tableaux et n'avez jamais utilisé CSS, vous n'avez pas besoin de vous précipiter pour dire adieu à la disposition des tableaux. Vous pouvez d'abord remplacer la balise font par une feuille de style. Au fur et à mesure que vous en apprenez davantage, vous pouvez en faire plus. Bon, regardons ce que nous devons faire :
Définir l'apparence des éléments avec CSS
Nous avons développé une habitude lors de l'écriture de logos. Lorsque nous voulons que la police soit plus grande, nous utilisons <h1>, et lorsque nous voulons ajouter un symbole de point devant, nous utilisons <li>. Nous considérons toujours <h1> comme étant grand, <li> comme des points et <b> comme du « texte en gras ». En fait, <h1> peut devenir tout ce que vous voulez. Grâce au CSS, <h1> peut devenir une petite police, le texte <p> peut devenir énorme et gras, et <li> peut devenir une image, etc. Nous ne pouvons pas forcer les éléments structurels à obtenir une présentation, nous devons utiliser CSS pour déterminer l'apparence de ces éléments. Par exemple, nous pouvons donner aux en-têtes de niveau 6 par défaut d'origine la même taille :
h1, h2, h3, h4, h5, h6{ famille de polices : 宋体, serif ;
Remplacez les déchets inutiles par des éléments structurés
Beaucoup de gens n’ont peut-être jamais su que les éléments HTML et XHTML étaient conçus pour exprimer une structure. Beaucoup d’entre nous se sont habitués à utiliser des éléments pour contrôler la présentation plutôt que la structure. Par exemple, une liste pourrait être marquée comme ceci :
Phrase 1<br /> Phrase 2<br /> Phrase 3<br />
Il serait préférable d'utiliser plutôt une liste non ordonnée :
<ul> <li>Phrase 1</li> <li>Phrase 2</li> <li>Phrase 3</li> </ul>
Vous pourriez dire : « Mais <li> affiche un point et je ne souhaite pas utiliser de point. » En fait, CSS ne précise pas à quoi ressemble un élément. Vous pouvez désactiver les points en utilisant CSS.
Ajouter un identifiant à chaque table et formulaire
Donnez un tableau ou formez un balisage structurel unique, par ex.
<identifiant de la table="menu">
Ensuite, lors de la rédaction de la feuille de style, vous pouvez créer un sélecteur de « menu » et l'associer à une règle CSS qui indique aux cellules du tableau, aux étiquettes de texte et à tous les autres éléments comment s'afficher. De cette façon, il n'est pas nécessaire d'attacher des attributs de couche de présentation redondants et gourmands en bande passante, tels que la hauteur, la largeur, l'alignement et la couleur d'arrière-plan, à chaque balise <td>. Avec juste une balise attachée (le "menu" de balisage de balise d'identification), vous pouvez effectuer un traitement de présentation ad hoc pour un balisage de code propre et compact dans une feuille de style distincte.
Pour les améliorations intermédiaires, nous énumérerons ici d'abord les trois points principaux, mais il contient beaucoup de contenu et de points de connaissances, que nous devons apprendre et maîtriser étape par étape jusqu'à ce que nous obtenions enfin la mise en page en utilisant complètement CSS sans utiliser de tableaux.