Scribd Logo
Importer

Bienvenue sur Scribd !

  • TP 3

    Transféré par

    ahmed rekik
    16 vues2 pages

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

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

    TP 3

    Transféré par

    ahmed rekik

    Droits d'auteur :

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

    3ième S.I.

    Systèmes et Technologies de l’Informatique

    HTML5 & CSS3 (Module 1 )

    TP 3: Les médias
    On veut créer une page web qui contient quelques médias : image et vidéo .
    Créer un dossier de travail nommé Tp3 puis y
    mettre une image nommé « html5.jpg » et une
    vidéo nommée « résumé.mp4 », essayer de
    compléter le code suivant afin d’obtenir cette page
    web. Enregistrer votre fichier sous le nom tp3.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>insertion medias</title>
    </head>
    <body>
    <……>Les médias</……>

    <……>Voici une image: </……..>


    <………… src="…………….……"
    alt= "imagehtml">

    <………>Voici une vidéo:</……...>


    <……………….. controls="" >
    <source src="…………………………….." >
    </…………………..>

    </body>
    </html>
    La balise img :
    Exemple : < img src="image2.jpg" width ="200" height="150" border="2" alt="image
    insérée">
    Dans les pages Web, l'insertion d'une image se fait avec la balise suivante :
    <img src ="adresse" width="largeur" height="hauteur" border="taille" alt="texte"
    align="alignement">
    • src ="adresse" : définit l'adresse absolue (http://...) ou relative de l'image à
    afficher.
    • width ="largeur" et height ="hauteur" : définissent la largeur et la hauteur de
    l'image en pixels.

    Lycée secondaire jemmel 1 Prof :Trimeche Awatef


    3ième S.I. Systèmes et Technologies de l’Informatique

    • alt ="texte": permet de définir le texte de l'info bulle de l'image.


    • border ="taille": définit la largeur de la bordure autour de l'image.
    La balise vidéo :
    Exemple : <video controls="controls" height=300 width=300 poster="image_poster.jpg">
    <source src ="3D.mp4 "></video >
    Attribut Rôle
    poster Spécifie une image par défaut à afficher comme arrière-plan du lecteur tant que la
    vidéo n'est pas lancée.
    muted Indique au lecteur de désactiver le son de la vidéo.
    Valeur="muted"
    La balise vidéo permet de lire des fichiers ou des flux vidéo directement dans la page en
    proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause,
    positionnement dans la vidéo et contrôle du volume.
    Les images avec légende :
    Chercher les balises à utiliser pour afficher l’image avec sa légende.
    <…………………………………..>
    <…………………. src="html5.jpg" >
    <……………………………………..> Dernière version de
    Html</…………………………………..>
    </…………………………………………………….>
    L'élément HTML <figcaption> représente une légende décrivant le
    reste du contenu de son élément parent <figure>

    Appliquer la mise en forme suivante dans un fichier nommé tp3.css


    puis donner le rôle de chaque propriété

    figure {
    border: thin #c0c0c0 solid;
    padding: 5px;
    width: 220px;
    margin: auto;
    }
    img {
    width: 220px;
    height: 150px;
    }
    figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
    }
    Lycée secondaire jemmel 2 Prof :Trimeche Awatef

    Vous aimerez peut-être aussi