Lycée Aïn Draham HTML5 CSS3 Chedi Zaghdoudi
La division du contenu textuel ou graphique au moyen des éléments <div> ou <p>
étant assez pauvre du point de vue sémantique, HTML 5, dont c’est la principale
évolution, enrichit dans ce but l’éventail des éléments signifiants en ajoutant les
éléments <article> et <section>. On discute beaucoup de l’imbrication de ces deux
éléments l’un dans l’autre et pour savoir qui est le parent de l’autre. Un article se
veut être un contenu indépendant (comme celui d’un journal) qui peut contenir
des titres, des sous-titres puis être divisé en sections elles-mêmes dotées de
titres, par exemple. La structure peut donc être la suivante :
• Article
o Titre de l’article
o Section 1
▪ Titre section 1
▪ Contenu section 1
o Section 2
▪ Titre section 2
▪ Contenu section 2
etc . . .
D’un point de vue purement technique de conformité aux prescriptions HTML 5,
ils sont tous les deux dans la catégorie Flow, font partie des éléments de
sectionnement et peuvent être parents ou enfants de tous les éléments de cette
catégorie. Il n’est donc pas exclu qu’une section soit divisée à son tour en
Classe : 3SI Matière : STI
1
Lycée Aïn Draham HTML5 CSS3 Chedi Zaghdoudi
plusieurs articles indépendants. Dans ce cas, la section fait penser à une
rubrique générale d’un journal (politique, sport, faits divers …) qui contient
plusieurs articles.
Travail demandé :
On souhaite dans ce TP organiser un contenu textuel dont un aperçu est le
suivant :
Figure 1: Aperçu du [Link]
1. Lancer l’éditeur de texte Sublime Text 3, créer un nouveau fichier et
l’enregistrer sous le nom [Link].
2. Le titre de la page web est : « Eléments de structuration des pages suite… »
3. Mettre les métadonnées nécessaires pour que la page puisse être indexée par
un moteur de recherche et affichée par les appareils mobiles.
4. Dans <body>, créer une division principale <div>.
5. Dans la division principale, créer un article <article> contenant le titre de
niveau 1 « HTML 5 une révolution ? »
6. Diviser l’article en deux sections qui contiennent chacune :
• Section 1 :
o Titre niveau 2 : « Des avancées sémantiques »
o Texte brut
Classe : 3SI Matière : STI
2
Lycée Aïn Draham HTML5 CSS3 Chedi Zaghdoudi
• Section 2 :
o Titre niveau 2 : « Des reculs sur la rigueur »
o Texte brut
7. Créer un fichier CSS externe et renommer-le par [Link].
8. Mettre en forme la division principale en couleur de fond ayant le code #BBB
et une police Arial.
9. Mettre en forme les sections en couleurs d’arrière-plan ayant le code #FFF et
une police Times.
10. Mettre l’arrière-plan de l’article en couleur jaune.
11. Insérer un bloc de citation <blockquote> entre les deux sections créées dans un
bloc figure, contenant le titre de niveau 3 « Que la lumière soit » et un
paragraphe contenant du texte brut. La légende de la figure contient l’auteur
de la citation et le nom de la source <cite> .
12. Mettre en forme le bloc de citation comme suit :
• Arrière-plan de couleur #AAA et l’avant-plan en couleur blanc.
• Marge extérieure : 0
• Marge intérieure : 15px
• Bordure arrondie de 10px
13. Changer la couleur l’arrière-plan de l’article en couleur de code #EEE.
14. Afficher une zone de note encadrée contenant le titre de niveau 2 « Pour en
savoir plus… » et un paragraphe contenant du texte brut. N’oublier pas de
mettre la légende de zone de note ayant le texte « Note ».
15. Mettre le titre de niveau 2 de la zone encadrée en rouge et le paragraphe en
italique et de taille 14px.
16. Créer un pied de page qui contient un lien qui permet d’entrer en contact avec
le responsable de la page web <adress>.
17. L’arrière-plan du pied de page doit être une image claire de votre choix.
Classe : 3SI Matière : STI
3
