2 TP2 : Traitement avancée de quelques balise HTML 1. Créer le dossier TP2 dans

2 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 . 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 header nav section footer Votre nom&prenom Fenêtre1 :Page lien.html Largeur =200px Fenêtre2 : Page accueil.html Largeur=1120px 2 uploads/s3/ tp2-html.pdf

  • 72
  • 0
  • 0
Afficher les détails des licences
Licence et utilisation
Gratuit pour un usage personnel Attribution requise
Partager