Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
Télécharger au format docx, pdf ou txt
Vous êtes sur la page 1/ 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
