Balises HTML
Balises HTML
Balises HTML
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>
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" />
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
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>
<dd>définition</dd>
</dl>
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>
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 !
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>
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>
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" />
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
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>
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>
