HTML & TECHNOLOGIES INTERNET

1. Introduction

Le but de ce cours est de :
- vous faire comprendre le fonctionnement du réseau internet et ses applications
- vous apprendre à créer et diffuser un site internet

1.1. La technologie client/serveur

Supposons que vous installiez un logiciel sur votre ordinateur et que vous ne le fassiez fonctionner que sur cet ordinateur. Si d'autres personnes veulent utiliser votre logiciel en même temps que vous, depuis d'autres ordinateurs reliés au vôtre par un réseau, cela va créer des conflits. En effet, plusieurs personnes risquent de modifier en même temps les mêmes informations dans un fichier ou d'effacer les modifications faites par d'autres personnes. Pour éviter cela, le logiciel est séparé en deux parties distinctes : la partie serveur et la partie cliente. La partie serveur va être exécutée en permanence sur un ordinateur spécifique. Elle va authentifier les accès des différents utilisateurs, examiner leurs demandes et y répondre en gérant les différents flux d'informations pour ne pas perdre ni mélanger les données. Il y a un partage intelligent de l'information. La partie cliente du logiciel va être exécutée sur l'ordinateur de chaque utilisateur. Elle ne sera exécutée qu'à la demande de l'utilisateur, elle n'a pas besoin de fonctionner en permanence. Elle va permettre à l'utilisateur de faire des demandes (des requêtes) au logiciel serveur et d'en recevoir les réponses.

Par extension, on appelle poste client (ou client) l'ordinateur sur lequel s'exécute la partie cliente du logiciel et poste serveur (ou serveur) l'ordinateur sur lequel s'exécute la partie serveur du logiciel.

Exemples :
- un serveur de bases de données avec un logiciel serveur de comptabilité va être interrogé par chaque poste client situé dans l'entreprise (application intranet) ou depuis l'extérieur, en passant par le réseau internet (application extranet).
- lorsque vous consultez un site internet, vous utilisez sur votre ordinateur un logiciel client appelé navigateur internet. Celui-ci demande à un serveur internet l'envoi de pages internet.

1.2. Le réseau internet

Le réseau internet est un gigantesque ensemble de serveurs et de réseaux reliés dans le monde entier par des câbles, des fibres optiques... Toutes ces connexions se font par l'intermédiaire de routeurs et de passerelles . Les routeurs servent à inter-connecter des réseaux utilisant les mêmes technologies, les passerelles sont utilisées pour connecter des réseaux de technologie différente. Chaque routeur, passerelle et serveur du réseau internet est identifié par un nom unique (l'URL) et un numéro d'identification unique (l'adresse IP). La correspondance entre chaque URL et son adresse IP est enregistrée sur des serveurs spécialisés : les serveurs DNS (Domain Name Service). Ces serveurs permettent d'aiguiller correctement les informations qui transitent dans le réseau vers les machines concernées. Chacun peut accéder à un serveur du réseau depuis son ordinateur en utilisant des applications clientes spécifiques : navigateur internet, lecteur de messagerie électronique... Chacune de ces applications se servira des URL ou des adresses IP pour adresser ses requêtes.

Pour vous connecter au réseau, vous devez louer un accès à un fournisseur d'accès à internet (FAI). En anglais : internet service provider (ISP). Selon vos besoins et vos moyens financiers, vous pourrez choisir un accès plus ou moins rapide. Attention, certains fournisseurs ne limitent pas le nombre d'octets reçus mais limitent la quantité d'octets que vous envoyez.

• Connexion par ligne téléphonique analogique (RTC ou Réseau Téléphonique Commuté) : nécessite un simple modem. Débit de l'ordre de 4 Ko/s. La connexion occupe la ligne, vous ne pouvez pas téléphoner en même temps.

• Connexion par modem câble : beaucoup plus rapide (50 à 250 Ko/s).

• Connexion par ADSL : débit de de 512 Ko/s à 4 Mo/s. Utilise la ligne téléphonique sans la monopoliser, on peut téléphoner en même temps. Nécessite d'être proche d'un central téléphonique pour garder les performances (moins de 5 km).

• Par ligne numérique RNIS. Nécessite une carte RNIS. Débit jusqu'à 128 Ko/s si deux lignes sont utilisées simultanément.

• Par fibre optique. Débit > 125 Mo/s.

• Par satellite. Intéressant en couplage avec une boucle locale WiFi (quelques Mo/s) pour couvrir une zone urbaine.

• La boucle locale radio (BLR) consiste à raccorder par voie hertzienne des abonnés équipés d'une antenne, à un point d'accès du réseau Internet. Débits de 1 à 20 Mo/s.

• Courants Porteurs en Ligne : les données sont transportées sur le réseau électrique. Débit de 500 ko/s à 6 Mb/s.

1.3. La licence d'un logiciel

Chaque programme informatique est créé par un ou plusieurs personnes qui en sont les auteurs. Comme pour un livre ou pour une oeuvre d'art, les auteurs sont propriétaires des droits relatifs à ce logiciel : droit d'utiliser le logiciel, droit de le copier, de le modifier, de l'intégrer dans un autre programme, droit de le rediffuser... En France (et de façon générale en Europe), les auteurs peuvent protéger leurs droits grâce au Droit d'Auteur ou Code de la Propriété Intellectuelle (à ne pas confondre avec le Code de la Propriété Industrielle). Dans les pays de droit Anglo-Saxon, les droits sont assurés par le système du Copyright, similaire au Droit d'Auteur. Chaque auteur est libre de céder en partie ou en totalité certains de ces droits, gratuitement ou non. Il diffuse alors son logiciel en l'accompagnant d'un texte qui explique quels droits sont accordés, à qui, sous quelles conditions.

Avant d'installer ou d'utiliser un logiciel, vous lisez les conditions de distribution qui l'accompagnent. En général, les conditions de distribution figurent dans une licence.

On distingue deux grandes familles de logiciels :

• les logiciels libres : le code source du logiciel est disponible, vous avez le droit d'examiner le logiciel, de le modifier pour l'adapter à vos besoins, de le rediffuser tel quel ou avec vos modifications, de l'utiliser dans tous les environnements. C'est le logiciel le plus intéressant pour l'utilisateur. La plupart des logiciels libres sont diffusés sous licence libre GPL. Pour les autres licences libres, voir http://www.fsf.org/philosophy/license-list.fr.html

• les logiciels propriétaires : une au moins des libertés du logiciel libre n'est pas accordée. Par exemple, l'utilisation sera limitée à un usage personnel ou vous ne pourrez pas modifier le programme.

Remarques : quelle que soit la licence, le logiciel peut aussi bien être gratuit que payant.
On utilise parfois le terme Open Source pour désigner un logiciel libre. Mais ce terme est souvent utilisé abusivement pour désigner un logiciel dont le code source est rendu disponible par ses auteurs, sans pour autant que le logiciel soit libre.

Suivant les droits accordés par la licence, la façon de diffuser le logiciel, de le faire payer... on distinguera plusieurs catégories pour désigner ces logiciels. Pour plus de détails sur les différentes catégories de logiciels, voir http://www.gnu.org/philosophy/categories.fr.html.

Pour protéger votre logiciel, mentionnez tout simplement que vous en êtes l'auteur (© Copyright Adam BROS 2001). Accompagnez-le d'un texte mentionnant les droits accordés.

2. Le langage HTML

2.1. Historique

Pour avoir un aperçu de ce qu'est le langage HTML, consultez un site internet avec votre navigateur. Dans les menus de votre navigateur, vous trouverez une fonction du style 'Afficher le code HTML' ou bien 'Voir le contenu de la page'. Une nouvelle fenêtre s'ouvrira alors, remplie de code HTML qui consiste en une succession de fonctions entourées par les signes < , </ et >. Par exemple, <TABLE>,</TD> ...
Ces fonctions sont appelées des 'tags' HTML ou 'balises' HTML. On distingue les balises d'ouverture et les balises de fermeture qui sont presque identiques, les balises de fermeture comportent une barre oblique / après le signe<.
Par exemple, <TD> est une balise d'ouverture, </TD> est une balise de fermeture. Une balise de fermeture est toujours utilisée avec la balise d'ouverture qui lui correspond.
Le texte à afficher dans les pages HTML est encadré par ces balises d'ouverture et de fermeture, ce qui permet de lui attribuer des caractéristiques de mise en forme, de position dans la page...

Cette technique est issue du journalisme où les correcteurs annotaient les textes des rédacteurs en encadrant les passages à souligner, à mettre en gras... par des 'tags', sortes de signes ayant chacun une signification bien précise.

Des spécifications de description, de formatage de documents ont donc été définies sur ce principe, donnant naissance au SGML (Structured Generalized Markup Language). Trop complexe à utiliser, un langage plus simple en a été extrait : le HTML (HyperText Markup Language), dont nous allons étudier les fonctions à travers l'utilisation de ses différentes balises. De nouvelles spécifications issues aussi de SGML commencent à être utilisée, elle apporte des outils complémentaires à HTML : il s'agit du XML. Nous en verrons le principe plus loin.

Remarque : afin de rendre votre code HTML compatible avec la norme XML, respectez ces consignes lorsque vous écrivez du code HTML :

• à chaque balise d'ouverture doit correspondre une balise de fermeture (sauf cas particuliers qui seront abordés plus loin)

• les balises peuvent être écrites en minuscules ou en majuscules mais une balise de fermeture doit impérativement être écrite de la même façon que la balise d'ouverture qui lui correspond.

• les valeurs des attributs contenus dans les balises doivent toujours être écrites entres guillemets "".

Un attribut est une option ajoutée à l'intérieur d'une balise d'ouverture et qui permet de moduler l'effet de cette balise sur les zones de texte qui suivent. Par exemple, pour la balise de début de paragraphe <P>, on peut utiliser l'attribut align pour définir la position du paragraphe :
<P align="center">

2.2. Le navigateur

Le navigateur internet est un logiciel client qui est installé sur votre ordinateur. Il transmet votre demande de consultation d'un site, aux serveurs DNS, en utilisant le protocole de communication HTTP. Les serveurs DNS relaient cette demande au serveur qui héberge le site demandé. Ce serveur vous renvoie du code HTML. Ce code est reçu par votre navigateur qui l'interprète et vous affiche alors une page internet.

Il existe différents navigateurs :

• internet Explorer (Windows. Licence propriétaire. Gratuit)

• Netscape Navigator (Linux, Windows, MacOS. Utilisation libre avec restrictions. Gratuit) est développé à partir de Mozilla. Voir http://www.netscape.fr

• Mozilla (Linux, Windows, MacOS. Licence libre. Gratuit), voir http://www.mozilla.org

• Konqueror (Linux. Licence libre. Gratuit), voir http://www.konqueror.org

• Galéon (Linux. Licence libre. Gratuit), voir http://galeon.sourceforge.net

• Opera (Linux, Windows, MacOS. Licence propriétaire. Payant), voir http://www.opera.com

• Lynx (Linux et Windows. Licence Libre. Gratuit), voir http://lynx.browser.org. C'est un navigateur en mode texte.

• Links, un équivalent de Lynx (Linux, Window et Mac OS. Licence Libre. Gratuit) Voir http://links.sourceforge.net

et bien d'autres encore...

Les modules : certains navigateurs n'intègrent pas toutes les technologies (animations au format Flash ou RealVideo...) et ne comprennent donc pas toutes les commandes contenues dans les pages internet. Soit parce que cette technologie est trop récente, soit pour des raisons commerciales. On peut pallier à cela en ajoutant les fonctionnalités manquantes au navigateur, sous forme de petits programmes qui lui sont ajoutés. Ces programmes seront chargés en mémoire en même temps que le navigateur ou uniquement lorsqu'on en a besoin. On appelle ces programmes des modules ou plug-ins. Chaque navigateur utilise son propre système de plug-ins, certains navigateurs acceptent aussi les plug-ins d'autres navigateurs. En tapant about:plugins dans la barre de navigation de certains navigateurs (Netscape, Mozilla, Galeon), vous verrez la liste des plug-ins disponibles.

La syntaxe du code HTML est définie dans les recommandations éditées par le W3C Consortium (voir http://www.w3.org). Quand on consulte la même page HTML sur un site internet, avec différents navigateurs, on constate de légères différences à l'affichage. Pourquoi ces différences ?
- chaque navigateur a été écrit différemment et interprète donc avec plus ou moins de bonheur le code HTML qui lui est envoyé par le serveur.
- certaines pages sont parfois écrites avec du code HTML un peu fantaisiste (à cause du créateur ou du logiciel de création utilisé) et les pages sont mal interprétées par certains navigateurs.
- ces normes ont évolué avec l'ajout de nouvelles fonctions HTML. Si vous utilisez un navigateur ancien qui n'interprète pas ces fonctions, vous observerez donc des bizarreries, votre site sera parfois impossible à consulter.

Quelques conseils pour concevoir un bon site Internet :

• utilisez du code HTML simple, évitez les fonctions trop compliquées, les technologies qui ne sont pas intégrées dans tous les navigateurs ou qui nécessitent l'ajout de modules. Ou alors, concevez un site qui puisse être consulté à la fois avec et sans l'activation de ces technologies.

• après avoir créé votre site, consultez-le avec un maximum de navigateurs différents, sur plusieurs systèmes (Unix, Windows et Mac) et sous des résolutions d'écran différentes. Consultez-le aussi avec un navigateur en mode texte (Lynx ou Links), couplé avec une commande vocale pour les malvoyants.

Ces recommandations peuvent paraître très contraignantes mais nous allons voir qu'il est possible de faire de magnifiques sites internet de façon simple en n'utilisant que les fonctions de base du HTML et en ne choisissant que certaines technologies. Tenez-en compte surtout si votre site n'est pas qu'une simple vitrine mais par exemple un site d'achat en ligne.

A retenir : la visualisation d'une page en langage HTML est indépendante du système d'exploitation, elle ne dépend que du navigateur qui l'interprète. HTML est un standard ouvert, implémentable dans tous les logiciels. Il est donc très intéressant à utiliser pour diffuser des documents lisibles par tout le monde (notion d'interopérabilité).

2.3. La conception des pages

Avant de se lancer dans l'écriture d'un site internet, il faut définir sa finalité puis sa structure et les fonctions proposées et enfin, préparer une maquette.

La finalité : un site peut servir à présenter une association, à faire du commerce électronique, à informer, à recueillir des pétitions, à enseigner, à jouer, à proposer des réservations...

La structure : il pourra être composé d'une seule page de présentation, de plusieurs pages reliées par un menu commun, d'un catalogue avec une base de donnée, de formulaires à remplir, d'espaces de discussion....

La maquette : pas besoin d'être un artiste, il suffit de dessiner rapidement à la main les différentes pages du site, d'y décrire les fonctions évoluées, de faire un schéma décrivant le fonctionnement pour passer d'une page à l'autre... La présentation et le graphisme peuvent aussi faire l'objet d'essais plus poussés (croquis en couleur).

Amusez-vous à consultez quelques sites au hasard. Définissez leur(s) finalité(s), analysez leur structure et leurs fonctionnalités. Notez les astuces de présentation et d'organisation qui vous paraissent originales, qui améliorent la consultation (effet visuels, choix de la résolution, des couleurs, ergonomie...).

2.4. Les commandes HTML

2.4.1. Quelques commandes pour commencer

Nous allons créer notre première page (la 'page d'index') avec un simple éditeur de texte. Nous allons l'enregistrer en l'appelant index.htm (notation issue du monde Microsoft) ou index.html (notation issue du monde UNIX), peu importe. Le nom 'index' est important car lorsqu'un navigateur accède à un site internet, c'est la page index.html ou index.htm qui est envoyée en premier par le serveur. Si le serveur utilise le langage PHP, il recherche en premier une page appelée index.php ou index.php3, s'il ne les trouve pas, il recherche ensuite une page index.html ou index.htm.

Un premier exemple de page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Ceci est un commentaire -->
<HTML>

<HEAD>
<!--
Encore un commentaire
sur plusieurs lignes.
-->
<TITLE>Ma première page</TITLE>
</HEAD>

<BODY topmargin="0" leftmargin="0">
Ce texte s'affichera dans le navigateur.
<!-- On peut mettre des commentaires où on veut, de toute façon, ils n'apparaîtront pas sur le site internet.
-->
</BODY>

</HTML>

La première ligne indique au navigateur que le document respecte la norme HTML 4.01 Transitional, c'est-à-dire :
- que le document respecte la norme HTML 4.01.
- que le document peut aussi contenir certaines instructions issues des normes HTML précédentes, qui ne sont plus recommandées dans la norme HTML 4.01 mais tout de même tolérées et donc à prendre en compte.
Toutes les instructions HTML que nous allons étudier respectent la norme HTML 4.01 Transitional, sauf indication contraire. Cette norme est intéressante car elle assure une bonne compatibilité avec la plupart des navigateurs internet.

Une page en HTML est encadrée par les balises d'ouverture <HTML> et de fermeture </HTML> . Elle est composée de deux grandes parties : l'en-tête et le corps. L'en-tête est encadré par les balises <HEAD> et </HEAD>. L'en-tête contiendra divers paramètres destinés au navigateur et aux robots d'indexage. Le texte contenu entre les balises <TITLE> et </TITLE> sera affiché tout en haut de la fenêtre du navigateur. Le corps est encadré par les balises <BODY> et </BODY>. Dans le corps, nous placerons tout ce que nous voulons voir sur la page affichée par le navigateur. Vous pouvez ajouter des commentaires dans votre code HTML en les plaçant entre les balises <!-- et -->, ils ne seront pas affichés par le navigateur mais rendront votre code plus lisible.

Pour la balise <BODY>, on peut utiliser les attributs topmargin et leftmargin pour définir l'épaisseur en pixels des marges à gauche et en haut de la page qui sera affichée par le navigateur. Ces 2 attributs ne font pas partie de la norme HTML 4.01 Transitional, ils sont ignorés par certains navigateurs.

Nous allons d'abord étudier le code HTML qui peut être placé dans le corps. Nous pouvons y placer n'importe quel texte :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>

<HEAD>
<TITLE>Ma première page</TITLE>
</HEAD>

<BODY>
Ceci est mon CV. Vous y lirez la description de mes formations, de mes expériences
professionnelles

stages, jobs d'été, emplois...
</BODY>

</HTML>

Enregistrez votre document index.html et ouvrez-le avec un navigateur pour visualiser le résultat. Vous verrez que le texte est automatiquement mis bout à bout et qu'il est positionné par défaut à gauche. Les espaces supplémentaires, les tabulations, les passages à la ligne suivante sont ignorés.
Si vous voulez que votre texte commence à la ligne suivante, vous pouvez utiliser la balise <BR>. C'est une des rares balises HTML qui ne nécessite pas de balise de fermeture. Vous pouvez afficher plusieurs passages à la ligne suivante en cumulant les balises :

Ceci est mon CV.<BR><BR><BR>Vous y lirez la description de mes formations, de mes expériences
professionnelles<BR><BR>
stages, jobs d'été, emplois...

Pour voir les changements effectués, n'oubliez pas à chaque fois d'enregistrer votre fichier dans votre éditeur et de cliquer sur l'icone 'Actualiser' ou 'Recharger' dans votre navigateur.
Remarque : si plusieurs balises <BR> se succèdent, écrivez-les toujours accolées, sans passer de ligne. Par exemple :

Ceci est une bonne syntaxe (affichera 2 passages à la ligne)<BR><BR>
Ceci est une mauvaise syntaxe<BR>
<BR>
(n'affichera qu'un seul passage à la ligne avec certains navigateurs).

Vous pouvez aussi structurer votre texte en paragraphes en utilisant les balises <P> ET </P> :

<P>Ceci est mon CV.</P>
<P>Vous y lirez la description de mes formations, de mes expériences
professionnelles :<BR><BR>
stages, jobs d'été, emplois...</P>

Remarquez qu'au début et à la fin de chaque paragraphe, le navigateur ajoute automatiquement un saut d'une ligne (équivalent à 2 passages à la ligne suivante <BR><BR>). Pour délimiter un paragraphe sans saut de ligne avant et après, on peut utiliser les balises <DIV> et </DIV> :

<DIV>Ceci est mon CV.</DIV>
<DIV>Vous y lirez la description de mes formations, de mes expériences
professionnelles :<BR><BR>
stages, jobs d'été, emplois...</DIV>

Vous pouvez aussi forcer le navigateur à prendre en compte le formatage de votre texte en l'encadrant par les balises <PRE> et </PRE>. Votre texte apparaît alors tel que vous l'écrivez, les espaces, tabulations, et passages à la ligne suivante sont conservés :

<PRE>
Ceci est mon CV.

Vous y lirez la description de mes formations, de mes expériences
professionnelles :
stages, jobs d'été, emplois...
</PRE>

Notez que le texte est affiché dans ce cas avec une police différente de la police par défaut. La balise <PRE> est très peu utilisée car elle empêche le texte de s'adapter à la taille de la fenêtre du navigateur, ce qui le rend inconfortable à lire. On ne l'utilise par exemple que pour afficher dans une page des listings informatiques, des extraits de programmes...

Lorsque vous écrivez une phrase qui dépasse la largeur de l'écran, le navigateur l'affiche automatiquement sur plusieurs lignes pour qu'elle soit complètement visible à l'écran. Si vous diminuez par exemple la taille de le fenêtre d'affichage du navigateur, le texte s'adapte instantanément à cette nouvelle taille. Très pratique, cela vous évite de déplacer la zone d'affichage avec la barre de défilement de la fenêtre du navigateur. Si vous voulez absolument que votre texte garde toujours la même largeur, au risque de dépasser la taille de la fenêtre, vous devez l'encadrer avec la balise<NOBR> :

<NOBR>Cette phrase dépasse la largeur de l'écran, elle devrait s'afficher sur plusieurs lignes mais en réalité, elle s'affichera sur une seule ligne car elle est encadrée par la balise NOBR. Pour la lire jusqu'à la fin, vous devez utiliser la barre de défilement du navigateur, ce qui n'est pas très<BR><BR> pratique.</NOBR>

2.4.2. Les couleurs

En HTML, il est possible de définir une couleur par défaut pour le fond de la page et pour le texte affiché, en utilisant les attributs bgcolor et text de la balise <BODY> :

<BODY bgcolor="#EEEEEE" text="#000022">

Chaque couleur est codée en hexadécimal sur six caractères. Le système de codage utilisé est le RVB. Les deux premiers caractères indiquent la quantité de rouge, les caractères 3 et 4 indiquent la quantité de vert, les 2 derniers caractères indiquent la quantité de bleu. Chaque composante rouge, vert ou bleu peut donc prendre une valeur de 0 à 255, on peut donc définir 256³= 16 777 216 couleurs.

Exemples : le blanc se code #FFFFFF, le noir #000000, le rouge#FF0000, le vert #00FF00, le bleu #0000FF.

Pour connaître le code d'une couleur, on peut télécharger des petits utilitaires de dessin qui indiquent le code correspondant. Tout les bons logiciels de dessin proposent aussi cette fonction : Photoshop, Gimp (voir http://www.gimp-fr.org/.

On peut aussi coder certaines couleurs en utilisant son nom anglais :

<BODY bgcolor="white" text="darkblue">

Mais les navigateurs ne reconnaissent pas tous les noms et affichent parfois une couleur différente. A éviter donc.

Il est recommandé de définir un fond de page très légèrement coloré (gris ou jaune très pâle..) à la place d'un fond blanc qui donne un contraste trop fort avec un texte noir et fatigue la vue. La couleur du fond sera ignorée si on imprime la page, elle n'est donc pas gênante.

Après avoir défini la couleur par défaut du texte, il est possible de changer la couleur de certaines portions du texte en utilisant l'attribut COLOR dans la balise <FONT> :

<BODY bgcolor="#EEEEEE" text="#000000">
<P>
<FONT COLOR="#000033">
Ce texte est affiché en bleu clair.
</FONT>
Ce texte est en noir.
</P>
</BODY>

2.4.3. L'affichage de caractères spéciaux

L'internationalisation du langage HTML a amené à établir une norme pour l'affichage des caractères spécifiques à chaque langue (caractères accentués en français, alphabet cyrillique, chinois, arabe...). C'est la norme UNICODE ou ISO/CEI 10646 ou i18n. Elle définit l'affichage de plusieurs milliers de caractères (le codage ASCII ne définissait que 128 caractères, le codage ANSI ou ASCII étendu n'en définissait que 256). La syntaxe pour afficher des caractères ISO en HTML est :
En notation décimale : l'esperluette & puis le dièse # suivi du code ISO en notation décimale puis un point-virgule.
En notation hexadécimale : l'esperluette & puis le dièse # puis x ou X suivi du code ISO en notation hexadécimale puis un point-virgule.

Exemples :

L'utilisation de cette norme évitera à un norvégien qui consulte votre page, de voir des signes cabalistiques à la place des caractères é, è, à...
Les caractères les plus utilisés peuvent aussi être représentés par une abréviation (on dit aussi une entité) précédée d'une esperluette et suivie d'un point-virgule. Par exemple, l'espace sera représenté par &nbsp; le caractère é par &eacute; ou bien le caractère à par &agrave; etc...
Cette notation est plus facile à retenir.

Voici un extrait des codes ISO :