Les parties d'une
page web

partie-d-un-site-web

Les contenus affichés sur le web sont accessibles grâce à des URL qui permettent d’accéder à différents types de ressources tels que les images, les vidéos, les audio, des pages web, les fichiers pdf… Il existe donc plusieurs types de documents, mais les pages web sont une particularité, elles sont la base, car elles permettent d’afficher presque tous les autres types de documents. Les pages web sont conçu en utilisant différentes technologies qui ne peuvent être toutes citées, toutes fois à l’affichage elles présentent toutes des points communs qu’il est important de connaître.

1 . C’est quoi une page web ?

Une page web est un document dont le contenu est formaté en utilisant le format HTML qui définit le contenu ainsi que la forme d’affichage de ce contenu.

Le HTML n’est pas à proprement parlé un langage de programmation, car il ne permet pas de programmer des instructions à exécuter. Le HTML est plutôt un langage de marquage qui permet de marquer un texte pour définir comment il sera affiché. Le langage HTML utilise un ensemble de marqueurs appelés balises qui permettent de définir l’affichage du texte qu’elles encadrent. Le navigateur web interprète ces balises et affiche le texte en respectant la signification des balises
Par exemple “<“strong”>” Beau texte “<“/strong”>” permet de demander d’afficher le texte Beau texte en gras.

partie-d-un-site-web-html

De base une page web à l’extension html ou htm mais avec l’évolution des technologies du web et des langages de programmation, il existe de nombreux moyens de générer les pages web, ce qui donne place à de nouvelle extension telle que .php, .jsp, .aspx …. Toutefois, quelque soit l’extension le contenu est toujours au format HTML.

Une page peut contenir à la fois du texte, des images, des sons et des vidéos. On y retrouvera en plus des liens hypertextes qui permettent de demander au navigateur web d’afficher une autre page lorsqu’on clique dessus. Ce sont ces liens hypertextes qui sont la base de la navigation sur le web et qui gouvernent aussi la structure logique d’une page web.

Page-web

2 . Les parties d’une page web

Le fonctionnement technique et la programmation d’une page web est trop complexe pour être traité dans ce seul article. Par contre, nous allons nous intéresser à la structure logique d’une page web et le rôle de chaque partie. Globalement on peut dire qu’une page web comprend deux grandes parties, à savoir le contenu principal et la navigation. Toutefois, la navigation peut prendre tellement de formes variées et donc on se retrouvera généralement avec les parties suivantes : l’entête, le contenu principal et le pied de page.

2 . 1 . L’entête

header

Encore appelé header, c’est la première partie de la page et marque donc le début de la page. Il contient des informations d’identification du site web et de la page (titre, auteur). C’est la première partie que l’on voit lorsque la page est affichée pour la première fois et donc il faut faire attention aux informations qui y figurent. Il faut aussi associer la barre de titre du navigateur au header de la page, car cette barre de titre peut contenir des informations importantes d’identification de la page et du site web.

De façon générale, à part quelque éléments distinctif de la page affiché (titre, auteur), toutes les pages d’un site web ont les mêmes informations, car cela donne plus de cohésion à l’ensemble du site web. On retrouve les informations suivantes dans le header :

Il permet d’identifier facilement le l’organisation par une image

Souvent inclus dans le logo, il permet à l’utilisateur de savoir sur quel site web il se trouve. Vous verrez par exemple le nom Facebook sur toutes les pages du site web de Facebook que ce soit en texte ou en image

Toutes les organisations n’en ont pas un, mais lorsqu’on souhaite l’afficher c’est dans le header qu’il faut le mettre.
En plus du logo, c’est une image que l’on associe facilement à l’organisation propriétaire du site web. Par exemple pour une grande entreprise, ça peut être une photo de son siège social ou d’un ensemble de produits phares, pour une église ça peut être une photo de sa paroisse.

Il s’agira ici surtout du nom de la page visible dans la barre de titre du navigateur web, car il ne faut pas oublier que le header change très peu en fonction des pages. Mais si possible il faut afficher le titre de la page dans le header.

C’est le premier élément de navigation du site web, car il contient les liens vers les principales sections du site web.

2 . 2 . Le contenu principal

contenu-principal
C’est le contenu que l’on souhaite partager sur cette page, c’est pour ce contenu qu’on consulte la page, c’est la raison d’être la page et vous ne trouverez pas exactement ce même contenu ailleurs sur le site web.

Le contenu de la page peut prendre différentes formes et utiliser une combinaison de plusieurs éléments de design (slide, accordéon, onglets, listes, tableaux …) en fonction des besoins. Dans un souci de cohérence, on met généralement le titre de la page en début de cette partie. Il faut garder à l’esprit que le header de la page, c’est le header du site web et donc il contient les informations pour tout le site. Et par habitude et pour des besoins évident d’ergonomie, le dernier élément du header est le menu principal. Ce qui fait donc qu’il serait incohérent de mettre le titre de la page avant le menu principal, car le menu principal n’appartient pas vraiment à la page, mais au site web tout entier. C’est pour cette raison que le titre de la page se retrouve donc après le menu principal et immédiatement en début de contenu de la page.

2 . 3 . Le pied de page

footer

Il marque la fin du contenu principal et aussi de la page. Il sert généralement de menu secondaire et contient des liens vers différents contenus en lien direct avec la page web affichée. Il peut aussi contenir des liens vers d’autres pages importantes du site tels que la page des mentions légales. À la différence du menu principal, les liens ici ne sont pas organisés en menu et sous menu, mais affiché directement avec des « titres » pour chaque ensemble de liens.