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

Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/2006 1 Introduction au langage HTML: comment composer des pages pour un serveur.

Présentations similaires


Présentation au sujet: "Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/2006 1 Introduction au langage HTML: comment composer des pages pour un serveur."— Transcription de la présentation:

1 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Introduction au langage HTML: comment composer des pages pour un serveur WWW

2 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Petit historique dInternet (1) Début des années 70 –ARPAnet (Advanced Research Projects Agency Network)Réseau pour la défense américaine Première démonstration publique du réseau : oct En 1972 également, envoi du premier courrier électronique par Ray Tomlinson Au cours des années 70 – L'interconnexion des réseaux est adoptée par les universités pour : la transmission d'informations, de fichiers la communication l'utilisation partagée de gros ordinateurs Le réseau échappe de plus en plus aux militaires au profit des universitaires qui le rebaptisent "Internet", abréviation de « International Network »

3 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Petit historique dInternet (2) Création de protocoles (TCP/IP, Mail, FTP,...) TCP/IP : Transmission Control Protocol / Internet Protocol –définition du mode de transmission de l!information –principe grossier : acheminer des données sur un réseau en les fragmentant en petits paquets –protocole officiel en Années 80 –Développement des connexions aux Etats-Unis puis en Europe, au Japon, en Océanie –213 machines reliées en 1981 – en 1991 Le grand public n'est pas encore là... il faut connaître le langage de lInternet !

4 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Introduction Le texte et sa mise en page –Texte et directives –Structuration et mise en page –Langage en évolution Les outils de composition –Outil de lecture, outil de composition –Outils de composition spécialisés ou non Les directives (étiquettes, tags) –Syntaxe –Champ d'action Mot d'ordre : structurer!

5 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Directives de structuration Structure générale d'un document en HTML Tout document HTML se compose ainsi: Centre National d'Art et de Culture Georges Pompidou......

6 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Le mot, la phrase effet souhaitédirectiverésultatnotes gras fermer la porte doucement en sortant italique Les tags HTML sont des directives souligné Le formatage d'un document permet de le lire non standard, à éviter pour le moment exposant a 2 +b 2 La 3 ème ligne indice B 2n police de largeur fixe La commande à effectuer est mosaic -kiosk

7 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Caractères spéciaux dir.résdir.résdir.résdir. ré s dir.résdir.résdir.résdir. rés. áá ééíí óóúúýý àà èèìì òòùù ââ êêîî ôôûû ää ëëïï ööüüÿÿ ãã ññõõ åå ææçç øø ÁÁ ÉÉÍÍ ÓÓÚÚÝÝ ÀÀ ÈÈÌÌ ÒÒ Ù ; Ù ÂÂ ÊÊÎÎ ÔÔÛÛ ÄÄ ËËÏÏ ÖÖÜÜ ÃÃ ÑÑÕÕ ÅÅ ÆÆÇÇ &216;

8 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Séparateurs et paragraphes effet souhaitédirectiverésultatnotes retour à la ligne à l'intérieur d'un paragraphe Le Centre National d'Art et de Culture ne pas utiliser plusieurs à la suite (...) saut (ou fin) de paragraphe Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible. Certaines directives servent à couper la présentation. Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible. Certaines directives servent à couper la présentation. ne pas utiliser plusieurs à la suite; on peut le mettre sur une ligne séparée pour rendre le code plus lisible, mais cela ne change en rien le résultat règle (ligne horizontale séparatrice) Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible. Certaines directives servent à couper la présentation. Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible. Certaines directives servent à couper la présentation. paragraphe indenté Comme le dit Virilio: Nous aimerons notre lointain au lieu d'aimer notre prochain. C'est l'effet pervers des réseaux. Comme le dit Virilio: Nous aimerons notre lointain au lieu d'aimer notre prochain. C'est l'effet pervers des réseaux. On peut découper le texte indenté (entre les... ) à l'aide de sauts de fin de ligne ou de paragraphe.

9 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Les listes effet souhaitédirectiverésultatnotes liste non numérotée Voici une liste de ce type: le premier élément de cette liste est séparé des autres et ainsi de suite l'un après l'autre jusqu'à la fin de la liste. Voici une liste de ce type: le premier élément de cette liste est séparé des autres et ainsi de suite l'un après l'autre jusqu'à la fin de la liste. UL sont les initiales de Unnumbered List. liste numérotée Voici une liste de ce type: le premier élément de cette liste est séparé des autres et numéroté automatiquement, le second, et ainsi de suite jusqu'à la fin de la liste. Voici une liste de ce type: 1.le premier élément de cette liste est séparé des autres et numéroté automatiquement, 2.le second, 3.et ainsi de suite jusqu'à la fin de la liste. OL sont les initiales de Ordered List. liste avec intitulés Voici une liste de ce type: Chaque intitulé recouvre: un ou plusieurs items, ceci est le premier; ceci est le second; ceci est le troisième. Le second intitulé recouvre: un seul item. jusqu'à la fin. Voici une liste de ce type: Chaque intitulé recouvre: un ou plusieurs items, ceci est le premier; ceci est le second; ceci est le troisième. Le second intitulé recouvre: un seul item. jusqu'à la fin. Les "items" sont indentés, et commencent à la ligne. Pour mieux distinguer les intitulés et/ou les éléments, on peut rajouter des directives (par exemple, faire ressortir les intitulés en gras, les précéder d'une séparation de paragraphes, etc.)

10 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Listes et sous listes effet souhaitédirectiverésultatnotes liste dans une liste, ou sous-liste Le Centre est composé de deux départements: le MNAM/CCI, dont les domaines de compétences sont: la peinture la sculpture le dessin... le DDC, dans les domaines de: l'édition l'audio-visuel l'actualité culturelle et de deux organismes associés... Le Centre est composé de deux départements: le MNAM/CCI, dont les domaines de compétences sont: la peinture la sculpture le dessin... le DDC, dans les domaines de: 1.l'édition 2.l'audio-visuel 3.l'actualité culturelle et de deux organismes associés... Les caractères affichés en face de chaque élément dépendent du navigateur.

11 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Listes et sous listes effet souhaitédirectiverésultatnotes liste dans une liste, ou sous-liste Le Centre est composé de deux départements: le MNAM/CCI, dont les domaines de compétences sont: la peinture la sculpture le dessin... le DDC, dans les domaines de: l'édition l'audio-visuel l'actualité culturelle et de deux organismes associés... Le Centre est composé de deux départements: le MNAM/CCI, dont les domaines de compétences sont: la peinture la sculpture le dessin... le DDC, dans les domaines de: 1.l'édition 2.l'audio-visuel 3.l'actualité culturelle et de deux organismes associés... Les caractères affichés en face de chaque élément dépendent du navigateur.

12 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Les titres effet souhaitédirectiverésultatnotes titre niveau 1 IRCAM 1 place Igor-Stravinsky, Paris IRCAM 1 place Igor-Stravinsky, Paris Il est inutile de précéder ou de faire suivre un titre des directives ou : il est séparé du corps du texte. On peut par contre insérer un dans le titre pour y forcer un retour à la ligne (sous-titre, par exemple). titre niveau 2 La recherche et le développement Au service de la musique, la recherche scientifique explore de nouveaux territoires acoustiques. La recherche et le développement Au service de la musique, la recherche scientifique explore de nouveaux territoires acoustiques.... titre niveau 6 En cas de problème, s'adresser au secrétariat. En cas de problème, s'adresser au secrétariat

13 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Les tableaux Ceux-ci sont des extensions récentes - et fort utiles - du langage HTML, et le standard ne s'est pas encore vraiment stabilisé. Outre une utilisation "normale" pour l'affichage d'information tabulée (comme dans ce document-ci), ils servent actuellement à effectuer des effets de mise en page que HTML ne permet pas, notamment le multi- colonne (cf. l'exemple ci-contre, la page d'accueil du Boston Book Review).Boston Book Review Dans une utilisation de ce type, il faudra considérer bien plus précisément le contenu de chaque cellule du tableau, pour éviter des repliements qui nuiraient à cette mise en page. On peut comparer ce type d'utilisation à celui de QuarkXPress ou PageMaker (par rapport à Word): on prévoit la place des éléments sur la page, plutôt que simplement les uns par rapport aux autres.

14 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Éléments d'un tableau Un tableau est composé de cellules, agencées en rangées, et les rangées sont alignées les unes en dessous des autres. Les directives de base pour le construire procèdent donc de cette façon : signifie «Table Row» (rangée de tableau). On peut déterminer si les réglures seront visibles ou non, en rajoutant un complément d'information dans la directive se rapportant à tout le tableau: indique qu'elles doivent être affichées. Chaque rangée est elle-même constituée de cellules, délimitées par les directives... ("table data", une donnée du tableau): On n'est pas forcé d'écrire toutes les directives sur la même ligne.

15 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Alignement Les données, à l'intérieur des cellules, sont alignés à gauche par défaut. Ceci convient bien à du texte par exemple, mais pas à des images ou des chiffres. Il est possible de déterminer l'alignement de ces données au niveau de chaque rangée et/ou au niveau de chaque cellule. Ainsi, la directive:... indique que les contenus de toutes les cellules de cette rangée seront alignées à droite dans leurs cellules, sauf indication contraire pour une cellule spécifique. Autre exemple: la directive... indique que le contenu de cette cellule sera centré, quelque soit la directive d'alignement pour la rangée.

16 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Exemple 1 parti 119%27%10% parti 214%54%60% parti 367%19%30% Pour obtenir le tableau suivant, on remarquera que la plupart des données sont alignées à droite, sauf pour la première cellule de chaque ligne, et que les réglures sont visibles. On écrira donc: parti 1 19% 27% 10% parti 2 14% 54% 60% parti 3 67% 19% 30% Les espaces entre les lignes ci-dessus n'ont aucune influence sur la mise en page du tableau, mais rendent le document source plus lisible.

17 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ En-têtes Dans le tableau ci-dessus, il serait utile de pouvoir rajouter une première ligne qui décrit le contenu des colonnes. On peut le faire avec les éléments déjà fournis, en spécifiant, par exemple, une rangée dont tous les éléments sont centrés, et encadrer chaque élément de la directive... afin qu'il s'affiche en gras. Il existe une directive spéciale pour ce genre de cellule:... (TH = "Table Header", en-tête de tableau), qui centre le contenu de la cellule et l'affiche en gras.

18 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Exemple 2 parti parti 119%27%10% parti 214%54%60% parti 367%19%30% parti parti 1 19% 27% 10% parti 2 14% 54% 60% parti 3 67% 19% 30%

19 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Chevauchement Il est possible de faire en sorte qu'une cellule s'étende sur 2 ou plusieurs colonnes et/ou rangées. Pour cela, il suffit de spécifier dans la directive le nombre de colonnes (COLSPAN) ou de rangées (ROWSPAN) sur lesquelles elle s'étend.

20 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Exemple 3 Voici un tableau à réaliser avec un chevauchement horizontal. La 2e ligne ne comportera donc que 3 cellules. On écrira donc: parti parti 119%10% parti 214%54%60% parti 367%19%30% parti parti 1 19% 10% parti 2 14% 54% 60% parti 3 67% 19% 30% On aurait pu centrer la donnée dans la cellule chevauchante, en faisant: 19%

21 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Exemple 3 Voici un tableau à réaliser avec un chevauchement horizontal. La 2e ligne ne comportera donc que 3 cellules. On écrira donc: parti parti 119%10% parti 214%54%60% parti 367%19%30% parti parti 1 19% 10% parti 2 14% 54% 60% parti 3 67% 19% 30% On aurait pu centrer la donnée dans la cellule chevauchante, en faisant: 19%

22 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Exemple 4 Enfin, voici un chevauchement vertical. La 2e rangée comprend 4 cellules, dont la 3e s'étend sur la 3e rangée. Donc, en écrivant le contenu de la 3e rangée, on ne mentionnera pas cette cellule: son contenu viendra de la rangée précédente. parti parti 119%10% parti 214%54% 60% parti 367%19% parti parti 1 19% 10% parti 2 14% 54% 60% parti 3 67% 19% Le contenu de la cellule chevauchante est centré verticalement. Il est possible de modifier cet alignement vertical à l'aide du mot- clé VALIGN. Ainsi, si l'on avait voulu que le 60% soit aligné par le haut, on aurait mis: 60%

23 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Contenu En principe, on peut tout mettre dans la cellule d'un tableau: un paragraphe, plusieurs paragraphes (séparés par exemple par des ), des listes, des titres et sous-titres, des images,... En fait, les capacités d'affichage des navigateurs varient de l'un à l'autre. Mosaic sur PC et Netscape peuvent afficher les tableaux parmi les plus complexes, tandis que Mosaic sur Unix, par exemple, ne peut traiter que les tableaux les plus simples.

24 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Insertion dune image La directive servant à insérer une image est : L'image s'affichera à l'endroit où apparaît cette directive, et l'affichage du texte continuera après. Divers compléments d'information existent, notamment pour l'alignement; ainsi ALIGN=TOP signifie que le texte suivant cette directive apparaîtra à la suite (donc à droite de l'image), aligné à son sommet. Par exemple: Voici lUTBM produira l'effet suivant : Voici lUTBM

25 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Les références externes Référence textuelle : Exemple : Appuyer ici pour voir le calendrier de lUTBM. le mot ici qui, du coup, est affiché sous une forme distincte du reste, et devient sensible à la souris Référence par image : (1)début de directive d'hypertexte, qui référence le document /visite/utbm.html; (2) affichage de l'image /images/images.gif, qui est donc "sensible à la souris"; (3)fin de directive d'hypertexte.

26 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Les Références internes Création dune ancre (« point daccroche ») à lintérieur dun document : Référence à une ancre interne à lintérieur dun document : Les tableaux Référence à une ancre interne à lintérieur du document « courant »: Les tableaux

27 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Images sensibles Description dune zone : =>Nom de description des différentes zones :

28 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Affichage de limage et association à la description des zones ISMAP : indique que cette image a des zones sensibles USEMAP : adresse de lancre de description de ces zones

29 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Les cadres («frames») Supposons une fenêtre subdivisée en quatre cadres, auxquels nous allons donner les noms suivants, suggérant leurs fonctions:

30 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Constitution des cadres La description des cadres est hiérarchique: on subdivise la fenêtre principale horizontalement ou verticalement en deux ou plusieurs parties (rangées ou colonnes), puis chacune d'elles successivement de même manière. Dans notre cas, la première subdivision est la suivante: La spécification en HTML est la suivante: rangée supérieure rangée inférieure

31 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ la rangée supérieure (qui ne comporte que le cadre entete ) fait 20% de la taille verticale de la fenêtre, et la rangée inférieure fait le reste ( * indique une taille non spécifiée, déterminée par le reste). rangée inférieure tandis que la rangée inférieure est un regroupement de cadres, la séparation étant verticale, cette fois-ci:

32 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ ce qui donne: colonne de gauche colonne de droite Cette fois-ci, la colonne de gauche, qui fait 17% de la largeur de cet ensemble, est elle-même un regroupement de cadres, tandis que la colonne de droite est un cadre indivisible, le cadre note : colonne de gauche

33 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Quant à la colonne de gauche, voici à quoi elle ressemble: une subdivision horizontale ne comprenant que deux cadres, dont on spécifie cette fois-ci uniquement la taille du cadre inférieur (le second):

34 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Spécification des contenus des cadres Les fichiers ont reçu des noms semblables à ceux des cadres, ce qui n'est pas une nécessité, mais en facilite la gestion

35 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ UTBM Université de Technologie de Belfort Montbéliard Tout le texte ci-dessus va aller dans un fichier distinct des quatre fichiers entete.html, menu.html, services.html, note.html. Appelons-le index.html. Il devra comprendre, outre les directives ci-dessus, "l'enrobage" que nous avons vu:

36 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Comment charger le contenu d'un cadre INTRODUCTION Ce qui veut dire: la sélection du lien INTRODUCTION dans le cadre menu chargera le fichier intro.html dans le cadre note. L'option TARGET dans la directive indique donc la destination de l'affichage. Si on ne l'avait pas spécifiée, la page serait apparue dans le même cadre où se trouve le lien, donc dans le cadre menu...

37 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Pour affecter toute la fenêtre et ses cadres, on aura par exemple, pour le lien Catalogue du cadre services : A HREF="/catalogue/" TARGET="_top"> Catalogue Le document dont l'URL (adresse) est /catalogue/ s'affichera dans la fenêtre principale, dont le nom est _top (qui est donc un mot réservé). Ce document là peut lui-même être composé ou non de cadres, et s'il l'est, ils peuvent être semblables en forme ou différents.

38 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Les formulaires Le mécanisme des formulaires est destiné à fournir un mode d'interaction beaucoup plus vaste: choix sur listes, boutons d'activation/désactivation, saisie libre de texte... Par exemple :

39 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Structure générale dun formulaire Un "formulaire" fait partie d'un document HTML, et est délimité par une directive à champ d'action :... champs d'interrogation... L'option METHOD indique la façon dont les choix de l'utilisateur seront envoyés à l'application chargée de les traiter et d'y répondre GET ajoute le contenu du formulaire à lURL spécifié dans ACTION. POST envoie le contenu du formulaire au serveur comme un ensemble de données sans les faire figurer à la suite de lURL. ( POST est la méthode la plus commune), Le champ ACTION sert à indiquer l'URL (l'adresse) de cette application.

40 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Choix sur liste Options... options L'option NAME sert à identifier ce champ. Par exemple: Bibliothèque nationale de France Bibliothèque publique d'information Library of Congress On remarquera que l'on ne peut effectuer qu'un seul choix dans cette liste; la sélection d'un choix en efface un autre

41 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Choix sur liste (multiple) Il est possible de construire des listes à choix multiples, en le spécifiant dans la directive de tête, par exemple : L'option NAME sert à identifier ce champ. Par exemple: Bibliothèque nationale de France Bibliothèque publique d'information Library of Congress

42 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Choix par boutons Le bouton à choix simple Il est réalisé de la façon suivante: intitulé à l'écran sauf Exemple :

43 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Choix par boutons Le bouton à choix multiples Ils sont réalisés ainsi : intitulé 1 à l'écran intitulé 2 à l'écran intitulé 3 à l'écran... Toutes les directives ont le même nom de champ, mais des identifiants et intitulés différents pour les choix. Ainsi, dans notre exemple, on a : tout monographie périodique photo enregistrement CD-Rom Exemple : où on a utilisé l'option CHECKED pour les monographies, ce qui la présélectionne dans le formulaire (mais l'utilisateur peut changer).

44 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/

45 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ La saisie de texte (mono ligne) La réalisation en est simple: Exemple : Pour pré positionner la case de saisie du texte, on utilise la fonctionnalité VALUE : Enfin, on peut contrôler la largeur de la fenêtre de saisie du texte:

46 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ La saisie de texte (multiligne) Il y a des cas où l'on veut pouvoir offrir plusieurs lignes de saisie pour une option. Exemple : la saisie d'un abstract dans un formulaire pour le catalogage d'articles scientifiques; la saisie d'une lettre, dans un formulaire pour l'expédition d'un courrier électronique; la saisie de commentaires, dans un formulaire permettant au lecteur d'exprimer ses remarques sur un service… La directive est : texte de pré initialisation Exemple : (tapez ici)

47 Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/ Boutons de réinitialisation et d'expédition du formulaire Ces deux boutons sont simples à réaliser : (pour le bouton de réinitialisation) (pour le bouton d'expédition) L'intitulé est le texte qui s'affiche dans le bouton. Ainsi, pour le bouton INTERROGER, nous écrivons : et pour le bouton EFFACER (efface les choix de lutilisateur pour revenir à létat initial) nous écrivons :


Télécharger ppt "Université de Technologie de Belfort Montbéliard par S. Lamrous Le 10/05/2006 1 Introduction au langage HTML: comment composer des pages pour un serveur."

Présentations similaires


Annonces Google