La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Initiation au HTML Première partie. ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg2 Préambule n Buts de cet exposé –présentation sommaire.

Présentations similaires


Présentation au sujet: "Initiation au HTML Première partie. ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg2 Préambule n Buts de cet exposé –présentation sommaire."— Transcription de la présentation:

1 Initiation au HTML Première partie

2 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg2 Préambule n Buts de cet exposé –présentation sommaire de HTML –Pour aller plus loin, manuels en lignes : sur le site TAL –http://www.cavi.univ-paris3.fr/ilpga/ilpga/tal/html/index.htmhttp://www.cavi.univ-paris3.fr/ilpga/ilpga/tal/html/index.htm –balises HTML : paris3.fr/ilpga/ilpga/tal/html/balise.htmhttp://www.cavi.univ- paris3.fr/ilpga/ilpga/tal/html/balise.htm etc...

3 ED268 Langage et Langues Savoir-Faire février 2002 HTML Marie Calberg

4 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg4 Marie Calberg

5 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg5 Introduction n Le HTML est la langue vivante du web –avec sa grammaire, sa syntaxe et son vocabulaire –langage à balises n Relier des documents à l aide de liens hypertexte (Tim Berners-Lee 1989) –sur le réseau internet –interfaces sur CD-ROM...

6 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg6 Le World-Wide-Web n HTML & HTTP - un standard et un protocole simples – La simplicité explique en partie le succès du WWW

7 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg7 n Hypertext Mark-Up Language (HTML) Langage de structuration de documents Description de contenus par des éléments de formatage Liens hypertextuels (références internes et externes) Variante (sous-classe) de SGML n Hypertext Transfer Protocol (HTTP) Le serveur dit au browser de quel type de fichier il sagit. Le browser tente de représenter le contenu (il connaît au moins HTML, FTP, News, etc.) ou bien il tente de trouver une application externe locale capable dafficher le format en question (Ex: Paint Shop Pro pour le format *.tif) Cliquer sur un URL implique (en très simplifié) (1) Ouvrir une connexion (2) Chercher le fichier (ou bien exécuter et afficher le résultat) (3) Fermer la connexion => statelessness (pas de connexions permanentes!)

8 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg8 Historique n Le langage HTML tire son origine du langage SGML (Standard Generalized Markup Language). Il s'agit d'un type particulier d'annotations destiné au WWW et qui correspond à une collection de styles reconnaissables par les navigateurs. n Un navigateur (en anglais "browser") est donc un logiciel qui interprète à l'écran les commandes HTML contenues dans un document accessible sur le WWW.

9 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg9 Un langage en évolution n Le langage HTML est utilisé sur le WWW depuis La version actuellement en vigueur est HTML 4.0 n Versions en vigueur –HTML 2.O (rare) –HTML 3.0 (assez souvent) –HTML 3.2 (souvent) –HTML 4.0 (dernière version)

10 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg10 Pages HTML n Il faut d'abord spécifier qu'un document contenant des annotations en HTML n'est rien de plus qu'un fichier texte. n Il peut donc être reconnu sans problèmes de conversion d'un environnement à un autre. Une page peut donc être lue et interprétée par n'importe quel navigateur sur n'importe quelle plateforme.

11 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg11 n Stratégies de production HTML –1. directement rédiger un texte en utilisant des codes html. –2. utiliser un éditeur spécialisé éventuellement Wysiwyg (dans la mesure où ce concept est approprié). –3. utiliser un traitement de texte comme Framemaker, Word ou Wordperfect ou encore un langage de formatage comme Latex et ensuite traduire le texte en html. –4. générer du html à partir dune source arbitraire comme une base de données à laide dun logiciel. Ceci en temps réel ou en mode batch.

12 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg12 n Description dun document html –Le html (HyperText Markup Language) est un langage permettant de mettre en forme du texte, des images, du sons, etc. (la liste sallonge presque tous les jours) destinés à être visualisés grâce à un navigateur (les plus connus étant Microsoft Internet Explorer Netscape Navigator, HotJava de Sun, on pourrait en citer dautres comme Mosaïc de SpyGlass, etc.). –Ce langage de description de page utilise des marques - ou balises - pour spécifier la façon dont un élément doit apparaître, pour afficher des images ou définir des actions. –Ces marques sont toujours placées entre les signes et agissent très souvent par paire : la première spécifie le début dapplication du style (ou de laction), la seconde, qui comporte le signe /, marque la fin dapplication du style (ou de laction ).

13 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg13 –Attention à ne pas oublier cette marque de fin, car le style ou laction défini est actif tant que le navigateur ne rencontre pas la marque de fin; ainsi si vous utilisez une marque mets un italique au début de votre document et que vous oubliez la marque enlèves litalique, tout votre document apparaîtra en italique. – Remarque : les marques peuvent être saisies indifféremment en majuscule ou minuscule, tous les éditeurs de documents html (dont Microsoft Developer Studio, Netscape Navigator Gold, MetroWerks CodeWarrior, BBEdit de BareBones Software, etc.), ainsi que les navigateurs, reconnaissent les deux syntaxe, lutilisation des minuscules ou majuscules est donc un choix - une préférence - personnel

14 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg14 Créer un document HTML n "première ligne du document" n "ouverture de la zone d'entête" n "titre de la page suivi de " n "fermeture de la zone d'entête." n "ouverture du corps du document" n "Mettre le texte et les images ici" n "fin du corps du document" n "fin du document HTML"

15 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg15 n Au sujet de la commande, il est possible d'obtenir une animation sympathique (mais inutile) à l'ouverture du document HTML en insérant plusieurs commandes consécutives. Le navigateur lira successivement chaque ligne et réaffichera le nouveau titre à chaque raffraichissement.

16 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg16 Formatage du texte n Entêtes (Headers) Le formatage d'une page commence généralement par le choix et l'usage d'entêtes prédéterminées qui s'échelonnent de H1 à H6 (niveaux). La commande H1 est la plus grosse disponible et la H6 est la plus petite. Les commandes Hx comprennent un choix de taille, le caractère gras et un retour de paragraphe. suivi de l'entête et de Il n'y a pas de niveau inférieur à H6

17 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg17 n Autres commandes – suivi de « Quelquechose de centré » suivi de donne: Quelquechose de centré – donne un changement de paragraphe – donne un simple changement de ligne Notez ici que les commandes et n'ont pas à être fermées. Vous pouvez utiliser plusieurs commandes ou répétitivement pour augmenter l'espacement.

18 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg18 – donne un texte en gras: texte en gras – donne un texte en gras également: texte en gras – donne un texte en italique: texte en italique – donne également un texte en italique: texte en italique – donne aussi un texte en italique: texte en italique – donne un texte formaté avec une fonte à espacement constant (teletype): texte formaté avec une police à espacement constant

19 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg19 n Texte préformaté –Les annotations obligent le navigateur à afficher un texte préformaté. Le navigateur respecte alors les fins de ligne (retours de chariot).

20 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg20 n Augmentation ou réduction de la taille des caractères – donne un accroissement de la grosseur affichée du texte de 2 unités: – donne un accroissement de la grosseur affichée du texte de 4 unités: – donne une réduction de la grosseur affichée du texte de 2 unités:.

21 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg21 –La commande permet d'emprisonner un paragraphe telle une citation en alinéa –La commande permet de rayer un texte –La commande permet d'utiliser les indices dans des formules comme dans l'exemple qui suit: H 2 O. –La commande permet d'utiliser les exposants dans des formules

22 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg22 n Caractères spéciaux dans HTML –Certains caractères ont une signification spécifique dans HTML. Pour les utiliser comme tels dans une page, il faut utiliser les commandes alternatives pour les afficher correctement à l'écran. Ces commandes sont: < pour: < > pour: > & pour: & " pour: "

23 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg23 n À PROPOS DES ACCENTS... –L'utilisation des caractères accentués sur le WWW pose un certain nombre de problèmes car il y a plusieurs façons de traiter les caractères diacritiques. –On peut en effet utiliser une des deux méthodes suivantes: Les caractères référencés (entity references en anglais) Les caractères ISO Latin-1 (ISO )

24 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg24 n Les caractères référencés –Avec cette méthode, on utilise seulement le jeu de caractères ASCII standard. –Ce dernier ne contient que 127 caractères (non- accentués) et n'utilise que sept bits sur les huit que contient Un octet (l'unité fondamentale permettant de représenter un caractère latin sur les ordinateurs).

25 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg25 –Si le travail de composition d'un document HTML doit être effectué sur des plateformes utilisant des encodages différents, la seule façon d'assurer l'intégrité du document lorsque celui-ci est échangé consiste à utiliser les caractères référencés. Cette situation est appelée à évoluer car l'interopérabilité entre les systèmes devient de plus en plus important.

26 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg26 n Images Les navigateurs HTML reconnaissent généralement deux formats d'images; les images GIF et les images JPEG. Ces deux formats d'images sont comprimés. –L'insertion d'une image est possible en tapant la commande suivante: –Le segment IMG SRC indique qu'il s'agit de la source d'une image, le premier terme entre les guillemets indique le nom du dossier où se trouve la ou les images, le deuxième terme indique le nom du fichier contenant l'image et le format de celle-ci. Une image en format GIF se termine par.GIF alors qu'une image en format JPEG se termine par.JPEG ou.JPG. La taille de l'image est déterminée par le fichier lui-même. On peut placer par exemple une grande image occupant l'ensemble de l'écran:

27 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg27 n Les liens Pour insérer un pointeur (lien hypertexte-hypermédia), il faut indiquer une référence (appelée URL pour Uniform Ressource Locator) et un élément, texte ou image, visible à l'écran sur lequel on doit cliquer pour y accéder. Voici un exemple de code pour obtenir un pointeur: Menu du jour. Le pointeur apparaît alors en couleur contrastée et souligné dans le navigateur Les pointeurs peuvent diriger le navigateur vers des sites HTTP, FTP, TELNET, TN3270, GOPHER ou USENET. On peut aussi entrer directement sur un fichier sur le système local ou sur un réseau local.

28 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg28 Pour créer un pointeur, il s'agit tout simplement de définir le type de document dans la commande A HREF comme dans les exemples qui suivent: Site HTTP (WWW) –Le code: Serveur WWW de la FSAA donne accès à un serveur WWW, notamment à celui de la Faculté des sciences de l'agriculture et de l'alimentation de l'Université Laval. Site FTP –Le code: Site FTP de la compagnie Apple donne accès à un dossier public sur un serveur FTP de la compagnie Apple inc.

29 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg29 Fichier sur le système hôte –Le code: fichier donne tout simplement accès à un fichier HTML situé au même niveau hiérarchique que le fichier actuellement ouvert sur le serveur. –Pour obtenir un document situé ailleurs sur le même serveur, il faut spécifier le sentier à suivre. Dans ce cas, on indique le chemin complet avec le code qui suit: Glos saire. La commande A NAME –La commande A NAME enregistre un point d'accès à l'intérieur d'un document HTML. On peut ensuite référer directement à ce point précis avec une commande A HREF. La commande peut se taper directement comme ceci:, ce qui indique au navigateur où se trouve la section visée. Pour se rendre à cet endroit, il faut taper la référence comme ceci: Gopher.

30 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg30 n Tableaux Commandes de base –Les commandes de base pour créer des tableaux en HTML sont les suivantes: · Cette commande est la commande principale pour ouvrir une zone de tableaux. · Commande pour définir une rangée. Il faut utiliser une séquence pour chacune des rangées requises, à l'intérieur de la zone comme dans l'exemple ci- dessous: · Commande pour spécifier les données pour chaque rangée comme dans l'exemple ci-dessus. Le code pour produire ce tableau s'écrira donc:

31 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg31 Pour aller plus loin n La suite sur le site TAL…et dans les manuels en ligne n On consultera aussi l aide en ligne de l outil présenté infra...

32 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg32 Un outil pour l édition HTML n Au laboC : –1st Page 2000 Version 2.0 « Free » n –1st Page 2000 is an extensive web editor that allows you to build and enhance Web sites. 1st Page contains HTML enhancing tools that bring your existing Web documents to the next level. Thousands of professional web builders are using 1st Page to enhance and build their websites! From beginners to experienced web builders 1st Page suits everyone thanks to its QuickModeSwitch TM feature. Unlike most WYSIWYG editors 1st Page 2000 won't add unwanted junk code. It's a flexible environment that simply aids, creates, enhances and accelerates web development. Thousands of web builders worldwide are taking the move to switch over to 1st Page 2000 to create and manage their web sites.

33 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg33 Editeur HTML Fichiers ouverts Explorer Barre des menus

34 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg34 Un premier essai : écriture du code HTML

35 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg35 Visualisation de l essai

36 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg36 Conception d un site n 6 étapes –Spécifier Objectifs généraux de conception –Conception structure du site –Conception navigation dans le site –Conception du contenu des pages –Conception de la présentation de la page d accueil –Conception de la présentation des autres pages

37 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg37 Conception : objectifs généraux n Objectifs du site = QUOI n Objectif de conception = COMMENT –Critères ergonomiques –Critères d évaluation quantifiables –Exemples et application « Lutilisateur doit toujours percevoir ce qu il y a à explorer » « L utilisateur doit toujours savoir où il se trouve »

38 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg38 Conception : structure (1) n Définir la structure et organisation générale des informations à représenter. –Principe récursif partant de la page d accueil : Identifier toutes les pages accessibles depuis une page Identifier les liens entre pages identifiées et de même niveau

39 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg39 –Résultat : graphe de structure Décrire les liens entre pages Faire apparaître des groupes de pages –Mettre en place une « site map » –Analyse des tâches fondamentales = aide au choix du type de structure (linéaire si contraintes, non-linéaire sinon) –Analyse du contenu = aide au rassemblement des pages, des unités d information dans une même page, la quantité d info par page –Evaluer les parcours de navigation

40 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg40 Conception : navigation (1) n Fournir une description des moyens offerts pour se déplacer dans la structure du site Très important car équivalent aux processus de manip. des objets réels Définit la navigation possible et autorisée dans le site

41 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg41 n Principe –Pour chaque bouton, lien, forme cliquable, lister les effets perçus par l utilisateur –Déterminer le sens à donner (back, top, front, …) et le type à utiliser (bouton, hypertext, menu, …) n 3 formes de navigation Globale : navigation présente sur chaque page Parallèle : navigation entre pages sœurs Locale : navigation à l intérieur d une page

42 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg42 Conception : navigation (2) n Caractérisation de la navigation Hiérarchisée = arborescence sous forme d arbre –Navigation globale et parallèle Linéaire = contraignante –Navig Globale réduite à un lien vers la Home Page –Navig parallèle réduite à suivant et précédent Linéaire avec des choix –Pb signification du back (en fin …) Hiérarchique et linéaire combinée –Linéarité pour succession de chapitres, –Hiérarchisation pour les sous-chapitres Toile d araignée = liberté absolue, pas de structure

43 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg43 Conception : contenu n Définir la nature des informations et leur arrangement n Outils StoryBoard Analogie aux journaux : titre + description brève Analogie aux brochures : tables des matières + liens sur la page

44 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg44 n Remarques Lecture fatiguante = nb caractères limités (2500 pour un article important OnLine) Vérifier compatibilité avec l impression (format A4) –S assurer de la clarté du message pour l utilisateur visé (vocabulaire, abréviations -lexique?-, …)

45 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg45 Conception : page d accueil –A faire avant celle des autres pages Soucis de cohérence interne Explique et couvre complètement le contenu du site –Doit... Respecter les requis non fonctionnels Tenir compte des spécifications techniques (liens sur plugins) Etre évaluée sur écran ! C est une étape capitale qui requiert le collaboration de tous les membres de l équipe

46 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg46 Conception : autres pages n Outil Générateur d interface WYSIWYG (Page Mill, GoLive, Netscape Composer) –Peu souple, peu puissant –Idéal pour mettre en forme la structure globale Editeur de texte + HTML n Remarques Veiller aux critères d ergonomie généraux (couleurs, fontes, …) et propres à l entreprise Respecter le cahier des charges défini

47 ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg47 n Bon travail…


Télécharger ppt "Initiation au HTML Première partie. ED268/TAL Paris3/Février 2002/Savoir-faire/EXCEL/M.Calberg2 Préambule n Buts de cet exposé –présentation sommaire."

Présentations similaires


Annonces Google