Balises HTML Structure dune page Web html head
Balises HTML
Structure d’une page Web <html> <head> <title>Structure page Web</title> </head> <body> <h 1>Structure d'une page Web</h 1> <!-- description structure des pages --> </body> </html> 6/18/2021 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, motclé 2" name="keywords"/> <head> <meta content="Manuele Kirsch Pinheiro" name="author" /> <title>Structure page Web</title> Manuele Kirsch Pinheiro 6/18/2021 </head> 3
Quelques balises • Corps du document : – <h 1> texte </h 1> : hx (x=1. . . x=6) écrit des titres (h 1 = titre niveau 1, h 2 = titre niveau 2, h 3 = 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 6/18/2021 Manuele Kirsch Pinheiro 4
Quelques balises • Listes à puce • Listes numérotés <ul> <li>item</li> </ul> <ol> <li>item 1</li> <li>item 2</li> </ol> • Listes des termes (Lexiques) <dl> <dt>Terme 1 : </dt> <dd>dé finition</dd> <dt>Terme 2 : </dt> <dd>dé finition</dd> </dl> 6/18/2021 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> 6/18/2021 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-nancy 2. 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> <a href=". . /rapport. htm">Mon rapport </a> <a href="pages/rapport. htm">Mon rapport </a> • Envoi d'un message électronique <a href="mailto: machin@domaine. fr">Ecrivez nous !</a> Même dossier Niveau supérieur Dossier "pages" Attention au SPAM ! 6/18/2021 Manuele Kirsch Pinheiro 7
Liens à l'intérieur de la page 1. Définir la cible du lien (ancre) : <balise id="identificateur"> <h 2 id="conclusion"> CONCLUSION </h 2> 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> 6/18/2021 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>. . . <h 3 id="puces">Listes à puces</h 3> <ul> <li>item</li> </ul> <h 3 id="ol">Listes numérotés</h 3> <ol> <li>item 1</li> <li>item 2</li> </ol>. . . </body> </html> 6/18/2021 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" /> 6/18/2021 Manuele Kirsch Pinheiro 10
Tableaux • Définition d’un tableau, ses lignes et ses cellules : <table> <tr> <table> <td>…</td> </tr> • Épaisseur de la bordure <table border="1"> • Il est possible de fusionner des colonnes, des lignes – Attributs : colspan et rowspan 6/18/2021 Manuele Kirsch Pinheiro 11
Exemple <table border="1"> <tbody> <tr> <td></td> <td>colonne 1</td> <td>colonne 2</td> </tr> <td>ligne 1</td> <td> (1, 1)</td> <td> (1, 2)</td> </tr> <td>ligne 2</td> <td> (2, 1)</td> <td> (2, 2)</td> </tr> </tbody> </table> Manuele Kirsch Pinheiro 6/18/2021 12
Exemple <table border="1"> <tr> <td rowspan="2"></td> <td colspan="2" align="center"> <b>colonnes</b> </td> </tr> <td> <b>colonne 1</b></td> <b>colonne 2</b></td> </tr> <td><strong>ligne 1</strong></td> <td>(1, 1)</td> <td>(1, 2)</td> </tr> <td><b>ligne 2</b></td> <td>(2, 1)</td> <td>(2, 2)</td> </tr> Manuele Kirsch Pinheiro </table> 6/18/2021 13
Légende • Légende <figure> … <figcaption> Légende </figcaption> </figure> <img src=". imgParis_ND. jpg" height="70" alt="Vue de Paris" /> <figcaption> Image de Paris </figcaption> </figure> <blockquote cite="http: //fr. wikipedia. org/"> …. </blockquote> <figcaption>Wikipedia</figcaption> </figure> Manuele Kirsch Pinheiro 14
Organisation du document • Nouvelle balises HTML 5 : header, footer, article, section, nav, aside <body> <header> entête </header> <nav> menu navigation </nav> <section> section de contenu <article> article de contenu </article> </section> <aside> informations complémentaires </aside> <footer> pied de page </footer> </body> 6/18/2021 Manuele Kirsch Pinheiro Entête : header Menu : nav Contenu : session & article Complément : aside Pied de page 15: footer
Multimédia • HTML 5 propose des nouvelles balises pour contenu multimédia – video, audio, canevas… <figure> <video controls> <source src="video/IMGP 4706. mp 4" type="video/mp 4"/> Votre navigateur ne supporte pas la balise <i>video</i>. </video> <figcaption>Super-dog</figcaption> </figure> Manuele Kirsch Pinheiro - UP 1 / CRI / UFR 06 Gestion 16
- Slides: 16