Chapitre II : Le langage HTML

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 d’utiliser 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 d’une 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 l’eau, 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 l’attribut HREF=” ” qui définit l’adresse du document vers lequel le lien conduit. Il se termine par </a>. Le texte ou l’image 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 lorsqu’on clique dessus. Syntaxe: <A HREF="adresse"> mots_sensibles </A>

<A HREF=" http://www.isetb.rnu.tn/">ISET Bizerte</A> <A HREF="/welcome.html">Retour à l’acceuil</A> <A HREF="../index.html">Remonter d’un 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 à l’intérieur d’un texte Un lien interne pointe vers une ancre, c’est à dire un endroit à l’intérieur d’un document défini par un nom. Il faut définir deux choses pour un lien interne :

(cid:3)(cid:3)(cid:3)(cid:3) L’ancre interne

Syntaxe: <A NAME="nom_de_l’ancre"></A>

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

(cid:3) Le lien vers l’ancre • 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 d’utiliser les ancres dans les liens externes. Il faut alors spécifier l’ancre vers laquelle pointe le lien en ajoutant #_$_à la fin de l’URL. 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 l’ancre 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 l’envoie d’ e-mail Un tel lien lance automatiquement l’application 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 l’URL est, en l’occurrence, 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 d’un tableau

width=" "

taille en largeur d’un 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 d’image Les formats d’image affichables par les browsers sont *.gif et *.jpg (*.png pour les récents) Pour avoir des images à l’intérieur d’un 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 l’alignement 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 l’image.

• Width et height : se réfèrent à la largeur et à la hauteur de l’image (en pixels). • hspace et vspace : permet de spécifier la distance horizontale et verticale en

pixels entre le texte environnant et le bord de l’image.

• Border : permet de créer un cadre autour de l’image. La largeur de la bordure est

exprimée en pixels.