• Aucun résultat trouvé

Balises HTML Balises HTML

N/A
N/A
Protected

Academic year: 2022

Partager "Balises HTML Balises HTML"

Copied!
16
0
0

Texte intégral

(1)

Balises HTML

Balises HTML

Balises HTML

Balises HTML

(2)

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>

(3)

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" />

(4)

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

(5)

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>

(6)

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>

(7)

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 !

(8)

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>

(9)

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>

(10)

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'imagealt : 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" />

(11)

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)

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>

(13)

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>

(14)

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>

<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>

(15)

Organisation du document

• Nouvelle balises HTML5 : 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>

Entête : header Menu : nav

Contenu : session &

article Complément : aside

Pied de page :

(16)

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>

<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>

Références

Documents relatifs

Parfois, on a besoin d'utiliser des balises génériques (aussi appelées balises universelles) car aucune des autres balises ne convient. On utilise le plus souvent des

Tous les langages ayant pour objectif de représenter de l’information en utilisant des balises sont définis par :..

On peut utiliser cette balise conjointement avec la balise &lt;ins&gt; pour indiquer le nouveau texte qui est à prendre en compte!. &lt;details&gt;

Lire attentivement ce manuel avant toute manipulation d’une balise d’identification autonome pour aéronef : Beacon Standard / Beacon Pro / Beacon Light / Beacon Light Pro..

À lire : Apprendre HTML5 diapo-papier ; Langage CSS diapo-papier ; Vérifier la validité avec le W3C diapo-papier 1 Structure d’une page web - En utilisant les ressources mises à

Une façon simple d’y arriver est de créer un fond d’écran avec les bornes pour une résolution de 800x600 pixels et de 1024x768 pixels. IFT1147 -

_parent : remplace le document de définition du frameset _top : remplace toutes les frames de la fenêtre ouverte. •

L'approbation des mesures annoncées par Emmanuel Macron le 31 mars - L’extension des mesures de restrictions actuellement à l’œuvre dans dix-neuf départements (dans