Lorsque j’écris un article – ou n’importe quelle page Web, d’ailleurs – j’aime commencer par des documents HTML, XHTML et CSS de base dont je sais qu’ils contiennent du code valide. Après avoir lu ce didacticiel, vous pourrez également utiliser cette approche.
Il existe deux types de documents de base basés sur des normes que j’utilise pour écrire des pages Web. Le premier a une définition de type de document (DTD) de XHTML 1.0 Transitional, tout comme WordPress utilise. Le second est un document HTML de base avec une définition de type de document (DTD) de HTML 4.01 Transitional. Ces définitions indiquent au navigateur quelle spécification le document utilise. Par exemple, la DTD serait utilisée pour dire à un navigateur si le document était HTML ou XHTML. La DTD est la première ligne de code d’une page Web.
Les règles de syntaxe pour HTML et XHTML sont différentes à certains égards. Vous devez utiliser la syntaxe correcte pour la DTD que vous utilisez ou votre code ne passera pas au W3C. Ceci même si le navigateur que vous utilisez peut afficher votre page comme prévu : les navigateurs sont très indulgents vis-à-vis du code non standard.
Pour le contenu de mon site web, j’utilise la DTD HTML 4.01 Transitional car je suis à l’aise avec sa syntaxe.
La meilleure façon de vous assurer que vous démarrez avec une page Web basée sur des normes consiste à copier d’abord une page Web squelettique connue et à la coller dans un éditeur de texte de base. Ensuite, enregistrez le code sous forme de fichier texte avec l’extension « .txt ». Vous pouvez nommer le fichier my-HTML-template.txt.
Vous pouvez également coller le code dans le service de validation du balisage du W3C pour vérifier qu’il est à la hauteur : si le code passe le validateur « dans le vert », vous savez que votre code est bon. Des pages Web squelettiques simples peuvent être trouvées dans les écoles W3. D’autres codes, tels que la DTD pour HTML et XHTML, peuvent également y être trouvés.
Il est très courant de constater que les pages Web en ligne échouent à la validation du W3C avec un nombre considérable d’erreurs. Cela est parfois dû au fait que la mauvaise DTD est spécifiée pour une page ; à d’autres moments, l’échec est dû à l’utilisation de code non standard ou obsolète. Si vous commencez avec un modèle de base valide et que vous corrigez les erreurs de validation qui s’affichent, vos pages seront toujours « dans le vert » lorsqu’elles seront publiées sur le Web.
Une fois que vous avez un modèle de base valide, vous pouvez commencer à ajouter votre contenu entre les balises body et du code supplémentaire entre les balises head.
Normalement, je n’utilise pas de retours chariots durs à l’intérieur d’un paragraphe. Les éditeurs que j’utilise ont tous une fonctionnalité de « retour à la ligne » qui me permet de voir tout le texte que j’écris sans avoir à utiliser la barre de défilement horizontale. La longueur de ligne réelle du contenu publié sera déterminée ultérieurement lorsque l’affichage de la page sera stylé.
J’utilise un retour chariot dur après la dernière phrase d’un paragraphe et j’en ajoute un supplémentaire entre les paragraphes. Des retours durs peuvent également être ajoutés pour un espace supplémentaire entre d’autres éléments, tels que le code d’image.
Si vous avez ajouté du contenu au fichier my-HTML-template.txt, enregistrez-le à nouveau avec une extension de fichier « .HTML ». Vous pouvez ensuite l’ouvrir dans un navigateur. Ce que vous verrez, c’est que tout le contenu fonctionne ensemble. En effet, les navigateurs recherchent les balises de saut de ligne et non les retours chariot. Vous pouvez résoudre ce problème en effectuant une recherche et un remplacement avec votre éditeur : recherchez simplement chaque retour chariot et remplacez-le par une balise de rupture. Lorsque vous ouvrez à nouveau le document HTML, les différentes parties du contenu seront nettes et ordonnées mais pas très jolies. Le style CSS résoudra ce problème.
Si vous « déposez » simplement le contenu entre les balises body dans un éditeur visuel sur le Web, tel qu’un éditeur WordPress ou la zone de contenu de l’article sur EzineArticles, vous n’avez pas à vous soucier des sauts de ligne car ils seront ajoutés. au code HTML pour vous.
Copiez et collez le code CSS ci-dessous dans votre éditeur de texte. Enregistrez-le sous « my-template. css » dans le même dossier dans lequel vous avez enregistré votre fichier de modèle HTML.
corps
{
arrière-plan : #ffef2 ;
la couleur noire;
hauteur de ligne : normale ;
marge : 3 % 25 % 3 % 25 % ;
largeur min : 400px ;
}
La balise meta link associe un fichier CSS au document HTML. Copiez et collez la balise de lien ci-dessous entre les balises head dans le fichier my-HTML-template.txt que vous avez enregistré. Remplacez les crochets par « », respectivement.
[link title= »Template Style Sheet » rel= »stylesheet » href= »my-template.css »type= »text/css »]
Si vous avez ajouté du contenu à votre fichier my-HTML-template.txt, lorsque vous ouvrez maintenant le fichier dans un navigateur, vous commencerez à voir une mise en forme plutôt agréable. Le contenu de la page est maintenant centré vers la moitié centrale de la page, il y a une belle couleur d’arrière-plan et le texte est Verdana. Tout cela est dû aux spécifications du code CSS pour « body ». Le code « body » détermine l’apparence générale de la page.
Vous pouvez également valider votre code CSS. Le W3C dispose d’un validateur de code CSS. Copiez simplement le code CSS et collez-le dans la zone de texte du validateur et cliquez sur le bouton « Vérifier ». Vous constaterez que le code ci-dessus passe « dans le vert », comme il se doit.
Afin d’appliquer la mise en forme d’affichage, le contenu devant recevoir la mise en forme doit être identifié. Le contenu peut être entre crochets avec des balises HTML qui contiennent des noms faisant référence à des définitions de style dans le fichier CSS. Des exemples de ces balises sont « div » et « span ». Lorsqu’un navigateur rencontre une balise HTML et trouve une référence de nom, il recherche le style dans le fichier CSS, puis applique le style à l’affichage de la page Web. S’il n’y a pas de style référencé dans les balises HTML, le navigateur utilisera ses valeurs par défaut pour l’affichage.
W3 Schools propose des informations complètes et des tutoriels sur CSS.
Construire vos propres modèles (X)HTML et CSS, puis les soumettre aux validateurs du W3C, est un excellent moyen de vous assurer que vos pages Web seront toujours basées sur des normes. Vous n’avez pas besoin d’un logiciel de développement Web coûteux pour développer vos modèles ; vous pouvez utiliser un éditeur de texte de base. Utilisez l’éditeur de texte pour créer la structure de la page Web et ajouter le contenu. Utilisez CSS pour styliser l’affichage du contenu. Si vous publiez votre contenu en ligne, vous pourrez probablement déposer le contenu de votre fichier texte (entre les balises body) directement dans la zone de texte de l’éditeur sans aucune modification. Si vous souhaitez afficher votre document dans un navigateur au fur et à mesure de sa création, vous devrez peut-être ajouter des balises de rupture entre les éléments de contenu, puis enregistrer le fichier avec une extension « .HTML ». Si vous validez vos pages Web au fur et à mesure que vous les créez, vous pouvez toujours être sûr que lorsqu’elles seront publiées en ligne, elles seront validées « dans le vert ».
Articles similaires:
