Tout d’abord, ne vous précipitez pas pour commencer ! Faites deux préparations mentales avant de faire quoi que ce soit. C'est la chose la plus importante pour votre processus d'apprentissage :
L'apprentissage prend du temps et doit se faire étape par étape ;
Il y aura des revers en cours de route.
Mais vous n'êtes pas seuls : nous sommes nombreux à investir dans l'apprentissage et l'utilisation des standards du Web. Il existe une communauté en constante expansion pour vous aider à apprendre plus facilement, des vétérans qui ont eu de nombreuses difficultés à apprendre les techniques et les techniques, et des retardataires chanceux (moi y compris) qui bénéficieront de leur sueur et de leurs larmes.
Lorsque vous maîtriserez enfin l'utilisation des méthodes de conception basées sur les normes Web (ce qui donne l'impression que ces méthodes traditionnelles basées sur des tableaux sont éclipsées), avec le recul, vous serez surpris de constater que la mise en page des pages avec CSS n'est pas si difficile. Oh, bien sûr, si les navigateurs grand public prenaient mieux en charge certaines opérations dans la spécification CSS2, cela pourrait en fait être plus facile à utiliser.
Eh bien, il me semble que je suis un peu hors sujet.
Commençons donc tout de suite par les informations réellement utiles. Tout d'abord, allez acheter un exemplaire de "Designing With Web Standards" (Note 1), ne réfléchissez pas trop, faites-le immédiatement. Vous en avez déjà un ? Eh bien, lisez-le maintenant et ne le laissez pas prendre la poussière. Chaque point que je souhaite souligner est expliqué en détail dans le livre. Le livre est divisé en deux parties égales, un manifeste (pourquoi vous devriez faire ce que vous faites) et un tutoriel (comment vous le faites). Cela peut vous être utile.
Maintenant, la première chose est d'établir un concept de système idéologique de XHTML, que vous choisissiez HTML4.01 ou Une corvée abrutissante ), tous les documents commencent par la sélection d'un DOCTYPE. Indiquer au navigateur quel langage de balisage votre document utilise évitera des erreurs de performances inutiles qui autrement vous rendraient fou avec de mauvais résultats d'affichage des pages. Par exemple : si je veux prendre l'avion pour Chicago, je dois indiquer à l'agence de voyages où je veux aller, sinon je risque de prendre l'avion pour Vienne sans but. Pour afficher du HTML ou du XHTML, vous devez d'abord indiquer au navigateur que la configuration du DOCTYPE garantit que j'atteins la "destination".
Prochain objectif : des logos rigoureusement formatés. C'est très facile à maîtriser. Citez tous les attributs (par exemple : <a href="link">) ; imbriquez correctement les balises ; fermez toutes les balises ouvertes (par exemple : <input type="text" />). Chaque logo ou élément doit être fermé.
Remarque rapide : je ne sais pas quand les balises sont devenues des éléments. Elles ont la même signification mais des façons différentes de le dire. Peu importe comment vous les appelez, le nom correct semble être « éléments » maintenant, peut-être que c'était ainsi au début, je ne sais pas et personne ne me l'a dit.
Quoi qu’il en soit, chaque élément doit être fermé correctement. Si vous utilisez HTML4.01, vous pouvez ignorer les éléments individuels comme <br>, <hr> et <input>. Si vous utilisez XHTML, les éléments individuels doivent également être fermés, en ajoutant une barre oblique à la fin, par exemple : <br. > devient en<br />.
Ensuite, il existe une règle quelque peu déroutante concernant les attributs XHTML : tous les attributs doivent avoir une valeur, et s'il n'y a pas de valeur, la valeur elle-même est utilisée. Par exemple <input type="radio" vérifié="checked" />. En HTML4.01, la valeur cochée n'est pas obligatoire, mais en XHTML, elle est obligatoire.
Enfin, XHTML vous oblige à écrire tout le code en minuscules. HTML n'est pas sensible à la casse, mais XHTML l'est et suit les règles de la syntaxe XML.
Tout dépend des changements de logo ! Vous savez déjà tout ! Respirez profondément, sirotez une bière et détendez-vous. Parce que ce n'est que la première étape.
Section 2
Maintenant, nous commençons à apprendre à écrire du HTML/XHTMLL correct et à les valider dans le validateur (validator) de l'organisation W3. Si vous l'avez écrit correctement, vous verrez un message de réussite avec un texte jaune sur fond bleu. Essayez d’aimer cette combinaison couleur/police, ce sera votre meilleur ami.
Pourquoi la vérification est-elle si importante ? Est-ce important ? Parce que des logos mal écrits (aléatoires, imprécis) apporteront une imprévisibilité totale. La « vie et la mort » d'une page dépendent entièrement de la méthode de gestion des erreurs du navigateur. Bien que la plupart des navigateurs puissent également bien prendre en charge les logos mal écrits, il s'agit d'une mauvaise habitude. Salut, qu'est-ce qui nous habitue au non-standard ? La première raison est la guerre des navigateurs. En 1995, Microsoft a pu rivaliser et gagner des parts de marché face à Netscape parce qu'IE gérait les erreurs des pages Web exactement de la même manière que Netscape.
Autre perspective : la validation vous aide à trouver le code erroné et garantit que vos pages se comportent de manière plus cohérente. La vérification du code est la première chose que je fais lors du débogage d’une mise en page, et je pense que vous l’êtes aussi.
OK, lorsque vous vérifierez votre premier site pour la première fois, vous devrez probablement endurer soixante-dix ou quatre-vingts messages d'erreur incroyables. Malheureusement, même si la somme de contrôle est utile, elle n'est pas parfaite et n'est gérée que par quelques bénévoles. La bonne nouvelle est que ces erreurs sont liées. Si vous constatez qu'une balise </p> est manquante et que vous la corrigez, il est probable que les 24 prochaines erreurs auront disparu. En bref, il peut sembler que le résultat de la vérification est mauvais, mais ce n'est souvent pas le cas.
Maintenant, vous avez passé la validation et votre code est conforme. À ce stade, vous respectez une directive stricte, mais vous ne comprenez pas pleinement pourquoi vous le faites en premier lieu.
Section 3 L'étape suivante consiste à refactoriser la documentation que vous avez créée à l'aide d'un balisage bien formé, en supprimant les attributs de la couche de présentation qui sont de plus en plus répertoriés comme « obsolètes » dans les DOCTYPEs récents et en les plaçant dans un fichier séparé. Il s’agit de la « séparation controversée des performances et de la structure », c’est pourquoi CSS est si important.
Voici une analogie : votre texte est du contenu. Le contenu est complet, mais il n'y a aucune indication sur la structure du contenu (comme les espaces, les sections, les titres, les listes, etc.). Ce que vous obtenez n'est qu'un texte désordonné, qui n'est pas du tout facile à utiliser. La couche structurelle est supplémentaire. Des éléments individuels sont ajoutés au document pour transmettre des informations structurelles supplémentaires afin de diviser le texte désordonné et de le rendre plus logique et organisé. Mais ces éléments ne contrôlent pas l’apparence par défaut du texte. Par exemple, vous constatez souvent que le titre de la première page est plus grand que la police du texte. Cela n'est pas dû à la structure.
Il est temps que la « couche de présentation » apparaisse. La représentation est un indice de formatage, qui indique que le titre de la première page doit être rouge, en italique et que la taille de la police doit être 150 % de la police du corps. La couche de présentation est une couche supplémentaire au-dessus de la couche de structure du document. CSS appartient à la couche de présentation et peut transformer des documents en formes étonnantes grâce à de simples balises sur le document - visitez CSS Zen Garden pour voir des exemples.
Alors, quelle est la meilleure façon de séparer la performance de la structure ? Prenons pour illustrer un morceau de code traditionnel, qui contient des éléments ou des attributs HTML utilisés pour assurer la présentation. Il est temps de supprimer ces balises bgcolors et <center>. Faisons un test informel :
Dans le code de démonstration suivant, quels attributs et balises de présentation doivent être éliminés ?
<center><h1><font face="Verdana">Ceci est mon premier site Web.</font></h1></center> <table border="0" cellpadding="0" cellpacing="0" > <body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> <td bgcolor="#ffffff" valign="top" align="center">< p>Ils viennent m'emmener...</p></td>
Êtes-vous prêt avec votre réponse ? OK, le résultat correct est répertorié ci-dessous, qui est un code structuré propre, sans aucune trace de performance :
<h1>C'est mon premier site web.</h1> <table> <body> <td><p>Ils viennent m'emmener...</p></td>
c'est tout ? C'est ça.
Bien que ce code ne soit explicitement conforme à aucune spécification, le plus important de cette séparation est que les éléments corrects sont utilisés. L'utilisation de la disposition des tableaux est un problème secondaire. Dans l'exemple ci-dessus, la méthode d'utilisation des tableaux est incorrecte dans une perspective prudente et à long terme, les éléments <table> et <td> doivent être supprimés. Bien que leur utilisation soit obsolète, les tableaux restent très utiles et peuvent être utilisés le cas échéant, sur des données organisées sous forme de tableau.
Eh bien, nous avons supprimé la mise en forme de nos pages, hourra ! Que fais-tu d'autre maintenant ? Cela laisse juste quelques éléments, textes et lignes laids dans la police Times-New-Roman. Pas drôle du tout, où sont les pages lumineuses et belles qu’on nous promettait ?
En repensant à l’exemple du Zen Garden, voyez-vous le design mignon ? À quel point sont-ils différents ? Le fait est que sous ce beau design se trouve le même XHTML qui est tout aussi ennuyeux que le document non formaté que vous venez de créer. N'est-ce pas vrai ?
En fait, ce qui est ennuyeux et laid a une bonne base. Vous avez peut-être remarqué que ce HTML non formaté semble aussi mauvais que le Web en 1994. À quelques exceptions près, ces éléments sont aussi vieux que le Web lui-même, <h2> existant depuis l'époque du navigateur Mosaic.
Les avantages ne s'arrêtent certainement pas là, avec la facilité d'utilisation (pour ces besoins particuliers), le référencement intégré, la réduction des coûts de bande passante, etc. Jeffrey Veen avait déjà écrit « La valeur commerciale des standards du Web » l'année dernière, et Roger Johansson a également expliqué les techniques et les avantages de la conception basée sur les standards dans son récent « Développement avec les standards du Web ».
CSS est aujourd'hui bien pris en charge par tous les principaux navigateurs, et il existe d'innombrables ressources pour vous aider à apprendre la syntaxe CSS, la mise en page basée sur CSS et les techniques avancées. J'en recommande quelques-uns : westCiv propose un cours CSS gratuit et continu qui vous aidera à démarrer et à maîtriser rapidement. Andrew Fernandez a construit une énorme liste de ressources CSS qui vous seront utiles, que vous soyez nouveau dans CSS ou non. Eric Meyer a écrit une liasse de livres que vous pouvez conserver sur votre bureau et consulter à tout moment. Ces livres incluent Eric Meyer, basé sur des cas, sur CSS et More Eric Meyer sur CSS. Le livre de référence CSS : "The Definitive Guide to CSS" publié par O'Reilly Publishing House est sorti pour la deuxième édition, et vous feriez mieux de le garder sur votre bureau. Sont également disponibles "The Designer's Edge" de Molly Holzschlag et "Designing CSS Web Pages" de Chris Schmitt.
Entrer dans les détails de l’application du CSS et de la création de mises en page prendrait trop de temps. Je n’en dirai pas beaucoup plus. Ce qui précède est le conseil que je peux donner aux concepteurs qui commencent à s'intéresser aux standards du Web. Lisez et partagez vos réflexions et grandissons en tant que communauté. Beaucoup d'entre nous font activement la promotion des normes Web. Nous disposons d'un réseau mondial.
Notes 1. "Designing With Web Standards" est un livre écrit par Zeldman pour promouvoir les standards du Web. La version chinoise a été introduite et publiée en mai 2004. Le livre est intitulé "Website Reconstruction--Designing with Web Standards".