HTML
Cette section décrit le HTML et son usage :
1.Introduction
Le HTML est né en même temps que le Web, en 1989. C'est Tim Berners-Lee qui l'a écrit pour répondre aux besoins du système qu'il venait d'inventer avec Robert Caillau au Cern : le World Wide Web.
Ce langage a été conçu pour fonctionner de paire avec le protocole . HTML et HTTP constituent le coeur de l'invention de Berners-Lee : un moyen simple et efficace d'accéder sur un réseau à des documents liés entre eux par des hyperliens. Les documents s'enchaînent désormais les uns les autres par un simple clic de souris : écrits en HTML, ils sont transportés jusqu'au lecteur grâce au protocole HTTP.
Le HTML n'est cependant pas le premier langage gérant les hyperliens. En effet, dès 1987, HyperCard permettait de "surfer" à travers des documents en utilisant des images. Par ailleurs, on peut faire remonter aux années 40 (voir ) les premiers travaux en rapport avec les hyperliens.
Au moment où le Web a été inventé, la majorité des gens utilisaient TeX et PostScript, et plus rarement SGML, pour écrire leurs documents. Tim Berners-Lee réalisa en fait que ces langages ne répondaient pas tout à fait aux besoins de son système. Il a donc inventé le
HTML.
Le HTML est un langage simple, permettant de mettre en page simplement des documents texte destinés à être affichés avant tout sur un éran. C'est la première vocation du HTML. Le HTML n'a pas vraiment été écrit pour gérer le rendu des documents à l'impression ; ce n'est qu'au fur et à mesure des versions du HTML qu'on lui a apporté des possibilités supplémentaires, comme par exemple des directives permettant de gérer le rendu audio, et c'est finalement le XML qui va rendre le HTML quasi universel.
Contrairement au XML, dont le but est de séparer clairement contenu et contenant (la mise en page) des documents, le HTML (complété ensuite par les ) met directement en forme le contenu du document. Le document texte contient des éléments HTML qui vont diriger sa mise en page.
La mise en page est gérée par ce qu'on appelle des balises, ou tags en anglais. Les balises sont des séquences de caractères ASCII qui ont sens particulier et qui sont sujet à interprétation par les navigateurs Web. Lorsque l'on regarde le contenu d'une page HTML, on repère assez facilement les balises HTML : ce sont les portions de texte semblables à celle-ci :
<B>ceci est un <A href="URI">lien</A> en gras</B>
Une balise HTML commence par un < et se termine par un >. Certaines balises doivent être fermées (dans notre exemple, <B> </B>), d'autres non (par exemple <BR> qui permet de sauter une ligne). Dans les dernières versions du HTML, il existe environ 90 balises HTML, la majorité servant à la mise en page (texte en gras, les tableaux ), mais toutes ne sont pas dédiées à la mise en page des documents. En effet, le HTML permet par exemple de donner des informations sur le document lui-même (informations qui ne seront pas affichées), d'insérer des images, des animations Flash, du code JavaScript
Il est vrai que le HTML est de loin le langage balisé (utilisant des balises) le plus connu car c'est celui qui est le plus répandu. Mais les langages balisés sont plus anciens. Par exemple, HTML est un sous-ensemble de SGML (Standard Generalized Markup Language). SGML est le langage balisé le plus général. De la même façon, XML (eXtensible Markup Language) est également un sous-ensemble de SGML.
XML se répand car il permet d'écrire des documents "universels" en séparant le contenu et le contenant. C'est une sorte de métalangage permettant de définir d'autres balises et d'autres langages. HTML est au contraire un langage figé dans la mesure où la signification de ses balises est définie à l'avance. Les balises XML ne sont pas spécifiées (elles ont juste un format bien défini), et sont par ailleurs différentes des balises HTML. Finalement, HTML et XML n'ont pratiquement rien à voir l'un avec l'autre, et il est impossible de passer de décrire le HTML tel qu'il est avec le XML.
Etant donné la puissance du XML et la grande popularité du HTML, la volonté est grande pour faire en sorte que HTML puisse être décrit avec XML. Aussi, a-t-on développé le XHTML (eXtensible HTML), le langage HTML extensible. C'est tout simplement la réécriture du HTML mais en se conformant au standard XML. Cela permet d'orienter les futurs travaux sur le HTML : désormais, HTML peut être vu comme un sous-ensemble du XML, et il va bénéficier de toute la puissance du XML, et permettre notamment la transcription de toutes ses pages en pages parfaitement imprimables, ou calibrées pour les ordinateurs de poche.
La structure des pages HTML a évolué avec les versions du HTML. Au début, les pages étaient bien simples, et au fur et à mesure que le HTML s'est complèté, les pages ont pris une structure certes toujours simple, mais plus subtile.
Ce qui suit va s'intéresser aux dernières recommandations HTML 4.
Point important : depuis le début, les spécifications HTML précisent qu'un navigateur qui ne reconnaît pas une balise doit tout simplement l'ignorer (et non pas afficher un message d'erreur). Ceci assure un minimum de compatibilité entre les versions. Il ne faut donc pas avoir "peur" de rajouter les metas tags et la balise <!DOCTYPE> de début (voir ci-après).
Quelque soit la page HTML 4, la structure du code doit toujours être la même :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"">
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<P>Hello world!
</BODY>
</HTML>
La page HTML classique s'articule autour de 2 parties principales : la première ligne (!!) et le reste du document (limité par les balises <HTML> et </HTML>) qui est lui-même découpé en 2 autres parties très importantes : l'en-tête et le corps de page.
La première ligne (<!DOCTYPE>) dit au navigateur à quelle version de HTML est utilisé dans ce document. Cette version est décrite de manière formelle par des DTD (Document Type Declaration). Cette première ligne ne fait que pointer vers un endroit où on est sur de trouver ces descriptions (en l'occurence, elles se trouvent sur le serveur de la W3C).
Il y a 3 DTDs :
• HTML 4.01 Strict DTD : contient tous les purement conformes aux spécifications HTML 4 et qui ne figurent pas dans la Frameset DTD.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"">
• HTML 4.01 Transitional DTD : contient tous les éléments de la Strict DTD plus ceux déclarés caducs. Cette DTD est la plus générale et permet d'utiliser toutes les balises, y compris celles définies dans les anciennes versions de HTML. C'est certainement la DTD la plus simple à utiliser et qui posera le moins de problèmes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"">
• HTML 4.01 Frameset DTD : contient tous les éléments de la Transitional DTD plus ceux permettant d'utiliser les frames.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"">
Dans tous les cas, cette balise doit être la première. Par défaut, en cas de doute, il vaut mieux utiliser la HTML 4.01 Transitional DTD pour les pages conventionnelles, et la HTML 4.01 Frameset DTD pour les pages décrivant des frames.
Les versions de HTML antérieures à la version 3 n'utilisaient cette première ligne. La page HTML était alors limité à la partie définie par <HTML> </HTML>. Il est toujours possible d'omettre cette ligne et d'utiliser les balises de HTML 4 (les navigateurs sont transigeants) mais dans ce cas, la page n'est plus conforme aux spécifications de la W3C.
L'en-tête de la page HTML, située juste après la balise <!DOCTYPE >, est limitée par les balises <HEAD> et </HEAD>. Cette partie contient principalement ce qu'on appelle des métas informations : ce sont des informations sur les informations contenues plus loin dans la page. On y indique par exemple l'auteur de la page, la date d'écriture, des mots-clé ou une description de la page (utile pour le référencement dans les moteurs de recherche), mais on peut aussi y mettre des directives HTTP qui seront utilisées lors de l'acheminement de la page. Cette partie contient également le titre de la page, et éventuellement d'autres éléments comme les feuilles de style ou du code JavaScript.
Cette partie est en fait une sorte de foure-tout où on place tout ce qui n'est pas directement du contenu à afficher.
La balise <HEAD> comme la balise <HTML> n'acceptent pas d'attributs.
Cette partie est limitée par les balises <BODY> et </BODY>. Elle contient le contenu de la page HTML, c'est-à-dir ce qui doit être affiché par le navigateur. A quelques exceptions (balises <HEAD>, <HTML> et <META> entre autres), c'est dans cette partie que l'on utilise les pour formater le document.
On peut toutefois y définir du code JavaScript mais ce n'est pas la meilleure place pour le faire (certains navigateurs peuvent ne pas executer correctement le code).
Cette balise, dans les versions précédentes utilisait un certain nombres d'attributs
(background, text ). Ces attributs ont été déclarés caducs et ont été remplacés par les feuilles de style.
| nom | description |
| <!DOCTYPE > | dit quelle version de HTML est utilisée dans la page |
| <HTML> </HTML> | limite le contenu décrit en HTML |
| <HEAD> | limite l'en-tête de la page (pour les métas tags, le titre ) |
| </HEAD> | |
| <BODY> </BODY> | limite le corps de page. Contient toute la partie information de la page. |
3.Un index des balises HTML
Voici rassemblé par ordre alphabétique dans une seule page l'ensemble des balises HTML 4.
Le logo signifie qu'il est conseillé de ne plus utiliser cette balise.
Par défaut, toutes les balises doivent avoir une balise de fin, i.e. la balise <A> doit être fermée par une balise </A>. Lorsqu'une balise n'a pas de balise de fin, elle est signalée par un .
Par conséquent, son action est locale, elle ne peut pas modifier les éléments qui la suit. Un signale que la balise de fin est optionnelle.
A
<> définit un lien (anchor en anglais)
<> balise de mise en forme. Indique une abréviation.
<> balise de mise en forme. Indique un acronyme.
<> balise de mise en forme. Utilisé pour mettre en relief des
informations sur l'auteur (son adresse, un contact ).
<> insère une applet Java. Balise déconseillée, utiliser <> à la place.
| Utilisée dans une groupe <>. | |
| B | |
| <> | balise de mise en forme. Met le texte en gras. |
<> permet de définir des zones sensibles pour une image.
<> définit le chemin absolu à partir duquel toutes les URI
relatives du document vont être calculées. Doit être plaé dans l'en-tête du document HTML.
| <> (attribut size). Tout comme <>, cette balise est déconseillée. | |
| <> | permet d'outrepasser l'ordre de lecture et d'affichage des mots (utilisée lorsque des pages contiennent du texte qui doit se lire de la droite vers la gauche, par exemple) |
| <> | balise de mise en forme. Ecrit du texte plus gros. |
<> définit la taille de base pour les polices utilisées avec
<> balise de mise en forme. Ecrit du texte dans un format spécial (police et tabulation). Utilisée pour des citations.
<> délimite le corps de la page HTML
<> insère un saut de ligne simple
<> affiche un bouton dans un formulaire, mais avec plus de possibilités que <INPUT type="button">
C
<> permet de donner une description à un . Cette balise doit suivre immédiatement la balise <> et il ne peut y en avoir qu'une.
<> centre un élément au milieu de la page HTML ou d'une
cellule de . Déconseillé, utiliser <align="center"> à la place.
<> balise de mise en forme. Utilisée lorsque l'on cite un nom,
une référence (nom d'auteur, titre de livre )
<> balise de mise en forme. Affiche le texte dans une police
spéciale. Utilisé pour afficher du code source.
<> permet de donner des attributs à une colonne de
<> permet de rassembler plusieurs éléments <>. Voir les
.
D
<> indique le corps de la définition d'un mot que l'on définit dans une séquence <>
<> balise de mise en forme. Utilisée pour signaler un
changement, qu'un élément à été supprimé ou n'est plus valable (par exemple un prix). Concrètement, le texte est barré. A utiliser avec <>.
<> balise de mise en forme. Désigne une instance d'objet.
<> était utilisé au début du HTML pour définir des sommaires,
des listes N'est (pratiquement) plus utilisée.
<> permet d'appliquer un style, des comportements à des
éléments quelconques. Cette balise donne tout son sens au
DHTML.
<> indique une liste de
<> annonce le mot défini dans une liste de <>
E
<> balise de mise en forme. Utilisée pour mettre quelque chose
en relief (emphasis en anglais).
F
<> permet de regrouper des éléments d'une zone <> ensemble de manière thématique
<> balise de mise en forme. Permet de changer les attributs de
couleur, de taille et de police d'une portion de texte. Son
utilisation devient obsolète avec les .
<> balise de
<> définit une frame dans une zone <>. Voir les
.
<> conteneur principal pour les . Organise les .
G
H
<> définit un de niveau 1 <> définit un de niveau 2 <> définit un de niveau 3 <> définit un de niveau 4 <> définit un de niveau 5 <> définit un de niveau 6
<> définit la zone d'en-tête d'une page HTML
<> affiche une ligne horizontale
<> balise délimitant une page HTML. Permet de reconnître une page HTML.
I
<> balise de mise en forme. Affiche du texte en italique.
<> permet d'insérer une frame ou fenêtre dans le corps d'une page HTML
<> insère une
<> élément définissant un contrôle dans un . Cela
peut être un bouton poussoire, un bouton radio, une case à cocher, une zone de texte
<> balise de mise en forme. Contrairement a <>, permet
de mettre en relief ce qui est nouveau. Le texte peut par exemple apparaître sousligné. A utiliser avec <>.
<> insère une zone de texte. Déconseillée, utiliser <> à
la place.
J
K
<> balise de mise en forme. Indique un texte à rentrer par
l'utilisateur ("tapez ceci dans la zone de texte ci-dessous").
L
<> défini une "étiquette" associée à un contrôle de <> permet de donner une légende à une zone <>.
Ne peut pas être utilisée sans et suit immédiatement un <FIELDSET>.
| balise ne peut apparaître que dans l'en-tête de la page HTML. Voir la page associée à cette balise pour plus d'informations sur les relations possibles. | |
| M | |
| <> | définit une zone sensible pour différents éléments (<>, <> ou <>) |
<> élément d'une (numérotée ou à puces)
<> permet de définir des relations entre pages HTML. Cette
<> était utilisée au début du HTML pour définir un menu
<> définit des méta inforamtions sur la page HTML (situées
dans la zone en-tête de la page)
N
<> utilisée pour indiquer un message à afficher lorsque client ne supporte pas les
<> utilisée pour indiquer un message à afficher lorsque client ne peut pas exéter les scripts de la page
O
<> utilisée pour définir un objet non "conventionnel"
<> définit une numérotée. Utilisée au même titre que >.
<> permet de regrouper des balises <> en leur ajoutant un préfixe commun
<> définit un élément à ajouter dans la liste déroulante. Voir <>.
P
<> délimite un paragraphe
<> définit un paramètre pour un <> ou une
<>
<> délimite un zone de texte préformaté ; le texte va s'afficher
tel qu'il a été tapé dans la page HTML.
Q
<> balise de mise en forme. Comme <>,
définit une citation, mais plus courte.
R
S
> balise de mise en forme. Barre du texte.
<> balise de mise en forme. Utilisée pour représenter des
extraits de code de programmes, scripts
<> permet d'insérer un script (JavaScript, VBScript) dans la page HTML
<> liste déroulante
<> balise de mise en forme. Ecrit du texte plus petit.
<> comme <>, permet d'appliquer un style et des
proporiétés, mais seulement à du texte
> balise de mise en forme. Barre du texte.
<> balise de mise en forme. Comme <>, permet de metre
du texte en relief, mais en plus renforcé.
<> définit des styles "in line"
<> balise de mise en forme. Passe du texte en indice.
<> balise de mise en forme. Passe du texte en exposant.
T
<> définit un
<> rassemble plusieurs lignes d'un pour en constituer
le corps principal (comme des paragraphes). Il peut y avoir plusieurs <> dans un même .
<> délimite une cellule d'un
<> définit une zone de texte dans un
<> définit une ligne d'un comme étant le pied du
(dernière ligne). Doit apparaître avant un
<>.
<> définit une cellule au format en-tête dans un
<> définit une ligne d'un comme étant une ligne d'en-
tête (première ligne). Doit apparaître avant un <>.
<> définit une ligne dans un
<> balise de mise en forme. Affiche le texte à la façon machine
à écrire (texte en TeleType)
U
<> balise de mise en forme. Sousligne du texte.
<> délimite une zone de à puces
V
<> balise de mise en forme. Désigne une variable ou un argument de programme.
W
X
Y
Z
4.Un index des attributs HTML
Voici la liste complète des attributs utilisés avec les balises de HTML 4.
Le logo signifie que cet attribut est obligatoire avec les balises indiquées.
Le logo signifie que l'utilisation de cet attribut est déconseillée.
CDATA est une séquence de caractères provenant du jeu de caractères du document et d'entités de caractères (è par exemple).
Pixel est un entier représentant le nombre de pixels du support de restitution de la page (écran, papier).
Length (longueur) est soit des pixels, soit un pourcentage de l'espace vertical ou horizontal disponible.
MultiLength est soit une longueur, soit une longueur relative ("relative length"). Une longueur relative a la forme "i*", avec i un entier.
Datetime est une date/heure representée au format légal : YYYY-MM-DDThh:mm:ssTZD (voir la ).
FrameTarget est soit le nom d'une frame, soit l'un des mots réservés suivants : _blank (nouvelle fenêtre sans nom), _self (fenêtre courante), _parent (FRAMESET parent immédiat), _top (fenêtre principale).
MediaDesc est un descripteur de média. Voici une liste de médias reconnus : screen, tty, tv, projection, handheld, print, braille, aural. Voir .
Une plus longue description de ces types peut être obtenue sur cette page :
.
N.B. : l'attribut bordercolor très souvent utilisé pour les tableaux, n'a jamais été officiellement défini en HTML. Il s'agit en fait d'une extension que Microsoft et Netscape ont apporté au HTML pour pouvoir changer la couleur de bordure des tables. Officiellement, cela se fait avec les feuilles de style (voir les ).
G J K Q X Y Z
| nom | balises | format/valeurs | commentaires |
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||
| ,, ,, ,, ,, ,, , | |||
| onkeyup | sauf ,, ,,, ,, ,, ,, ,, ,, , | script | une touche a été relâchée |
| onload | script | toutes les frames viennent d'être chargée | |
| onload | script | le document vient d'être chargé | |
| onmousedown | sauf ,, ,,, ,, ,, ,, ,, ,, , | script | un bouton de la souris a été enfoncé |
| onmousemove | sauf ,, ,,, ,, ,, ,, ,, ,, , | script | la souris vient de bouger au dessus de l'élément |
| onmouseout | sauf ,, ,,, ,, ,, ,, ,, ,, , | script | la souris quitte la zone graphique de l'élément |
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
5.La liste des balises dédiées à la mise en forme dutexte
HTML propose diverses balises pour mettre le texte en forme. En voici les principales.
| <> | abréviation |
| <> | acronyme |
| <> | coordonnées de l'auteur de la page |
| <> | gras |
| <> | texte plus gros |
| <> | citation longue |
| <> | référence |
| <> | code (programme) |
| <> | ancien élément |
| <> | définition ou déclaration d'instance |
| <> | mise en relief simple |
| <> | italique |
| <> | élément nouveau |
| <> | ce que doit écrire l'utilisateur |
| <> | citation courte (en ligne) |
| <> | texte barré |
| <> | extrait de code |
| <> | texte plus petit |
| <> | texte barré |
| <> | texte mis fortement en relief |
| <> | indice |
| <> | exposant |
| <> | texte en TeleType (machine à écrire) |
| <> | souligné |
| <> | variable d'une fonction |
Pour toutes ces balises, l'usage est le même : <BALISE>mots à formater</BALISE>.
Permet de repérer les abréviations. Exemple : WWW ou HTTP
Certains navigateurs (voire tous) ne repèrent rien. Toutefois, cette balise est utile avec les : il est possible de redéfinir son format comme c'est le cas ici (les mots doivent être en gras et jaune ). Cette balise est fort peu usitée.
Permet de repérer les acronymes, à savoir les mots qui sont en fait composés d'initiales (comme les abréviations, mais ça se prononce). Exemple : LASER, Light Amplification by Stimulated Emission of Radiation.
Comme pour <>, les acronymes de cette page doivent apparaître en jaune, mais il se peut très bien que ça ne marche pas du tout (cela dépend de votre navigateur)
Met en relief les coordonnées de l'auteur. Le navigateur saute généralement une ligne. Exemple :
Sylvain BAUDOIN,
<B>
Permet de mettre du texte en gras. Exemple : Texte en gras.
<BIG> permet d'afficher du texte en plus gros que la taille normale. A l'inverse, <SMALL> permet d'afficher le texte en plus petit. Exemple : taille avec SMALL, taille normale et taille avec BIG.
Ces balises doivent a priori être utilisées pour les citations. <BLOCKQUOTE> sert pour les longues citations où il faut mettre le texte à la ligne (avec des marges), et <Q> sert pour les citations courtes en ligne. A priori, <Q> rajoute des guillemets. Exemples :
avec <BLOCKQUOTE> :
Y a pas d'grand, y a pas d'petits, la bonne longueur pour les jambes, c'est quand les pieds touchent bien parterre. (Coluche) avec <Q> : Jo Privat et son accordéon a dit : Vive la musette ! Et vous ?
Cette balise doit également être utilisée pour mettre en relief le nom d'un auteur, une référence. Exemple : Les Misérables, Victor Hugo
Cette balise doit a priori être utilisée lorsque l'on met du code (ligne de programmes) dans une page HTML. Le résultat est le suivant :
shared-network FOO-BAR { filename "boot";
subnet 192.168.2.0 netmask 255.255.255.224 {
range 192.168.2.10 192.168.2.30;
}
subnet 192.168.2.32 netmask 255.255.255.224 {
range 192.168.2.40 192.168.2.50;
}
}
Cette balise peut astucieusement être utilisée avec <> simplement pour pouvoir faire du copier-coller dans le code HTML et en même temps conserver sa mise en page.
Ces balises permettent de mettre en relief des nouveautés, non pas des modifications du code HTML, mais par exemple une mise à jour de prix : les clous qui passent de 5 à 10 Francs le kilo :
Les clous sont à 10 F/Kg.
Cette balise est utilisée par exemple quand on met du code dans un page pour mettre en avant les définitions ou déclarations d'instances
int max(int, int);
void main() { int i; printf("bonjour\n");
}
Simplement utilisée pour mettre en relief un bout de texte quelconque : bla bla bla bla ceci est important bla bla bla bla bla bla bla.
<I>
Met du texte en italique.
Indique le texte que l'utilisateur doit rentrer. Exemple : à l'invite, tapez "dir" pour obtenir la liste des fichiers présents dans le répertoire.
Barrent toutes les deux du texte.
ATTENTION ! Ces deux balises sont déconseillées. Il vaut mieux utiliser STYLE="text-decoration: line-through;">texte </SPAN> à la place (merci les ).
Est utilisée lorsque l'on met un extrait de code dans la page : printf("c'est sympa le C");
Comme <>, met le texte en relief, mais de façon plus prononcée. Exemple : avec <EM>, avec <STRONG>.
<SUB> et <SUP>
Permet respectivement de passer du texte en indice et en exposant.
<TT>
Affiche le texte comme tapé à la machine à écrire.
Cette balise permet de souligner du texte.
ATTENTION ! Cette balise est déconseillée. Il vaut mieux utiliser STYLE="textdecoration: underline;">texte</SPAN> à la place (merci les ).
Doit être utilisée lorsque l'on site une variable ou un paramètre d'une fonction. Exemple : Dans cette fonction, foo désigne un machin.
Toutes ces balises fonctionnent normalement sans attributs particuliers. HTML 4 a toutefois défini les suivants :
• id,
• class,
• lang,
• title,
• style.
Ainsi que les événements suivants :
• onclick,
• ondbclick,
• onmouseover,
• onmouseup,
• onmousedown,
• onmousemove,
• onmouseout,
• onkeypress, ? onkeydown, ? onkeyup.
6.Comment faire des liensen HTML
La balise <A> permet de créer des hyper-liens. C'est une des balises les plus importantes du HTML : sans elle, hors de question de "surfer" sur le net.
Un hyper-lien est une association entre un ou plusieurs éléments (des mots généralement) et une référence. Le cas idéal de l'hyper-lien, c'est le dictionnaire dans lequel tous les mots d'une définition pointent vers leur propre définition.
Cette balise nécessite des attributs pour fonctionner correctement.
Avec cette balise, il est possible de faire deux choses : créer un lien vers une ressource (page web, ancrage ou tout autre objet accessible par , FTP ), ou créer un ancrage. On appelle ancrage un endroit d'une page web auquel on va donner un nom pour le rendre accessible par un hyper-lien. Par exemple, en cliquant , vous allez atteindre un ancrage appelé "utilisation" placé à côté du titre "Utilisation" de cette page.
• <A href="objet"> permet de créer un lien (ou pointeur) vers "objet"
• <A name="ancrage"> permet de créer un ancrage ayant pour nom "ancrage"
Le texte ou les objets enfermés entre le <A > et le </A> devient la zone active pour le lien (avec l'attribut href, ces objets seront clickables et le navigateur tentera d'accéder à la ressource pointée, et avec name, ces objets seront ceux accessibles avec le nom indiqué). Pour créer un ancrage, on peut cependant ne pas enfermer de texte (c'est même ce qu'on fait généralement, même si certains navigateurs reconnaissent pas les ancrages "vides").
C'est l'utilisation la plus simple pour cette balise. La seule contrainte en nommant les ancrages, c'est que ce nom doit être unique, même si la casse diffère entre deux noms.
Pour créer un lien vers un ancrage, on utilise un <A href=" "> en mettant le nom de l'ancrage précédé d'un # :
On crée un ancrage "ancrage" :
<A name="ancrage"></A>
On crée ensuite un pointeur dessus :
<A href="#ancrage">texte ou objets pour le lien</A>
Les ancrages sont a priori sensibles à la casse.
Il existe une manière dérivée de faire des ancrages en utilisant l'attribut ID des balises :
<H2 ID="titre2">Titre 2 bla bla</H2> aura le même effet que <A name="titre2"><H2>Titre 2 bla bla</H2></A>
C'est un peut plus technique que les ancrages car on peut faire des liens sur à peu près tout ce qu'on veut (une autre page HTML, un ancrage, un ancrage sur une autre page, un fichier binaire ).
Pour créer un lien, il faut connaître l'emplacement exact de l'objet (son ). Le lien est créé en donnant cet URL comme valeur de l'attribut href= de la balise <A>. Voici une succession de liens différents :
• va pointer vers la page du répertoire courant (en URL relative)
• va pointer vers l'ancrage "aa" de la page (en URL relative)
• va pointer vers le site de ? va pointer vers un répertoire accessible par FTP
• va pointer vers une archive compressée (fichier binaire) se trouvant dans le répertoire /dhcp-dns/ (URL absolue par rapport au site courant).
Cet attribut est assez souvent utilisé. Il permet de dire au navigateur où ouvrir le lien (nouvelle fenêtre, fenêtre principale, fenêtre nommée ). Les 5 valeurs possibles de cet attribut sont les suivantes :
• _top ouvre le lien dans la fenêtre principale du navigateur
• _self ouvre le lien dans la fenêtre courante
• _blank ouvre le lien dans une nouvelle fenêtre sans nom
• _parent ouvre le lien dans la frame parent
• nom ouvre le lien dans la frame de nom "nom"
Voir les pour plus d'informations.
Les attributs name et href suffisent à faire fonctionner des liens correctement, et on n'utilise que ceux-là dans 95% des cas. Pourtant, HTML 4 définit des attributs supplémentaires dont voici la liste :
| attribut | description |
| accesskey | caractère qui donne accè à la ressource pointée (raccourci clavier) |
| charset | la page de code de la ressource pointée (par exemple ISO-8859-1) |
| class | pour attribuer la balise à une classe (utilisé pour les feuilles de style) |
| coords | permet de spécifier l'emplacement où la zone shape sera active |
| hreflang | le code du langage pour la page HTML pointée (à n'utiliser qu'avec href= ) |
| id | pour identifier la balise |
| onblur | script à exécuter lorsque le lien ne devient plus actif ("perd le focus") |
| onfocus | script à exécuter lorsque le lien devient actif ("attrape le focus") |
| rel | définit la relation entre la page actuelle et la ressource pointé. Voir <> |
| rev | définit la relation entre la page actuelle et la ressource pointé. Voir <> |
| shape | lorsque l'on crée un lien depuis une image, permet de spécifier la forme de la zone active sur l'image |
| tabindex | position de l'objet dans la liste des objets accessible par la touche tab |
| type | le type MIME de la ressource pointée (par exemple text/css) |
- La
- la
-
- la
- Le site de la W3C :
