You are on page 1of 25

TDI- Applications Hypermédias FARIH Saïd

1

Applications Hypermédias

I. concepts fondamentaux

1. Présentation

Une page Web est un document. Elle est enregistrée sur le disque du serveur, et affichée par le

navigateur Web.

Le navigateur Web affiche le contenu du fichier enregistré sur le serveur après l'avoir interprété, il

offre donc une interprétation du fichier. On met ici en avant une terminologie: le fichier est sur le disque

dur, tandis que le document est affiché par le navigateur.

2. Intranet, Extranet, INTERNET ?

a. Réseau Intranet

i.

Définition

Un réseau Intranet est un réseau, interne à une entreprise, qui utilise les technologies Internet pour

améliorer les communications internes, publier des informations ou développer des applications. Pour

utiliser les applications Internet gratuites ou peu onéreuses sur un réseau Intranet, chacun des ordinateurs

du réseau doit prendre en charge le protocole TCP/IP. Un réseau Intranet peut être privé, auquel cas il

n'est pas connecté à Internet, ou public, auquel cas il l'est.

L'intranet est aujourd'hui une ressource technologique indispensable à l'entreprise. Destiné

essentiellement à améliorer la circulation et les conditions d'utilisation des informations, l'intranet est

également devenu la porte d'entrée de l'entreprise vers l'INTERNET.

L'intranet est la partie sécurisée d'un réseau informatique (d'une entreprise ou d'une organisation)

basé sur les mêmes technologies que l’INTERNET (protocoles de communication TCP/IP, serveur, browser,

e-mail, etc.). Il est destiné à l'échange et au partage d'informations entre des programmes et/ou des

utilisateurs connus et autorisés.

L'intranet est généralement connecté au réseau INTERNET pour permettre la communication avec le

monde extérieur.

ii. Pourquoi mettre en œuvre un intranet?

L'intranet permet d'optimiser la circulation des informations. Les principaux services pour les

utilisateurs sont:

Le courrier électronique,Les principaux services pour les utilisateurs sont: Le partage des nouvelles et des agendas, la disponibilité

Le partage des nouvelles et des agendas,pour les utilisateurs sont: Le courrier électronique, la disponibilité et l'échange de documents, Le partage

la disponibilité et l'échange de documents,électronique, Le partage des nouvelles et des agendas, Le partage des données de l'entreprise, Le travail

Le partage des données de l'entreprise,agendas, la disponibilité et l'échange de documents, Le travail de groupe, La gestion de la circulation

Le travail de groupe,de documents, Le partage des données de l'entreprise, La gestion de la circulation des documents et

La gestion de la circulation des documents et du travail associé.des données de l'entreprise, Le travail de groupe, Les logiciels nécessaires à la mise en œuvre

Les logiciels nécessaires à la mise en œuvre de ces services sont:

Soit disponibles (pour la majorité des cas): les logiciels de messagerie, les logiciels de travail ennécessaires à la mise en œuvre de ces services sont: groupe (Lotus Notes, Exchange, etc.), etc.;

groupe (Lotus Notes, Exchange, etc.), etc.;

Soit à développer spécifiquement au cas par cas.de travail en groupe (Lotus Notes, Exchange, etc.), etc.; iii. De l'intranet vers l'INTERNET L'intranet

iii. De l'intranet vers l'INTERNET

L'intranet peut être connecté à l'INTERNET afin de permettre aux utilisateurs d'INTERNET d'accéder

aux informations de l'entreprise (exemple : consultation du catalogue de produits) et aux utilisateurs de

l'intranet d'accéder au réseau INTERNET.

Un système de protection pare-feu et de filtrage des informations (firewall) doit être prévu pour

protéger le réseau intranet des agressions extérieures.

iv. Quels sont les facteurs de réussite d'un intranet?

TDI- Applications Hypermédias FARIH Saïd

2

Nommer un responsable qui sera Monsieur intranet; qui sera Monsieur intranet;

Définir les objectifs, le plan de déploiement, ainsi que les coûts; , le plan de déploiement, ainsi que les coûts;

Définir les applications qui seront implémentées sur l'intranet et obtenir le consensus de la direction qui seront implémentées sur l'intranet et obtenir le consensus de la direction

et des représentants des utilisateurs;

Disposer d'un service informatique compétent pour la mise en œuvre, c'est -à-dire dans les pour la mise en œuvre, c'est-à-dire dans les

domaines suivants:

Réseaux IP;

Conception de sites web ergonomiques avec accès aux données informatiques;

Gestion de la sécurité;

Support aux utilisateurs.

Utiliser au maximum les standards du marché; du marché;

Faire simple au départ (éviter l'info-indigestion) et soigner l'aspect ergonomique pour les utilisateurs; (éviter l'info-indigestion) et soigner l'aspect ergonomique pour les utilisateurs;

Eduquer les utilisateurs et mettre en œuvre un service d'aide; et mettre en œuvre un service d'aide;

Evaluer les résultats atteints par rapport aux objectifs. atteints par rapport aux objectifs.

Schéma général :

atteints par rapport aux objectifs. Schéma général : v. Composants hardware et software Différents composants

v. Composants hardware et software

Différents composants hardware et logiciels sont requis:

Des stations de travail (PC ordinateur personnel) pour les utilisateurs.Différents composants hardware et logiciels sont requis: Un ou des serveur(s) physique(s) contenant les serveurs

Un ou des serveur(s) physique(s) contenant les serveurs logiques suivants:de travail (PC ordinateur personnel) pour les utilisateurs.  Un serveur logique où résideront les informations

Un serveur logique où résideront les informations de l'entreprise (agenda, base de données

clients, fournisseurs, produits, commandes, etc.);

Un serveur logique contenant les applications qui traitent les données (méthode de calcul

de la facturation, gestion des stocks, etc.);

Un serveur logique où résidera le contenu des écrans (pages) qui seront présentés aux

utilisateurs (texte, graphiques, tableaux à remplir, etc.).

Un réseau local (transparent aux utilisateurs) composé d'une partie physique et d'une partie logicielle:

La partie physique est généralement composée de:d'une partie physique et d'une partie logicielle:  Cartes Ethernet avec le pilote logiciel associé dans

Cartes Ethernet avec le pilote logiciel associé dans chaque PC utilisateur ou serveur;

Câbles qui relient physiquement les stations de travail entre elles et le ou les serveur(s), des

armoires de concentration de câbles et de gestion du câblage (HUB, Patch Panel). Le

câblage est généralement pris en charge par des installateurs spécialisés;

La partie logicielle (fournie par les constructeurs informatiques) réside dans chaque PC et serveur.pris en charge par des installateurs spécialisés; Elle permet, de façon transparente aux utilisateurs, la

Elle permet, de façon transparente aux utilisateurs, la circulation de l'information entre les PC et le

serveur. D'autres logiciels permettent d'assurer l'administration:

Du réseau (relevé automatique des composants du réseau à un moment donné, mesure des

performances, etc.);

Des utilisateurs (qui peut accéder à quoi, qui est admis sur le réseau, etc.).

TDI- Applications Hypermédias FARIH Saïd

3

Des logiciels de services: chaque service (courrier électronique, partage d'agenda, tableauTDI- Applications Hypermédias FARIH Saïd 3 d'information, etc.) demande un logiciel approprié. Des logiciels

d'information, etc.) demande un logiciel approprié.

Des logiciels applicatifs spécifiques: les applications particulières (facturation, gestion de stock, etc.)d'information, etc.) demande un logiciel approprié. demandent soit des développements propres soit

demandent soit des développements propres soit l'utilisation de logiciels prêts à l'emploi.

Des logiciels dans les stations utilisateurs (PC): les browsers (navigateur) qui permettent d'accédersoit l'utilisation de logiciels prêts à l'emploi. aux informations et services sont universels et disponibles

aux informations et services sont universels et disponibles gratuitement. Ils sont souvent complétés

de petits logiciels (ou applet, transparents à l'utilisateur) qui effectuent des traitements

informatiques au niveau du PC utilisateur (par exemple la validation du format de l'information

rentrée par l'utilisateur). Cette décentralisation du traitement au niveau du PC diminue le trafic sur

le réseau et améliore la performance d'un point de vue utilisateur.

Le personnelaméliore la performance d'un point de vue utilisateur. Du personnel compétent est requis pour:  Installer,

Du personnel compétent est requis pour:

Installer, gérer et maintenir les logiciels de l'intranet;

Assurer la gestion de l'intranet (disponibilité des services, performance, matériel, pannes,

coût);

Gérer les utilisateurs (qui peut accéder et à quoi);

Former et aider les utilisateurs.

vi. Mise en place de l'intranet

Un intranet doit être conçu selon les besoins de l'entreprise ou de l'organisation (au niveau des

services à mettre en place). Ainsi, l'intranet ne doit pas être conçu par les seuls informaticiens de

l'entreprise mais selon un projet prenant en compte les besoins de toutes les parties prenant de

l'entreprise.

Pour ce qui est de la mise en place matérielle, il suffit de mettre en place un serveur web (par

exemple une machine fonctionnant sous Linux avec le serveur web Apache et le serveur de bases de

données MySQL ou bien un serveur sous Windows avec le serveur web Microsoft INTERNET Information

Server). Il suffit ensuite de configurer un nom de domaine pour le serveur (par exemple

intranet.une_entreprise.com. Il est à noter l'existence de CMS (systèmes de gestion de contenu) permettant

de gérer la publication des pages par une équipe de rédacteurs.

b. Extranet

On souhaite permettre à des utilisateurs autorisés figurant au nombre des clients, distributeurs,

fournisseurs et autres partenaires, d'accéder au réseau Intranet. Par exemple, une société souhaite partager

des informations professionnelles avec ses distributeurs et ses clients en leur accordant un droit d'accès

limité à son réseau Intranet. Internet permet d'étendre l'accès au réseau Intranet à des utilisateurs

autorisés. Ce type de réseau Intranet, partiellement accessible aux seuls utilisateurs autorisés, par le biais

d'Internet est appelé réseau extranet. Il est plus facile et plus économique d'installer un réseau extranet

par le biais d'Internet que d'installer une liaison de communication dédiée entre deux entreprises. Toutefois,

un réseau extranet est moins sécurisé qu'un réseau Intranet privé, car des utilisateurs non autorisés

peuvent y accéder.

Un extranet est une extension du système d'information de l'entreprise à des partenaires situés au-

delà du réseau. L'accès à l'extranet doit être sécurisé dans la mesure où cela offre un accès au système

d'information à des personnes situées en dehors de l'entreprise.

Il peut s'agir soit d'une authentification simple (authentification par nom d'utilisateur et mot de passe)

ou d'une authentification forte (authentification à l'aide d'un certificat). Il est conseillé d'utiliser HTTPS pour

toutes les pages web consultées depuis l'extérieur afin de sécuriser le transport des requêtes et des

réponses HTTP et d'éviter notamment la circulation du mot de passe en clair sur le réseau.

Un extranet n'est donc ni un intranet, ni un site INTERNET. Il s'agit d'un système supplémentaire

offrant par exemple aux clients d'une entreprise, à ses partenaires ou à des filiales, un accès privilégié à

certaines ressources informatiques de l'entreprise par l'intermédiaire d'une interface Web.

c. Internet

i. Qu'est-ce qu'un site web ?

TDI- Applications Hypermédias FARIH Saïd

4

Un site web (aussi appelé site internet ou page perso dans le cas d'un site internet à but personnel)

est un ensemble de fichiers HTML stockés sur un ordinateur connecté en permanence à internet et

hébergeant les pages web (serveur web).

Un site web est habituellement architecturé autour d'une page centrale, appelée «page d'accueil» et

proposant des liens vers un ensemble d'autres pages hébergées sur le même serveur, et parfois des liens

dits «externes», c'est-à-dire de pages hébergées par un autre serveur.

Une URL se présente sous la forme suivante :

http://www.monsite.com/www/mapage1.html

Etudions plus en détail cette adresse :

http:// indique qu'on souhaite naviguer sur le web au moyen du protocole HTTP, le protocole indique qu'on souhaite naviguer sur le web au moyen du protocole HTTP, le protocole

utilisé par défaut pour naviguer entre les pages web. Il existe d'autres protocoles, correspondant à

d'autres usages de l'Internet.

www.monsite.com correspond à l'adresse du serveur qui héberge les pages web . Par convention les correspond à l'adresse du serveur qui héberge les pages web. Par convention les

serveurs web possèdent un nom commençant par www. La seconde partie de cette adresse est

appelée nom de domaine. Un site web peut ainsi être hébergé par plusieurs serveurs, appartenant

tous à un même domaine : www.monsite.com, www2.monsite.com, intranet.monsite.com, etc.

/www/mapage1.html permet d'indiquer la localisation du document sur la machine. Dans le cas html permet d'indiquer la localisation du document sur la machine. Dans le cas

présent il s'agit du fichier mapage1.html situé dans le répertoire www.

ii. Le navigateur web

Le «navigateur » est l'outil de l'internaute, lui permettant de surfer entre les pages web de navigateur» est l'outil de l'internaute, lui permettant de surfer entre les pages web de ses sites

préférés. Il s'agit d'un logiciel possédant une interface graphique composée de boutons de

navigation, d'une barre d'adresse, d'une barre d'état (généralement en bas de fenêtre) et dont la

majeure partie de la surface sert à afficher les pages web.

Il existe une énorme quantité d'informations sur Internet (plusieurs millions ou milliards departie de la surface sert à afficher les pages web . documents), et ces informations sont

documents), et ces informations sont pour la plupart renouvelées quotidiennement. Le moteur de

recherche est un élément indispensable pour s'y retrouver!

iii. Le moteur de recherche

Un moteur de recherche ( Searchbot en anglais) est une machine spécifique (matérielle et logicielle) moteur de recherche (Searchbot en anglais) est une machine spécifique (matérielle et logicielle)

chargée d'indexer des pages web afin de permettre une recherche à l'aide de mots-clés dans un

formulaire de recherche.

iv. Fonctionnement d'un moteur de recherche

Des robots (logiciels), appelés spiders (en français araignées ) doivent parcourir la toile en suivant spiders (en français araignées) doivent parcourir la toile en suivant

récursivement les liens des millions de pages Web et indexent le contenu dans de gigantesques

bases de données afin de permettre leur interrogation.

Aucun moteur de recherche ne peut parcourir la totalité des pages en une journée (ce processusbases de données afin de permettre leur interrogation. prend généralement plusieurs semaines), chaque moteur

prend généralement plusieurs semaines), chaque moteur adopte donc sa propre stratégie, certains

allant même jusqu'à calculer la fréquence de mise à jour des sites.

3. Applications pour Internet

a. Couches réseau

COUCHE

ROLE

7.

APPLICATION

Fourniture de services réseaux aux applications

 

Formatage, conversions, (+ compression et cryptage) des

6.

PRESENTATION

données

 

établissement, contrôle, terminaison d'une connexion entre

5.

SESSION

deux systèmes

 

-Découpage du message en paquets (et inversement :

réassemblage des paquets en message dans le bon

ordre)

4.

TRANSPORT

-Gestion de plusieurs connexions sur la même voie de

 

communication (multiplexage) ou éclatement d'une

connexion sur plusieurs voies de communication

 

Acheminement au mieux des paquets de données

3.

RESEAU

(routage, contrôle des flux)

2.

LIAISON

Structuration des données en trames et

transmission

 

sans erreurs

1.

PHYSIQUE

Envoi et réception des séquences de bits

b. La couche Application (niveau 7)

TDI- Applications Hypermédias FARIH Saïd

(niveau 7) TDI- Applications Hypermédias FARIH Saïd 5 Toutes les applications réseau, messageries, transfert de

5

Toutes les applications réseau, messageries, transfert de fichier, etc. Les équipements de routage

n'implémentent que les trois premières couches. Seuls les ordinatrices sources et destination implémentent

les 7 couches. L'utilisateur ne se sert que de cette couche-là.

i. DHCP (Dynamic Host Configuration Protocol)

Le protocole DHCP permet de configurer automatiquement TCP/IP sur des ordinateurs clients DHCP.

Cela facilite grandement la gestion d'un parc de machines TCP/IP car il est alors inutile de saisir

manuellement les informations suivantes qui sont fournies par le serveur DHCP :

Adresse IP ; IP ;

Masque de sous-réseau ;qui sont fournies par le serveur DHCP : Adresse IP ; Passerelle ; Serveur DNS ;

Passerelle ;le serveur DHCP : Adresse IP ; Masque de sous-réseau ; Serveur DNS ; Serveur de

Serveur DNS ; DNS ;

Serveur de nom NETBIOS ( WINS par exemple) ; NETBIOS (WINS par exemple) ;

Nom de domaine DNS , type de nœud NETBIOS , ID d'étendue NETBIOS , etc. DNS, type de nœud NETBIOS, ID d'étendue NETBIOS, etc.

TDI- Applications Hypermédias FARIH Saïd

6

TDI- Applications Hypermédias FARIH Saïd 6 DHCP est à la fois un service et un protocole

DHCP est à la fois un service et un protocole qui permettent d’allouer automatiquement des adresses

IP et d’autres paramètres de configuration aux ordinateurs d’un réseau. DHCP attribue ces adresses de

manière dynamique depuis un groupe d’adresses.

Les avantages de DHCP sont les suivants :

On n’a pas à configurer manuellement l’adresse IP de chaque clie nt. ! On n’a plus à conserver une IP de chaque client. ! On n’a plus à conserver une

trace de toutes les adresses IP assignées.

On peut de manière automatique attribuer une nouvelle adresse IP à un client qu’on déplace d’un IP à un client qu’on déplace d’un

sous-réseau à un autre.

On peut libérer l’adresse IP d’un ordinateur hors connexi on pour un certain temps, et réattribuer IP d’un ordinateur hors connexion pour un certain temps, et réattribuer

l’adresse à un autre ordinateur.

On réduit les risques de duplication d’adresses grâce au suivi automatique des attributions partemps, et réattribuer l’adresse à un autre ordinateur. DHCP . ii. WINS (Windows Internetworks Name Service)

DHCP.

ii. WINS (Windows Internetworks Name Service)

Un serveur WINS fournit les services d'enregistrement, de renouvellement, de libération et de

résolution de noms aux ordinateurs clients configurés pour utiliser ces services. Les noms NETBIOS sont

ainsi résolus en adresses IP.

iii. Le WEB

Le WEB, c'est l'application qui a « vendu » le réseau INTERNET qui jusque-là n'était prisé que de

quelques initiés. Pourtant ce développement récent, est dû au CERN, Centre Européen de la Recherche

Nucléaire. Le principe est de transmettre par le réseau des documents hypertextes, contenant des images,

des liens, etc un peu comme le help de Windows ou hypercard de Apple.

Une normalisation d'adressage des différents services de TCP/IP a été créée de manière à banaliser

l'accès aux services au travers d'un browser Parmi ceux-ci on peut citer INTERNET Explorer, Opera

,

c. Les protocoles d'Internet

i. Le protocole Telnet

Telnet (Telecommunications Network) permet à une machine client se connecter sur un serveur, et

ceux, quelles que soient leurs localisations dans le monde, du moment que ces deux machines sont

raccordées à l’Internet.

Une machine disposant d’un serveur Telnet permettra donc à n’importe quelle machine de par le

réseau de s’y connecter, au moyen d’un client Telnet. Les clients Telnet existent sur la quasi-totalité des

plates-formes (Windows, Unix, MacOS, BeOS…).

ii. Le FTP (File Transfert Protocol)

Le protocole de transfert de fichier utilise deux connexions TCP : l'une pour les ordres (le port 21) et

l'autre pour les données (20). La connexion pour les données est créée à chaque fois qu'un fichier est

transféré mais aussi pour lister un répertoire. Cette connexion de données s'établit du serveur vers le

TDI- Applications Hypermédias FARIH Saïd

client en sens inverse de la première connexion de contrôle. Une simple émulation de terminal suffit à

donner les ordres car ceux-ci sont composés de caractères courants et non de chaînes de bits.

FTP est utile dès qu'il s'agit de transférer des données entre deux machines A et B. Comme en

Telnet, la machine A doit être équipée d'un client FTP, alors que la machine B est-elle équipée d'un

serveur FTP.

FTP utilise un langage de commande définit par des mots clefs de 4 caractères. Ce sont les

commandes FTP internes. Mais il dispose aussi de commandes utilisateur. Les commandes internes servent

à établir et à maintenir la connexion FTP, alors que les commandes utilisateur permettent d’effectuer des

opérations à l’aide de cette connexion.

Lorsque A envoie une demande de connexion à B, le serveur FTP renvoie alors le message de login

définit par l’administrateur de B. L’utilisateur de A envoie alors la commande USER login attendue par B,

où login est le nom de l’utilisateur. B attend alors la commande PASS password, où password est le mot

de passe correspondant à l’utilisateur login. De nombreux serveurs autorisent les connexions dites

anonymes, c’est à dire que n’importe quel utilisateur peut s’y connecter pour prendre des fichiers, et sur

certains serveurs déposer des fichiers. Dans une phase de connexion anonyme, on envoie généralement

FTP ou anonymous comme nom de login, et son adresse email en mot de passe. Une fois l’identification

effectuée, le client envoie la commande SYST, de manière à connaître le système distant

iii. Le protocole SMTP

7

Le protocole SMTP (Simple Mail Transfert Protocol) est certainement un des protocoles le plus utilisé

sur l’Internet. Il est totalement transparent à l’utilisateur, ce qui le rend convivial, et dispose de clients et

de serveurs sur la majorité des architectures. Son but est de permettre le transfert des courriers

électroniques. Il est similaire au protocole FTP, de par son langage de commande. Il est généralement

implémenté sur le port TCP/25. Sur système Unix, sendmail est généralement utilisé, et se comporte

comme client et comme serveur.

d. Architecture du web

i. Format du lien HTML

Syntaxe :

Service : // adresse INTERNET FQDN / nom du fichier ou de l'objet

Exemples :

ftp-developpez.com/cyril-gruau/ConceptionBD.pdf Donne accès en anonyme au serveur ftp dans le

répertoire cyril-gruau pour le fichier : ConceptionBD.pdf

news.imt-mrs.fr/active donne l’accès à liste des groupes - Les news

http ://www.microsoft.com/support Accès à la page support de Microsoft

http :///c/mapage.html idem sur le disque C local

HTTP est Hyper Text Transport Protocol, HTML le langage des pages Hyper Text Markup Language.

Pour http, le langage des documents s'appelle le HTML, il existe un certain nombre d'outils pour créer ces

pages (Adobe PageMil, Dreamweaver, Microsoft FrontPage, etc

bon spécialiste peut écrire directement en HTML. Bref ce qui vend le mieux le réseau est peut être une

des applications les plus triviales.

Chaque page est transmise par une session TCP port 80 qui est fermée à la fin de la réception. Le

clic sur une information hypertexte est purement local et va directement au serveur concerné, on ne

repasse pas par le même serveur.

Ce sont des fichiers texte lisibles, et un

).

ii.

PROXY

L'information trouvée est mise en cache localement. De plus en plus, on utilise des serveurs

intermédiaires pour faire des caches au niveau d'un très grand nombre d'utilisateurs. En cliquant sur une

information située aux Japon, on a de bonne chance de l'avoir dans un cache régional ou national. Ces

caches sont activés de manière transparente (fonction HTTPPROXY). L'adresse URL est passée en texte au

TDI- Applications Hypermédias FARIH Saïd

serveur PROXY qui résoudra la requête. On atteint parfois 25% de succès. Une fois sur 4 la page est déjà

dans le cache.

iii. Les suites de HTTP/HTML

8

Le business étant rentré dans les protocoles INTERNET, les choses avancent très vite mais de façon

plus désordonné. Auparavant, beaucoup de développements étaient dus à des organismes de recherche

sans soucis de rentabilité ou de compétition.

Le WEB permet aussi de passer des données à un serveur qui va construire une page HTML

constituant la réponse (cgi-bin par exemple). Ceci est un peu limité car on ne peut pas faire exécuter un

programme au client. Plusieurs développements ont eu lieu ces derniers temps.

SUN, société qui vend et fabrique des stations de travail sous Unix a créé un nouveau langage et

concept de réseau : le JAVA. Ce langage est de type C++ et le programme est envoyé au client qui

l'exécute ensuite. Il existe des compilateurs qui vont créer un pseudo code JAVA qui sera interprété dans

la machine distante.

MICROSOFT met en avant ActiveX qui est du même style mais très dépendant de Windows et de la

plateforme Intel. D'où problème pour faire tourner l'application sur un Mac ou une station Unix.

NETSCAPE fournit aussi JavaScript qui n'a rien avoir avec Java et permet de développer dans un

langage interprété assez simple.

La plupart des browsers sont plus ou moins compatibles avec ces langages.

II. Configuration TCP/IP et DNS

1. Les Serveurs de nom (DNS : Domain Name System)

a. Présentation

Le protocole DNS fournit un service de résolution de nom et d'adresse aux applications clientes. Les

serveurs DNS permettent aux utilisateurs d'employer des noms d'hôtes (par ex: myhost.com) pour accéder

aux ressources du réseau. Le serveur DNS fournit l'adresse IP correspondant au nom d'hôte, soit

directement, soit en consultant un serveur DNS situé plus haut dans la hiérarchie des noms de domaine.

L'adresse IP numérique étant difficile à manipuler, une représentation hiérarchique de nom de

machines a été mise en place pour faciliter l'utilisation du réseau. Cependant dans les couches basses du

réseau, seule la valeur numérique est utilisée. Le DNS est non pas une couche du réseau, mais une

application. Les noms sont composés par une suite de caractères alphanumériques encadrés par des

points. Par exemple romarin.univ-aix.fr correspond à l'adresse 193.50.125.2 et le mécanisme qui associe le

nom au numéro s'appelle la résolution de noms. Cette représentation est hiérarchique.

Les serveurs qui traitent la conversion nom = adresse ou adresse = nom sont des serveurs de nom

ou DNS.

Les domaines de la racine sont des domaines génériques ou des domaines géographiques.

com : Organisations commerciales (hp.com par exemple)

edu : Institutions éducatives (américaines)

gov : Organisations gouvernementales US

int : Organisations internationales

mil : Militaires Us

net : Réseau

org : Organisation à but non lucratif

bf : Burkina Faso

de : Allemagne

ma : Maroc

fr : France

b. DNS primaire / DNS secondaire

TDI- Applications Hypermédias FARIH Saïd

9

Lorsqu'on veut se connecter à internet, le service DNS permet de taper des noms du type

www.commentcamarche.net, plutôt que d'écrire l'adresse IP des machines (du genre 185.34.22.34).

Ces derniers étant assez difficile à retenir et que les adresses www plus facile taper pour le commun

des mortels, il a fallu créer un système qui fasse la "résolution" (traduction) entre une IP et un nom.

Pour réaliser cette traduction, des serveurs spéciaux, appelés serveurs DNS, sont utilisés. Chaque

ordinateur connecté à internet est configuré avec une liste de serveurs à contacter (cette liste est

généralement automatiquement renseignée par la fournisseur d'accès).

On peut simplifier l'image en disant que le serveur DNS est un gros annuaire, comme celui du

téléphone, qui permet à partir d'un nom de trouver son numéro de téléphone.

Le serveur DNS est donc un annuaire d'adresse d'ordinateurs avec la correspondance des "url"

(adresse internet www).

Puisqu'on ne peut pas garantir que la première machine (le DNS primaire) va forcément fonctionner,

il existe une seconde machine, appelée DNS secondaire, permettant de répondre si jamais la première ne

le fait pas ! Tout domaine a l'obligation d'avoir deux DNS avec adresse IP fixe.

c. Le protocole TCP/IP (Transmission Control Protocol):

Les données sont toujours adressées et transmises de la même façon: Peu importe si on appellec. Le protocole TCP/IP (Transmission Control Protocol): des pages WWW, si on envoie du courrier électronique,

des pages WWW, si on envoie du courrier électronique, téléchargez des fichiers avec FTP ou

travaillez grâce à Telnet sur un ordinateur éloigné

Les données sont mises en petits paquets pour la transmission sur le réseau. Chaque paquetou travaillez grâce à Telnet sur un ordinateur éloigné contient la mention de l'adresse à laquelle

contient la mention de l'adresse à laquelle il doit être envoyé et de son numéro dans l'envoi

Le TCP s'assure que les paquets de données arrivent vraiment chez le destinataire et dans le bonil doit être envoyé et de son numéro dans l'envoi ordre: Le TCP utilise des numéros

ordre: Le TCP utilise des numéros de séquence pour les différents paquets d'un envoi.

Ce n'est que lorsque tous les paquets d'un envoi sont arrivés complets chez leur destinataire quede séquence pour les différents paquets d'un envoi. la transmission est considérée comme étant terminée .

la transmission est considérée comme étant terminée.

d. Les adresses IP

Lorsqu’on s’adresse à une machine de l’Internet, il est souvent plus pratique de mémoriser un nom

symbolique plutôt que son adresse IP. Toutefois, on peut utiliser indifféremment l’une ou l’autre des deux

formes d’adresse. Ceci est possible grâce au DNS (Domain Name Service), qui est chargé de convertir si

besoin les adresses IP en noms symboliques ou les noms symboliques en adresses IP.

A l’heure actuelle, nous utilisons le protocole IP version 4, qui permet d’adresser 2 32 machines

(codage des adresses sur 4 octets), mais vu la forte croissance que connaît le réseau Internet, il est

maintenant nécessaire d’étendre cet espace d’adressage. C’est le but de la prochaine version de l’IP, IP

version 6, qui permettra un codage des adresses IP sur 128 bits (16 octets), et donnera ainsi la possibilité

d’adresser 2 128 machines.

Lorsqu’on recherche l’adresse IP ou le nom associé à une adresse IP d’une machine du réseau, on

émet une requête au serveur DNS, dont l’adresse a été fourni par l’administrateur réseau. C’est ensuite lui

qui s’occupera de demander à qui de droit de résoudre l’adresse ou le nom fournit, puis retournera

l’information. Chaque serveur DNS gère une plage d’adresses IP. C’est ce que l’on appelle une zone, et le

D.N.S qui contrôle cette zone est appelée primaire de la zone.

Prenons par exemple le domaine nommé « internet.fr », et donnons-lui la classe C 127.0.0.0 et le

netmask de 255.255.255.0. Cet organisme dispose donc de 256 adresses IP, dont 2 réservées (0 et255).

C’est lui qui va décider de l’organisation de cette plage d’adresse. Dès lors, une machine est donc installée

et désignée comme serveur DNS. C’est sur cette machine que toutes les informations adresses / noms

symboliques seront entrées. Donc, dans l’exemple, on décide d’installer trois machines, « a », « b » et « c

», plus un serveur DNS qu’on appellera « ns1 ».

Résumé des classes d'adresses

TDI- Applications Hypermédias FARIH Saïd

10

PlagePlage NombreNombre dede NombreNombre d’hôtesd’hôtes d’ID d’ID de de réseau réseau réseauxréseaux
PlagePlage
NombreNombre dede
NombreNombre d’hôtesd’hôtes
d’ID d’ID de de réseau réseau
réseauxréseaux
parpar réseauréseau
(premier(premier octet)octet)
ClasseClasse AA
126
16 777 214
1 – 126
ClasseClasse BB
16 384
65 534
128
– 191
ClasseClasse CC
2 097 152
254
192
– 223

III. Le langage HTML

1. Bref historique de HTML

TDI- Applications Hypermédias FARIH Saïd

11

Le langage HTML (HyperText Markup Language) a été développé initialement par Tim

Berners-Lee, alors au CERN. Il a rapidement connu un vif succès grâce au navigateur Mosaic,

développé au NCSA. Pendant les années 1990, il a poursuivi sa croissance en profitant de celle, explosive,

du Web, et s’est enrichi de nombreuses manières. Le Web repose sur le respect, par les concepteurs de

pages et les éditeurs de logiciels, de conventions identiques pour HTML, ce qui a motivé le travail commun

sur les spécifications de HTML

Il peut être créé et traité par de nombreux outils, depuis des éditeurs de texte simples jusqu’à des

outils dédiés sophistiqués WYSIWYG (What You See Is What You Get ou tel écran, tel écrit). HTML

emploie des balises (comme <H1 > et </H1>) pour structurer un texte en en-têtes, paragraphes, listes, liens

hypertextes, etc.

2. Amélioration de HTML

La spécification HTML 2.0 (novembre 1995) a vu le jour. HTML 2.0 (novembre 1995) a vu le jour.

Le groupe de travail HTML du W3C ( World Wide Web Consortium ) diffuse en janvier 1997 la HTML du W3C (World Wide Web Consortium) diffuse en janvier 1997 la

spécification HTML 3.2, qui apporte plusieurs améliorations et modifications.

Viendra ensuite la spécification HTML 4, un progrès immense par rapport aux versions antérieures. HTML 4, un progrès immense par rapport aux versions antérieures.

Ses principales innovations concernent l’internationalisation, l’accessibilité, les tableaux, les

documents composés, les feuilles de style, les scripts et l’impression.

Internationalisation : les documents peuvent être écrits en toutes les langues et diffusés partout dans

le monde. C’est la norme mondiale la plus complète, qui tient compte des problèmes concernant la

représentation des caractères internationaux, le sens des écritures, la ponctuation et autres particularités

des langues mondiales. Cela permet une indexation des documents par les moteurs de recherche, une

typographie de qualité, la synthèse de la parole à partir du texte, la césure, etc.

Accessibilité : au fur et à mesure de la croissance de la communauté du Web et de la diversification

des capacités et aptitudes de ses membres, il devient crucial que les technologies employées soient

appropriées à leurs besoins spécifiques. Le langage HTML a été conçu pour rendre les pages Web plus

accessibles à ceux qui présentent des déficiences physiques.

Tableaux : Les auteurs disposent maintenant d’un plus grand contrôle sur leur structure et leur

disposition (par exemple, les regroupements de colonnes). Ils peuvent spécifier la largeur des colonnes et

permettre aux agents utilisateurs d’afficher les données de table progressivement, au fur et à mesure du

chargement, plutôt que d’attendre le chargement entier du tableau.

Documents composés : L’élément OBJECT (de même que ses ancêtres, les éléments plus spécifiques

IMG et APPLET) fournit le moyen d’inclure des images, des séquences vidéo, de l’audio, des

mathématiques, des applications spécialisées et d’autres objets dans un document. Il permet aussi aux

auteurs de spécifier une hiérarchie de restitutions de remplacement aux agents utilisateurs qui ne gèrent

pas certaines restitutions particulières.

Feuilles de style : les feuilles de style simplifient le balisage HTML et soulagent grandement HTML

des responsabilités de la présentation. Elles donnent aux auteurs comme aux utilisateurs le contrôle de la

présentation des documents (informations sur les polices de caractères, alignement, couleurs, etc.).

Scripts : les scripts permettent aux auteurs de concevoir des pages Web dynamiques (par exemple,

des « formulaires intelligents » qui réagissent au cours de leur remplissage par l’utilisateur) et d’employer

HTML comme support d’applications en réseau. Les mécanismes fournis pour associer HTML et scripts

sont indépendants du langage de script.

TDI- Applications Hypermédias FARIH Saïd

Impression : les auteurs voudront parfois aider l’utilisateur dans l’impression d’autres documents, en

sus du document courant. Lorsque des documents font partie d’un ensemble, on peut décrire leurs

relations en utilisant l’élément HTML LINK Toute page HTML est composée, après la ligne de déclaration

du DTD, d’un élément racine HTML qui comprend deux éléments enfants :

L’en-tête ( HEAD ) comprend des données non-affichées par le navigateur, servant à sa configuration -tête (HEAD) comprend des données non-affichées par le navigateur, servant à sa configuration

12

ou présentes au bénéfice de l’auteur, du lecteur ou d’autres intervenants.

Le corps (BODY ) contient les données qui seront affichées, encadrées par des balises spécifiant BODY) contient les données qui seront affichées, encadrées par des balises spécifiant

leur structure.

Une page HTML se présente donc fondamentalement comme suit :

<!DOCTYPE

<HTML ><HEAD > Contenu </HEAD ><BODY > Contenu </BODY ></HTML >

>

3. Écrire du code html.

On a besoin:

D'un éditeur de texte tout simple comme par exemple le Bloc-notes ou Notepad de Windows ou> > 3. Écrire du code html . On a besoin: tout autre équivalent dans la

tout autre équivalent dans la système d'exploitation.

D'un browser soit Netscape Navigator , soit Microsoft Explorer (gratuit également) à Netscape Navigator, soit Microsoft Explorer (gratuit également) à

télécharger (http://www.microsoft.com) ou sur d'autres sites web.

On n'a pas besoin:

D'être connecté pour écrire, voir et peaufiner les pages Html . Html.

D'avoir le dernier éditeur Html sans doute performant mais coûteux qu'il sera toujours temps Html sans doute performant mais coûteux qu'il sera toujours temps

d'adopter lorsqu'on sera entraîné suffisamment sur les premières pages. on pense à Dreamweaver

d'Adobe, Frontpage de Microsoft, Hotdog, Hotmetal, WebExpert ou Netscape

Editor ainsi qu'aux dizaines d'autres éditeurs qu'on rencontrera sur le Web.

4. Qu'est-ce que le HTML ?

a. Définition

Le HTML (HyperText Markup Language) est un format de présentation de données permettant

de créer des pages web pouvant être lues dans des navigateurs.

C'est un langage de description de données, et non un langage de programmation. Il est figé c'est-à-

dire qu'une fois le document chargé dans le navigateur, il ne répond à aucune action de l'utilisateur sur le

contenu de la page. Ce langage est pourvu d'un système de balisage qui va permettre de structurer notre

document.

Le langage Html étant un ensemble de balises et d'attributs, il nous paraît utile sinon indispensable

de les passer en revue et surtout de les visionner au moins une fois car :

Si les éditeurs Html on facilitera grandement la tâche, ils ne sont pas toujours parfaits surtout lors Html on facilitera grandement la tâche, ils ne sont pas toujours parfaits surtout lors

des modifications, annulations ou suppressions en cours de travail. Il on faudra bien alors on

plonger dans le code source pour corriger les dysfonctionnements.

Les codes source de on pages préférées sont disponibles (et sans copyright). Il est alors possibledans le code source pour corriger les dysfonctionnements. de s'en inspirer pour reprendre le procédé sans

de s'en inspirer pour reprendre le procédé sans avoir à réinventer le monde.

Ces mêmes éditeurs Html proposeront des termes comme" En-tête, Heading, Cell spacing, Html proposeront des termes comme" En-tête, Heading, Cell spacing,

Numered List

"

qui sont propres au langage Html.

On aura besoin d'une connaissance pointue du Html pour inclure les codes du Javascript ou Html pour inclure les codes du Javascript ou

du VBscript dans vos pages.

b. Qu'est-ce qu'une balise HTML ?

TDI- Applications Hypermédias FARIH Saïd

13

Une balise HTML est un élément que l'on va ajouter au texte de départ pour dire au navigateur de

quelle manière l'afficher. Elle n'est pas affichée telle quelle dans le navigateur, elle est interprétée par

celui-ci. Elle est toujours délimitée par les signes < et >.

Une balise peut en plus comporter de zéro à plusieurs attributs. Les attributs sont des informations

complémentaires qui la caractérisent. Ils se présentent sous la forme nomattribut="valeur".

Attention à ne pas confondre un attribut HTML et une propriété CSS ! <html> Exemple de balise et son attribut <html lang="fr">

c. Types de balises

Chaque balise ouverte doit être fermée, cependant il existe des exceptions. On distingue deux types

de balises :

i. Les balises simples

Ce sont des balises qui sont dites "vides", c'est-à-dire qu'elles ne vont contenir aucune autre balise

HTML. Ces balises n'ont pas besoin d'être fermées.

Exemple de balise simple

<img src="adresse/de/l/image">

ii. Les balises doubles

Les balises doubles sont dites ouvrantes/fermantes, c'est-à-dire qu'elles nécessitent deux balises, une

ouvrante et une fermante dans lesquelles on va pouvoir mettre d'autres balises ou du texte.

La balise fermante est identique à la balise ouvrante, à la différence qu'elle contient un "/" pour

indiquer à quel endroit on la ferme.

Exemple de balise double

<p>Ici du texte ou tout autre balise.</p>

d. Imbrication des balises

Lorsque l'on cumule l'écriture de plusieurs balises ouvrantes (forcément inévitable), il est impératif de

respecter la hiérarchie des balises, c'est-à-dire que la première ouverte sera la dernière à être fermée.

Le chevauchement des balises est une grave erreur.

Exemple de balises imbriquées

<b><u>Ici les balises sont correctement imbriquées.</u></b>

Exemple de balises chevauchées

<b><u>Ici les balises ne sont</b> pas correctement imbriquées, c'est une erreur. </u>

On notera aussi que les balises ne sont pas "case sensitive". Il est donc équivalent d'écrire: <HTML>,

<html>, <Html>, etc.

IV. La structure du langage HTML

1.DTD

La définition de type de document, ou DTD (Document Type Definition), définit la structure

d’un document, les éléments et attributs qui y sont autorisés, et le type de contenu ou d’attribut permis.

Un document bien formé répond simplement aux exigences de la spécification, tandis qu’un document

valide se conforme strictement aux règles établies par la DTD à laquelle il fait référence.

HTML 4.01 existe en trois « parfums ». On spécifie la variante à employer en insérant une ligne au

début du document. Chaque variante dispose de sa propre définition de type de document, ou DTD

(Document Type Definition), qui spécifie les règles d’emploi de HTML de façon claire et succincte :

TDI- Applications Hypermédias FARIH Saïd Le DTD HTML 4.01 strict comprend tous les éléments et

TDI- Applications Hypermédias FARIH Saïd

Le DTD HTML 4.01 strict comprend tous les éléments et attributs qui ne sont pas déconseillés ou

qui n’apparaissent pas dans les documents avec jeu d’encadrement. Pour les documents qui

utilisent ce DTD, prendre la déclaration de type de document suivante :

<!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd" >

14

Le DTD HTML 4.01 transitoire inclut la totalité du DTD strict auquel se rajoutent les éléments DTD HTML 4.01 transitoire inclut la totalité du DTD strict auquel se rajoutent les éléments et

attributs déconseillés (la plupart d’entre eux concernant la présentation visuelle). Pour les

documents qui utilisent ce DTD, prendre la déclaration de type de document suivante :

<!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01

"http://www.w3.org/TR/html4/loose.dtd">

Transitional//EN"

Le DTD HTML 4.01 de jeu d’encadrement inclut la totalité du DTD transitoire complété des cadres DTD HTML 4.01 de jeu d’encadrement inclut la totalité du DTD transitoire complété des cadres

(frames). Pour les documents qui utilisent ce DTD, la déclaration de type de document suivante

est employée :

<!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01

"http://www.w3.org/TR/html4/frameset.dtd" >

2. Le DOCTYPE

Frameset//EN"

À quoi sert ce fameux DOCTYPE ? Est-il vraiment utile ? Oui, il est utile, même très utile.

Il sert d'une part à déclarer quel "langage", "grammaire", ou norme on applique à notre page. Cette

déclaration nous permet de soumettre nos pages au validateur du W3C (World Wide Web

Consortium) qui vérifie que le code HTML ne comporte aucune erreur de syntaxe (balises mal fermées,

utilisation d'attributs inexistants

Definition) choisie. D'autre part, il indique au navigateur de quelle manière interpréter telle balise, telle

propriété CSS. L'absence de cette balise est appelée le mode Quirks, ou non conforme, alors qu'au

contraire, la présence de cette balise est appelée le mode Standard, ou conforme.

Pour se faire une idée de son importance, en mode Quirks, le modèle de boîte Microsoft ne

calcule pas de la même manière la taille d'un bloc que le modèle W3C, lorsque celui-ci a des marges

intérieures (padding), voire même des bordures.

)

en fonction

du

DOCTYPE, donc de la DTD (Document

Type

Et l'URL sur la ligne du DOCTYPE, est-elle vraiment utile, elle ?

La réponse est encore une fois : oui. On peut certes faire valider les pages sur le site du validateur

du W3C sans l'URL, mais son oubli a la fâcheuse tendance à faire passer Internet Explorer en mode

Quirks, ce qui anéantira tous vos efforts de compatibilité entre les différents navigateurs.

3. Élément META

Un composant capital de l’élément HEAD, l’élément META est un moyen de procurer des informations

concernant le site aux moteurs de recherche, à d’autres auteurs Web et à des serveurs Web. On peut y

placer pratiquement n’importe quel type d’information. Cet élément est dépourvu de balise de fermeture. Un

élément META est un élément vide (dépourvu de contenu) dont la syntaxe est la suivante :

<META name=" valeur " content="valeur " >

L’attribut name définit ce que la valeur de content va décrire. La balise de fermeture d’un élément

META est facultative.

Un élément HEAD peut posséder un nombre quelconque d’éléments META. Ceux-ci permettent de

fournir de nombreuses informations utiles concernant la page, comme l’auteur ou la version, ce que on va

faire maintenant.

l’auteur ou la ver sion, ce que on va faire maintenant. Pour insérer le nom de

Pour insérer le nom de l'auteur:

<META name="author" content="la_nom" >

Les éléments META sont en outre particulièrement utiles pour faire reconnaître la page par lesname="author" content="la_nom" > robots de recherche du genre AltaVista ou Google. <META

robots de recherche du genre AltaVista ou Google.

<META NAME="description" CONTENT="description de la page">

TDI- Applications Hypermédias FARIH Saïd

Cette balise indique que le contenu de CONTENT est la description de la page HTML . Ce contenu CONTENT est la description de la page HTML. Ce contenu

15

pourra être affiché par un moteur de recherche comme résultat d’une recherche d’un utilisateur.

<META NAME="keywords" CONTENT="mot-clé1, mot-clé2,

" >

Cette balise indique que le contenu de CONTENT est une série de mots-clés qui définissent plus CONTENT est une série de mots-clés qui définissent plus

finement la page.

Autre élément META fréquent, celui qui indique le nom du générateur du document, généralement META fréquent, celui qui indique le nom du générateur du document, généralement

inséré automatiquement par l'éditeur HTML :

<meta name="generator" content="nom_du_générateur " >

Extrait de la section HEAD de la page d’accueil de MicroApplication

<HEAD > <TITLE >Micro Application - Editeurs de livres d’informatique, de cd-rom et de papiers d’impression. </title> <META NAME="description" CONTENT="Edition de livres d’informatique, de cd- rom et de papiers d’impression. 15 thématiques (bureautique, architecture, linux, Windows, gravure, musique, mp3, culture, décoration, jeux de cartes, photo, programmation, création de sites, impression, utilitaires)."> <META NAME="keywords" CONTENT="micro application, librairies informatique, livres informatique, logiciel architecture, architecture 3D, logiciel décoration, logiciel gravure, papier imprimante, papier photo, impression

papier, téléchargement logiciels, jeux cartes, formation web, cartes visites, achatlivres"> <META NAME="Author" CONTENT="Micro Application" >

<LINK

>

<SCRIPT>

</SCRIPT>

</HEAD >

4. Élément BODY

L’élément BODY renferme l’essentiel : le corps du document. Tout son contenu est visible dans le

navigateur : texte, graphismes, liens hypertextes, etc. La seule façon de masquer une information consiste

la placer dans une balise de commentaire.

Document Html:

Ouvrir l'éditeur de texte et écrire les codes Html suivants:

<HTML><HEAD> <TITLE>Document Html minimum</TITLE> </HEAD><BODY> </BODY></HTML>

Enregistrer le document avec l'extension .html ou .htm. puis ouvrir le navigateur. Et enfin afficher le

document via le menu File/Open file

Il faudra maintenant lui fournir l'information à l'intérieur des balises <BODY></BODY>. Remarquer

que le "TITLE" est présent dans la fenêtre du navigateur.

Pour les éventuelles modifications, il n'est pas nécessaire de rouvrir à chaque fois le navigateur:

Retourner dans l'éditeur de texte (sans fermer le navigateur),

modifier les codes

Html puis

enregistrer le fichier. Ensuite utiliser la commande Actualiser du navigateur.

5. Structure d'un document HTML

a. Le corps du document

Avant de commencer tout développement, il est important de connaître la structure d'une page

HTML. Commençons donc par voir celle-ci avec la structure minimale obligatoire d'une page:

Document HTML de base:

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

HTML

"http://www.w3.org/TR/html4/loose.dtd">

TDI- Applications Hypermédias FARIH Saïd

4.01

Transitional//EN"

16

<html><head> <title>Titre de la page</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <!-- Ici le site --> </body></html>

La première ligne du document s'appelle le DOCTYPE. C'est une balise indispensable pour conserver

la compatibilité du rendu de la page sur les différents navigateurs modernes.

Après le DOCTYPE, vient la balise <html>. Elle encadre l'ensemble des autres balises.

La balise <html> contient deux grandes balises : <head>, qui va contenir tout l'en-tête de la page et

<body> qui va contenir tout le corps du document. C'est dans la balise <body> qu'on va mettre tout le

texte et toutes les images qui apparaîtront lorsqu'un visiteur viendra sur la page.

Remarque

Si on inclut des pages à l'aide d'un langage serveur (PHP, ASP, JSP

),

ayez toujours en tête que le

DOCTYPE, la balise <html> ainsi que les balises <head> et <body> sont uniques dans une page. Si tel n'est pas le cas dans le code source, on aura de mauvaises surprises à l'affichage du site.

b. Les commentaires

Les commentaires permettent de laisser des informations ou des descriptions du code et sont

utilisables à n'importe quel endroit du document. Cependant, ce ne sont pas ces commentaires-là qu'il

faudra utiliser pour les langages JavaScript et CSS qui possèdent leur propre système de

commentaires.

Ces commentaires ne seront pas affichés dans le navigateur mais ils resteront présents dans le code

source, donc il faut à tout prix éviter de mettre des informations confidentielles dedans.

Ils sont délimités par <!-- et --> et peuvent être multilignes. Par souci de compatibilité entre les

navigateurs et de mal interprétation de ceux-ci, il est fortement déconseillé d'écrire deux tirets d'union (ou

plus) consécutifs:

<!-- Voici un premier commentaire sur une ligne. --> <!-- Voici un deuxième commentaire. Celui-ci est multilignes. --> <!------------------ Cette méthode est déconseillée ! ----------------->

c. Les arrière-plans

Le langage Html permet d'agrémenter la présentation du document d'un arrière-plan [background]

coloré ou composé d'une image. Ce qui apporte un élément "artistique" à la page.

La balise à utiliser ne pose pas de problème :

Couleur d'arrière-plan <BODY BGCOLOR="#$$$$$$"> <BODY BGCOLOR="#000088">

<H1>Bonjour</H1>

</BODY>

La lisibilité n'est pas parfaite. Heureusement, des balises sont prévues pour modifier les couleurs

utilisées par défaut par le browser pour le texte et les liens.

Couleur de texte <BODY TEXT="#$$$$$$"> Couleur de lien <BODY LINK="#$$$$$$"> Lien visité <BODY VLINK="#$$$$$$"> Lien actif <BODY ALINK="#$$$$$$">

Exemple

TDI- Applications Hypermédias FARIH Saïd

17

<BODY BGCOLOR="#000088" TEXT="#FFFF00">

<H1>Bonjour</H1>

</BODY>

On peut aussi prévoir un fond en image. Cette image (petite de préférence) est affichée en mosaïque

par le browser. Attention aux raccords comme lorsqu'on pose du papier peint.

Texture d'arrière-plan <BODY BACKGROUND="Adresse">

Ce qui peut nous donner :

<BODY BACKGROUND="PAPER.gif">

<H1>Bonjour</H1>

</BODY>

V. Les composants du Texte

1. Formatage du texte

Tout document d'une certaine consistance se doit de présenter, par exemple dans la table des

matières, les différents niveaux de son exposé. Html a disposé dès son origine d'outils spécialement

conçus à cet effet. Tout document Html contiendra en majorité du texte. Voyons comment l'agrémenter

par quelques balises élémentaires.

Pour mettre le texte en gras: on l'encadre de la balise <b> :l'agrémenter par quelques balises élémentaires. Gras [Bold] <B> <STRONG>Début et fin de

Gras [Bold] <B>

<STRONG>Début et fin de zone en gras

</B>

<b>Ce texte s'affichera en gras. </b>

</STRONG>

Pour mettre le texte en italique on l'encadre de la balise <i> ou <EM> <i> ou <EM>

</EM>:

Italique [Italic] <I>

<EM>Début et fin de zone en italique

</I>

<i>Ce texte s'affichera en italique. </i>

</EM>

Pour souligner le texte on l'encadre de la balise <u> :s'affichera en italique. </i> </EM> <u>Ce texte sera souligné. </u> Comme, par

<u>Ce texte sera souligné. </u>

Comme, par convention, les éléments servant d'hyperlien sont soulignés (c'est le même que dans les

fichiers d'aide), on évitera le souligner des éléments de texte pour lui donner de l'importance. On préfèrera

la mettre en gras ou dans un format ou une couleur de police différent. Il ne faut donc pas en abuser.

Pour barrer le texte on l'encadre de la balise <s> :couleur de police différent. Il ne faut donc pas en abuser. <s>Ce texte sera barré. </s>

<s>Ce texte sera barré. </s>

Pour placer le texte en exposant on l'encadre de la balise <sup> :<s> : <s>Ce texte sera barré. </s> <sup>Ce texte sera en exposant. </sup> Pour

<sup>Ce texte sera en exposant. </sup>

Pour placer le texte en indice on l'encadre de la balise <sub> :: <sup>Ce texte sera en exposant. </sup> <sub>Ce texte sera en indice. </sub> Ainsi,

<sub>Ce texte sera en indice. </sub> Ainsi, <SUB>escalier</SUB>escalier<SUP>escalier</SUP> aura comme résultat

Escalier escalier escalier

2. Police, taille et couleur de caractère

a. La police des caractères

Pour modifier la police du texte on utilise l'attribut face de la balise <font> :

<font face="verdana">Ce texte sera en verdana. </font>

On a tendance à écrire des familles de polices plutôt qu'une seule police. En effet, il se peut que

sur un système différent de la police choisie ne soit pas installée et il faut qu'il puisse alors afficher le

texte dans une police proche de celle qu'on veut avoir.

On sépare alors les différentes polices par une virgule dans l'ordre de sélection le cas où la

précédente ne peut pas être affichée.

<font face="verdana,sans-serif">Ce texte sera en verdana ou en sans-serif si verdana n'est pas installée.</font>

b. Les niveaux de titres

TDI- Applications Hypermédias FARIH Saïd

18

Il existe différents niveaux de titres, ils vont de 1 à 6 et ont chacun leur importance. La balise

représentant ces niveaux de titre est <hX> où X représente le niveau.

Exemple de titre

<h1>Titre de ma page</h1>

Il est important de respecter la hiérarchie des différents niveaux de titres, sachant que l'élément le

plus haut est le <h1>. En effet, un titre <h2> ne se retrouvera jamais au-dessus d'un <h1> dans un

document. Le titre <h1> étant le plus important, il convient également de ne le faire apparaître qu'une

seule fois dans un document.

Pour modifier la taille du texte on utilise l'attribut size de la balise <font> :

<FONT SIZE=?>

<font size="5">Ce texte sera en taille 5. </font>

Par défaut, la valeur de l'attribut size vaut "3".

Il y a deux manières de modifier la valeur de cet attribut et les valeurs possibles sont les entiers de

</FONT>

Début et fin de zone avec cette taille.

"1" à "7":

En absolu : Les valeurs possibles sont les entiers de "1" à "7".fin de zone avec cette taille. "1" à "7": En relatif : Les valeurs possibles les

En relatif : Les valeurs possibles les entiers de "-2" à "+4".possibles sont les entiers de "1" à "7". c. Les couleurs des caractères Pour modifier la

c. Les couleurs des caractères

Pour modifier la couleur du texte on utilise l'attribut color de la balise <font> :

<font color="#ff0000">Ce texte sera en rouge. </font>

Les couleurs peuvent être écrites de deux manières :

En hexadécimal de type RVB et précédées d'un dièse (#) ;Les couleurs peuvent être écrites de deux manières : Exemples : Bleu #0000FF Vert #00FF00 Rouge

Exemples :

Bleu #0000FF Vert #00FF00 Rouge #FF0000 Jaune #FFFF00

Blanc #FFFFFF Violet #8000FF Gris clair #C0C0C0 Noir #000000

Textuelles en anglais US ; Exemples : red, yellow, pink . red, yellow, pink.

Et il est bien évidemment possible de renseigner ces trois attributs (color, face, size) à la fois

dans la même balise <font>.

A la ligne [Line break] <BR> Aller à la ligne

Exemple

Ouvrir l'éditeur de texte et saisir puis tester:

<HTML><HEAD><TITLE></TITLE></HEAD> <BODY>texte simple<BR> <B>texte en gras</B><BR> <STRONG>texte en gras</STRONG><BR> <I>texte en italique</I><BR> <EM>texte en italique</EM><BR> <B><I>texte en gras et en italique</I></B><BR> <FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en bleu</FONT> <!--C'est fini--> </BODY></HTML>

Quelques commentaires s'imposent;

Le texte tout simple s'écrit sans balises. Il sera repris par le browser avec la police et taille deQuelques commentaires s'imposent; caractères choisies dans sa configuration par défaut. Le

caractères choisies dans sa configuration par défaut.

Le browser affiche le texte qu'on lui "dicte" en passant à la ligne lorsque celui-ci atteint le bord dede caractères choisies dans sa configuration par défaut. la fenêtre. Pour le forcer à passer outre

la fenêtre. Pour le forcer à passer outre à cette règle de conduite et à faire un saut à la ligne

comme on le souhaite, il faut une instruction particulière. C'est la balise <BR>. Celle-ci représente

une action ponctuelle et n'a donc pas besoin de balise de fin.

TDI- Applications Hypermédias FARIH Saïd

19

Le même browser ne tient compte que d'un seul espace entre les mots. Ainsi pour luiTDI- Applications Hypermédias FARIH Saïd 19 <FONT SIZE=5>texte</FONT> <FONT

<FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en bleu</FONT> est équivalent à <FONT SIZE=5>texte</FONT><FONT COLOR="#0000FF">en bleu</FONT>

Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien lesCOLOR="#0000FF">en bleu</FONT> risque de créer des imbriquer. Ainsi

risque de créer des

imbriquer. Ainsi <B><I>

</I></B>

est correct et <B><I>

</B></I>

ennuis.

3. Les paragraphes de texte

Comme on tape du texte dans un traitement de texte, on segmente le texte en paragraphes. En

HTML c'est la même chose, sauf qu'il faut préciser nous-même où commence un paragraphe et où il se

termine. C'est ce à quoi sert la balise <p>.

affiche un texte dit préformaté. Le browser prend ainsi en compte tous

les espaces et sauts de ligne définis à l'écran.

Les paragraphes et les en-têtes peuvent s'aligner à gauche, au centre ou à droite. Pour aligner du

texte, on a utilisé l'attribut ALIGN ou le tag <CENTER>. Il existe une balise permettant d'aligner

différents éléments. C'est le tag :

La balise <PRE>

</PRE>

<DIV align=left> <DIV align=center> <DIV align=right>

<H1 align=left></H1> <P align=left></P> <H1 align=center></H1> <P align=center></P>

<H1 align=right></H1> <P align=right></P>

Cette alternative pour l'alignement horizontal du texte est parfois bien utile pour définir l'alignement

</DIV>

</DIV>

</DIV>

d'une portion de texte.

Première page d’accueil.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<HTML ><HEAD > <TITLE >"Ma page d’accueil" </TITLE > <META name="author" content="mon nom"> <META name="version" content="1.0"> </HEAD ><BODY bgcolor=red> <H1>Ma page d’accueil </H1 > <H2>Bienvenue sur mon site. </H2> <P >On trouvera sur ce site des informations sur ma région, ma famille et mes passions. </P > </BODY ></HTML >

4. Les séparateurs

Les browsers intègrent un outil de mise en forme intéressant pour clarifier la présentation du texte.

C'est la ligne horizontale. La syntaxe en est fort simple:

Ligne horizontale [Horizontal Rule] <HR> Insérer une ligne horizontale

Ce tag fort simple, permettra de comprendre un peu mieux le fonctionnement du navigateur. D'abord,

on a déjà découvert au fil de les erreurs qu'il est plutôt gentil car il s'efforce toujours d'afficher quelque

chose. Ensuite, il ménage le travail en prenant à sa charge des valeurs par défaut d'un certain nombre

d'attributs.

TDI- Applications Hypermédias FARIH Saïd

Dans le cas présent, les valeurs par défaut de la balise <HR> sont : une épaisseur de trait de 2

20

pixels, un alignement centré et une largeur de 100% de la fenêtre.

<HR size=?> Epaisseur en pixels <HR width=?> Largeur en pixels <HR width="%"> Largeur en % de la fenêtre <HR align=left> Alignement gauche <HR align=right> Alignement droite <HR align=center> Alignement centré

Il est donc tout à fait équivalent d'écrire:

<HR> oucentré Il est donc tout à fait équivalent d'écrire: <HR size=2 align=center width="100%" Exemple

<HR size=2 align=center width="100%"donc tout à fait équivalent d'écrire: <HR> ou Exemple <H3 align=center>ISTA

Exemple

<H3 align=center>ISTA ADARISSA-TDI2</H3> <HR align=center size=8 width="50%">

Commentaires :

On préférera spécifier la largeur en % de la fenêtre plutôt qu'en pixels car l'affichage s'adapteraalign=center size=8 width="50%"> Commentaires : ainsi à toutes les tailles et résolutions d'écran. On

ainsi à toutes les tailles et résolutions d'écran.

On peut préférer l'usage d'images comme séparateur (comme c'est le cas ici) pour personnaliserainsi à toutes les tailles et résolutions d'écran. son ouvrage. VI. Les listes Elles servent, comme

son ouvrage.

VI. Les listes

Elles servent, comme leur nom l'indique, à créer une liste d'items, plus précisément à les énumérer,

comme dans le cas d'un sommaire par exemple.

1. Les différents types de listes

On distingue cinq types de listes différents, chacun prévu pour un usage bien précis :

Les listes non ordonnées, ou à puces.différents, chacun prévu pour un usage bien précis : Les listes ordonnées. Les listes de définitions.

Les listes ordonnées.usage bien précis : Les listes non ordonnées, ou à puces. Les listes de définitions. Les

Les listes de définitions.listes non ordonnées, ou à puces. Les listes ordonnées. Les listes de répertoires. Les listes de

Les listes de répertoires.à puces. Les listes ordonnées. Les listes de définitions. Les listes de menus. a. Les listes

Les listes de menus.Les listes de définitions. Les listes de répertoires. a. Les listes non ordonnées Elles sont démarquées

a. Les listes non ordonnées

Elles sont démarquées par la balise <ul> et chacun des items est entouré de la balise <li> :

Exemple de liste non ordonnée

<p>La liste des filières:</p> <ul>

<li> TDM </li> <li> TDI </li> <li> TRI </li> <li> TGE </li> </ul>

Résultat

TDM

TDI

TRI

TGE

i. Les différents types de puces

On va pouvoir jouer sur le design des puces à l'aide de trois types différents. On renseigne le type

des puces avec l'attribut type de la balise <ul>. Les types sont :

disc (par défaut au niveau 1 d'imbrication) (par défaut au niveau 1 d'imbrication)

TDI- Applications Hypermédias FARIH Saïd

21

circle (par défaut au niveau 2 d'imbrication) (par défaut au niveau 2 d'imbrication)

square (par défaut au niveau 3 et suivants d'imbrication) (par défaut au niveau 3 et suivants d'imbrication)

Dans l'exemple précédent, on a donc vu une liste non ordonnée avec une puce de type disc. Voici à

quoi ressemblent les deux autres :

<p>La liste des filières:</p> <ul type="circle"> <li> TDM </li> <li> TDI </li> <li> TRI </li> <li> TGE </li> </ul>

 

<p>La liste des filières:</p>

TDM

o

TDM

<ul type="square">

TDI

o

TDI

<li> TDM </li> <li> TDI </li>

<li> TRI </li>

TRI

o

TRI

TGE

o

TGE

<li> TGE </li> </ul>

ii. Les puces en image

Des disques, des cercles ou des carrés, c'est bien beau, mais si on veut une puce en forme de

flèche et de couleur bleue ?

Pour cela, rien de plus simple, il suffit d'utiliser

une image pour remplacer la puce originale.

Cependant cette méthode n'est possible qu'à l'aide de CSS et de la propriété list-style-image :

Exemple de liste non ordonnée

<p>La liste des filières:</p> <ul>

<li> TDM </li> <li> TDI </li> <li> TRI </li> <li> TGE </li> </ul>

CSS

li {

list-style-image : url(puce.gif);

}

b. Les listes ordonnées

Elles sont introduites par la balise <ol> et chacun des items est encadré par la balise <li> :

Exemple de liste ordonnée

<p>Top 3 des matières :</p> <ol>

<li> Programmation </li> <li> Réseau </li> <li> Multimédia </li> </ol>

Résultat

1. Programmation

2. Réseau

3. Multimédia

Exercice

On veut afficher cette liste:

Les mois du printemps

avril

mai

juin

Les mois d'automne

1. octobre

2. novembre

3. décembre

On ouvre l'éditeur de texte puis on saisit:

<H1>Les mois du printemps</H1> <UL><LI>avril <LI>mai <LI>juin</UL> <P><H3>Les mois d'automne</H3> <OL><LI>octobre <LI>novembre <LI>d&eacute;cembre</OL>

Commentaire

TDI- Applications Hypermédias FARIH Saïd

22

&eacute; est l'un de ces caractères spéciaux utilisés pour représenter le é. Les éditeurs Html se

déchargera de cette corvée.

i. Les différents types de numérotation

Il existe cinq manières différentes de numéroter les listes ordonnées. On renseigne le type de

numérotation avec l'attribut type de la balise <ol>.

Les types sont :

1 : Numérotation par les chiffres arabes (par défaut). : Numérotation par les chiffres arabes (par défaut).

: Numérotation par les chiffres romains.: 1 : Numérotation par les chiffres arabes (par défaut). : Numérotation par les chiffres romains

: Numérotation par les chiffres romains minuscules.(par défaut). : Numérotation par les chiffres romains. : Numérotation par les lettres de l'alphabet. :

: Numérotation par les lettres de l'alphabet.: Numérotation par les chiffres romains minuscules. : Numérotation par les lettres de l'alphabet

: Numérotation par les lettres de l'alphabet minuscules.: Numérotation par les lettres de l'alphabet. I i A a Dans l'exemple précédent, on a

I

i

A

a

Dans l'exemple précédent, on a donc vu une liste ordonnée avec une numérotation par les chiffres

arabes. Voici à quoi ressemblent les autres :

<p>Top 3 des matières :</p> <ol type="I"> <li>Programmation</li> <li>Réseau</li> <li>Multimédia</li>

</ol>

I.

Programmation

<p>Top 3 des matières :</p>

 

II. Réseau

<ol type="i"> <li>Programmation</li> <li>Réseau</li> <li>Multimédia</li> </ol>

i. Programmation ii. Réseau iii. Multimédia

III. Multimédia

<p>Top 3 des matières :</p> <ol type="A"> <li>Programmation</li> <li>Réseau</li> <li>Multimédia</li> </ol>

 

<p>Top 3 des matières

 
 

A. Programmation

:</p>

<ol type="a"> <li>Programmation</li> <li>Réseau</li> <li>Multimédia</li> </ol>

a. Programmation

B. Réseau

b. Réseau

C. Multimédia

c. Multimédia

ii. Modifier le début de la numérotation

Il est tout à fait possible, pour une raison ou une autre, de modifier le numéro de départ par lequel

va s'incrémenter la numérotation.

Pour cela, il suffit de préciser une valeur à l'attribut start de la balise <ol>. Cette valeur doit

dans tous les cas être numérique :

Exemple de liste ordonnée

<p>Top 3 des matières :</p> <ol type="I" start="8"> <li>Programmation</li> <li>Réseau</li> <li>Multimédia</li> </ol>

Résultat

VIII.

Programmation

IX. Réseau

X. Multimédia

c. Les listes de définitions

TDI- Applications Hypermédias FARIH Saïd

23

Elles sont délimitées par la balise <dl> qui comprend une liste de termes à définir représentés par

la balise <dt> qui peuvent avoir une ou plusieurs définitions elles-mêmes encadrées par la balise <dd>

(une pour chaque définition).

Exemple de liste de définitions

<dl> <dt>Oreiller</dt> <dd>Pièce de literie bourrée de plumes, de duvet, de crin à soutenir la tête pendant le repos.</dd> <dt>Puce</dt> <dd>Insecte de très petite taille se déplaçant par sauts. </dd> <dd>Marché où l'on vend des objets d'occasion. </dd> </dl>

destinée

Résultat

Oreiller

Pièce de literie bourrée de plumes, de duvet, de crin destinée à soutenir la tête pendant le repos.

Puce

Insecte de très petite taille se déplaçant par sauts. Marché où l'on vend des objets d'occasion.

d. Les listes de répertoires

Elles sont encadrées par la balise <dir> et chacun des items est compris dans la balise <li>.

Exemple de liste de répertoires

<dir>

<li>CSS</li>

<li>Fichiers</li>

<li>Images</li>

<li>JS</li>

</dir>

Résultat

CSS<li>JS</li> </dir> Résultat Fichiers Images JS e. Les listes de menus Elles sont

Fichiers<li>JS</li> </dir> Résultat CSS Images JS e. Les listes de menus Elles sont représentées

Images</dir> Résultat CSS Fichiers JS e. Les listes de menus Elles sont représentées par la

JS</dir> Résultat CSS Fichiers Images e. Les listes de menus Elles sont représentées par la

e. Les listes de menus

Elles sont représentées par la balise <menu> et chacun des items est délimité par la balise <li>.

Exemple de liste de menus

<menu> <li>Accueil</li> <li>Page 1</li> <li>Page 2</li> </menu>

Résultat

Accueil<li>Page 1</li> <li>Page 2</li> </menu> Résultat Page 1 Page 2

Page 1<li>Page 1</li> <li>Page 2</li> </menu> Résultat Accueil Page 2

Page 2<li>Page 1</li> <li>Page 2</li> </menu> Résultat Accueil Page 1

2. Les listes imbriquées

TDI- Applications Hypermédias FARIH Saïd

24

L'imbrication des listes permet une présentation claire et détaillée d'un menu ou d'un sommaire par

exemple. On peut imbriquer les listes non ordonnées et ordonnées sans distinction et même les mélanger :

Exemple de listes imbriquées

<ol type="I"> <li>La genèse</li> <li>La vie <ol type="A"> <li>L'enfance</li> <li>L'adolescence</li> <li>Le passage à l'âge adulte <ul>

<li>Le jeune adulte</li> <li>La crise de la quarantaine</li> </ul> </li> <li>La vieillesse</li> </ol> </li> <li>La mort</li> </ol>

Résultat

I. La genèse

II. La vie

A. L'enfance

B. L'adolescence

C. Le passage à l'âge adulte

Le jeune adulte

La crise de la quarantaine

D. La vieillesse

III. La mort

3. L'utilité des listes aujourd'hui

La principale utilisation des listes de ces jours se fait par les listes non ordonnées pour la création

de menus. L'imbrication de ces listes non ordonnées couplée avec un soupçon de CSS permet de faire

des menus à multiples niveaux d'affichage, comme les menus déroulants. D'autre part, on peut retrouver

les listes ordonnées principalement pour la rédaction de sommaires, notamment destinés aux FAQ.

VII. Les images

1. GIF ou JPEG?

destinés aux FAQ . VII. Les images 1. GIF ou JPEG? Avant de passer aux balises,

Avant de passer aux balises, il faut savoir ce qui suit.

Les deux formats d'image (maximum 256 couleurs) les plus utilisées sur le Web, sont le format GIF

et le format JPEG. Pour le format GIF, on retiendra la caractéristique "entrelacé" qui permet de

charger progressivement l'image lors de l'ouverture de la page.

Ces deux formats donnent des résultats assez équivalents bien que JPG soit plutôt recommandé

pour des images avec des tons nuancés ou dégradés. Les différents formats d'image supportés par cette

balise sont :

GIF

JPG

PNG

BMP (à éviter)

TDI- Applications Hypermédias FARIH Saïd

L'ennemi sur le Web , c'est la taille des images! Plus l'image sera grande, plus le temps de Web, c'est la taille des images! Plus l'image sera grande, plus le temps de

chargement sera long au risque de décourager vos visiteurs. Présenter une petite image indiquant

un lien vers l'image complète est également un bon conseil.

25

Il n'est pas inutile de prévoir dans la panoplie de compositeur Web , un logiciel de retouche Web, un logiciel de retouche

d'images "PhotoShop" ou "Paint Shop Pro".

Il est très facile de se faire une bibliothèque d'images tout en surfant sur le Web ? Avec un Web? Avec un

browser, il suffit de se positionner sur l'image, de cliquer avec le bouton droit de la souris et de

suivre les instructions du menu déroulant (Save Image As ).

2. Le code Html est :

<img src="adresse/de/l/image" alt="Description de l'image"> <IMG SRC="Adresse de l'image"> Afficher l'image qui se trouve à l'adresse

Pour afficher une image en HTML, on utilise la balise <img>. Elle admet différents attributs, dont les

plus importants sont src et alt.

L'attribut src permet de renseigner le chemin de l'image, qui peut être absolu HTTP ou relatif src permet de renseigner le chemin de l'image, qui peut être absolu HTTP ou relatif,

très utile pour pouvoir l'afficher.

L'attribut alt affiche un texte alternatif à la place de l'image dans le cas où, pour alt affiche un texte alternatif à la place de l'image dans le cas où, pour une raison ou

autre, celle-ci ne peut pas être chargée. Il aide de plus les moteurs de recherche à référencer

l'image et les déficients visuels à savoir ce que l'image représente.

Remarque

L'attribut alt n'est pas censé créer une infobulle lors du survol de l'image, qui est le rôle de l'attribut title, cependant sur Internet Explorer le alt affiche cette infobulle.

D'autres attributs:

Dimensions width=? height=? Hauteur et largeur (en pixels) border=? (en pixels) Bordure align=top align=middle align=botton align=left align=right

L'attribut Align: L'attribut align positionne l'image par rapport au texte

<IMG SRC="HELP.gif" align=TOP>Fichier d'aide <IMG SRC="HELP.gif" align=CENTER>Fichier d'aide <IMG SRC="HELP.gif" align=BOTTOM>Fichier d'aide

Commentaires :

En Html , l'image ne fait pas partie du document. Le browser va la chercher à Html, l'image ne fait pas partie du document. Le browser va la chercher à l'adresse indiquée.

Généralement, on place les images dans le même répertoire que les pages Html.

Presque en conséquence logique de ceci, le fait d'utiliser la même image à plusieurs reprises dansles images dans le même répertoire que les pages Html . un fichier Html ne modifie

un fichier Html ne modifie en rien sa taille.

Prévoir un texte pour les browsers n'ayant pas l'option image activée, permet au lecteur de ne pasdans un fichier Html ne modifie en rien sa taille. perdre le fil de l'exposé et

perdre le fil de l'exposé et peut-être d'activer cette option pour la découvrir.

Il est important pour la fluidité de l'affichage de préciser la taille en hauteur et largeur de l'imageet peut-être d'activer cette option pour la découvrir. car le browser peut ainsi connaissant l'emplacement à

car le browser peut ainsi connaissant l'emplacement à réserver pour celle-ci, continuer à afficher le

texte.

3. Lien sur image

Les balises sont :

<A HREF="fichier.htm"><IMG SRC="image.gif"></A>

Remarquer que les images cliquables sont entourées d'une bordure.