IHEC Carthage Présidence Matière : Programmation web I

Niveau : 2ème année LAIG Enseignante : Ilhem Baroud

TP 1 : Le langage HTML / XHTML

A- Méta données / Formatage de texte / Listes / Liens externes

1- Créer une page HTML nommée tp1.html permettant d'afficher l'aperçu ci-dessus en tenant compte
des précisions suivantes :

a. Ajouter le nom de l'auteur de la page.

b. Choisir les mots-clefs adéquats pour référencer la page.
c. Les titres " HyperText Markup Language" et "Historique du HTML" sont des titres de style
H1.

Année universitaire 2014 / 2015 1

IHEC Carthage Présidence Matière : Programmation web I
Niveau : 2ème année LAIG Enseignante : Ilhem Baroud

d. Les lignes qui soulignent les titres de style H1 sont des barres horizontales.
e. Le texte ' est le format de données conçu pour représenter les pages web' (1er parag. 1ère
phrase) doit être incliné
f. Ajouter au niveau des abréviations HTML, CSS et SGML des info-bulles détaillant les noms
détaillés des langages (HTML : HyperText Markup Language, CSS : Cascading Style Sheet et
SGML : Standard Generalized Markup Language).
g. Le contenu du paragraphe "Historique du HTML" est une liste de définitions.

2- Définir les éléments de la liste comme liens hypertextes vers les fichiers correspondants à savoir
sgml.htm, html1.htm, css.htm, html4.htm, xhtml.htm et html5.htm

B- Images / Images map / Tableaux / Liens internes / Feuilles de styles internes

1- Le titre "Site web statique" est un titre de style h1 suivi d'une barre horizontale.

2- Insérer l'image site_statique.jpg enregistrée dans le répertoire Image.

3- En cliquant sur l'image du poste client, l'utilisateur peut accéder au fichier navigateur.html et en
cliquant sur l'image du serveur, il peut accéder au fichier serveurHTTP.html

4- Ajouter les titres de style h1 et les tableaux ci-dessous.

Année universitaire 2014 / 2015 2

IHEC Carthage Présidence Matière : Programmation web I
Niveau : 2ème année LAIG Enseignante : Ilhem Baroud

5- Définir dans la page un style qui met les titres de style h1 en bleu et centré.

6- Ajouter, au début de la page, un sommaire qui permet d'accéder aux différentes rubriques de la
page.

7- Ajouter en bas de chaque rubrique un lien Retour qui permet de revenir au sommaire de la page

Année universitaire 2014 / 2015 3