Lycée Jemmal_2020/2021 3info_STI
Domaine d’apprentissage : Communication et Technologies Internet
Structurez votre page
header (l’en-tête de votre site)
nav (votre menu principal de navigation)
section (pour grouper des éléments en
fonction d’une thématique commune)
article (un article indépendant)
aside (informations complémentaires)
footer (le pied de page)
Figure 1: structure de page
Activité :
a) Passons maintenant à la pratique, et crayons une page web structurée.
au niveau HTML
<body>
Description de la page web <header>
<p>entete</p>
</header>
L’entête contient un paragraphe contenant <nav>
le mot entête <ul>
Le menu de navigation contient 3 puces <li>lien1</li>
respectivement lien1, lien2 et lien3 <li>lien2</li>
La partie section contient un article et un <li>lien3</li>
aside </ul>
L’article contient un paragraphe contenant le </nav>
mot article <section>
L’aside contient un paragraphe contenant le <article>
mot aside <p>un article </p>
Le footer contient un paragraphe contenant </article>
l’expression pied de page <aside>
<p> un aside </p>
</aside>
</section>
Rappel : <footer>
HTML : structure le contenu <p>pied de page</p>
</footer>
CSS : gère l’apparence et la présentation
</body>
1
Lycée Jemmal_2020/2021 3info_STI
b) Maintenant, gérer l’apparence avec le css et compléter le schéma ci-dessous.
au niveau CSS
header {
. section {
. .
} entete .
.
.
nav { .
Lien1 Section
. }
Lien2
.
Lien3 aside
.
. article
.
}
aside {
.
article { .
. .
. Pied de page .
. }
}
footer {
. body { p{
. . .
} .
} }
Fiche de mémorisation :
Ecrire le rôle de chaque balise.
HTML
Balise rôle
<header></………..>
<footer></………...>
<nav></………….>
<article></…………>
<aside></…………..>
Écrire le rôle de chaque propriété css.
CSS
Propriété Rôle
border
margin
width
display: inline-block;
background-color
vertical-align: top;
padding
float