Chapitre II : Le langage HTML

a/ Retour la ligne

Le marqueur br effectue un simple retour de ligne.

Il nest pas n cessaire de le fermer par </br>.

Syntaxe: <br>

Attribut :

CLEAR permet de forcer lalignement du texte. Ce param tre est particuli rement utile

lorsquon lutilise conjointement avec des images. Il introduit des retours de lignes jusqu ce

que la marge droite, gauche ou les deux soient libres.

CLEAR="LEFT ou RIGHT ou ALL"

<br clear=left>

<br clear=all>

b/ Ligne horizontale

Le marqueur hr ins re une barre horizontale.

Syntaxe: <hr>

Attributs :

(cid:2) SIZE : sp cifie l paisseur de la barre horizontale en pixels. La valeur par d faut

est 1.

(cid:2) WIDTH : sp cifie la longueur de la ligne, soit en pixels, soit en pourcentage de la

largeur de la fen tre.

(cid:2) ALIGN : sp cifie lalignement de la barre

ALIGN="LEFT ou RIGHT ou CENTER"

(cid:2) NOSHADE : ne prend pas de valeur. Lorsquil est pr sent dans le marqueur hr

leffet est une ligne pleine sans ombrage.

Exemple :

<hr size="3" width="200" align="center" noshade>

c/ La balise DIV

La balise DIV permet de regrouper des l ments

On peut associer des attributs communs aux l ments contenus entres les balises <div>

<div align="center">

<h1> Introduction </h1>

<p>

Bonjour

</p></div>

Cette balise est surtout utile pour associer des styles

<DIV class="cours">

.....

</DIV>

II.6 Mise en forme de caract res et caract res sp ciaux

II.6.1 Les balises de style

Effet Visuel

Les balises de style modifient la typographie du texte. Elles peuvent tre imbriqu es dans

d'autres balises de style de la m me fa on qu'on le ferait avec un traitement de texte.

Balise de style

<ABBREV> Abr viation

<ACRONYM> Acronyme

<B>

<BIG>

<CITE>

<CODE>

<DEL>

<DFN>

<EM>

<I>

Met la police en gras

Police plus grande

Citation

Instruction

Texte supprim mais qui reste pr sent

D finition d'instance

Emphase

Italique

Nouveau texte ins r cet endroit

Clavier - Suite de caract res devant tre tap s tel quel

Encadre le texte par des guillemets

<INS>

<KBD>

<Q>

<S>

<SAMP>

Comme strike (barr )

Exemple

Police plus petite

<SMALL>

<STRONG> Forte accentuation rendue par du gras

Texte barr (comme S)

<STRIKE>

Texte en Indice

Texte en Exposant

Caract re de machine

<SUB>

<SUP>

<TT>

<U>

soulign

II.6.2 Police

Pour modifier la police de votre texte il suffit dutiliser la balise: <font>.

Syntaxe : <font face= & color= & size= & >.votre

texte</font>

Attributs :

(cid:2) Face : sp cifie la police utilis e.

(cid:2) size : sp cifie la taille de la police.

(cid:2) color : sp cifie la couleur de la police soit en sp cifiant le nom de la couleur soit le

code de la couleur en "#RRVVBB" (RR, VV et BB repr sentent respectivement un

nombre hexad cimal entre 00 et FF pour le Rouge, le Vert et le Bleu).

Exemple :

<font face="Times New Roman, Times, serif" color="#FF0000"

size="+2" >exemple de police </font>

II.6.3 Caract res sp ciaux

Le standard HTML demande de respecter le codage des caract res ASCII 7 bits, c'est- -dire

que les caract res accentu s ne sont pas autoris s. Il faut pour cela utiliser un codage

particulier.

Exemple :

Caract re Code

"

&

Space

E

E

&quot;

&amp;

&nbsp;

&agrave;

&egrave ;

&eacute;

II.7 Les listes

II.7.1 Liste puce

Pour cr er une liste puce, on dispose de la balise <ul>

Pour sp cifier le titre de la liste, on utilise <lh>

Les l ments de la liste sont r alis s gr ce la balise <li>

Syntaxe:

<ul>

<lh>&</lh>

<li>&</li>

<li>&</li>

&

</ul>

Exemple :

<ul>

<lh>Titre de la liste</lh>

<li>El ment 1</li>

<li>El ment 2</li>

</ul>

II.7.2 Liste num rot e

Syntaxe: <ol> ... </ol>

<ol>

<lh>Titre de la liste</lh>

<li>El ment 1</li> <li>El ment 2</li>

</ol>

II.7.3 Liste de d finition

Le marqueur dl

" D limite une zone de liste de d finition qui contient des termes "dt" et des

descriptions "dd"

Syntaxe: <dl> ... </dl>

Le marqueur dt

"

Introduit un nouveau terme de d finition.

Syntaxe: <dt> ... </dt>

Le marqueur dd

"

introduit une description du terme de d finition. Le r sultat l cran est un

d calage du texte vers la droite.

Syntaxe: <dd> ... </dd>

<dl>

<th>Titre de la liste

<dt>Terme 1</dt>

<dd>D finition du terme 1</dd>

<dt>Terme 2</dt>

<dd>D finition du terme 2</dd>

....

</dl>

II.7.4 Attributs de liste

Il existe des attributs sp cifiques aux listes:

Attribut

Valeur

Effet Visuel

COMPACT

PLAIN

SEQNUM

START

CONTINUE

TYPE (pour les listes ordonn es)

resserre l'interligne

supprime les puces

d finit le premier num ro

d finit le premier num ro

repart du num ro o il s' tait arr t

la liste pr c dente

num rotation chiffr e (par d faut)

num rotation en capitales

1

A

num rotation en bas de casse

num rotation en chiffres romains (I, II, III, IV

...)

a

I

i

num rotation en chiffres romains en bas de

casse

puce circulaire

puce carr e

puce en disque

circle

square

disc

TYPE (pour les listes non-

ordonn es)

II.7.5 Combinaison de liste

Les listes peuvent tre embo t es les unes dans les autres, il suffit pour cela de d finir un

l ment dune liste comme tant une autre liste.

<ol>

<li> Achats faire

<ul>

<li> 2 litres de lait </li>

<li> 1 kg de pain mi-blanc </li>

</ul>

</li>

<li> Recette

<dl>

<dt>Pain</dt>

<dd>Il faut de la farine et de leau, de la levure.</dd>

<dt>Lait</dt>

<dd>Si vous tes en ville, aucune chance ... Il faut

trouver une vache </dd>

</dl>

</li>

<li> Dernier l ment num rot </li>

</ol>

II.8 Les liens

Les liens peuvent tre de deux types :

-

-

externes: un pointeur du document m ne vers un autre document

internes: un pointeur renvoie une section du m me document.

II.8.1 Le marqueuer <a>

Un lien se d finit par le marqueur <a ...> suivi de lattribut HREF= qui d finit ladresse

du document vers lequel le lien conduit. Il se termine par </a>.

Le texte ou limage qui sont ins r s entre les marqueurs de d but et de fin sont les parties

actives du lien ("mots_sensibles" ci-dessous) et d clencheront le chargement du document

lorsquon clique dessus.

Syntaxe: <A HREF="adresse"> mots_sensibles </A>

<A HREF=" http://www.isetb.rnu.tn/">ISET Bizerte</A>

<A HREF="/welcome.html">Retour lacceuil</A>

<A HREF="../index.html">Remonter dun niveau</A>

II.8.2 Lien externe vers un autre document HTML

Ce type de lien permet de pointer vers un document r f renc par une adresse URL ou par un

chemin relatif.

" Ce document peut tre un document HTML ou tout autre type de fichier. (postscript,

sons, images etc ...).

II.8.3 Lien interne

Les liens internes permettent de construire des tables de mati res et des renvois lint rieur

dun texte

Un lien interne pointe vers une ancre, cest dire un endroit lint rieur dun document d fini

par un nom.

Il faut d finir deux choses pour un lien interne :

(cid:3)(cid:3)(cid:3)(cid:3) Lancre interne

Syntaxe: <A NAME="nom_de_lancre"></A>

Exemple :

<A NAME="bas_de_la_page"></A>

(cid:3) Le lien vers lancre

" Le lien proprement dit se d finit avec le marqueur a suivi de href= #...

Syntaxe: <A HREF=#nom>mots_sensibles</A>

Exemple :

<A HREF="#bas_de_la_page>Aller en bas</A>

Exemple : Lien interne et table des mati res

....

<a href=#partie1>Premi re Partie</a>

<a href=#partie2>Deuxi me Partie</a>

....

...

<a name=partie1></a>

<h1>Partie 1</h1>

....

...

<h1><a name=partie2>Partie 2</a></h1>

.....

Il est galement possible dutiliser les ancres dans les liens externes. Il faut alors sp cifier

lancre vers laquelle pointe le lien en ajoutant #_$_ la fin de lURL.

Exemple : Ancre et lien externe

<a

href=http://www.isetb.rnu.tn/cours/exemple.html#partie2>Deux

i me Partie</a>

Et dans le document exemple.html on trouve la d finition de lancre suivante:

<a name=partie2>

<h2>Partie 2</h2>

II.8.4 Lien et adresses relatives

a. Ressource situ e dans le m me r pertoire que la page d'appel

La valeur prise par l'attribut href est simplement le nom du fichier, par exemple <a

href="index.html">.

b. Ressource situ e dans un sous-r pertoire du r pertoire contenant la page d'appel

Il suffit de citer la suite des sous-r pertoires jusqu'au fichier ressource, par exemple

href="archives/2001/18072001.html".

c. Ressource situ e dans un r pertoire contenant la page d'appel

Il faut remonter successivement chaque r pertoire par "../". Dans cet exemple, le r pertoire

vis

grand-p re) :

le

href="../../index.html".

hi rarchique

deuxi me

sup rieur

rang

est

(le

de

d. Ressource situ e dans un r pertoire situ dans une branche lat rale

Il faut remonter au r pertoire commun par "../" puis redescendre la bonne branche, par

exemple href="../../produits/convecteurs/rh1200x.html".

II.8.5 Lien vers des services Internet

a/ Lien pour lenvoie d e-mail

Un tel lien lance automatiquement lapplication de messagerie lectronique en incluant le

nom du destinataire.

<A HREF="MAILTO:adresse_correspondant"> ancre </A>

ou

<A

HREF="MAILTO:adresse_correspondant?Subject=Objet_du_message">

ancre </A>

href=mailto:[email protected]>Envoyez

<a

message</a>

moi

un

A HREF="MAILTO: [email protected]?Subject=Coucou"> Contact !!</A>

b/ Lien pour t l charger un fichier

Ce type de lien est utilis pour donner acc s un dialogue de t l chargement de fichier.

Le protocole indiqu dans lURL est, en loccurrence, le protocole de transfert de fichiers

FTP.

<a

logiciels disponibles</a>

href=ftp://tecfa.unige.ch/pub/software/>Liste

des

II.9 Les Tableaux

Un tableau doit respecter les quelques r gles suivantes :

(cid:3) Le tableau est encadr par les balises <TABLE> et </TABLE>.

(cid:3) Le titre du tableau est encadr par <CAPTION> </CAPTION>

(cid:3) Chaque ligne est encadr e par <TR> </TR> (Table Row, traduit par ligne du tableau).

(cid:3) Les cellules d'en-t te sont encadr es par <TH> </TH> (pour Table Header : En-t te

de tableau)

(cid:3) Les cellules de valeur sont encadr es par <TD> </TD> (Table Data: Donn e de

tableau)

Exemple :

<TABLE BORDER="1">

<CAPTION> Voici le titre du tableau </CAPTION>

<TR>

<TH> Titre A1 </TH>

<TH> Titre A2 </TH>

<TH> Titre A3 </TH>

<TH> Titre A4 </TH>

</TR>

<TR>

<TH> Titre B1 </TH>

<TD> Valeur B2 </TD>

<TD> Valeur B3 </TD>

<TD> Valeur B4 </TD>

</TR>

</TABLE>

(cid:3) Attributs de table:

Attribut

R le

border="x"

Epaisseur du cadre

bgcolor=couleur Couleur des cellules

Border color= Couleur des bordures

Height

taille en hauteur dun tableau

width=" "

taille en largeur dun tableau

Align

left, right, center

cellpadding="y" Espace situ entre les bordures du tableau et le contenu des cellules

cellspacing="y" Taille de la bordure entre les cellules

(cid:3) Attributs de cellule <TD> et <TH>

align="letf / center / right / justify

/ char"

valign="top / bottom / middle /

baseline"

width="x"

height="y"

colspan="x"

alignement horizontal

alignement vertical,

largeur de la cellule,

hauteur de la cellule,

d finit une cellule dont la largeur est x

fois celle de la colonne de base (fusion

des x colonnes adjacentes),

rowspan="y"

d finit une cellule dont la hauteur est y

fois celle de la ligne (fusion des y lignes

adjacentes),

bgcolor="couleur"

background="url"

d finit la couleur de fond,

image de fond.

(cid:3) Attributs de ligne <TR>

valign = "top / bottom / baseline / middle" alignement vertical

align = "right / center / left "

alignement horizontal

bgcolor="couleur"

couleur de fond de la cellule

Les attributs sont appliqu s pour toutes les cellules de la ligne sauf si un attribut de

<TD> donne un autre ordre.

Exemple : Regroupement de cellules en lignes ou en colonnes

<TABLE border="3" cellpadding="2">

<CAPTION align="bottom">Titre

</CAPTION>

<TR>

<TH align="left">Script</TH>

<TH align="left" colspan="2">Ex cution</TH>

</TR>

<TR>

<TD>CGI</TD>

<TD rowspan="2">par le</TD>

<TD>serveur</TD>

</TR>

<TR>

<TD>javascript</TD>

<TD>client</TD>

</TR>

</TABLE>

II.10 Insertion dimage

Les formats dimage affichables par les browsers sont .gif et .jpg (*.png pour les r cents)

Pour avoir des images lint rieur dun document HTML, on utilise la commande img:

<img src=URL align=alignement alt=commentaire width=n

height=n hspace=n vspace=n border=n>

attributs :

" src = est obligatoire et contient un URL ou un chemin relatif vers un fichier de

format .gif ou .jpg ou .png

" align : permet de sp cifier lalignement par rapport au texte : ALIGN = "TOP ou

BOTTOM ou MIDDLE ou RIGHT ou LEFT"

" alt : contient le commentaire que les personnes utilisant un browser textuel (sans

images) voient la place de limage.

" Width et height : se r f rent la largeur et la hauteur de limage (en pixels).

" hspace et vspace : permet de sp cifier la distance horizontale et verticale en

pixels entre le texte environnant et le bord de limage.

" Border : permet de cr er un cadre autour de limage. La largeur de la bordure est

exprim e en pixels.