Texte et informatique - … · Texte et informatique - Cours d'initiation ... Chapitre 1 Le texte...

________________________________________________________________ Texte et informatique - Cours d'initiation - Université de Caen, 1998-99 - Hervé Le Crosnier -

Université de Caen

Texte et

informatique

une introduction à l'informatique utilisant :

• Le langage de balisage HTML (HyperText Markup Language) • Le langage de feuilles de style CSS (Cascading Style Sheet) • Le langage de script Javascript

Cours et polycopié préparé par

Hervé Le Crosnier Département d'informatique, Université de Caen

Version 0.91 Septembre 1998 [email protected]

http://www.info.unicaen.fr/herve


Préface Un polycopié n'est pas l'équivalent d'un livre. Un livre est autonome. Il doit contenir l'ensemble des informations, remarques et exemples qui permettent de suivre le développement des idées de l'auteur. Un polycopié est un support associé à un cours vivant. Il ne sert qu'à donner des compléments à une présentation orale et à fournir un support pour la mémorisation. C'est la seule ambition de ce polycopié. Mais dire cela, c'est aussi espérer que le polycopié s'améliorera avec l'expérience, qu'il sera complété par des exercices, des travaux pratiques, des remarques... La présentation orale, les exercices en Travaux Dirigés présentent l'architecture du cours. Le polycopié donne des compléments. Il y a ainsi des éléments complexes qui sont éclaircis par le cours et des exemples simples qui sont réservés aux Travaux Pratiques. Nous en sommes à la première version de ce document, qui est écrite avant même que le cours ait lieu, avant que l'interaction avec les étudiants ne vienne permettre de le faire progresser. La notion de version est importante en informatique. Nous avons affaire à des logiciels (et maintenant à des documents électroniques) évolutifs. Le nom d'un logiciel, ou bien le titre d'un document placé sur l'internet, ne suffisent pas toujours à le définir. Il convient d'ajouter le "numéro de version". En général, une version "de premier développement", c'est à dire qui n'est pas encore fiable, possède un numéro commençant par 0. Les premières versions qui circulent d'un logiciel ou d'un document sont souvent les versions "0.9". C'est par exemple le cas de ce polycopié (la version 0.91 contient simplement des corrections orthographiques). Avec les remarques et le repérage des erreurs par les premiers utilisateurs d'un logiciel (ou les premiers lecteurs d'un document électronique), apparaît la version 1.0 Le logiciel est plus largement diffusé et prend son essor. L'auteur trouve des améliorations, des astuces de programmation ou ajoute des fonctions nouvelles. Chaque "mise à jour" du logiciel voit progresser son numéro de version. On considère que les versions dont seul le chiffre décimal progresse sont des versions qui améliorent un logiciel sans apporter des changements profonds dans l'apparence ou dans les fonctionnalités. Régulièrement des pas importants sont franchis, et les logiciels passent "à la version supérieure", en modifiant le chiffre des unités. Ainsi, dans ce cours nous parlerons des version 4 des navigateurs internet (Internet Explorer 4 ou NetScape 4)... mais en réalité la dernière version, au jour où cette préface est écrite, est 4.6 pour NetScape et 4.5 pour Internet Explorer. Entre deux versions existent des version "bêta", c'est-à-dire des versions qui sont diffusées pour que les spécialistes puissent repérer les erreurs et les signaler à l'auteur (ou la société de production). Si vous ne souhaitez pas vous inscrire dans


un tel processus, évitez les versions bêta.. Celles-ci sont repérées par la lettre "b" dans le numéro de version. Le développement des logiciels est un processus évolutif. L'informatique dans son ensemble fonctionne suivant ce modèle de conception cyclique, qui propose des produits "de base" et les améliore au fil de l'utilisation. Ce processus fait même participer les utilisateurs à la définition de la version ultérieure d'un produit. Vous découvrirez ce processus dès l'écriture de vos premières pages HTML. Le premier jet ne sera pas satisfaisant, mais le processus de visualisation/correction du code/visualisation permet de peaufiner les pages, de mieux présenter les textes. L'informatique est une science expérimentale. Elle est construite sur un jeu de va-et-vient entre la conception et l'utilisation (la "lecture" dans le domaine des documents électroniques qui nous sert de fil conducteur). L'objectif de ce processus de conception est de réaliser des logiciels qui soient "ergonomiques", c'est-à-dire qui remplissent les fonctions pour lesquels ils sont développés de la façon la plus "fluide" possible. Dans le domaine du texte, la fonction à remplir est de faciliter la lecture. Le typographe, depuis l'invention de Gutenberg, est celui qui donne au texte son écrin, qui aide à la lisibilité. La belle typographie est celle qui "ne se voit pas", qui disparaît tant elle est "évidente", "fluide", tant elle épouse le texte et s'efface avec modestie pour que le contenu, les idées de l'auteur soient au mieux portées vers le lecteur. On n'en est pas encore là pour les documents informatiques, et souvent le clinquant, le "surf", l'exploit informatique, remplacent la modestie du typographe et son effacement devant le texte. J'espère que ce cours d'introduction vous aidera aussi à distinguer la structure du texte, son articulation en pages, en noeuds de présentation d'une idée. L'organisation des idées est souvent distincte de l'habillage "multimédia". Les beaux documents informatiques sont encore à inventer entre la rigueur de l'exposé et la fluidité de la lecture. Ce sera l'enjeu d'un processus cyclique et collectif. Caen, le 28 septembre 1998 Hervé Le Crosnier Les remarques et commentaires sur ce polycopié sont à envoyer à : [email protected]

Les exercices et compléments à ce polycopié sont à l'URL : http://www.info.unicaen.fr/herve/enshtml/


Chapitre 1

Le texte et l’informatique

Une introduction à l’informatique Objectifs de ce chapitre :

- présenter la notion de codage et d'interprétation d'un code - présenter le matériel informatique, et les points clés permettant de choisir un

ordinateur - présenter le système de fichier des divers systèmes d'exploitation - présenter les différents types de fichiers que nous allons rencontrer - donner des notions élémentaires d'interface homme-système informatique.

L’informatique est un outil puissant, qui couvre maintenant tous les secteurs de l’activité, depuis le contrôle de processus industriels jusqu'à la création musicale. Le domaine du texte reste un excellent modèle pour apprivoiser l’informatique et découvrir les règles de base et les modes de fonctionnement des ordinateurs. 1 - Le texte informatique, première approche Nous connaissons le texte imprimé. Un livre, une page, un article de journal nous présentent des idées que nous devons lire pour interpréter le sens. L’informatique intervient dans la phase de constitution de ce document. Charge ensuite au lecteur, en fonction de ses compétences, de saisir un sens dans l’agencement de caractères et d’images qui lui est présenté. Le document tel qu’il est présenté au lecteur s’appelle le rendu. Il est le stade final d’une chaîne de traitement informatique. Au cœur de cet ensemble de traitement on trouve un texte encodé. Nous passons du texte codé au rendu par un interpréteur. Même si le mot est ambiguë, il n’y a là aucune « interprétation sémantique », mais un processus informatique qui prend un code dans l’ordre où il se présente, et produit un résultat, une exécution. Dans le cas du texte on parle d'une « mise en page ». Le texte informatique est présenté au lecteur sous deux formes principales : • sur une feuille imprimée : on parle alors de « traitement de texte » ou encore de

« PAO : Publication Assistée par Ordinateur »


• sur un écran : on parle de « page-écran ». La présentation sur écran est généralisée sur l’internet dans un réseau mondial de documents numériques que l’on appelle le web.

Texte encodé

<P><SPANclass=lettrine>C

paragraphe encodé parle langage de balisage<B>HTML</B>.

Rendu

Ceci est unparagraphe encodé parle langage de balisageHTML.

Visualiseur

</SPAN>eci est un

Pour produire du texte encodé, nous disposons d’un éditeur de texte. Il s’agit d’un programme généraliste (pour toute sorte de texte, mais plutôt fruste) ou spécialisé (pour un type spécifique de codage) qui produit le texte encodé. Quand l’éditeur de texte est aussi programme qui sert à produire le rendu, on parle d’un traitement de texte. Le plus connu en France est le traitement de texte Microsoft Word. Quand l’éditeur de texte permet de masquer le texte encodé pour présenter directement le rendu au fur et à mesure de la frappe du texte, on parle d’un logiciel WYSIWYG (What You See Is What You Get, ou en français : tel écran, tel écrit). De nombreux programmes sont ainsi disponibles qui permettent une manipulation du texte, de la présentation, de la mise en page ou des images en mode interactif (une autre façon de dire WYSIWYG : chaque modification est immédiatement visible). On peut aussi utiliser des outils différents pour éditer le texte (produire la forme encodée) ou le visualiser (après interprétation). C’est souvent le cas dans le domaine du texte pour le web. On parle alors de visualiseur pour désigner l’outil logiciel permettant de créer le rendu à partir du texte encodé.

Frappe auclavier

Texte encodé Rendu

Editeur de texte Visualiseur

Une question informatique importante concerne le type de code utilisé dans la phase intermédiaire. On peut ainsi distinguer : • le codage typographique, qui indique les choix de police ou de style des divers

blocs de texte.


• le codage logique, qui indique le rôle de chaque bloc de texte. C’est au visualiseur d’offrir un rendu typographique spécifique pour chaque type de bloc.

Le codage peut s’exprimer de deux façons : • un mode « propriétaire » pour lequel seul le fabricant du logiciel sait à quoi

correspondent les indications typographiques encodées • un mode « normalisé » dans lequel le codage est public, validé par un organisme

de normalisation. Dans le mode propriétaire, l’utilisateur n'a pas accès au code. Il se contente du rendu et le modifie en utilisant le logiciel de traitement de texte spécifique. Ce mode est intéressant tant que le fabricant du code ne modifie pas ses « formats de fichier » (son codage spécifique). Sinon, l’utilisateur doit en permanence acheter la nouvelle version du logiciel pour pouvoir continuer à lire des textes produits par d’autres. Dans le mode normalisé, plusieurs logiciels « visualiseurs » (ou interpréteurs de texte) peuvent utiliser le même document encodé. Un document encodé suivant une norme publique peut aussi être lu sur divers systèmes (Macintosh, Windows, Linux...). De même, plusieurs éditeurs de texte peuvent produire du code, depuis des éditeurs simples jusqu'à des éditeurs interactifs : dans tous les cas, les visualiseurs peuvent interpréter le code et offrir un rendu pour la lecture humaine sur écran ou après impression. Dans l’univers du web, que nous allons étudier, le format de codage des documents est : HTML - HyperText Markup Language L’instance de normalisation qui publie les spécifications du langage et qui organise des rencontres régulières entre tous les acteurs du marché du web (producteurs de visualiseurs, gestionnaires de sites) pour faire évoluer le langage est : W3C - World Wide Web Consortium Les principaux visualiseurs de documents du web sont : • Netscape Navigator : nous sommes actuellement à la version 4 de ce logiciel. Il

fonctionne sur les principaux types d’ordinateurs (Macintosh, Windows, Unix, Linux)

• Microsoft Internet Explorer , dont la version 4 est la plus moderne, est principalement adaptée aux systèmes Windows et Macintosh.

On peut éditer du code HTML à partir de n’importe quel éditeur de texte, sur n’importe quel ordinateur. C'est un avantage de la normalisation. • un éditeur de texte généraliste nous oblige à saisir directement les codes à partir

du clavier � sous windows, on peut utiliser le logiciel Bloc-notes ou Wordpad � sous Macintosh, on utilise BBEdit ou SimpleText � sous Linux ou tout autre forme d’Unix, on utilise Emacs

• les logiciels de traitement de texte proposent maintenant des enregistrements directs en format HTML (exemple : Word97 propose "enregistrer sous... format HTML").


• des éditeurs spécialisés sont disponibles. On peut distinguer :

� les éditeurs de code, qui proposent des aides à la rédaction du code HTML, mais laissent l’utilisateur responsable de ses choix d’organisation du texte et de code. Ils sont très utiles pour les personnes confirmées, mais aussi pour apprendre HTML.

� les éditeurs interactifs (ou wysiwig) masquent le code à l’utilisateur. Il sont

de plus en plus puissants et permettent de produire rapidement la version de base d’une page encodée en mode HTML. Les professionnels les utilisent pour le premier jet, qu’ils perfectionnent ensuite avec des éditeurs de code. Les amateurs peuvent se contenter du code produit par ces éditeurs HTML. Exemples : PageMill, Front Page,...

2 - La structure des ordinateurs Un ordinateur est composé de périphériques qui s’articulent autour d’un noyau central représenté par le système d’exploitation. Ce système d’exploitation est le véritable chef d’orchestre de l’ordinateur. Il organise le système de fichiers et les accès aux périphériques et aux logiciels. Un ordinateur se définit d’abord par le système d’exploitation qu’il utilise. Les principaux systèmes d’exploitation des micro-ordinateurs sont : • Windows , développé par Microsoft pour les ordinateurs PC • MacOS , développé par Apple pour les ordinateurs Macintosh • Linux, développé par une équipe mondiale de programmeurs autour de Linus

Torvalds pour une gamme étendue de machines (Macintosh, PC Intel, Sun,...) Si Linux emporte l’adhésion des informaticiens, Windows est le système d’exploitation le plus répandu (près de 95% des systèmes installés) ce qui n’est pas sans poser des problèmes de monopolisation de l’informatique. Nous travaillerons sous une version réseau de Windows (Windows NT), mais nous essaierons de garder une distance suffisante pour permettre l’utilisation des trois systèmes d’exploitation mentionnés. L’élément essentiel du système d’exploitation est le système de gestion de fichiers. En informatique, on appelle fichier tout ensemble structuré d’informations. En fait, pour simplifier, on distingue les fichiers des logiciels. Un logiciel permet de créer des fichiers qui conservent l’information propre à chaque utilisateur. Ainsi, un traitement de texte permet de créer des documents ; un logiciel de messagerie permet de créer et archiver des fichiers de messages ; un logiciel de traitement d’image permet de modifier et stocker des images. Un fichier comporte à la fois : • un auteur, qui est la personne qui a crée le contenu (texte, image, son...) • un générateur, qui est le logiciel qui a servi à la création. Le fichier peut alors être

lu par ce même générateur, ou bien par un autre logiciel qui est dit « compatible ». Si le générateur crée des fichiers normalisés (dont la forme codée a été définie par


une instance de normalisation), de nombreux logiciels permettent de le lire. Si au contraire le logiciel crée des fichiers « propriétaires », il faudra disposer de ce même logiciel pour relire le fichier.

Quand on échange un fichier, il convient donc de savoir quel est le générateur, afin de pouvoir garantir la relecture. Un même générateur peut cependant permettre d’enregistrer un fichier sous différent format. Dans ce cas, le fichier peut être relu par un autre logiciel qui reconnaît le format choisi pour l’enregistrement. L’intérêt des formats normalisés tels HTML pour le texte, ou JPEG pour les images est de rendre la lecture d’un fichier toujours possible par un logiciel différent de celui qui a présidé à la création. 3 - Le matériel informatique Le matériel informatique est en évolution constante et très rapide. Les quelques points de repère suivant permettent de choisir un matériel adapté aux besoins. Un "ordinateur" est composé d'éléments qui sont pilotés par le système d'exploitation. Chaque "périphérique" (élément matériel composant l'ordinateur) dispose d'un "pilote" qui est intégré dans le système d'exploitation. Un même ordinateur peut donc fonctionner avec différents écrans, imprimantes, disques durs... si chaque élément périphérique possède un pilote pour le système d'exploitation. Les principaux éléments d'un ordinateur sont : • Le microprocesseur : C'est le composant principal qui effectue les calculs. Les principaux microprocesseurs sont :

- les Pentium d'Intel et leurs compatibles (Cyrix, ... ) qui équipent les ordinateur dits PC , fonctionnant sous Windows ou bien sous Linux.

- les PowerPC produits par IBM, qui équipent les ordinateurs Macintosh ou PC.

La vitesse d'horloge du microprocesseur détermine la rapidité des calculs et donc l'efficacité de l'ordinateur (mais aussi son prix, évidemment).

• La mémoire vive : Le microprocesseur a besoin d'une zone pour stocker les résultats immédiats de ses calculs. Cette mémoire est volatile, c'est-à-dire qu'elle s'efface quand on éteint l'ordinateur. On distingue la "mémoire vive" proprement dite (RAM en Anglais) de la mémoire vidéo qui permet la préparation de l'écran. Plus la quantité de mémoire vive est importante, plus les actions demandées à l'ordinateur sont effectuées rapidement. • Les mémoires de masse : Elles permettent le stockage à long terme, ou le stockage des fichiers importants (qui sont supérieurs à la taille de la mémoire vive). On distingue :

- le disque dur qui réside à l'intérieur du boîtier de l'ordinateur. Il comporte le système d'exploitation, les principaux logiciels et des espaces pour les fichiers de l'utilisateur. Le disque dur standard aujourd'hui dispose de 3 Giga-octets de mémoire (contre seulement 20 Méga-octets il y a dix ans). La rapidité d'accès au disque dur et le taux de transfert sont importants pour la rapidité globale d'un système informatique, les opérations sur disque étant les plus lentes de toute la chaîne informatique.


- la disquette est une mémoire amovible. Sa capacité est de 1,4 Méga-octets, ce qui est faible en regard des besoins actuels. La disquette est de surcroit un support très fragile.

- les disques durs amovibles (ZIP ) commencent à se répandre et vont prendre la place de la disquette. D'une capacité de 100 Méga-octets, ils sont de plus en plus fiables et rapides (même s'ils restent plus lents que les disques durs internes).

- les cédéroms sont des mémoires importantes (500 méga-octets), mais plus lentes et que l'on utilise simplement en lecture. Les cédéroms sont édités et peuvent être dupliqués en des milliers d'exemplaires pour la distribution.

• L'écran La qualité de l'écran détermine la lecture et la précision des images. On utilise actuellement des écrans de 17 pouces en milieu professionnel et de 15 pouces pour les ordinateurs domestiques. L'écran est piloté par une carte vidéo, qui dispose d'une mémoire propre (mémoire vidéo) et détermine le nombre de couleurs qui sont utilisables (plusieurs millions de couleurs pour les écrans modernes, contre 16 couleurs il y a dix ans). • Le modem est le périphérique permettant d'échanger des données au travers du réseau téléphonique. Il est actuellement le moyen le plus utilisé pour l'accès à Internet. Les modems actuels fonctionnent à 56 kbps (kilo-bits par seconde). • L'imprimante permet d'imprimer les textes. Laser ou jet d'encre sont les deux technologies les plus employées. En milieu professionnel, les imprimantes laser couleur recto-verso commencent à s'implanter. A domicile, les imprimantes jet d'encre couleur sont disponibles dans les grandes surfaces. D'un faible prix d'achat, elles s'avèrent onéreuses en consommables (encre et nettoyage de la buse). • Le scanner ou numériseur en bon français, permet d'obtenir un fichier informatique à partir d'une image dessinée, imprimée ou photographique. Le matériel informatique connaît une évolution très rapide, ce qui permet, à prix constant, d'obtenir des outils de plus en plus performants. Le marché de l'occasion doit être regardé avec précaution. Pour les applications modernes (internet, graphisme, jeux sur cédérom, et même outils de bureautique) la puissance devient indispensable. Les anciennes versions sont souvent inadaptées... à moins d'utiliser un système d'exploitation économe en mémoire et puissance comme Linux ... et surtout d'être un spécialiste de l'installation et de la maintenance. Dans les milieux professionnels, on peut considérer qu'un ordinateur est amorti en deux ans (i.e. sa valeur au bout de deux ans est considérée comme nulle sur le plan comptable, son coût ayant été réparti sur cette très courte période). C'est à peu près le rythme de renouvellement du matériel professionnel. Les délais sont bien évidemment plus élastiques pour le matériel domestique, mais il convient de garder cet élément à l'esprit dans lors de l'achat d'un ordinateur. 4 - L'organisation des fichiers dans la mémoire de masse


De la même façon que des documents sont rangés dans un bureau par chemises, tiroirs, armoires, voir pièces spécialisées, les fichiers sont rangés dans la mémoire de l’ordinateur suivant un schéma arborescent.

racine

Répertoire 1 Répertoire 2 Répertoire n

Sous-rep. 1a Sous-rep. 1b Sous-rep. 1n Sous-rep. na Sous-rep. nbFichierf1

Fichierf1

Fichierf2

Sous-rep. 2a

Fichierf1

Fichierf2

Le système d’exploitation conserve l'adresse de tous les fichiers qui sont placés dans la mémoire de l’ordinateur, et permet de les copier, les effacer, les déplacer ou d’en créer de nouveaux. Le nom d’un fichier se présente de deux manières : • son nom court, qui est le nom directement attaché au fichier • son nom complet, qui représente le chemin permettant d’aller de la racine du

système de fichiers jusqu’au fichier désigné. On peut ainsi avoir plusieurs fichiers portant le même nom (court)... s’ils sont placés dans des répertoires différents. Cette propriété permet d’organiser les fichiers d’une façon qui apparaît la plus logique à l’utilisateur. Penser à l’organisation de ses fichiers, dossiers et sous-dossiers est la première activité de celui qui s’initie à l’informatique (La seconde est d’organiser les sauvegardes... ). Les noms de fichiers (courts et complets) sont attribués de façon différente selon les systèmes d’exploitation. • sous MS-DOS :

- le nom court est formé de deux parties : le nom « propre » de 8 caractères au maximum et une extension de 3 caractères. Les deux parties sont séparées par un point. Exp : rapport.doc - Le nom long est formé par la liste des répertoires traversés depuis la racine, chaque répertoire étant séparé par le caractère antislash (\). La racine est désignée par le nom du disque mémoire (en général A: pour la disquette et C : pour le disque dur principal). Exp : C :\info\exam\rapport.doc


En raison de la place de MS-DOS dans le monde (premier système d'exploitation ayant eu un succès commercial dans la micro-informatique), ce mode de nommage est majoritaire, et nous vous conseillons de le respecter pour la préparation de vos dossiers

• sous Windows (95 et NT) : Le principe reste celui de MS-DOS. Cependant, Windows accepte des « noms longs » de 32 caractères. Le problème est que ce nom long disparaît quand on copie le fichier sur disquette. Nous vous conseillons donc de garder le mode de nommage de MS-DOS : moins de 8 caractères pour le nom propre et une extension de trois caractères. Windows masque souvent l’extension, en la remplaçant par un icône spécifique. Il convient de changer la configuration pour que l’extension soit visible, ce qui permet d’apprendre à reconnaître les différents types de fichiers et évite de nombreuses erreurs et confusions. Parfois même, ce système d’exploitation met d’office la première lettre du nom de fichier en majuscule ! C’est un problème important : pour pouvoir apprendre et acquérir une autonomie par rapport à la machine, il faut qu’un système informatique renvoie en image ce qui est réellement décidé par l’utilisateur. Avec les formes de masquage et de modification de nom, Windows ou plutôt la société Microsoft qui le produit, estime que l’utilisateur restera toujours un débutant, soumis à la machine et aux modes automatiques des logiciels Microsoft pour utiliser son ordinateur. Le nom complet est rarement utilisé sous Windows (comme sous Macintosh) car ce système d’exploitation utilise une « interface graphique » qui représente les répertoires comme des dossiers. On ouvre un dossier par un « double-clic » et apparaissent alors les sous-répertoires et les fichiers...

• sous MacOS : Les noms de fichiers peuvent contenir caractères, ponctuation et symboles et posséder jusqu'à 32 caractères. Nous vous conseillons de vous méfier de ces possibilités pour le nommage des fichiers. En particulier, nous vous conseillons de n’utiliser que les lettres non accentuées, d’éviter les espaces et de ne conserver comme caractère additionnel que le caractère souligné (underscore : _ ) et le point. Ces règles sont utiles quand on transfère les fichiers sous d’autres systèmes d’exploitation. Même si la notion d’extension est étrangère au monde Macintosh, nous vous conseillons de la conserver pour les applications liées au web afin de permettre l’interopérabilité (l’utilisation de n’importe quel type d’ordinateur pour lire ou transmettre un même fichier). Le nom complet est masqué par l’utilisation de l’interface graphique. Sous MacOS, les répertoires sont séparés par le caractère deux-points ( : )

• sur UNIX (et sa version pour PC : LINUX) : Les noms de fichiers peuvent avoir jusqu'à 255 caractères. Nous vous conseillons cependant de respecter les mêmes règles que sur MacOS.


Pour obtenir le nom complet on sépare les répertoires par le caractère slash (/). Étant donné la place importante de UNIX dans l’internet, c’est ce modèle qui est choisi pour le web. UNIX possède une notion d’utilisateur (chaque individu dispose d’un compte personnel). On évite de remonter jusqu'à la racine du système d’exploitation en considérant le compte de l’utilisateur comme une pseudo-racine. Pour indiquer cela, on utilise le caractère tilde (~) suivi du nom de compte. On trouve souvent une telle forme sur le web.

5 - Les divers types de fichiers Tout ce qui est enregistré sur une mémoire informatique est composé de « fichiers ». C’est un terme très générique en informatique. On distingue deux grands types de fichiers : • les fichiers texte sont composés de caractères de texte, et sont lisibles par tout

utilisateur à partir d’un simple éditeur de texte. • les fichiers binaires sont codés suivant des règles spécifiques et requièrent donc des

logiciels adaptés pour assurer la relecture. L’extension permet de savoir quel est le type de fichier et d’indiquer le mode de codage interne. L'extension possède trois caractères sous MS-DOS ou bien 4 caractères sous UNIX. L'extension offre une bonne indication permettant de savoir quel sera le logiciel permettant de visualiser (ou interpréter) le contenu d’un fichier. Quelques exemples : • fichiers texte :

- documents de « texte seul ». Extension : .txt (exp : rapport.txt ) Lecture : tout éditeur de texte, et tout traitement de texte (mais la typographie disparaît. On ne conserve que la suite de caractères composant le texte). - fichiers « HTML ». Extension : .htm ou .html (exp : index.html) Lecture : pour voir le rendu, il faut un « visualiseur web » comme Internet Explorer ou NetScape Navigator. Pour voir le code lui-même, on utilise un éditeur de texte (Emacs), ou un éditeur spécialisé pour HTML (Agile HTML editor, Arachnophilia) - fichiers « rtf ». Extension : .rtf (exp : rapport.rtf) Lecture : rtf est un format d’échange qui permet de conserver la typographie d’un fichier issu des traitements de textes. Il permet d’échanger des fichiers « bureautiques » entre ordinateurs différents (Macintosh et Windows), ou bien entre logiciels bureautiques différents, ou encore entre versions différentes d’un même logiciel (c’est fréquent avec Microsoft Word).

• fichiers binaires :

- documents issus de traitement de texte. L'extension dépend du logiciel. Pour Microsoft Word l’extension est .doc ; pour WordPerfect l’extension est .wp5 exp : rapport.doc)


Lecture : le codage interne des fichiers issus de traitement de texte est « propriétaire ». Il faut disposer du logiciel qui a permis la création pour relire un fichier. Cependant, le nombre de logiciels de bureautique étant limité, les principaux logiciels du marché proposent des « convertisseurs » qui savent transcoder un fichier binaire d’un traitement de texte vers un autre... à condition que le fichier d’origine soit issu d’une version de logiciel antérieure à celle du logiciel de lecture. - fichiers images. Extension : on trouve de nombreux formats de codage des images, certains sont propriétaires (par exemple les fichiers de CAO - Conception Assistée par Ordinateur- issus de Autocad), d’autres ont des formats publics ou mieux encore normalisés. Sur le web on trouve principalement trois types de fichiers d’images :

. les fichiers jpeg (extension .jpg ou .jpeg) pour les images photographiques (exp : magueule.jpg) . les fichiers gif (extension .gif) pour les dessins en 256 couleurs avec des à-plats (principalement pour les icônes) (exp : suite.gif et retour.gif) . les fichiers png (extension .png) devraient remplacer les fichiers gif dans les années à venir (c’est un format normalisé, alors que gif est issu de la société Compuserve et utilise un algorithme de compression breveté).

Lecture : les visualiseurs web permettent de décoder les fichiers .gif et .jpeg . Des logiciels de dessin (PaintShopPro sous Windows, FreeHand sous Macintosh) ou de traitement d’images (Photoshop sous Macintosh et Windows, Gimp ou XV sous Linux) permettent de lire les autres formats de fichiers d’image et de transformer les images. - fichiers exécutables. Extension : sous Windows, l’extension .exe désigne des fichiers qui peuvent fonctionner par eux-mêmes (sans utiliser d'autres programmes que le système d’exploitation). Les fichiers exécutables représentent les logiciels, qui permettent de créer des fichiers encodés pour stocker l’information.

6 - L’accès aux fichiers : l’interface utilisateur

Les fichiers sont enregistrés sur une mémoire de masse. L'accès au fichiers se fait au travers d'une interface. Chaque type de système d'exploitation possède une interface différente. Les interfaces graphiques représentent les fichiers et les logiciels sous la forme d'icônes. Les répertoires sont des dossiers dans lesquels on peut glisser les fichiers. Ce modèle est plus pratique pour l'utilisation des fichiers par l'utilisateur.


Le programmeur préfère souvent les interfaces en mode commande, plus puissantes et permettant de manipuler les fichiers en masse. Les systèmes UNIX, comme Linux, pour les ordinateurs PC permettent les deux approches simultanément. Au travers de l'interface, on aborde la question de l'ergonomie des applications informatiques : comment une application permet de donner à l'utilisateur le maximum d'informations et lui permet de remplir le plus aisément ses besoins en demandant la moindre charge cognitive (éviter de faire appel à la mémoire, ou réduire les manipulations complexes). La qualité des interfaces est déterminante dans les questions ergonomiques. L'analyse du langage, permettant des questions en "formulation libre" ou l'étude de la circulation au sein d'un ensemble de documents sont aussi importantes pour la qualité et l'ergonomie d'une application informatique. Pour le système que nous allons utiliser (Windows), trois règles d'interface sont à connaître : • les menus déroulants sont placés en haut de l'écran, dans la "barre des menus" de l'application. Pour chaque logiciel, ces menus représentent la majeure partie des fonctions disponibles. En face d'un nouveau logiciel, ou pour découvrir une application, il faut "explorer les menus" : regarder les propositions. • le clic sur le bouton droit de la souris permet d'accéder à un "menu contextuel", qui permet des manipulations sur les fichiers (suppression, copie, déplacement...). • la barre des tâches située en bas de l'écran indique tous les logiciels et les opérations qui sont en cours au même moment. On peut réduire une fenêtre de l'écran sur la barre des tâches, et aussi aisément replacer la fenêtre en plein écran à partir de la barre des tâches. Les menus déroulants dépendent de chaque application, toutefois certaines règles sont respectées par tous les logiciels : - le menu "fichier" "file" en anglais permet de manipuler les fichiers : ouverture, enregistrement, impression. Dans ce menu, on fera attention à la distinction entre les items :

- enregistrer, qui enregistre par dessus le fichier existant de même nom - enregistrer sous... qui permet d'enregistrer le fichier actif (qui est

dans la fenêtre active), soit sous un autre nom (duplicata), soit sous un autre format (pour des échanges entre machines).

- le menu édition contient les opérations :

- couper : supprimer une zone sélectionnée et la placer dans une mémoire tampon appelée presse-papiers ;

- copier : laisser intact, mais placer une copie de la zone sélectionnée dans le presse papier ;

- coller : placer le contenu du presse papier à l'endroit du pointeur.


- l'item préférences ou option permet de définir des comportements généraux du logiciel. On parle de personnaliser un logiciel en définissant les préférences qui sont adaptées à chaque utilisateur particulier.


Chapitre 2

Introduction à l'internet

Objectifs de ce chapitre

- comprendre ce que veut dire "être connecté à l'internet" - évaluer l'offre qui est faite aux particuliers pour obtenir un accès internet - présenter le service du World Wide Web - définir l'environnement de travail que nous utiliserons pour la suite du

cours. Plus encore que le reste de l'informatique, la découverte de l'internet se fait par exploration. Des millions d'internautes ont placé des pages sur le web que vous pouvez aller lire (démarche orientée sur le contenu) mais aussi étudier comme modèle de mise en page (démarche orientée vers l'apprentissage personnalisé de HTML). Internet est aussi un réseau d'individus, chaque internaute étant repéré par son "adresse électronique" (mél). Ces individus peuvent aussi échanger, s'informer mutuellement, s'entraider,... et plus encore si affinité. La messagerie électronique, si elle n'est pas l'objet de cet enseignement est avant tout le fluide vital de l'internet. Si vous décidez de devenir un internaute, vous aurez une adresse personnelle qui vous permettra de vous engager dans des groupes de discussion, dans des relations d'un type différent de vos relations "en présence". L'internet n'est pas un simple réseau d'accès à des documents (la sous partie de l'internet qu'est le web). C'est plus que cela grâce à l'échange possible entre les utilisateurs. La messagerie n'est pas le seul mode d'échange, mais il est à la fois le plus simple, le plus répandu (dans tous les pays du monde) et celui qui vous permettra d'être introduit dans les autres modes d'échange (news, chat en direct, espaces virtuels, groupware pour l'écriture collaborative...). 1 - Que veut dire “ être connecté à l’internet ” ? Un ordinateur est connecté à l’internet quand il dispose d’un numéro IP et qu’il héberge des logiciels permettant d’échanger avec d’autres ordinateurs qui disposent eux-aussi d’un numéro IP. L’échange se fait en respectant le protocole de l’Internet (protocole TCP/IP, qui ajoute la vérification aux échanges IP). Au bilan, la définition de l’internet est parfaitement circulaire : l’internet est constitué par l’ensemble des ordinateurs qui respectent le protocole IP (Internet Protocol). Or cet ensemble


d’ordinateurs grandit chaque jour, ce qui le rend plus facile d’accès et multiplie les services et les documents qui sont disponibles. D’un autre point de vue, l’internet est une interconnexion de réseaux, un “ inter-réseautage ”. Ainsi, on accède à l’internet en accédant à l’un des réseaux qui respecte le protocole IP, dès que ce réseau possède un routeur qui le relie à un autre réseau IP. La croissance de l’internet se fait ainsi sans “ chef d’orchestre ”. De nombreux organismes ou entreprises peuvent constituer des réseaux IP qui deviendront membre de l’internet en installant un routeur vers d’autres réseaux. Bien évidemment, cette capillarité ne peut supporter les flux importants qui circulent sur l’internet qu’en construisant des réseaux plus rapides spécialisés dans l’interconnexion. On les appelle backbones, ou épines dorsales. L’interconnexion entre épines dorsales est assurée par des GIX (Groupements d’Interchange). De tels réseaux sont l’apanage de grands opérateurs de télécommunication, et leur maîtrise mondiale est l’objet d’intenses tractations et rachats d’entreprises. RENATER en France est l’épine dorsale des réseaux d’université et des grands centres de recherche. On assiste à une tendance à la régionalisation, voire localisation des épines dorsales du réseau. On trouve ainsi des réseaux métropolitains qui permettent de disposer entre ordinateurs d’une même ville de débits très importants, notamment en utilisant le câble (par exemple le projet de la ville d’Hérouville Saint-Clair dans le Calvados). Des définitions schématiques qui précèdent, on peut dire qu'être connecté à l’internet c’est posséder un numéro IP et établir un chemin entre son ordinateur (ou bien le routeur de son institution si l’on dispose d’un réseau local) et le plus proche routeur qui est lui-même connecté à l’internet. C’est le rôle des FAI Fournisseurs d’Accès Internet de fournir un numéro IP à ses abonnés. Un individu ou une institution contacte un FAI, qui moyennant un paiement forfaitaire négocié propose un (ou plusieurs) numéro IP et assure la liaison avec le reste de l’internet. Il y a une large gamme de moyens de connexion (téléphone, câble, ligne spécialisée, numéris, satellites...), et les FAI proposent aussi des services complémentaires (hébergement de site, messagerie électronique, statistiques...), mais le principe reste le même.

Utilisateur INTERNET

FournisseurdʼAccèsInternet

Différents types deliaison

- permanente- temporaire- rapide (lignespécialisée)- plus lente (modemou Numéris)

A l'Université de Caen, le FAI est le réseau métropolitain VIKMAN, qui est membre du réseau national des Universités RENATER. Chaque ordinateur du réseau local de l'Université peut être connecté à internet via RENATER. La connexion est permanente et à haut débit.


2 - La connexion d'un utilisateur individuel Depuis son domicile, un utilisateur individuel doit avoir un "FAI" pour pouvoir se connecter à l'internet. Dans le cas le plus général, l’utilisateur dispose d’un modem pour son ordinateur. Les modèles actuels valent entre 1000 et 2000 francs, et ont un débit entre 28 800 bits par seconde et 56 000 bits par secondes. Le débit détermine la rapidité de téléchargement des documents. Un utilisateur individuel est rarement connecté en permanence (même si cela risque de se développer avec les accès câble à l’internet). Au moment où l’utilisateur décide de se connecter : • le FAI accepte l’appel. Il doit donc avoir des modems disponibles. Le rapport

entre le nombre de modems et le nombre d’abonnés est un critère de choix du FAI. Compte-tenu du foisonnement (les utilisateurs ne se connectent pas tous au même moment, même si des pointes ont lieu à certaines heures) on considère qu’un FAI doit posséder un modem pour 18 abonnés à son service.

• le serveur du FAI attribue un numéro IP temporaire à l’utilisateur, que celui-ci conservera jusqu'à la fin de sa session de connexion.

• Le FAI et le poste de travail de l’utilisateur sont liés par le protocole PPP (point to point protocol) qui permet de considérer l’ordinateur de l’utilisateur comme s’il était directement lié à l’internet par un réseau local. On oublie alors qu’il y a une ligne téléphonique et un modem entre le poste utilisateur et le FAI... mais l’opérateur de télécommunication ne l’oublie pas, qui facture la communication téléphonique au tarif habituel.

• A tout moment, plusieurs utilisateurs sont connectés simultanément au même FAI. Ils se partagent donc la bande passante sortante du FAI (celle qui relie le FAI à l’internet). La quantité de bande passante disponible pour chaque utilisateur est donc fonction du nombre de connectés (ça marche mieux après minuit, mais les bibliothèques sont fermées) et de la bande passante garantie par le FAI. A nouveau, la dimension de cette bande passante est un critère de choix du Fournisseur d’Accès Internet.

Ce type d’abonnement à l’internet permet de naviguer sur le web et d’utiliser la messagerie électronique, les forums. Il est relativement peu onéreux. Le coût se divise en : • coût d’abonnement : de 60 à 100 F par mois, en fonction des services

complémentaires • coût de télécommunication : dépend du temps de connexion à l’internet. Il est

tarifé par France Télécom (ou un autre opérateur) au tarif d’une communication locale. Le succès de l’internet aux États-Unis et au Canada est lié à la gratuité des communications locales, ce qui n’est pas le cas en France. A l’heure où ces lignes sont écrites, il en coûte 0,74 F. les trois premières minutes, puis 0,28F. par minute supplémentaire (les réductions après 19H s’appliquent ).


Poste de travailde lʼutilisateur modem modem

modem

modem FournisseurdʼAccèsInternet

CoûtsAchat dʼunordinateurmultimédia

10 KF

CoutDe 1 à 2KF en

fonctiondu débit(56Kb/s)

Coût de lacommunica-tion télépho-

nique enmode local

(16,70 F. /h)

Choisir un FAIqui disposedʼassez de

modems pourgarantir votre

connexion

Coûtforfaitaire

de 60 à100 F par

mois

La bandepassante

qui relie leFAI à In-ternet doitêtre im-portante

3 - Le World Wide Web Le service World Wide Web (W3, ou plus simplement web) est une partie du réseau Internet qui permet de circuler parmi les millions de documents placés sur des serveurs du réseau internet. Pour cela, le web a besoin de trois types de normalisations :

- HTML pour le balisage de chacune des pages d'information ; - HTTP pour le protocole de transfert des pages HTML et des images associées

du serveur vers le navigateur. C'est un protocole très simple, sans suivi de session : à chaque requête du navigateur, le serveur envoie le document spécifié puis ferme la connexion.

- URL pour l'adressage des documents. Quand un client demande un document (un fichier informatique) à un serveur web, celui-ci envoie le fichier demandé, puis suspend la connexion. Les fichiers qui circulent sur le web peuvent prendre plusieurs formes :

- des fichiers balisés en HTML qui permettent la mise en page du document. - des fichiers de documents associés à une page HTML. Ces fichiers peuvent

correspondre à des sons, de la vidéo, des textes en codage de type image (formats PostScript ou pdf), des multimédias (shockwave) ou tout autre type de fichier à venir. Ces divers fichiers "externes" sont lus par des programmes assistants (helpers) ou bien des programmes qui s'inscrivent à l'intérieur de la fenêtre définie par le visualiseur (plug-in).

- des fichiers créés au moment de l'envoi vers un visualiseur précis par un programme. On utilise pour cela l'interface CGI (Common Gateway Interface), qui envoie la sortie standard d'un programme vers le réseau. C'est avec des programmes CGI que l'on peut écrire des systèmes permettant d'interfacer une banque de données et le web. On utilise aussi l'interface CGI pour envoyer des pages HTML personnalisées en fonction de critères définis par un utilisateur (exemple de la presse électronique, ou encore des moteurs de recherche).

Dans l'ensemble du Web on distingue plusieurs types de regroupements d'informations et de documents.


- les "pages personnelles" (home pages) correspondent à l'ensemble des pages présentées par un individu et disponibles à tous pour la lecture. On y trouve à la fois des informations strictement personnelles, mais aussi des regroupements de documents sur un thème qui intéresse le propriétaire de la "page personnelle". Quand un individu prend un abonnement auprès d'un fournisseur d'accès, celui-ci propose la mise à disposition de quelques méga-octets pour réaliser des pages personnelles. Les pages sont rédigées par l'utilisateur sur son ordinateur personnel en utilisant HTML. Elles sont ensuite téléchargées sur le serveur par ftp (file transfert protocol).

- des services d'entreprises qui permettent une "présence sur le réseau". On

assiste aujourd'hui au développement du commerce électronique. Les entreprises peuvent ainsi faire de la publicité pour leurs produits, assurer le service après-vente, la documentation, entretenir des liens avec leurs clients. La commande en ligne commence à apparaître (notamment pour les livres), et devrait décoller avec la mise en place de moyens de paiement fiables. Une commande peut aussi être directement suivie par la livraison de biens numériques (documents, vidéos, sons... ).

- des services publics d'information, pour lesquels la diffusion de

l'information en format électronique devient un complément de leur mission de mise à disposition de documents : bibliothèques, universités, ministères (principalement aux États-Unis),... L'information ainsi diffusée est aujourd'hui en général gratuite (sans procédure de paiement), même si on voit se développer des logiques d'abonnement (journaux électroniques) ou de paiement à l'acte (achat à l'unité de documents).

- des médias électroniques, journaux, télévisions, radios, et nouveaux services

en cours de création et d'invention sont maintenant largement présents sur le Web. Les médias traditionnels complètent ainsi leur information en visant des publics plus ciblés et segmentés. Les nouveaux médias essaient de s'appuyer sur une approche de l'information qui est plus hiérarchisée (allant de l'information très courte - annonce, titre - à des développements et des commentaires approfondis, chacun s'enfonçant dans l'hypertexte en fonction de son désir personnel d'approfondir une question ou une information d'actualité). Les médias électroniques s'appuient sur inter activité du Web pour assurer la participation des lecteurs.

- des moteurs de recherche, qui essaient de proposer une description

automatique des documents du réseau (pages), afin de permettre à l'utilisateur d'accéder à une liste de documents en posant des questions de type documentaire traditionnel (texte libre ou même formulation booléenne). Le plus connu des moteurs de recherche est Altavista (http://www.altavista.com/)

- des bibliothèques de sites (ou annuaires) qui sont réalisées par des

documentalistes. Ces bibliothèques décrivent des regroupements de documents (sites, ou ensembles hypertextes, notions plus proches de l'utilisation effective que la notion de page des moteurs de recherche). Ces sites sont classifiés et indexés, puis proposés à l'utilisateur par navigation (en


utilisant la classification) ou par requête (questions posées sur le catalogue de description des sites). Souvent, les bibliothèques de sites sont associées avec les moteurs de recherche pour proposer des documents quand les réponses obtenues sur les descriptions de sites sont insuffisantes.

La bibliothèque de site la plus connue est Yahoo (http://www.yahoo.com), qui dispose maintenant d'une version française (http://www.yahoo.fr). Nomade (http://www.nomade.fr) est un annuaire de sites francophones, qui s'oriente vers un service d'information plus global (association avec l'AFP pour les nouvelles d'actualité, présentation d'une sélection des sites de la semaine...).

4 - Le modèle client-serveur Le web est entièrement construit sur le modèle client-serveur. Les requêtes sont établies par le client (navigateur), qui demande au serveur des pages d'information. Le poste client (le navigateur de l'utilisateur) se charge :

- de mettre en page les fichiers balisés en HTML - d'ouvrir les assistants nécessaires à la lecture des autres formats de fichier

(PostScript, vidéo...). - de permettre l'enregistrement des pages récupérées, en format texte, ou

même suivant le format balisé source. Cette méthode est le meilleur moyen d'apprendre le balisage HTML : en regardant le document source d'une page dont on a aimé la présentation.

- d'imprimer les documents reçus, avec la présentation et les images On peut récupérer sur le réseau les logiciels nécessaires à la lecture des documents non-standards (sons, vidéo... et formats expérimentaux). En général les outils de lecture (viewers) sont diffusés librement, et les outils de production vendus aux concepteurs de sites W3. Sur internet, tout poste qui est connecté en permanence peut devenir un serveur d'information. Cependant, la réalité montre que certains postes sont uniquement utilisés pour la lecture d'informations et de documents et d'autres sont spécialisés dans le rôle de serveur. Le serveur est organisé de façon à distinguer :

- le server root, ensemble des logiciels informatiques permettant la mise en place d'un serveur HTTP. Le plus connu des logiciels serveurs du monde UNIX est Apache. On trouve aussi des serveurs pour Windows NT et plus généralement pour tous les ordinateurs du marché. Chaque transaction du serveur est conservée en mémoire dans un fichier de log, qui permet le suivi statistique du serveur.

- le document root est l'organisation arborescente de toutes les pages d'information qui peuvent être envoyées sur le réseau par le serveur. Les pages sont regroupées en répertoires. On considère qu'il est nécessaire de constituer un répertoire autonome pour chaque document (document coeur en HTML, éventuellement documents associés). Les pages personnelles sont regroupées dans l'arborescence disponible pour chaque utilisateur. Le regroupement en répertoires, et la clarté de l'organisation est essentielle pour


la maintenance d'un site. Les pages personnelles sont en général introduites par le nom de login de l'utilisateur précédé du signe ~ (tilde), par exemple : http://www.domaine.fr/~lucien/).

Le serveur envoie au client les documents précédés par un en-tête (header) qui indique le type de codage de l'information pour chaque fichier envoyé. Ceci est indispensable pour le navigateur du client afin de lancer les visualiseurs adaptés. Le type du document est donné par la codification MIME, mais il est aussi repéré par l'extension placée après le nom du fichier. On trouve ainsi (quelques exemples parmi les plus courants, mais bien d'autres formats sont disponibles) :

- les fichiers balisés en HTML : extension : .html ou .htm - les images gif : Images en 256 couleurs, très utiles pour les surfaces d'a-plat.

Sert principalement aux icones. Extension : .gif - les images jpeg : pour une qualité photographique avec une compression

importante. Extension .jpeg - les séquences vidéo quicktime. Extension .mov - les textes réalisés par le logiciel Acrobat, qui peuvent être lus par le

visualiseur largement distribué Acrobat Reader. Ces fichiers sont de petite taille et conservent l'image typographique du fichier d'origine (en général document de traitement de texte comme Word, ou de logiciel de PAO comme XPress). Extension .pdf

On peut réserver l'accès à un répertoire par l'utilisation d'un mot de passe, en plaçant un fichier htaccess dans ce répertoire. Enfin, il est nécessaire pour le serveur de connaître l'adresse sur le réseau du client auquel il envoie les fichiers. Cela signifie qu'un suivi de client est réalisable, par exemple pour les besoins du marketing, ou de la surveillance. Nous sommes dans un univers qui est totalement différent de la télématique anonyme (celle du minitel), ce qui n'est pas sans poser des problèmes pour le respect de la vie privée de l'internaute. Des serveurs d'anonymisation existent. Les proxys (ordinateurs mandataires) peuvent ainsi masquer au serveur l'identité du client en assurant la transmission en deux temps du fichier demandé vers le poste de l'utilisateur. Ces proxys peuvent aussi servir de cache, c'est à dire conserver les pages demandées par un utilisateur, et les redistribuer directement, sans faire à nouveau appel au serveur (donc en économisant la bande passante du réseau) au même utilisateur, ou bien à une autre personne utilisant le même proxy-cache. 4 - L'environnement de travail Pour cet enseignement d'initiation à l'informatique, nous travaillerons à créer un hypertexte en mode local. Celui-ci sera conservé sur disquette par chaque étudiant. Les pages balisées qui ont connu le succès grâce au réseau internet peuvent aussi être lues en mode local (enregistrement sur le disque dur, sur une disquette ou gravure sur un cédérom).


Nous travaillerons sur des ordinateurs utilisant le système d'exploitation Windows NT. Pour garantir la portabilité de l'hypertexte que chacun d'entre vous va réaliser, nous ferons attention à nommer les fichiers suivant la règle MS-DOS expliquée dans le premier cours : un nom de huit caractères maximum et une extension de trois caractères (donc l'extension .htm pour les fichiers encodés en HTML). Un fichier HTML étant un fichier "texte", nous pouvons utiliser n'importe quel éditeur, comme par exemple le Bloc-Note, présent sur tous les ordinateurs ayant un système d'exploitation de Microsoft. C'est avec le Bloc-Note que nous ferons nos premiers pas. Cependant il existe des éditeurs spécialisés pour HTML qui facilitent le travail de conception et de rédaction des pages HTML. On distingue deux sortes d'éditeurs HTML :

• les éditeurs WYSIWIG (tel écran tel écrit) qui permettent de travailler en ignorant l'encodage HTML, mais en utilisant des menus pour disposer les blocs de texte ou les images sur l'écran. C'est alors le logiciel qui se charge de transcoder ce travail interactif en un code HTML.

• les éditeurs de code HTML qui offrent des aides à la conception, mais qui laissent le créateur manipuler directement le code HTML. Les aides principales sont la mise en couleur des balises et des menus d'aide.

Du point de vue pédagogique nous choisissons évidemment le deuxième type d'éditeur qui permet de comprendre l'encodage HTML. Les professionnels utilisent aussi ce type d'outil qui permet d'obtenir des pages plus claires que celles produites directement par les éditeurs interactifs. Car les éditeurs interactifs restent assez frustes, et ignorent trop souvent les feuilles de style et produisent un code HTML peu orthodoxe. Si un tel code peut fonctionner avec les navigateurs actuels, il est peu lisible (pour une correction ou mise à jour ultérieure) et loin de suivre les recommendations des normes HTML 4.0, donc difficile à maintenir sur le long terme. Un dernier argument en faveur des éditeurs de code : certaines "extensions" des éditeurs interactifs sont "propriétaires". Par exemple, pour utiliser pleinement les fichiers produits par Front page, il faut utiliser Internet Explorer du même éditeur de logiciel. Cependant, le dogmatisme et la rigidité ne sont pas de mise dans l'univers informatique. Une règle de base de l'informatique doit toujours être : Il y a plus d'une manière de faire. En l'occurence, on peut utiliser un éditeur interactif pour la première mise en oeuvre d'une page... puis corriger et peaufiner le code avec un éditeur de code. Parce que notre rôle est de former à l'informatique, et pour cela de vérifier l'adéquation à la norme des fichiers que vous produirez, et la lisibilité-maintenabilité du code lui-même, nous regarderons directement le code HTML produit, et pas seulement le rendu sur un navigateur. N'oublions pas l'objectif pédagogique : ne cherchons pas à produire le plus grand nombre de pages mal encodées, mais plutôt de produire quelques pages de qualité. L'éditeur de code que nous avons choisi est EMACS. Ce logiciel est un "logiciel libre". Vous pouvez en faire une copie pour vos travaux personnels. Si vous souhaitez en savoir plus sur les logiciels libres, qui provoquent de grandes mutations actuellement dans l'industrie de l'iformatique, vous pouvez consulter le site de


l'AFUL (Association Française des Utilisateurs de Logiciels libres) : http://www.aful.org Chaque étudiant devra disposer d'une disquette formattée pour Windows. Cette disquette devra être organisée de façon à faire apparaître clairement les divers travaux qui seront menés. L'organisation que nous proposons est la suivante : La racine de la disquette (a:\) est divisée en dossiers :

• TD : dossier dans lequel seront regroupés les différents exercices qui seront réalisés durant les TD (et poursuivis en travail personnel si le temps vient à manquer).

• projet : dans ce dossier seront regroupés tous les éléments (textes, images, voire sons pour les plus avancés) qui permettront de rédiger le projet de contrôle continu

• icones : pour les différents icones (flèches, points de marquage, barres horizontales...) qui sont utilisés dans les pages HTML

• images : pour les images photographiques ou les illustrations spécifiques. Pour obtenir les icones et les images dont vous aurez besoin, vous pouvez naviguer sur internet et copier sur votre disquette les images libres de droit en utilisant le bouton droit de la souris de votre navigateur. Attention, toutes les images et icones diffusées sur internet ne sont pas libres de droits. Vous devez vérifier cela si vous souhaitez diffuser publiquement votre projet sur internet.


Chapitre 3

Le balisage HTML

1 . Notions générales sur le langage de description de documents HTML HTML (HyperText Markup Language) permet de baliser des textes. Avec HTML on peut écrire de simples textes ASCII ("American Standard Code for Information Interchange" : les fichiers sont enregistrés dans des fichiers de type "texte") et obtenir un rendu typographique de qualité pour les pages d'information. Ces pages sont ensuite utlisées soit en mode local (à partir de la disquette, du disque dur ou d'un cédérom), soit au travers du réseau internet. En HTML, les informations typographiques et logiques (organisation du texte) sont encodées par des balises. Le visualiseur HTML (ou navigateur, ou browser en anglais) utilise le balisage pour calculer le "rendu" de la page qui sera présentée à l'utilisateur. HTML est principalement utilisé pour les documents destinés à être publiés sur le Web. Cependant, il tend à se généraliser pour codifier tous les documents qui peuvent être lus grâce à des visualiseurs courants du marché (NetScape, Internet Explorer, Opera...).. On trouve alors des pages encodées avec HTML sur des cédéroms, sur des disques durs (fichiers d'aide). Avec les développements actuels de HTML, des feuilles de style et des langages de script permettant d'animer les pages encodées par HTML, on devrait voir se généraliser les utilisations de ce langage de balisage. Nous allons apprendre l'encodage de pages en utilisant trois langages :

• HTML 4.0 pour le langage de description du document (document language dans la normalisation du W3C)

• CSS1 (Cascading Style Sheet 1) pour la codification des feuilles de style (une feuille de style permet de définir la typographie que le navigateur doit appliquer à tout ou partie du document).

• JavaScript qui est un langage de script permettant de manipuler les éléments de HTML et des feuilles de style CSS pour rendre plus interactives les pages encodées en HTML. On parle alors de Dynamic HTML.

Le terme de page est utilisé pour désigner l'unité documentaire qui est envoyée vers le navigateur par une requête sur le serveur. Il s'agit d'une métaphore : une "page HTML" peut s'étendre sur plusieurs pages lors de l'impression, sur plusieurs "pages-écran" à la visualisation. N'oublions pas que cette métaphore est habituelle, puisqu'on parle de "pages publicitaires" à la radio. HTML est un langage de balisage issu de SGML (Standard Generalized Markup Language), norme développée pour les besoins de l'industrie de l'édition et de l'impression. On dit que HTML est une DTD (Document Type Definition) publique. HTML vise à définir la structure logique du document (dénommer les différentes parties d'un document : titres, paragraphes, énumérations...).


HTML possède la capacité d'inclure des liens lors de l'encodage des documents. Le navigateur peut alors :

- distinguer les liens du reste du texte (en standard en écrivant le texte du lien en bleu souligné) ;

- appeler la page d'information spécifiée si l'utilisateur invoque le lien (par un clic à l'écran sur la zone de lien).

Le document encodé par HTML peut alors quitter le mode séquentiel (lecture suivie d'un texte) pour devenir un document hypertexte. Dans cette forme d'organisation du texte on distingue :

• les blocs de texte (encore appelés noeuds de l'hypertexte). • le réseau des liens qui permet de sauter directement d'un bloc de texte (ou

d'une page HTML) vers un autre bloc de texte (ou une autre page HTML). Ce réseau de liens peut être : - local : plusieurs blocs dans un même texte, plusieurs textes sur le même

support (disque dur, disquette ou cédérom) - mondial : on peut sauter d'une page sur le disque local vers une page

entreposée sur un autre ordinateur serveur de l'internet. On parle alors de l'hypertexte en réseau, du World Wide Web.

• l'interface d'invocation des liens : pour suivre d'un simple clic de souris des liens, il faut que leur "origine" (ou "point de départ" au sein de la page en cours de lecture) apparaisse différemment sur l'écran du visualiseur : texte souligné, boutons, images... de nombreuses formes sont imaginables qui donnent à chaque page HTML son originalité et sa force de persuasion (faire passer le message voulu par l'auteur).

Pour que cette logique soit possible, il convient que chaque page d'information ait une adresse qui puisse être incorporée dans l'ancre d'un lien. On parle alors d'un URL (Uniform Ressource Locator). Dans un hypertexte local le navigateur ouvre le nouveau fichier désigné par l'URL. Dans l'hypertexte mondial du Web, le navigateur envoie des requêtes au serveur HTTP (HyperText Transfert Protocol) indiqué dans l'URL. Celui-ci envoie en retour le document demandé. Un URL comporte donc deux parties :

- la mention du serveur HTTP qui contient le document. Cette partie est elle-même divisée en deux : le protocole (en général http, mais on trouve aussi des URL pour ftp, telnet, mailto...), et l'adresse du serveur ;

- la mention de l'emplacement du fichier demandé au sein de l'arborescence du serveur.

Exemple : http://www.info.unicaen.fr/bnum/CRL/index.html <----- serveur ---------><---- document---->


2 - Les éléments de HTML HTML définit des éléments qui sont utilisés par le visualiseur pour offrir le rendu (l'affichage lisible de la page encodée). On distingue deux types d'éléments

• les éléments de bloc qui créent un bloc que l'on peut repérer comme une boîte contenant du texte. Ce bloc est précédé et suivi par un saut de ligne. Parmi les éléments de bloc on trouve les paragraphes, les titres, les énumérations, les tableaux...

• les éléments inline qui s'insèrent dans le fil du texte, sans rupture. Parmi ceux-ci on trouve les éléments typographiques (gras, italique...), les images ou les cases de formulaires.

Le rendu d'une page HTML peut être vu comme un canevas dont la taille dépend de la taille allouée à la fenêtre du navigateur. Sur ce canevas on pose des boîtes qui correspondent aux éléments de blocs de HTML. Chaque boîte repousse plus loin dans le texte les boîtes suivantes. Pour que deux boîtes soient juxtaposées, il faut utiliser un "tableau", ou les règles de positionnement des feuilles de style.

canevasde lapage bloc du titre

bloc du premier paragraphe

le bloc du second paragraphecontient une image (élément inline)

trois blocs juxtaposéspar l'utilisation d'un tableau(tableau à une ligne et troiscolonnes). La colonne dedroite contient une image.

Un élément HTML est repéré par :


- une balise de début. Le nom de l'élément est désigné entre "<" et ">". Soit <P> pour un paragraphe, <H1> pour un titre principal...

- le contenu de l'élément, qui est libre et choisi par l'auteur de la page - une balise de fin d'élément, qui reprend le nom de l'élément précédé du slash

("/"). Exemple : </P>, </H1>...

Même si certains éléments tolèrent l'absence de balises fermantes, il est conseillé de respecter cette méthode d'encodage, car elle devient indispensable pour les extensions à venir de HTML (par exemple pour XML, Extended Markup Language). On peut imbriquer les divers éléments. On respectera l'ordre d'ouverture et de fermeture des balises imbriquées. exemple : pour un paragraphe centré rédigé en caractère gras : <P align="center"><B>...........</B></P> Les principaux éléments de bloc sont les titres (headers), les paragraphes et les listes.

• les paragraphes : tout texte d'un fichier HTML doit appartenir à un bloc. Le bloc de paragraphe est le bloc de base.

exemple : <P>Ceci est le texte du <I>premier</I> paragraphe. Ce bloc de texte contient une image qui est calée à droite du paragraphe (le texte se place alors sur la gauche du bloc).<IMG src="image.jpg" alt="une image calée à droite" align=right>. Cet exemple montre qu'une image est un élément <I>inline</I>, c'est à dire qu'il se place dans le fil du texte (en trouvant bien évidemment une place correspondant à sa taille).</P>

• les titres : il y a six niveaux de titre, depuis le niveau "titre principal"

(élément de type H1). Plusieurs titres de même niveau doivent utiliser le même type d'élément. Les feuilles de style définissent la typographie associée à chaque niveau de titre.

En général, on utilise le niveau de l'élément H1 pour le titre principal de la page. Le niveau H2 est pour les principales subdivisions. H3 correspond aux sous-chapitres. Les niveaux H4 à H6 sont plus rarement utilisés.

En l'absence de feuille de style, les titres sont écrits avec une "feuille de style

par défaut" qui met en valeur les titres ( en gras, avec un corps équivalent au corps du texte pour le niveau H3 ; un corps supérieur pour les éléments H2 et H1). Mais maintenant les feuilles de style sont en général associées aux titres.


Exemple sans feuille de style : <H1 align=center>Titre principal</H1>

<P>Paragraphe d'introduction</P>

<H2>Titre du premier chapitre</H2>

<P>Paragraphe de contenu du premier chapitre</P>

<H2>Titre du second chapitre</H2>

<P>Paragraphe de contenu du second chapitre</P> Exemple de feuille de style associée à un titre : H1 {

alignment: center;

font-size: 36pt;

font-family: helvetica,arial, sans-serif;

font-weight: bold;

color: purple;

}

• les énumérations On pratique souvent l'énumération de listes d'items. on trouve trois types d'énumérations en HTML : - les listes non-ordonnées (élément UL) : par exemple pour les ingrédients

d'une recette de cuisine, une énumération de sites... Chaque item de la liste est introduit par <LI>. La marque d'item est un

disque noir (cas général) ou une autre "puce". Exemple : <P>Pour faire de bonnes crêpes il faut : </P>

<UL>

<LI>250 grammes de farine

<LI>un demi litre de lait

<LI>un oeuf

<LI>une cuillerée d'huile

<LI>une pincée de sel

</UL>

- les listes ordonnées (élément OL) : les items sont automatiquement

numérotés Exemple : <P>Pour que la pâte à crêpe soit fluide : </P>

<OL>

<LI>Verser la farine au fond du récipient

<LI>Ajouter le sel, l'huile et l'oeuf

<LI>Verser doucement le lait en mélangeant avec la cuiller de bois

</OL>

<P>La pâte ne pas contenir de grumeaux et former un ruban quand on l'étire</P>

• les listes de définition (élément DL) sont composées de deux parties : les termes à définir (élément DT) et le contenu de la définition (élément DD).


Le terme à définir n'a en l'absence de feuilles de style aucune caractéristique typographique particulière. L'élément DD est décalé vers la droite. On utilise généralement une feuille de style pour la mise en valeur du terme à définir.

Exemple <P>On trouve un grand nombre de crêpes qui constituent autant de

spécialités des régions de France</P>

<DL>

<DT>La crêpe suzette</DT>

<DD>Elle est délicieusement parfumée au citron</DD>

<DT>La crêpe à la confiture</DT>

<DD>Sous son aspect austère, la crêpe à la confiture permet de marier l'arôme du fruit au moelleux de la crêpe</DD>

<DT>La crêpe flambée</DT>

<DD>Un peu d'alcool chaud, un briquet et naît la flamme. Au choix : rhum ou grand-marnier</DD>

</DL>

La notion d'élément est centrale dans la compréhension de HTML. On peut modifier ou préciser le comportement d'un élément lors du calcul du rendu de deux façons :

- en utilisant des attributs (exemple : <P align="center"> utilise l'attribut align pour indiquer que le texte doit être centré sur la page). Un attribut prend son effet sur tout l'élément qu'il modifie. La mention de l'attribut est placée dans la balise d'ouverture de l'élément. L'utilisation de nombreux attributs typographiques est maintenant dépréciée au profit des feuilles de style.

- les feuilles de style s'appliquent aux éléments. La présentation de tous les éléments d'un certain type (désigné par le nom de l'élément : Hn, UL,...) peut être modifée. On peut aussi choisir de modifier certains éléments particuliers. Ceux-ci sont alors repérés par les attributs class= ou id=.

- les éléments peuvent aussi être manipulés par des scripts (en général en utilisant JavaScript).

On doit concevoir un élément comme un réceptacle à du texte (ou des images). Le rendu de ce texte est soumis à l'application de fonctions : les feuilles de style, et les scripts dynamiques. Les éléments (au moins certains d'entre eux avec les navigateurs actuels) peuvent aussi recevoir des événements provenant des actions de l'utilisateur (quand la souris passe sur une ancre, ou bien en sort, quand l'utilisateur clique, ou enfonce le bouton de la souris...). Ces événements sont utilisés par JavaScript pour permettre de réaliser des pages dynamiques. Pour rédiger une page HTML, on peut dessiner rapidement sur papier les différents blocs de texte ou d'image que l'on souhaite présenter. C'est ainsi qu'apparaîtront les éléments nécessaires et leur imbrication. La présentation du code HTML n'influe pas sur le rendu. On pourrait imaginer de ne jamais aller à la ligne. Mais cela limiterait la lisibilité du code lui-même, donc la maintenance et les corrections. On s'efforcera donc de présenter clairement le code HTML. Voici quelques règles qui peuvent être appliquées :

- les noms des éléments sont indiqués en majuscule - les attributs sont indiqués en minuscule - s'il y a beaucoup d'attributs, on peut aller à la ligne pour chaque attribut

(tant que le visualiseur n'a pas rencontré le signe ">", il sait qu'il est toujours dans la balise de début de l'élément.

On peut introduire des commentaires dans le code HTML, c'est à dire des informations que le navigateur va ignorer, mais qui sont utiles pour le rédacteur des pages lors des corrections ou de la maintenance. Une page encodée peut devenir complexe, et les commentaires sont utiles quand on ouvre un code quelques mois après sa création. Les commentaires sont composés de tout le texte placé entre :

- balise d'ouverture de commentaire : 

3 . La structure d'un document HTML


Un document balisé en HTML, qui aura donc une extension .htm, est l'ensemble de l'information comprise entre la balise <HTML> et la balise de fin correspondante : </HTML>. Un document HTML est divisé en deux parties :

1. l'en-tête qui regroupe les informations qui ne seront pas affichées par le visualiseur, mais qui sont utiles pour les moteurs de recherche. L'en-tête est encadré par les balises : <HEAD> ..... </HEAD> • le titre du document représente en fait le nom de la fenêtre et le nom qui

est conservé dans les signets (bookmarks) du visualiseur. Il est en général différent du titre complet qui lui apparaît dans la fenêtre de texte du visualiseur.

balisage : <TITLE> ..... </TITLE> • les informations de métadonnées concernant le document. Les métadonnées

sont les données de catalogage : nom de l'auteur, titre, mots-clés, résumé, date de création, date de modification... Ces données sont fournies par le rédacteur-concepteur du document.

balisage : <META name-"..." content="......"> exemple : <META name="dc.author" content="Hugo, Victor"> La liste des différents "noms" et de la manière de décrire le contenu est

l'enjeu de la normalisation des métadonnées. Le Dublin Core est le premier modèle utilisable. On peut aussi définir sa propre liste de métadonnées.

Pour notre enseignement, on indiquera pour chaque fichier html les métadonnées suivantes :

- auteur -> nom de l'étudiant - date -> on utilisera le format français long (jeudi 28 octobre 1998) - TD -> numéro du TD "TD 5" - sujet -> sujet central de l'exercice ("étude des tableaux") Exemple : <META name="auteur" content="Le Crosnier, Hervé"> <META name="date" content="lundi 28 septembre 1998"> <META name="TD" content="préparation du polycopié"> <META name="sujet" content="exemple d'utilisation des métadonnées">

2 le corps du document, représente ce qui appraîtra dans la fenêtre du visualiseur. Le corps du document est compris entre la balise <BODY> et sa balise fermante </BODY>. Les attributs de l'élément body permettent de définir la couleur du fond (bgcolor), la couleur des liens pas encore suivis (link), la couleur des liens déjà vus (vlink) et même la couleur du texte.


On peut aussi définir une image de fond, qui est appelée par un URL spécifique. Ces images de fond doivent être très petites (au sens de leur taille mesurée en kilo-octets). Elles sont répliquées en damier autant de fois qu'il est nécessaire pour couvrir toute la surface de l'écran. Ce travail est effectué par le visualiseur. On peut ainsi créer une marge à gauche d'une couleur différente.

Exemple : le document apparait en noir sur fond blanc. Les liens sont en

rouge. <BODY bgcolor="#ffffff" link="#ff0000"> L'espace des couleurs est codé en RVB (Rouge, Vert, Bleu) suivant les valeurs

hexadécimales comprises entre 00 (absence de la couleur de base) et FF (présence maximum). La composition des couleurs permet de calculer la couleur résultante. Des logiciels d'étalonnage permettent de choisir la couleur dans une gamme chromatique, et d'obtenir le codage RVB héxadécimal correspondant.

Ainsi, "#FF0000" correspond à Rouge maximum (FF) et absence de Vert et de Bleu (00). Le bleu intense sera lui donné par le code : "#0000FF".

4 . Les principaux éléments de HTML HTML privilégie la description logique du document sur sa description physique (typographique). Ainsi, pour la mise en valeur d'un mot ou d'une phrase, on préférera l'élément noté par la balise <EM>...</EM> à l'élément typographique correspondant <I>...</I>. Même si le rendu est le même, les balises logiques sont mieux adaptées aux choix de présentations rendues possibles par le déploiement des feuilles de style (CSS : cascading style sheet). Les principaux éléments sont ceux correspondant aux blocs d'information (paragraphes, énumérations, divisions du document, listes de définition...). Ils ont été présentés plus haut. On trouve aussi des éléments se rapportant au texte, qui sont inclus à l'intérieur des définitions de bloc. Ce sont principalement des balises typographiques (gras, italique, caractères à chasse fixe...). Les éléments fonctionnels désignent les parties actives d'un fichier HTML :

- les liens qui permettent les liens externes (vers un autre document repéré par son URL) ou internes (entre les diverses parties d'un même document, par exemple entre l'appel de note et la note, et retour au paragraphe contenant l'appel de note. On parle alors d'ancres).

- les images inline sont elles-aussi appelées par leur URL (en général un URL relatif, l'image étant placée dans le même répertoire que le document). Une image peut être découpée en zones sensibles, et donc servir de carte de navigation.

- les applets sont des programmes qui sont envoyés avec le fichier html pour être exécutés sur le poste client de l'utilisateur. Le principal langage d'applets est JAVA. Mais un vaste combat existe entre les divers navigateurs pour


promouvoir d'autres langages d'applets (javascript pour NetScape, ou ActiveX pour Internet Explorer de Microsoft)

Les formulaires permettent de présenter des pages ayant des zones réservées pour recueillir les informations de l'utilisateur. Ces informations sont ensuite envoyées vers le serveur, qui doit lancer un programme CGI pour les traiter et retourner une information adaptée. Le programme de traitement est désigné par son URL dans l'attribut action. Les tables permettent de distinguer des zones de l'écran dénommées cellules. Chaque cellule peut ensuite contenir n'importe quelle information valable en HTML (du texte, des images, des formulaires... ou même un autre tableau). Les tables sont souvent utilisées pour maîtriser la présentation générale de la page. Les cellules doivent impérativement être regroupées en "lignes" <TR>...</TR>. Les cellules sont délimitées par l'élément <TD>...</TD>. Nous étudierons les éléments fonctionnels et les tableaux dans le chapitre suivant. 4 . Les caractères diacritiques HTML 4.0 utilise la norme UNICODE pour définir les caractères. Cette norme permet de représenter plusieurs millions de caractères, ce qui couvre presque toutes les écritures du monde. Malheureusement, ce codage des caractères n'est pas encore installé sur tous les systèmes informatiques. Les navigateurs pour leur part acceptent et reconnaissent les caractères codés suivant la norme dite ISO-LATIN-1, qui correspond aux principales langues ouest-européennes. Il devient possible de préciser d'autres jeux de caractères dans l'extension multilingue de HTML. Toutefois, les principaux ordinateurs du marché (Windows ou Macintosh) n'utilisent pas l'encodage ISO-LATIN-1, mais des codages "propriétaires". Pour que les fichiers HTML puissent être lus par toutes les machines, il convient de coder les caractères diacritiques :

- soit en ISO-LATIN-1 : cela est en général réalisé par le logiciel de transfert de fichier (FTP) qui prend le fichier sur l'ordinateur personnel de création et le place sur le serveur. Il faut configurer le logiciel FTP pour qu'il fasse ce transcodage à la volée (si toutefois le serveur utilise bien ISO-LATIN-1 en mode natif, ce qui est généralement le cas des serveurs UNIX).

- soit en utilisant les tables d'entités, qui remplacent les caractères à diacritiques par des entités SGML. Une entité est introduite par la perluette (signe : &) et terminée par un point-virgule ( ; indispensable). Ainsi le e accent circonflexe (ê) correspond à l'entité : ê Les capitales accentuées peuvent aussi être obtenues de cette façon Ö -> Ö

exemple : <P>À partir de la mi-août, l'été cède la place à l'automne.</P>


5 - La normalisation de HTML Les développements de HTML et des autres langages nécessaires pour le web (les feuilles de style, les protocoles de transfert...) est assurée par un organisme spécialisé international : le W3 Consortium.


6 - Première page HTML

<HTML> <HEAD> <TITLE>Ma première page HTML</TITLE> <META name="auteur" content="Le Crosnier, Hervé"> <META name="date" content="6 septembre 1998"> <META name="TD" content="TD2"> <META name="sujet" content="débuter en HTML"> </HEAD> <BODY bgcolor="#ffffff"> <H1>Ma première page HTML</H1> <p>La première page HTMl est consacrée aux loisirs culturels, qui sont les favoris des étudiants, bien loin devant la télévision, le troquet ou les sorties pour ne rien faire et causer entre copains. Évidemment !</P> <H2>Revues</H2> <P>Quelques revues pour être dans le coup :</P> <UL><LI>Les inrockuptibles <LI>La Recherche <LI>Télérama <LI>Le Monde Diplomatique </UL> <p>Ces revues possèdent aussi un site internet :</P> <UL><LI><A href="http://www.inrockuptibles.com">Les Inrockuptibles</A> <LI><A href="http://www.larecherche.fr">La Recherche</a> </UL> <H2>Cinéma</H2> <P>L'agglomération caennaise comporte de nombreuses salles de cinéma :</P> <DL><DT><B>Le Lux</B></DT> <DD>Cinéma d'Art et d'essai<BR> Avenue Sainte-Thérèse<BR> Caen<BR></DD> <DT><B>Le Café des Images</B></DT> <DD>La cité<BR> Hérouville-Saint-Clair</DD> </DL> <P>On trouve de nombreux sites internet consacrés au cinéma :</P> <UL><LI><A href="http://www.gaumont.fr">Gaumont</A> <LI><A href="http://www.premiere.fr">Magazine Première</A> <LI><A href="http://">Titanic</A> </UL> </BODY>


</HTML>

Pour chaque élément HTML il existe un style standard, qui permet d'obtenir un rendu dans toutes les situations. Cependant, un auteur peut désirer mieux maîtriser la présentation de sa page. Pour cela, on peut modifier le rendu des différents éléments par des feuilles de style.

7 - Première feuille de style On peut modifier l'apparence des divers élements de notre page HTML par le biais de feuilles de style. La méthode la plus claire de présentation des feuilles de style est de les regrouper dans l'élément STYLE, placé en tête de document, dans le header (entre les balises <HEAD> et </HEAD>). L'élément style est repéré par les balises :

<STYLE type="text/css">  </STYLE>

La définition des styles est mise en commentaire pour éviter une lecture par des navigateurs qui ne comprennent pas les feuilles de style (mais ceux-ci tendent à disparaître). On peut modifier le rendu par les feuilles de styles soit :

• pour tous les éléments d'un même type (par exemple tous les éléments H2) • pour une classe d'élément. Dans ce cas, on doit indiquer en attribut aux

éléments concernés qu'ils appartiennent à cette classe par : class="xxx" • pour un élément particulier repéré par son identifiant (id="xxx" en attribut

pour l'élément désigné). Respectivement les feuilles de style sont associées par :

• nom de l'élément (dit "sélecteur" dans le jargon des feuilles de style) H1 {feuille de style} • nom du sélecteur - point - nom de la classe P.intro {feuille de style} • # - identifiant #exp1 {feuille de style}

Une feuille de style est présentée entre accolades ( "{ ... }"). Les propriétés sont énumérées dans la feuille de style sous la forme : nom de la propriété : valeur ; Exemples de feuille de style : 1 - On souhaite que les titres de niveau 2 (sélecteur : H2) soient écrits en vert sur un fond argent, dans un bloc décalé de la marge gauche, et en utilisant un corps de 24 points, dans une famille de caractères sans empattement. H2 { font-family: arial, helvetica, sans-serif; font-size: 24pt; margin-left: 25pt;

color: green; background-color: silver; } 2 - On souhaite que tous les paragraphes introductifs des diverses parties de notre page soient écrits en marron, dans un corps plus grand que le corps du reste du texte, et dans une famille de caractères sans empattement. On indiquera pour tous les paragraphes concernés l'attribut class="intro". Seuls ces paragraphes seront concernés par la feuille de style. P.intro {font-size: 1.5em; font-family: arial, helvetica,sans-serif; color: maroon; } Avec les feuilles de style, on peut modifier très aisément l'apparence d'une page HTML sans avoir à modifier l'encodage du contenu de la page elle-même. Cela permet de construire des feuilles de style standard pour tout un ensemble de pages HTML (par exemple pour le site d'une entreprise, ou bien pour chaque rubrique d'un journal électronique...). Un exemple complet Modifions notre première page HTML en lui adjoigant des feuilles de style :

<HTML> <HEAD> <TITLE>Ma première page HTML</TITLE> <META name="auteur" content="Le Crosnier, Hervé"> <META name="date" content="6 septembre 1998"> <META name="TD" content="TD2"> <META name="sujet" content="débuter en HTML"> <STYLE type="text/css"> <!-- P.intro { font-size: 1.5em; font-family: arial,helvetica,sans-serif; color: maroon; } H1 { text-align: center; color: teal; font-size: 36pt; } H2 { margin-left: 25pt; font-family: arial, helvetica,sans-serif; color: green; font-size: 24pt; background-color: silver; } A {


color: red; text-decoration: none; } --> </STYLE> </HEAD> <BODY bgcolor="#ffffff"> <H1>Ma première page HTML</H1> <P class="intro">La première page HTML est consacrée aux loisirs culturels, qui sont les favoris des étudiants, bien loin devant la télévision, le troquet ou les sorties pour ne rien faire et causer entre copains. Évidemment !</P> <H2>Revues</H2> <P class="intro">Quelques revues pour être dans le coup : <UL><LI>Les inrockuptibles <LI>La Recherche <LI>Télérama <LI>Le Monde Diplomatique </UL> <p>Ces revues possèdent aussi un site internet : <UL><LI><A href="http://www.inrockuptibles.com">Les Inrockuptibles</A> <LI><A href="http://www.larecherche.fr">La Recherche</a> </UL> <H2>Cinéma</H2> <P class="intro">L'agglomération caennaise comporte de nombreuses salles de cinéma :</P> <DL> <DT><B>Le Lux</B></DT> <DD>Avenue Sainte-Thérèse<BR> Caen<BR></DD> <DT><B>Le Café des Images</B></DT> <DD>La cité<BR> Hérouville-Saint-Clair</DD> </DL> <P>On trouve de nombreux sites internet consacrés au cinéma : <UL><LI><A href="http://www.gaumont.fr">Gaumont</A> <LI><A href="http://www.premiere.fr">Magazine Première</A> <LI><A href="http://www.titanic.com">Titanic</A> </UL> </BODY> </HTML>


La liste des propriétés des feuilles de style est fournie en annexe sous la forme d'un aide-mémoire.


Chapitre 4

Approfondissement HTML

Nous allons dans ce cours approfondir les notions permettant d'intégrer des éléments actifs (liens hypertexte), des images, et d'organiser la page en blocs répartis sur la surface du "canevas" (tables). 1 - les URL Un URL est la façon uniforme de nommer une ressource appelée par un fichier HTML. On utilise un URL pour appeler une image afin de l'insérer dans le texte, pour tisser un lien vers une autre page HTML soit locale, soit sur un serveur distant. Un URL complet est de la forme : protocole://nom du serveur/chemin d'accès/fichiercible.extension exemples : URL du site central de l'université de Caen : http://www.unicaen.fr/index.html URL du tableau des couleurs, qui est dans le répertoire enseignement de la page personnelle de Hervé Le Crosnier, membre du laboratoire d'informatique de l'Université de Caen : http://www.info.unicaen.fr/herve/enshtml/ressources/couleurs.html Un URL complet est dit URL absolu : quelque soit le point de départ (la page HTML qui a utilisé cet URL dans un lien) on arrive bien à la page HTML désignée. On peut aussi définir des URL relatifs. Un navigateur reconstruit un URL absolu à partir d'un URL relatif en le faisant précéder de l'URL absolu de la page "en cours" (celle qui contient le lien appelant un URL relatif). exemple :

dans le répertoire ressources du répertoire enshtml désigné plus haut, il existe plusieurs fichiers. L'un d'entre-eux est l'index des fichiers contenus (index.html). Dans cet index, on désignera le fichier couleurs.html par un URL relatif :

<A href="couleurs.html">Liste des couleurs de base</A> Le navigateur construira alors l'URL absolu en ajoutant la mention du

serveur et de chemin d'accès : http://www.info.unicaen.fr/herve/enshtml/ressources/couleur

s.html


Les URL relatifs permettent de garantir la cohérence d'un ensemble de pages constituant un hypertexte. On peut déplacer l'ensemble de l'hypertexte au sein du serveur, ou bien sur un autre serveur, la circulation entre les pages et les appels d'images seront garantis. Dans notre projet, on utilisera des URL relatifs pour les liens internes en partant de la page d'accueil (qui est sur la disquette). On pourra ainsi désigner les divers fichiers utiles (autres pages ou images) en suivant les répertoires sur la même disquette. On utilisera évidemment des URL absolus pour pointer vers des serveurs extérieurs. 2 - l'insertion d'images Les images sont des éléments inline, c'est à dire qu'elles s'introduisent dans le flot du texte. Si on veut que les images aient le comportement d'un bloc, il faut les introduire dans un élément de type bloc (paragraphe, cellule de tableau, ou division). L'élément IMG définit les appels d'images. Il n'a pas de balise fermante (une des rares exceptions) car il n'a pas de contenu dans le texte HTML lui-même. Les informations nécessaires à la mise en place d'une image (élément IMG) sont données par les attributs. Une image est appelée par un URL (complet ou relatif) et se place sur le canevas en tenant compte de sa largeur et de sa hauteur, ou bien en étant redimensionnée en fonction des largeurs et hauteurs indiquées en attribut. exemple : <IMG src="http://www.info.unicaen.fr/herve/enshtml/images/phenix.jpeg" width=500 height=250 alt="le phénix, symbole de l'université de Caen"> placera la photo indiquée dans l'URL de la source (attribut src) dans le fil du texte. La photo aura une largeur de 500 pixels pour une hauteur de 250 pixels.


Si les photos et les icones sont sur la même disquette (ou sur le même disque dur) que la page HTML en cours de rédaction, on doit utiliser des URL relatifs pour la source. Supposons que l'on ait l'organisation suivante :

Répertoire TD index.htm sous-répertoire TD1 bonjour.htm premier.htm sous-répertoire icones top.gif retour.gif sous-repertoire images maphoto.jpg

Pour introduire votre photo dans la page d'index (index.htm), on fera l'appel d'image suivant : <IMG src="images/maphoto.jpg" alt="mon portrait"> et pour introduire l'icone de retour dans le fichier premier.htm qui est dans le répertoire TD1, on fera l'appel suivant : <IMG src="../icones/retour.gif" alt="retour"> 3 - Les liens Pour pouvoir sauter d'un bloc de texte à un autre, suivant le modèle hypertexte, il convient d'avoir une marque spécifique pour l'origine d'un lien dans la page présentée à l'utilisateur. L'invocation du lien (en général un clic sur la représentation du lien, mais avec les scripts dynamiques on peut imaginer d'autres solutions), remplace le contenu de la fenêtre par une autre page HTML, diffusée par le même serveur (lien local) ou par un autre serveur mondial.


Une lien peut être :

• une zone de texte dans le fil de la page HTML. On marque alors le texte qui sert de zone d'ancrage par :

<A href="URL de la destination du lien">Texte constituant le point de départ du lien </A>

(href -> mnémotechnique : hypertext reference) • une image (par exemple une icone suite ou retour) : <A href="URL de la destination du lien"> <IMG src="../icones/suite.gif" alt="suite" border=0> </A> La mention "border=0" en attribut de l'image permet de masquer le filet bleu

qui entoure l'image pour montrer qu'il s'agit d'un lien. Quand le curseur passe sur un lien, il modifie sa forme, pour passer de la flèche à la main, indiquant que l'on peut cliquer sur une image pour aller vers une autre page HTML

• une fraction d'image. On définit à l'intérieur d'une image des zones sensibles. A chaque zone correspond un lien spécifique.

Une image qui contient des zones sensible (image "mappée" en jargon HTML) est associée à un fichier USEMAP qui précise pour chaque zone sensible (AREA) les URL correspondants.

Exemple : <IMG src="navbar.gif" alt="barre de navigation" usemap="#map1">

<MAP name="map1"> <AREA shape="rect" coords="0,0,50,25" href="page0.html"> <AREA shape="rect" coords="51,25,100,25" href="sommaire.html">

<AREA shape="rect" coords="101,25,150,25" href="page2.html">

</MAP>

Les liens peuvent recevoir des événements intrinsèques (cf. page des scripts) et sont manipulables par les langages de script comme JavaScript. 4 - Les tableaux Les tableaux ont une utilisation très variable en HTML. À l'origine, ils ont été introduits dans la norme pour présenter des feuilles de calcul ou d'autres rapports qui nécessitaient la forme tableau. Mais très vite les graphistes du web ont vu qu'ils pouvaient en tirer des effets typographiques et d'organisation des pages écrans en plaçant dans les cellules des tableaux du texte (parfois long) ou des images, ou tout autre élément HTML. Maintenant, les fonds de cellules de tableau peuvent aussi être

colorés ou recevoir des images... bref chaque cellule de tableau se comporte comme un petit fichier HTML inclu dans le fichier général de définition de la page HTML. Un tableau est divisé en rangées (élément TR - Table Row). Les rangées sont elles-mêmes divisées en cellules (élément TD - Table Data). Le nombre de cellules définit le nombre de colonnes. Dans certaines rangées des cellules peuvent couvrir plusieurs colonnes. La largeur des colonnes peut être fixée par le concepteur, ou bien calculée par le système, mais avec un rendu qui est imprévisible. On doit considérer que l'élément de base du tableau est la cellule (selecteur TD) et que ces cellules sont regroupées en lignes, et les lignes en un tableau. Pour un tableau de deux lignes et trois colonnes on a le codage suivant <TABLE> <TR>  <TD>  contenu de la cellule 1-1</TD> <TD>  contenu de la cellule 2-2</TD> <TD>  <IMG src="../images/livres.gif"></TD> </TR>  <TR>  <TD colspan=2>  contenu sur deux colonnes de la cellule 2-1</TD> <TD>  <IMG src="../images/gutenberg.gif"></TD> </TR>  </TABLE>  Le rendu est alors le suivant :


On peut utiliser les tableaux pour écrire sur plusieurs colonnes, pour placer des images ou des champs de formulaire. C'est une des structures les plus utilisées en HTML, même si les feuilles de style viennent maintenant concurrencer certaines utilisations des tableaux. Chaque élément d'un tableau peut être doté d'attributs qui définissent la taille du cadre de tableau (border=2 pour un cadre large de 2 pixels), les marges internes ou entre les cellules, et le type d'alignement tant horizontal que vertical du contenu à l'intérieur de la cellule. On trouvera tous les attributs dans l'aide-mémoire, en annexe à ce polycopié. 5 - Couleurs et mesures dans les feuilles de style a - l'espace des couleurs Les couleurs sont définies par addition des couleurs primaires Rouge, Vert et Bleu. Un même point physique de l'écran (pixel = picture element) a une couleur composée par l'addition de la valeur de chacune des trois couleurs primaires.


Pour chaque couleur primaire, l'intensité varie de 0 à 255 (base décimale), ou bien de 00 à FF (base hexadécimale). La notation des couleurs est disponible sous deux formes :

• notation hexadécimale : color: #FF0000; -> FF pour le rouge, 00 pour le vert, 00 pour le bleu,

soit un rouge intense. • notation décimale : color: rgb(0,0,255); -> bleu intense

Quelques couleurs sont largement utilisées, on peut donc les définir par des noms de couleur. Seize couleurs sont dans ce cas, dont les noms sont normalisés : Les valeurs hexadécimales de ces couleurs sont : Black = #000000 Green = #008000 Silver = #C0C0C0 Lime = #00FF00 Gray = #808080 Olive = #808000 White = #FFFFFF Yellow = #FFFF00 Maroon = #800000 Navy = #000080 Red = #FF0000 Blue = #0000FF Purple = #800080 Teal = #008080 Fuschia = #FF00FF Aqua = #00FFFF On peut évaluer le rendu de ces couleurs à l'URL : http://www.info.unicaen.fr/herve/enshtml/ressources/couleurs.html b - les mesures Les mesures se font en pixels, points ou en mesures relatives. Les positions sur le canevas sont mesurées en pixels. La dimension d'un pixel varie suivant chaque navigateur et suivant les ordinateurs. On considère qu'une "page écran" mesure 600 pixels de large sur 450 pixels de haut. On peut utiliser des unités relatives, notamment en pourcentage (par rapport à l'élément englobant) pour définir les tailles des éléments.

width="50%" -> la largeur de l'élément sera la moitié de l'élément englobant. margin-left: 20% -> la marge gauche prendra 20% de la largeur du canevas.

Les polices de caractères sont définies en points, suivant une mesure typographique. La base est d'une taille de 12 points (12pt en abbréviation). On utilise des unités typographiques relatives (em) quand on demande à une police de caractère d'être plus grande (resp. petite) que la mesure des caractères dans l'élément englobant. Ainsi, si l'on souhaite que la taille des caractères des paragraphes introductifs (class="intro") soient 1,5 fois plus grand que la taille du texte de base, on utilisera le style : font-size: 1.5em;


6 - Conception des boîtes dans les feuilles de style La page HTML est construite par le navigateur sur un canevas. Le canevas (ensemble du texte) est plus grand que la fenêtre (partie visible du texte). Un élément peut être considéré comme une boîte rectangulaire placée sur le canevas. Par rapport à ce canevas, on définit les valeur de la marge (margin), de la bordure (border) et de la distance entre le bord et le contenu (padding) suivant le schéma suivant :

Margin

Border

Padding

Contenu du bloc

place occupée par le bloc

Chaque partie de la boîte définissant un bloc (paragraphe, titre, tableau, énumération...) peut être divisée en quatre (top, left, right, bottom). On a ainsi les propriétés padding-top, border-left ou margin-right dont les valeurs indépendantes peuvent être fixées dans les feuilles de style.

Chapitre 6

Initiation aux scripts

en utilisant JavaScript Avec les feuilles de style, les pages encodées en HTML ont une présentation déterminée par l'auteur, qui peut placer les éléments de texte (principe des boîtes) et choisir les attributs typographiques. Les scripts interprétés par le navigateur permettent d'apporter des comportements interactifs aux documents HTML. On parle alors de HTML Dynamique. Ainsi, les marques d'ancres peuvent changer de couleur quand le pointeur les survole. L'utilisateur peut déplacer des images sur sa page. L'auteur peut créer des menus déroulants au sein du texte, ou encore ouvrir une autre fenêtre et décider de son contenu par simple clic sur une image. Pour réaliser ces opérations dynamiques, on utilise le langage de script JavaScript. Les scripts (petits programmes) sont insérés dans la page HTML. L'élément script est balisé par <SCRIPT> ... </SCRIPT> et se place en général dans le HEADER. Les programmes de script sont interprétés par le visualiseur (du moins à partir de la version 4 des principaux navigateurs). 1 - Placer un script dans une page HTML Les scripts peuvent être placés dans différents endroits d'une page HTML. En général on introduit les fonctions dans un élément script de l'en-tête. Les fonctions du script sont appelées quand un élément HTML capte un "événement intrinsèque" (survol du pointeur, clic, maintien du bouton de la souris...). Pour éviter que le script ne soit interprété comme du texte par les navigateurs qui ne reconnaissent pas JavaScript, on place celui-ci dans un commentaire HTML soit : <SCRIPT language="javaScript">  </SCRIPT> Un script doit être commenté (indications en plein texte qui ne sont pas considérées comme du code javaScript et qui sont indispensables pour qu'un script puisse être maintenu et amélioré au cours du temps). Les commentaires sont introduits par // 2 - Les objets en JavaScript


La programmation des scripts en JavaScript est basée sur le modèle des objets informatiques. De nombreux éléments HTML (les ancres, les images, les divisions nommées (divisions ayant un identifiant et une valeur de position),...) sont vues par JavaScript comme étant des "objets". Le programme JavaScript peut alors lire les caractéristiques de cet objet ou les transformer, ce qui rend la page "dynamique". Un "objet" JavaScript possède :

• des propriétés qui définissent les caractéristiques de l'objet. • des méthodes qui représentent les calculs sur l'objet.

Les propriétés des objets. Les propriétés sont représentées par la notation hiérarchique à point : nom-de-l'objet .(point) nom-de-la-propriété Par exemple, un objet Image (attention, le I majuscule est obligatoire)

possède plusieurs propriétés : sa largeur, sa hauteur, son nom, sa source (URL de l'image)...

Chaque image d'une page HTML est un objet JavaScript. Pour les distinguer, il est donc nécessaire de nommer les images, en utilisant l'attribut "name".

<IMG name="im1" src="icones/pointcouleur.gif" width=20 height=20 alt="point en couleur"> Cet élément sera vu par JavaScript comme un objet de nom im1. On

obtiendra alors ses propriétés par : im1.src correspond à "icone/pointcouleur.gif"; im1.width correspond à 20; im1.height correspond à 20; On pourra dynamiquement changer certaines de ces propriétés, notamment

la source de l'image en utilisant l'opérateur d'affectation = im1.src= "icone/pointblanc.gif"; // va remplacer le point en couleur par un point blanc//

Attention : l'opérateur = représente une opération d'affectation : on place

dans la variable de gauche le contenu de ce qui est à droite du signe égal (soit un nombre, soit une chaîne de caractères, soit même une autre variable ou un calcul dont le contenu est versé dans la variable désignée à gauche du signe égal). L'affectation est une opération orientée.

(note : l'évaluation de l'égalité pour sa part se représente par == )


Les méthodes Une méthode (ou fonction) permet d'effectuer des calculs ou de modifier les

propriétés d'un objet. Il y a des méthodes pré-existantes pour chaque type d'objet. Une méthode est

présentée par la notation hiérarchique à point vue précédemment. Exemple 1 : la méthode write de l'objet document L'objet document possède plusieurs méthodes dont : - write(), méthode qui permet d'écrire les valeurs qui figurent dans le

paramètre directement dans le document. document.write("<P>Bonjour</P>"); L'effet de la méthode write dépend de l'endroit où le script est placé au sein

du fichier HTML. Si le script est dans le header, le texte sera écrit au début du document. Sinon, il sera écrit à l'endroit où le script est placé dans le document (on peut toujours insérer un script à n'importe quel endroit du document au sein d'un élément SCRIPT).

La chaîne de caractères qui figure en paramètre de la méthode write()

peut être : - une simple chaîne de caractère qui sera considérée comme du texte inline - une variable de type String. C'est alors le contenu de la variable au

moment où la méthode write() est appliquée qui sera affiché. - du code HTML, qui sera alors interprété par le visualiseur.

L'exemple suivant montre que la mention d'un identifiant dans le paramètre

entraîne l'application de la feuille de style associée quand le texte du paramètre est écrit dans le document (ici en début de document puisque le script figure dans l'élément HEAD).

<HTML> <HEAD> <TITLE>La méthode Write</TITLE> <STYLE type="text/css">  </STYLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor=white> <P align=center>le monde</P> </BODY> </HTML>

Exemple 2 : l'objet chaîne de caractères (String) L'objet String représente une chaîne de caractères (un morceau de texte).

On crée cet objet par l'opérateur new chaine1 = new String("Bonjour, mes amis."); chaine2 = new String("Belle journée !"); Cet objet possède plusieurs méthodes, dont la méthode indexOf(), qui

permet de savoir si une séquence de caractères est présente dans l'objet :


chaine1.indexOf("amis") -> a une valeur de 13, car amis est présent et la première lettre ("a") est le 13ème caractère de la chaîne (le premier caractère à toujours l'index 0)

chaine2.indexOf("amis") -> valeur -1 ("moins un") car la séquence "amis" n'est pas présente dans l'objet chaine2

La hiérarchie des objets en JavaScript Les objets JavaScript existent : - soit parce qu'ils correspondent à des éléments du code HTML de la page - soit parce qu'ils ont été créés par l'opérateur new Les objets issus des éléments HTML sont emboîtés comme le veut le code

HTML. La hiérarchie des objets est la suivante :

Window

Frame

document

Location

History

Layer

Link

Image

Area

Anchor

Applet

Plugin

Form

Textarea

Text

FileUpload

Password

Hidden

Submit

Reset

Radio

Checkbox

Button

Select Option

Navigator

Plugin

MimeType


3 - Les événements intrinsèques Les éléments HTML peuvent capter les événements intrinsèques, qui correspondent aux actions de l'utilisateur, notamment les mouvements de souris (on dit "mouvement de souris", même si plus précisément cela signifie "mouvement du pointeur associé à la souris"). On peut associer à un élément un handler qui capte l'événement intrinsèque et le redirige vers un script JavaScript (plus précisément une fonction dans un script). Les handlers d'événements associés aux mouvements de la souris ou au clavier sont : onClick : l'utilisateur clique sur la boîte de l'élément concerné onDblClick : double clic (ne fonctionne pas avec tous les navigateurs) onMouseDown : le bouton de la souris est enfoncé onMouseUp : le bouton de la souris est relaché onMouseOver : le pointeur passe sur la surface de la boîte concernée onMouseOut : le pointeur quitte la boîte onMouseMove : le pointeur se déplace onKeyPress : une touche clavier est pressée onKeyDown : touche clavier maintenue enfoncée onKeyUp : touche clavier relachée Les handlers d'événement sont placés comme attributs dans la balise de départ de l'élément concerné.

Exemple : Un lien capte l'événement d'entrée ou de sortie du pointeur de la zone

représentant le lien. Cet événement déclenche une fonction JavaScript (qui aura été définie dans l'élément SCRIPT) ou bien directement une commande JavaScript simplement placée dans le handler d'événement.

Dans l'exemple suivant, l'image (objet im1) va être modifiée et remplacée par l'image désignée par l'URL (avionrouge.gif).

<A href="destination.htm" onMouseOver="im1.src='../images/avionrouge.gif'" onMouseOut="im1.src='../images/avionbleu.gif'"> <IMG src="../images/avionbleu.gif" name=im1 width = 50 height = 50 alt = "prends l'avion pour là bas" border=0> </A>

4 - Les fonctions JavaScript Pour que JavaScript puisse interagir avec le document, nous devons intercepter des événements par le biais des handlers et transmettre cette interception à une fonction. Les instructions qui figurent dans la fonction sont alors exécutées, ce qui va déclencher une action (d'où l'appelation Dynamic HTML).. Les fonctions de JavaScript sont soit pré-définies dans le langage (ce sont alors des méthodes des objets de JavaScript), soit rédigées par le concepteur d'un script. La méthode alert() : alert() est une méthode de l'objet Window. Cette méthode ouvre une boîte d'alerte et indique dans cette boîte le texte qui est passé en paramètre.

alert ( "Bonjour le monde");

méthode ( paramètre) La méthode alert() est bloquante. Tant que l'utilisateur n'a pas validé l'information d'alerte, le reste de l'interprétation du code (HTML et JavaScript) est suspendu. L'exemple suivant le montre :

<HTML> <HEAD> <TITLE>La methode alert()</TITLE> <STYLE type="text/css">  </STYLE> <SCRIPT language="JavaScript">  </SCRIPT> <BODY bgcolor=white> <P>La méthode <TT>alert()</TT> est bloquante. L'exécution de la suite du code est soumise à la validation par le lecteur.</P> </BODY> </HTML>

Dans un premier temps, le script génère une alerte : aucun texte ne figure dans la partie document :


Ce n'est qu'après le clic du lecteur sur la boîte d'alerte que le reste du code HTML est interprété et affiché.

rédiger une fonction personnalisée Une fonction est introduite par le mot-clé function Les instructions sont exécutées les unes après les autres, dans l'ordre. Les instructions de la fonction sont regroupées dans un bloc par les accolades Chaque instruction est placée sur une ligne et se termine par un point-virgule.

function nomdemafonction(parametres) { // commentaire concernant la fonction instruction 1 ; instruction 2 ; ...... } // accolade fermante de la fonction nomdemafonction

exemple 1 : La notion de paramètre La fonction changefond() va changer la couleur de fond du document (document.bgColor). La nouvelle couleur de fond est passée en paramètre.

L'événement déclenchant est le clic sur un bouton d'un formulaire. Le formulaire envoie ses données à un programme ... qui ne fait rien (action="javascript:void(0);"). Cependant, l'événement que constitue le clic sur un bouton a été capté par le handler onClick, qui déclenche l'exécution de la fonction changefond() en utilisant le paramètre qui figure dans le handler onClick. Le paramètre est une chaîne de caractères (le nom d'une couleur). Il est donc placé entre cotes. Comme nous sommes déjà à l'intérieur d'une chaîne entre cotes (ici des doubles-cotes : "onClick=...") on utilise alors des cotes simples (').

<!DOCTYPE HTML public "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Fonction : changefond()</TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor=white> <FORM action="javascript:void(0);" method=post name="form1"> <INPUT OnClick="changefond('red');" type=submit name="bt1" value="Rouge"> <INPUT onClick="changefond('yellow');" type=submit name="bt2" value="Jaune"> <INPUT onClick="changefond('green');" type=submit name="bt3" value="Vert"> <INPUT onClick="changefond('aqua');" type=submit name="bt4" value="Aqua"> </FORM> </BODY> </HTML>


La fonction changefond() est la même quelle que soit la couleur concernée. C'est l'intérêt des "passages de paramètres". Ce que le handler transmet en paramètre à la fonction est placé dans la variable interne à la fonction dont le nom est "nvellecouleur". Cette variable va donc prendre, suivant le bouton cliqué par l'utilisateur les valeurs "red" ou "yellow" ou "aqua".

function changefond(nvellecouleur) { document.bgColor = nvellecouleur; }

Au moment où la fonction va utiliser la variable nvellecouleur (pour changer la propriété bgcolor de l'objet document), cette variable aura pris une valeur dépendant du bouton qui aura été cliqué. C'est cette valeur spécifique ("red", "green" ou autre) qui sera utilisée. On doit considérer les variables comme des récipients. L'étiquette est l'identifiant de la variable (ici nvellecouleur), et le contenu ce que l'on va réellement utiliser au moment où l'on va se servir de la variable. Car on boit rarement l'étiquette, mais plutôt le contenu.


Exemple 2 : le branchement conditionnel Souvent, deux hypothèses sont ouvertes, et une fonction peut effectuer des actions différentes suivant le résultat de l'évaluation d'une condition. On parle alors d'une "structure de contrôle".

si évaluation d'unecondition

vrai

faux

{ bloc d'instructions 1 }

{bloc d'instructions 2 }

En javascript la structure de contrôle qui permet ce branchement conditionnel s'écrit : if (évaluation de condition) { bloc d'instructions 1, interprété si la condition évaluée rend la valeur VRAI } else { bloc d'istruction 2 interprété si la condition évaluée rend la valeur FAUX } Une évaluation de condition, qui ne peut prendre que deux valeurs (VRAI ou FAUX) est dite valeur booléenne. Une telle évaluation peut prendre des formes très diverses. Tout schéma qui admet deux solutions (VRAI ou FAUX) peut servir d'évaluation de condition.

5 - Un exemple complet : échanger deux images Le principe de ce document dynamique est de modifier l'apparence d'un lien quand la souris passe au dessus. C'est une manière d'inciter le lecteur à invoquer ce lien. Pour cela, on dispose de deux images représentant le lien, une image rouge et une image bleue. Pour accentuer la crédibilité de l'exemple, on suppose que le lien nous envoie vers une destination quand il est invoqué (href="destination.html"). L'image est donc celle d'un avion (pour aller là-bas), qui va basculer du bleu au rouge. Dans des applications réelles, on évite les changements aussi radicaux, de peur d'effrayer le lecteur. L'exemple est réalisé de façon a être généralisable. On va donc écrire une fonction qui recherche la chaîne de caractère indiquant la couleur de l'image actuellement présentée (bleu ou rouge) et provoquant alors l'échange d'image. D'abord le code : <!DOCTYPE HTML public "-//W3C//DTD HTML 4.0//EN"> 

<HTML> <HEAD> <TITLE>Changement d'image</TITLE> <META name="auteur" content="Le Crosnier, Hervé"> <META name="date" content="11 septembre 1998"> <META name="TD" content="préparation"> <META name="sujet" content="script pour le changement de couleur de l'image représentant un lien"> <STYLE type="text/css">  </STYLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD>


<BODY bgcolor=white> <DIV class="annonce"> <P>Les passagers à destination de là-bas</P> <p>sont invité à placer leur souris sur l'avion</P> </DIV> <DIV align=center> <A href="destination.html" title="Les passagers sont invités à prendre place" onMouseOver = "changecouleur(im1)" onMouseOut = "changecouleur(im1)"> <IMG src="../icones/avionbleu.gif" name="im1" height = 50 width = 50 alt="image d'avion" border = 0> </A> </DIV> </BODY> </HTML>

Il vous faudra évidemment beaucoup d'imagination pour voir un avion dans cette croix bleue... surtout sur un polycopié en noir et blanc. L'essentiel est que l'exemple serve le commentaire. Le script agit sur la page... c'est donc par la page qu'il faut commencer l'explication. Le texte est placé dans une division qui est déclarée dans la classe annonce. Ceci permet d'appliquer la feuille de style. L'image (<IMG src="../icones/avionbleu.gif">) qui est placée à l'intérieur d'un lien(<A href="destination.html">). La structure simplifiée serait

<A href="destination.html"> <IMG src="../icones/avionbleu.gif"> </A>

Cependant, nous avons ajouté plusieurs attributs à l'image et au lien. Pour l'image, nous ajoutons :

- un nom pour désigner l'objet image dans le script. Les objets doivent être nommés. On construit un objet JavaScript, soit par le constructeur new (comme nous le verrons plus loin), soit simplement en nommant un élement de la page HTML

name="im1" - la mention de la largeur et de la hauteur de l'image. Ces attributs ont deux

conséquences : la page est mise en place plus rapidement (le navigateur peut calculer le

rendu même si l'image n'est pas encore arrivée, en suivant le principe des boîtes.

toutes les images qui vont prendre la place de im1 garderont ces dimensions. width=50 height=50 - l'attribut alt permet d'indiquer un texte qui est présenté aux navigateurs qui

n'affichent pas les images (navigateurs en mode texte, ou bien navigateurs à synthèse sonores). Cet attribut est expressément demandé dans la norme. Même si les navigateurs acceptent les images qui n'ont pas de texte alternatif, il est conseillé d'utiliser systématiquement cet attribut.

alt="image d'avion" - l'attribut border=0 permet de supprimer le filet qui entoure l'image. L'image

étant placée dans un lien, elle serait encadrée par un filet bleu (équivalent du soulignement pour les liens textuels). En ayant un bord de 0 pixel, celui-ci disparaît.

border=0

Le lien dispose des attributs qui sont des handlers, destinés à capter les deux événements mouseOver (passage de la souris sur le lien) et mouseOut (sortie de la souris de la boîte du lien) :

- OnMouseOver et onMouseOut captent ces événements et les transmettent à la fonction changecouleur(). L'appel est placé entre cotes, suivant la règle générale pour les attributs :

nomduhandler = " fonction appelée() " Il ajoutent le paramètre im1, qui est le nom de l'image concernée par l'action

de changecouleur(). La même fonction changecouleur pourrait donc servir à modifier plusieurs images, simplement en passant en paramètre le nom de ces autres images.

onMouseOver = "changecouleur(im1)" onMouseOut = "changecouleur(im1)" Les handlers sont placés dans le lien car tous les navigateurs ne savent pas encore capter les événements avec les objets Image. Etudions maintenant le SCRIPT.

<SCRIPT language="JavaScript"> <!--


imb = new Image; imb.src="../icones/avionbleu.gif"; imr = new Image; imr.src="../icones/avionrouge.gif"; function changecouleur(quelleIm) { if (quelleIm.src.indexOf("bleu") == -1) { quelleIm.src = imb.src; } else { quelleIm.src = imr.src; } } // --> </SCRIPT>

Celui-ci est placé dans l'en-tête et sera donc exécuté avant l'interprétation de la page. Le script commence par définir deux objets Image (attention, le I majuscule est obligatoire) :

imb = new Image; imb.src="../icones/avionbleu.gif"; imr = new Image; imr.src="../icones/avionrouge.gif";

l'opérateur new crée l'objet imb. puis la propriété src de l'image imb est fixée. A ce moment, l'objet existe et va chercher sur le serveur l'image correspondante. Cela permet d'accélérer le basculement entre les images, car les deux versions (rouge et bleue) sont présentes en mémoire. La fonction changeimage() peut alors manipuler les images, en particulier changer la propriété src de l'objet Image quelleIm... qui a été créée par le passage de paramètre par le handler.

function changecouleur(quelleIm) { if (quelleIm.src.indexOf("bleu") == -1) { quelleIm.src = imb.src; } else { quelleIm.src = imr.src; }

quelleIm est un objet (un récipient). Mais à chaque fois que l'on va l'utiliser, ce qui est appliqué à quelleIm dans la fonction sera en réalité appliqué à l'image qui aura été passée en paramètre par le handler (le contenu du récipient pour filer la métaphore). La fonction va échanger la source de quelleIm (propriété src) tantôt avec la source de imb, tantôt avec la source de imr. Le choix est soumis à l'évaluation d'une condition. Nous retrouvons la structure d'un branchement conditionnel.


Etudions l'évaluation de condition :

(quelleIm.src.indexOf("bleu") == -1)

la condition est placée entre parenthèses. il s'agit de l'évaluation d'une égalité (opérateur = =) le membre gauche de l'égalité est l'application de la méthode indexOf() la méthode indexOf() s'applique à des objets String l'objet chaîne de caractères sur lequel nous allons appliquer cette méthode est : quelleIm.src quand on passe l'image im1 en paramètre, la chaîne est évaluée à : im1.src soit : icones/avionbleu.gif ou : icones/avionrouge.gif quelleIm.src.indexOf("bleu") va rechercher la chaîne de caractère passée en paramètre (ici "bleu") dans l'objet de type String quelleIm.src Si im1 est l'image bleue, les caractères "bleu" sont présent dans quelleIm.src. La méthode va donc renvoyer la valeur 13 (le b de bleu est le treizième caractère de la chaîne icones/avionbleu.gif Si l'image est rouge (alors quelleIm.src est évaluée à im1.src qui est icones/avionrouge.gif) la chaîne "bleu" ne figure pas dans quelleIm.src, la méthode renvoie la valeur -1 (moins un). En conclusion, l'évaluation de condition donnera : VRAI si bleu ne figure pas dans la source de l'image (image rouge présente à l'écran) FAUX si bleu figure dans la source de l'image (image bleu à l'écran).

Le branchement sera alors le suivant : Si VRAI (image rouge à l'écran) { on échange la source de im1 avec la source de l'image bleue imb) } autrement (i.e. l'évaluation renvoie FAUX {on échange la source de im1 avec la source de l'image rouge imr } ce qui s'écrit en JavaScript : function changecouleur(quelleIm) { if (quelleIm.src.indexOf("bleu") == -1) { quelleIm.src = imb.src; } else { quelleIm.src = imr.src; }


Evidemment, il vous faut toujours autant d'imagination pour voir un avion rouge, d'autant que vous êtes toujours sur un polycopié en noir et blanc. Mais l'imagination est nécessaire pour faire de l'informatique, pour écrire des documents... alors a fortiori, l'imagination est indispensable pour marier le texte et l'informatique.

Annexe 1

Aide-mémoire simplifié

HTML 4.0

1 - Organisation d'un document HTML La déclaration de type de document doit précéder tout fichier HTML. Pour HTML 4.0, la déclaration est publique : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> La structure généralre d'un document HTML est la suivante : <HTML> <HEAD>  <TITLE> </TITLE> <META name="..." content="..."> <STYLE type="text/css">  </STYLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY>  ... </BODY> </HTML>


2 - L'en-tête <TITLE> Obligatoire -- L'élément TITLE indique le nom de la fenêtre. Ce "titre" est aussi utilisé dans les listes de signets. <BASE href="..."> Permet de déréférencer les URL partiels. Si BASE est absent, l'URL du document en cours est utilisé. <META> attributs de l'élément <META> http-equiv : permet de simuler une information du header HTTP name content une paire d'information nom-contenu <LINK> utilisé pour les redirections ou pour l'appel des feuilles de styles externes attributs de l'élément LINK rel indique le type de relation existant entre la page pointée et la page en cours de lecture. L'utilisation principale est pour le lien avec les feuilles de style externes <LINK rel="Stylesheet" href="stylegen.css"> href URL du lien 3 - Le corps du document Le corps du document représente la partie qui est visible à l'intérieur de la fenêtre du navigateur. L'élément BODY concerne toute la page encodée. Tous les autres éléments sont imbriqués à l'intérieur de l'élément BODY. <BODY> Attributs de l'élément BODY : bgcolor codage RGB ("#000000" noir ; "#FFFFFF" blanc) text couleur du texte link couleur des liens (bleu : "#0000FF" par défaut) vlink couleur des liens déjà parcourus alink couleur flash au moment du clic background appel d'une image de fond d'écran (image est définie par son URL) Les attributs de l'élément BODY définissent des valeurs qui s'imposent à tout le document. Ils deviennent "dépréciés", et tendent à être remplacés par des feuilles de style asociées à l'élément BODY. Plus généralement, à chaque fois que l'on peut utiliser une feuille de style à la place d'attributs spécifiques des éléments d'un document, cette solution est préférable pour la maintenance et l'évolution des pages concernées. 4 - Les attributs généraux et les événements intrinsèques


Certains attributs sont applicables à tous les éléments. Il s'agit en particulier de : id : nom unique d'identifiant pour un élement spécifique. Sert pour les

éléments qui ont une position absolue, ou bien qui sont manipulés par des scripts JavaScript. On utilise pour les images l'attribut name qui a la même fonction (et devient obsolète... même s'il est aujourd'hui indispensable pour les images sous NetScape).

class : permet de définir des classes d'éléments auxquels on peut appliquer la même feuille de style.

lang : language utilisé et dir direction de l'écriture de cette langue de droite à gauche pour les langues européennes, de gauche à droite pour l'arabe et l'hébreu.

title : chaque élément peut avoir un titre spécifique. Celui-ci apparaît en bulle quand le curseur passe dessus l'élément concerné. Utile pour indiquer les destinations des liens ou développer les acronymes

style : pour indiquer un style spécifique directement à l'intérieur du codage HTML. On indique le contenu de la feuille de style entre cotes ("), chaque propriété est séparée par le point-virgule (;).

bgcolor : chaque élément peut recevoir un fond de couleur spécifique. Attention, certains navigateurs ne reconnaissent pas cet attribut pour tous les éléments.

Les éléments HTML peuvent recevoir des événements intrinsèques (intrisic events) qui représentent des actions de l'utilisateur. Pour programmer des pages dynamiques, on capte l'événement dans un handler, qui renvoie à une fonction JavaScript qui traite l'événement et produit les modifications du document. Les handlers des événements intrinsèques de la souris et du clavier sont : onClick : l'utilisateur clique sur la boîte correspondant à l'élément concerné onDblClick : double clic onMouseDown : le bouton de la souris est enfoncé onMouseUp : le bouton de la souris est relaché onMouseOver : le pointeur passe sur la surface de la boîte concernée onMouseOut : le pointeur quitte la boîte onMouseMove : le pointeur se déplace onKeyPress : une touche clavier est pressée onKeyDown : touche clavier maintenue enfoncée onKeyUp : touche clavier relachée exemple de script intégré dans un élément : <A href="destination.htm" onMouseOver="changecouleur(im1) onMouseOut="changecouleur(im1)"> <IMG src="../image/avionbleu.gif" name=im1 width = 50 height = 50 alt = "prends l'avion pour là bas" border=0> </A>


Quand le pointeur passe au dessus de l'ancre, la fonction "changecouleur" est appelée avec le nom de l'image. Si bleu figure dans le nom de l'image (avionbleu.gif), on remplace la source de IMG (im1.src) par l'image rouge (avionrouge.gif), ou le contraire. La même fonction est appelée quand la souris quitte la zone définie par la boîte contenant l'ancre, ce qui va faire revenir l'image de départ (avionbleu.gif). La fonction JavaScript changecouleur() est placée dans l'élément SCRIPT de l'en-tête du document. 5 - Les eléments de bloc <DIV> distingue des parties d'un document HTML (divisions). Une division munie d'un identifiant (attribut id="..") est la base de la manipulation par des scripts de blocs de texte ou d'image. attribut : align (left|center|right) <H1>...<H6> titres de section (heading) attribut : align (left|center|right) (déprécié) <P> Elément paragraphe. On peut omettre la marque de fin </P>, mais nous conseillons de la maintenir. Un paragraphe est suivi d'une ligne blanche. <UL> Liste non-ordonnée. attributs : type (style de la marque : disc, squarre, circle) compact (réduit l'espace entre les items - fonctionne mal avec les navigateurs du commerce) <OL> Liste ordonnée. attributs : type :1 (1,2,3) a (a,b,c) A (A,B,C) i (i,ii,iii) I (I,II,III) start valeur de départ compact <DL> Liste de définition <DT> Terme à définir <DD> Définition (par défaut en décalage à droite par rapport à l'élément DT) <PRE> texte préformatté (caractères à chasse fixe, par défaut courier) <BLOCKQUOTE> Pour une citation (par défaut apparaît avec une marge gauche. Utilisé fréquemment pour provoquer une marge. Cette utilisation est déconseiller car remplacée par l'utilisation des feuilles de style). <HR> ligne horizontale attributs : align (left|center|right) noshade size (en pixels) (hauteur de la barre) width (en pixels ou en pourcentage) largeur de la barre par defaut : 100% (de l'élément englobant) 6 - Les éléments inline


Les éléments de texte ( éléments inline) ne provoquent pas de changement de bloc. Ils s'intègrent dans le flot du document. Les éléments d'enrichissement typographique : <B> caractères gras <TT> télétype <I> Italique (attention : peu lisible à l'écran) <SUB> en indice <SUP> en exposant Les éléments logiques de mise en valeur : <EM> emphase (par défaut italique) <STRONG> mise en valeur (par défaut gras) <CITE> Citations ou références à d'autres sources <ACRONYM> Pour distinguer les acronymes. En indiquant la signification de l'acronym en titre (attribut title), celle-ci appraîtra dans une bulle si le pointeur s'attarde sur l'acronyme. L'élément <SPAN> permet de distinguer une partie du flot de texte pour appliquer à cette partie un style spécifique. On utilise l'attribut id ou class pour indiquer le type de traitement que la feuille de style va appliquer. Très utile pour les premières lettres d'un paragraphe qui sont définies en taille supérieure, voire en couleur différente. <BR> pour forcer un saut de ligne 7 - Les éléments fonctionnels Les liens ( ou ancres) <A> Attributs (bien utiliser les quotes) : name pour désigner une partie d'un corps de document. Installe un marque page pour pouvoir sauter ensuite directement à ce point du texte. Utilisation déconseillée : éviter les pages HTML trop longues href lien hypertexte vers un URL (mnémotechnique : Hypertext REFerence) target définit le cadre (frame) qui va recevoir la page désignée par la référence hypertexte. Nous déconseillons l'utilisation de cadres (FRAMES). <IMG> les images dans le fil du texte Attributs de l'élément image : src : URL de l'image ressource alt : équivalent en texte pour les navigateurs sans image align : position de l'image par rapport au texte (top | middle | bottom | left | right) width largeur de l'image en pixels height hauteur de l'image en pixels border en pixels, taille du tour de l'image quand elle est dans une ancre hspace en pixels, espace à droite et à gauche de l'image vspace en pixels, espace au dessus et en dessous de l'image


usemap identification de zones sensibles. On indique le nom (name) de l'élément MAP (cet élément doit être présent dans le même document HTML) qui indique les zones sensibles et les liens induits. <MAP> : images à zone sensible du coté du client <img src="navbar.gif" border=0 usemap="#map1"> <map name="map1"> <area href="guide.html" alt="Access Guide" shape=rect coords="0,0,118,28"> <area href="search.html" alt="Search" shape=rect coords="184,0,276,28"> <area href="shortcut.html" alt="Go" shape=rect coords="118,0,184,28"> <area href="top10.html" alt="Top Ten" shape=rect coords="276,0,373,28"> </map> les formes des zones sont (x et y sont mesurés en pixels à partir du coin haut-gauche de l'image mappée) : shape=rect coords="x-gauche, y-gauche, x-droit, y-droit" shape=circle coords="x-centre, y-centre, rayon" shape=poly coords="x1,y1,x2,y2,x3,y3..." <APPLET> ... </APPLET> (le texte compris entre les deux balises sert aux navigateurs qui n'intègrent pas JAVA Attributs de l'élément <APPLET> codebase URL de base pour l'applet (défaut : URL du document en cours) code URL relatif à codebase pour les appels des classes JAVA alt texte alternatif name nom pour l'instance de l'applet, permet la communication entre applets d'une même page width et height en pixels espace de placement de l'applet align, vspace et hspace (comme pour l'élément <IMG>) L'élément <PARAM> permet de paser des paramètres à l'applet. 8 - Les tableaux Les tableaux sont définis par <TABLE> ... </TABLE>. On peut enchasser un tableau dans une cellule d'un autre tableau. Un tableau est composé de lignes (élément <TR>), chaque ligne ayant des cellules juxtaposées (éléments <TH> ou <TD>). Attributs de l'élément <TABLE> align (left | center | right) (alignement du texte à l'intérieur de la table) width largeur en pixels, ou bien en pourcentage de la taille de l'écran border en pixel, taille de l'encadrement du tableau (0 -> pas de cadre) cellspacing en pixels, espace entre les cellules cellpadding en pixels, espace entre le bord et le contenu d'une cellule Éléments contenus dans un tableau : <CAPTION> légende du tableau attribut : align (top | bottom | left | right) <TR> ligne de tableau (table row) c'est un container pour les cellules. Même si on peut oublier la balise de fin (</TR>), il est préférable de l'utiliser. attributs : align (left | center | right)


valign (top | middle | bottom) Les cellules elles-mêmes comportent deux types d'éléments : <TH> titres de cellules (contiennent du texte mis en gras par défaut) <TD> cellules de donnés (ces distinctions sont utiles pour la typographie, et pour les navigateurs en mode lecture automatique) Attributs des cellules : nowrap pas de retour automatique à la ligne rowspan nombre de lignes occupées par cette cellule colspan nombre de colonnes occupées par cette cellule align (left | center | right) (a priorité sur les mentions de <TR>) valign (top | middle | bottom) (priorité sur les mentions de <TR>) width (en pixels - attention aux conflits avec les autres colonnes) height (idem) bgcolor définit la couleur de fond d'une cellule 9 - Les formulaires Le contenu d'un formulaire est compris entre les balises <FORM>... </FORM>. Le dernier élément d'un formulaire est un bouton d'envoi du formulaire (type = submit ou button). Les attributs de l'élément <FORM> : id (ou name) nom du formulaire pour les scripts JavaScript action donne l'URL du programme auquel est envoyé le contenu du formulaire (en général un programme cgi) method get | post enctype par défaut application/x-www-form-urlencoded Les champs de saisie d'un formulaire : (élément INPUT) <INPUT> (pas de balise de fermeture, ce n'est pas un container) attributs : type : text (défaut) zone de saisie d'une ligne, on précise la taille par size=xx (en nombre de caractères) <input type=text size=40 name="user" value="votre nom"> password le contenu est masqué par des points sur l'écran <input type=password size=12 name="pw"> checkbox chaque boite à cocher génère une paire nom/valeur <input type=checkbox checked name="etudiant" value="oui"> radio permet de choisir une valeur parmi plusieurs <input type=radio name=age value="0-20"> <input type=radio name=age value="20-40" checked> <input type=radio name=age value="40+">


submit envoie à l'URL définit dans l'attribut action le contenu du formulaire sous la forme de paires nom/valeur. Le texte du bouton est indiqué par l'attribut value reset replace les champs du formulaire dans leur état initial file permet d'attacher un fichier au contenu du formulaire (apparaît comme un champ de texte, avec un bouton de balayage pour désigner le fichier à attacher. hidden champ caché, qui sert au suivi de session <input type=hidden name="utilisateur" value="0123-542"> Les champs de sélection sur liste (élément SELECT) <SELECT> menu de sélection au sein d'un formulaire. Il permet de faire apparaître un menu déroulant <SELECT name="couleur"> <OPTION value="rouge">Rouge <OPTION value="vert">Vert <OPTION value="bleu">Bleu </SELECT> Attributs de l'élément de sélection : name size nombre de choix visibles multiple permet de sélectionner plusieurs valeurs Attributs de l'élément OPTION value contient l'information qui est envoyée au programme de traitement du formulaire (la paire nom de la sélection, value de l'option choisie). selected option qui apparaît dans le sélecteur avant toute action de l'utilisateur Les champs de texte (élément TEXTAREA) <TEXTAREA> champ de texte comportant plusieurs lignes attributs de l'élément <TEXTAREA> : name rows nb de lignes cols nb de caractères d'une ligne de texte Le texte d'une zone de texte est compris entre la balise <TEXTAREA> et la balise fermante (</TEXTAREA>) Exemple de formulaire <FORM name = "form1" action = "test.cgi" method = post> <P>Nom : <INPUT type=text size="50" name="nom" value=""> </P> <P>Adresse : <TEXTAREA name="adresse" rows=5 cols=25 border=0> </TEXTAREA></P> <p>Quelle est votre couleur préférée : <SELECT name="couleur"> <OPTION value="rouge" selected>Rouge <OPTION value="vert">Vert


<OPTION value="bleu">Bleu </SELECT> <DL><DT>Votre âge : </DT> <DD><INPUT type=radio name="age" value="1">Moins de 20 ans <BR> <INPUT type=radio name="age" value="2">Entre 20 et 40 ans <BR> <INPUT type=radio name="age" value="3">Entre 40 et 60 ans <BR> <INPUT type=radio name="age" value="4">Plus de 60 ans </DD> </DL> <P><INPUT type=submit name="go" value="Enregistrer vos données personnelles"> <INPUT type=reset name="raz" value="Remise à zéro"></P> </FORM>

Annexe 2

Feuilles de style

Aide mémoire des propriétés 1 - Ecriture des feuilles de style Les feuilles de style sont indiquées dans l'en-tête du document. Elles sont placées dans l'élément STYLE, en commentaire HTML (balises ) afin de permettre la visualisation (en utilisant les styles par défaut affectés à chaque élément HTML) par des navigateurs qui en connaissent pas les feuilles de style. Chaque feuille de style est associée à un sélecteur (le nom d'un élément, une classe particulière ou un objet définit par son identifiant propre). Les différentes propriétés sont séparées par le point-virgule. <STYLE type="text/css">  </STYLE> Les couleurs sont définies dans l'espace des couleurs de HTML (nom ou valeurs rgb en décimal ou hexadécimal) Les dimensions des propriétés de marge, de padding ou de bordure sont mesurées en pixels (valeurs absolues) ou en mesures relatives (em, liées à la taille des caractères contenus dans la boîte, ou pourcentage lié à la taille de la boîte englobante).


2 - Propriétés des boîtes

Margin

Border

Padding

Contenu du bloc

place occupée par le bloc

Propriétés des marges : margin-top: margin-right: margin-bottom: margin-left: margin reprend les quatre valeurs ci dessus dans l'ordre précédent Propriétés de padding : padding-top: padding-right: padding-bottom: padding-left: padding: reprend les quatre valeurs dans l'ordre précédent. Propriété des bordures : border-top-width: border-right-width: border-bottom-width: border-left-width: border-width: reprend les quatre valeurs dans l'ordre précédent on définit aussi les couleurs des bordures par border-top-color: border-right-color: border-bottom-color: border-left-color: border-color: reprend les quatre couleurs dans l'ordre précédent.

Le style des bordures est définit par les propriétés border-top-style: border-right-style: border-bottom-style: border-left-style: border-style: reprend les quatre valeurs dans l'ordre précédent Les valeurs possibles sont à choisir parmi la liste : (none | dotted | dashed | solid | double | groove | ridge | inset | outset) La taille des boîtes est définie par les propriétés width: height: Exemple :

<!DOCTYPE HTML public "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Notion de boîte</TITLE> <META name="auteur" content="Le Crosnier, Hervé"> <META name="date" content="11 septembre 1998"> <META name="TD" content="préparation"> <META name="sujet" content="illustrer la notion de boîte"> <STYLE type="text/css">  </STYLE> </HEAD> <BODY bgcolor=white> <P id="p1">Bonjour</P> <HR> <P id="p2">le monde</P>


4 - Propriétés de positionnement Une boîte (i.e. un élément) peut être positionnée sur le canevas. La propriété position: peut prendre trois valeurs : static la boîte appartient au flot normal absolute la boîte est définie par rapport au bloc qui la contient on utilise les propriétés top et left pour indiquer la position du coin haut-gauche relative Les éléments sont placés les uns au dessus des autres (z-order) comme des calques. L'ordre "vertical" d'origine est donné par l'ordre d'apparition des boîtes dans le code HTML. Cet ordre vertical peut être modifié par le biais de scripts ou de façon statique par la feuille de style). z-index: un nombre entier définit l'ordre vertical (à partir de l'index 0) Un élément peut être visible ou caché, et on peut définir la portion (clip) de l'élément que l'on rend visible. visibility: (hidden | visible) clip: (top, right, bottom, left) Les couleurs de fond de l'ensemble de la page (élément BODY) ou de parties (éléments <-> boîtes) utilisent les propriétés : background-color: (<color> | transparent) background-image: ( <url> | none) BODY {background-image: url(marble.gif)} P.citation {background-image: none} background-repeat: ( repeat | x-repeat | y-repeat | no-repeat) La forme du curseur peut être modifiée quand il passe sur certains éléments en associant la propriété cursor à ces éléments (ne fonctionne pas avec tous les navigateurs) cursor: auto | crosshair | default | pointer (pour les liens) | move (indique que l'élément peut être déplacé) | text (barre verticale indiquant que le texte peut être modifié) | wait (généralement une montre ou un sablier) | help | *-resize (indique le sens de la redimension possible * = e, ne, w, , nw, n, se, sw, s... points cardinaux).

Texte et informatique - … · Texte et informatique - Cours d'initiation ... Chapitre 1 Le texte...

Documents

Transcript of Texte et informatique - … · Texte et informatique - Cours d'initiation ... Chapitre 1 Le texte...