TDI- Applications Hypermdias FARIH Sad

Applications Hypermdias
I. concepts fondamentaux
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.

1. Prsentation

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.

TDI- Applications Hypermdias 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.).

TDI- Applications Hypermdias 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: vi. Installer, grer et maintenir les logiciels de l'intranet; Assurer la gestion de l'intranet (disponibilit des services, performance, matriel, pannes, cot); 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.

TDI- Applications Hypermdias 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.

TDI- Applications Hypermdias FARIH Sad

3. Applications pour Internet

a.
COUCHE 7. APPLICATION 6. PRESENTATION 5. SESSION

Couches rseau
ROLE Fourniture de services rseaux aux applications Formatage, conversions, (+ compression et cryptage) des donnes tablissement, contrle, terminaison d'une connexion entre deux systmes -Dcoupage du message en paquets (et inversement : rassemblage des paquets en message dans le bon ordre) -Gestion de plusieurs connexions sur la mme voie de communication Acheminement (multiplexage) au mieux des ou clatement de d'une donnes connexion sur plusieurs voies de communication

4. TRANSPORT

3. RESEAU 2. LIAISON 1. PHYSIQUE

paquets

(routage, contrle des flux) Structuration des donnes en trames et sans erreurs Envoi et rception des squences de bits transmission

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.

TDI- Applications Hypermdias 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. ! 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... On na plus conserver une

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

TDI- Applications Hypermdias 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. 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 Format du lien HTML

TDI- Applications Hypermdias 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

a. Prsentation
Le protocole DNS fournit un service de rsolution de nom et d'adresse aux applications clientes. Les

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

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

TDI- Applications Hypermdias 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 .

TDI- Applications Hypermdias FARIH Sad Rsum des classes d'adresses Rsum des classes d'adresses

10

Nombre de rseaux

Nombre dhtes par rseau

Plage dID de rseau (premier octet)

Classe A Classe B Classe C

126 16 384 2 097 152

16 777 214 65 534 254

1 126 128 191 192 223

TDI- Applications Hypermdias FARIH Sad

11

III.

Le langage HTML
Le langage HTML (HyperText

1. Bref historique de HTML

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.

TDI- Applications Hypermdias 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 :

12

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

TDI- Applications Hypermdias FARIH Sad

13

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 Attention ne pas confondre un attribut HTML et une proprit CSS ! <html> Exemple de balise et son attribut <html lang="fr">

nomattribut="valeur".

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

La dfinition de type de document, ou DTD (Document Type Definition), dfinit la structure

1. DTD
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 :

TDI- Applications Hypermdias 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 :

14

<!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 utilisation d'attributs inexistants...) en fonction du

Wide Web Type

Consortium) qui vrifie que le code HTML ne comporte aucune erreur de syntaxe (balises mal fermes, DOCTYPE, donc de la DTD (Document 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">

TDI- Applications Hypermdias 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.

15

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

TDI- Applications Hypermdias FARIH Sad Document HTML de base:

16

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <title>Titre de la page</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <!-- Ici le site --> </body></html> La 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 --> 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:

<!-- Voici un premier commentaire sur une ligne. --> <!-- Voici un deuxime commentaire. Celui-ci est multilignes. --> <!------------------ Cette mthode est dconseille ! ----------------->

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="#$$$$$$">

TDI- Applications Hypermdias FARIH Sad Exemple

17

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

^{Ce texte sera en exposant.}

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

_{Ce texte sera en indice.} 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>

TDI- Applications Hypermdias FARIH Sad

18

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> <!--C'est fini--> </BODY></HTML>
Quelques commentaires s'imposent; Le texte tout simple s'crit sans balises. Il sera repris par le browser avec la police et taille 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.

TDI- Applications Hypermdias FARIH Sad Le mme browser ne tient compte que d'un seul espace entre les mots. Ainsi pour lui

19

<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" "http://www.w3.org/TR/html4/loose.dtd"> <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.

TDI- Applications Hypermdias 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.

20

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

TDI- Applications Hypermdias FARIH Sad

21

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 :

<p>La liste des filires:</p> <ul type="circle"> <li> TDM </li> <li> TDI </li> <li> TRI </li> <li> TGE </li> </ul>
ii. Les puces en image

o o o o

TDM TDI TRI TGE

<p>La liste des filires:</p> <ul type="square"> <li> TDM </li> <li> TDI </li> <li> TRI </li> <li> TGE </li> </ul>

TDM TDI TRI TGE

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

<p>La liste des filires:</p> <ul> <li> TDM </li> <li> TDI </li> <li> TRI </li> <li> TGE </li> </ul>
CSS

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

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

Rsultat 1. 2. 3.

des matires :</p> Programmation </li> Rseau </li> Multimdia </li>

Programmation Rseau Multimdia On veut afficher cette liste:

Exercice Les mois du printemps avril mai juin

Les mois d'automne

TDI- Applications Hypermdias FARIH Sad 1. 2. 3. octobre novembre dcembre On ouvre l'diteur de texte puis on saisit:

22

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

&eacute; 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>
</ol>

Programmation Rseau Multimdia

<p>Top 3 des matires :</p> <ol type="A"> <li>Programmation</li> <li>Rseau</li> <li>Multimdia</li> </ol>
ii.

A. Programmation B. Rseau C. Multimdia

<p>Top 3 des matires :</p> <ol type="i"> <li>Programmation</li> <li>Rseau</li> <li>Multimdia</li> </ol> <p>Top 3 des matires :</p> <ol type="a"> <li>Programmation</li> <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>Programmation</li> <li>Rseau</li> <li>Multimdia</li> </ol>

TDI- Applications Hypermdias FARIH Sad Rsultat VIII. IX. X. Programmation Rseau Multimdia

23

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

TDI- Applications Hypermdias FARIH Sad

24

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

III.

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

1. GIF ou JPEG?

pour des images avec des tons nuancs ou dgrads. Les diffrents formats d'image supports par cette balise sont :

GIF JPG PNG BMP ( viter)

TDI- Applications Hypermdias 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...).

25

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

se

trouve

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

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.