Scribd
Importer
3 vues3 pages

TP1HTML

Le document présente un module de programmation web dirigé par Rihab Maaloul, avec des exercices pratiques sur la création de pages HTML. Les exercices incluent la structure de base d'une page, l'organisation et le formatage de texte, l'insertion d'images, et la création de liens hypertexte. Chaque exercice guide les étudiants à travers des étapes spécifiques pour développer leurs compétences en HTML.

Transféré par

Wasim
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
3 vues3 pages

TP1HTML

Le document présente un module de programmation web dirigé par Rihab Maaloul, avec des exercices pratiques sur la création de pages HTML. Les exercices incluent la structure de base d'une page, l'organisation et le formatage de texte, l'insertion d'images, et la création de liens hypertexte. Chaque exercice guide les étudiants à travers des étapes spécifiques pour développer leurs compétences en HTML.

Transféré par

Wasim
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

Module : Programmation Web

Responsable du Cours: Rihab Maaloul Auditoire: D-LCE A-


Enseignante TP: Yosra Jarraya, Rihab Maaloul U: 2023-2024

TP1 : HTML 5

Exercice 1 : Première page : structure d’une page web


1) Lancer l’éditeur Notepad ++. Modifier la reconnaissance de langage pour travailler avec
le langage HTML.
2) Créer un nouveau fichier html qui contient le texte suivant : « Bonjour, c’est ma
première page web ! ».
3) Enregistrer le fichier sous le nom « [Link] ».
4) Ouvrir le fichier que vous venez de créer avec le navigateur installé sur votre machine.

Exercice 2 : Organisation et Formatage de texte


Créer un fichier HTML qui permet de reproduire la page web représentée ci-dessous.
Exercice 3 : Insertion d’images
1) Créer un fichier HTML appelée « [Link] ». Enregistrer le fichier dans le dossier
« Exercice image ».
2) Commencer par insérer un titre de niveau 2 « Insertion d’images avec HTML ». Le titre
doit être centré.
3) Ajouter la ligne de code suivante et visualiser le résultat.
<img src="[Link]" width="200" height="200" alt="logo HTML"/> En
déduire le rôle de l’attribut « alt ».
4) Effectuer la modification nécessaire pour afficher correctement l’image.
5) Insérer l’image « [Link] ». Ajouter les attributs nécessaires pour obtenir une image
de dimension 200*200 pixels, avec un alignement à droite, une bordure d’épaisseur 4 et
un texte alternatif « logo CSS ». Au survol de la souris sur la photo, l’infobulle suivante
s’affiche « CSS : le langage de mise en forme des pages web»
6) Insérer l’image « [Link] » comme arrière-plan de la page web.

Exercice 4 : Les liens hypertexte


Créer un fichier HTML qui permet de réaliser la page web représentée ci-dessous.
La page web doit inclure :

1) Un lien hypertexte [Link] qui pointe vers le site Web de Google


([Link] Le lien doit afficher l'info-bulle « lien vers le moteur de
recherche Google » et doit ouvrir la page dans une nouvelle fenêtre.

2) Un lien hypertexte [Link] qui pointe vers le site Web : [Link] .

3) Un lien hypertexte « page 2 » permettant d’accéder à la page « page [Link] » qui se situe
dans le même répertoire TP1.

4) Un lien hypertexte permettant d’accéder à l'ancre "ODORAT" de la page 2.

5) Un lien hypertexte permettant de télécharger le fichier « TP1 ».

6) Insérer l’image « [Link] ». L’image est de dimension 300*300 pixels et elle pointe
vers le site web de Wikipédia ([Link] ).

7) Modifier la dimension de l’image en 600*600 pixels et observer le résultat obtenu.

8) Ajouter en haut de la page un lien interne « Bas de page » qui pointe vers le bas de la page.

9) Ajouter en bas de la page un lien interne « Remonter » qui pointe vers le haut de la page.

Vous aimerez peut-être aussi