Applications Hypermedias

TDI- Applications Hypermdias
FARIH Sad
Applications Hypermdias
I.
concepts fondamentaux
1. Prsentation
Une page Web est un document. Elle est enregistre sur le disque du serveur, et affiche par le
navigateur Web.
Le navigateur Web affiche le contenu du fichier enregistr sur le serveur aprs l'avoir interprt, il
offre donc une interprtation 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. Rseau Intranet
i.
Dfinition
Un rseau Intranet est un rseau, interne une entreprise, qui utilise les technologies Internet pour
amliorer les communications internes, publier des informations ou dvelopper des applications. Pour
utiliser les applications Internet gratuites ou peu onreuses sur un rseau Intranet, chacun des ordinateurs
du rseau doit prendre en charge le protocole TCP/IP. Un rseau 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 amliorer la circulation et les conditions d'utilisation des informations, l'intranet est
galement devenu la porte d'entre de l'entreprise vers l'INTERNET.
L'intranet est la partie scurise d'un rseau informatique (d'une entreprise ou d'une organisation)
bas sur les mmes technologies que lINTERNET (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 autoriss.
L'intranet est gnralement connect au rseau INTERNET pour permettre la communication avec le
monde extrieur.
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,
Le partage des nouvelles et des agendas,
la disponibilit et l'change de documents,
Le partage des donnes de l'entreprise,
Le travail de groupe,
La gestion de la circulation des documents et du travail associ.
Les logiciels ncessaires la mise en uvre de ces services sont:
Soit disponibles (pour la majorit des cas): les logiciels de messagerie, les logiciels de travail en
groupe (Lotus Notes, Exchange, etc.), etc.;
Soit dvelopper spcifiquement au cas par cas.
iii.
De l'intranet vers l'INTERNET
L'intranet peut tre connect l'INTERNET afin de permettre aux utilisateurs d'INTERNET d'accder
aux informations de l'entreprise (exemple : consultation du catalogue de produits) et aux utilisateurs de
l'intranet d'accder au rseau INTERNET.
Un systme de protection pare-feu et de filtrage des informations (firewall) doit tre prvu pour
protger le rseau intranet des agressions extrieures.

FARIH Sad
iv.
Quels sont les facteurs de russite d'un intranet?
Nommer un responsable qui sera Monsieur intranet;

Dfinir les objectifs, le plan de dploiement, ainsi que les cots;
Dfinir les applications qui seront implmentes sur l'intranet et obtenir le consensus de la direction
et des reprsentants des utilisateurs;
Disposer d'un service informatique comptent pour la mise en uvre, c'est--dire dans les
domaines suivants:
Rseaux IP;
Conception de sites web ergonomiques avec accs aux donnes informatiques;
Gestion de la scurit;
Support aux utilisateurs.
Utiliser au maximum les standards du march;

Faire simple au dpart (viter l'info-indigestion) et soigner l'aspect ergonomique pour les utilisateurs;
Eduquer les utilisateurs et mettre en uvre un service d'aide;
Evaluer les rsultats atteints par rapport aux objectifs.
Schma gnral :
v.
Composants hardware et software
Diffrents composants hardware et logiciels sont requis:

Des stations de travail (PC ordinateur personnel) pour les utilisateurs.
Un ou des serveur(s) physique(s) contenant les serveurs logiques suivants:
Un serveur logique o rsideront les informations de l'entreprise (agenda, base de donnes

clients, fournisseurs, produits, commandes, etc.);
Un serveur logique contenant les applications qui traitent les donnes (mthode de calcul
de la facturation, gestion des stocks, etc.);
Un serveur logique o rsidera le contenu des crans (pages) qui seront prsents aux
utilisateurs (texte, graphiques, tableaux remplir, etc.).
Un rseau local (transparent aux utilisateurs) compos d'une partie physique et d'une partie logicielle:
La partie physique est gnralement compose de:
Cartes Ethernet avec le pilote logiciel associ dans chaque PC utilisateur ou serveur;
Cbles qui relient physiquement les stations de travail entre elles et le ou les serveur(s), des
armoires de concentration de cbles et de gestion du cblage (HUB, Patch Panel). Le
cblage est gnralement pris en charge par des installateurs spcialiss;
La partie logicielle (fournie par les constructeurs informatiques) rside dans chaque PC et serveur.
Elle permet, de faon transparente aux utilisateurs, la circulation de l'information entre les PC et le
serveur. D'autres logiciels permettent d'assurer l'administration:
Du rseau (relev automatique des composants du rseau un moment donn, mesure des
performances, etc.);
Des utilisateurs (qui peut accder quoi, qui est admis sur le rseau, etc.).

FARIH Sad
Des
logiciels
de
services:
chaque
service
(courrier
lectronique,
partage
d'agenda,
tableau
d'information, etc.) demande un logiciel appropri.

Des logiciels applicatifs spcifiques: les applications particulires (facturation, gestion de stock, etc.)
demandent soit des dveloppements propres soit l'utilisation de logiciels prts l'emploi.
Des logiciels dans les stations utilisateurs (PC): les browsers (navigateur) qui permettent d'accder
aux informations et services sont universels et disponibles gratuitement. Ils sont souvent complts
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

rentre par l'utilisateur). Cette dcentralisation du traitement au niveau du PC diminue le trafic sur
le rseau et amliore la performance d'un point de vue utilisateur.
Le personnel
Du personnel comptent est requis pour:
Installer, grer et maintenir les logiciels de l'intranet;
Assurer la gestion de l'intranet (disponibilit des services, performance, matriel, pannes,

cot);
vi.
Grer les utilisateurs (qui peut accder et quoi);

Former et aider les utilisateurs.
Mise en place de l'intranet
Un intranet doit tre conu selon les besoins de l'entreprise ou de l'organisation (au niveau des
services mettre en place). Ainsi, l'intranet ne doit pas tre conu 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 matrielle, 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
donnes 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 (systmes de gestion de contenu) permettant

de grer la publication des pages par une quipe de rdacteurs.
b. Extranet
On souhaite permettre des utilisateurs autoriss figurant au nombre des clients, distributeurs,
fournisseurs et autres partenaires, d'accder au rseau Intranet. Par exemple, une socit souhaite partager
des informations professionnelles avec ses distributeurs et ses clients en leur accordant un droit d'accs
limit son rseau Intranet. Internet permet d'tendre l'accs au rseau Intranet des utilisateurs
autoriss. Ce type de rseau Intranet, partiellement accessible aux seuls utilisateurs autoriss, par le biais
d'Internet est appel rseau extranet. Il est plus facile et plus conomique d'installer un rseau extranet
par le biais d'Internet que d'installer une liaison de communication ddie entre deux entreprises. Toutefois,
un rseau extranet est moins scuris qu'un rseau Intranet priv, car des utilisateurs non autoriss
peuvent y accder.
Un extranet est une extension du systme d'information de l'entreprise des partenaires situs audel du rseau. L'accs l'extranet doit tre scuris dans la mesure o cela offre un accs au systme
d'information des personnes situes 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 consultes depuis l'extrieur afin de scuriser le transport des requtes et des
rponses HTTP et d'viter notamment la circulation du mot de passe en clair sur le rseau.
Un extranet n'est donc ni un intranet, ni un site INTERNET. Il s'agit d'un systme supplmentaire
offrant par exemple aux clients d'une entreprise, ses partenaires ou des filiales, un accs privilgi
certaines ressources informatiques de l'entreprise par l'intermdiaire d'une interface Web.

FARIH Sad
c. Internet
i.
Qu'est-ce qu'un site web ?
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 stocks sur un ordinateur connect en permanence internet et
hbergeant les pages web (serveur web).
Un site web est habituellement architectur autour d'une page centrale, appele page d'accueil et
proposant des liens vers un ensemble d'autres pages hberges sur le mme serveur, et parfois des liens
dits externes, c'est--dire de pages hberges par un autre serveur.
Une URL se prsente sous la forme suivante :
http://www.monsite.com/www/mapage1.html
Etudions plus en dtail cette adresse :
http:// indique qu'on souhaite naviguer sur le web au moyen du protocole HTTP, le protocole
utilis par dfaut 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 hberge les pages web. Par convention les
serveurs web possdent un nom commenant par www. La seconde partie de cette adresse est
appele nom de domaine. Un site web peut ainsi tre hberg par plusieurs serveurs, appartenant
tous un mme 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
prsent il s'agit du fichier mapage1.html situ dans le rpertoire www.
ii.
Le navigateur web
Le navigateur est l'outil de l'internaute, lui permettant de surfer entre les pages web de ses sites
prfrs. Il s'agit d'un logiciel possdant une interface graphique compose de boutons de
navigation, d'une barre d'adresse, d'une barre d'tat (gnralement en bas de fentre) 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 de
documents), et ces informations sont pour la plupart renouveles quotidiennement. Le moteur de
recherche est un lment indispensable pour s'y retrouver!
iii.
Le moteur de recherche
Un moteur de recherche (Searchbot en anglais) est une machine spcifique (matrielle et logicielle)
charge d'indexer des pages web afin de permettre une recherche l'aide de mots-cls dans un
formulaire de recherche.
iv.
Fonctionnement d'un moteur de recherche
Des robots (logiciels), appels spiders (en franais araignes) doivent parcourir la toile en suivant
rcursivement les liens des millions de pages Web et indexent le contenu dans de gigantesques
bases de donnes afin de permettre leur interrogation.
Aucun moteur de recherche ne peut parcourir la totalit des pages en une journe (ce processus
prend gnralement plusieurs semaines), chaque moteur adopte donc sa propre stratgie, certains
allant mme jusqu' calculer la frquence de mise jour des sites.

FARIH Sad
3. Applications pour Internet

a.
Couches rseau
COUCHE
ROLE
7. APPLICATION
6. PRESENTATION
Fourniture de services rseaux aux applications

Formatage, conversions, (+ compression et cryptage) des
donnes
tablissement, contrle, terminaison d'une connexion entre
5. SESSION
deux systmes
-Dcoupage du message en paquets (et inversement :
rassemblage des paquets en message dans le
4. TRANSPORT
bon
ordre)
-Gestion de plusieurs connexions sur la mme voie de
communication
(multiplexage)
ou
clatement
d'une
connexion sur plusieurs voies de communication

Acheminement
3. RESEAU
au
mieux
des
paquets
de
donnes
(routage, contrle des flux)

Structuration des donnes en trames et
2. LIAISON
transmission
sans erreurs
1. PHYSIQUE
Envoi
et rception des squences de bits
b. La couche Application (niveau 7)

Toutes les applications rseau, messageries, transfert de fichier, etc. Les quipements de routage
n'implmentent que les trois premires couches. Seuls les ordinatrices sources et destination implmentent
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 ;
Masque de sous-rseau ;
Passerelle ;
Serveur DNS ;
Serveur de nom NETBIOS (WINS par exemple) ;
Nom de domaine DNS, type de nud NETBIOS, ID d'tendue NETBIOS, etc.

FARIH Sad
DHCP est la fois un service et un protocole qui permettent dallouer automatiquement des adresses
IP et dautres paramtres de configuration aux ordinateurs dun rseau. DHCP attribue ces adresses de
manire dynamique depuis un groupe dadresses.
Les avantages de DHCP sont les suivants :
On na pas configurer manuellement ladresse IP de chaque client. !
On na plus conserver une
trace de toutes les adresses IP assignes.

On peut de manire automatique attribuer une nouvelle adresse IP un client quon dplace dun
sous-rseau un autre.
On peut librer ladresse IP dun ordinateur hors connexion pour un certain temps, et rattribuer
ladresse un autre ordinateur.
On rduit les risques de duplication dadresses grce au suivi automatique des attributions par
DHCP.
ii.
WINS (Windows Internetworks Name Service)
Un serveur WINS fournit les services d'enregistrement, de renouvellement, de libration et de

rsolution de noms aux ordinateurs clients configurs pour utiliser ces services. Les noms NETBIOS sont
ainsi rsolus en adresses IP.
iii.
Le WEB
Le WEB, c'est l'application qui a vendu le rseau INTERNET qui jusque-l n'tait pris que de
quelques initis. Pourtant ce dveloppement rcent, est d au CERN, Centre Europen de la Recherche
Nuclaire. Le principe est de transmettre par le rseau 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 diffrents services de TCP/IP a t cre de manire banaliser
l'accs 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
raccordes lInternet.
Une machine disposant dun serveur Telnet permettra donc nimporte quelle machine de par le
rseau de sy connecter, au moyen dun 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 donnes (20). La connexion pour les donnes est cre chaque fois qu'un fichier est
transfr mais aussi pour lister un rpertoire. Cette connexion de donnes s'tablit du serveur vers le

FARIH Sad
client en sens inverse de la premire connexion de contrle. Une simple mulation de terminal suffit
donner les ordres car ceux-ci sont composs de caractres courants et non de chanes de bits.
FTP est utile ds qu'il s'agit de transfrer des donnes entre deux machines A et B. Comme en
Telnet, la machine A doit tre quipe d'un client FTP, alors que la machine B est-elle quipe d'un
serveur FTP.
FTP utilise un langage de commande dfinit par des mots clefs de 4 caractres. 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 deffectuer des
oprations laide de cette connexion.
Lorsque A envoie une demande de connexion B, le serveur FTP renvoie alors le message de login
dfinit par ladministrateur de B. Lutilisateur de A envoie alors la commande USER login attendue par B,
o login est le nom de lutilisateur. B attend alors la commande PASS password, o password est le mot
de passe correspondant lutilisateur login. De nombreux serveurs autorisent les connexions dites
anonymes, cest dire que nimporte quel utilisateur peut sy connecter pour prendre des fichiers, et sur
certains serveurs dposer des fichiers. Dans une phase de connexion anonyme, on envoie gnralement
FTP ou anonymous comme nom de login, et son adresse email en mot de passe. Une fois lidentification
effectue, le client envoie la commande SYST, de manire connatre le systme distant
iii.
Le protocole SMTP
Le protocole SMTP (Simple Mail Transfert Protocol) est certainement un des protocoles le plus utilis
sur lInternet. Il est totalement transparent lutilisateur, 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 gnralement
implment sur le port TCP/25. Sur systme Unix, sendmail est gnralement 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
accs
en
anonyme
au
serveur
ftp
dans
le
rpertoire cyril-gruau pour le fichier : ConceptionBD.pdf

news.imt-mrs.fr/active donne laccs liste des groupes - Les news
http ://www.microsoft.com/support Accs 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 crer ces
pages (Adobe PageMil, Dreamweaver, Microsoft FrontPage, etc..). Ce sont des fichiers texte lisibles, et un
bon spcialiste peut crire directement en HTML. Bref ce qui vend le mieux le rseau est peut tre une
des applications les plus triviales.
Chaque page est transmise par une session TCP port 80 qui est ferme la fin de la rception. Le
clic sur une information hypertexte est purement local et va directement au serveur concern, on ne
repasse pas par le mme serveur.
ii.
PROXY
L'information trouve est mise en cache localement. De plus en plus, on utilise des serveurs
intermdiaires pour faire des caches au niveau d'un trs grand nombre d'utilisateurs. En cliquant sur une
information situe aux Japon, on a de bonne chance de l'avoir dans un cache rgional ou national. Ces
caches sont activs de manire transparente (fonction HTTPPROXY). L'adresse URL est passe en texte au

FARIH Sad
serveur PROXY qui rsoudra la requte. On atteint parfois 25% de succs. Une fois sur 4 la page est dj
dans le cache.
iii.
Les suites de HTTP/HTML
Le business tant rentr dans les protocoles INTERNET, les choses avancent trs vite mais de faon
plus dsordonn. Auparavant, beaucoup de dveloppements taient dus des organismes de recherche
sans soucis de rentabilit ou de comptition.
Le WEB permet aussi de passer des donnes un serveur qui va construire une page HTML
constituant la rponse (cgi-bin par exemple). Ceci est un peu limit car on ne peut pas faire excuter un
programme au client. Plusieurs dveloppements ont eu lieu ces derniers temps.
SUN, socit qui vend et fabrique des stations de travail sous Unix a cr un nouveau langage et
concept de rseau : le JAVA. Ce langage est de type C++ et le programme est envoy au client qui
l'excute ensuite. Il existe des compilateurs qui vont crer un pseudo code JAVA qui sera interprt dans
la machine distante.
MICROSOFT met en avant ActiveX qui est du mme style mais trs dpendant de Windows et de la
plateforme Intel. D'o problme 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 dvelopper dans un
langage interprt 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. Prsentation
Le protocole DNS fournit un service de rsolution de nom et d'adresse aux applications clientes. Les
serveurs DNS permettent aux utilisateurs d'employer des noms d'htes (par ex: myhost.com) pour accder
aux ressources du rseau. Le serveur DNS fournit l'adresse IP correspondant au nom d'hte, soit
directement, soit en consultant un serveur DNS situ plus haut dans la hirarchie des noms de domaine.
L'adresse IP numrique tant difficile manipuler, une reprsentation hirarchique de nom de
machines a t mise en place pour faciliter l'utilisation du rseau. Cependant dans les couches basses du
rseau, seule la valeur numrique est utilise. Le DNS est non pas une couche du rseau, mais une
application. Les noms sont composs par une suite de caractres alphanumriques encadrs par des
points. Par exemple romarin.univ-aix.fr correspond l'adresse 193.50.125.2 et le mcanisme qui associe le
nom au numro s'appelle la rsolution de noms. Cette reprsentation est hirarchique.
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 gnriques ou des domaines gographiques.
com : Organisations commerciales (hp.com par exemple)
edu : Institutions ducatives (amricaines)
gov : Organisations gouvernementales US
int
: Organisations internationales
mil : Militaires Us
net : Rseau
org : Organisation but non lucratif
bf : Burkina Faso
de : Allemagne
ma : Maroc
fr : France

FARIH Sad
b. DNS primaire / DNS secondaire

Lorsqu'on veut se connecter internet, le service DNS permet de taper des noms du type
www.commentcamarche.net, plutt 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 crer un systme qui fasse la "rsolution" (traduction) entre une IP et un nom.
Pour raliser cette traduction, des serveurs spciaux, appels serveurs DNS, sont utiliss. Chaque
ordinateur connect internet est configur avec une liste de serveurs contacter (cette liste est
gnralement automatiquement renseigne par la fournisseur d'accs).
On peut simplifier l'image en disant que le serveur DNS est un gros annuaire, comme celui du
tlphone, qui permet partir d'un nom de trouver son numro de tlphone.
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 premire machine (le DNS primaire) va forcment fonctionner,
il existe une seconde machine, appele DNS secondaire, permettant de rpondre si jamais la premire 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 donnes sont toujours adresses et transmises de la mme faon: Peu importe si on appelle
des pages WWW, si on envoie du courrier lectronique, tlchargez des fichiers avec FTP ou
travaillez grce Telnet sur un ordinateur loign
Les donnes sont mises en petits paquets pour la transmission sur le rseau. Chaque paquet
contient la mention de l'adresse laquelle il doit tre envoy et de son numro dans l'envoi
Le TCP s'assure que les paquets de donnes arrivent vraiment chez le destinataire et dans le bon
ordre: Le TCP utilise des numros de squence pour les diffrents paquets d'un envoi.
Ce n'est que lorsque tous les paquets d'un envoi sont arrivs complets chez leur destinataire que
la transmission est considre comme tant termine.
d. Les adresses IP
Lorsquon sadresse une machine de lInternet, il est souvent plus pratique de mmoriser un nom
symbolique plutt que son adresse IP. Toutefois, on peut utiliser indiffremment lune ou lautre des deux
formes dadresse. Ceci est possible grce 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 lheure actuelle, nous utilisons le protocole IP version 4, qui permet dadresser 232 machines
(codage des adresses sur 4 octets), mais vu la forte croissance que connat le rseau Internet, il est
maintenant ncessaire dtendre cet espace dadressage. Cest le but de la prochaine version de lIP, IP
version 6, qui permettra un codage des adresses IP sur 128 bits (16 octets), et donnera ainsi la possibilit
dadresser 2128 machines.
Lorsquon recherche ladresse IP ou le nom associ une adresse IP dune machine du rseau, on
met une requte au serveur DNS, dont ladresse a t fourni par ladministrateur rseau. Cest ensuite lui
qui soccupera de demander qui de droit de rsoudre ladresse ou le nom fournit, puis retournera
linformation. Chaque serveur DNS gre une plage dadresses IP. Cest ce que lon appelle une zone, et le
D.N.S qui contrle cette zone est appele 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 rserves (0 et255).
Cest lui qui va dcider de lorganisation de cette plage dadresse. Ds lors, une machine est donc installe
et dsigne comme serveur DNS. Cest sur cette machine que toutes les informations adresses / noms
symboliques seront entres. Donc, dans lexemple, on dcide dinstaller trois machines, a , b et c
, plus un serveur DNS quon appellera ns1 .

FARIH Sad
Rsum des classes d'adresses Rsum des classes d'adresses
Nombre de
rseaux
Nombre dhtes
par rseau
Plage
dID de rseau
(premier octet)
Classe A
126
16 777 214
1 126
Classe B
16 384
65 534
128 191
Classe C
2 097 152
254
192 223
10

FARIH Sad
III.
Le langage HTML
1. Bref historique de HTML

Le langage HTML (HyperText
Markup
Language) a t dvelopp initialement par Tim
Berners-Lee, alors au CERN. Il a rapidement connu un vif succs grce au navigateur Mosaic,
dvelopp au NCSA. Pendant les annes 1990, il a poursuivi sa croissance en profitant de celle, explosive,
du Web, et sest enrichi de nombreuses manires. 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 spcifications de HTML
Il peut tre cr et trait par de nombreux outils, depuis des diteurs de texte simples jusqu des
outils ddis sophistiqus 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-ttes, paragraphes, listes, liens
hypertextes, etc.
2. Amlioration de HTML
La spcification 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
spcification HTML 3.2, qui apporte plusieurs amliorations et modifications.
Viendra ensuite la spcification HTML 4, un progrs immense par rapport aux versions antrieures.
Ses
principales
innovations
concernent
linternationalisation,
laccessibilit,
les
tableaux,
les
documents composs, les feuilles de style, les scripts et limpression.

Internationalisation : les documents peuvent tre crits en toutes les langues et diffuss partout dans
le monde. Cest la norme mondiale la plus complte, qui tient compte des problmes concernant la
reprsentation des caractres internationaux, le sens des critures, la ponctuation et autres particularits
des langues mondiales. Cela permet une indexation des documents par les moteurs de recherche, une
typographie de qualit, la synthse de la parole partir du texte, la csure, etc.
Accessibilit : au fur et mesure de la croissance de la communaut du Web et de la diversification
des capacits et aptitudes de ses membres, il devient crucial que les technologies employes soient
appropries leurs besoins spcifiques. Le langage HTML a t conu pour rendre les pages Web plus
accessibles ceux qui prsentent des dficiences physiques.
Tableaux : Les auteurs disposent maintenant dun plus grand contrle sur leur structure et leur
disposition (par exemple, les regroupements de colonnes). Ils peuvent spcifier la largeur des colonnes et
permettre aux agents utilisateurs dafficher les donnes de table progressivement, au fur et mesure du
chargement, plutt que dattendre le chargement entier du tableau.
Documents composs : Llment OBJECT (de mme que ses anctres, les lments plus spcifiques
IMG
et APPLET) fournit le
moyen dinclure
des images, des
squences vido, de
laudio, des
mathmatiques, des applications spcialises et dautres objets dans un document. Il permet aussi aux
auteurs de spcifier une hirarchie de restitutions de remplacement aux agents utilisateurs qui ne grent
pas certaines restitutions particulires.
Feuilles de style : les feuilles de style simplifient le balisage HTML et soulagent grandement HTML
des responsabilits de la prsentation. Elles donnent aux auteurs comme aux utilisateurs le contrle de la
prsentation des documents (informations sur les polices de caractres, alignement, couleurs, etc.).
Scripts : les scripts permettent aux auteurs de concevoir des pages Web dynamiques (par exemple,
des formulaires intelligents qui ragissent au cours de leur remplissage par lutilisateur) et demployer
HTML comme support dapplications en rseau. Les mcanismes fournis pour associer HTML et scripts
sont indpendants du langage de script.
11

FARIH Sad
Impression : les auteurs voudront parfois aider lutilisateur dans limpression dautres documents, en
sus du document courant. Lorsque des documents font partie dun ensemble, on peut dcrire leurs
relations en utilisant llment HTML LINK Toute page HTML est compose, aprs la ligne de dclaration
du DTD, dun lment racine HTML qui comprend deux lments enfants :
Len-tte (HEAD) comprend des donnes non-affiches par le navigateur, servant sa configuration
ou prsentes au bnfice de lauteur, du lecteur ou dautres intervenants.
Le corps (BODY) contient les donnes qui seront affiches, encadres par des balises spcifiant
leur structure.
Une page HTML se prsente 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
tout autre quivalent dans la systme d'exploitation.
D'un browser soit Netscape Navigator, soit Microsoft Explorer (gratuit galement)
tlcharger (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.
D'avoir le dernier diteur Html sans doute performant mais coteux qu'il sera toujours temps
d'adopter lorsqu'on sera entran suffisamment sur les premires 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. Dfinition
Le HTML (HyperText Markup Language) est un format de prsentation de donnes permettant
de crer des pages web pouvant tre lues dans des navigateurs.
C'est un langage de description de donnes, et non un langage de programmation. Il est fig c'est-dire qu'une fois le document charg dans le navigateur, il ne rpond aucune action de l'utilisateur sur le
contenu de la page. Ce langage est pourvu d'un systme de balisage qui va permettre de structurer notre
document.
Le langage Html tant un ensemble de balises et d'attributs, il nous parat 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 tche, 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 prfres sont disponibles (et sans copyright). Il est alors possible
de s'en inspirer pour reprendre le procd sans avoir rinventer le monde.
Ces mmes diteurs Html proposeront des termes comme" En-tte, 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
du VBscript dans vos pages.
12

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

Une balise HTML est un lment que l'on va ajouter au texte de dpart pour dire au navigateur de
quelle manire l'afficher. Elle n'est pas affiche telle quelle dans le navigateur, elle est interprte par
celui-ci. Elle est toujours dlimite par les signes < et >.
Une balise peut en plus comporter de zro plusieurs attributs. Les attributs sont des informations
complmentaires qui la caractrisent. Ils se prsentent sous la forme
nomattribut="valeur".
Attention ne pas confondre un attribut HTML et une proprit CSS !

<html>
Exemple de balise et son attribut
<html lang="fr">
c. Types de balises
Chaque balise ouverte doit tre ferme, 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 fermes.

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 ncessitent 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 diffrence 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 (forcment invitable), il est impratif de
respecter la hirarchie des balises, c'est--dire que la premire ouverte sera la dernire tre ferme.
Le chevauchement des balises est une grave erreur.
Exemple de balises imbriques
<b><u>Ici les balises sont correctement imbriques.</u></b>

Exemple de balises chevauches
<b><u>Ici les balises ne sont</b> pas correctement imbriques, 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 dfinition de type de document, ou DTD (Document Type Definition), dfinit la structure
dun document, les lments et attributs qui y sont autoriss, et le type de contenu ou dattribut permis.
Un document bien form rpond simplement aux exigences de la spcification, tandis quun document
valide se conforme strictement aux rgles tablies par la DTD laquelle il fait rfrence.
HTML 4.01 existe en trois parfums . On spcifie la variante employer en insrant une ligne au
dbut du document. Chaque variante dispose de sa propre dfinition de type de document, ou DTD
(Document Type Definition), qui spcifie les rgles demploi de HTML de faon claire et succincte :
13

FARIH Sad
Le DTD HTML 4.01 strict comprend tous les lments et attributs qui ne sont pas dconseills ou
qui napparaissent pas dans les documents avec jeu dencadrement. Pour les documents qui
utilisent ce DTD, prendre la dclaration de type de document suivante :
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd" >
Le DTD HTML 4.01 transitoire inclut la totalit du DTD strict auquel se rajoutent les lments et
attributs
dconseills
(la
plupart
dentre
eux
concernant
la
prsentation
visuelle).
Pour
les
documents qui utilisent ce DTD, prendre la dclaration de type de document suivante :
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Le DTD HTML 4.01 de jeu dencadrement inclut la totalit du DTD transitoire complt des cadres
(frames). Pour les documents qui utilisent ce DTD, la dclaration de type de document suivante
est employe :
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
"http://www.w3.org/TR/html4/frameset.dtd" >
HTML
4.01
Frameset//EN"
2. Le DOCTYPE
quoi sert ce fameux DOCTYPE ? Est-il vraiment utile ? Oui, il est utile, mme trs utile.
Il sert d'une part dclarer quel "langage", "grammaire", ou norme on applique notre page. Cette
dclaration nous permet de soumettre nos pages au validateur du W3C (World
Wide Web
Consortium) qui vrifie que le code HTML ne comporte aucune erreur de syntaxe (balises mal fermes,
utilisation d'attributs inexistants...) en fonction
du
DOCTYPE, donc de la DTD (Document
Type
Definition) choisie. D'autre part, il indique au navigateur de quelle manire interprter telle balise, telle
proprit CSS. L'absence de cette balise est appele le mode Quirks, ou non conforme, alors qu'au
contraire, la prsence de cette balise est appele le mode Standard, ou conforme.
Pour se faire une ide de son importance, en mode Quirks, le modle de bote Microsoft ne
calcule pas de la mme manire la taille d'un bloc que le modle W3C, lorsque celui-ci a des marges
intrieures (padding), voire mme des bordures.
Et l'URL sur la ligne du DOCTYPE, est-elle vraiment utile, elle ?
La rponse 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 fcheuse tendance faire passer Internet Explorer en mode
Quirks, ce qui anantira tous vos efforts de compatibilit entre les diffrents navigateurs.
3. lment META
Un composant capital de llment HEAD, llment META est un moyen de procurer des informations
concernant le site aux moteurs de recherche, dautres auteurs Web et des serveurs Web. On peut y
placer pratiquement nimporte quel type dinformation. Cet lment est dpourvu de balise de fermeture. Un
lment META est un lment vide (dpourvu de contenu) dont la syntaxe est la suivante :
<META name=" valeur " content="valeur " >

Lattribut name dfinit ce que la valeur de content va dcrire. La balise de fermeture dun lment
META est facultative.
Un lment HEAD peut possder un nombre quelconque dlments META. Ceux-ci permettent de
fournir de nombreuses informations utiles concernant la page, comme lauteur ou la version, ce que on va
faire maintenant.
Pour insrer le nom de l'auteur:
<META name="author" content="la_nom" >

Les lments META sont en outre particulirement utiles pour faire reconnatre la page par les
robots de recherche du genre AltaVista ou Google.
<META NAME="description" CONTENT="description de la page">
14

FARIH Sad
Cette balise indique que le contenu de CONTENT est la description de la page HTML. Ce contenu
pourra tre affich par un moteur de recherche comme rsultat dune recherche dun utilisateur.
<META NAME="keywords" CONTENT="mot-cl1, mot-cl2, ..." >

Cette balise indique que le contenu de CONTENT est une srie de mots-cls qui dfinissent plus
finement la page.
Autre lment META frquent, celui qui indique le nom du gnrateur du document, gnralement
insr automatiquement par l'diteur HTML :
<meta name="generator" content="nom_du_gnrateur " >

Extrait de la section HEAD de la page daccueil de MicroApplication
<HEAD >
<TITLE >Micro Application - Editeurs de livres dinformatique, de cd-rom
et de papiers dimpression. </title>
<META NAME="description" CONTENT="Edition de livres dinformatique, de cdrom et de papiers dimpression. 15 thmatiques (bureautique, architecture,
linux, Windows, gravure, musique, mp3, culture, dcoration, jeux de cartes,
photo, programmation, cration de sites, impression, utilitaires).">
<META NAME="keywords" CONTENT="micro application, librairies informatique,
livres
informatique,
logiciel
architecture,
architecture
3D,
logiciel
dcoration, logiciel gravure, papier imprimante, papier photo, impression
papier, tlchargement logiciels, jeux cartes, formation web, cartes visites,
achatlivres">
<META NAME="Author" CONTENT="Micro Application" >
<LINK ... >
<SCRIPT>... </SCRIPT>
</HEAD >
4. lment BODY
Llment BODY renferme lessentiel : le corps du document. Tout son contenu est visible dans le
navigateur : texte, graphismes, liens hypertextes, etc. La seule faon 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'intrieur des balises <BODY></BODY>. Remarquer
que le "TITLE" est prsent dans la fentre du navigateur.
Pour les ventuelles modifications, il n'est pas ncessaire 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 dveloppement, il est important de connatre la structure d'une page
HTML. Commenons donc par voir celle-ci avec la structure minimale obligatoire d'une page:
15

FARIH Sad
Document HTML de base:
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html><head>
<title>Titre de la page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>

</body></html>
La premire ligne du document s'appelle le DOCTYPE. C'est une balise indispensable pour conserver
la compatibilit du rendu de la page sur les diffrents navigateurs modernes.
Aprs 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-tte 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 apparatront 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 tte 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 possdent leur propre systme de
commentaires.
Ces commentaires ne seront pas affichs dans le navigateur mais ils resteront prsents dans le code
source, donc il faut tout prix viter de mettre des informations confidentielles dedans.
Ils sont dlimits par  et peuvent tre multilignes. Par souci de compatibilit entre les
navigateurs et de mal interprtation de ceux-ci, il est fortement dconseill d'crire deux tirets d'union (ou
plus) conscutifs:




c. Les arrire-plans
Le langage Html permet d'agrmenter la prsentation du document d'un arrire-plan [background]
color ou compos d'une image. Ce qui apporte un lment "artistique" la page.
La balise utiliser ne pose pas de problme :
Couleur d'arrire-plan <BODY BGCOLOR="#$$$$$$">

<BODY BGCOLOR="#000088">
<H1>Bonjour</H1>
</BODY>
La lisibilit n'est pas parfaite. Heureusement, des balises sont prvues pour modifier les couleurs
utilises par dfaut 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="#$$$$$$">
16

FARIH Sad
Exemple
<BODY BGCOLOR="#000088" TEXT="#FFFF00">

<H1>Bonjour</H1>
</BODY>
On peut aussi prvoir un fond en image. Cette image (petite de prfrence) est affiche en mosaque
par le browser. Attention aux raccords... comme lorsqu'on pose du papier peint.
Texture d'arrire-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 prsenter, par exemple dans la table des
matires, les diffrents niveaux de son expos. Html a dispos ds son origine d'outils spcialement
conus cet effet. Tout document Html contiendra en majorit du texte. Voyons comment l'agrmenter
par quelques balises lmentaires.
Pour mettre le texte en gras: on l'encadre de la balise <b> :
Gras [Bold] <B>...</B> <b>Ce texte s'affichera en gras. </b>

<STRONG>Dbut et fin de zone en gras...</STRONG>
Pour mettre le texte en italique on l'encadre de la balise <i> ou <EM>...</EM>:
Italique [Italic] <I>...</I> <i>Ce texte s'affichera en italique. </i>
<EM>Dbut et fin de zone en italique...</EM>
Pour souligner le texte on l'encadre de la balise <u> :
<u>Ce texte sera soulign. </u>

Comme, par convention, les lments servant d'hyperlien sont souligns (c'est le mme que dans les
fichiers d'aide), on vitera le souligner des lments de texte pour lui donner de l'importance. On prfrera
la mettre en gras ou dans un format ou une couleur de police diffrent. Il ne faut donc pas en abuser.
Pour barrer le texte on l'encadre de la balise <s> :
<s>Ce texte sera barr. </s>

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

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

Ainsi, <SUB>escalier</SUB>escalier<SUP>escalier</SUP> aura comme rsultat
Escalier
escalier
escalier
2. Police, taille et couleur de caractre

a. La police des caractres
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 plutt qu'une seule police. En effet, il se peut que
sur un systme diffrent de la police choisie ne soit pas installe et il faut qu'il puisse alors afficher le
texte dans une police proche de celle qu'on veut avoir.
On spare alors les diffrentes polices par une virgule dans l'ordre de slection le cas o la
prcdente ne peut pas tre affiche.
<font face="verdana,sans-serif">Ce texte sera en verdana ou en sans-serif

si verdana n'est pas installe.</font>
17

FARIH Sad
b. Les niveaux de titres

Il existe diffrents niveaux de titres, ils vont de 1 6 et ont chacun leur importance. La balise
reprsentant ces niveaux de titre est <hX> o X reprsente le niveau.
Exemple de titre
<h1>Titre de ma page</h1>
Il est important de respecter la hirarchie des diffrents niveaux de titres, sachant que l'lment 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 apparatre 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> Dbut et fin de zone avec cette taille.

<font size="5">Ce texte sera en taille 5. </font>
Par dfaut, la valeur de l'attribut size vaut "3".
Il y a deux manires de modifier la valeur de cet attribut et les valeurs possibles sont les entiers de
"1" "7":
En absolu : Les valeurs possibles sont les entiers de "1" "7".
En relatif : Les valeurs possibles les entiers de "-2" "+4".
c. Les couleurs des caractres

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 manires :
En hexadcimal de type RVB et prcdes d'un dise (#) ;
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.
Et il est bien videmment possible de renseigner ces trois attributs ( color, face, size) la fois
dans la mme 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>

</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 de
caractres choisies dans sa configuration par dfaut.
Le browser affiche le texte qu'on lui "dicte" en passant la ligne lorsque celui-ci atteint le bord de
la fentre. Pour le forcer passer outre cette rgle de conduite et faire un saut la ligne
comme on le souhaite, il faut une instruction particulire. C'est la balise < BR>. Celle-ci reprsente
une action ponctuelle et n'a donc pas besoin de balise de fin.
18

FARIH Sad
Le mme browser ne tient compte que d'un seul espace entre les mots. Ainsi pour lui
<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 mme lment de texte. Il faut veiller bien les
imbriquer. Ainsi <B><I>...</I></B> est correct et <B><I>...</B></I> risque de crer des
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 mme chose, sauf qu'il faut prciser nous-mme o commence un paragraphe et o il se
termine. C'est ce quoi sert la balise <p>.
La balise <PRE>...</PRE> affiche un texte dit prformat. Le browser prend ainsi en compte tous
les espaces et sauts de ligne dfinis l'cran.
Les paragraphes et les en-ttes 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
diffrents lments. C'est le tag :
<DIV align=left>...</DIV>
<DIV align=center>...</DIV>
<DIV align=right>...</DIV>
<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 dfinir l'alignement
d'une portion de texte.
Premire page daccueil.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<HTML ><HEAD >
<TITLE >"Ma page daccueil" </TITLE >
<META name="author" content="mon nom">
<META name="version" content="1.0">
</HEAD ><BODY bgcolor=red>
<H1>Ma page daccueil </H1 >
<H2>Bienvenue sur mon site. </H2>
<P >On trouvera sur ce site des informations sur ma rgion, ma famille et
mes passions. </P >
</BODY ></HTML >
4. Les sparateurs
Les browsers intgrent un outil de mise en forme intressant pour clarifier la prsentation du texte.
C'est la ligne horizontale. La syntaxe en est fort simple:
Ligne horizontale [Horizontal Rule] <HR> Insrer une ligne horizontale

Ce tag fort simple, permettra de comprendre un peu mieux le fonctionnement du navigateur. D'abord,
on a dj dcouvert au fil de les erreurs qu'il est plutt gentil car il s'efforce toujours d'afficher quelque
chose. Ensuite, il mnage le travail en prenant sa charge des valeurs par dfaut d'un certain nombre
d'attributs.
19

FARIH Sad
Dans le cas prsent, les valeurs par dfaut de la balise <HR> sont : une paisseur de trait de 2
pixels, un alignement centr et une largeur de 100% de la fentre.
<HR
<HR
<HR
<HR
<HR
<HR
size=?> Epaisseur en pixels

width=?> Largeur en pixels
width="%"> Largeur en % de la fentre
align=left> Alignement gauche
align=right> Alignement droite
align=center> Alignement centr
Il est donc tout fait quivalent d'crire:
<HR> ou
<HR size=2 align=center width="100%"
Exemple
<H3 align=center>ISTA ADARISSA-TDI2</H3>

<HR align=center size=8 width="50%">
Commentaires :
On prfrera spcifier la largeur en % de la fentre plutt qu'en pixels car l'affichage s'adaptera
ainsi toutes les tailles et rsolutions d'cran.
On peut prfrer l'usage d'images comme sparateur (comme c'est le cas ici) pour personnaliser
son ouvrage.
VI.
Les listes
Elles servent, comme leur nom l'indique, crer une liste d'items, plus prcisment les numrer,
comme dans le cas d'un sommaire par exemple.
1. Les diffrents types de listes

On distingue cinq types de listes diffrents, chacun prvu pour un usage bien prcis :
Les listes non ordonnes, ou puces.
Les listes ordonnes.
Les listes de dfinitions.
Les listes de rpertoires.
Les listes de menus.
a. Les listes non ordonnes

Elles sont dmarques par la balise <ul> et chacun des items est entour de la balise <li> :
Exemple de liste non ordonne
<p>La liste des filires:</p>

<ul>
<li> TDM </li>
<li> TDI </li>
<li> TRI </li>
<li> TGE </li>
</ul>
Rsultat
TDM
TDI
TRI
TGE
i.
Les diffrents types de puces
On va pouvoir jouer sur le design des puces l'aide de trois types diffrents. On renseigne le type
des puces avec l'attribut type de la balise <ul>. Les types sont :
disc (par dfaut au niveau 1 d'imbrication)
20

FARIH Sad
circle (par dfaut au niveau 2 d'imbrication)

square (par dfaut au niveau 3 et suivants d'imbrication)
Dans l'exemple prcdent, on a donc vu une liste non ordonne avec une puce de type disc. Voici
quoi ressemblent les deux autres :

<ul type="circle">
<li> TDM </li>
<li> TDI </li>
<li> TRI </li>
<li> TGE </li>
</ul>
ii.
TDM
TDI
TRI
TGE

<ul type="square">
<li> TDM </li>
<li> TDI </li>
<li> TRI </li>
<li> TGE </li>
</ul>
TDM
TDI
TRI
TGE
Les puces en image
Des disques, des cercles ou des carrs, c'est bien beau, mais si on veut une puce en forme de
flche et de couleur bleue ?
Pour cela, rien de plus simple, il suffit d'utiliser une image pour remplacer la puce originale.
Cependant cette mthode n'est possible qu' l'aide de CSS et de la proprit list-style-image :
Exemple de liste non ordonne

<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 ordonnes

Elles sont introduites par la balise <ol> et chacun des items est encadr par la balise <li> :
Exemple de liste ordonne
<p>Top 3
<ol>
<li>
<li>
<li>
</ol>
des matires :</p>

Programmation </li>
Rseau </li>
Multimdia </li>
Rsultat
1.
Programmation
2.
Rseau
3.
Multimdia
Exercice
On veut afficher cette liste:
Les mois du printemps
avril
mai
juin
Les mois d'automne
21

FARIH Sad
1.
octobre
2.
novembre
3.
dcembre
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écembre</OL>
Commentaire
é est l'un de ces caractres spciaux utiliss pour reprsenter le . Les diteurs Html se
dchargera de cette corve.
i.
Les diffrents types de numrotation
Il existe cinq manires diffrentes de numroter les listes ordonnes. On renseigne le type de
numrotation avec l'attribut type de la balise <ol>.
Les types sont :
1 : Numrotation par les chiffres arabes (par dfaut).
I : Numrotation par les chiffres romains.
i : Numrotation par les chiffres romains minuscules.
A : Numrotation par les lettres de l'alphabet.
a : Numrotation par les lettres de l'alphabet minuscules.
Dans l'exemple prcdent, on a donc vu une liste ordonne avec une numrotation par les chiffres
arabes. Voici quoi ressemblent les autres :
<p>Top 3 des matires

:</p>
I.
<ol type="I">
II.
<li>Programmation</li>
III.
<li>Rseau</li>
<li>Multimdia</li>
Programmation
Rseau
Multimdia
</ol>

:</p>
<ol type="A">
<li>Rseau</li>
<li>Multimdia</li>
</ol>
ii.
A. Programmation
B. Rseau
C. Multimdia

:</p>
<ol type="i">
<li>Rseau</li>
<li>Multimdia</li>
</ol>
:</p>
<ol type="a">
<li>Rseau</li>
<li>Multimdia</li>
</ol>
i.
ii.
iii.
Programmation
Rseau
Multimdia
a. Programmation
b. Rseau
c. Multimdia
Modifier le dbut de la numrotation
Il est tout fait possible, pour une raison ou une autre, de modifier le numro de dpart par lequel
va s'incrmenter la numrotation.
Pour cela, il suffit de prciser une valeur l'attribut start de la balise <ol>. Cette valeur doit
dans tous les cas tre numrique :
Exemple de liste ordonne
<p>Top 3 des matires :</p>

<ol type="I" start="8">
<li>Rseau</li>
<li>Multimdia</li>
</ol>
22

FARIH Sad
Rsultat
VIII.
Programmation
IX.
Rseau
X.
Multimdia
c. Les listes de dfinitions

Elles sont dlimites par la balise <dl> qui comprend une liste de termes dfinir reprsents par
la balise <dt> qui peuvent avoir une ou plusieurs dfinitions elles-mmes encadres par la balise <dd>
(une pour chaque dfinition).
Exemple de liste de dfinitions
<dl>
<dt>Oreiller</dt>
<dd>Pice de literie bourre de plumes, de duvet, de crin... destine
soutenir la tte pendant le repos.</dd>
<dt>Puce</dt>
<dd>Insecte de trs petite taille se dplaant par sauts. </dd>
<dd>March o l'on vend des objets d'occasion. </dd>
</dl>
Rsultat
Oreiller
Pice de literie bourre de plumes, de duvet, de crin... destine soutenir la tte pendant le repos.
Puce
Insecte de trs petite taille se dplaant par sauts.
March o l'on vend des objets d'occasion.
d. Les listes de rpertoires

Elles sont encadres par la balise <dir> et chacun des items est compris dans la balise <li>.
Exemple de liste de rpertoires
<dir>
<li>CSS</li>
<li>Fichiers</li>
<li>Images</li>
<li>JS</li>
</dir>
Rsultat
CSS
Fichiers
Images
JS
e. Les listes de menus

Elles sont reprsentes par la balise <menu> et chacun des items est dlimit par la balise <li>.
Exemple de liste de menus
<menu>
<li>Accueil</li>
<li>Page 1</li>
<li>Page 2</li>
</menu>
Rsultat
Accueil
Page 1
Page 2
23

FARIH Sad
2. Les listes imbriques

L'imbrication des listes permet une prsentation claire et dtaille d'un menu ou d'un sommaire par
exemple. On peut imbriquer les listes non ordonnes et ordonnes sans distinction et mme les mlanger :
Exemple de listes imbriques
<ol type="I">
<li>La gense</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>
Rsultat
I.
II.
III.
La gense
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
La mort
3. L'utilit des listes aujourd'hui
La principale utilisation des listes de ces jours se fait par les listes non ordonnes pour la cration
de menus. L'imbrication de ces listes non ordonnes couple avec un soupon de CSS permet de faire
des menus multiples niveaux d'affichage, comme les menus droulants. D'autre part, on peut retrouver
les listes ordonnes principalement pour la rdaction de sommaires, notamment destins aux FAQ.
VII.
Les images
1. GIF ou JPEG?
Avant de passer aux balises, il faut savoir ce qui suit.
Les deux formats d'image (maximum 256 couleurs) les plus utilises sur le Web, sont le format GIF
et le format JPEG. Pour le format GIF, on retiendra la caractristique "entrelac" qui permet de
charger progressivement l'image lors de l'ouverture de la page.
Ces deux formats donnent des rsultats assez quivalents bien que JPG soit plutt recommand
pour des images avec des tons nuancs ou dgrads. Les diffrents formats d'image supports par cette
balise sont :
GIF
JPG
PNG
BMP ( viter)
24

FARIH Sad
L'ennemi sur le Web, c'est la taille des images! Plus l'image sera grande, plus le temps de
chargement sera long... au risque de dcourager vos visiteurs. Prsenter une petite image indiquant
un lien vers l'image complte est galement un bon conseil.
Il n'est pas inutile de prvoir dans la panoplie de compositeur Web, un logiciel de retouche
d'images "PhotoShop" ou "Paint Shop Pro".
Il est trs facile de se faire une bibliothque d'images tout en surfant sur le 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 droulant (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
l'adresse...
se
trouve
Pour afficher une image en HTML, on utilise la balise <img>. Elle admet diffrents 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,
trs utile pour pouvoir l'afficher.
L'attribut 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 charge. Il aide de plus les moteurs de recherche rfrencer
l'image et les dficients visuels savoir ce que l'image reprsente.
Remarque
L'attribut alt n'est pas cens crer une infobulle lors du survol de l'image, qui est le rle 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 l'adresse indique.
Gnralement, on place les images dans le mme rpertoire que les pages Html.
Presque en consquence logique de ceci, le fait d'utiliser la mme image plusieurs reprises dans
un fichier Html ne modifie en rien sa taille.
Prvoir un texte pour les browsers n'ayant pas l'option image active, permet au lecteur de ne pas
perdre le fil de l'expos et peut-tre d'activer cette option pour la dcouvrir.
Il est important pour la fluidit de l'affichage de prciser la taille en hauteur et largeur de l'image
car le browser peut ainsi connaissant l'emplacement rserver 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 entoures d'une bordure.
25

Applications Hypermedias

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Applications Hypermedias

Transféré par

Droits d'auteur :

Formats disponibles

TDI- Applications Hypermdias

2. Intranet, Extranet, INTERNET ?

Pourquoi mettre en uvre un intranet?

De l'intranet vers l'INTERNET

TDI- Applications Hypermdias

Quels sont les facteurs de russite d'un intranet?

Nommer un responsable qui sera Monsieur intranet;

Conception de sites web ergonomiques avec accs aux donnes informatiques;

Support aux utilisateurs.

Utiliser au maximum les standards du march;

Composants hardware et software

Diffrents composants hardware et logiciels sont requis:

Un serveur logique o rsideront les informations de l'entreprise (agenda, base de donnes

TDI- Applications Hypermdias

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

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

Installer, grer et maintenir les logiciels de l'intranet;

Assurer la gestion de l'intranet (disponibilit des services, performance, matriel, pannes,

Grer les utilisateurs (qui peut accder et quoi);

intranet.une_entreprise.com. Il est noter l'existence de CMS (systmes de gestion de contenu) permettant

TDI- Applications Hypermdias

Qu'est-ce qu'un site web ?

Fonctionnement d'un moteur de recherche

TDI- Applications Hypermdias

3. Applications pour Internet

Fourniture de services rseaux aux applications

connexion sur plusieurs voies de communication

(routage, contrle des flux)

et rception des squences de bits

b. La couche Application (niveau 7)

DHCP (Dynamic Host Configuration Protocol)

TDI- Applications Hypermdias

On na plus conserver une

trace de toutes les adresses IP assignes.

WINS (Windows Internetworks Name Service)

Un serveur WINS fournit les services d'enregistrement, de renouvellement, de libration et de

c. Les protocoles d'Internet

Le FTP (File Transfert Protocol)

TDI- Applications Hypermdias

Format du lien HTML

rpertoire cyril-gruau pour le fichier : ConceptionBD.pdf

TDI- Applications Hypermdias

Les suites de HTTP/HTML

Configuration TCP/IP et DNS

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

TDI- Applications Hypermdias

b. DNS primaire / DNS secondaire

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

TDI- Applications Hypermdias

TDI- Applications Hypermdias

1. Bref historique de HTML

Language) a t dvelopp initialement par Tim

documents composs, les feuilles de style, les scripts et limpression.

des images, des

TDI- Applications Hypermdias

3. crire du code html.

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

4. Qu'est-ce que le HTML ?

Numered List..." qui sont propres au langage Html.

TDI- Applications Hypermdias

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

Attention ne pas confondre un attribut HTML et une proprit CSS !

Les balises simples

HTML. Ces balises n'ont pas besoin d'tre fermes.