Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Importer

Bienvenue sur Scribd !

  • 65 vues

    TP3 HTML

    Transféré par

    Nada Fouzai
    Ce document décrit les étapes pour créer un formulaire HTML avec des champs et des zones de saisie de données. Il contient des questions pour guider l'ajout des éléments du formulaire et sa mise en forme à l'aide de CSS.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd

    TP3 HTML

    Transféré par

    Nada Fouzai
    65 vues3 pages
    Ce document décrit les étapes pour créer un formulaire HTML avec des champs et des zones de saisie de données. Il contient des questions pour guider l'ajout des éléments du formulaire et sa mise en forme à l'aide de CSS.

    Titre original

    TP3_HTML

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Ce document décrit les étapes pour créer un formulaire HTML avec des champs et des zones de saisie de données. Il contient des questions pour guider l'ajout des éléments du formulaire et sa mise en forme à l'aide de CSS.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    65 vues3 pages

    TP3 HTML

    Transféré par

    Nada Fouzai
    Ce document décrit les étapes pour créer un formulaire HTML avec des champs et des zones de saisie de données. Il contient des questions pour guider l'ajout des éléments du formulaire et sa mise en forme à l'aide de CSS.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    sur 3

    HTML5, CSS3, BootStrap TIC-1

    Atelier 3 : Les formulaires


    Objectif du TP :
    Se servir des connaissances théoriques et pratiques en HTML5 et CSS3 pour créer une page
    web contenant un formulaire.

    Partie 1 : Création du formulaire


    Le but de cette partie est de rédiger, sans utiliser le langage CSS, le code d’une page
    nommée TP3.html, qui doit impérativement avoir l’apparence de la capture d’écran ci-
    dessous.

    Question 1 : Insérer, dans l’entête HTML5, le titre du formulaire et dans le pied de page la
    phrase de bas de page.
    Question 2 : Mettre en place le pourtour des différents regroupements de champs du
    formulaire.
    Question 3 : Ajouter les champs nom et prénom.
    Question 4 : Ajouter le champ Date de naissance.
    Question 5 : Ajouter le champ Lieu de naissance.
    Question 6 : Ajouter le champ adresse postale. Cette zone de texte fait 2 lignes et 30
    colonnes. Utiliser les attributs rows="..." et cols="...".
    Question 7 : Ajouter le champ Code postal de minimum 1000 et de maximum 9183.

    Mme Nour EL AOUINI AU : 2022/2023


    1
    Page
    HTML5, CSS3, BootStrap TIC-1

    Question 8 : Ajouter le champ Adresse électronique.


    Question 9 : Ajouter le champ Téléphone portable. Le numéro n’est valide que s’il contienne
    8 chiffres commençant par 2, 5 ou 9. Utiliser un pattern pour valider la structure du numéro.
    Question 10 : Ajouter le champ Semestre. La liste déroulante devra contenir les valeurs S1,
    S3 et S5. Le semestre S3 est sélectionné par défaut.
    Question 11 : Ajouter le champ Niveau en HTML. La barre devra aller de 0 à 10.
    Question 12 : Ajouter le champ Connaissances. Seule la case « HTML » est cochée par
    défaut.
    Question 13 : Ajouter le bouton d’envoi « Soumettre ».

    Partie 2 : Mise en forme du formulaire


    Le but de cette partie est de rédiger en utilisant le langage CSS le code d’une feuille nommée
    TP5.css, de façon à obtenir l’apparence finale de la page ci-dessous. Les seules modifications
    autorisées au fichier TP5.html seront l’ajout d’un nombre minimal d’attributs de type class
    ou id dans le corps de la page. Toutes les autres modifications se feront dans le fichier CSS.

    Question 1 : Ajouter à TP7.html un lien vers TP7.css.


    Question 2 : Modifier la feuille de style afin que toute la page soit par défaut en police
    Verdana.

    Mme Nour EL AOUINI AU : 2022/2023


    2
    Page
    HTML5, CSS3, BootStrap TIC-1

    Question 3 : Mettre en forme le titre principal comme suit : sa marge supérieure est de 2em,
    son alignement est centré, et sa bordure inférieure est continu de couleur noire et de
    largeur 10 pixels. Ajouter aussi à ce titre une ombre grise de décalages 2 pixels et d’un
    adoucissement de 15 pixels.
    Question 4 : Ajouter dans le code HTML un id="main" au cadre principal. Modifier la feuille
    de style afin que la marge intérieure entre ce cadre principal et le contenu du formulaire soit
    de 50 pixels et que ses marges extérieures droite et gauche soient de 105 pixels. Ajouter
    aussi à ce cadre une ombre grise de décalages 2 pixels et d’un adoucissement de 15 pixels.
    Question 5 : Modifier la feuille de style afin que les légendes de cadres s’affichent en
    majuscules.
    Question 6 : Modifier la feuille de style afin que les labels concernés s’affichent en gras.
    Question 7 : Modifier la feuille de style afin que les champs s’affichent tous alignés à une
    distance de 250 pixels de la partie gauche des labels. On utilisera une solution qui modifiera
    le display des labels.
    Question 8 : Mettre en forme le cadre connaissances : la couleur du texte est rouge et celle
    du fond est #C0C0FF.
    Question 9 : Arrondir les coins de tous les champs et ceux des cadres de 5 pixels.
    Question 10 : Mettre en forme le pied de page, comme suit : il est séparé de ce qui précède
    d’un espace de 2em, sa marge intérieure est de 10px, les bordures supérieures et inférieures
    sont continues, bleues et d’une largeur de 5 pixels, le texte est centré et sa taille est x-small.

    Mme Nour EL AOUINI AU : 2022/2023


    3
    Page

    Vous aimerez peut-être aussi