Scribd Logo
Importer

Bienvenue sur Scribd !

  • TP 08 Introduction Aux Langages HTML Et CSS

    Transféré par

    officialrassoul Sane
    119 vues3 pages

    Titre original

    TP 08 INTRODUCTION AUX LANGAGES HTML ET CSS

    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é
    119 vues3 pages

    TP 08 Introduction Aux Langages HTML Et CSS

    Transféré par

    officialrassoul Sane

    Droits d'auteur :

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

    1

    Introduction aux langages HTML et CSS – Mise en page web

    TRAVAUX PRATIQUES / DIRIGES N° 8


    Titre TP/TD

    1. Objectif du TP

     Regrouper des éléments HTML en utilisant div ou span


     Appliquer du CSS à des éléments regroupés avec div et span
     Décrire les différentes techniques de mise en page dans un document HTML
     Concevoir une page HTML ayant une mise en page de qualité

    2. Prérequis

    Cours correspondant à la séquence 8

    3. Exercice 1 :

    Donner le code html permettant de réaliser chacun des schémas suivants en utilisant les blocs (div).

    TP/TD 3 : Mise en page web emnguer@gmail.com Introduction aux langages HTML et CSS
    2
    Introduction aux langages HTML et CSS – Mise en page web

    4. Exercice 2 :

    Réaliser une page html contenant votre CV en utilisant les blocs div comme suit :

    5. Exercice 3 :

    Soit la page ci-dessous obtenue à partir du code source ci-après.

    TP/TD 3 : Mise en page web emnguer@gmail.com Introduction aux langages HTML et CSS
    3
    Introduction aux langages HTML et CSS – Mise en page web
    Code source :

    <html>
    <body>
    <div id="container" width="500px">
    <div id="header" style="background-color:#FFA500; width:500px">
    <h1 style="margin-bottom:0px">CFPP-UGB</h1>
    </div>
    <div id="menu" style="background-color:#FFD700; height:200px; width:100px; float:left">
    <b />Menu</b>
    <br />HTML
    <br />CSS
    <br />JavaScript
    </div>
    <div id="content" style="background-color:green; height:200px; width:400px; float:left">
    <b>Menu</b>
    </div>
    <div id="footer" style="background-color:grey; width:500px;text-align:center">
    <b>Copyright@ugb</b>
    </div>
    </div>
    </body>
    </html>

    1. Modifier le code ci-dessous pour que le bloc ci-dessous occupe toute la largeur de l’écran.
    2. Modifier le code source pour que Copyrith@ugb soit centré dans le bloc gris.
    3. Remplacer le texte CFPP-UGB par une image
    4. Modifier le code source pour que le texte du bloc content ait une marge de 5px. De même pour le texte du
    bloc menu.

    6. Exercice 4 : (Mise en page avec la propriété float)

    En utilisant les balises div et iframe, réaliser une page web contenant votre CV. Il faudra découper la page
    en quatre blocs nommés respectivement logo (pour contenir le logo et une description de la page), menu
    (pour contenir les liens pour afficher les parties du CV), content (contenant un iframe où seront affichées
    les pages correspondant aux liens du menu) et copyright (contenant le texte Copyright@UGB 2016) .

    TP/TD 3 : Mise en page web emnguer@gmail.com Introduction aux langages HTML et CSS

    Vous aimerez peut-être aussi