SI Web 3 Mise en Page

Mise en page du site v 1.
Note : Ce support de travaux pratiques est librement inspiré de différents travaux qui sont cités
dans la partie « Sources », à la fin du présent document. Il est partagé sous licence libre.
Nous approchons de plus en plus du but. Si nos pages web ne ressemblent pas encore tout à fait aux sites
web que nous connaissons, c'est qu'il nous manque les connaissances nécessaires pour faire la mise en
page.
En général, une page web est constituée d'un en-tête (tout en haut), de menus de navigation (en haut ou
sur les côtés), de différentes sections au centre… et d'un pied de page (tout en bas). Dans ce chapitre,
nous allons nous intéresser aux nouvelles balises HTML dédiées à la structuration du site. Ces balises ont
été introduites par HTML5 (elles n'existaient pas avant) et vont nous permettre de dire : « Ceci est mon
en-tête », « Ceci est mon menu de navigation », etc.
1. Structurer sa page
Vous avez déjà pu observer avec l’application CEDjs, que nous pouvions utiliser des balises structurantes
pour organiser notre contenu. Nous avions dit précédemment que nous explorions cela plus tard. C’est
désormais le moment. Nous allons cependant cette fois-ci nous appuyer sur le site « developpez.com »
dont les informations, en plus d’être indispensable à la veille technologique d’un étudiant en BTS SIO,
sont suffisamment nombreuses pour qu’elles justifient amplement l’utilisation de balises structurantes.
1.1. Observations
Travail à faire
1..1 Ouvrir le site Web « développez » avec votre navigateur Web Firefox, puis lancer l’ins-
pecteur à partir du menu et des « outils de développement » ou encore avec la combi-
naison de touches du clavier : Ctrl + Maj + C
À l’aide de l’inspecteur, vous allez observer différents éléments de la page Web afin de déterminer quelles
balises sont utilisées pour structurer la page.
Travail à faire
Effectuer les opérations présentées ci-dessous et noter vos conclusions, réponses sur une feuille de papier.
1..2 Retrouver la zone capturée ci-dessus à l’aide de l’inspecteur. Quelles informations sont-
elles présentées ? À quelle partie d’un site Web cela correspond-elle (nommez là) ?
Quelle balise est-elle utilisée pour structurer cette zone ?
BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 1 / 8

Mise en page du site v 1.0
1..5 Retrouver les zones capturées ci-dessus à

l’aide de l’inspecteur. Quelles informations sont-elles présentées ? À quelles parties
d’un site Web cela correspondent-elles (nommez les) ? Quelle balise est-elle utilisée
pour structurer cette zone ?
Intéressons-nous maintenant plus particulièrement à un article du site et continuons nos observations.
Travail à faire

1..7 Retrouver la zone capturée ci-contre à l’aide de l’ins-

pecteur. Quelles informations sont-elles présentées ? À
quelle partie d’un site Web cela correspond-elle (nom-
mez là) ? Quelle balise est-elle utilisée pour structurer
cette zone ?
1.2. Résumé
• Plusieurs balises ont été introduites avec HTML5 pour
délimiter les différentes zones qui constituent la page web :
• <header> : en-tête ;
• <footer> : pied de page ;
• <nav> : liens principaux de navigation ;
• <section> : section de page ;
• <aside> : informations complémentaires ;
• <article> : article indépendant.
• Ces balises peuvent être imbriquées les unes dans les autres. Ainsi, une section peut avoir son
propre en-tête.
• Ces balises ne s'occupent pas de la mise en page. Elles servent seulement à indiquer à l'ordinateur
le sens du texte qu'elles contiennent. On pourrait très bien placer l'en-tête en bas de la page si on le
souhaite.
1.3. Application
Nous allons maintenant revenir sur notre page consacrée à Tim Berners-Lee. Vous débuterez votre travail
à partir des éléments de correction partagés à la suite de la seconde partie consacrée à l’introduction au
format de données CSS.
Le contenu de notre page est trop limité pour pouvoir appliquer l’ensemble des balises structurantes.
Notre page comporte cependant une zone intégrant les principaux liens de navigation.
Exercice
1..8 Ajouter une balise de navigation au code HTML à l’endroit opportun.
Remarque : Vous retrouverez le résultat sur la branche correspondant à l’itération n°3 du dépôt
dédié.
2. Le modèle des boîtes

Une page web peut être vue comme une succession et un empilement de boîtes, qu'on appelle « blocs ».
La plupart des éléments vus au chapitre précédent sont des blocs : <header>, <article>, <nav>… Mais
nous connaissions déjà d'autres blocs : les paragraphes <p>, les titres <h1>…
2.1. Les balises de type block et inline

En HTML, la plupart des balises peuvent se ranger dans l'une ou l'autre de deux catégories :
• Les balises inline : c'est le cas par exemple des liens <a></a>.
• Les balises block : c'est le cas par exemple des paragraphes <p></p>.

Mais comment je reconnais une balise inline d'une balise block ?
C'est en fait assez facile :

• block : une balise de type block sur votre page web crée automatiquement un retour à la ligne
avant et après. Il suffit d'imaginer tout simplement un bloc. Votre page web sera en fait constituée
d'une série de blocs les uns à la suite des autres. Mais vous verrez qu'en plus, il est possible de
mettre un bloc à l'intérieur d'un autre, ce qui va augmenter considérablement nos possibilités pour
créer le design de notre site !
• inline : une balise de type inline se trouve obligatoirement à l'intérieur d'une balise block. Une
balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite
du texte précédent, sur la même ligne (c'est pour cela que l'on parle de balise « en ligne »).
2.2. Transformez vos éléments avec display

Il existe en CSS une propriété très puissante : display. Elle est capable de transformer n'importe quel
élément de votre page d'un type vers un autre. Avec cette propriété magique, je peux par exemple imposer
à mes liens (originellement de type inline) d'apparaître sous forme de blocs :
a
{
display: block;
}
À ce moment-là, les liens vont se positionner les uns en dessous des autres (comme des blocs normaux) et
il devient possible de modifier leurs dimensions !
2.3. Le positionnement inline-block

Les manipulations que demande le positionnement flottant (que nous avons vu dans le chapitre précédent)
se révèlent parfois un peu délicates sur des sites complexes. Dès qu'il y a un peu plus qu'un simple menu à
mettre en page, on risque d'avoir à recourir à des clear: both; qui complexifient rapidement le code de la
page.
Même si le positionnement avec flexbox (que nous étudierons plus loin) se généralise aujourd’hui,
d'autres techniques existent et restent utilisées. L'une d'elles existe depuis CSS 2.1. Elle consiste à
transformer vos éléments en inline-block avec la propriété display.
Quelques petits rappels sur les éléments de type inline-block :
• Ils se positionnent les uns à côté des autres (exactement ce qu'on veut pour placer notre menu et le
corps de notre page !).
• On peut leur donner des dimensions précises (là encore, exactement ce qu'on veut !).
2.4. Observations
Rappel : Il existe deux balises génériques. La seule différence entre les deux est que l'une
d'elle est inline et l'autre est block : <span>…</span> (inline) ; <div>…</div> (block).
Nous revenons maintenant vers l’application CEDjs et son site de démonstration, toujours hébergé sur les
pages de Framagit, qui va nous permettre de comprendre la mise en page de type inline-block.
Travail à faire

2..9 Ouvrir le site de démonstration avec votre navigateur Web Firefox, puis sélectionner
l’éditeur de style dans les « outils de développement ».
2..10 Localiser la définition de la mise en page de logo et en_tete, puis modifier la valeur de la
propriété display d’inline-block en block. Qu’observez-vous ? Cet affichage correspond-il
au comportement par défaut d’une balise <div> ? Supprimer la propriété display pour
vérifier cela.
2..11 Localiser la définition de la mise en page des balises article et aside, puis modifier la va-
leur de la propriété display d’inline-block en block. Qu’observez-vous ? Cet affichage cor-
respond-il au comportement par défaut d’une balise <div> ? Supprimer la propriété dis-
play pour vérifier cela.
2..12 Rafraîchir, puis modifier la valeur de la propriété vertical-align de top en middle. Qu’ob-
servez-vous ? À quoi sert la propriété vertical-align ?
2.5. Application
à la suite de l’exercice précédent (structuration de la navigation). Vous trouvez une figure représentant le
résultat final à obtenir après l’énoncé de l’exercice.
Exercice
2..13 Mettre en page le menu de navigation en alignant les différents éléments.
dédié.
3. Mise en page avec Flexbox

Il y a plusieurs façons de mettre en page un site. Au fil du temps, plusieurs techniques ont existé, jusqu’à
ce Flexbox soit adopté.
3.1. Observations
Le principe de la mise en page avec Flexbox est simple : vous définissez un conteneur, et à l'intérieur
vous placez plusieurs éléments. Imaginez un carton dans lequel vous rangez plusieurs objets : c'est le
même principe !
Nous allons commencer à partir d’un exemple simple, dont voici le site de démonstration.
Travail à faire

Nous retrouvons (voir la figure ci-contre) le code
HTML du fichier index.html. Le conteneur est une
balise HTML, et les éléments sont d'autres balises
HTML à l'intérieur.
3..15 Ouvrir l’éditeur de style, puis modifier
la valeur de la propriété display de flex
en block. Qu’observez-vous ? Quel effet
produit la valeur flex ?
3..16 Toujours dans l’éditeur de style, modi-
fier la valeur de la propriété flex-direc-
tion du conteneur de row-reverse en co-
lumn, column-reverse, puis row. Qu’ob-
servez-vous ? Quels effets produisent sur les éléments ces différentes valeurs pour la
propriété flex-direction ?
3..17 Toujours dans l’éditeur de style, modifier la valeur de la propriété justify-content de
space-between en flex-start, flex-end, center, space-around. Qu’observez-vous ? Quels ef-
fets produisent sur les éléments ces différentes valeurs pour la propriété justify-
content ?
Si nous travaillons maintenant sur un projet où les trois éléments sont chacun des conteneurs. Le site de
démonstration, nous permet d’aller plus loin sur notre découverte de Flexbox.
Travail à faire
3..19 Ouvrir l’éditeur de style, puis modifier la valeur de la propriété justify-content des trois
éléments de center en flex-start. Qu’observez-vous ? Cela confirme-t-il l’effet observé
précédemment pour la propriété justify-content ?
3..20 Toujours dans l’éditeur de style, modifier la valeur de la propriété text-align des trois
éléments de center à left. Qu’observez-vous ? Résumer l’effet des deux valeurs center.
Nous travaillerons maintenant sur un troisième projet. Le site de démonstration, nous permet de pousser
encore plus loin notre découverte de Flexbox.
Travail à faire
3..22 Ouvrir l’éditeur de style, puis modifier la valeur de la propriété align-items du conteneur
de flex-end en flex-start, puis center et baseline. Qu’observez-vous ? Quels effets pro-
duisent sur les éléments ces différentes valeurs pour la propriété align-items ?
Nous finissons sur un quatrième projet. Le site de démonstration, nous permet de pousser encore plus loin
notre découverte de Flexbox.
Travail à faire

3..24 Ouvrir l’éditeur de style, puis modifier la valeur de la propriété flex-wrap du conteneur
de wrap en nowrap, puis wrap-reverse. Qu’observez-vous ? Quels effets produisent sur les
éléments ces différentes valeurs pour la propriété flex-wrap ?
Remarque : Vous pouvez aller encore plus loin en consultant cette page du tutoriel
d’OpenClassRooms.
3.2. En résumé
• Il existe plusieurs techniques pour positionner les blocs sur la page. Flexbox est la technique la
plus récente et de loin la plus puissante, que je vous recommande d'utiliser.
• Le principe de Flexbox est d'avoir un conteneur, avec plusieurs éléments à l'intérieur. Avec
display: flex; sur le conteneur, les éléments à l'intérieur sont agencés en mode Flexbox
(horizontalement par défaut).
• Flexbox peut gérer toutes les directions. Avec flex-direction, on peut indiquer si les éléments sont
agencés horizontalement (par défaut) ou verticalement. Cela définit ce qu'on appelle l'axe
principal.
• L'alignement des éléments se fait sur l'axe principal avec justify-content, et sur l'axe secondaire
avec align-items.
• Avec flex-wrap, on peut autoriser les éléments à revenir à la ligne s'ils n'ont plus d'espace.
• S'il y a plusieurs lignes, on peut indiquer comment les lignes doivent se répartir entre elles avec
align-content.
3.3. Application
à la suite de l’exercice précédent (structuration de la navigation). Vous trouvez une figure représentant le
résultat final à obtenir après l’énoncé de l’exercice.
Exercice
3..25 Mettre en page le menu de navigation en alignant les différents éléments avec Flexbox.

dédié.
4. Sources
• Site OpenClassRooms, en licence Creative Commons by nc-sa
• Le site de documentation « MDN Web docs » de la fondation Mozilla

SI Web 3 Mise en Page

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

SI Web 3 Mise en Page

Transféré par

Droits d'auteur :

Formats disponibles

Mise en page du site v 1.

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 1 / 8

1..5 Retrouver les zones capturées ci-dessus à

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 2 / 8

1..7 Retrouver la zone capturée ci-contre à l’aide de l’ins-

2. Le modèle des boîtes

2.1. Les balises de type block et inline

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 3 / 8

Mais comment je reconnais une balise inline d'une balise block ?

C'est en fait assez facile :

2.2. Transformez vos éléments avec display

2.3. Le positionnement inline-block

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 4 / 8

3. Mise en page avec Flexbox

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 5 / 8

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 6 / 8

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 7 / 8

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 8 / 8

Vous aimerez peut-être aussi