Vous êtes sur la page 1sur 3

TP2 

: Traitement avancée de quelques balise HTML


1. Créer le dossier TP2 dans votre répertoire de travail, dont lequel vous enregistrez tous les fichiers solutions de
ce TP.
Exercice N°1  : manipulation du tableau (les attributs colspan et rowspan)
1. Créer le fichier « tableau.html » dans votre répertoire
2. Créer le tableau suivant :

3. Ajouter des règles CSS nécessaires pour mettre en forme le tableau comme suit :
 texte dans la page est de police Verdana, centré de taille 14px
 Colonne moyenne avec couleur vert
 La couleur du fond du tableau
 Une bordure 2px .

Exercice N°2  : Insérer les différents types d’input html afin de réaliser un formulaire
d'inscription.
Créer un formulaire (voir l’exemple ci-dessous) qui contient les éléments suivants :
1. Champs de saisie de nom, prénom (nombre de caractères ne dépasse pas 30) et e-mail(avec ou moins
10 caractères).
2. Deux boutons radio pour le choix du genre.
3. Un champ destiné au transfert de fichier photo dont le format est restreint aux types JPEG ou PNG.
4. Une liste de choix
pour les pays .
5. Une liste de choix
multiple pour les
langages préférés.
Des cases à cocher pour
choisir les domaines
d'activités.

4. Dans la partie head ajouter les règles CSS nécessaires pour mettre en forme la page comme suit :
 Le texte dans la page est de police Georgia et de taille 14px
 Boutons avec un couleur bleu texte centré
2
Exercice N°3 : Structurer votre page html en utilisant les éléments header, nav section footer .

header

nav

section

footer
Votre nom&prenom

1. Réaliser la page Html ci-dessous (utiliser la balise div pour structurer les titres dans la partie
section
2. Modifier les styles :
 de header :Le titre est de taille 30px, couleur orangé et centré
Choisir un couleur d’arrière-plan
 section : Ajouter des styles aux titres : Police : Georgia, taille 16px, couleur d’arrière-plan
1. Ajouter les évènements suivants :
 Un message de bienvenue lors de téléchargement de la page web
 Un message d’au revoir lorsque vous fermer la fenêtre
 Le message ‘une image’ lorsque la souris passe sur l’image
 Le message ‘un titre’ lorsque la souris quitte un titre
 Le message ‘cliquer sur le lien’ lorsque la souris passe sur un lien
Exercice N°4 : Les sous fenêtres
2. Créer une nouvelle page que vous nommé « index.html » qui contient des sous fenêtres décrite ci-
dessous :
 Une séquence vidéo dans la partie header.
 Dans la partie section insérer 2 sous fenêtres. (la deuxième fenêtre permet l’affichage des autres
pages)
Une séquence vidéo

Fenêtre1 :Page lien.html Fenêtre2 : Page


accueil.html
2

Largeur =200px
Largeur=1120px
2

Vous aimerez peut-être aussi