Scribd
Importer
5 vues1 page

Introduction à HTML5 et balises sémantiques

Le document présente un TP sur HTML5, soulignant l'importance des balises sémantiques pour améliorer la structure et l'accessibilité des pages web. Il décrit plusieurs balises clés comme <nav>, <section>, <article>, <header>, et <footer>, qui aident à organiser le contenu de manière significative. Deux exercices pratiques sont proposés, consistant à créer un menu interactif et à ajouter des sous-menus.

Transféré par

zineub.brh
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
5 vues1 page

Introduction à HTML5 et balises sémantiques

Le document présente un TP sur HTML5, soulignant l'importance des balises sémantiques pour améliorer la structure et l'accessibilité des pages web. Il décrit plusieurs balises clés comme <nav>, <section>, <article>, <header>, et <footer>, qui aident à organiser le contenu de manière significative. Deux exercices pratiques sont proposés, consistant à créer un menu interactif et à ajouter des sous-menus.

Transféré par

zineub.brh
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Année 2025-26

Filière IA, Semestre 3


Module : Programmation Web
TP 3 – HTML5

Rappels de cours. Depuis son introduction offi- navigateurs de mieux comprendre la structure de la
cielle en octobre 2014, HTML5 offre une multitude page et d’améliorer l’accessibilité.
de fonctionnalités avancées. Avec HTML5, les sites <nav> : (navigation) pour regrouper des menus,
web sont beaucoup plus dynamiques et esthétiques, des listes de liens ou des barres de navigation.
Un élément (balise) sémantique décrit clairement
<section> : la division sémantique permet de
sa signification à la fois pour le navigateur et le
diviser une page web en sections thématiques ou
développeur. Exemples d’éléments non sémantiques
en groupes de contenus. Cela facilite l’organisation
: <div> et <span> - ne disent rien sur leur con-
logique du contenu et rend la structure plus claire
tenu. Exemples d’éléments sémantiques : <form>,
pour les développeurs et les lecteurs assistés par des
<table> et <article> - définissent clairement
technologies d’assistance.
leur contenu.
Les balises de base d’un document HTML5 <article> : du contenu indépendant, peut in-
sont sémantiques et fournissent une structure clure des articles de blog, des actualités, commen-
plus claire et significative au contenu d’une page taires, etc.
web, améliorant par conséquent l’accessibilité, <footer> : le pied de page pour définir le pied
l’indexation par les moteurs de recherche. de page d’un document ou d’une section. Il contient
<header> : pour balisage de l’en-tête, utilisée généralement des informations telles que les coor-
pour inclure le titre, le logo et d’autres informations. données, les liens de contacts, les droits d’auteur, les
Cette balise permet aux moteurs de recherche et aux crédits, etc.
Travaux pratiques
Exercice 1. En utilisant le langage HTML 5, reproduire la page HTML ci-dessous où ”Accueil”, ”Saisons”
etc. forment un menu, c’est à dire, un clique sur chacun de ces éléments permet d’afficher le contenu qui
lui est associé.
Exercice 2. Introduire des sous-menus pour chacun des éléments du menu ”Accueil”, ”Saisons” etc.

Vous aimerez peut-être aussi