Scribd Logo
Importer

Bienvenue sur Scribd !

  • 2 - HTML5 Structuration Et Mise en Forme D'une Page

    Transféré par

    Feesher Dragwel
    6 vues2 pages

    Titre original

    2- HTML5 structuration et mise en forme d'une page

    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é
    6 vues2 pages

    2 - HTML5 Structuration Et Mise en Forme D'une Page

    Transféré par

    Feesher Dragwel

    Droits d'auteur :

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

    Université Privée de Fès

    Faculté des Sciences d’Ingénieur


    Génie Informatique
    2020-2021

    Technologie web 1
    -T.P. HTML5 structuration et mise en forme d'une page-
    Partie 1 :
    1. Créer un nouveau document HTML :

    <html>
    <head>
    <title>Animaux</title>
    <meta charset="utf-8">
    <meta name="viewpoint" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    </body>
    </html>

    2. Diviser le body en 4 parties :


    Elément HTML classe
    header main-header
    div main-content
    aside
    footer

    3. Dans le header :
    a. Créer une paire de balises nav.
    b. Créer dans nav une liste avec 4 liens comme éléments (Home, Animals, Plants, Contact).
    c. Ajouter l’image header.jpg
    4. Dans la partie main-content :
    a. Créer 2 sections chacune avec un header, un footer, un article qui contient un paragraphe
    lorem. Chaque header doit porter un titre <h2> contenant un lien.
    b. Donner top-content comme nom de la classe des deux sections.
    c. Donner post-info comme nom de la classe du paragraphe.
    5. Entre la partie main-content et footer créer 3 balises aside :
    6. Dans chaque aside créer une paire de balises article.
    7. Dans chaque article créer un titre h1 et un paragraphe. Le titre doit contenir un lien. Et le
    paragraphe doit contenir Lorem.
    Partie 2 :
    1. Créer une feuille de style.
    2. Créer un selecteur du body avec la mise en forme suivante :
    a. Le seamless comme image d’arrière-plan.
    b. La taille du font.
    c. La famille des fonts.
    d. Couleur de texte.
    e. L’interligne (line-height).
    f. Les marges.
    g. La largeur à 80%.
    h. Alignement de texte à gauche.
    3. Pour le main-header img définir la largeur à 100%.
    4. Annuler la décoration des liens en utilisant la propriété text-decoration.
    5. Définir une couleur de texte pour a:link et a:visited. Et une autre couleur pour a:hover et a:active.
    6. Pour le main-header nav définir :
    a. Une couleur de background
    b. L’hauteur.

    ITAHRIOUAN Zakaria /2015-16 1


    c. Un style arrondi pour les angles.
    7. Pour le main-header nav ul définir :
    a. Centrer le texte.
    b. Enlever les puces avec liste-style :none.
    c. Définir les marges externes en 0 auto.
    8. Pour le main-header nav li changer le mode de flux en inline.
    9. Pour a:link et a:visited à l’intérieur du main-header définir :
    a. Couleur de texte.
    b. Padding.
    c. Changer le mode de flux à inline-block.
    10. Pour a:hover et a:active à l’intérieur du main-header définir :
    a. Couleur de texte.
    b. Couleur d’arrière-plan.
    c. Ombre.
    11. Pour les composants de la classe top-content :
    a. Couleur d’arrière-plan.
    b. Les marges internes et externes.
    c. Un style arrondi pour les angles.
    12. Pour les paragraphes post-info :
    a. La taille du texte.
    b. La couleur du texte.
    c. Le style italique.
    d. Diminuer la marge supérieure.
    13. Ajouter le nom de classe post-content aux paragraphes des articles contenus dans le main-content.
    14. Ajouter le nom de classe side-bar aux asides.
    15. Ajuster la largeur du main-content à 70% avec un flux float left.
    16. Ajuster la largeur du side-bar à 20% avec un flux float right et définir une couleur d’arrière-plan.
    17. Appliquer des marges internes et externes pour ajuster.
    18. Appliquer le même style du nav au footer en définissant un nom de classe du footer. Définir aussi :
    a. Une largeur à 100%
    b. Un flux flottant.
    c. Une couleur de texte.
    d. Un alignement centré.
    19. Dans le premier article ajouter une photo avec un nom de classe. Ajuster la largeur de la photo à
    100%.
    20. Mettre l’image dans la paire des balises «figure».
    21. Ajouter un texte de «figcaption» en bas de l’image.
    22. Pour la balise figure définir :
    a. Les marges.
    b. La taille du texte.
    c. La couleur du texte.
    23. Ajouter un audio à l’aide de la balise audio (utiliser les propriétés src et controls).
    24. Dans le deuxième article ajouter une vidéo (utiliser les propriétés src et controls). Ajuster la largeur
    de la vidéo.

    ITAHRIOUAN Zakaria /2015-16 2

    Vous aimerez peut-être aussi