Scribd Logo
Importer

Bienvenue sur Scribd !

  • Séance 3 Feuille HTML Avec Style 21 22

    Transféré par

    evansieur
    0 vues2 pages

    Titre original

    Séance 3 feuille html avec style 21 22

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, 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 DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    0 vues2 pages

    Séance 3 Feuille HTML Avec Style 21 22

    Transféré par

    evansieur

    Droits d'auteur :

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

    739765892.

    docx 21 22

    Une page HTML

    Le style, les liens :


    Dans la « page blanche.html » que vous avez enregistré la semaine dernière vous trouvez :
    <!DOCTYPE html >
    <html>
    <head>
    <title> </title>
    </head>
    <body>

    </body>
    </html>

    Pour éviter les problèmes de caractères spéciaux, on ajoutera <meta charset="UTF-8"> dans le
    « head »

    Dans la balise <title> …</title>, ajouter votre nom.


    Actualisez l’affichage du navigateur.
    Où apparait votre nom ? Mon nom apparaît sur l’onglet de ma page html.

    Dans le corps de la page introduisez du contenu. (nom, prénom, date de naissance, classe, lycée,
    hobbies ,…..)
    Actualisez l’affichage du navigateur.
    La mise en page est-elle respectée ? Oui

    Mettre - nom et prénom - dans une balise <p>..</p>  <p>Alex TERRIEUR</p>


    Mettre – classe lycée - dans une autre balise <p>..</p>
    Mettre – date naissance - adresse - dans une autre balise <p>..</p>
    Actualisez l’affichage du navigateur.
    Y a –t-il eu un changement dans l’affichage ? lequel ? …………………………………

    Ajoutez dans le corps <a href="https://www.lyceevaldeseine.fr/">V2S</a>


    Actualisez l’affichage du navigateur.
    A quoi sert la balise <a>..</a> ? Elle sert à mettre un lien.

    Copiez le fichier de votre photo « à coté » du fichier html et renommez-le au format « monId.jpg »
    Ajoutez dans le corps <img src=" monId.jpg ">
    Actualisez l’affichage du navigateur.
    A quoi sert la balise <img> ? Elle sert à mettre une image.

    Ajouter en plus dans la balise <p > de votre nom : style="color:blue; "
    (par exemple <p style="color:blue; " >Alex TERRIEUR <p> )
    On a ajouté un attribut de style.
    Actualisez l’affichage du navigateur.
    Cela change –t-il quelque chose à l’affichage ? Mon nom devient de la couleur choisie.
    739765892.docx 21 22

    Ajouter en plus dans une balise l’attribut style position:absolute; top:150px;left:100px;

    (par exemple
    <p style="color:blue ; background-color:yellow; position:absolute; top:150px;left:100px;"> Seconde X </p>)

    Actualisez l’affichage du navigateur.


    Testez d’autres valeurs et réactualisez

    A quoi cela sert-il ?


    A mettre en page notre page html pour la rendre plus jolie.

    Pour finir, faites une « composition » à votre gout (couleurs styles, positionnement…) pour faire
    une page où vous vous présentez.
    (Vous pouvez utiliser d’autres balises trouvées sur internet)

    Votre production et ce fichier complété seront enregistrés dans le répertoire « SNT DUBOIS » de
    votre bureau. (par sécurité copiez aussi le répertoire dans « mes documents »)

    C’est ces documents que j’évaluerai.

    Vous aimerez peut-être aussi