La mise en page, ou layout (en) correspond à l'activité d'organisation spatiale des éléments d'un document. C'est un besoin récurrent lors du développement d'Interfaces Hommes-Machines, que ce soit en Web, en Java, …

Le contenu d'une page HTML est souvent amené à évoluer, par exemple la page C.V. de votre site personnel va s'étoffer au fur et à mesure de vos succès scolaires et de vos expériences professionnelles. De même, le contenu de la section “News” du site d'une association par exemple est mis-à-jour fréquemment. Ainsi, le layout d'une page HTML dépend de son contenu actuel, mais doit être conçu au delà de celui-ci.

Voici deux schémas typiques d'exemples de découpage d'une page HTML5. Bien entendu, tous les sites ne suivent pas le même format. L'organisation des différentes zones est dépendante du type de contenu, de la volonté d'informer ou de divertir, du type de public visé…

Nous vous proposons de créer une section de type blog sur votre site web en utilisant les balises de l'exemple. Ce TD vous sert à les expérimenter, pour vous faire une idée de comment mettre en page votre site fil-rouge (cf Section Présentez-vous du TD1). Pour cela vous vous aiderez de l'exemple suivant et des informations données dans les rubriques ci-après.

Plus d'infos sur les différentes balises HTML utilisées.

Les éléments d'un arbre xHTML sont parcourus par le navigateur et affichés selon leur hiérarchie, de haut en bas et de gauche à droite. Toutefois, deux comportements basiques sont à identifier au sein de ce flux: les éléments de type Block et ceux de type Inline. Pour simplifier, les éléments en ligne, ou inline, sont affichés les uns à la suite des autres, tandis que les éléments conteneurs, ou block, amènent un retour à la ligne après leur affichage.

Quelques balises Block:

• l'élément div ;
• les titres h1, h2, h3, h4, h5, h6 ;
• le paragraphe p ;
• Les listes et éléments de liste ul, ol, li, … ;
• Le bloc de citation blockquote;
• L'adresse address.

Quelques éléments Inline

• l'élément span ;
• le lien a ;
• L'image img ;
• Les citation q et cite ;
• L'élément code ;

Votre site contiendra plusieurs pages. Vous avez envie de laisser à l'utilisateur la possibilité de naviguer d'une page à l'autre où qu'il se trouve. La barre de navigation peut par exemple se trouver en haut de la page, un repère fiable où tout le monde saura la trouver, ou sur la gauche de l'affichage, pour suivre le déroulement de la lecture et toujours à portée de clic.

Quelques propriétés CSS à tester sur vos éléments pour comprendre leur comportement :

1. La position (static, relative, absolute ou fixed).

    position : ... ;

2. Le display (inline, block, flex, none ...).

    display: ...; 

3. Le flottement (left, right) .

    float: ...;