Scribd
Importer
8 vues2 pages

TP N°2: Structuration Et Stylisation HTML: Partie 1 Mise en Place Du Projet

Le TP N°2 de Programmation Web 1 pour l'année universitaire 2025-2026 se concentre sur la structuration et la stylisation d'une page HTML. Les étudiants doivent créer une page web, appliquer des styles CSS, intégrer une iframe et compléter la balise head avec des métadonnées. Les objectifs incluent l'organisation logique des éléments, l'utilisation de classes et d'identifiants, ainsi que l'intégration d'un favicon.

Transféré par

hamzaelghorabbi
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
8 vues2 pages

TP N°2: Structuration Et Stylisation HTML: Partie 1 Mise en Place Du Projet

Le TP N°2 de Programmation Web 1 pour l'année universitaire 2025-2026 se concentre sur la structuration et la stylisation d'une page HTML. Les étudiants doivent créer une page web, appliquer des styles CSS, intégrer une iframe et compléter la balise head avec des métadonnées. Les objectifs incluent l'organisation logique des éléments, l'utilisation de classes et d'identifiants, ainsi que l'intégration d'un favicon.

Transféré par

hamzaelghorabbi
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

Programmation Web 1 Année universitaire : 2025 – 2026

Semestre 3

TP N°2 : Structuration et Stylisation HTML


Durée : 1h30
Objectifs pédagogiques :
- Structurer une page HTML complète.
- Appliquer des styles CSS ciblés.
- Intégrer du contenu externe.
- Utiliser la balise Head et ses composants.

Instructions :
Partie 1 – Mise en place du projet.
1. Créez un dossier nommé TP2.
2. Créez une page web sous le nom [Link]
3. Ajoutez dans le même dossier une icône avec
l’extension .png sous le nom ([Link]). Cette
image sera utilisée plus tard pour définir l’icône
de l’onglet (favicon) de votre page web.

Partie 2 – Structuration de la page.


Voici un code HTML partiellement structuré. Adaptez-le pour :
1. Regrouper les éléments dans des div logiques.
2. Utiliser des class nommés (header, menu, content, footer) pour styliser les blocs.
3. Utiliser un id unique pour le bloc principal.

header

menu

content

footer

1
Programmation Web 1 Année universitaire : 2025 – 2026
Semestre 3

Partie 3 – Stylisation CSS ciblée


Appliquez les styles suivants :
• header → fond bleu clair, texte centré
• menu → fond gris clair, texte en gras
• content → marge intérieure de 20px
• page → bordure verte

Partie 4 – Intégration d’une iframe


Ajoutez une iframe dans la section content pour afficher
[Link] , avec :
• largeur : 600px
• hauteur : 300px
• bordure : grise
• titre : “Contenu externe”

Remarque : Si l’iframe ne se charge pas, le problème peut venir du site lui-même qui bloque
l’intégration (via l’en-tête HTTP X-Frame-Options: DENY). Exemple : [Link]
Partie 5 – La balise head et ses rôles
Complétez la section head de votre page HTML en y intégrant :
1. Un titre significatif. Par exemple : ‘ TP3 HTML‘
2. Des métadonnées utiles pour le navigateur, le référencement et l’accessibilité :
o Charset.
o Description.
o Keywords.
o Author.
o Viewport.
3. Un lien vers l’image déjà téléchargée, pour définir l’icône de l’onglet (favicon) de votre
page web.

Vous aimerez peut-être aussi