Balises 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> 04/07/2019 Manuele Kirsch Pinheiro
Manuele Kirsch Pinheiro 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> </head> 04/07/2019 Manuele Kirsch Pinheiro
Manuele Kirsch Pinheiro 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 04/07/2019 Manuele Kirsch Pinheiro
Manuele Kirsch Pinheiro 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éfinition</dd> <dt>Terme 2 :</dt> </dl> 04/07/2019 Manuele Kirsch Pinheiro
Manuele Kirsch Pinheiro 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> 04/07/2019 Manuele Kirsch Pinheiro
<a href="ressource.html "> ressource à lier </a> 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 ! 04/07/2019 Manuele Kirsch Pinheiro
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> 04/07/2019 Manuele Kirsch Pinheiro
Manuele Kirsch Pinheiro 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> </ul> <h3 id="ol">Listes numérotés</h3> <ol> <li>item 1</li> <li>item 2</li> </ol> </body> </html> 04/07/2019 Manuele Kirsch Pinheiro
Manuele Kirsch Pinheiro 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" /> 04/07/2019 Manuele Kirsch Pinheiro
Manuele Kirsch Pinheiro Tableaux Définition d’un tableau, ses lignes et ses cellules : <table> <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 04/07/2019 Manuele Kirsch Pinheiro
Manuele Kirsch Pinheiro 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> <td>ligne 2</td> <td> (2,1)</td> <td> (2,2)</td> </tbody> </table> 04/07/2019 Manuele Kirsch Pinheiro
Manuele Kirsch Pinheiro 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> <td> <b>colonne 2</b></td> <td><strong>ligne 1</strong></td> <td>(1,1)</td> <td>(1,2)</td> <td><b>ligne 2</b></td> <td>(2,1)</td> <td>(2,2)</td> </table> 04/07/2019 Manuele Kirsch Pinheiro
Manuele Kirsch Pinheiro 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> <blockquote cite="http://fr.wikipedia.org/"> …. </blockquote> <figcaption>Wikipedia</figcaption> Manuele Kirsch Pinheiro
Organisation du document Nouvelle balises HTML5 : header, footer, article, section, nav, aside Entête : header Menu : nav Contenu : session & article Complément : aside Pied de page : footer <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> 04/07/2019 Manuele Kirsch Pinheiro
Manuele Kirsch Pinheiro - UP1 / CRI / UFR06 Gestion 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 / UFR06 Gestion