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

Présentation au sujet: "Déroulement de la formation m Module 1 Historique et rappel des notions de base Historique et rappel des notions de base m Module 2 Le langage html Le."— Transcription de la présentation:

1 Déroulement de la formation m Module 1 Historique et rappel des notions de base Historique et rappel des notions de base m Module 2 Le langage html Le langage html – Création de documents – Balises essentielles – Création de liens – Images – Formulaires / Scripts de passerelle (CGI) – Tableaux – Frames Parc logiciel Parc logiciel – démonstration de Front Page, Netscape Composer m Travaux pratiques et exercices d'application

2 Objectifs de la formation m Se familiariser avec le codage HTML m Acquérir une pratique minimale m Etre capable de mener à bien la construction d'un site ou d'une page m Donner une idée des dernières implémentations m Acquérir les capacités d'auto-formation nécessaires pour suivre les évolutions à venir

3 Production d'informations et de services sur le web : m spécialistes de l'info. et de la doc. texte enrichi texte enrichi traitement matériel multimedia traitement matériel multimedia interfaces de saisie interfaces de saisie fabrication d'images simples fabrication d'images simples – Compétences requises connaissance environnement micro. standard (bureautique, système de fichier...) connaissance environnement micro. standard (bureautique, système de fichier...) pratique du travail en réseau pratique du travail en réseau m informaticiens réalisation de programmes spécifiques réalisation de programmes spécifiques interfaçage BdD ou autres logiciels interfaçage BdD ou autres logiciels installation et maintenance logiciels serveurs installation et maintenance logiciels serveurs – Compétences requises programmeur et/ou administrateur réseau programmeur et/ou administrateur réseau

4 Module 1 : Historique m Rappels : 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 non sa présentation / définit une syntaxe sans lui associer de sémantique. "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. "standard" pour décrire d'autres langages de balisage "standard" pour décrire d'autres langages de balisage langue mère d'html langue mère d'html standard de référence : norme ISO 8879 standard de référence : norme ISO 8879 – historique années 60 : Charles Goldfarb mène pour IBM des recherches sur un système d'information intégré pour un cabinet d'avocats années 60 : Charles Goldfarb mène pour IBM des recherches sur un système d'information intégré pour un cabinet d'avocats crée une méthode "GML" permettant aux sous-systèmes d'information de formater, d'éditer et de partager des documents crée une méthode "GML" permettant aux sous-systèmes d'information de formater, d'éditer et de partager des documents 1986 : SGML adopté comme standard 1986 : SGML adopté comme standard – principes de fonctionnement 1 document équivaut à 3 types d'information : 1 document équivaut à 3 types d'information : – données (texte, graphique, son...) – structure (sections, sous-sections...) – format (apparence, mise en page) SGML reconnaît données, structure et format comme trois types d'info. différentes et dissociables SGML reconnaît données, structure et format comme trois types d'info. différentes et dissociables 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 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

5 SGML (Standard Generalized Markup Language) avantages avantages – protection du capital informationnel par rapport aux risques d'utilisation restreinte à un type de configuration – ré-utilisabilité des données – interopérabilité des opérations (ne contraint pas l'architecture et les fonctions des applications qui peuvent donc être très diverses) conclusion conclusion – information plus accessible – réduction des coûts et erreurs relatives aux procédés de conversion des données – garantie que le document respecte scrupuleusement les spécifications de l'auteur balisage SGML en 3 étapes balisage SGML en 3 étapes – on définit des classes de document (ex : classe livre) – pour chaque classe, on définit un modèle générique de structure (DTD) – on balise le document selon les règles définies dans sa DTD

6 Rappels DTD (Document Type Definition) DTD (Document Type Definition) langage de balisage spécifique, écrit en utilisant SGML langage de balisage spécifique, écrit en utilisant SGML utilisé pour spécifier les règles de création d'une structure de document (=grammaire) utilisé pour spécifier les règles de création d'une structure de document (=grammaire) 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'apparition, prévalence...) 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'apparition, prévalence...) Serveur Serveur programme sur ordinateur "X" dont le but est de répondre à des requêtes de logiciels clients tournant sur d'autres ordinateurs programme sur ordinateur "X" dont le but est de répondre à des requêtes de logiciels clients tournant sur d'autres ordinateurs propriété qui consiste à faire exécuter un programme au serveur est essentielle car va permettre l'interfaçage avec pratiquement n'importe quel logiciel propriété qui consiste à faire exécuter un programme au serveur est essentielle car va permettre l'interfaçage avec pratiquement n'importe quel logiciel Document (= ressource) Document (= ressource) plus petite unité fournie par le serveur à une requête du client plus petite unité fournie par le serveur à une requête du client Client Client programme permettant de soumettre des requêtes à un serveur programme 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 client nombre de services accessibles (messagerie, forums...) dépend du logiciel client logiciels les plus utilisés : Netscape, Explorer, Amaya logiciels 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 client protocole de transmission des données utilisé entre un serveur et un client

7 HTML : définition et principes généraux m HTML (Hypertext Markup Language) – langage de balisage hypertexte – inventé par Tim Berners Lee au CERN – principe : tous les documents ont des éléments en commun DONC il est possible de les étiqueter, de les baliser. – permet de publier des documents on-line publier des documents on-line retrouver de l'information on-line via liens retrouver de l'information on-line via liens opérer des transactions entre services opérer des transactions entre services inclure du multimedia et d'autres applications dans les documents inclure du multimedia et d'autres applications dans les documents – se compose d'une collection de styles (indiqués par des balises) qui définissent les divers composants d'un doc. W3 – utilisé par W3 pour créer et reconnaître des documents hypermedia – décrit le structure et le contenu d'un document ET NON le format et l'apparence d'une page – classe de document SGML SGML : langage, générateur de balisage SGML : langage, générateur de balisage HTML : programme écrit avec ce langage HTML : programme écrit avec ce langage – html 4.01 inclut une déclaration SGML une déclaration SGML trois DTD : strictDTD / TransitionalDTD / Frameset DTD trois DTD : strictDTD / TransitionalDTD / Frameset DTD une liste de caractères une liste de caractères

8 Les théoriciens de l'hypertexte 1936 : H.G.Wells 1936 : H.G.Wells article "World Encyclopedia" article "World Encyclopedia" 1945 : Vannevar Bush 1945 : Vannevar Bush concepteur du MEMEX (Memory Extender) : système mécanique de microfiches dont les contenus sont reliés entre eux par des liens associatifs concepteur du MEMEX (Memory Extender) : système mécanique de microfiches dont les contenus sont reliés entre eux par des liens associatifs 1960 : Theodore Nelson 1960 : 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 littérature mondiale = XANADU envisage système "on line" où serait stockée l'ensemble de la littérature mondiale = XANADU 1970 : Alan Kay 1970 : Alan Kay conçoit et réalise système multimédia dont l'interface préfigure le futur Mac : Dynabook conçoit et réalise système multimédia dont l'interface préfigure le futur Mac : Dynabook invente langage Smalltalk (préfigre langage d'hypercard, première application populaire hypertextuelle) invente langage Smalltalk (préfigre langage d'hypercard, première application populaire hypertextuelle) 1968 : Douglas Engelbart 1968 : Douglas Engelbart invente NLS : premier système hypertextuel effectivement réalisé invente NLS : premier système hypertextuel effectivement réalisé développé dans le cadre du programme "Augmentation system" qui devait permettre à l'utilisateur d'augmenter ses capacités cognitives et intellectuelles développé dans le cadre du programme "Augmentation system" qui devait permettre à l'utilisateur d'augmenter ses capacités cognitives et intellectuelles

9 Quelques définitions m "Sera désigné comme hyperdocument tout contenu informatif informatisé dont la caractéristique principale est de ne pas être assujetti à une lecture préalablement définie mais de permettre un ensemble plus ou moins complexe, divers et personnalisé de lectures. Un hyperdocument est donc tout contenu informatif informatisé constitué d'une nébuleuse de fragments, dont le sens se construit, au moyen d'outils informatiques, à travers chacun des parcours que la lecture détermine." J.P. Balpe m "Il s'agit d'un concept unifié d'idées et de données interconnectées, et de la façon dont ces idées et ces données peuvent être éditées sur un écran d'ordinateur." T. Nelson m "L'hypertexte peut s'envisager comme un système à la fois matériel et intellectuel dans lequel un acteur humain interagit avec des informations qu'il fait naître d'un parcours et qui modifient en retour ses représentations et ses demandes." J. Clément

10 Quelques définitions m "L'hypertexte est un document virtuel - qui n'est jamais globalement perceptible - dont l'actualisation d'une des potentialités est conditionnée par l'effectivité de la lecture." Y. Claessens m "L'hypertexte est une structure indéfiniment récursive du sens." P. Lévy m "L'hypertexte est un sytème indéfiniment recentrable dont le point de focalisation provisoire dépend du lecteur." G.P. Landow m "L'hypertexte est un texte modulaire dynamique, lu de manière non-séquentielle, non-linéaire, composé de noeuds ou fragments d'information, qui comprennent des liens associés à d'autres noeuds." J. Poyeton

11 Quelques dates m Mars 1989 Tim Berners-Lee du CERN publie l'article " Hypertexte et le CERN " m 1990 T. Berners-Lee crée premier client et premier serveur WWW basé sur URL + HTTP + HTML m Octobre 1991 Le premier Web fonctionne au CERN en mode texte et sous NExT Step avec le premier navigateur intitulé World Wide Web. m Janvier 1993 Il existe une cinquantaine de serveurs http dans le monde. Le CERN lance la version alpha du premier browser graphique pour Xwindows et Macintosh. m Février 1993 Marc Andreesen édite la première version du browser Mosaic m Octobre 1993 : browsers Mosaic sous Macintosh et PC Windows. m Juillet 1993 Le Cern et le MIT puis l'INRIA créent le WWW Consortium pour guider à la normalisation du Web. m fin 1994 : html 2.0 (RFC 1866) m 1995 : html + et html 3.0 m Janvier 1997 : html 3.2 (pour intégrer évolutions apportées par sociétés commerciales - Micro$oft, Netscape, Novell, Sun...) m Octobre 1994 Lancement de Netscape en beta test sur PC, Macintosh et X Windows. m Février 1995 4 millions d'utilisateurs de Netscape. 75% des browsers sont des Netscape. m Décembre 1995 Microsoft lance sa version Internet Explorer 2.0 m Octobre 1996 La guerre commerciale Internet Explorer 3.0 vs Netscape 3.0 fait rage. m Septembre 1997 Le Web est stabilisé dans sa technologie du moins provisoirement. m Juillet 1997 : html 4.0 orientée feuilles de style, internationalisation, accessibilité, plug-in (application externes appelées par la balise Object)

12 Créer des documents m depuis un éditeur de texte ou un logiciel spécialisé. m HTML utilise jeu de caractères UNICODE 2.1 norme ISO 10646 norme ISO 10646 2 octets par caractère 2 octets par caractère UCS (Universal Character Set) UCS (Universal Character Set)

13 Syntaxe du langage m Balises (ou "tag") conteneur de texte => attribuent une fonction spécifique au segment encadré. conteneur de texte => attribuent une fonction spécifique au segment encadré. fonctionnent habituellement par paire (balise d'ouverture et de fermeture) fonctionnent habituellement par paire (balise d'ouverture et de fermeture) m Attributs précisent la fonction ou le mode d'application des balises. précisent la fonction ou le mode d'application des balises. sont séparés par un espace sont séparés par un espace sont mentionés uniquement dans la balise d'ouverture sont mentionés uniquement dans la balise d'ouverture leur ordre n'a pas d'importance leur ordre n'a pas d'importance peuvent avoir une valeur (nom, unité de mesure...) inscrite entre guillemets peuvent avoir une valeur (nom, unité de mesure...) inscrite entre guillemets m Syntaxe texte mis en forme texte mis en forme

14 Le document minimal <HTML><HEAD> informations générales sur le document </HEAD><BODY> texte du document + commandes de formatage </BODY></HTML> m Remarque balises ne sont pas sensibles à la casse balises ne sont pas sensibles à la casse = = = = par convention, sont notées en majuscules. par convention, sont notées en majuscules.

15 Les balises fondamentales m Titres...... utilisé comme bookmark utilisé comme bookmark placé dans l'en-tête du document placé dans l'en-tête du document m Intertitres....,...,..............................,...,.......................... m Paragraphes m Remarques penser à indenter le code source pour préserver la lisibilité penser à indenter le code source pour préserver la lisibilité ne pas croiser les balises ne pas croiser les balises – cours sur les plantes – cours sur les plantes ==> code non-interprétable ==> code non-interprétable – cours sur les plantes – cours sur les plantes ==> code correct ==> code correct

16 un exemple... Code HTML saisi... <HTML><HEAD> exemple de page html exemple de page html </HEAD><BODY> première partie première partie Ce document présente les fondamentaux d'une création de page html le document de base le document de base </BODY></HTML> Code HTML affiché... (demo browser) première partie Ce document présente les fondamentaux d'une création de page html le document de base

17 Créer un lien... vers un autre document m 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. m Trois étapes : lien lien m Exemples : Consultez mon curriculum vitae Consultez mon curriculum vitae Visitez le site de l'urfist Visitez le site de l'urfist doc. Adoc. B lien

18 Créer un lien... vers une section spécifique d'un autre document m Définir la cible dans le document "cible" dans le document "cible" section section m Créer son lien dans le document "source" dans le document "source" lien lien doc. Adoc. B lien cible

19 Créer un lien... vers une section spécifique du doc. courant m même procédé en supprimant le nom de fichier. document A lien partie cible

20 Autres liens m lien vers un serveur de news...... pour que le lien soit valide, le visiteur doit être abonné au serveur de news pour que le lien soit valide, le visiteur doit être abonné au serveur de news m lien vers un fichier à télécharger cliquez ici pour télécharger cliquez ici pour télécharger m lien e-mail adresse_e_mail adresse_e_mail – avec sujet adresse adresse – avec sujet et texte dans le corps du message adresse_e_mail adresse_e_mail – avec sujet, envoyé à 2 personnes adresse_e_mail adresse_e_mail

21 Types de liens m liens absolus permet de localiser un fichier à partir du répertoire courant du noeud le plus élevé de l'arborescence du disque dur. permet de localiser un fichier à partir du répertoire courant du noeud le plus élevé de l'arborescence du disque dur. commence toujours par une barre de fractionnement commence toujours par une barre de fractionnement ne sont pas "portables" ne sont pas "portables" m liens relatifs pointe vers un fichier spécifique pointe vers un fichier spécifique ne prend en compte que le nom du fichier ne prend en compte que le nom du fichier ne devra pas être modifié si on déplace le fichier dans l'arborescence du disque ne devra pas être modifié si on déplace le fichier dans l'arborescence du disque

22 en bref... m 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 d'un autre doc.) externes (doc. renvoie à un autre doc. ou à une section d'un autre doc.) exécutables (fichiers en téléchargement, déclenchement d'animations ou de programmes -plug-in) exécutables (fichiers en téléchargement, déclenchement d'animations ou de programmes -plug-in) m IMPORTANT on peut imbriquer une ancre dans une balise on peut imbriquer une ancre dans une balise Chanson Chanson mais ne jamais faire l'inverse mais ne jamais faire l'inverse Chanson Chanson

23 Les URL m utilisés pour créer un lien vers une autre ressource créer un lien vers une autre ressource associer un programme externe à une page html (feuille de style, script, applet...) associer un programme externe à une page html (feuille de style, script, applet...) inclure une image ou un objet inclure une image ou un objet créer une image réactive créer une image réactive envoyer un formulaire envoyer un formulaire créer des frames créer des frames spécifier des métadonnées spécifier des métadonnées m Définition Uniform Ressource Locator Uniform Ressource Locator adresse physique d'un ensemble de données sur Internet adresse physique d'un ensemble de données sur Internet RFC 1738 et 1808 RFC 1738 et 1808

24 Les URL m regroupe diverses informations type de ressource accessible (protocole d'accès) type de ressource accessible (protocole d'accès) adresse du serveur adresse du serveur localisation du fichier (détail de l'arborescence) localisation du fichier (détail de l'arborescence) m syntaxe protocole :// nom de machine [: port] / nom de fichier [#ancre]/ ? liste de paramètres protocole :// nom de machine [: port] / nom de fichier [#ancre]/ ? liste de paramètres m exemple wais://quake.think.com:210/directory-of-servers?inria m quelques types de ressources... – file:// – ftp:// – news:

25 Les URL m caractères spéciaux lettre de l'alphabet (MAJ ou min) lettre de l'alphabet (MAJ ou min) chiffre de 0 à 9 chiffre de 0 à 9 $ - _ +. $ - _ +. Pour tout autre signe... Pour tout autre signe... – carctère d'échappement (ISO LATIN 1) http://.../.../.../html/liens absolus/exemple.html pas reconnu pas reconnu http://.../.../.../html/liens%20absolus/exemple.html code correct code correct

26 Les URL m URL absolus et relatifs même principe que pour les liens même principe que pour les liens m commande m commande indique l'URL de référence qui sera utilisé pour compléter tous les URL relatifs dans un document indique l'URL de référence qui sera utilisé pour compléter tous les URL relatifs dans un document si on a un lien du type si on a un lien du type le browser ira chercher le doc. situé à l'adresse le browser ira chercher le doc. situé à l'adresse http://www-sv.cict.fr/docs/www.html

27 Les URL m URI (Uniform Ressource Identifier) adressage de niveau supérieur adressage de niveau supérieur RFC 1630 RFC 1630 URL en sont un dérivé qui indique la localisation et le mode d'accès des données URL en sont un dérivé qui indique la localisation et le mode d'accès des données les autres types d'URI sont les autres types d'URI sont – les URNames : donnent un nom générique à la ressource – les URCaracteristics : définissent son URN, son URL et d'autres infos (titre, version, auteur, format, conditions d'accès...)

28 Les balises de liste m Listes non ordonnées non ordonnées<UL> premier item premier item second item second item</UL> ordonnées ordonnées...... de définition de définition<DL> terme à définir terme à définir définition définition<DT><DD></DL>

29 Les listes... variantes typographiques m listes non-ordonnées TYPE = "disc/circle/square" TYPE = "disc/circle/square" PLAIN PLAIN SRC = "cercle.gif" SRC = "cercle.gif" DINGBAT DINGBAT WRAP = "horiz" WRAP = "horiz" m listes ordonnées TYPE = "1/A/a/I/i" TYPE = "1/A/a/I/i" START = "n" START = "n" m listes de définition COMPACT COMPACT

30 Petit exercice... m donner le code html du plan suivant villes françaises villes françaises 1. toulouse a. toulouse centre b. toulouse sud c. toulouse nord 2. paris.centre ville.arrondissements.périphérie 3. bordeaux villes étrangères villes étrangères 1. new-york 2. londres 3. munich

31 Correction <UL> Villes françaises Villes françaises<OL> Toulouse Toulouse toulouse centre toulouse centre toulouse sud toulouse sud toulouse nord toulouse nord</OL> Paris Paris centre ville centre ville arrondissements arrondissements périphérie périphérie</UL> Bordeaux Bordeaux</OL> Villes étrangères Villes étrangères<OL> New-York New-York Londres Londres Munich Munich</OL></UL>

32 Autres balises m texte préformatté...... m citations...... m adresse...... m cassure forcée de ligne m ligne horizontale SIZE = "px" SIZE = "px" WIDTH = "px" ou "%" WIDTH = "px" ou "%" ALIGN = "feft/right/center" ALIGN = "feft/right/center" NOSHADE NOSHADE m commentaires

33 Formattage de caractères m Style logiqueStyle physique DFN - B DFN - B EM- I EM- I CITE-TT CITE-TT CODE- U CODE- U KBD- S KBD- S SAMP- BIG SAMP- BIG STRONG- SMALL STRONG- SMALL VAR- SUB VAR- SUB LANG- SUP LANG- SUP AU AU

34 Traitement des images m Balise... m Balise... m 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) m Exemple m Habillages et mises en page possibles alignement alignement – ALIGN = "TOP/BOTTOM/LEFT/RIGHT/CENTER" – ALIGN = "texttop/absmiddle/middle/baselign/absbottom" espacement espacement 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"

35 Traitement des images m supperposition d'image effet de transparent effet de transparent </FIGURE> OVERLAY accepte attributs OVERLAY accepte attributs – SRC – WIDTH / HEIGHT – UNITS permet de définir position du transparent par rapport au coin supérieur gauche de l'image principale. m deux images au lieu d'une

36 Traitement des images m Recommandations : penser au temps de chargement et d'affichage penser au temps de chargement et d'affichage – ne jamais afficher d'images situées sur serveur extérieur – astuce : 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 indispensable demandez vous si une image est indispensable offrez une alternative, offrez une alternative, pensez à leur destination pensez à leur destination – résolution écran : 72 dpi – ré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 discours... MAIS une bonne image est plus longue à charger qu'un long discours...

37 Images mappées m Plusieurs méthodes : CSIM (Client-Side IMage) CSIM (Client-Side IMage) – la + utilisée car fait partie de la norme html 3.0 – Les fichiers mappés sont inclus dans la page html – pas besoin de CGI sur un serveur pour les rendre opératoires. CERN CERN NCSA NCSA

38 Images mappées m Premier temps : Si Map dans le même fichier, alors : Si Map dans le même fichier, alors : Si Map dans un autre fichier, alors : Si Map dans un autre fichier, alors : m Deuxième temps : </MAP>

39 Images mappées m définition des coordonnées pour : un rectangle SHAPE=RECT COORDS="x, y, x1, y1" un rectangle SHAPE=RECT COORDS="x, y, x1, y1" un cercle SHAPE=CIRCLE COORDS="x,y,r" un cercle SHAPE=CIRCLE COORDS="x,y,r" un polygone SHAPE=POLYGON COORDS="x,y,x1,y1..." un polygone SHAPE=POLYGON COORDS="x,y,x1,y1..." et sur Netscape seulement SHAPE=DEFAULT => ce qu'il faut faire si on clique hors zone. et sur Netscape seulement SHAPE=DEFAULT => ce qu'il faut faire si on clique hors zone. x,y r x1,y1 x,y x1,y1 x2,y2

40 Images mappées m Parc logiciel dédié : MapEdit MapEdit MapThis MapThis CrossEye CrossEye Web Hotspots Web Hotspots Paint Shop Pro Paint Shop Pro

41 Images mappées : le principe... m on choisit une image qui se prête au "jeu"... m à chaque cube on associe un fichier.htm associe un fichier.htm m on délimite les coordonnées des zones pour pouvoir "appeler" le zones pour pouvoir "appeler" le fichier html correspondant... fichier html correspondant...

42 images animées m format GIF 89a créé par Compuserve en 1989 créé par Compuserve en 1989 comprend 2 éléments importants : comprend 2 éléments importants : – transparence pour intégrer des logos à une page – possibilité de sauvegarder une chaîne d'images accompagnée d'instructions (commentaires, temporisation...) m les outils (à télécharger chez Tucows) PaintShop Pro PaintShop Pro Adobe Photoshop Adobe Photoshop Lviewpro Lviewpro Microsoft Image Composer Microsoft Image Composer Gif Construction Set Gif Construction Set Gif Movie Gear Gif Movie Gear

43 images animées m Création en 2 étapes définir les images qui vont constituer la source définir les images qui vont constituer la source – doivent être de même taille – doivent avoir la même palette de couleur (pas obligatoire mais optimise taille du fichier final) inclure les contrôles inclure les contrôles – définir hauteur et largeur de l'animation – définir l'ordre des images sélectionnées – définir un bloc de contrôle pour savoir combien de fois l'animation sera jouée valeur LOOP= de 0 à 32760 valeur LOOP= de 0 à 32760 – définir la vitesse entre chaque image (en ms) – définir la transition entre chaque image – définir la palette de couleur globale de l'animation – définir des blocs de commentaires pour insérer des aniations ou un copyrignt

44 images animées m GIF animé m en récupérer sur le web http://www.mediabuilder.com (démo) http://www.mediabuilder.com (démo) m en créer Micro$oft Gif Animator Micro$oft Gif Animator Animation Shop de PaintShopPro 5 Animation Shop de PaintShopPro 5 Cel Assembler Cel Assembler Gif Construction Set Gif Construction Set Egor Animator (Sausage - HotDog Web Editor) Egor Animator (Sausage - HotDog Web Editor)

45 Formulaires (1/4) m 1 balise... m 1 balise... 2 attributs 2 attributs – METHOD GET ou POST GET ou POST indique le mode de transfert des données indique le mode de transfert des données choisir POST choisir POST – ACTION définit la locamisation du script permettant d'exploiter le formulaire définit la locamisation du script permettant d'exploiter le formulaire

46 Formulaires (2/4) m 3 classes d'éléments Classe 1 : INPUT Classe 1 : INPUT – TYPE="submit" =>création d'un bouton d'envoi – TYPE="reset" => création de bouton pour effacer la saisie – TYPE="checkbox" =>création menu avec plusieurs choix mac mac pc pc unix unix – TYPE="radio" => création menu avec un seul choix cd-rom cd-rom disquette disquette – TYPE="file" => fichier attaché – TYPE="password" => caractères masqués

47 Formulaires (3/4) m 3 classes d'éléments classe 2 : SELECT => utilisé pour création de listes classe 2 : SELECT => utilisé pour création de listes – menus déroulants lundi lundi mardi mardi mercredi mercredi</SELECT> – listes à ascenceur cict cict....</SELECT> classe 3 : TEXTAREA classe 3 : TEXTAREA Entrez vos commentaires Entrez vos commentaires

48 Formulaires (4/4) m 2 attributs communs NAME NAME VALUE VALUE – pour un champ texte : prédéfinit le contenu – pour un bouton submit ou reset : indique texte du bouton submit ou reset : indique texte du bouton checkbox ou radio : indique valeur du bouton enfoncé checkbox ou radio : indique valeur du bouton enfoncé

49 introduction aux CGI m Common Gateway Interface interface de passerelle entre vos applications de traitement et votre serveur HTTP interface de passerelle entre vos applications de 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 langages il supporte permet de générer des pages à partir de données présentes sur le serveur permet de générer des pages à partir de données présentes sur le serveur

50 Scripts de passerelle (CGI) interfaceserveur script CGI autres programmes Saisie utilisateur (champs de formulaire)

51 Les formulaires sans CGI m en utilisant du Javascript permet de transférer les informations en interne, à l'int. d'une page ou d'un site. permet de transférer les informations en interne, à l'int. d'une page ou d'un site.<FORM> <INPUT TYPE="button" NAME="nom" VALUE="Bouton test" onclick="alert('test réussi !')"> </FORM> en cliquant sur Bouton de test, on déclenche une fonction Javascript élémentaire qui affiche une boîte dite d'alerte avec le texte saisi. en cliquant sur Bouton de test, on déclenche une fonction Javascript élémentaire qui affiche une boîte dite d'alerte avec le texte saisi. Remarque : attributs METHOD et ACTION inutiles car on ne fait pas appel au serveur Remarque : attributs METHOD et ACTION inutiles car on ne fait pas appel au serveur

52 Les formulaires sans CGI m La procédure MAILTO formulaires récupérés sous forme de courrier électronique avec une structuration prédéfinie formulaires récupérés sous forme de courrier électronique avec une structuration prédéfinie – utile pour applications commerciales (couplage avec BdD...) alternative à procédure CGI imaginée par Netscape alternative à procédure CGI imaginée par Netscape Peut être utilisée par tout le monde car fonctionne côté client Peut être utilisée par tout le monde car fonctionne côté client Nets. Nav. 3.0 et suiv. + IE 4.0 Nets. Nav. 3.0 et suiv. + IE 4.0 votre nom : votre nom : votre adresse : votre adresse : votre nom : votre adresse : OK Cancel

53 Formulaires sans CGI m on reçoit par e-mail : nom=O+Ertzscheid&adresse=rue+du+cagire+17%OD%OA+31000+lille nom=O+Ertzscheid&adresse=rue+du+cagire+17%OD%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 ligne 17%OD%OA correspond à un pasage à la ligne m existe des programmes pour décoder tout ça m Remarque : on peut envoyer des copies : on peut envoyer des copies : – action="mailto:o.ertzscheid@lemel.Fr?CC="oli.ert@caramail.com">

54 Tableaux m Intérêt : pratique et ergonomique / palliatif des insuffisances de html pratique et ergonomique / palliatif des insuffisances de html avant : avant : m Balises principales – attribut BORDER = "px" astuce astuce titre du tableau titre du tableau – attribut ALIGN = "top" (valeur par défaut) ou "bottom" sera interprété par synthétiseurs vocaux sera interprété par synthétiseurs vocaux ligne ligne en-tête en-tête cellule cellule m La description d'un tableau en HTML se fait ligne par ligne et pour chaque ligne, cellule par cellule colonnes calculées automatiquement en fonction du nombre de cellules par ligne colonnes calculées automatiquement en fonction du nombre de cellules par ligne m Chaque cellule peut contenir n'importe quel élément HTML (image, texte, lien, applet, tableau...)

55 TABLEAUX m Cellules vides ou ou m Affichage ALIGN = "LEFT" "RIGHT" "CENTER" "JUSTIFY" ALIGN = "LEFT" "RIGHT" "CENTER" "JUSTIFY" m Alignement dans les cellules – mêmes attributs dans vaudront pour toute la ligne – 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 à gauche données centrées et alignées à gauche left center right top middle bottom align valign

56 TABLEAUX m cellules fusionnées une cellule sur plusieurs lignes ou colonnes une cellule sur plusieurs lignes ou colonnes – ROWSPAN 1 cellule sur hauteur de plusieurs lignes 1 cellule sur hauteur de plusieurs lignes valeur de l'attribut définit hauteur en ligne de la cellule valeur de l'attribut définit hauteur en ligne de la cellule – COLSPAN 1 cellule sur largeur de plusieurs colonnes 1 cellule sur largeur de plusieurs colonnes valeur de l'attribut définit largeur en colonne de la cellule valeur de l'attribut définit largeur en colonne de la cellule cellule fusionnée

57 TABLEAUX m épaisseur de quadrillage CELLSPACING="px" (2 par défaut) CELLSPACING="px" (2 par défaut) m espacement des données CELLPADDING="px" (1 par défaut) CELLPADDING="px" (1 par défaut)

58 TABLEAUX m groupement de lignes THEAD, TFOOT, TBODY THEAD, TFOOT, TBODY m groupement de colonnes COLGROUP COLGROUP m ces groupements permettent : d'appliquer des feuilles de style sans les répéter d'appliquer des feuilles de style sans les répéter d'éviter de resaisir des données si le tableau est sur plusieurs pages d'éviter de resaisir des données si le tableau est sur plusieurs pages d'interroger et de faire des tris à la manière d'un tableur d'interroger et de faire des tris à la manière d'un tableur

59 TABLEAUX m bords et enrobages bordures extérieures bordures extérieures – frame = "void/above/below/hsides/vsides/lhs/rhs/box" bordures intérieures (séparations entre lignes et colonnes) bordures intérieures (séparations entre lignes et colonnes) – rules = "none/groups/rows/cols/all"

60 Frames m Définition l'écran est divisé en plusieurs zones l'écran est divisé en plusieurs zones chaque zone est un document propre chaque zone est un document propre intétêt : ergonomie accrue intétêt : ergonomie accrue m Balises remplace pour le corps du document. remplace pour le corps du document. – ROWS pour diviser en sous-zones horizontales – COLS pour diviser en sous-zones verticales – 4 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 pixels n hauteur/longueur de la sous zone en pixels * indique au browser d'attribuer à la sous zone toute la place restante * indique au browser d'attribuer à la sous zone toute la place restante x entier x entier

61 Frames m m – SRC indique url du doc. à afficher dans la zone – NAME permet de nommer la zone afin qu'elle puisse devenir la cible d'un lien – MARGINWIDTH – MARGINHEIGHT – SCROLLING = "yes/no/auto" indique si la zone doit posséder une barre de défilement – NORESIZE empêche toute modification par l'utilisateur de la taille d'une zone – BORDER / BORDERCOLOR="#FFFFFF" – FRAMEBORDER = "0 ou 1" m m – indique texte de remplacement si le browser ne gère pas les frames

62 Frames m Création de liens utilisant ces frames attribut TARGET attribut TARGET voir le dossier voir le dossier 3 valeurs possibles 3 valeurs possibles – nom d'une frame existante – valeur ne correspondant à aucune frame – paramétrage TARGET="_top" supprimera toutes les frames existantes et affichera le document sur toute la surface du browser / permet en pratique de quitter un système de frames TARGET="_top" supprimera toutes les frames existantes et affichera le document sur toute la surface du browser / permet en pratique de quitter un système de frames TARGET="_blank" le navigateur ouvre une nouvelle fenêtre / cette fenêtre ne portera pas de nom et ne pourra pas être la cible d'un lien. TARGET="_blank" le navigateur ouvre une nouvelle fenêtre / cette fenêtre ne portera pas de nom et ne pourra pas être la cible d'un lien. TARGET="_self" le document sera chargé dans la même zone que celle comprenant le lien hypertexte TARGET="_self" le document sera chargé dans la même zone que celle comprenant le lien hypertexte TARGET="_parent" TARGET="_parent"

63 Exercice : créez le code source de cette frame docF.html docD.html docE.html docB.html docA.html docC.html

64 Correction </FRAMESET> </FRAMESET></FRAMESET>

65 Autres balises m Centrer du texte ALIGN = "CENTER" ALIGN = "CENTER" m Taille de polices et couleurs de polices texte texte m Tabulations m Couleur du texte et des liens TEXT TEXT LINK LINK VLINK (visited link) VLINK (visited link) ALINK (active link) ALINK (active link) – remarques : une seule couleur de texte et de lien par page écran une seule couleur de texte et de lien par page écran attention au contraste des couleurs attention au contraste des couleurs éviter de modifier la couleur des liens éviter de modifier la couleur des liens

66 Autres balises m Fond d'écran avec une couleur avec une couleur – attention au contraste pour la lisibilité avec une image avec une image – attention aux "jointures" et au temps de transmission – Bases de fond de pages Medialink www.erinet.com/cunning1/tiles.html m Black = "#000000" Green = "#008000" m Silver = "#C0C0C0" Lime = "#00FF00" m Gray = "#808080" Olive = "#808000" m White = "#FFFFFF" Yellow = "#FFFF00" m Maroon = "#800000" Navy = "#000080" m Red = "#FF0000" Blue = "#0000FF" m Purple = "#800080" Teal = "#008080" m Fuchsia = "#FF00FF" Aqua = "#00FFFF"

67 Autres balises m Mathématiques...... – barre de fractionnement – place une expression en dénominateur – expression entre parenthèses – – Apparition de MathML Apparition de MathML m Bannières...... m Balise maudite

68 Dernières implémentations m de nouveaux éléments nouvelles balises nouvelles balises nouveaux objets (applets...) nouveaux objets (applets...) optimisation tableaux et frames optimisation tableaux et frames m la loi des feuilles de style m des éléments dépréciés mais toujours reconnus backward compatibility backward compatibility m un effort d'accessibilité braille, synthétiseurs vocaux, terminaux X... braille, synthétiseurs vocaux, terminaux X... m de plus en plus d'applications côté client images mappées... images mappées... m un effort d'universalité RFC 2070 RFC 2070

69 Dernières implémentations m de nouveaux éléments m des éléments dépréciés mais toujours reconnus m un effort d'accessibilité m de nouveaux attributs pour les balises existantes version html........... langue du doc. version html........... langue du doc. langue langue – LANG=EN / FR / AR..... attribut DIR=RTL ou LTR attribut DIR=RTL ou LTR Date Date – DATETIME="1999-03-24T08:30:15Z"

70 N'oubliez jamais... m view source m copier / coller

71 Parc logiciel m éditeurs html – avantages intègrent balises sous forme de boutons intègrent balises sous forme de boutons traitement des caractères accentués traitement des caractères accentués – Hot Metal Pro (version française, feuilles de style), HotDog m éditeurs wysiwyg – avantages interface de traitement de texte interface de traitement de texte – inconvénients balises html ne sont plus visibles balises 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... m systèmes intégrés de création de site Front Page, Hot Metal Pro Intranet Publisher (HIP), Dreamweaver Front Page, Hot Metal Pro Intranet Publisher (HIP), Dreamweaver AMAYA : navigateur/éditeur développé par W3C AMAYA : navigateur/éditeur développé par W3C m liste complète des éditeurs faire une recherche avec "html editor" sur Yahoo ou AltaVista faire une recherche avec "html editor" sur Yahoo ou AltaVista

72 Réseaugraphie m concernant SGML norme ISO 8879 norme ISO 8879 http://www.sil.org/sgml/sgml.html http://www.sil.org/sgml/sgml.html m concernant HTML http://www.w3c.org/ http://www.w3c.org/ http://info.med.yale.edu/caim/manual http://info.med.yale.edu/caim/manual http://www.urec.fr/docs/www/www.html http://www.urec.fr/docs/www/www.html http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html http://lcweb.loc.gov/global/html.html http://lcweb.loc.gov/global/html.html http://www.utbm.fr/ipse/cours.html http://www.utbm.fr/ipse/cours.html http://www.loria.fr/~charoy/htmlfrench/html.html http://www.loria.fr/~charoy/htmlfrench/html.html m liste d'éléments et de balises http://www.sandia.gov/sci_compute/html_ref.html http://www.sandia.gov/sci_compute/html_ref.html m Polices 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) m langage 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/ m sites 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.htmlbqrf http://www.dsi.cnrs.fr/~lmb/Webdo.htmlbqrf

73 Pour me contacter ERTZSCHEID Olivier 13 rue du Cagire - 31 100 Toulouse Tél : 05.61.44.04.24 Courriel : o.ertzscheid@voila.fr Formations : Formations : – INTERNET le langage HTML le langage HTML Création d'un serveur web Création d'un serveur web La recherche d'information sur Internet La recherche d'information sur Internet Présentation de la messagerie électronique et de la communication IRC Présentation de la messagerie électronique et de la communication IRC La publication sur internet La publication sur internet Introduction à Internet (présentation des différents services et logiciels) Introduction à Internet (présentation des différents services et logiciels) – Banques et bases de données La recherche dans les bases de données La recherche dans les bases de données Pratiques transversales (conception, modélisation, langages et stratégies d'interrogation - SQL... -) Pratiques transversales (conception, modélisation, langages et stratégies d'interrogation - SQL... -) – DIVERS La méthodologie de mémoire de fin d'étude La 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.