Scribd Logo
Importer

Bienvenue sur Scribd !

  • 78 vues

    Fiche TP 3 DW

    Transféré par

    sadl urh
    Ce document contient des exercices sur le développement de pages web avec HTML et CSS. Il présente trois exercices : le premier concerne l'écriture du code CSS de base, le deuxième l'ajout de styles à une page web simple, et le troisième le styling d'un tableau.

    Droits d'auteur :

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

    Fiche TP 3 DW

    Transféré par

    sadl urh
    78 vues4 pages
    Ce document contient des exercices sur le développement de pages web avec HTML et CSS. Il présente trois exercices : le premier concerne l'écriture du code CSS de base, le deuxième l'ajout de styles à une page web simple, et le troisième le styling d'un tableau.

    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 contient des exercices sur le développement de pages web avec HTML et CSS. Il présente trois exercices : le premier concerne l'écriture du code CSS de base, le deuxième l'ajout de styles à une page web simple, et le troisième le styling d'un tableau.

    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
    78 vues4 pages

    Fiche TP 3 DW

    Transféré par

    sadl urh
    Ce document contient des exercices sur le développement de pages web avec HTML et CSS. Il présente trois exercices : le premier concerne l'écriture du code CSS de base, le deuxième l'ajout de styles à une page web simple, et le troisième le styling d'un tableau.

    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 4

    Université Hassiba Ben Bouali de Chlef

    Faculté des Sciences Exactes et Informatique


    Département d’Informatique

    Module : Développement Application Web


    b

    Niveau 2ème année licence Annnée universitaire 2019/2020

    Fiche TP N°3
    Exercice 1 :
    Ecrivez le code suivant :

    Réaliser votre première feuillee de style loisir.css ; Taper le code suivant :

    /* A tous les éléments de la p page */


    body {
    font-family: verdana; color:
    black;
    }
    h1 {
    color: #D00E80;
    text-align: center;
    }
    p{
    color: #D00E80;
    text-align: center;
    }
    /* A certaines instances d’un n élément */
    /* s’applique à <p class="vert">
    >ici</p> */ p.vert {
    color: #008000;
    }
    /* s’applique à une instance unnique d’un élément */
    /* s’applique à <p id="mix"> */
    p#mix {
    color: #0080FF;
    }
    Pour utiliser la feuille de style, il faut rajouter la ligne suivante dans l’en-tete de la page
    index.html (entre le <head> et </head>)

    Exercice 2 : Première page Web et utilisation de style

    Écrire une première page en HTML contenant un titre de niveau 1 et un paragraphe. Ajouter ensuite une
    liste ordonnée contenant 3 items et une liste non ordonnée contenant 2 items. Ajouter ensuite un tableau, le
    résultat est le suivant :

    Utilisation des CSS


    Le but de cet exercice est de modifier le style de la page web précédente introduction .html
    Selon 02 méthodes comme vu en cours :
    En utilisant un style globale définit dans l’entête de la page Web et en dernier en utilisant un fichier
    externe .css appelé "testStyle.css"
    Modifier l’apparence de la page Web selon les critères suivants :
     Ajouter une couleur de fond (jaune par exemple).
     Mettez les titres de niveau 1 en rouge et en italique.
     Mettez les titres de niveau 2 en vert et en souligné.
     Utilisez l’alignement de type justifier pour les paragraphes.
     Supprimer les puces dans les listes non ordonnées.
     Mettez les items des listes ordonnées et non ordonnées en gris.

    Exercice 3 : Tableau et utilisation de style

    Donnez le contenu des fichiers html et css pour avoir le résultat ci-dessus.
    Solution
    Exercice 2

    Page.html
    <html >
    <head>
    <title>Un essai</title >
    </head>
    <body>
    <h1> Ceci est mon premier titre </h1>
    <p> et ceci mon premier paragraphe </p>
    <h2>Liste numérotée</h2>
    <ol>
    </ol>
    <li> point numéro 1 </li>
    <li> point numéro 2 </li>
    <li> point numéro 3 </li>
    <p>t ceci mon deuxième paragraphe </p>
    <h2>Liste non numérotée</h2>
    <ul>
    </ul>
    <li> Une chose </li>
    <li> Encore une chose </li>
    <h1>Ceci est un tableau qui resume les balises Html </h1>
    <table>
    <tr>
    </tr>
    <th> Nom de la balise </th>
    <th> Utilisé pour dé?nir </th>
    <th> balise auto-fermante </th>
    <tr><td> p </td><td> un paragraphe </td><td>non</td> </tr>
    <tr><td> img </td><td> une image </td><td>oui</td> </tr>
    <tr><td> ol </td><td> une liste ordonnée </td><td>non</td> </tr>
    <tr><td> ul </td><td> une liste non-ordonnée </td><td>non</td> </tr>
    <tr><td> li </td><td> un item d’une liste </td><td>non</td> </tr>
    <tr><td> h1 </td><td> un titre de niveau 1 </td><td>non</td> </tr>
    <tr><td> a </td><td> un lien hypertexte </td><td>non</td> </tr>
    <tr><td> br </td><td> un saut de ligne </td><td>oui</td> </tr>
    </table>
    </body>
    </html>

    Style.css
    h1 {
    color : red;
    font- style : italic ;}
    h2 {
    color : green;
    text-decoration : underline ; }
    body {
    background-color:yellow;
    }
    p{
    text- align : justify ;}
    ul, ol {
    color: gray;
    }
    ul {
    list - style -type: none;
    }
    Exercice 3

    Page.html

    Style.css
    table{
    width : 400px ;
    border: 2px solid black;
    border-collapse: collapse;
    text-align: center;
    }
    th, td{
    border : 1px solid black ;
    width : 30% ;
    height: 40px;
    }
    tr{ background-color : #DC2F2F;}
    tr.impair{background-color: #F16D6D;}
    tr.pair{background-color:#CB4040}
    }

    Vous aimerez peut-être aussi