USTO-MB- Faculté MI Département d’informatique 2023/2024

Développement d'Application Web

TP1: HTML
Exercice 1
1. Préparez votre espace de travail en créant un dossier "TP_nom_binome".
2. Lancez l’éditeur de texte et créez votre propre document html.
3. Ajoutez la balise paragraphe <p> texte quelconque</p>
4. , ajoutez ensuite les balises de titres Hn, egalement appelées « heading », ils sont au nombre de 6
<H1> Titre H1 </H1>, <H2>Titre H2</H2> …….. <H6>Titre H6</H6>
5. Ajouter un trait horizontal avec la balise <hr>
6. Utilisez les balises de mise en indice/exposant <sub> et <sup> de maniére à avoir les affichages suivants :

7. Enregistrez votre document sous le nom de "exo_1.html". Attention à bien renseigner l'extension en .html et non
en.txt
8. Visualisez le résultat dans votre navigateurWeb.

Exercice 2
1. Dans le dossier "TP_nom_binome" créez un sous-dossier "TP_1".
2. En vous basant sur l'exercice 1, créez 3 pages html que vous nommerez:
✗ index.html ✗ formation.html ✗ contact.html
3. Pour chacune des pages, vous organiserez le contenu de la manière suivante en exploitant les balises de titres
<H1> et <H2> pour les titres et les sous-titres, les balises <ol>, <ul>, <li>, <dl>, <dt> et <dd> pour les listes et <img
src="..."/> pour les images.

TP_1/formation.html

TP_1/index.html

TP_1/contact.html

Deux séances est le nombre maximum réservé pour cette fiche

USTO-MB- Faculté MI Département d’informatique 2023/2024

Exercice 3
1. Créez un sous dossier Hyper
2. Déplacez les deux fichiers formation.html et contact.html de l’exercice 2 dans ce dossier.
3. Dans la page index.html transformez chaque item de la liste en un hyperlien pointant vers la page correspondante.
4. Ajoutez un hyperlien pointant vers la page index.html dans chacune des pages formation.html et contact.html.
5. Dans la page formation.html , ajouter les balises et les attributs adéquats pour obtenir les liens internes (ou
ancres ) comme indiqué ci-dessous.

TP_1/formation.html

6. Dans la page contact.html, transformez le texte"usto-mail@univ-usto.dz" en un hyperlien par l’utilisation de

l’attribut "mailto"
7. Transformez l’image contact de la page contact.html en une image sous forme de lien.
8. Insérez l’image de la figure Fig1 dans la page index.html puis transformez là en image « map ». Les zones
Contact, Home et Formation pointent chacune d’elles vers le fichier html correspondant.
NB : utilisez un éditeur d’image pour récupérer les coordonnées des points necessaires pour chaque zone.

Fig 1

Exercice 4
Créez le tableau comme ilustré ci-dessous . Le tableau doit être centré et ayant une bordure de "2 pixels", une
largeur de "80 %" et une hauteur de "50 %" par rapport à la fenêtre.

Deux séances est le nombre maximum réservé pour cette fiche