La balise DIV

Sur Unblog on n’a pas accès à la balise DIV (qui se trouve dans le body) et encore moins aux feuilles  de styles, néanmoins on va voir quelques éléments de cette balise permettant de comprendre comment ça marche

La balise DIV est une balise de bloc et peut contenir d’autres balises de bloc ainsi que des balises de lignes. C’est une balise structurante de document. L’intérêt de la balise div c’est qu’avec un style on peut faire pas mal de choses dans la présentation. Première chose à faire .. comprendre la disposition des différents éléments composant la page web . Pour ce faire on va prendre l’exemple d’un blog quelconque

En gros de quoi est composé un blog ? .. un header, un menu, un pied de page et le contenu par exemple celui des articles .. et voilà c’est presque fini on aura donc dans le body .. 4 balises div principales chacune d’entre elles correspondant à ce qu’on a identifié comment les disposer ? là ça se complique un peu plus .. tout dépend du style et de son contenu ce qu’on sait c’est que le menu et le contenu devront être côte à côte mais ça pour l’instant on laisse la feuille de style se débrouiller avec la propriété float … on aura donc un body qui ressemblera à ça

  

ou bien à ça …

      

Ces deux écritures donneront un visuel identique peu importe l’ordre puisque c’est la feuille de style qui « arangera » la présentation en disposant les différentes boites définies par les div les unes par rapport aux autres par contre si il y a une erreur de code dans une des boites … cette erreur peut se répercuter aux autres boites qui sont écrites après par exemple si le menu est écrit après le contenu et qu’un lire la suite ne ferme pas une balise font .. la balise font s’appliquera aussi au menu, de même une balise font non fermée dans un module text du menu s’appliquera à tout ce que le navigateur lit après .. en particulier au contenu si le div est après. De même si la feuille de style est mal écrite en particulier pour les dimensions, on peut avoir les éléments l’un en dessous de l’autre .. selon l’ordre dans lequel ils ont été écrits dans le body …

Mais, des feuilles de style bien écrites font que l’ordre de ces boites dans le body n’a aucune importance on peut même mettre, pourquoi pas, les boites header et footer à la fin du body

les noms des styles n’ont aucune importance ils sont définis dans le document par la feuille de style par contre les noms des propriétés sont figés .. mais il est d’usage de mettre un nom qui rappelle quelque chose, voire d’avoir une certaine uniformité il est plus parlant d’avoir un style « menu » .. que « Zhgfyxwklj » .. même si ils ont les mêmes définitions

on vient de voir que la barre de menu pouvait avoir des modules .. qu’à cela ne tienne chaque module sera défini comme un bloc div ayant un style particulier par exemple « calendar » pour le calendrier, « widget-text1″ pour le 1° module text, « derniers-articles » pour les derniers articles, « categories » etc …  le div menu deviendra donc

....  

Et c’est pareil pour le contenu .. on aura une boite pour chaque article et chaque boite pourra contenir des boites concernant l’url,  la date, l’auteur, l’article lui-même, les catégories rattachées, et autant de boites commentaires que nécessaire  et autant de boites que la page web montrera d’articles …

 

 

Le Body

 Dans un précédent article nous avons vu que le body était un constituant essentiel de la page web visionnée puisque c’est son contenu et uniquement son contenu qui sera visualisé par l’internaute.

quand on regarde le code du body on voit que celui-ci est très structuré ..


etc .. des fois il peut y avoir