Scribd Logo
Importer

Bienvenue sur Scribd !

  • 120 vues

    TP N° 3: Mise en Forme Avec CSS: Exercice 1

    Transféré par

    fekikhalil00
    Ce document présente 5 exercices sur la mise en forme de documents HTML à l'aide de CSS. Les exercices montrent comment appliquer des styles de texte, de paragraphe et de page à l'aide de balises <style> internes et de feuilles de style externes.

    Droits d'auteur :

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

    TP N° 3: Mise en Forme Avec CSS: Exercice 1

    Transféré par

    fekikhalil00
    120 vues5 pages
    Ce document présente 5 exercices sur la mise en forme de documents HTML à l'aide de CSS. Les exercices montrent comment appliquer des styles de texte, de paragraphe et de page à l'aide de balises <style> internes et de feuilles de style externes.

    Titre original

    TP3

    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 présente 5 exercices sur la mise en forme de documents HTML à l'aide de CSS. Les exercices montrent comment appliquer des styles de texte, de paragraphe et de page à l'aide de balises <style> internes et de feuilles de style externes.

    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
    120 vues5 pages

    TP N° 3: Mise en Forme Avec CSS: Exercice 1

    Transféré par

    fekikhalil00
    Ce document présente 5 exercices sur la mise en forme de documents HTML à l'aide de CSS. Les exercices montrent comment appliquer des styles de texte, de paragraphe et de page à l'aide de balises <style> internes et de feuilles de style externes.

    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 5

    TP n° 3 : Mise en forme avec CSS

    Exercice 1 :
    1. Créez un document html nommé EX1.html qui se présente comme suit :

    2. Quel est l’intérêt de la balise <style> ? Que fait chaque propriété ?


    3. Expliquer la différence les 2 définitions du style.

    Exercice 2 :
    1. Créer une page HTML nommée EX2.html comme suit (sans utiliser de style):

    2. Ajouter dans l’entête de cette page les styles suivants :


     Un style sur la balise <P> pour que le texte soit en bleu, avec la police Times New Roman.
     Un style sur les titres niveau 1 <H1> pour qu’ils soient en rouge, en italique et avec la police
    Arial.
     Un style sur les titres niveau 2 <H2> pour qu’ils soient en vert et qu’ils utilisent la police
    Arial.

    1
     Un style pour les balises <strong> pour qu’ils soient en vert, qu’ils ne soient pas en gras et
    qu’ils utilisent la police Arial.
     Un style pour les balises <em> pour qu’ils soient en rose, gras et ne soient pas italique,
    3. Modifier le fichier EX2.html pour aligner le texte du dernier paragraphe à droite.
    4. Reprendre le même exercice en définissant cette fois-ci le style dans une feuille de style
    nommée Ex2Style.css

    Exercice 3 :
    1. Créer une page HTML nommée EX4.html telle que décrite dans la page suivante (avant
    d’appliquer un style):
    2. Créer une feuille de style Ex4Style.css et ajouter les styles nécessaires pour répondre au
    fonctionnement suivant :
    - Le titre de la page doit être rouge, centré, de taille 32px et de style Verdana.
    - Les sous-titres soulignés, de couleur bleue, écrits en majuscules (toutes les lettres) et
    de taille 24.
    - Tous les termes « Syntaxe » doivent être en mauve, soulignés, gras et pas italique
    - Les termes soulignés doivent avoir un fond jaune, de style Arial et non souligné
    - L’expression décrivant la syntaxe doit être en rouge avec fond jaune de police
    verdana, centré et gras
    3. Utiliser les styles du fichier Ex4Style.css dans la page EX4.html

    2
    Exercice 4 :
    Il s’agit d’écrire les fichiers Exercice8.html et Ex8Styles.css pour obtenir l’aperçu suivant :

    Les styles à adopter sont fournis dans le tableau ci-dessous. Pour ce faire, utiliser uniquement les
    sélecteurs de classe dans la feuille de style externe Ex8Styles.css.
    Texte Caractéristiques de style
    Titre Le texte apparaît en majuscule (même si il est écrit en minuscule dans le
    fichier html), surligné et la couleur d’arrière plan est cyan.
    Sous Titre Espacement entre les lettres est 5px, la première lettre du sous titre est en
    majuscule, la couleur de l’arrière-plan est jaune.
    Texte Paragraphe 1 La hauteur de la ligne est de 1em, la couleur d’arrière plan est jaune.
    Mot important La hauteur de la ligne est de 2em, la couleur d’arrière plan est blan et le
    texte est en gras.
    Texte Paragraphe 2 La hauteur de la ligne est de 0.7em.
    Mot barré La hauteur de la ligne est de 0.7em, le texte est barré et la couleur de
    l’arrière plan est rouge.

    Exercice 5 :
    1. Créer une page HTML nommée EX9.html comme suit (avant d’appliquer un style):

    3
    2. Créer une feuille de style Ex10Style.css et ajouter les styles nécessaires pour que la page
    s’affiche comme suit :

    Il est à noter qu’en plus de la mise en forme identifiable dans la figure précédente :
    - Le titre de la page a un fond de couleur cyan

    4
    - Les sous-titres ainsi que les termes en gras sont colorés en rouge
    - Les deux premiers paragraphes sont en vert et de police « Arial »
    - Les mots en italique des deux premiers paragraphes sont en gras, colorés en rouge, ont un
    fond jaune et ont pour police « Monotype Corsiva »
    - Les 4 dernières lignes du document sont en bleu et de police « Verdana »

    3. Utiliser les styles du fichier Ex9Style.css dans la page EX9.html

    Vous aimerez peut-être aussi