L'essentiel du HTML5

Délimiter les blocs principaux de la page

Testez gratuitement nos 1257 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Lors de la mise en place de la structure de votre page, distinguez les blocs principaux qui la composent. Ensuite, viendra le contenu détaillé.
05:35

Transcription

En construisant une page HTML, généralement, on part d'une maquette ici, qui est un wall framing au départ, qui est une définition de zone un peu qui va permettre de positionner les divers éléments de contenu. Ensuite on va avoir une maquette un peu plus avancée, qui va utiliser de la typo, des couleurs, de la mise en forme, et donc, dès cet instant là, on va pouvoir venir découper des pré-zones. Alors, on va pouvoir pour cela venir s'appuyer sur notre page habituelle ici qui va nous permettre de venir piocher les éléments, et puis de s'aider en fait de ce diagramme qui va nous aider. Est-ce qu'au départ c'est un élément de navigation? Oui donc c'est une balise nav. Ensuite ici si je regarde sur ma maquette, la maquette la plus avancée, celle qui est un peu en couleurs ici. Ici je vais me retrouver avec un élément de type nav, effectivement. Après ici je vais avoir un élément, alors est-ce que cet élément est un élément de type de contenu? C'est un contenu d'information, donc ça pourra être le header. Ici maintenant la question va se poser, qu'est-ce que ça va être tout cet élément-là? Ici tout cet élément là, ça pourrait dire: "c'est le contenu global de ma page". Ca pourrait être un article global. C'est vrai qu'en lui tout seul, ça va pouvoir se considérer comme étant le contenu. Mais pour cela il est apparu une balise qui n'est pas forcément reconnue par tous les vieux navigateurs, mais qui commence à faire légion aujourd'hui, c'est la balise main, qui permet de définit le contenu principal. Et donc cette balise de contenu principal ici va s'appeler main; on pourrait placer une balise main. Mais allons un tantinet plus loin ici. Ici on voit bien qu'ici c'est la partie, nos yeux nous le montrent, ça a été voulu aussi un peu comme ça, on voit que c'est le footer, c'est le complément d'informations sur la page, c'est à dire c'est les informations complémentaires, le footer ici, qui va nous donner toute une série d'infos sur le site de navigation, et cetera, de rappel de navigation. Donc en fait, si ce n'est pas un élément de navigation ou de foot, si c'est pas un élément d'en-tête de page, si c'est pas un élément de menu, forcément ça va être le menu contextuel. Imaginez qu'on ait des compléments d'informations secondaires ici sur une balise aside qui serait placée sur le côté, pareil, le saut est identifié par une balise aside, donc tout ce qui va rester sera le main content. Donc par défaut, intelligemment on peut arriver à définir quel est le main content. On pourrait le placer dans une section, on pourrait le placer dans une balise div. On pourrait le placer dans peu importe la balise bloc, comme vous voudrez pour pour le contenu principal. Généralement le navigateur serait capable de pouvoir déterminer où se situe le contenu principal. Maintenant ici, ce contenu principal, je vais pouvoir le découper en parties secondaires et me dire, peut être que j'ai des articles à part entière, ai-je des sections d'articles? Et là, vous comprenez la démarche qu'on va pouvoir mettre en place pour pouvoir venir découper le contenu de notre page. Alors, on pourrait s'arrêter à ce contenu principal et se dire, ici j'ai la partie haute qui est le nav, ici la partie seconde qui va être le header, l'en-tête, ici le main content, et à la fin le footer qui va venir se distinguer. Si je regarde ça d'un point de vue HTML, j'ai ma page de départ ; comment je vais pouvoir fabriquer là-dedans? Je vais venir définir une balise de type nav, je vais dire que c'est l'élément nav à l'intérieur. Ensuite je vais faire une balise de type header, je vais mettre le header; la balise main, le main; et le footer, le footer. Voilà, donc on va pouvoir comme ça venir découper chacun de nos contenus. On va enregistrer, on va mettre une feuille de style qu'on explorera par la suite, et je vais aller inspecter ça dans un navigateur, pour voir les différents blocs. Le css on le regardera par la suite, c'est peu important. Ce qu'on a vu maintenant, c'est qu'on a pu mettre en place une base de conteneurs principaux qui va recevoir le contenu. C'est ça le plus important dans la page, c'est de pouvoir définir la zone dans laquelle les contenus vont venir s'afficher, Ensuite on rentre dans la partie seconde qui va être de définir le contenu. Alors, faites attention à une polémique justement au niveau du nav, souvent, souvent on a tendance à se dire, je l'ai dit volontairement aussi, que dans le footer on pouvait la navigation qui est répétée ici. Alors, si on regarde dans la partie du whatwg à propos du nav element, ici, il y a une note assez intéressante qui dit que le footer element, à lui seul, est suffisant pour pouvoir définir une navigation. C'est vrai qu'on pourrait placer un nav element qui pourrait être utilisé. Mais dans ces cas là c'est vraiment pas nécessaire de le raffirmer par un nav second, on peut laisser une simple liste de liens dans la partie du footer. Donc c'est très important d'arriver à distinguer les éléments principaux qui vont venir découper la page en contenus. Ce qui fait que maintenant, si au lieu d'avoir l'élement de type nav, ici, je place directement un menu, si dans la partie du titre, je vais placer ici le titre directement, dans le footer je vais en profiter, qui est encore là à l'écran, pour placer une simple phrase, ça pourrait être un élément de liste ou peu importe, c'est à vous de voir pour le contenu, et ici je vais placer trois articles avec trois parties de contenu, ici. Ce qui va être intéressant de voir c'est qu'une fois qu'on a fait une pré-maquette, personellement j'appelle ça les naked css, parce que c'est nu de css, c'est nu de contenu, c'est nu de tout. Et ça nous avait permis au départ de pouvoir positionner chacun de nos blocs. Maintenant quand j'actualise ma page, on voit bien que les blocs s'adaptent, et continuent à contenir le contenu. Maintenant je n'ai plus que ce contenu à venir mettre en forme à l'intérieur. Alors si je regarde simplement les feuilles de style qui ont été adaptées ici, c'est vraiment du basique : le body on lui a placé un margin 0 auto pour le centrer et le positionner en partie haute. Ici une largeur de 960 pixels, pour qu'il se centre sur l'écran. Ici les nav, le header et le main, il n'y a rien. Ici ça a été regroupé pour dire, il y a une sorte de pourtour rouge avec un padding à l'intérieur et une couleur de fond, on les espace avec un margin. Et puis les li ici sont display inline-block, pour pouvoir avoir une navigation horizontale et non pas les éléments de liste les uns sous les autres. Et puis le main, un display block, ici, avec un padding tout le tour qui nous permet de pouvoir avoir une marge à l'intérieur. Voilà, mais maintenant vous allez pouvoir venir ajuster vos css pour pouvoir positionner correctement tous les contenus de nos blocs principaux.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !