Scribd Logo
Importer

Bienvenue sur Scribd !

  • TP 2

    Transféré par

    Amine Ghayout
    23 vues5 pages

    Titre original

    tp_2

    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é ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    23 vues5 pages

    TP 2

    Transféré par

    Amine Ghayout

    Droits d'auteur :

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

    Université Mohammed Premier Module : Technologie du Web

    Faculté des Sciences - Oujda Filière : SMI – S3


    Département d’informatique Année Universitaire : 2023-2024

    TP N°2 : CSS
    Exercice 1
    Créez des menus vertical et horizontal avec les mêmes liens : Accueil, À propos, Services,
    Contact. (Voir figure)
    Lorsque la souris survole un lien dans les deux menus, la couleur du texte doit changer pour
    devenir blanc, le fond du lien doit prendre une couleur verte, le texte sera en gras et plus
    grand que la taille initiale.

    Exercice 2
    Objectif :
    L'objectif de cet exercice est de pratiquer l'application de styles CSS pour améliorer la
    présentation d'une page web, en utilisant des propriétés telles que background-image, float,
    margin, box-shadow, text-shadow, et d'autres pour créer une mise en page esthétique et lisible.

    Instructions :
    1. Structure HTML :
    ▪ Créez un fichier HTML nommé fso.html.

    1
    ▪ Établissez une structure de base avec les balises <html>, <head>, <title>, <link> pour lier
    la feuille de style, et <body>.
    2. Styles CSS :

    ▪ Créez un fichier CSS nommé styles.css pour gérer les styles de la page.
    ▪ Utilisez les sélecteurs #img1 et #img2 pour appliquer des styles similaires aux deux
    images.
    ▪ Appliquez des styles pour la mise en forme générale de la page :
    • Appliquez un fond d'écran ("fond.png") à la page à l'aide de background-image.
    • Ajoutez des marges intérieures de 20 pixels à gauche et à droite avec padding-left:
    20px; et padding-right: 20px;
    • Centrez le texte du titre principal.
    • Ajoutez une ombre portée rouge (#FF0000) avec un décalage horizontal de 2 pixels et
    un décalage vertical de 2 pixels au titre principal (h1).
    • Définissez la taille de la police du titre principal à 2.5em.
    • Utilisez float pour positionner l'image #img1 à gauche et #img2 à droite.
    • Ajoutez une ombre (5px 10px 5px 10px gray) et un arrondi (10px) aux images.
    • Définissez des marges (0px 20px 20px 20px) pour espacer les images du texte.
    • Les images doivent avoir une taille de 200 pixels de largeur et de hauteur.
    • Alignez le texte des paragraphes à la justification.
    • Ajoutez une ligne de soulignement au titre de niveau 2 (h2).
    • Mettez en forme le texte (p et ul) avec une taille de police de 1.5em pour une
    meilleure lisibilité.
    • Utilisez une liste (ul) pour décrire les départements avec des carrés comme
    marqueurs.
    3. Contenu HTML :

    ▪ Dans la balise <body>, créez un en-tête (<h1>) avec le titre "Faculté des Sciences d’Oujda
    (FSO)".
    ▪ Ajoutez un paragraphe (<p>) avec deux images (<img>) ayant les identifiants #img1 et
    #img2 respectivement.
    ▪ Rédigez un paragraphe décrivant la Faculté des Sciences d’Oujda avec des missions,
    répété plusieurs fois pour augmenter le contenu.
    ▪ Incluez une sous-section (<h2>) intitulée "Départements".
    ▪ Créez une liste non ordonnée (<ul>) avec des éléments de liste (<li>) représentant
    différents départements.

    2
    Exercice 3
    L'objectif de cet exercice est de faire l’exercice 4 de la série N1 en utilisant HTML et de le
    styliser avec des règles CSS spécifiques :
    Corps de page

    • La police de caractères est "Times New Roman", Arial ou sans-serif.


    • Le rembourrage est de 20px. (Un espace de 20 pixels de tous les côtés du corps du
    document)

    Titre h1 : Formulaire d'inscription

    • Une ombre portée est appliquée au titre, avec une couleur rouge et un décalage de 2px
    en horizontal et en vertical.
    • Le titre est transformé en majuscules et une double décoration (soulignage et
    surlignage) est appliquée.

    Formulaire

    • La largeur maximale du formulaire est de 90% et il est centré sur la page.

    Tableau

    • La largeur du tableau est de 50%.


    • Les bordures du tableau sont en pointillés bleus (3px dotted blue).
    • L'arrière-plan du tableau est bleu clair (#E0F4FF).( couleur de fond)

    En-têtes et cellules du tableau

    • Le rembourrage (espacement intérieur) des cellules du tableau est de 5px.

    3
    Étiquettes

    • Mettez en gras tous les labels.

    Champs de saisie

    • La largeur des champs de saisie est de 80%.


    • Les champs de saisie ont un rembourrage de 5px.
    • Une marge inférieure de 10px est appliquée aux champs de saisie.
    • Une ombre portée est appliquée aux champs de saisie, avec une couleur noire et un
    décalage de 5px en horizontal et en vertical.
    • La couleur de fond des listes déroulantes est jaune pâle (#FFEED9).

    Listes déroulantes (Select)

    • La largeur des listes déroulantes est de 82%.


    • Les listes déroulantes ont un rembourrage de 5px.
    • Une marge inférieure de 10px est appliquée aux listes déroulantes.
    • Une ombre portée est appliquée aux listes déroulantes, avec une couleur noire et un
    décalage de 5px en horizontal et en vertical.
    • La couleur de fond des listes déroulantes est jaune pâle (#FFEED9).

    Boutons (Submit, Reset)

    • Les boutons ont une marge supérieure de 10px.


    • Les boutons ont un rembourrage de 10px.
    • Le curseur de la souris se transforme en une main lorsqu'il est survolé un bouton.(
    cursor : pointer)
    • La couleur de fond des boutons est bleu (#3085C3).
    • La couleur du texte des boutons est blanc.
    • Les boutons n'ont pas de bordure.
    • La largeur des boutons est de 45%.

    Effet de Survole sur les boutons (hover)

    • Lorsque le curseur de la souris survole un bouton, sa couleur de fond devient vert


    (#4CAF50).

    4
    Conseils :

    ▪ Utilisez les propriétés CSS telles que text-shadow, text-transform, text-decoration,


    box-shadow, width, padding, margin, background-color, color, et border pour
    appliquer les styles spécifiés.
    ▪ Modifiez les valeurs de style en fonction des instructions de l'énoncé de l'exercice.

    Cet exercice vise à renforcer vos compétences en stylisation de formulaires HTML à l'aide
    de CSS, en mettant l'accent sur des règles spécifiques pour différents éléments du
    formulaire.

    Vous aimerez peut-être aussi