Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Balises HTML

    Încărcat de

    Gilles Ossah
    41 vizualizări16 pagini

    Titlu original

    BalisesHTML

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PPT, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PPT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    41 vizualizări16 pagini

    Balises HTML

    Încărcat de

    Gilles Ossah

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PPT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 16

    Balises

    Balises HTML
    HTML
    Structure d’une page Web
    <html>
    <head>
    <title>Structure page Web</title>
    </head>

    <body>
    <h1>Structure d'une page Web</h1>
    <!-- description structure des pages -->
    </body>
    </html>

    12/10/20 Manuele Kirsch Pinheiro 2


    Quelques balises
    • En-têtes :
    – <title> titre </title> : titre de la page. Il est
    affiché dans la barre de titre du navigateur. Il est
    également utilisé par les moteurs de recherche
    – Meta-données :
    • Auteur : <meta content="auteur"
    name="author" />
    • Description : <meta content="Description du
    contenu de la page" name="description" />
    • Mots-clés : <meta content=« mot-clé1, mot-
    clé2" name="keywords"/>

    <head>
    <meta content="Manuele Kirsch Pinheiro" name="author" />
    <title>Structure page Web</title>
    12/10/20 Manuele Kirsch Pinheiro 3
    </head>
    Quelques balises
    • Corps du document :
    – <h1> texte </h1> : hx (x=1 ... x=6) écrit des
    titres (h1 = titre niveau 1, h2 = titre niveau 2, h3 =
    titre niveau 3 ...)
    – <p> texte </p> : paragraphe (avec saut de ligne)
    – <br/> : saut de ligne forcé
    – <hr/> : Trace un trait de séparation horizontal
    – <i> texte </i> : pour mettre en valeur
    – <b> texte </b> : pour faire ressortir du texte
    – <blockquote
    cite="http://server/source"> citation
    </blockquote> : pour faire une citation

    12/10/20 Manuele Kirsch Pinheiro 4


    Quelques balises
    • Listes à puce
    <ul>
    <li>item</li>
    <li>item</li>
    </ul>

    • Listes numérotés
    <ol>
    <li>item 1</li>
    <li>item 2</li>
    </ol>

    • Listes des termes (Lexiques)


    <dl>
    <dt>Terme 1 :</dt>
    <dd>d&eacute;finition</dd>
    <dt>Terme 2 :</dt>
    <dd>d&eacute;finition</dd>
    </dl>

    12/10/20 Manuele Kirsch Pinheiro 5


    Quelques balises
    • <div> texte </div> : bloc de texte,
    permet d’attribuer une mise en forme
    commune
    <div id="contenu">
    . . .
    </div>
    • <span> : appliquer une mise en forme
    spéciale à un élément précis
    – Gras : <span style="font-weight:
    bold;"> gras </span>
    – Alignement : <p style="text-align:
    right;"> paragraphe à droite </span>

    12/10/20 Manuele Kirsch Pinheiro 6


    Liens
    • Utilisation des balises <a>…</a> :
    <a href="ressource.html "> ressource à lier </a>
    – Attribut href : URL du fichier qui sera chargé dans le navigateur une fois cliqué sur lien
    • Lien vers un site http (URL absolu)
    <a href="http://www.univ-nancy2.fr"> Université Nancy 2
    </a>
    Remarque : Lorsqu'aucune page n'est spécifiée, c'est la page d'accueil qui
    s'affiche

    • Lien vers une page du même site (URL relatif)


    <a href="rapport.htm">Mon rapport</a> Même dossier
    <a href="../rapport.htm">Mon rapport </a> Niveau supérieur
    <a href="pages/rapport.htm">Mon rapport </a> Dossier "pages"

    • Envoi d'un message électronique


    <a href="mailto:machin@domaine.fr">Ecrivez nous !</a>

    Attention au SPAM !

    12/10/20 Manuele Kirsch Pinheiro 7


    Liens à l'intérieur de la page
    1. Définir la cible du lien (ancre) :
    <balise id="identificateur">
    <h2 id="conclusion"> CONCLUSION </h2>

    Par défaut top est l'ancre du haut de page

    2. Rendre une portion de texte cliquable


    <a href="#conclusion">la conclusion</a>
    <a href="#top">retour haut de page</a>
    <a href="memoire.htm#conclusion">conclusion
    du mémoire</a>

    12/10/20 Manuele Kirsch Pinheiro 8


    Exemple
    ...
    <p> <b>Listes</b> : on peut faire des listes à <a
    href="#puces">puces</a> ou <a href="#ol">numérotés</a></p>
    ...
    <h3 id="puces">Listes à puces</h3>
    <ul>
    <li>item</li>
    <li>item</li>
    </ul>
    <h3 id="ol">Listes numérotés</h3>
    <ol>
    <li>item 1</li>
    <li>item 2</li>
    </ol>
    ...
    </body>
    </html>

    12/10/20 Manuele Kirsch Pinheiro 9


    Les images
    • Utilisation de la balise <img src="fichier_image" />
    • Attributs :
    – src : la source, nom du fichier image (format gif ou jpg)
    – width : largeur prise dans la page web par l'image
    – height : hauteur prise dans la page web par l'image
    – alt : info-bulle qui apparaît lorsque l’image n’est pas
    chargée

    <img src="exemple.jpg" width=40 height=50 alt="Une jolie


    image" />
    <img alt="Photo" src="Photo.jpg" width="89" />
    12/10/20 Manuele Kirsch Pinheiro 10
    Tableaux
    • Définition d’un tableau, ses lignes et ses
    cellules :
    <table>
    <tr> <td>…</td> <td>…</td> </tr>
    <tr> <td>…</td> <td>…</td> </tr>
    <table>
    • Épaisseur de la bordure
    <table border="1">
    • Il est possible de fusionner des colonnes,
    des lignes
    – Attributs : colspan et rowspan
    12/10/20 Manuele Kirsch Pinheiro 11
    Exemple
    <table border="1">
    <tbody>
    <tr>
    <td></td>
    <td>colonne 1</td>
    <td>colonne 2</td>
    </tr>
    <tr>
    <td>ligne 1</td>
    <td> (1,1)</td>
    <td> (1,2)</td>
    </tr>
    <tr>
    <td>ligne 2</td>
    <td> (2,1)</td>
    <td> (2,2)</td>
    </tr>
    </tbody>
    </table>
    12/10/20 Manuele Kirsch Pinheiro 12
    Exemple
    <table border="1">
    <tr>
    <td rowspan="2"></td>
    <td colspan="2" align="center">
    <b>colonnes</b>
    </td>
    </tr>
    <tr>
    <td> <b>colonne 1</b></td>
    <td> <b>colonne 2</b></td>
    </tr>
    <tr>
    <td><strong>ligne 1</strong></td>
    <td>(1,1)</td>
    <td>(1,2)</td>
    </tr>
    <tr>
    <td><b>ligne 2</b></td>
    <td>(2,1)</td>
    <td>(2,2)</td>
    </tr>
    </table>12/10/20 Manuele Kirsch Pinheiro 13
    Légende
    • Légende
    <figure> …
    <figcaption> Légende </figcaption> </figure>

    <figure>
    <img src=".\img\Paris_ND.jpg"
    height="70" alt="Vue de Paris" />
    <figcaption> Image de Paris
    </figcaption>
    </figure>
    <figure>
    <blockquote
    cite="http://fr.wikipedia.org/"> ….
    </blockquote>
    <figcaption>Wikipedia</figcaption>
    </figure> Manuele Kirsch Pinheiro 14
    Organisation du document
    • Nouvelle balises HTML5 : header, footer,
    article, section, nav, aside

    <body>
    Entête :
    <header> entête </header>
    header
    <nav> menu navigation </nav> Menu : nav
    <section> section de contenu
    Contenu :
    <article> article de contenu
    session &
    </article>
    article
    </section>
    <aside> informations complémentaires
    </aside> Complément : aside
    <footer> pied de page </footer>
    </body>
    Pied de page :
    12/10/20 Manuele Kirsch Pinheiro
    footer 15
    Multimédia
    • HTML5 propose des nouvelles balises pour
    contenu multimédia
    – video, audio, canevas…

    <figure>
    <video controls>
    <source
    src="video/IMGP4706.mp4"
    type="video/mp4"/>
    Votre navigateur ne supporte pas la
    balise <i>video</i>.
    </video>
    <figcaption>Super-dog</figcaption>
    </figure>
    Manuele Kirsch Pinheiro - UP1 / CRI / 16
    UFR06 Gestion

    S-ar putea să vă placă și