Applications Hypermedias

7/30/2019 Applications Hypermedias

http://slidepdf.com/reader/full/applications-hypermedias 1/25

TDI- Applications Hypermédias FARIH Saïd

1

I. concepts fondamentaux 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é, iloffre donc une interprétation du fichier. On met ici en avant une terminologie: le fichier est sur le disquedur, tandis que le document est affiché par le navigateur.

a.

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

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

utiliser les applications gratuites ou peu onéreuses sur un réseau , chacun des ordinateursdu réseau doit prendre en charge le protocole / . Un réseau peut être privé, auquel cas iln'est pas connecté à , 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'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 protocoles de communication / , serveur, browser,e-mail, etc.). Il est destiné à l'échange et au partage d'informations entre des programmes et/ou desutilisateurs connus et autorisés.

L'intranet est généralement connecté au réseau pour permettre la communication avec lemonde extérieur.

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

Le travail de groupe,La gestion de la circulation des documents et du travail associé.

Soit disponibles (pour la majorité des cas): les logiciels de messagerie, les logiciels de travail engroupe (Lotus Notes, Exchange, etc.), etc.;Soit à développer spécifiquement au cas par cas.

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

aux informations de l'entreprise (exemple : consultation du catalogue de produits) et aux utilisateurs del'intranet d'accéder au réseau .

Un système de protection pare-feu et de filtrage des informations (firewall) doit être prévu pourprotéger le réseau intranet des agressions extérieures.




2

qui sera Monsieur intranet;

, le plan de déploiement, ainsi que les coûts;qui seront implémentées sur l'intranet et obtenir le consensus de la direction

et des représentants des utilisateurs;pour la mise en œuvre, c'est-à-dire dans les

domaines suivants: Réseaux ;

Conception de sites web ergonomiques avec accès aux données informatiques; Gestion de la sécurité; Support aux utilisateurs.

du marché;(éviter l'info-indigestion) et soigner l'aspect ergonomique pour les utilisateurs;et mettre en œuvre un service d'aide;

atteints par rapport aux objectifs.Schéma général :

Différents 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ù résideront les informations de l'entreprise (agenda, base de donnéesclients, fournisseurs, produits, commandes, etc.);

Un serveur logique contenant les applications qui traitent les données (méthode de calculde la facturation, gestion des stocks, etc.);

Un serveur logique où résidera le contenu des écrans (pages) qui seront présentés auxutilisateurs (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:

Cartes 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 ( , Patch Panel). Lecâ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.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.).




3

Des logiciels de services: chaque service (courrier électronique, partage d'agenda, tableaud'information, etc.) demande un logiciel approprié.Des logiciels applicatifs spécifiques: les applications particulières (facturation, gestion de stock, etc.)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éderaux 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 traitementsinformatiques au niveau du PC utilisateur (par exemple la validation du format de l'informationrentrée par l'utilisateur). Cette décentralisation du traitement au niveau du PC diminue le trafic surle réseau et améliore la performance d'un point de vue utilisateur.Le personnel

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. 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 del'entreprise mais selon un projet prenant en compte les besoins de toutes les parties prenant del'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 avec le serveur web Apache et le serveur de bases de

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

Server). Il suffit ensuite de configurer un nom de domaine pour le serveur (par exempleintranet.une_entreprise.com. Il est à noter l'existence de (systèmes de gestion de contenu) permettantde gérer la publication des pages par une équipe de rédacteurs.

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

fournisseurs et autres partenaires, d'accéder au réseau . Par exemple, une société souhaite partagerdes informations professionnelles avec ses distributeurs et ses clients en leur accordant un droit d'accèslimité à son réseau . permet d'étendre l'accès au réseau à des utilisateursautorisés. Ce type de réseau , partiellement accessible aux seuls utilisateurs autorisés, par le biaisd' est appelé réseau . Il est plus facile et plus économique d'installer un réseau par le biais d' que d'installer une liaison de communication dédiée entre deux entreprises. Toutefois,un réseau est moins sécurisé qu'un réseau privé, car des utilisateurs non autoriséspeuvent 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èmed'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 pour

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

réponses 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 . 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 .




4

c. 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 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 « » et

proposant des liens vers un ensemble d'autres pages hébergées sur le même serveur, et parfois des liensdits «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 :

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.

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 estappelée nom de domaine. Un site web peut ainsi être hébergé par plusieurs serveurs, appartenanttous à un même domaine : www.monsite.com, www2.monsite.com, intranet.monsite.com, etc.

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.

web

Le « » est l'outil de l'internaute, lui permettant de surfer entre les pages web de ses sitespréférés. Il s'agit d'un logiciel possédant une interface graphique composée de boutons denavigation, 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 dedocuments), et ces informations sont pour la plupart renouvelées quotidiennement. Le moteur derecherche est un élément indispensable pour s'y retrouver!

Un (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 unformulaire de recherche.

Des robots (logiciels), appelés (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 gigantesquesbases de données afin de permettre leur interrogation.Aucun moteur de recherche ne peut parcourir la totalité des pages en une journée (ce processusprend généralement plusieurs semaines), chaque moteur adopte donc sa propre stratégie, certainsallant même jusqu'à calculer la fréquence de mise à jour des sites.

http://f/CommentCaMarche/internet/url.htm

http://f/CommentCaMarche/internet/url.htm




5

a.

Fourniture de services réseaux aux applications

Formatage, conversions, (+ compression et cryptage) desdonnées

établissement, contrôle, terminaison d'une connexion entredeux systèmes

-Découpage du message en paquets (et inversement :réassemblage des paquets en message dans le bonordre)-Gestion de plusieurs connexions sur la même voie decommunication (multiplexage) ou éclatement d'une

connexion sur plusieurs voies de communicationAcheminement au mieux des paquets de données(routage, contrôle des flux)

Structuration des données en trames et transmissionsans erreurs

Envoi et réception des séquences de bits

b. 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à. Le protocole permet de configurer automatiquement / sur des ordinateurs clients .

Cela facilite grandement la gestion d'un parc de machines / car il est alors inutile de saisirmanuellement les informations suivantes qui sont fournies par le serveur :

Adresse ;Masque de sous-réseau ;Passerelle ;Serveur ;

Serveur de nom ( par exemple) ;Nom de domaine , type de nœud , d'étendue , etc.




6

est à la fois un service et un protocole qui permettent d’allouer automatiquement des adresses et d’autres paramètres de configuration aux ordinateurs d’un réseau. attribue ces adresses de

manière dynamique depuis un groupe d’adresses.

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

trace de toutes les adresses assignées.On peut de manière automatique attribuer une nouvelle adresse à un client qu’on déplace d’unsous-réseau à un autre.On peut libérer l’adresse d’un ordinateur hors connexion pour un certain temps, et réattribuerl’adresse à un autre ordinateur. On réduit les risques de duplication d’adresses grâce au suivi automatique des attributions par

.

Un serveur fournit les services d'enregistrement, de renouvellement, de libération et derésolution de noms aux ordinateurs clients configurés pour utiliser ces services. Les noms sontainsi résolus en adresses .

WEB

Le WEB , c'est l'application qui a « vendu » le réseau qui jusque-là n'était prisé que dequelques initiés. Pourtant ce développement récent, est dû au CERN, Centre Européen de la RechercheNuclé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 ou hypercard de Apple.

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

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

( ) 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 sontraccordées à l’ .

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

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

Le protocole de transfert de fichier utilise deux connexions : l'une pour les ordres (le port 21) etl'autre pour les données (20). La connexion pour les données est créée à chaque fois qu'un fichier esttransféré mais aussi pour lister un répertoire. Cette connexion de données s'établit du serveur vers le




7

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.

est utile dès qu'il s'agit de transférer des données entre deux machines A et B. Comme en, la machine A doit être équipée d'un client , alors que la machine B est-elle équipée d'un

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

commandes internes. Mais il dispose aussi de commandes utilisateur. Les commandes internes serventà établir et à maintenir la connexion , 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 renvoie alors le message de login

définit par l’administrateur de B. L’utilisateur de A envoie alors la commande attendue par B,où login est le nom de l’utilisateur. B attend alors la commande , où password est le motde passe correspondant à l’utilisateur login. De nombreux serveurs autorisent les connexions ditesanonymes, c’est à dire que n’importe quel utilisateur peut s’y connecter pour prendre des fichiers, et surcertains serveurs déposer des fichiers. Dans une phase de connexion anonyme, on envoie généralement

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

effectuée, le client envoie la commande , de manière à connaître le système distant Le protocole (Simple Mail Transfert Protocol) est certainement un des protocoles le plus utilisé

sur l’ . Il est totalement transparent à l’utilisateur, ce qui le rend convivial, et dispose de clients etde serveurs sur la majorité des architectures. Son but est de permettre le transfert des courriersélectroniques. Il est similaire au protocole , de par son langage de commande. Il est généralementimplémenté sur le port /25. Sur système Unix, sendmail est généralement utilisé, et se comportecomme client et comme serveur.

d. web

HTML Syntaxe :

Exemples :

- /cyril-gruau/ConceptionBD.pdf Donne accès en anonyme au serveur dans lerépertoire cyril-gruau pour le fichier : ConceptionBD.pdf news.imt-mrs.fr/active donne l’accès à liste des groupes - Les news

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

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

est Hyper Text Transport Protocol,HTML

le langage des pages Hyper Text Markup Language.

Pour , le langage des documents s'appelle le HTML , il existe un certain nombre d'outils pour créer cespages (Adobe PageMil, Dreamweaver, Microsoft FrontPage, etc..). Ce sont des fichiers texte lisibles, et un

bon spécialiste peut écrire directement en HTML . Bref ce qui vend le mieux le réseau est peut être unedes applications les plus triviales.

Chaque page est transmise par une session port 80 qui est fermée à la fin de la réception. Leclic sur une information hypertexte est purement local et va directement au serveur concerné, on nerepasse pas par le même serveur.

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 uneinformation située aux Japon, on a de bonne chance de l'avoir dans un cache régional ou national. Cescaches sont activés de manière transparente (fonction ). L'adresse est passée en texte au




8

serveur 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.

HTML

Le business étant rentré dans les protocoles , les choses avancent très vite mais de façonplus désordonné. Auparavant, beaucoup de développements étaient dus à des organismes de recherchesans 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 unprogramme au client. Plusieurs développements ont eu lieu ces derniers temps.

, société qui vend et fabrique des stations de travail sous Unix a créé un nouveau langage etconcept de réseau : le JAVA. Ce langage est de type C++ et le programme est envoyé au client quil'exécute ensuite. Il existe des compilateurs qui vont créer un pseudo code qui sera interprété dansla machine distante.

met en avant qui est du même style mais très dépendant de et de laplateforme Intel. D'où problème pour faire tourner l'application sur un ou une station Unix.

fournit aussi 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

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

serveurs permettent aux utilisateurs d'employer des noms d'hôtes (par ex: myhost.com) pour accéderaux ressources du réseau. Le serveur fournit l'adresse correspondant au nom d'hôte, soit

directement, soit en consultant un serveur situé plus haut dans la hiérarchie des noms de domaine.L'adresse 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 duréseau, seule la valeur numérique est utilisée. Le est non pas une couche du réseau, mais uneapplication. Les noms sont composés par une suite de caractères alphanumériques encadrés par despoints. Par exemple romarin.univ-aix.fr correspond à l'adresse 193.50.125.2 et le mécanisme qui associe lenom 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 nomou .

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 USint : Organisations internationalesmil : Militaires Usnet : Réseauorg : Organisation à but non lucratif bf : Burkina Fasode : Allemagne

ma : Marocfr : France




9

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

www.commentcamarche.net, plutôt que d'écrire l'adresse des machines (du genre 185.34.22.34).Ces derniers étant assez difficile à retenir et que les adresses 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 , sont utilisés. Chaque

ordinateur connecté à internet est configuré avec une liste de serveurs à contacter (cette liste estgénéralement automatiquement renseignée par la fournisseur d'accès).

On peut simplifier l'image en disant que le serveur est un gros annuaire, comme celui dutéléphone, qui permet à partir d'un nom de trouver son numéro de téléphone.

Le serveur est donc un annuaire d'adresse d'ordinateurs avec la correspondance des " "(adresse internet ).

Puisqu'on ne peut pas garantir que la première machine (le primaire) va forcément fonctionner,il existe une seconde machine, appelée secondaire, permettant de répondre si jamais la première nele fait pas ! Tout domaine a l'obligation d'avoir deux avec adresse IP fixe.

c. Les données sont toujours adressées et transmises de la même façon: Peu importe si on appelledes pages WWW, si on envoie du courrier électronique, téléchargez des fichiers avec FTP outravaillez grâce à Telnet sur un ordinateur éloigné

Le TCP s'assure que les paquets de données arrivent vraiment chez le destinataire et dans le bon

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 quela transmission est considérée comme étant .

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

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

formes d’adresse. Ceci est possible grâce au ( ), qui est chargé de convertir sibesoin les adresses en noms symboliques ou les noms symboliques en adresses .

A l’heure actuelle, nous utilisons le protocole version 4, qui permet d’adresser 232 machines(codage des adresses sur 4 octets), mais vu la forte croissance que connaît le réseau , il estmaintenant nécessaire d’étendre cet espace d’adressage. C’est le but de la prochaine version de l’ ,version 6, qui permettra un codage des adresses sur 128 bits (16 octets), et donnera ainsi la possibilité

d’adresser 2128

machines.Lorsqu’on recherche l’adresse ou le nom associé à une adresse d’une machine du réseau, onémet une requête au serveur , 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 gère une plage d’adresses . 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é « .fr », et donnons-lui la classe C 127.0.0.0 et le

de 255.255.255.0. Cet organisme dispose donc de 256 adresses , 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éeet désignée comme serveur . 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 qu’on appellera « ns1 ».




10

Nombre deNombre deréseauxréseaux

126

16 384

2 097 152

Nombre d’hôtesNombre d’hôtes

par réseaupar réseau

16 777 214

65 534

254

Classe AClasse A

Classe BClasse B

Classe CClasse C

PlagePlaged’ID de réseaud’ID de réseau

(premier octet)(premier octet)

1 – 126

128 – 191

192 – 223




11

III. Le langage HTML HTML

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 depages 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, lienshypertextes, etc.

HTML

La spécification 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

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.Ses principales innovations concernent l’internationalisation, l’accessibilité, les tableaux, les

documents composés, les feuilles de style, les scripts et l’impression. 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 lareprésentation des caractères internationaux, le sens des écritures, la ponctuation et autres particularitésdes 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.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 plusaccessibles à ceux qui présentent des déficiences physiques.

Les auteurs disposent maintenant d’un plus grand contrôle sur leur structure et leurdisposition (par exemple, les regroupements de colonnes). Ils peuvent spécifier la largeur des colonnes etpermettre aux agents utilisateurs d’afficher les données de table progressivement, au fur et à mesure duchargement, plutôt que d’attendre le chargement entier du tableau.

L’élément OBJECT (de même que ses ancêtres, les éléments plus spécifiquesIMG 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 auxauteurs de spécifier une hiérarchie de restitutions de remplacement aux agents utilisateurs qui ne gèrentpas certaines restitutions particulières.

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 laprésentation des documents (informations sur les polices de caractères, alignement, couleurs, etc.).

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 scriptssont indépendants du langage de script.




12

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 configurationou 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écifiantleur structure.

Une page HTML se présente donc fondamentalement comme suit :<!DOCTYPE ...>

<HTML ><HEAD >

...Contenu...

</HEAD ><BODY >

Contenu...

</BODY ></HTML >

html

On a besoin:D'un éditeur de texte tout simple comme par exemple le Bloc-notes ou Notepad de Windows outout autre équivalent dans la système d'exploitation.

D'un browser soit 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.

D'avoir le dernier éditeur 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 .

HTML

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

de créer des web pouvant être lues dans des .C'est un langage de description de données, et non un . 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 notredocument.

Le langage Html étant un ensemble de balises et d'attributs, il nous paraît utile sinon indispensablede 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 lorsdes modifications, annulations ou suppressions en cours de travail. Il on faudra bien alors onplonger 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 possiblede 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,

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.




13

b. HTML

Une balise HTML est un élément que l'on va ajouter au texte de départ pour dire au navigateur dequelle manière l'afficher. Elle n'est pas affichée telle quelle dans le navigateur, elle est interprétée parcelui-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>

de balise et son attribut<html lang="fr">

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

de balises :

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.de balise simple<img src="adresse/de/l/image">

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.de balise double

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

d. 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.

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

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 structured’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 :




14

Le DTD HTML comprend tous les éléments et attributs qui ne sont pas déconseillés ouqui 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" >

Le DTD HTML 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 Transitional//EN"

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

Le DTD HTML 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 suivanteest employée :

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

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

DOCTYPE

À 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...) en fonction du DOCTYPE , donc de la DTD (Document Type

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'aucontraire, 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.

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.

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 yplacer 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 defournir de nombreuses informations utiles concernant la page, comme l’auteur ou la version, ce que on vafaire maintenant.

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 lesrobots de recherche du genre AltaVista ou Google.

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




15

Cette balise indique que le contenu de CONTENT est la description de la page HTML . Ce contenupourra ê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 plusfinement la page.

Autre élément 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 pap iers 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 >

BODY

L’élément BODY renferme l’essentiel : le corps du document. Tout son contenu est visible dans lenavigateur : texte, graphismes, liens hypertextes, etc. La seule façon de masquer une information consistela 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 puisenregistrer le fichier. Ensuite utiliser la commande Actualiser du navigateur.

HTML

a. 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:




16

HTML

<!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 première ligne du document s'appelle le DOCTYPE . C'est une balise indispensable pour conserverla 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 letexte et toutes les images qui apparaîtront lorsqu'un visiteur viendra sur la page.

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 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 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 decommentaires.

Ces commentaires ne seront pas affichés dans le navigateur mais ils resteront présents dans le codesource, donc il faut à tout prix éviter de mettre des informations confidentielles dedans.Ils sont délimités par  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 (ouplus) consécutifs:







c. 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 couleursutilisé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="#$$$$$$">




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ïquepar 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 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émenterpar quelques balises élémentaires.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>Début 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>Début 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 éléments servant d'hyperlien sont soulignés (c'est le même que dans lesfichiers d'aide), on évitera le souligner des éléments de texte pour lui donner de l'importance. On préfèrerala 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> :<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 résultat

Escalier escalier escalier a.

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 quesur un système différent de la police choisie ne soit pas installée et il faut qu'il puisse alors afficher letexte 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>




18

b. 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.

<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 undocument. Le titre <h1> étant le plus important, il convient également de ne le faire apparaître qu'uneseule fois dans un document.

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

<FONT SIZE=?>...</FONT> Début et fin de zone avec cette taille.<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

"1" à "7":En absolu : Les valeurs possibles sont les entiers de "1" à "7".En relatif : Les valeurs possibles les entiers de "-2" à "+4".

c. 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 (#) ;

Exemples :Bleu #0000FF Vert #00FF00 Blanc #FFFFFF Violet #8000FF

Rouge #FF0000 Jaune #FFFF00 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 même balise <font>.

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

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>

Le texte tout simple s'écrit sans balises. Il sera repris par le browser avec la police et taille decaractè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 dela 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ésenteune action ponctuelle et n'a donc pas besoin de balise de fin.




19

Le même 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 même élément de texte. Il faut veiller à bien les

imbriquer. Ainsi <B><I>...</I></B> est correct et <B><I>...</B></I> risque de créer desennuis.

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

La balise <PRE>...</PRE> affiche un texte dit préformaté. Le browser prend ainsi en compte tousles 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 :<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 définir l'alignementd'une portion de texte.

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


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

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 quelquechose. Ensuite, il ménage le travail en prenant à sa charge des valeurs par défaut d'un certain nombred'attributs.




20

Dans le cas présent, les valeurs par défaut de la balise <HR> sont : une épaisseur de trait de 2pixels, 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> ou

<HR size=2 align=center width="100%"

<H3 align=center>ISTA ADARISSA-TDI2</H3>

<HR align=center size=8 width="50%">

On préférera spécifier la largeur en % de la fenêtre plutôt qu'en pixels car l'affichage s'adapteraainsi à 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 personnaliserson ouvrage.

VI. Les listesElles 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.

On distingue cinq types de listes différents, chacun prévu pour un usage bien précis :Les listes non ordonnées, ou à puces.

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

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

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

<ul>

<li> TDM </li>

<li> TDI </li>

<li> TRI </li>

<li> TGE </li>

</ul>

TDM TDI TRI TGE

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)




21

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

square (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>

o o o o

<p>La liste des filières:</p> <ul type="square">

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

</ul>

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 :

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

<ul>

<li> TDM </li>

<li> TDI </li>

<li> TRI </li>

<li> TGE </li>

</ul>

li {

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

}

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

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

<ol>

<li> Programmation </li>

<li> Réseau </li>

<li> Multimédia </li>

</ol>

1. Programmation2. Réseau3. Multimédia

On veut afficher cette liste:

avril

mai juin




22

1. octobre2. novembre3. 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écembre</OL>

é est l'un de ces caractères spéciaux utilisés pour représenter le é. Les éditeurs Html sedéchargera de cette corvée.

Il existe cinq manières différentes de numéroter les listes ordonnées. On renseigne le type denumérotation avec l'attribut type de la balise <ol>. Les types sont :

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

Dans l'exemple précédent, on a donc vu une liste ordonnée avec une numérotation par les chiffresarabes. 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. ProgrammationII. RéseauII. Multimédia

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

i. Programmationii. Réseauiii. Multimédia

<p>Top 3 des matières:</p> <ol type="A"> <li>Programmation</li>

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

A. ProgrammationB. RéseauC. Multimédia

<p>Top 3 des matières:</p> <ol type="a"> <li>Programmation</li>

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

a. Programmationb. Réseauc. Multimédia

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 doitdans tous les cas être numérique :

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

<ol type="I" start="8"> <li>Programmation</li>

<li>Réseau</li>

<li>Multimédia</li>

</ol>




23

VIII. ProgrammationIX. RéseauX. Multimédia

c. 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).

<dl>

<dt>Oreiller</dt>

<dd>Pièce de literie bourrée de plumes, de duvet, de crin... destinée

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

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

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

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

<dir> <li>CSS</li>

<li>Fichiers</li>

<li>Images</li>

<li>JS</li>

</dir>

CSSFichiersImages

JSe.

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

<menu>

<li>Accueil</li>

<li>Page 1</li>

<li>Page 2</li>

</menu>

AccueilPage 1Page 2




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 :

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

I. La genèseII. La vie

A. L'enfanceB. L'adolescenceC. Le passage à l'âge adulte

Le jeune adulte La crise de la quarantaine

D. La vieillesseIII. La mort

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 fairedes 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 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 decharger 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 cettebalise sont :

GIF JPG

PNG

BMP (à éviter)




25

L'ennemi sur le Web , c'est la taille des images! Plus l'image sera grande, plus le temps dechargement sera long... au risque de décourager vos visiteurs. Présenter une petite image indiquantun lien vers l'image complète est également un bon conseil.

Il n'est pas inutile de prévoir dans la panoplie de compositeur Web , un logiciel de retouched'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

browser, il suffit de se positionner sur l'image, de cliquer avec le bouton droit de la souris et desuivre les instructions du menu déroulant (Save Image As...).

Html<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 HTTP ou ,

très utile pour pouvoir l'afficher.L'attribut alt affiche un texte alternatif à la place de l'image dans le cas où, pour une raison ouautre, celle-ci ne peut pas être chargée. Il aide de plus les moteurs de recherche à référencerl'image et les déficients visuels à savoir ce que l'image représente.

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.

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

En 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 dans

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 pasperdre 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'imagecar le browser peut ainsi connaissant l'emplacement à réserver pour celle-ci, continuer à afficher letexte.

Les balises sont :<A HREF="fichier htm"><IMG SRC="image gif"></A>

Documents

Applications Hypermedias