Voici la suite de ce précédent billet, je vais essayer de continuer à garder l'analogie avec le régime alimentaire, histoire de donner des idées.
Nous en sommes donc au point suivant, vos pages commencent à s'alléger, et les pénib... "puristes" vous rabattent les oreilles avec un mot bizarre, la sémantique.
Qu'est-ce donc que ce concept ?
C'est assez simple à intégrer, il suffit pour cela de ne pas penser (pour le moment) à la présentation de vos pages, pensez uniquement à leur contenu. La sémantique consiste à donner du sens, c'est-à-dire utiliser les bonnes balises au bon endroit.
Comment donner du sens à votre structure ???
En fait, c'est assez simple, votre page, pour peu qu'elle soit un minimum structurée, contient :
- un titre
- les liens de votre bandeau
- le texte de votre page, avec éventuellement des sous-titres, des paragraphes.
Vous pouvez donc utiliser une balise <h1> pour le titre principal, <h2> pour les sous-titres, <p> pour les paragraphes, etc.
Mais la liste des liens du bandeau, avec quoi peut-on la représenter ?
Relisez la question, la réponse est dedans. Nous avons une liste de liens, utilisons donc... une liste <ul> !
Comme vous pouvez le voir, ce n'est pas très compliqué.
Ensuite, il faudra baptiser ces balises, afin de pouvoir les "piloter" avec les CSS.
Encore une fois, ce n'est pas très compliqué, nous avons les "id" qui servent à définir quelque chose d'unique dans la page (exemple, vous avez un seul et unique bandeau, ce qui nous donnera <ul id="bandeau">), et les classes qui servent à... classer plusieurs éléments (exemple, vous avez plusieurs sous-sous-titres (<h3>) dans votre feuille de régime ayant des propriétés semblables, cela nous donnera donc <h3 class="feculents">Patates</h3>.
Là où cela se complique, c'est qu'il n'existe pas de balise <entete> par exemple, pourtant, cela pourrait être intéressant de structurer un peu plus. Qu'à cela ne tienne, le cas est prévu !
Nous avons deux balises à tout faire qui peuvent servir dans ce cas, <div> et <span>. Pourquoi en avoir deux ?
En fait, il y a juste une petite différence simple à comprendre. le premier est de type "bloc" et le second est de type "inline".
La différence est simple, les blocs se mettent les uns au-dessus des autres (ils s'empilent en quelque sorte), et les "inline" se mettent les uns à côté des autres (inline se traduit par... en ligne).
Arrivé à ce stade, vous vous dites probablement que je suis fou, qu'une liste ne pourra pas remplacer vos tableaux... Détrompez-vous !
C'est là qu'interviennent les CSS, ce sont elles qui vont permettre de positionner correctement, de mettre des images en fond, de positionner lesdites images.
Et là, vous en êtes à une étape assez difficile, surtout si vous aviez l'habitude des tableaux pour présenter une page. Car on ne touche (quasiment) plus au code XHTML que vous venez de structurer, toute la présentation se fera via les feuilles de style, qui vont se servir des "id" et des "class" que vous avez utilisés. C'est le principe de la séparation structure/présentation.
A mon humble avis, il est plus simple au début de faire des essais sans intégrer d'images ou de positionnements un peu trop farfelus, juste avec des propriétés de bordures, de marges, etc.
Pour faire l'analogie avec le régime, cuisinez simple au début !
Ce n'est pas encore très beau (quoique, on peut obtenir des résultats très sympathiques), mais je trouve que cela a le mérite d'être plus simple (en tout cas, c'est comme ça que j'ai appris) pour commencer.
Après quelques probables (c'est tout à fait normal) énervements, vous devriez finir par trouver tout cela assez simple (les propriétés ne sont pas en nombre illimité, et on finit vite par trouver à force de faire), il y a désormais de nombreux tutoriels, ce qui était moins vrai il y a quelques années...
Quant vous vous sentez à l'aise avec le positionnement CSS, vous pouvez commencer à vous amuser avec des images de fond...
Arrivé à cette étape, vous pouvez vous dire que vous mangez bien plus équilibré, et que le plus dur est fait.
La prochaine étape sera celle des ajustements.
