Nous allons écrire le code HTML de structure pour composer l'exemple de page type suivant :

page type exemple

Pour simuler l'encombrement des blocs, la hauteur et la couleur de fond des éléments sont définies avec des règles de style CSS dans un élément style. Pour le moment ne vous occupez pas trop du code CSS, mais concentrez vous sur les éléments HTML et leur imbrication.

Pour réaliser des pages HTML, je vous conseille de toujours travailler par itérations : on définit la structure de base avec les blocs principaux, puis on définit la structure interne pour chacun des blocs.

### En-tête, principal et pied

itération 1
Exemple : En-tête, principal et pied
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Itération 1</title> <style> * {margin: 0; padding: 0.5em;} header {background: #ed8683; height: 3em; margin-bottom: 1em} main {background: #a9b9c5; height: 8em} footer {background: #ffff66; height: 3em; margin-top: 1em} </style> </head> <body> <header> En-tête </header> <main> Le contenu principal de la page. </main> <footer> Pied de page. </footer> </body> </html>

### Hors-texte, à côté

itération 2
Exemple : hors-texte à côté
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Itération 2</title> <style> * {margin: 0; padding: 0.5em} header {background: #ed8683; height: 3em; margin-bottom: 1em} main {background: #a9b9c5; height: 8em; margin-right: 8em;} footer {background: #ffff66; height: 3em; margin-top: 1em} aside {background: #ff9900; min-height: 8em; float: right; width: 6em;} </style> </head> <body> <header> En-tête </header> <aside> Hors-texte à côté </aside> <main> Le contenu principal de la page. </main> <footer> Pied de page. </footer> </body> </html>

### Contenu de l'en-tête

itération 3 - contenu de l'en-tête

Complétez le code HTML pour obtenir le résultat ci-contre :

Le contenu de l'en-tête est fait avec

- un élément h1,
- un élément nav.

Code à compléter

Exercice : contenu de l'en-tête
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Itération 3</title> <style> * {margin: 0; padding: 0.5em} header {background: #ed8683; margin-bottom: 1em} main {background: #a9b9c5; height: 8em; margin-right: 8em;} footer {background: #ffff66; height: 3em; margin-top: 1em} aside {background: #ff9900; min-height: 8em; float: right; width: 6em;} h1 {background: #a3a334; font-size: 1.5em} nav {background: #74e8e5; margin-top: 0.5em} </style> </head> <body> <header> En-tête </header> <aside> Hors-texte à côté </aside> <main> Le contenu principal de la page. </main> <footer> Pied de page. </footer> </body> </html>

Une solution possible

Exercice : contenu de l'en-tête
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Itération 3</title> <style> * {margin: 0; padding: 0.5em} header {background: #ed8683; margin-bottom: 1em} main {background: #a9b9c5; height: 8em; margin-right: 8em;} footer {background: #ffff66; height: 3em; margin-top: 1em} aside {background: #ff9900; min-height: 8em; float: right; width: 6em;} h1 {background: #a3a334; font-size: 1.5em} nav {background: #74e8e5; margin-top: 0.5em} </style> </head> <body> <header> <h1>Titre de la page</h1> <nav>Barre de navigation</nav> </header> <aside> Hors-texte à côté </aside> <main> Le contenu principal de la page. </main> <footer> Pied de page. </footer> </body> </html>

### Contenu du hors texte

itération 4 - contenu hors texte

Complétez le code HTML pour obtenir le résultat ci-contre :

Le contenu hors-texte est fait avec

- des éléments section,
- des éléments h2.

Code à compléter

Exercice : contenu du hors texte
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Itération 4</title> <style> * {margin: 0; padding: 0.5em} header {background: #ed8683; margin-bottom: 1em} main {background: #a9b9c5; height: 20em; margin-right: 8em;} footer {background: #ffff66; height: 3em; margin-top: 1em} aside {background: #ff9900; float: right; width: 6em;} h1 {background: #a3a334; font-size: 1.5em} nav {background: #74e8e5; margin-top: 0.5em} section {background: #9ee46e; min-height:5em; margin: 0.5em 0} h2 {background: #a3a334; font-size: 1.2em; padding: 0} </style> </head> <body> <header> <h1>Titre de la page</h1> <nav>Barre de navigation</nav> </header> <aside> Hors-texte à côté </aside> <main> Le contenu principal de la page. </main> <footer> Pied de page. </footer> </body> </html>

Une solution possible

Exercice : contenu du hors texte
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Itération 4</title> <style> * {margin: 0; padding: 0.5em} header {background: #ed8683; margin-bottom: 1em} main {background: #a9b9c5; height: 20em; margin-right: 8em;} footer {background: #ffff66; height: 3em; margin-top: 1em} aside {background: #ff9900; float: right; width: 6em;} h1 {background: #a3a334; font-size: 1.5em} nav {background: #74e8e5; margin-top: 0.5em} section {background: #9ee46e; min-height:5em; margin: 0.5em 0} h2 {background: #a3a334; font-size: 1.2em; padding: 0} </style> </head> <body> <header> <h1>Titre de la page</h1> <nav>Barre de navigation</nav> </header> <aside> <section> <h2>Titre</h2> </section> <section> </section> <section> <h2>Titre</h2> </section> </aside> <main> Le contenu principal de la page. </main> <footer> Pied de page. </footer> </body> </html>

### Sections et articles

itération 5 - sections et articles

Complétez le code HTML pour obtenir le résultat ci-contre :

La structure du bloc principal est faite avec

- des éléments section,
- des éléments article.

Code à compléter

Exercice : sections et articles
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Itération 5</title> <style> * {margin: 0; padding: 0.5em} header {background: #ed8683; margin-bottom: 1em} main {background: #a9b9c5; height: 20em; margin-right: 8em;} footer {background: #ffff66; height: 3em; margin-top: 1em} aside {background: #ff9900; float: right; width: 6em;} h1 {background: #a3a334; font-size: 1.5em} nav {background: #74e8e5; margin-top: 0.5em} section {background: #9ee46e; min-height:5em; margin: 0.5em 0} h2 {background: #a3a334; font-size: 1.2em; padding: 0} article {background: #e3e3e3; min-height:4em; margin: 0.5em 0} </style> </head> <body> <header> <h1>Titre de la page</h1> <nav>Barre de navigation</nav> </header> <aside> <section> <h2>Titre</h2> </section> <section> </section> <section> <h2>Titre</h2> </section> </aside> <main> Le contenu principal de la page. </main> <footer> Pied de page. </footer> </body> </html>

Une solution possible

Exercice : sections et articles
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Itération 5</title> <style> * {margin: 0; padding: 0.5em} header {background: #ed8683; margin-bottom: 1em} main {background: #a9b9c5; height: 20em; margin-right: 8em;} footer {background: #ffff66; height: 3em; margin-top: 1em} aside {background: #ff9900; float: right; width: 6em;} h1 {background: #a3a334; font-size: 1.5em} nav {background: #74e8e5; margin-top: 0.5em} section {background: #9ee46e; min-height:5em; margin: 0.5em 0} h2 {background: #a3a334; font-size: 1.2em; padding: 0} article {background: #e3e3e3; min-height:4em; margin: 0.5em 0} </style> </head> <body> <header> <h1>Titre de la page</h1> <nav>Barre de navigation</nav> </header> <aside> <section> <h2>Titre</h2> </section> <section> </section> <section> <h2>Titre</h2> </section> </aside> <main> <section> section 1 sans article </section> <section> <article> article 1 </article> <article> article 2 </article> </section> </main> <footer> Pied de page. </footer> </body> </html>

### Contenu principal

itération 6 - contenu principal

Complétez le code HTML pour obtenir le résultat ci-contre :

Le contenu est fait avec

- un élément header,
- des éléments h2,
- des éléments footer,
- des éléments aside.

Code à compléter

Exercice : contenu principal
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Itération 6</title> <style> * {margin: 0; padding: 0.5em} header {background: #ed8683; margin-bottom: 1em} main {background: #a9b9c5; margin-right: 8em;} footer {background: #ffff66; height: 3em; margin-top: 1em} aside {background: #ff9900; float: right; width: 6em;} aside section {min-height: 8.3em} h1 {background: #a3a334; font-size: 1.5em} nav {background: #74e8e5; margin-top: 0.5em} section {background: #9ee46e; min-height:5em; margin: 0.5em 0} h2 {background: #a3a334; font-size: 1.2em; padding: 0; margin-bottom: 0.5em;} article {background: #e3e3e3; min-height:5em; margin: 0.5em 0} section header {margin: 0 0 0.5em} section footer {height: 1em; clear: left} section aside {min-height: 2em; margin: 0 0.5em 0.5em 0; float: left} </style> </head> <body> <header> <h1>Titre de la page</h1> <nav>Barre de navigation</nav> </header> <aside> <section> <h2>Titre</h2> </section> <section> </section> <section> <h2>Titre</h2> </section> </aside> <main> <section> section 1 sans article </section> <section> <article> article 1 </article> <article> article 2 </article> </section> </main> <footer> Pied de page. </footer> </body> </html>

Une solution possible

Exercice : contenu principal
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Itération 6</title> <style> * {margin: 0; padding: 0.5em} header {background: #ed8683; margin-bottom: 1em} main {background: #a9b9c5; margin-right: 8em;} footer {background: #ffff66; height: 3em; margin-top: 1em} aside {background: #ff9900; float: right; width: 6em;} aside section {min-height: 8.3em} h1 {background: #a3a334; font-size: 1.5em} nav {background: #74e8e5; margin-top: 0.5em} section {background: #9ee46e; min-height:5em; margin: 0.5em 0} h2 {background: #a3a334; font-size: 1.2em; padding: 0; margin-bottom: 0.5em;} article {background: #e3e3e3; min-height:5em; margin: 0.5em 0} section header {margin: 0 0 0.5em} section footer {height: 1em; clear: left} section aside {min-height: 2em; margin: 0 0.5em 0.5em 0; float: left} </style> </head> <body> <header> <h1>Titre de la page</h1> <nav>Barre de navigation</nav> </header> <aside> <section> <h2>Titre</h2> </section> <section> </section> <section> <h2>Titre</h2> </section> </aside> <main> <section> <header> <h2>Titre section 1 </h2> En-tête section 1 . </header> <aside></aside> section 1 sans article <footer> Pied section 1 </footer> </section> <section> <article> <h2>Titre article 1</h2> <aside></aside> article 1 de la section 2 </article> <article> <h2>Titre article 2</h2> <aside></aside> article 2 de la section 2 <footer> Pied article 2 </footer> </article> </section> </main> <footer> Pied de page. </footer> </body> </html>