Déroulement de la formation m Module 1 Historique et rappel des notions de base Historique et...

Déroulement de la formationDéroulement de la formation

Module 1Module 1• Historique et rappel des notions de base Historique et rappel des notions de base

Module 2Module 2• Le langage htmlLe langage html

– Création de documentsCréation de documents– Balises essentiellesBalises essentielles– Création de liensCréation de liens– ImagesImages– Formulaires / Scripts de passerelle (CGI)Formulaires / Scripts de passerelle (CGI)– TableauxTableaux– FramesFrames

• Parc logicielParc logiciel– démonstration de Front Page, Netscape Composerdémonstration de Front Page, Netscape Composer

Travaux pratiques et exercices Travaux pratiques et exercices d'applicationd'application

Objectifs de la formationObjectifs de la formation

Se familiariser avec le codage HTML Se familiariser avec le codage HTML Acquérir une pratique minimaleAcquérir une pratique minimale Etre capable de mener à bien la construction Etre capable de mener à bien la construction

d'un site ou d'une paged'un site ou d'une page Donner une idée des dernières implémentationsDonner une idée des dernières implémentations Acquérir les capacités d'auto-formation Acquérir les capacités d'auto-formation

nécessaires pour suivre les évolutions à venirnécessaires pour suivre les évolutions à venir

Production d'informations et de services sur Production d'informations et de services sur le web : le web :

spécialistes de l'info. et de la doc.spécialistes de l'info. et de la doc.• texte enrichitexte enrichi• traitement matériel multimediatraitement matériel multimedia• interfaces de saisieinterfaces de saisie• fabrication d'images simplesfabrication d'images simples

– Compétences requisesCompétences requises• connaissance environnement micro. standard connaissance environnement micro. standard

(bureautique, système de fichier ...)(bureautique, système de fichier ...)• pratique du travail en réseaupratique du travail en réseau

informaticiensinformaticiens• réalisation de programmes spécifiquesréalisation de programmes spécifiques• interfaçage BdD ou autres logicielsinterfaçage BdD ou autres logiciels• installation et maintenance logiciels serveursinstallation et maintenance logiciels serveurs

– Compétences requisesCompétences requises• programmeur et/ou administrateur réseauprogrammeur et/ou administrateur réseau

Module 1 : Module 1 : HistoriqueHistorique

Rappels : création de différents standards pourRappels : création de différents standards pour • définir des formats indépendants des applications.définir des formats indépendants des applications.• distinguer différents niveaux de structuration des documents.distinguer différents niveaux de structuration des documents.

• SGML (Standard Generalized Markup Language)SGML (Standard Generalized Markup Language)• "généralisé" signifie que ses balises décrivent le contenu d'un document et "généralisé" signifie que ses balises décrivent le contenu d'un document et

non sa présentation / définit une syntaxe sans lui associer de sémantique.non sa présentation / définit une syntaxe sans lui associer de sémantique.• "standard" pour décrire d'autres langages de balisage"standard" pour décrire d'autres langages de balisage• langue mère d'htmllangue mère d'html• standard de référence : norme ISO 8879standard de référence : norme ISO 8879

– historiquehistorique• années 60 : Charles Goldfarb mène pour IBM des recherches sur un système années 60 : Charles Goldfarb mène pour IBM des recherches sur un système

d'information intégré pour un cabinet d'avocatsd'information intégré pour un cabinet d'avocats• crée une méthode "GML" permettant aux sous-systèmes d'information de crée une méthode "GML" permettant aux sous-systèmes d'information de

formater, d'éditer et de partager des documentsformater, d'éditer et de partager des documents• 1986 : SGML adopté comme standard1986 : SGML adopté comme standard

– principes de fonctionnementprincipes de fonctionnement• 1 document équivaut à 3 types d'information : 1 document équivaut à 3 types d'information :

– données (texte, graphique, son ...)données (texte, graphique, son ...)– structure (sections, sous-sections ...)structure (sections, sous-sections ...)– format (apparence, mise en page)format (apparence, mise en page)

• SGML reconnaît données, structure et format comme trois types d'info. SGML reconnaît données, structure et format comme trois types d'info. différentes et dissociablesdifférentes et dissociables

• SGML préserve données et structure mais ne spécifie pas le format qui peut SGML préserve données et structure mais ne spécifie pas le format qui peut être défini par le destinataire du doc. lors de sa réceptionêtre défini par le destinataire du doc. lors de sa réception

SGML (Standard Generalized Markup SGML (Standard Generalized Markup Language)Language)

• avantagesavantages– protection du capital informationnel par rapport aux risques protection du capital informationnel par rapport aux risques

d'utilisation restreinte à un type de configuration d'utilisation restreinte à un type de configuration – ré-utilisabilité des donnéesré-utilisabilité des données– interopérabilité des opérations (ne contraint pas interopérabilité des opérations (ne contraint pas

l'architecture et les fonctions des applications qui peuvent l'architecture et les fonctions des applications qui peuvent donc être très diverses)donc être très diverses)

• conclusion conclusion – information plus accessibleinformation plus accessible– réduction des coûts et erreurs relatives aux procédés de réduction des coûts et erreurs relatives aux procédés de

conversion des donnéesconversion des données– garantie que le document respecte scrupuleusement les garantie que le document respecte scrupuleusement les

spécifications de l'auteurspécifications de l'auteur• balisage SGML en 3 étapesbalisage SGML en 3 étapes

– on définit des classes de document (ex : classe livre)on définit des classes de document (ex : classe livre)– pour chaque classe, on définit un modèle générique de pour chaque classe, on définit un modèle générique de

structure (DTD)structure (DTD)– on balise le document selon les règles définies dans sa DTDon balise le document selon les règles définies dans sa DTD

RappelRappelss

• DTD (Document Type Definition)DTD (Document Type Definition)• langage de balisage spécifique, écrit en utilisant SGMLlangage de balisage spécifique, écrit en utilisant SGML• utilisé pour spécifier les règles de création d'une structure de utilisé pour spécifier les règles de création d'une structure de

document (=grammaire)document (=grammaire)• définit l'ensemble des éléments et attributs d'un doc. de type définit l'ensemble des éléments et attributs d'un doc. de type

défini et le type de relations qui existent entre eux (ordre défini et le type de relations qui existent entre eux (ordre d'apparition, prévalence ...)d'apparition, prévalence ...)

• ServeurServeur• programme sur ordinateur "X" dont le but est de répondre à des requêtes de programme sur ordinateur "X" dont le but est de répondre à des requêtes de

logiciels clients tournant sur d'autres ordinateurslogiciels clients tournant sur d'autres ordinateurs• propriété qui consiste à faire exécuter un programme au serveur est propriété qui consiste à faire exécuter un programme au serveur est

essentielle car va permettre l'interfaçage avec pratiquement n'importe quel essentielle car va permettre l'interfaçage avec pratiquement n'importe quel logiciellogiciel

• Document (= ressource)Document (= ressource)• plus petite unité fournie par le serveur à une requête du clientplus petite unité fournie par le serveur à une requête du client

• ClientClient• programme permettant de soumettre des requêtes à un serveurprogramme permettant de soumettre des requêtes à un serveur• 1 client peut dialoguer avec plusieurs types de serveurs (ftp ...)1 client peut dialoguer avec plusieurs types de serveurs (ftp ...)• nombre de services accessibles (messagerie, forums ...) dépend du logiciel nombre de services accessibles (messagerie, forums ...) dépend du logiciel

clientclient• logiciels les plus utilisés : Netscape, Explorer, Amayalogiciels les plus utilisés : Netscape, Explorer, Amaya

• HTTP (Hypertext Transfert Protocol)HTTP (Hypertext Transfert Protocol)• protocole de transmission des données utilisé entre un serveur et un clientprotocole de transmission des données utilisé entre un serveur et un client

HTML : définition et principes HTML : définition et principes générauxgénéraux

HTML (Hypertext Markup Language)HTML (Hypertext Markup Language)– langage de balisage hypertextelangage de balisage hypertexte– inventé par Tim Berners Lee au CERNinventé par Tim Berners Lee au CERN– principe : tous les documents ont des éléments en commun principe : tous les documents ont des éléments en commun

DONC il est possible de les étiqueter, de les baliser.DONC il est possible de les étiqueter, de les baliser.– permet de permet de

• publier des documents on-linepublier des documents on-line• retrouver de l'information on-line via liensretrouver de l'information on-line via liens• opérer des transactions entre servicesopérer des transactions entre services• inclure du multimedia et d'autres applications dans les documentsinclure du multimedia et d'autres applications dans les documents

– se compose d'une collection de styles (indiqués par des balises) se compose d'une collection de styles (indiqués par des balises) qui définissent les divers composants d'un doc. W3qui définissent les divers composants d'un doc. W3

– utilisé par W3 pour créer et reconnaître des documents utilisé par W3 pour créer et reconnaître des documents hypermediahypermedia

– décrit le structure et le contenu d'un document ET NON le format décrit le structure et le contenu d'un document ET NON le format et l'apparence d'une pageet l'apparence d'une page

– classe de document SGMLclasse de document SGML• SGML : langage, générateur de balisageSGML : langage, générateur de balisage• HTML : programme écrit avec ce langageHTML : programme écrit avec ce langage

– html 4.01 incluthtml 4.01 inclut• une déclaration SGMLune déclaration SGML

• trois DTD : trois DTD : strictDTD / TransitionalDTD / Frameset DTD strictDTD / TransitionalDTD / Frameset DTD • une liste de caractèresune liste de caractères

Les théoriciens de Les théoriciens de l'hypertextel'hypertexte

• 1936 : H.G.Wells1936 : H.G.Wells• article "World Encyclopedia" article "World Encyclopedia"

• 1945 : Vannevar Bush1945 : Vannevar Bush• concepteur du MEMEX (Memory Extender) : système concepteur du MEMEX (Memory Extender) : système

mécanique de microfiches dont les contenus sont reliés entre mécanique de microfiches dont les contenus sont reliés entre eux par des liens associatifseux par des liens associatifs

• 1960 : Theodore Nelson1960 : Theodore Nelson• invente le terme "hypertexte" (1965)invente le terme "hypertexte" (1965)• envisage système "on line" où serait stockée l'ensemble de la envisage système "on line" où serait stockée l'ensemble de la

littérature mondiale = XANADUlittérature mondiale = XANADU

• 1970 : Alan Kay1970 : Alan Kay• conçoit et réalise système multimédia dont l'interface conçoit et réalise système multimédia dont l'interface

préfigure le futur Mac : Dynabookpréfigure le futur Mac : Dynabook• invente langage Smalltalk (préfigre langage d'hypercard, invente langage Smalltalk (préfigre langage d'hypercard,

première application populaire hypertextuelle)première application populaire hypertextuelle)

• 1968 : Douglas Engelbart1968 : Douglas Engelbart• invente NLS : premier système hypertextuel effectivement invente NLS : premier système hypertextuel effectivement

réaliséréalisé• développé dans le cadre du programme "Augmentation développé dans le cadre du programme "Augmentation

system" qui devait permettre à l'utilisateur d'augmenter ses system" qui devait permettre à l'utilisateur d'augmenter ses capacités cognitives et intellectuellescapacités cognitives et intellectuelles

Quelques Quelques définitions définitions

"Sera désigné comme hyperdocument "Sera désigné comme hyperdocument tout contenu tout contenu informatif informatiséinformatif informatisé dont la caractéristique principale est dont la caractéristique principale est de ne pas être assujetti à une lecture préalablement définie de ne pas être assujetti à une lecture préalablement définie mais de permettre un ensemble plus ou moins complexe, mais de permettre un ensemble plus ou moins complexe, divers et personnalisé de lectures. Un hyperdocument est divers et personnalisé de lectures. Un hyperdocument est donc tout contenu informatif informatisé donc tout contenu informatif informatisé constitué d'une constitué d'une nébuleuse de fragmentsnébuleuse de fragments, dont le sens se construit, au moyen , dont le sens se construit, au moyen d'outils informatiques, à travers chacun des parcours que la d'outils informatiques, à travers chacun des parcours que la lecture détermine." lecture détermine." J.P. BalpeJ.P. Balpe

"Il s'agit d'un "Il s'agit d'un concept unifié d'idées et de données concept unifié d'idées et de données interconnectéesinterconnectées, et de la façon dont ces idées et ces , et de la façon dont ces idées et ces données peuvent être éditées sur un écran d'ordinateur." données peuvent être éditées sur un écran d'ordinateur." T. T. NelsonNelson

"L'hypertexte peut s'envisager comme un "L'hypertexte peut s'envisager comme un système à la fois système à la fois matériel et intellectuelmatériel et intellectuel dans lequel un acteur humain dans lequel un acteur humain interagit avec des informations qu'il fait naître d'un parcours interagit avec des informations qu'il fait naître d'un parcours et qui modifient en retour ses représentations et ses et qui modifient en retour ses représentations et ses demandes." demandes." J. ClémentJ. Clément

Quelques Quelques définitions définitions

"L'hypertexte est un document virtuel - qui n'est "L'hypertexte est un document virtuel - qui n'est jamais globalement perceptible - dont l'actualisation jamais globalement perceptible - dont l'actualisation d'une des potentialités est conditionnée par d'une des potentialités est conditionnée par l'effectivité de la lecture." l'effectivité de la lecture." Y. ClaessensY. Claessens

"L'hypertexte est une structure indéfiniment "L'hypertexte est une structure indéfiniment récursive du sens." récursive du sens." P. LévyP. Lévy

"L'hypertexte est un sytème indéfiniment recentrable "L'hypertexte est un sytème indéfiniment recentrable dont le point de focalisation provisoire dépend du dont le point de focalisation provisoire dépend du lecteur." lecteur." G.P. LandowG.P. Landow

"L'hypertexte est un texte modulaire dynamique, lu "L'hypertexte est un texte modulaire dynamique, lu de manière non-séquentielle, non-linéaire, composé de manière non-séquentielle, non-linéaire, composé de noeuds ou fragments d'information, qui de noeuds ou fragments d'information, qui comprennent des liens associés à d'autres noeuds." comprennent des liens associés à d'autres noeuds." J. J. PoyetonPoyeton

Quelques datesQuelques dates Mars 1989Mars 1989 Tim Berners-Lee du CERN publie l'article " Tim Berners-Lee du CERN publie l'article " Hypertexte et le CERN Hypertexte et le CERN ""

19901990 T. Berners-Lee crée T. Berners-Lee crée premier client et premier serveur WWWpremier client et premier serveur WWW basé sur URL + HTTP basé sur URL + HTTP + HTML+ HTML

Octobre 1991Octobre 1991 Le premier Web fonctionne au CERN en mode texte et sous NExT Step Le premier Web fonctionne au CERN en mode texte et sous NExT Step avec le avec le premier navigateurpremier navigateur intitulé World Wide Web. intitulé World Wide Web.

Janvier 1993Janvier 1993 Il existe une Il existe une cinquantaine de serveurs httpcinquantaine de serveurs http dans le monde. Le CERN lance dans le monde. Le CERN lance la version alpha du premier browser graphique pour Xwindows et Macintosh. la version alpha du premier browser graphique pour Xwindows et Macintosh.

Février 1993Février 1993 Marc Andreesen édite la première version du Marc Andreesen édite la première version du browser Mosaicbrowser Mosaic Octobre 1993Octobre 1993 : browsers Mosaic sous Macintosh et PC Windows. : browsers Mosaic sous Macintosh et PC Windows. Juillet 1993Juillet 1993 Le Cern et le MIT puis l'INRIA créent le Le Cern et le MIT puis l'INRIA créent le WWW ConsortiumWWW Consortium pour guider à la pour guider à la

normalisation du Web. normalisation du Web. fin 1994fin 1994 : : html 2.0html 2.0 (RFC 1866) (RFC 1866) 19951995 : html + et : html + et html 3.0html 3.0 Janvier 1997Janvier 1997 : : html 3.2html 3.2 (pour intégrer évolutions apportées par sociétés (pour intégrer évolutions apportées par sociétés

commerciales - Micro$oft, Netscape, Novell, Sun ...)commerciales - Micro$oft, Netscape, Novell, Sun ...) Octobre 1994Octobre 1994 Lancement de Lancement de NetscapeNetscape en beta test sur PC, Macintosh et X Windows. en beta test sur PC, Macintosh et X Windows. Février 1995Février 1995 4 millions d'utilisateurs de Netscape. 4 millions d'utilisateurs de Netscape. 75% des browsers sont des Netscape75% des browsers sont des Netscape. .

Décembre 1995Décembre 1995 Microsoft lance sa version Microsoft lance sa version Internet Explorer 2.0 Internet Explorer 2.0 Octobre 1996Octobre 1996 La guerre commerciale Internet Explorer 3.0 vs Netscape 3.0 fait rage. La guerre commerciale Internet Explorer 3.0 vs Netscape 3.0 fait rage. Septembre 1997Septembre 1997 Le Web est stabilisé dans sa technologie du moins provisoirement. Le Web est stabilisé dans sa technologie du moins provisoirement. Juillet 1997Juillet 1997 : : html 4.0 html 4.0 orientée feuilles de style, internationalisation, accessibilité, orientée feuilles de style, internationalisation, accessibilité,

plug-in (application externes appelées par la balise Object)plug-in (application externes appelées par la balise Object)

Créer des documentsCréer des documents

depuis un éditeur de texte ou un depuis un éditeur de texte ou un logiciel spécialisé.logiciel spécialisé.

HTML utilise jeu de caractères HTML utilise jeu de caractères UNICODE 2.1UNICODE 2.1• norme ISO 10646norme ISO 10646• 2 octets par caractère2 octets par caractère• UCS (Universal Character Set)UCS (Universal Character Set)

Syntaxe du Syntaxe du langagelangage

Balises (ou "tag") Balises (ou "tag") • conteneur de texte => attribuent une fonction conteneur de texte => attribuent une fonction

spécifique au segment encadré.spécifique au segment encadré.• fonctionnent habituellement par paire (balise fonctionnent habituellement par paire (balise

d'ouverture et de fermeture)d'ouverture et de fermeture) AttributsAttributs

• précisent la fonction ou le mode d'application des précisent la fonction ou le mode d'application des balises.balises.

• sont séparés par un espacesont séparés par un espace• sont mentionés uniquement dans la balise d'ouverturesont mentionés uniquement dans la balise d'ouverture• leur ordre n'a pas d'importanceleur ordre n'a pas d'importance• peuvent avoir une valeur (nom, unité de mesure ...) peuvent avoir une valeur (nom, unité de mesure ...)

inscrite entre guillemetsinscrite entre guillemets SyntaxeSyntaxe

• <Nom de la balise de début Attribut1 = "valeur1" <Nom de la balise de début Attribut1 = "valeur1" Attribut2 = "valeur2" ... Attribut n = "valeur n"> texte Attribut2 = "valeur2" ... Attribut n = "valeur n"> texte mis en forme </Nom de la balise de fin> mis en forme </Nom de la balise de fin>

Le document Le document minimalminimal

<HTML><HTML><HEAD><HEAD>

informations générales sur le documentinformations générales sur le document

</HEAD></HEAD>

<BODY><BODY>

texte du document + commandes de formatagetexte du document + commandes de formatage

</BODY></BODY>

</HTML></HTML> RemarqueRemarque

• balises ne sont pas sensibles à la cassebalises ne sont pas sensibles à la casse• <BODY> = <BodY> = <body><BODY> = <BodY> = <body>• par convention, sont notées en majuscules.par convention, sont notées en majuscules.

Les balises fondamentalesLes balises fondamentales TitresTitres

• <TITLE> ... </TITLE><TITLE> ... </TITLE>• utilisé comme bookmarkutilisé comme bookmark• placé dans l'en-tête <HEAD> du documentplacé dans l'en-tête <HEAD> du document

IntertitresIntertitres • <H1> .... </H1> , <H2> ... </H2> , ....................... <H1> .... </H1> , <H2> ... </H2> , .......................

<H6> ... </H6> <H6> ... </H6>

Paragraphes Paragraphes • <P><P>

RemarquesRemarques• penser à indenter le code source pour préserver la penser à indenter le code source pour préserver la

lisibilitélisibilité• ne pas croiser les balisesne pas croiser les balises

– <H1> cours sur les <B> plantes </H1></B><H1> cours sur les <B> plantes </H1></B>• ==> code non-interprétable==> code non-interprétable

– <H1> cours sur les <B> plantes </B></H1><H1> cours sur les <B> plantes </B></H1>• ==> code correct==> code correct

un exemple ...un exemple ...

Code HTML saisi ...Code HTML saisi ...<HTML><HTML>

<HEAD><HEAD>

<TITLE> exemple de page html </TITLE><TITLE> exemple de page html </TITLE>

</HEAD></HEAD>

<BODY><BODY>

<H1> première partie </H1><H1> première partie </H1>

Ce document présente les fondamentaux <P> d'une création de Ce document présente les fondamentaux <P> d'une création de page htmlpage html

<H2> le document de base </H2><H2> le document de base </H2>

</BODY></BODY>

</HTML></HTML>

Code HTML affiché ... (demo browser)Code HTML affiché ... (demo browser)

première partiepremière partieCe document présente les fondamentauxCe document présente les fondamentaux

d'une création de page htmld'une création de page html

le document de basele document de base

Créer un lien ... vers un autre Créer un lien ... vers un autre documentdocument

Un lien permet de définir Un lien permet de définir • une région sensible au clic souris dans un document une région sensible au clic souris dans un document • l'endroit ou l'on va se retrouver après ce clic. l'endroit ou l'on va se retrouver après ce clic.

Trois étapes :Trois étapes : • <A HREF = "nom du fichier" ou HREF = "url du document"><A HREF = "nom du fichier" ou HREF = "url du document">• lienlien• </A></A>

Exemples :Exemples : Consultez mon <A HREF = "cvoli.html"> curriculum vitae </A>Consultez mon <A HREF = "cvoli.html"> curriculum vitae </A>

Visitez le site de <A HREF = "http://www.cict.fr/urfist"> l'urfist Visitez le site de <A HREF = "http://www.cict.fr/urfist"> l'urfist </A></A>

doc. A doc. B

lien

Créer un lien ... vers une section Créer un lien ... vers une section

spécifique d'un autre documentspécifique d'un autre document Définir la cible Définir la cible

• dans le document "cible"dans le document "cible"

<A NAME = "nom de la section"> section </A><A NAME = "nom de la section"> section </A>

Créer son lienCréer son lien• dans le document "source"dans le document "source"

<A HREF = "doc.B # nom de la section"> lien <A HREF = "doc.B # nom de la section"> lien </A></A>

doc. A doc. B

lien

cible

Créer un lien ... vers une Créer un lien ... vers une section spécifique du doc. section spécifique du doc. courantcourant

même procédé en supprimant le nom même procédé en supprimant le nom de fichier.de fichier.

document A

lien

partie cible

Autres Autres liensliens

lien vers un serveur de newslien vers un serveur de news• <A HREF="news:comp.html.news"> ... </A><A HREF="news:comp.html.news"> ... </A>• pour que le lien soit valide, le visiteur doit être abonné au serveur pour que le lien soit valide, le visiteur doit être abonné au serveur

de newsde news

lien vers un fichier à téléchargerlien vers un fichier à télécharger• <A HREF="fichier.exe"> cliquez ici pour télécharger </A><A HREF="fichier.exe"> cliquez ici pour télécharger </A>

lien e-maillien e-mail<A HREF="mailto:[email protected]">adresse_e_mail</A><A HREF="mailto:[email protected]">adresse_e_mail</A>

– avec sujetavec sujet

<A HREF="mailto:[email protected]<A HREF="mailto:[email protected]??subject=renseignementsubject=renseignement">adresse</A>">adresse</A>

– avec sujet et texte dans le corps du messageavec sujet et texte dans le corps du message

<A HREF="mailto:[email protected]?<A HREF="mailto:[email protected]?subject=renseignementsubject=renseignement&BODY=votre message&BODY=votre message">adresse_e_mail</A>">adresse_e_mail</A>

– avec sujet, envoyé à 2 personnesavec sujet, envoyé à 2 personnes

<A HREF="mailto:[email protected]<A HREF="mailto:[email protected][email protected] [email protected] &subject=renseignement">adresse_e_mail</A>&subject=renseignement">adresse_e_mail</A>

Types de liensTypes de liens

liens absolusliens absolus• permet de localiser un fichier à partir du permet de localiser un fichier à partir du

répertoire courant du noeud le plus élevé de répertoire courant du noeud le plus élevé de l'arborescence du disque dur.l'arborescence du disque dur.

• commence toujours par une barre de commence toujours par une barre de fractionnementfractionnement

• ne sont pas "portables"ne sont pas "portables"

liens relatifsliens relatifs• pointe vers un fichier spécifiquepointe vers un fichier spécifique• ne prend en compte que le nom du fichierne prend en compte que le nom du fichier• ne devra pas être modifié si on déplace le ne devra pas être modifié si on déplace le

fichier dans l'arborescence du disquefichier dans l'arborescence du disque

en bref ...en bref ...

types de liens types de liens • internes (doc. renvoie à une de ses sections)internes (doc. renvoie à une de ses sections)• externes (doc. renvoie à un autre doc. ou à une section externes (doc. renvoie à un autre doc. ou à une section

d'un autre doc.)d'un autre doc.)• exécutables (fichiers en téléchargement, exécutables (fichiers en téléchargement,

déclenchement d'animations ou de programmes -plug-déclenchement d'animations ou de programmes -plug-in)in)

IMPORTANTIMPORTANT• on peut imbriquer une ancre dans une baliseon peut imbriquer une ancre dans une balise

<H1> <H1> <A HREF="texte.htm"> <A HREF="texte.htm"> ChansonChanson </A> </A> </H1></H1>• mais ne jamais faire l'inversemais ne jamais faire l'inverse

<A HREF="texte.htm"> <A HREF="texte.htm"> <H1><H1>ChansonChanson</H1></H1> </A> </A>

Les URLLes URL utilisés pourutilisés pour

• créer un lien vers une autre ressourcecréer un lien vers une autre ressource• associer un programme externe à une page html (feuille associer un programme externe à une page html (feuille

de style, script, applet ...)de style, script, applet ...)• inclure une image ou un objetinclure une image ou un objet• créer une image réactivecréer une image réactive• envoyer un formulaireenvoyer un formulaire• créer des framescréer des frames• spécifier des métadonnéesspécifier des métadonnées

DéfinitionDéfinition• Uniform Ressource LocatorUniform Ressource Locator• adresse physique d'un ensemble de données sur adresse physique d'un ensemble de données sur

InternetInternet• RFC 1738 et 1808RFC 1738 et 1808

Les Les URLURL

regroupe diverses informationsregroupe diverses informations• type de ressource accessible (protocole d'accès)type de ressource accessible (protocole d'accès)• adresse du serveuradresse du serveur• localisation du fichier (détail de l'arborescence)localisation du fichier (détail de l'arborescence)

syntaxesyntaxe• protocole :// nom de machine [: port] / nom de fichier protocole :// nom de machine [: port] / nom de fichier

[#ancre]/ ? liste de paramètres[#ancre]/ ? liste de paramètres

exempleexemplewais://quake.think.com:210/directory-of-servers?inriawais://quake.think.com:210/directory-of-servers?inria

quelques types de ressources ...quelques types de ressources ...– file://file://– ftp://ftp://– news:news:

Les Les URLURL

caractères spéciauxcaractères spéciaux• lettre de l'alphabet (MAJ ou min)lettre de l'alphabet (MAJ ou min)• chiffre de 0 à 9chiffre de 0 à 9• $ - _ + .$ - _ + .• Pour tout autre signe ...Pour tout autre signe ...

– carctère d'échappement (ISO LATIN 1)carctère d'échappement (ISO LATIN 1)

http://.../.../.../html/liens absolus/exemple.htmlhttp://.../.../.../html/liens absolus/exemple.html• pas reconnupas reconnu

http://.../.../.../html/lienshttp://.../.../.../html/liens%20%20absolus/absolus/exemple.htmlexemple.html• code correctcode correct

Les Les URLURL

URL absolus et relatifsURL absolus et relatifs• même principe que pour les liensmême principe que pour les liens

commande <BASE>commande <BASE><BASE HREF="http://www-sv.cict.fr"><BASE HREF="http://www-sv.cict.fr">• indique l'URL de référence qui sera utilisé pour indique l'URL de référence qui sera utilisé pour

compléter tous les URL relatifs dans un compléter tous les URL relatifs dans un documentdocument

• si on a un lien du typesi on a un lien du type

<A HREF = "docs/www.html" ><A HREF = "docs/www.html" >• le browser ira chercher le doc. situé à l'adressele browser ira chercher le doc. situé à l'adresse

http://www-sv.cict.fr/http://www-sv.cict.fr/docs/www.htmldocs/www.html

Les Les URLURL

URI (Uniform Ressource Identifier)URI (Uniform Ressource Identifier)• adressage de niveau supérieuradressage de niveau supérieur• RFC 1630RFC 1630• URL en sont un dérivé qui indique la localisation URL en sont un dérivé qui indique la localisation

et le mode d'accès des donnéeset le mode d'accès des données• les autres types d'URI sontles autres types d'URI sont

– les URNames : donnent un nom générique à les URNames : donnent un nom générique à la ressourcela ressource

– les URCaracteristics : définissent son URN, les URCaracteristics : définissent son URN, son URL et d'autres infos (titre, version, son URL et d'autres infos (titre, version, auteur, format, conditions d'accès ...)auteur, format, conditions d'accès ...)

Les balises de Les balises de listeliste

ListesListes• non ordonnées non ordonnées

<UL><UL><LI> premier item<LI> premier item

<LI>second item<LI>second item

</UL> </UL> • ordonnées ordonnées

<OL> ... </OL><OL> ... </OL>• de définition de définition

<DL> <DL> <DT> terme à définir<DT> terme à définir

<DD> définition<DD> définition

<DT><DT>

<DD><DD>

</DL></DL>

Les listes ... variantes Les listes ... variantes typographiquestypographiques

listes non-ordonnéeslistes non-ordonnées• TYPE = "disc/circle/square"TYPE = "disc/circle/square"• PLAINPLAIN• SRC = "cercle.gif"SRC = "cercle.gif"• DINGBATDINGBAT• WRAP = "horiz"WRAP = "horiz"

listes ordonnéeslistes ordonnées• TYPE = "1/A/a/I/i"TYPE = "1/A/a/I/i"• START = "n"START = "n"

listes de définitionlistes de définition• COMPACTCOMPACT

Petit exercice ...Petit exercice ...

donner le code html du plan suivantdonner le code html du plan suivant• villes françaisesvilles françaises

1. toulouse1. toulousea. toulouse centrea. toulouse centre

b. toulouse sudb. toulouse sud

c. toulouse nordc. toulouse nord

2. paris2. paris.centre ville.centre ville .arrondissements.arrondissements .périphérie.périphérie

3. bordeaux3. bordeaux• villes étrangèresvilles étrangères

1. new-york1. new-york

2. londres2. londres

3. munich3. munich

CorrectioCorrectionn

<UL> <UL> <LI> Villes françaises<LI> Villes françaises

<OL> <OL> <LI> Toulouse<LI> Toulouse

<OL TYPE = "a"><OL TYPE = "a">

<LI> toulouse centre<LI> toulouse centre

<LI> toulouse sud<LI> toulouse sud

<LI> toulouse nord<LI> toulouse nord

</OL></OL>

<LI> Paris<LI> Paris

<UL WRAP = "horiz"><UL WRAP = "horiz">

<LI>centre ville<LI>centre ville

<LI>arrondissements<LI>arrondissements

<LI>périphérie<LI>périphérie

</UL></UL>

<LI> Bordeaux<LI> Bordeaux

</OL></OL>

<LI> Villes étrangères<LI> Villes étrangères

<OL> <OL> <LI> New-York<LI> New-York

<LI> Londres<LI> Londres

<LI> Munich<LI> Munich

</OL></OL>

</UL></UL>

Autres Autres balisesbalises

texte préformattétexte préformatté• <PRE> ... </PRE> <PRE> ... </PRE>

citationscitations• <BLOCKQUOTE> ... </BLOCKQUOTE><BLOCKQUOTE> ... </BLOCKQUOTE>• <Q> ... </Q><Q> ... </Q>

adresseadresse• <ADRESS> ... </ADRESS><ADRESS> ... </ADRESS>

cassure forcée de lignecassure forcée de ligne• <BR><BR>

ligne horizontaleligne horizontale• <HR><HR>

• SIZE = "px"SIZE = "px"• WIDTH = "px" ou "%"WIDTH = "px" ou "%"• ALIGN = "feft/right/center"ALIGN = "feft/right/center"• NOSHADENOSHADE

commentairescommentaires•

Formattage de caractèresFormattage de caractères

Style logiqueStyle logique Style Style physiquephysique• DFN DFN - B- B• EMEM - I- I• CITECITE -TT-TT• CODECODE - U- U• KBDKBD - S- S• SAMPSAMP - BIG- BIG• STRONGSTRONG - -

SMALLSMALL• VARVAR - SUB- SUB• LANGLANG - SUP- SUP• AUAU

Traitement des imagesTraitement des images

Balise <IMG> ... </IMG>Balise <IMG> ... </IMG> Attributs Attributs

• SRC (indique l'emplacement du fichier image)SRC (indique l'emplacement du fichier image)• ALIGN = "top/middle/bottom"ALIGN = "top/middle/bottom"• ALT (propose un texte de remplacement à l'image)ALT (propose un texte de remplacement à l'image)

ExempleExemple<IMG ALIGN=TOP SRC="image.gif" ALT="cheval au galop"><IMG ALIGN=TOP SRC="image.gif" ALT="cheval au galop">

Habillages et mises en page possiblesHabillages et mises en page possibles• alignement alignement

– ALIGN = "TOP/BOTTOM/LEFT/RIGHT/CENTER"ALIGN = "TOP/BOTTOM/LEFT/RIGHT/CENTER"– ALIGN = "texttop/absmiddle/middle/baselign/absbottom"ALIGN = "texttop/absmiddle/middle/baselign/absbottom"

• espacementespacement• VSPACE = "px" (espace vertical entre image et texte défini en pixels)VSPACE = "px" (espace vertical entre image et texte défini en pixels)• HSPACE = "px" (espace horizontal)HSPACE = "px" (espace horizontal)

• bordure bordure • BORDER = "px"BORDER = "px"

Traitement des Traitement des imagesimages

supperposition d'imagesupperposition d'image• effet de transparenteffet de transparent

<FIGURE SRC="fleuves.gif"><FIGURE SRC="fleuves.gif">

<OVERLAY SRC="garonne.gif"><OVERLAY SRC="garonne.gif">

</FIGURE></FIGURE>• OVERLAY accepte attributsOVERLAY accepte attributs

– SRCSRC– WIDTH / HEIGHTWIDTH / HEIGHT– UNITS permet de définir position du transparent par UNITS permet de définir position du transparent par

rapport au coin supérieur gauche de l'image principale.rapport au coin supérieur gauche de l'image principale.

deux images au lieu d'unedeux images au lieu d'une• <IMG SRC = "hautdef.gif" LOWSRC = "bassdef.gif"><IMG SRC = "hautdef.gif" LOWSRC = "bassdef.gif">

Traitement des imagesTraitement des images

Recommandations : Recommandations : • penser au temps de chargement et d'affichagepenser au temps de chargement et d'affichage

– ne jamais afficher d'images situées sur serveur extérieurne jamais afficher d'images situées sur serveur extérieur– astuce : préciser attributs WIDTH et HEIGHTastuce : préciser attributs WIDTH et HEIGHT

• possibilité de récupérer doc. sans images (démo)possibilité de récupérer doc. sans images (démo)• demandez vous si une image est indispensabledemandez vous si une image est indispensable• offrez une alternative <IMG ALT ... >, <IMG LONGDESC ... >offrez une alternative <IMG ALT ... >, <IMG LONGDESC ... >• pensez à leur destinationpensez à leur destination

– résolution écran : 72 dpirésolution écran : 72 dpi– résolution impression courante : 300 dpirésolution impression courante : 300 dpi

• une bonne image vaut mieux qu'un long discours,une bonne image vaut mieux qu'un long discours,• MAIS une bonne image est plus longue à charger qu'un long MAIS une bonne image est plus longue à charger qu'un long

discours ...discours ...

Images mappées Images mappées

Plusieurs méthodes : Plusieurs méthodes : • CSIM (Client-Side IMage) CSIM (Client-Side IMage)

– la + utilisée car fait partie de la norme html 3.0 la + utilisée car fait partie de la norme html 3.0 – Les fichiers mappés sont inclus dans la page Les fichiers mappés sont inclus dans la page

htmlhtml– pas besoin de CGI sur un serveur pour les pas besoin de CGI sur un serveur pour les

rendre opératoires.rendre opératoires.• CERNCERN• NCSANCSA


Premier temps : Premier temps :

• Si Map dans le même fichier, alors : Si Map dans le même fichier, alors :

<IMG SRC="image1.gif" USEMAP="#nom_du_map"><IMG SRC="image1.gif" USEMAP="#nom_du_map">• Si Map dans un autre fichier, alors : Si Map dans un autre fichier, alors :

<IMG SRC= "image1.gif"USEMAP= "fichier.html <IMG SRC= "image1.gif"USEMAP= "fichier.html #nom_du_map">#nom_du_map">

Deuxième temps :Deuxième temps :

<MAP NAME="nom_de_map"><MAP NAME="nom_de_map">

<AREA SHAPE=méthode COORDS="coordonnées" <AREA SHAPE=méthode COORDS="coordonnées" HREF="lien" ALT="commentaires" TARGET="cible de HREF="lien" ALT="commentaires" TARGET="cible de frame">frame">

</MAP></MAP>

Images Images mappées mappées

définition des coordonnées pour :définition des coordonnées pour :• un rectangle SHAPE=RECT COORDS="x, y, un rectangle SHAPE=RECT COORDS="x, y,

x1, y1"x1, y1"

• un cercle SHAPE=CIRCLE COORDS="x,y,r"un cercle SHAPE=CIRCLE COORDS="x,y,r"

• un polygone SHAPE=POLYGON un polygone SHAPE=POLYGON COORDS="x,y,x1,y1..."COORDS="x,y,x1,y1..."

• et sur Netscape seulement SHAPE=DEFAULT et sur Netscape seulement SHAPE=DEFAULT => ce qu'il faut faire si on clique hors zone.=> ce qu'il faut faire si on clique hors zone.

x,y

r

x,y

x1,y1

x,yx1,y1

x2,y2


Parc logiciel dédié : Parc logiciel dédié : •MapEditMapEdit•MapThisMapThis•CrossEyeCrossEye•Web HotspotsWeb Hotspots•Paint Shop ProPaint Shop Pro

Images mappées : le principe ...Images mappées : le principe ...

on choisit une image qui se prête au "jeu" ...on choisit une image qui se prête au "jeu" ...

à chaque cube on à chaque cube on

associe un fichier.htm associe un fichier.htm

on délimite les coordonnées des on délimite les coordonnées des

zones pour pouvoir "appeler" le zones pour pouvoir "appeler" le

fichier html correspondant ...fichier html correspondant ...

images animées images animées format GIF 89aformat GIF 89a

• créé par Compuserve en 1989créé par Compuserve en 1989• comprend 2 éléments importants : comprend 2 éléments importants :

– transparence pour intégrer des logos à une transparence pour intégrer des logos à une pagepage

– possibilité de sauvegarder une chaîne possibilité de sauvegarder une chaîne d'images accompagnée d'instructions d'images accompagnée d'instructions (commentaires, temporisation ...)(commentaires, temporisation ...)

les outils (à télécharger chez Tucows)les outils (à télécharger chez Tucows)• PaintShop ProPaintShop Pro• Adobe PhotoshopAdobe Photoshop• LviewproLviewpro• Microsoft Image ComposerMicrosoft Image Composer• Gif Construction SetGif Construction Set• Gif Movie GearGif Movie Gear

images animées images animées

Création en 2 étapes Création en 2 étapes • définir les images qui vont constituer la sourcedéfinir les images qui vont constituer la source

– doivent être de même tailledoivent être de même taille– doivent avoir la même palette de couleur (pas doivent avoir la même palette de couleur (pas

obligatoire mais optimise taille du fichier final)obligatoire mais optimise taille du fichier final)• inclure les contrôlesinclure les contrôles

– définir hauteur et largeur de l'animationdéfinir hauteur et largeur de l'animation– définir l'ordre des images sélectionnéesdéfinir l'ordre des images sélectionnées– définir un bloc de contrôle pour savoir combien définir un bloc de contrôle pour savoir combien

de fois l'animation sera jouée de fois l'animation sera jouée • valeur LOOP= de 0 à 32760valeur LOOP= de 0 à 32760

– définir la vitesse entre chaque image (en ms)définir la vitesse entre chaque image (en ms)– définir la transition entre chaque imagedéfinir la transition entre chaque image– définir la palette de couleur globale de définir la palette de couleur globale de

l'animationl'animation– définir des blocs de commentaires pour insérer définir des blocs de commentaires pour insérer

des aniations ou un copyrigntdes aniations ou un copyrignt

images animéesimages animées

GIF animéGIF animé en récupérer sur le weben récupérer sur le web

• http://www.mediabuilder.com (démo)http://www.mediabuilder.com (démo)

en créer en créer • Micro$oft Gif AnimatorMicro$oft Gif Animator• Animation Shop de PaintShopPro 5Animation Shop de PaintShopPro 5• Cel AssemblerCel Assembler• Gif Construction SetGif Construction Set• Egor Animator (Sausage - HotDog Web Editor)Egor Animator (Sausage - HotDog Web Editor)

Formulaires Formulaires (1/4)(1/4)

1 balise <FORM> ... </FORM>1 balise <FORM> ... </FORM>• 2 attributs2 attributs

– METHOD METHOD • GET ou POSTGET ou POST• indique le mode de transfert des donnéesindique le mode de transfert des données• choisir POSTchoisir POST

– ACTIONACTION• définit la locamisation du script permettant d'exploiter le définit la locamisation du script permettant d'exploiter le

formulaireformulaire

<FORM METHOD="POST" ACTION="/cgi-bin/inscript"><FORM METHOD="POST" ACTION="/cgi-bin/inscript">


3 classes d'éléments3 classes d'éléments• Classe 1 : INPUTClasse 1 : INPUT

– TYPE="submit" =>création d'un bouton d'envoiTYPE="submit" =>création d'un bouton d'envoi– TYPE="reset" => création de bouton pour effacer la saisieTYPE="reset" => création de bouton pour effacer la saisie– TYPE="checkbox" =>création menu avec plusieurs choixTYPE="checkbox" =>création menu avec plusieurs choix

<INPUT TYPE="checkbox" NAME="micro" VALUE="mac">mac<BR><INPUT TYPE="checkbox" NAME="micro" VALUE="mac">mac<BR>

<INPUT TYPE="checkbox" NAME="micro" VALUE="pc">pc<BR><INPUT TYPE="checkbox" NAME="micro" VALUE="pc">pc<BR>

<INPUT TYPE="checkbox" NAME="micro" VALUE="unix">unix<BR><INPUT TYPE="checkbox" NAME="micro" VALUE="unix">unix<BR>

– TYPE="radio" => création menu avec un seul choixTYPE="radio" => création menu avec un seul choix

<INPUT TYPE="radio" NAME="media" VALUE="cd">cd-rom<BR><INPUT TYPE="radio" NAME="media" VALUE="cd">cd-rom<BR>

<INPUT TYPE="radio" NAME="media" VALUE="dk">disquette<BR><INPUT TYPE="radio" NAME="media" VALUE="dk">disquette<BR>

– TYPE="file" => fichier attachéTYPE="file" => fichier attaché– TYPE="password" => caractères masquésTYPE="password" => caractères masqués


3 classes d'éléments3 classes d'éléments• classe 2 : SELECT => utilisé pour création de listesclasse 2 : SELECT => utilisé pour création de listes

– menus déroulantsmenus déroulants<SELECT NAME = "semaine" ><SELECT NAME = "semaine" >

<OPTION> lundi<OPTION> lundi

<OPTION> mardi<OPTION> mardi

<OPTION SELECTED> mercredi<OPTION SELECTED> mercredi

</SELECT></SELECT>

– listes à ascenceurlistes à ascenceur<SELECT NAME = "menu" SIZE = "6" MULTIPLE><SELECT NAME = "menu" SIZE = "6" MULTIPLE>

<OPTION> cict<OPTION> cict

........

</SELECT></SELECT>

• classe 3 : TEXTAREAclasse 3 : TEXTAREA<TEXTAREA NAME = "commentaires" ROWS="10" COLS="5"><TEXTAREA NAME = "commentaires" ROWS="10" COLS="5">

Entrez vos commentaires </TEXTAREA>Entrez vos commentaires </TEXTAREA>


2 attributs communs2 attributs communs• NAMENAME• VALUEVALUE

– pour un champ texte : prédéfinit le contenupour un champ texte : prédéfinit le contenu– pour un bouton pour un bouton

• submit ou reset : indique texte du boutonsubmit ou reset : indique texte du bouton• checkbox ou radio : indique valeur du bouton enfoncécheckbox ou radio : indique valeur du bouton enfoncé

introduction aux CGIintroduction aux CGI

Common Gateway InterfaceCommon Gateway Interface• interface de passerelle entre vos applications interface de passerelle entre vos applications

de traitement et votre serveur HTTPde traitement et votre serveur HTTP• script classique (écrit en C, C++, Perl ...)script classique (écrit en C, C++, Perl ...)

– interroger le serveur pour savoir quels interroger le serveur pour savoir quels langages il supportelangages il supporte

• permet de générer des pages à partir de permet de générer des pages à partir de données présentes sur le serveurdonnées présentes sur le serveur

Scripts de passerelle (CGI)Scripts de passerelle (CGI)

interface serveur

script CGIautres

programmes

Saisieutilisateur

(champs de formulaire)

Les formulaires sans Les formulaires sans CGICGI

en utilisant du Javascripten utilisant du Javascript• permet de transférer les informations en interne, à l'int. permet de transférer les informations en interne, à l'int.

d'une page ou d'un site.d'une page ou d'un site.<FORM><FORM>

<INPUT TYPE="button" NAME="nom" VALUE="Bouton test" <INPUT TYPE="button" NAME="nom" VALUE="Bouton test"

onclick="alert('test réussi !')">onclick="alert('test réussi !')">

</FORM></FORM>

• en cliquant sur Bouton de test, on déclenche une en cliquant sur Bouton de test, on déclenche une fonction Javascript élémentaire qui affiche une boîte dite fonction Javascript élémentaire qui affiche une boîte dite d'alerte avec le texte saisi.d'alerte avec le texte saisi.

• Remarque : attributs METHOD et ACTION inutiles car on Remarque : attributs METHOD et ACTION inutiles car on ne fait pas appel au serveurne fait pas appel au serveur

Les formulaires sans Les formulaires sans CGICGI

La procédure MAILTOLa procédure MAILTO• formulaires récupérés sous forme de courrier formulaires récupérés sous forme de courrier

électronique avec une structuration prédéfinieélectronique avec une structuration prédéfinie– utile pour applications commerciales (couplage utile pour applications commerciales (couplage

avec BdD...)avec BdD...)• alternative à procédure CGI imaginée par Netscapealternative à procédure CGI imaginée par Netscape• Peut être utilisée par tout le monde car fonctionne Peut être utilisée par tout le monde car fonctionne

côté clientcôté client• Nets. Nav. 3.0 et suiv. + IE 4.0Nets. Nav. 3.0 et suiv. + IE 4.0

<FORM METHOD="post" <FORM METHOD="post" ACTION="mailto:[email protected]>ACTION="mailto:[email protected]>

votre nom : <BR>votre nom : <BR>

<INPUT TYPE="text" NAME="nom"> <BR><INPUT TYPE="text" NAME="nom"> <BR>

votre adresse : <BR>votre adresse : <BR>

<TEXTAREA NAME="adresse" ROWS=2 COLS=35><TEXTAREA NAME="adresse" ROWS=2 COLS=35>

</TEXTAREA> <BR></TEXTAREA> <BR>

<INPUT TYPE="submit" VALUE="OK"><INPUT TYPE="submit" VALUE="OK">

<INPUT TYPE="reset" VALUE="cancel"><INPUT TYPE="reset" VALUE="cancel">

votre nom :

votre adresse :

OK Cancel

Formulaires sans CGI Formulaires sans CGI

on reçoit par e-mail : on reçoit par e-mail : • nom=O+Ertzscheid&adresse=rue+du+cagire+17%ODnom=O+Ertzscheid&adresse=rue+du+cagire+17%OD

%OA+31000+lille%OA+31000+lille• champs séparés par &champs séparés par &• espaces remplacés par signe +espaces remplacés par signe +• 17%OD%OA correspond à un pasage à la ligne17%OD%OA correspond à un pasage à la ligne

existe des programmes pour décoder tout çaexiste des programmes pour décoder tout ça Remarque : Remarque :

• on peut envoyer des copies : on peut envoyer des copies : – action="mailto:[email protected]?action="mailto:[email protected]?

CC="[email protected]">CC="[email protected]">

TableauTableauxx

Intérêt : Intérêt : • pratique et ergonomique / palliatif des insuffisances de htmlpratique et ergonomique / palliatif des insuffisances de html• avant : <PRE>avant : <PRE>

Balises principalesBalises principales• <TABLE> </TABLE><TABLE> </TABLE>

– attribut BORDER = "px"attribut BORDER = "px"• astuce <TABLE BORDER="0">astuce <TABLE BORDER="0">

• <CAPTION> titre du tableau </CAPTION><CAPTION> titre du tableau </CAPTION>– attribut ALIGN = "top" (valeur par défaut) ou "bottom"attribut ALIGN = "top" (valeur par défaut) ou "bottom"

• <TABLE SUMMARY="description"> sera interprété par synthétiseurs <TABLE SUMMARY="description"> sera interprété par synthétiseurs vocauxvocaux

• ligne <TR> </TR>ligne <TR> </TR>• en-tête <TH> </TH> en-tête <TH> </TH> • cellule <TD> </TD>cellule <TD> </TD>

La description d'un tableau en HTML se fait ligne par La description d'un tableau en HTML se fait ligne par ligne et pour chaque ligne, cellule par celluleligne et pour chaque ligne, cellule par cellule

• colonnes calculées automatiquement en fonction du nombre de cellules par colonnes calculées automatiquement en fonction du nombre de cellules par ligneligne

Chaque cellule peut contenir n'importe quel élément Chaque cellule peut contenir n'importe quel élément HTML (image, texte, lien, applet, tableau ...)HTML (image, texte, lien, applet, tableau ...)

TABLEAUXTABLEAUX Cellules videsCellules vides

• <TD></TD> ou <TD><BR><TD> <TD></TD> ou <TD><BR><TD>

AffichageAffichage• ALIGN = "LEFT" "RIGHT" "CENTER" "JUSTIFY"ALIGN = "LEFT" "RIGHT" "CENTER" "JUSTIFY"

Alignement dans les cellulesAlignement dans les cellules• <TD ALIGN = "left/right/center"><TD ALIGN = "left/right/center">• <TD VALIGN = "top/middle/bottom"><TD VALIGN = "top/middle/bottom">

– mêmes attributs dans <TR> vaudront pour toute mêmes attributs dans <TR> vaudront pour toute la lignela ligne

– par défaut par défaut • en-têtes centrées horiz. et vert.en-têtes centrées horiz. et vert.• données centrées et alignées à gauchedonnées centrées et alignées à gauche

left center right

top

middle

bottom

align

valign

TABLEAUXTABLEAUX cellules fusionnéescellules fusionnées

• une cellule sur plusieurs lignes ou colonnesune cellule sur plusieurs lignes ou colonnes– ROWSPAN ROWSPAN

• 1 cellule sur hauteur de plusieurs lignes1 cellule sur hauteur de plusieurs lignes• valeur de l'attribut définit hauteur en ligne de la valeur de l'attribut définit hauteur en ligne de la

cellulecellule

– COLSPANCOLSPAN• 1 cellule sur largeur de plusieurs colonnes1 cellule sur largeur de plusieurs colonnes• valeur de l'attribut définit largeur en colonne de la valeur de l'attribut définit largeur en colonne de la

cellulecellule

cellule fusionnée

<TH COLSPAN="2">cellule fusionnée</TH>

TABLEAUXTABLEAUX

épaisseur de quadrillageépaisseur de quadrillage• CELLSPACING="px" (2 par défaut)CELLSPACING="px" (2 par défaut)

espacement des donnéesespacement des données• CELLPADDING="px" (1 par défaut)CELLPADDING="px" (1 par défaut)

TABLEAUXTABLEAUX

groupement de lignesgroupement de lignes• THEAD, TFOOT, TBODYTHEAD, TFOOT, TBODY

groupement de colonnesgroupement de colonnes• COLGROUPCOLGROUP

ces groupements permettent : ces groupements permettent : • d'appliquer des feuilles de style sans les répéterd'appliquer des feuilles de style sans les répéter• d'éviter de resaisir des données si le tableau est d'éviter de resaisir des données si le tableau est

sur plusieurs pagessur plusieurs pages• d'interroger et de faire des tris à la manière d'interroger et de faire des tris à la manière

d'un tableurd'un tableur

TABLEAUXTABLEAUX

bords et enrobagesbords et enrobages• bordures extérieuresbordures extérieures

– frame = frame = "void/above/below/hsides/vsides/lhs/rhs/box""void/above/below/hsides/vsides/lhs/rhs/box"

• bordures intérieures (séparations entre lignes et bordures intérieures (séparations entre lignes et colonnes)colonnes)– rules = "none/groups/rows/cols/all"rules = "none/groups/rows/cols/all"

FrameFrames s

DéfinitionDéfinition• l'écran est divisé en plusieurs zonesl'écran est divisé en plusieurs zones• chaque zone est un document proprechaque zone est un document propre• intétêt : ergonomie accrue intétêt : ergonomie accrue

BalisesBalises• <FRAMESET> remplace <BODY> pour le corps du document.<FRAMESET> remplace <BODY> pour le corps du document.

– ROWS pour diviser en sous-zones horizontales ROWS pour diviser en sous-zones horizontales – COLS pour diviser en sous-zones verticales COLS pour diviser en sous-zones verticales – 4 manières de spécifier valeur de ces zones4 manières de spécifier valeur de ces zones

• % hauteur/longueur de la sous zone en % de la zone "mère"% hauteur/longueur de la sous zone en % de la zone "mère"• n hauteur/longueur de la sous zone en pixelsn hauteur/longueur de la sous zone en pixels• * indique au browser d'attribuer à la sous zone toute la * indique au browser d'attribuer à la sous zone toute la

place restanteplace restante• x entierx entier

FrameFramess

<FRAME><FRAME>– SRC indique url du doc. à afficher dans la zoneSRC indique url du doc. à afficher dans la zone– NAME permet de nommer la zone afin qu'elle puisse NAME permet de nommer la zone afin qu'elle puisse

devenir la cible d'un liendevenir la cible d'un lien– MARGINWIDTHMARGINWIDTH– MARGINHEIGHTMARGINHEIGHT– SCROLLING = "yes/no/auto" indique si la zone doit SCROLLING = "yes/no/auto" indique si la zone doit

posséder une barre de défilementposséder une barre de défilement– NORESIZE empêche toute modification par NORESIZE empêche toute modification par

l'utilisateur de la taille d'une zonel'utilisateur de la taille d'une zone– BORDER / BORDERCOLOR="#FFFFFF"BORDER / BORDERCOLOR="#FFFFFF"– FRAMEBORDER = "0 ou 1" FRAMEBORDER = "0 ou 1"

<NOFRAMES> <NOFRAMES> – indique texte de remplacement si le browser ne gère indique texte de remplacement si le browser ne gère

pas les framespas les frames

FrameFrames s

Création de liens utilisant ces framesCréation de liens utilisant ces frames• attribut TARGETattribut TARGET

<A HREF="dossier.html" TARGET="zonedossier">voir le <A HREF="dossier.html" TARGET="zonedossier">voir le dossier</A>dossier</A>

• 3 valeurs possibles3 valeurs possibles– nom d'une frame existantenom d'une frame existante– valeur ne correspondant à aucune framevaleur ne correspondant à aucune frame– paramétrageparamétrage

• TARGET="_top" supprimera toutes les frames existantes et TARGET="_top" supprimera toutes les frames existantes et affichera le document sur toute la surface du browser / affichera le document sur toute la surface du browser / permet en pratique de quitter un système de framespermet en pratique de quitter un système de frames

• TARGET="_blank" le navigateur ouvre une nouvelle fenêtre TARGET="_blank" le navigateur ouvre une nouvelle fenêtre / cette fenêtre ne portera pas de nom et ne pourra pas être / cette fenêtre ne portera pas de nom et ne pourra pas être la cible d'un lien.la cible d'un lien.

• TARGET="_self" le document sera chargé dans la même TARGET="_self" le document sera chargé dans la même zone que celle comprenant le lien hypertextezone que celle comprenant le lien hypertexte

• TARGET="_parent"TARGET="_parent"

Exercice : créez le code source de cette Exercice : créez le code source de cette frameframe

docF.html

docD.html

docE.html

docB.htmldocA.html

docC.html

CorrectionCorrection

<FRAMESET ROWS=" *, *, * "><FRAMESET ROWS=" *, *, * "><FRAME SRC="doc F.html"><FRAME SRC="doc F.html">

<FRAMESET COLS="3*, * "><FRAMESET COLS="3*, * "><FRAME SRC="docA.html"><FRAME SRC="docA.html">

<FRAME SRC="docB.html><FRAME SRC="docB.html>

</FRAMESET></FRAMESET>

<FRAMESET COLS=" *, *, 2* "><FRAMESET COLS=" *, *, 2* "><FRAME SRC="docC.html><FRAME SRC="docC.html>

<FRAME SRC="docD.html><FRAME SRC="docD.html>

<FRAME SRC="docE.html><FRAME SRC="docE.html>




Centrer du texteCentrer du texte• ALIGN = "CENTER"ALIGN = "CENTER"

Taille de polices et couleurs de policesTaille de polices et couleurs de polices• <FONT SIZE = 1 ... 7> texte </FONT><FONT SIZE = 1 ... 7> texte </FONT>• <FONT COLOR = " #666666 "> texte </FONT><FONT COLOR = " #666666 "> texte </FONT>• <BASEFONT = 2><BASEFONT = 2>

TabulationsTabulations• <TAB INDENT = x ><TAB INDENT = x >

Couleur du texte et des liensCouleur du texte et des liens• TEXTTEXT• LINKLINK• VLINK (visited link)VLINK (visited link)• ALINK (active link)ALINK (active link)

– remarques : remarques : • une seule couleur de texte et de lien par page écranune seule couleur de texte et de lien par page écran• attention au contraste des couleursattention au contraste des couleurs• éviter de modifier la couleur des lienséviter de modifier la couleur des liens


Fond d'écranFond d'écran• avec une couleur <BODY BGCOLOR = "#666666">avec une couleur <BODY BGCOLOR = "#666666">

– attention au contraste pour la lisibilitéattention au contraste pour la lisibilité• avec une image <BODY BACKGROUND = "image.gif">avec une image <BODY BACKGROUND = "image.gif">

– attention aux "jointures" et au temps de transmissionattention aux "jointures" et au temps de transmission– Bases de fond de pages Medialink Bases de fond de pages Medialink

www.erinet.com/cunning1/tiles.html www.erinet.com/cunning1/tiles.html

Black = "#000000" Green = "#008000"Black = "#000000" Green = "#008000" Silver = "#C0C0C0" Lime = "#00FF00"Silver = "#C0C0C0" Lime = "#00FF00" Gray = "#808080" Olive = "#808000"Gray = "#808080" Olive = "#808000" White = "#FFFFFF" Yellow = "#FFFF00"White = "#FFFFFF" Yellow = "#FFFF00" Maroon = "#800000" Navy = "#000080"Maroon = "#800000" Navy = "#000080" Red = "#FF0000" Blue = "#0000FF"Red = "#FF0000" Blue = "#0000FF" Purple = "#800080" Teal = "#008080"Purple = "#800080" Teal = "#008080" Fuchsia = "#FF00FF" Aqua = "#00FFFF"Fuchsia = "#FF00FF" Aqua = "#00FFFF"

Autres balisesAutres balises

MathématiquesMathématiques• <MATH> ... </MATH><MATH> ... </MATH>

– <OVER> barre de fractionnement<OVER> barre de fractionnement– <ATOP> place une expression en <ATOP> place une expression en

dénominateurdénominateur– <CHOOSE> expression entre parenthèses<CHOOSE> expression entre parenthèses– <BOX = Normal/Medium/Large/Huge><BOX = Normal/Medium/Large/Huge>

• Apparition de MathMLApparition de MathML

BannièresBannières• <BANNER> ... </BANNER><BANNER> ... </BANNER>

Balise mauditeBalise maudite• <BLINK> </BLINK><BLINK> </BLINK>

Dernières Dernières implémentationsimplémentations

de nouveaux élémentsde nouveaux éléments• nouvelles balisesnouvelles balises• nouveaux objets (applets ...)nouveaux objets (applets ...)• optimisation tableaux et framesoptimisation tableaux et frames

la loi des feuilles de stylela loi des feuilles de style des éléments dépréciés mais toujours reconnusdes éléments dépréciés mais toujours reconnus

• backward compatibilitybackward compatibility

un effort d'accessibilitéun effort d'accessibilité• braille, synthétiseurs vocaux, terminaux X ...braille, synthétiseurs vocaux, terminaux X ...

de plus en plus d'applications côté clientde plus en plus d'applications côté client• images mappées ...images mappées ...

un effort d'universalitéun effort d'universalité• RFC 2070 RFC 2070

Dernières Dernières implémentationsimplémentations

de nouveaux élémentsde nouveaux éléments des éléments dépréciés mais toujours reconnusdes éléments dépréciés mais toujours reconnus un effort d'accessibilitéun effort d'accessibilité de nouveaux attributs pour les balises existantesde nouveaux attributs pour les balises existantes

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN">

version html ........... version html ........... langue du doc. langue du doc.

• languelangue

– LANG=EN / FR / AR .....LANG=EN / FR / AR .....• attribut DIR=RTL ou LTRattribut DIR=RTL ou LTR

• DateDate– DATETIME="1999-03-24T08:30:15Z" DATETIME="1999-03-24T08:30:15Z"

N'oubliez jamais ...N'oubliez jamais ...

view sourceview source copier / collercopier / coller

Parc logicielParc logiciel

éditeurs htmléditeurs html– avantagesavantages

• intègrent balises sous forme de boutonsintègrent balises sous forme de boutons• traitement des caractères accentuéstraitement des caractères accentués

– Hot Metal Pro (version française, feuilles de style), HotDogHot Metal Pro (version française, feuilles de style), HotDog

éditeurs wysiwygéditeurs wysiwyg– avantagesavantages

• interface de traitement de texteinterface de traitement de texte

– inconvénientsinconvénients• balises html ne sont plus visiblesbalises html ne sont plus visibles• wysimolwyg (what you see is more or less what you get !!! )wysimolwyg (what you see is more or less what you get !!! )

– Visual Page, Page Mill, Symposia Pro ...Visual Page, Page Mill, Symposia Pro ...

systèmes intégrés de création de sitesystèmes intégrés de création de site• Front Page, Hot Metal Pro Intranet Publisher (HIP), Front Page, Hot Metal Pro Intranet Publisher (HIP),

DreamweaverDreamweaver• AMAYA : navigateur/éditeur développé par W3CAMAYA : navigateur/éditeur développé par W3C

liste complète des éditeursliste complète des éditeurs• faire une recherche avec "html editor" sur Yahoo ou AltaVistafaire une recherche avec "html editor" sur Yahoo ou AltaVista

RéseaugraphieRéseaugraphie concernant SGMLconcernant SGML• norme ISO 8879norme ISO 8879• http://www.sil.org/sgml/sgml.htmlhttp://www.sil.org/sgml/sgml.html

concernant HTMLconcernant HTML• http://www.w3c.org/http://www.w3c.org/• http://info.med.yale.edu/caim/manualhttp://info.med.yale.edu/caim/manual• http://www.urec.fr/docs/www/www.htmlhttp://www.urec.fr/docs/www/www.html• http://www.ncsa.uiuc.edu/General/Internet/WWW/http://www.ncsa.uiuc.edu/General/Internet/WWW/

HTMLPrimerAll.htmlHTMLPrimerAll.html• http://lcweb.loc.gov/global/html.htmlhttp://lcweb.loc.gov/global/html.html• http://www.utbm.fr/ipse/cours.htmlhttp://www.utbm.fr/ipse/cours.html• http://www.loria.fr/~charoy/htmlfrench/html.htmlhttp://www.loria.fr/~charoy/htmlfrench/html.html

liste d'éléments et de balisesliste d'éléments et de balises• http://www.sandia.gov/sci_compute/html_ref.htmlhttp://www.sandia.gov/sci_compute/html_ref.html

Polices gratuitesPolices gratuites• www.microsoft.com/typogrzphy (polices True Type et Open Type)www.microsoft.com/typogrzphy (polices True Type et Open Type)• www.adobe.com/type (polices True Type et Open Type)www.adobe.com/type (polices True Type et Open Type)• www.agfahome.com/agfatype (polices True Type et Open Type)www.agfahome.com/agfatype (polices True Type et Open Type)

langage javalangage java• http://www.java.sun.com/http://www.java.sun.com/• http://www-timc.imag.fr/doc/tutorial/http://www-timc.imag.fr/doc/tutorial/

sites institutionnelssites institutionnels• http://www.w3c.org/http://www.w3c.org/• http://www.isoc.org/ ou www.isoc.asso.fr/http://www.isoc.org/ ou www.isoc.asso.fr/• http://www.nic.fr/http://www.nic.fr/• http://www.dsi.cnrs.fr/~lmb/Webdo.htmlbqrfhttp://www.dsi.cnrs.fr/~lmb/Webdo.htmlbqrf

Pour me contacterPour me contacter ERTZSCHEID OlivierERTZSCHEID Olivier 13 rue du Cagire - 31 100 13 rue du Cagire - 31 100 ToulouseToulouseTél :Tél : 05.61.44.04.24 05.61.44.04.24Courriel :Courriel : [email protected] [email protected]

• Formations : Formations : – INTERNETINTERNET

• le langage HTMLle langage HTML• Création d'un serveur webCréation d'un serveur web• La recherche d'information sur InternetLa recherche d'information sur Internet• Présentation de la messagerie électronique et de la communication Présentation de la messagerie électronique et de la communication

IRCIRC• La publication sur internetLa publication sur internet• Introduction à Internet (présentation des différents services et Introduction à Internet (présentation des différents services et

logiciels)logiciels)

– Banques et bases de donnéesBanques et bases de données• La recherche dans les bases de donnéesLa recherche dans les bases de données• Pratiques transversales (conception, modélisation, langages et Pratiques transversales (conception, modélisation, langages et

stratégies d'interrogation - SQL ... -)stratégies d'interrogation - SQL ... -)

– DIVERSDIVERS• La méthodologie de mémoire de fin d'étudeLa méthodologie de mémoire de fin d'étude• Pratiques de la bibliographie (conception, recherche, normalisation)Pratiques de la bibliographie (conception, recherche, normalisation)• Initiation à la bureautique.Initiation à la bureautique.

Déroulement de la formation m Module 1 Historique et rappel des notions de base Historique et...

Documents

Transcript of Déroulement de la formation m Module 1 Historique et rappel des notions de base Historique et...