Scribd Logo
Importer

Bienvenue sur Scribd !

  • 60 vues

    DS Révision 3STI

    Transféré par

    PROF PROF

    Droits d'auteur :

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

    DS Révision 3STI

    Transféré par

    PROF PROF
    60 vues3 pages

    Titre original

    DS_Révision_3STI (1)

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Droits d'auteur :

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

    DS Révision 3STI

    Transféré par

    PROF PROF

    Droits d'auteur :

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

    Prof.

    Imène SAADALLAH EL KISSI  Module Développement des sites Web


    ________________________________________________________________________________________________________

    Révision
    Exercice n°1 : HTML
    1) Créer la page "Accueil.html" avec un style css enregistré dans un fichier externe « style.css »
    Voici la structure de la page web à créer :

    La balise <section> contient trois balises :


    1 : <article>
    2 : <nav>
    3 : <div id= "lien">
    La balise <article> contient deux balises sémantiques :
    4 : <div id= "texte">
    5 : <aside>
    2) Dans la partie header, insérer un titre de niveau 1 contenant le texte suivant :
    Club création de site web
    3) Dans la partie nav :
    - Créer une liste non-ordonnée avec les 3 items suivants : Accueil, Inscription, Connexion
    - Sur chaque item de la liste non-ordonnée, mettre un lien hypertexte pointant vers « # »
    4) Dans la partie <div id= "texte"> de la parie article :
    - Insérer un paragraphe (lorem50)
    - Insérer un formulaire
    - Mettre le formulaire en zone de groupe qui aura comme légende : Connexion
    - Dans un tableau de deux lignes et deux colonnes (avec une bordure=0) :
    - Insérer 2 labels : nom et prénom et mot de passe (chacune dans une ligne du tableau)
    - Insérer 2 zones de texte (text et password) devant chaque label
    - Insérer un bouton Connexion
    5) Dans la partie aside, insérer l’image ‘image.png’
    Dans la partie <div id= "lien"> , insérer un lien recherche web qui affiche la page google.com
    6) Dans la partie footer, Insérer un paragraphe contenant le texte "Copyright© 2021/2022"
    7) Les évènements :
     La zone de texte votre nom et prénom lorsqu’elle perd le focus l’arrière-plan devient vert.
     Si on clique sur le bouton afficher, Le clic sur le bouton "Connexion" un message affiche :
    Bienvenue + votre nom et prénom.

    N.B : les fichiers relatifs à ce TP doivent être enregistrés dans le dossier C:\ 3STI2_revision
    Prof. Imène SAADALLAH EL KISSI  Module Développement des sites Web
    ________________________________________________________________________________________________________

    Exercice n°2 : CSS

    header Position absolue, largeur 1300px, hauteur 200px, image de h1 Couleur du texte : rgb(204, 175, 184)
    l’arrière-plan ‘entete.png’ Texte centré, taille police 50px, marge haut 75px.
    Section Position absolue, top 200px, largeur 1300px, hauteur 500px, article Hauteur 450px, largeur 1000px, marge haut: 20px, flottant à
    couleur de l’arrière-plan rgb(241, 234, 225) droite
    nav flottant à gauche, hauteur 500px, largeur 300px, couleur de #texte Largeur 600px, hauteur 450px, flotant à gauche, marge haut
    l’arrière-plan : cornflowerblue; 80px, police Gras
    bordure supérieur droite et inférieur droite arrondies de 50%
    footer Position absolue, top: 700px, hauteur: 50px, largeur: #lien Largeur 1000px, hauteur 40px, top: 450px, alignement du texte:
    1300px, couleur de l’arrière-plan rgb(202, 177, 226) droite, taille police: larger
    ul Position absolue, aside flotant à gauche, largeur 200px, hauteur 400px, marge haut
    marge haut 120px 100px, marge gauche 50px;
    ul a Lien non souligné, police oblique, taille police: xx-large; footer p Police : gras, oplique, taille police: larger,
    couleur de l’arrière-plan: darkcyan,
    li Pas de puce apparante, form taille police : Larger
    marge interne 50px

    Exercice n°3 : Animation et transition 

    1) Le bouton grossit de 15 % sur une durée de 400 millisecondes lors d’un survol( :hover).
    2) Le texte du paragraphe du footer doit être animé tel que le texte apparait dans un mouvement de défilement alternatives pendant 10 secondes qui se joue à
    l’infinie.

    N.B : les fichiers relatifs à ce TP doivent être enregistrés dans le dossier C:\ 3STI2_revision
    Prof. Imène SAADALLAH EL KISSI  Module Développement des sites Web
    ________________________________________________________________________________________________________

    N.B : les fichiers relatifs à ce TP doivent être enregistrés dans le dossier C:\ 3STI2_revision

    Vous aimerez peut-être aussi