69
Didier Donsez, 1996-2002, HTML 1 +70/ +\SHU7H[W0DUNXS/DQJXDJH Didier DONSEZ Université Joseph Fourier (Grenoble 1) IMA – LSR/ADELE ’LGLHU’RQVH]#LPDJIU

Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

Didier Donsez, 1996-2002, HTML 1

+70/+\SHU7H[W�0DUNXS�/DQJXDJH

Didier DONSEZ

Université Joseph Fourier (Grenoble 1)IMA – LSR/ADELE

'LGLHU�'RQVH]#LPDJ�IU

Page 2: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/2

Au sommaire

n Rappelsn Les Bases de HTMLn Formulaires HTMLn Les Evolutions d ’HTML

• Feuilles de Styles• DOM• Layers

Page 3: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/3

Notion d ’HyperTexte

n Hyperlien = Références entre documents• navigation d ’un document à l ’autre

FrancePays d ’Europeoccidental diviséeen 22 régions …

Europe1- Un de 5 continents …… union européenne …… France, Belgique, ...

2- Pers de la mythologiegrecque, Fille d ’Agénorenlevée par Zeus ...

AgénorRoi de Phénicie,Père d ’Europe …

Belgique…

Zeus...

Page 4: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/4

Notion d ’Hypermédia

n Hypertexte enrichi du Multimédia• Images, Sons, Vidéo, Animations

contenant des zones sensibles (boutons …)

FrancePays d ’Europeoccidental diviséeen 22 régions …

RégionNord Pas de Calais...

RégionRhone Alpes...

Page 5: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/5

HTML : +\SHU 7H[W�0DUNXS�/DQJXDJH

n Langage de Description de Documents HyperTextuelsn Description textuelle du Document

• Edition manuelle possible• Génération de documents par programmation (CGI, Scripting client)• Apparition d ’ outils WYSIWYG d ’ Authoring

• HotDog, Netscape Gold, FrontPage, Macromedia DreamWeaver

n Structuration hiérarchique à la SGML• éléments HTML décrit par balisage (tag) du texte

• <ELEMENT ATTR=VALUE> … </ELEMENT>• il existe une DTD publique HTML• cependant les auteurs ne la respectent pas toujours• heureusement que les navigateurs sont tolérants

n Remarque pour la GED• Les éléments HTML n ’ ont pas tous une signification sémantique. Elle est

surtout typographique !!! (voir SGML/XML)

Page 6: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/6

Exemple de Document HTML

'RFXPHQW�+70/(QWrWH

7LWUH���© 'RFXPHQW�+70/ ª&RUSV��FRXOHXU�GH�IRQG� �EODQF�

7LWUH����© 7LWUH ª,PDJH���H[WHUQH�GDQV�OH�ILFKLHU�ORJR�JLI$QFUH���© 6RPPDLUH ª�YHUV�OH�ILFKLHU�VRPPDLUH�KWP�

7H[WH���©7H[WH�/LEUH ª7LWUH���©&KDSLWUH�� ª

Page 7: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/7

Exemple de Document HTML

�+70/!�+($'!�7,7/(!'RFXPHQW�+70/��7,7/(!��+($'!�%2'<�%$&.*5281' �IRQG�MSJ�!�+� DOLJQ FHQWHU!�,0*�65& �LFRQ�ORJR�MSJ�!7LWUH�,0*�65& �LFRQ�ORJR�MSJ�!��+�!�+5!�$�+5() ���VRPPDLUH�KWP�!6RPPDLUH��$!�%5!�$�+5() ��&+$3��!&KDSLWUH����$!�%5!�$�+5() ��&+$3��!&KDSLWUH����$!�%5!�+��,' �&+$3��!&KDSLWUH����+�!

7H[WH�OLEUH��3DUDJUDSKH�������%5!7H[WH�OLEUH��3DUDJUDSKH�������%5!

�+��,' �&+$3��!&KDSLWUH����+�!7H[WH�OLEUH��3DUDJUDSKH�������%5!

��%2'<!��+70/!

Page 8: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/8

Elements HTML

n <ELEM ATTR=VAL> …Contenu ... </ELEM>• nom de l ’ élément• attribut de l ’ élément et sa valeur

• obligatoire ou optionnel• contenu de l ’ élément

• du texte• d ’ autres éléments (récursifs)

• fin de l ’ élémentn <ELEM ATTR=VAL>

• pas de contenun Exemple

• �+�!6RPPDLUH��+�!���$�+5() �LQGH[�KWP�!��$!���+5!

Page 9: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/9

Caractères utilisés

n= entité HTML• caratère code ISO8859-1 entité• guillemet &#34; &quot; "• et commercial &#38; &amp; &• signe plus petit que &#60; &lt;

<• plus grand que &#62; &gt; >• espace non sécable &#160; &nbsp; _ • livre sterling &#163; &pound; £• c cédille &#231; &ccedil; ç• e accent grave &#232; &egrave; è• e accent aigu &#233; &eacute; é

n Exemple• a < b if c>d a &#60; b if c&#62;d a &lt; b if c&gt;d

Page 10: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/10

Mise en Page du Texte

• Alignements CENTER, LEFT , RIGHT

• P paragraphe• BR passage à la ligne• HR règle horizontale

• PRE texte préformaté

Page 11: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/11

Titres �+HDGOLQHV�• <H1>Chapitre 1</H1>• <H2>Section 1.1</H2>• <H3>Sous Section 1.1.1</H3>

n Exemple�+�!7DEOH�RI�&RQWHQWV��+�!�3!�$ KUHI ��VHFWLRQ��!,QWURGXFWLRQ��$!�%5!�$ KUHI ��VHFWLRQ��!6RPH EDFNJURXQG��$!�%5!�$ KUHI ��VHFWLRQ����!2Q�D�PRUH SHUVRQDO QRWH��$!�%5!���WKH�UHVW RI WKH WDEOH�RI�FRQWHQWV������WKH GRFXPHQW�ERG\����+��LG �VHFWLRQ��!,QWURGXFWLRQ��+�!���VHFWLRQ������+��LG �VHFWLRQ��!6RPH EDFNJURXQG��+�!���VHFWLRQ������+��LG �VHFWLRQ����!2Q�D�PRUH SHUVRQDO QRWH��+�!���VHFWLRQ�������

Page 12: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/12

Les Listes

n Liste sans ordre <LI>, Liste Ordonnée <OL>

�8/!�/,!1LYHDX���2/!��/,!1LYHDX���2/!��/,�9$/8( ����!1LYHDX��/,�9$/8( ����!1LYHDX���/,!1LYHDX����2/!��/,!1LYHDX����2/!��/,!1LYHDX����8/!

Page 13: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/13

Les Listes

n Liste de Définition

�'/!�'7!'ZHHE�''!\RXQJ H[FLWDEOH SHUVRQ�ZKR�PD\ PDWXUHLQWR D��(0!1HUG��(0!�RU��(0!*HHN��(0!�'7!&UDFNHU��'7!3LUDWH�''!KDFNHU RQ WKH ,QWHUQHW�'7!1HUG�''!PDOH VR�LQWR�WKH 1HW WKDW�KH�IRUJHWVKLV�ZLIHV�ELUWKGD\

��'/!�

Page 14: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/14

Inclusion d ’Images

n Elément IMG�,0*�65& ��LFRQ�ORJR�JLI��$/7 �0\�&RPSDQ\�/RJR�!

• image incluse dans le document• Attribut optionnel

positionnement par rapport au texte» ALIGN = TOP, MIDDLE, BOTTOM.

Forcer la taille de l ’ image» width=180 height=60» pYLWH�OHV�UHIRUPDWDJHV�LQWHPSHVWLIVDX�FKDUJHPHQW�GX�GRFXPHQW

• Remarque• Type d ’ image généralement supporté

GIF, JPEG, GIF Animé, XBM• Plug-In pour les autres

signifie le chargement du PlugIn et son installation (Fat-Browser)

Page 15: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/15

DIV et SPAN

n Mécanisme général de groupement d'éléments et d'augmentation de la structure• DIV pour "block-level"• SPAN pour "inline"

�',9�LG �VHFWLRQ��!�+�!�����+�!�3!���

��',9!�',9�LG �VHFWLRQ��!

�+�!�����+�!�3!���

��',9!n Pas de sémantique, utilisable avec les styles

Page 16: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/16

Les hyperliens

• HyperLien vers un autre document(ou une autre partie du document)

• Sur un texte, le lien se présente sous la forme d ’ un texte souligné de couleur bleue

• Sur une image, un cadre de couleur bleue entoure celle-ci

n Les ancres A �$QFKRU�)RU�PRUH�LQIRUPDWLRQ�DERXW�:�&� SOHDVH�FRQVXOW�WKH��$ KUHI �KWWS���ZZZ�Z�F�RUJ��!:�& :HE VLWH��$!�

n Les liens LINK�+($'!���RWKHU�KHDG LQIRUPDWLRQ����7,7/(!&KDSWHU ���7,7/(!�/,1. UHO �SUHY� KUHI �FKDSWHU��KWPO�!�/,1. UHO �QH[W� KUHI �FKDSWHU��KWPO�!��+($'!

Page 17: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/17

URL Uniform Ressource Locator [RFC 1738]

n Désignation d ’un document sur le Web• URL absolue KWWS���ZZZ�XQLY�YDOHQFLHQQHV�IU�OLPDY�LQGH[�KWPOIWS���IWS�OLS��IU�SXEKWWS���JODUGD[������aGRQVH]�LQGH[�KWP�UHFKKWWS���JODUGD[������OLPDY�GRQVH]�GRQVH]�MSJ

• Format d ’ une URL pour HTTP, FTPSURWRFROH���GQVPDFKLQH�SRUW�UHS�ILF�WDUJHW

NB: URI (Uniform Ressource Identifier) �85/n Remarque

QHZV�FRPS�WH[W�VJPOPDLOWR�GRQVH]#XQLY�YDOHQFLHQQHV�IU

Page 18: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/18

URL Relative

Résolution >5)&����@ d ’une URL relative au document courant'RFXPHQW�&RXUDQW� �KWWS���JODUGD[������OLPDY�LQGH[�KWPO�

�OLPDY�LQGH[JE�KWPKWWS���JODUGD[������OLPDY�LQGH[JE�KWP

���SXEKWWS���JODUGD[������SXE

aGRQVH]�GRQVH]�MSJKWWS���JODUGD[������aGRQVH]�GRQVH]�MSJ

�UHFKKWWS���JODUGD[������OLPDY�LQGH[�KWPO�UHFK

GRQVH]KWWS���JODUGD[������OLPDY�GRQVH]

<BASE ...> URL de base pour la résolution�EDVH�KUHI �KWWS���KRXHEH�OLPDY�LQGH[�KWPO�!

Page 19: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/19

Les Images Sensibles (i)

n ISMAP et /cgi-bin/imagemap• une CGI récupère la position du click dans l ’ image• et retourne une page• Non standalone, Configuration compliquée, Obsolète

n USEMAP et élément <MAP>• gérer par le client• HREF url ou appel d ’ une fonction javascript

n Applet Java Imagemap• personnalisation des formes, des actions ou des effets visuels

• voir l ’ applet imagemap.class dans les démos du JDK

Page 20: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/20

Les Images Sensibles (ii)

n Déclaration d ’une MAP�PDS�QDPH �EXUHDX�!��DUHD�VKDSH �SRO\JRQ� DOW �LQGH[�GH�FHV�SDJHV�

FRRUGV ����������������������������������������������������������������KUHI �WKHKWPO�KWP�!��DUHD�VKDSH �FLUFOH� DOW �ILFKLHU�G�DLGH� FRRUGV �������������KUHI �KHOS�KWP�!��DUHD�VKDSH �UHFW� DOW �,&4� FRRUGV ���������������KUHI �MDYDVFULSW�SOD\�SLQJ�DX��!��DUHD�VKDSH �SRO\JRQ� FRRUGV �����������������������������������������KUHI �OLQNV�KWP�!��DUHD�VKDSH �UHFW� FRRUGV ������������������KUHI �PDLOWR�GRQVH]#XYKF�IU�!��DUHD�VKDSH �UHFW��FRRUGV ��������������KUHI �DXWKRU�KWP��!���PDS!

n Définition d ’une image sensible�LPJ�VUF �EDQQHU�JLI��86(0$3 �FDUWH�KWP�EXUHDX��!• Remarque : la carte peut être définie dans un autre fichier

Page 21: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/21

Les Tables

• permet la définition de tables• utilisés parfois pour positionner le texte en colonne

• les CSS sont préférables

n Exemple�7$%/(�%25'(5 ����:,'7+ �����!��75!�7'!�+HOOR�ZRUOG����7'!��7'!�&HFL�HVW�PD�SUHPLHUH SDJH�HQ�ODQJDJH�+70/���7'!�

��75!�75!��7'!�(VW�HOOH�MROLH�"���7'!��7'!�2K�RXL��������7'!���75!��7$%/(!�

Page 22: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/22

Les Tables -Exemple

�7$%/(�ERUGHU ���!�&$37,21!�(0!$�WHVW�WDEOH ZLWK�PHUJHG�FHOOV��(0!��&$37,21!�75!�7+ URZVSDQ ���!�7+ FROVSDQ ���!$YHUDJH

�7+ URZVSDQ ���!5HG�%5!H\HV�75!�7+!KHLJKW�7+!ZHLJKW�75!�7+!0DOHV�7'!����7'!������7'!����75!�7+!)HPDOHV�7'!����7'!������7'!���

��7$%/(!

�7$%/(�ERUGHU ���!�75!�7'!���7'!���7'!��75!�7' FROVSDQ ���!���7'!��75!�7'!���7'!���7'!���7$%/(!

Page 23: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/24

Les objets externes (i)

n Inclusion de « documents » externes

n Objets imbriqués : suite d ’objets alternatifs

�2%-(&7 WLWOH �7KH�(DUWK DV VHHQ�IURP�VSDFH�FODVVLG �KWWS���ZZZ�REVHUYHU�PDUV�7KH(DUWK�S\�!���� (OVH� WU\�WKH 03(* YLGHR ��!�2%-(&7�GDWD �7KH(DUWK�PSHJ��W\SH �DSSOLFDWLRQ�PSHJ�!���� (OVH� WU\�WKH *,)�LPDJH���!�2%-(&7�GDWD �7KH(DUWK�JLI��W\SH �LPDJH�JLI�!���� (OVH�UHQGHU�WKH�WH[W ��!7KH �67521*!(DUWK��67521*!�DV VHHQ�IURP�VSDFH���2%-(&7!��2%-(&7!��2%-(&7!

�2%-(&7� GDWD �7KH(DUWK�PSHJ�W\SH �DSSOLFDWLRQ�PSHJ�!9RWUH�EURZVHU�QH�YLVXDOLVH�SDV�OHV�ILOPV�03(*���2%-(&7!

Page 24: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/25

Les objets externes (ii)

n Inclusion de contrôles ActiveX et d ’applets (appliquette)

n Ancienne forme �QRQ�UHFRPPHQGpH��$33/(7�FRGH �$XGLR,WHP� ZLGWK ���� KHLJKW ����!�3$5$0 QDPH �VQG��YDOXH �+HOOR�DX_:HOFRPH�DX�!-DYD DSSOHW�WKDW�SOD\V D ZHOFRPLQJ�VRXQG���$33/(7!

�2%-(&7 FRGHW\SH �DSSOLFDWLRQ�MDYD�FODVVLG �$XGLR,WHP�ZLGWK ���� KHLJKW ����!�3$5$0 QDPH �VQG��YDOXH �+HOOR�DX_:HOFRPH�DX�!-DYD DSSOHW�WKDW�SOD\V D ZHOFRPLQJ�VRXQG���2%-(&7!

�2%-(&7�LG �FORFN��FODVVLG �FOVLG����&�)()��()����&)�$�'%�������)������GDWD �GDWD�DSSOLFDWLRQ�[�ROHREMHFW�EDVH�������EDVH���GDWD����!$ FORFN���2%-(&7!

Page 25: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/26

Les Formulaires HTML

n Entrée d ’informations dans un formulaire• (YLWH]�GH�UHQWUHU�YRWUH�QXPpUR�GH�FDUWH�GH�FUpGLW������

• Le contenu du formulaire est envoyé à un serveurpuis traité par un script du serveur

�+70/!�+($'!�7,7/(!)RUPXODLUH��7,7/(!��+($'!�%2'<!�+��DOLJQ FHQWHU!)RUPXODLUH��+�!�KU!�)250�(1&7<3( �PXOWLSDUW�IRUP�GDWD��0(7+2' �3267��$&7,21 ��VHUYOHW�IRUPSURFHVV�!/LJQH�GH�7H[WH����,1387�7<3( WH[W�9$/8( ��$�5HPSOLU��1$0( OLJ!=RQH�GH�7H[WH�����7(;7$5($�1$0( ]RQ�&2/6 ���52:6 �!$�5HPSOLU���7(;7$5($!�,1387�7<3( FKHFNER[�9$/8( �2SW���1$0( RSW!��2SWLRQ���,1387�7<3( FKHFNER[�9$/8( �2SW���1$0( RSW!��2SWLRQ���%5!�,1387�7\SH VXEPLW�9DOXH �(QYRL�!�,1387�7\SH UHVHW�9DOXH �5HLQLW�!��)250!��%2'<!��+70/!

Page 26: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/27

Les Formulaires HTML

n Assure l ’interactivité avec l ’utilisateur• Entrée d ’ information dans un formulaire

• (YLWH]�GH�UHQWUHU�YRWUH�QXPpUR�GH�FDUWH�GH�FUpGLW������• Le contenu du formulaire est envoyé à un serveur

puis traité par un programme CGI du serveur

�)250�DFWLRQ �KWWS���VRPHVLWH�FRP�SURJ�DGGXVHU� PHWKRG �SRVW�!�3!)LUVW�QDPH���,1387�W\SH �WH[W� QDPH �ILUVWQDPH�!�%5!/DVW QDPH���,1387�W\SH �WH[W� QDPH �ODVWQDPH�!�%5!HPDLO���,1387�W\SH �WH[W� QDPH �HPDLO�!�%5!�,1387�W\SH �UDGLR� QDPH �VH[��YDOXH �0DOH�!�0DOH�%5!�,1387�W\SH �UDGLR� QDPH �VH[��YDOXH �)HPDOH�! )HPDOH�%5!�,1387�W\SH �VXEPLW��YDOXH �6HQG�!��,1387�W\SH �UHVHW�!��3!

��)250!

Page 27: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/28

Les éléments d’un formulaire

n FORM• action, method (GET|POST), enctype, événements, ..

n INPUT TYPE = (TEXT | PASSWORD | CHECKBOX | RADIO| SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)

• Evénements : RQIRFXV��RQEOXU��RQVHOHFW���RQFKDQJH��DFFHSWn TEXTAREAn BUTTONn SELECT, OPTGROUP, OPTIONn FIELDSET cadre de régroupement

n ISINDEX obsolète

Page 28: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/29

Les éléments d’un formulaire

n Liste de Choix : SELECT-OPTION<SELECT NAME="os"><OPTION VALUE="none">ChooseOperating System<OPTION VALUE="solaris">Solaris -- (267K)<OPTION VALUE="win32">Windows 95/98/NT -- (389K)<OPTION VALUE="linux">Linux -- (157K)</SELECT>

n Soumission<FORM METHOD=POST ACTION="download"><P><INPUT TYPE="submit" NAME="win95" VALUE="Download"> for Windows 95/98/NT<P><INPUT TYPE="submit" NAME="linux" VALUE="Download"> for Linux<P><INPUT TYPE="submit" NAME="solaris" VALUE="Download"> for Solaris<P><INPUT TYPE="submit" NAME="documentation" VALUE="Documentation"></FORM>

Page 29: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/30

XForm : le futur des formulaires Web

• Proposition du W3C

n Amélioration des formulaires• Support pour les PDA, la TV interactive, les Voice Browser,

• Soumission XML du contenu.

• Entrées (GUI) plus riches (tableau extensible de champs, …)

• Logique de formulaire avancée (contrôle des entrées, dépendance entre champs, …)

• Persistance du contenu (sauvegarde, …)

• Plusieurs pages sur le même formulaire

• Modularité (bibliothèque de sous-formulaires, …)

• Paradigme Model-View-Controler

• Intégration à XML : XSL, XHTML, SVG,...

Page 30: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/31

XForm : Exemple (1/2)

�"[PO YHUVLRQ �����"!��'2&7<3( KWPO 38%/,&�����:�&��'7'�;+70/�;)RUPV �����(1��KWWS���ZZZ�Z��RUJ�75�[KWPO�IRUPV��'7'�[KWPO�[IRUPV��GWG�!�KWPO�[POQV �KWWS���ZZZ�Z��RUJ������[KWPO� [PO�ODQJ �HQ� ODQJ �HQ�!�KHDG!�WLWOH!3XUFKDVH�2UGHU��WLWOH!��������������[IRUP LG �SRB[IRUP��«!«��[IRUP!��KHDG!�ERG\!�K�!6KLSSLQJ ,QIRUPDWLRQ��K�!�IRUP�QDPH �SRB[IRUP�!1DPH���LQSXW QDPH �SXUFKDVH2UGHU�VKLS7R�QDPH��!�EU�!6WUHHW���LQSXW QDPH �SXUFKDVH2UGHU�VKLS7R�VWUHHW��!�EU�!&LW\���LQSXW QDPH �SXUFKDVH2UGHU�VKLS7R�FLW\��!�EU�!=LS���LQSXW QDPH �SXUFKDVH2UGHU�VKLS7R�]LS��!�EU�!�EXWWRQ�RQFOLFN �VXEPLW�SRB[IRUP��!6XEPLW��EXWWRQ!��IRUP!��ERG\!��KWPO!

Page 31: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/32

XForm : Exemple (2/2)

«�[IRUP LG �SRB[IRUP� [POQV �KWWS���ZZZ�Z��RUJ������[IRUPV��DFWLRQ �KWWS���ZZZ�P\�FRP�FJL�ELQ�UHFHLYHU�SO� PHWKRG �SRVW;0/�!�PRGHO!�JURXS QDPH �SXUFKDVH2UGHU�!��JURXS QDPH �VKLS7R�!�VWULQJ QDPH �QDPH��!�VWULQJ QDPH �VWUHHW��!�VWULQJ QDPH �FLW\��!�VWULQJ QDPH �]LS�!��PDVN!GGGGG��PDVN!��VWULQJ!��JURXS!��JURXS!��PRGHO!�LQVWDQFH!�SXUFKDVH2UGHU!�VKLS7R!�QDPH!$OLFH�6PLWK��QDPH!�VWUHHW!��� 0DSOH�6WUHHW��VWUHHW!�FLW\!0LOO 9DOOH\��FLW\!�]LS!�������]LS!��VKLS7R!��SXUFKDVH2UGHU!��LQVWDQFH!��[IRUP!���

Page 32: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/33

Les Frames HTML

• Visualisation de plusieurs documents dans différents cadres (frames) dans la page du butineur

• Les actions dans un cadre peuvent agir sur un autre cadre

n Exemple

�)5$0(6(7�&2/6 µ����� �!�)5$0(�65& �GRFJDXFKH�KWP�!�)5$0(6(7�52:6 µ�������� �!�)5$0(�65& �GRFGURLWHKDXW�KWP�!�)5$0(�65& �GRFGURLWHPLOLHX�KWP�!�)5$0(�65& �GRFGURLWHEDV�KWP�!��)5$0(6(7!��)5$0(6(7!�12)5$0(6!'RFXPHQW�QRQ�VXSSRUWp�SDU�YRWUH�QDYLJDWHXU��12)5$0(6!

Page 33: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/34

Les éléments des Frames HTML

• FRAMESET• COLS

le frameset est composé de colonnesdonne la largeur de chaque colonne

• ROWSle frameset est composé de lignesdonne la hauteur de chaque ligne

• FRAME• SRC

document à afficher dans le cadre• NAME

nomme un cadre• TARGET

désigne le cadre qui affichera le document demandéQRPGHFDGUH, _BLANK, _PARENT, _TOP, _SELF

Remarque : l ’ élément BASE peut avoir un attribut TARGET<BASEhref="http://www.mycom.com/Slides" target="dynamic">

Page 34: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/35

Les cibles dans les Frames HTML

indexframe.htm�)5$0(6(7�&2/6 ������ �!�)5$0(�65& �VRP��KWP��1$0( �IU��!�)5$0(�65& �LQWUR�KWP��1$0( �IU��!��)5$0(6(7!som1.htm�+70/!�+($'!�%$6(�7$5*(7 �IU��!��+($'!�%2'<!�$�+5() �LQWUR�KWP�!$FFXHLO��$!�%5!�$�+5() �SURGXLW�KWP��7$5*(7 �IU��!3URGXLWV��$!�%5!�$�+5() �VRPPDLUH�KWP��7$5*(7 �BWRS�!6XSSRUW�7HFKQLTXH��$!�%5!�$�+5() �KWWS���ZZZ�Z�F�RUJ�75��7$5*(7 �BVHOI�!'RFXPHQWDWLRQ�:�&��$!�%5!�$�+5() �VRP��KWP��7$5*(7 �IU��!6XLWH�6RPPDLUH��$!�%5!��%2'<!��+70/!

Page 35: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/36

L élément IFRAME (Inline Frame)

texteinclus.html�+70/!�%2'<!

�+�!7H[WH�LQFOXV��+�!��%2'<!��+70/!

doc.html�+70/!�%2'<!����,)5$0( VUF �WH[WHLQFOXV�KWPO� ZLGWK ����� KHLJKW �����VFUROOLQJ �DXWR� IUDPHERUGHU ���!>9RWUH�YLVXDOLVDWHXU QH�VXSSRUWH�SDV�OHV�IUDPHV�&HSHQGDQW��YRXV�SRXYH]�YLVLWHU�$ KUHI �WH[WHLQFOXV�KWPO�!�OH�GRFXPHQW�UHODWLI���$!@

��,)5$0(!«��%2'<!��+70/!

Page 36: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/37

Les évolutions de HTML (i)

• 4XL�QRUPDOLVH�"• Initialement IETF (HTML1.0, HTML2.0)• Maintenant le World Wide Web Consortium (HTML3.x et +)

MIT, INRIA, Univ. KEIO

• +70/���[• CSS : Cascade Style Sheet

séparation structure des données• Scripting

insertion de scripts, inclusion de script, événements «scriptables»• DOM : Document Object Model

modèle objet manipulable par Scripting

• ;0/��H;WHQGHG�0DUNXS�/DQJXDJH�• Forme allégée de SGML (v1.0 02/98)• Description sémantique des documents (DTD)

• ;+70/��H;WHQGHG�+70/�• appliquer à HTML4.01 l ’ extensibilité de XML

ajout de nouveaux éléments, ...

Page 37: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/38

Les évolutions de HTML (i)

n Multimédia• +'0/��+DQGKHOG�'HYLFH�0DUNXS�/DQJXDJH�• :0/��:LUHOHVV�0DUNXS�/DQJXDJH�

• pour l ’ informatique mobileadapté aux transmissions bas débit et aux petits écrans

• ;0/�'RFXPHQW�1DYLJDWLRQ /DQJXDJH�• 1D9LJDWLRQ 0DUNXS�/DQJXDJH �190/��• $QQRWDWLRQ�RI :HE &RQWHQW�IRU 7UDQVFRGLQJ�• 32,;��3RLQW�2I ,QWHUHVW�H;FKDQJH�/DQJXDJH�6SHFLILFDWLRQ�

n Multimédia• +70/�7,0(

• Synchronisation de plusieurs documents multimédiabasé sur SMIL (W3C)

Page 38: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/39

Les extensions de HTML (ii)

n La normalisation reste lente• Les éditeurs (Microsoft et Netscape) intégrent de nouvelles

fonctionnalités non standards dans leur butineur

• combat des propositions au W3C

• m ’ est pas encore de définition officiel au W3C

n Dynamic HTML• DHTML = HTML + CSS + Layers + Scripting

• MAIS fonctionnalités différentes ou incompatiblesentre MS Internet Explorer 4.0 et NS Navigator 4.0

Page 39: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/40

Cascading Style Sheets (CSS)

n Partage de Feuilles de Styleentre plusieurs documents HTML• charte commune sur un ensemble des documents• modularité

• pYLWH�GH�PRGLILHU�OHV�&*,�SRXU�GHV�© KLVWRLUHV ª�GH�SUpVHQWDWLRQ• GLPLQXHU�OHV�WHPSV�GH�FKDUJHPHQW

• styles alternatifs• SROLFHV�FRPSDFWHV�JUDQGHV�SROLFHV��6)�GLIIpUHQWV��;����:LQ��0DF�

n Cascadable• un style peut dépendre d ’ un autre

n Trois niveaux de CSS• CSS Level 1, CSS Positionning, CSS Level 2

n Supporté par Navigator 3.x et Internet Explorer 4.x

Page 40: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/41

L ’élément STYLE

�+($'!�67</(�W\SH �WH[W�FVV�!+��P\FODVV ^�ERUGHU�ZLGWK�����ERUGHU� VROLG�WH[W�DOLJQ��FHQWHU`3�VSHFLDO�����^�FRORU ��JUHHQ��`��67</(!�67</(�7<3( �WH[W�MDYDVFULSW�!FODVVHV�P\FODVV�3�FRORU �UHG���� �H[SULPp�HQ�-DYD6FULSW� �GRFXPHQW�WDJV�3�FRORU ��EOXH����67</(!��+($'!�%2'<!�+��FODVV �P\FODVV�!� &H�+��HVW�DIIHFWp�SDU�OH�VW\OH���+�!�+�!� &H�+��Q·HVW�DIIHFWp�SDU�DXFXQ�VW\OH���+�!�3�FODVV �P\FODVV�! &H�3�HVW�URXJH���3!�3�FODVV �VSHFLDO�!� &H�3�HVW�YHUW���3!�3!� &H�3�HVW�EOHX���3!��%2'<!

Page 41: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/42

Les Sélecteurs (i)

n Sélecteur de classe• H1.nouveau { color: #FF0000 }• <H1 class="nouveau">Tout Nouveau !</H1>• .nouveau { color: #FF0000 }

• Sélection de tous les éléments de même classe:

n Sélecteur ID• #intro { letter-spacing: 0.3em }• <H1 ID="z98y">Introduction</P>• H1#intro { letter-spacing: 0.3em }

Page 42: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/43

Les Sélecteurs (ii)

n Sélecteur contextuel• H1 EM { color: red }

• Affecte uniquement les éléments EM dans un H1

• UL LI { font-size: small }• UL UL LI { font-size: x-small }

n Mixage de sélecteurs• .reddish H1 { color: red }• #x78y CODE { background: blue }• DIV.sidenote H1 { font-size: large }• H1 B, H2 B, H1 EM, H2 EM { color: red }

Page 43: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/44

Pseudo-classes et Pseudo-éléments

• Sélection indépendante de la structure HTML

n Pseudo-classes: • A:link { color: red } /* unvisited */• A:visited { color: blue }• A:active { color: lime }

n Pseudo-éléments: • P:first-line { font-style: small-caps }• P:first-letter { font-size: 200% }

Page 44: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/45

L ’élément STYLEdépendance au média (CCS2)�+($'!���� 0HGLD���VFUHHQ� WW\� WY��SURMHFWLRQ� KDQGKHOG��SULQW��EUDLOOH� DXUDO��DOO���!�67</(�W\SH �WH[W�FVV��PHGLD �SURMHFWLRQ�!+� ^ FRORU� EOXH`��67</(!�67</(�W\SH �WH[W�FVV��PHGLD �SULQW�!+� ^ WH[W�DOLJQ� FHQWHU `��67</(!�67</(�W\SH �WH[W�FVV��PHGLD �DXUDO�!$�^ FXH�EHIRUH� XUL�EHOO�DLII�� FXH�DIWHU� XUL�GRQJ�ZDY�`��67</(!��+($'!�%2'<!�+�!�7KLV�RQH LV�FHQWHU RQ�D SULQWHU DQG EOXH RQ VFUHHQ ��+�!

��%2'<!

Page 45: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/46

Définition de styles externes et cascadés

#LPSRUW��VW\O��FVV��3�FV� ^ FRORU ��JUHHQ��ERUGHU� VROLG�UHG��`��'2&7<3(�+70/�38%/,&�����:�&��'7'�+70/������(1��KWWS���ZZZ�Z��RUJ�75�5(&�KWPO���!�+70/!

�+($'!�/,1. KUHI �VW\O��FVV� UHO �VW\OHVKHHW��W\SH �WH[W�FVV�!��+($'!�%2'<!

�+��FODVV �FV�!7LWUH�HQ�EOHX��+�!�3�FODVV �FV�!3DUDJUDSKH�HQ�YHUW��3!3DUDJUDSKH�1RUPDO�

��%2'<!��+70/!

spec1.htm

+��FV� ^ FRORU � EOXH� WH[W�DOLJQ� FHQWHU `styl2.css

styl1.css

Page 46: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/47

Positionnement avec les styles

�KWPO!�KHDG!�WLWOH!',9�SRVLWLRQQp��WLWOH!�VW\OH�7<3( �WH[W�FVV�!�EDQQLHUH ^SRVLWLRQ�DEVROXWH��WRS���S[� OHIW���S[�EDFNJURXQG�FRORU��&&��((�ZLGWK����S[��ERUGHU�ZLGWK����ERUGHU�FRORU��&&��((�`�FRORQQH��^SRVLWLRQ�DEVROXWH��WRS���S[� OHIW���S[�EDFNJURXQG�FRORU�WHDO�ZLGWK����S[��ERUGHU�ZLGWK��S[��ERUGHU�FRORU�ZKLWH�`��VW\OH!��KHDG!�ERG\�%*&2/25 �ZKLWH�!�GLY ,' �EDQQLHUH�!�K�!/H�-RXUQDO�GX�6RLU��K�!�LPJ 65& �ORJR�MSJ� DOLJQ �ULJKW�!��GLY!�GLY 67</( ��SRVLWLRQ�DEVROXWH��WRS���S[� OHIW���S[�EDFNJURXQG�FRORU�WHDO� ZLGWK����S[�ERUGHU�ZLGWK��S[��ERUGHU�FRORU�ZKLWH��EDFNJURXQG�FRORU������))�!�K�!&RORQQH�����K�!�S!7KLV LV D EOXH EORFN�RI�+70/�FRQWHQW���S!��GLY!��ERG\!��KWPO!

Page 47: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/48

Utilisation des polices avec les styles

�67</(�7<3( �WH[W�FVV�!�+��^�IRQW�IDPLO\��3RVWHU�%RGRQL��$ULDO� VHULI��IRQW�VL]H����SW� FRORU���))�&����`���67</(!��67</(�7<3( �WH[W�MDYDVFULSW�!ZLWK �WDJV�+���^�LI��ZLQGRZ�LQQHU:LGWK �������^IRQW)DPLO\ ��3RVWHU�%RGRQL��$ULDO� VHULI�IRQW6L]H ����SW��` HOVH ^IRQW)DPLO\ ��%DEXVKND��$ULDO� VHULI�IRQW6L]H ����SW��F̀RORU ���))�&����`���67</(!

Page 48: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/49

Les Polices Chargeables�'RZQORDGDEOH�)RQWV�n Chargement de polices spéciales non présentes

dans le navigateur• le fichier .pfr regroupe les descriptions de plusieurs polices

chargeables

<HTML><HEAD>�/,1.�5(/ �IRQWGHI��65& �KWWS���ZZZ�WUXHGRF�FRP�SIUV�6QRZ&DS�SIU�!<STYLE TYPE="text/css">@font-face { font-family: "Poster Bodoni"; src: url(http://www.truedoc.com/pfrs/Amelia.pfr); }H1 { IRQW�IDPLO\���$PHOLD %7�� size: 12; align: center; }</STYLE> </HEAD><BODY><H1>L ’hiver est la</H1>et il <)217�)$&( �6QRZ&DS %7">neige </FONT>!<BODY><HTML>

Page 49: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/50

Les éléments META

n Description du document• Faciliter l’ indexation• Faciliter la sélection des documents

n Metadata de HEAD décrivant le document• �0(7$�1$0( �FOH��&217(17 �YDOHXU�!�PHWD 1$0( �NH\ZRUGV�

&217(17 �RFOF�RQOLQH�FRPSXWHU�OLEUDU\�FHQWHU�KRPH�PHQX�WH[W�RQO\ ����PHWD 1$0( �'&�VXEMHFW�NH\ZRUG�

&217(17 �RFOF�RQOLQH�FRPSXWHU�OLEUDU\�FHQWHU�KRPH�PHQX�WH[W�RQO\�����

Page 50: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/51

Les éléments META

n Dublin Core, http://purl.org/DC• 15 propriétés de base + des extensions

�7,7/(!'XEOLQ &RUH�0HWDGDWD�(OHPHQW 6HW� 5HVRXUFH 3DJH��7,7/(!�0(7$ QDPH ��'&�VXEMHFW��FRQWHQW� ��GXEOLQ�FRUH�PHWDGDWD�HOHPHQW VHW�!�0(7$ QDPH ��'&�VXEMHFW��FRQWHQW� ��QHWZRUNHG�REMHFW GHVFULSWLRQ�!�0(7$ QDPH ��'&�SXEOLVKHU��FRQWHQW� ��2&/& 2QOLQH &RPSXWHU /LEUDU\�&HQWHU� ,QF��!�0(7$ QDPH ��'&�DXWKRU��W\SH� ��QDPH� VFKHPH �$$&5���FRQWHQW� ��:HLEHO��6WXDUW�/���!�0(7$ QDPH ��'&�DXWKRU��W\SH� ��HPDLO��FRQWHQW� �ZHLEHO#RFOF�RUJ�!�0(7$ QDPH ��'&�DXWKRU��W\SH� ��QDPH� VFKHPH �$$&5���FRQWHQW� ��0LOOHU� (ULF -��!�0(7$ QDPH ��'&�DXWKRU��W\SH� ��HPDLO��FRQWHQW� �HPLOOHU#RFOF�RUJ�!�0(7$ QDPH ��'&�WLWOH��FRQWHQW� ��'XEOLQ &RUH�(OHPHQW 6HW 5HIHUHQFH 3DJH�!�0(7$ QDPH ��'&�GDWH��W\SH� ��FUHDWLRQ� VFKHPH �,62��FRQWHQW� �������������!�0(7$ QDPH ��'&�IRUP� VFKHPH ��,07��FRQWHQW �WH[W�KWPO�!�0(7$ QDPH ��'&�ODQJXDJH� VFKHPH ��,62������FRQWHQW �HQ�!�0(7$ QDPH ��'&�LGHQWLILHU� VFKHPH ��85/��FRQWHQW� �KWWS���SXUO�RFOF�RUJ�PHWDGDWD�GXEOLQBFRUH�!

Page 51: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/52

Document Object Model (DOM)

n Description d ’un document XML (en donc HTML)sous la forme d ’un objet composite

• chaque élément (textes, graphiques, headlines, styles) est un sous objet lui même composite.

• un script (9%6FULSW��-DYD6FULSW��(&0$6FULSW … ) embarqué dans le document peut manipuler cet objet composite.

n API standard d'accès à un document et son style• le document est vu comme une arbre• chaque objet est un nœud de l ’ arbre et possède un interface

définition avec l ’ IDL CORBA2.2« binding » avec Java et ECMAScript (JavaScript, JScript)

Page 52: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/53

Document Object Model (DOM)

n DOM Level 1• Accès et manipulation de la structure d'un document XML ou HTML

• http://www.w3.org/TR/REC-DOM-Level-1

n DOM Level 2• CSS, Range, Filtres et Iterateurs, Evénements utilisateur et de

transformation, Namespaces • http://www.w3.org/TR/WD-DOM-Level-2

Page 53: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/54

Les éléments positionnables de DHTML

n Principe• Un document HTML contient plusieurs éléments positionnables ou

masquables• Propriétés

• transparente / opaque, clipping (zone affichée de la layer)• apparente / cachée• positionnement 3D modifiable

par rapport au document (x, y) et aux autres layers (z)

n Eléments• DIV (NS,MS) et LAYER (NS)

n Intérêtpar le scripting, on peut• remplacer les animations Shockwave (Flash) ou les GIF Animés,• émuler du multi-fenêtrage customisable avec iconication, ascenseurs, ...

Page 54: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/55

Les Layers de DHTML

• Un document HTML contient plusieurs « layers »• Les layers se superposent en couche dans le document

• transparente / opaque

• clipping (zone affichée de la layer)

• apparente / cachée

• positionnement 3D modifiablepar rapport au document (x, y) et aux autres layers (z)

n Intérêtpar le scripting, on peut

• remplacer les animations Shockwave (Flash) ou les GIF Animés,

• émuler du multi-fenêtrage customisable avec iconication, ascenseurs, ...

Page 55: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/56

Exemple de Layers

�KWPO!�OD\HU QDPH SLF�]�LQGH[ � OHIW ����WRS ���!�LPJ�VUF �VPLOH�JLI� ZLGWK ��� KHLJKW ���!��OD\HU!�OD\HU QDPH W[W ]�LQGH[ � OHIW ����WRS ���!�IRQW�VL]H ��!��L!�%RQMRXU�����L!���IRQW!��OD\HU!��KWPO!�KWPO!�OD\HU QDPH SLF�]�LQGH[ ��OHIW ����WRS ���!�LPJ�VUF �LPJ�JLI� ZLGWK ��� KHLJKW ���!��OD\HU!�OD\HU�QDPH W[W ]�LQGH[ � OHIW ����WRS ���!�IRQW�VL]H ��!��L! /D\HUV�'HPR ��L!���IRQW!��OD\HU!��KWPO!

%RQMRXU��

%RQMRXU���KWPO!�OD\HU QDPH SLF�]�LQGH[ ��OHIW ����WRS ��� YLVLELOLW\ KLGH!�LPJ�VUF �LPJ�JLI� ZLGWK ��� KHLJKW ���!��OD\HU!�OD\HU�QDPH W[W ]�LQGH[ � OHIW ����WRS ���!�IRQW�VL]H ��!��L! /D\HUV�'HPR ��L!���IRQW!��OD\HU!��KWPO!

%RQMRXU��

Page 56: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/57

Le Clipping

n Définition• permet de masquer les parties

de la layer en dehors du clip

n Usage�LOD\HU�OHIW ��WRS ��FOLS ���������������!�LPJ�VUF �GDYLQFL�MSJ� ZLGWK ��� KHLJKW ���!��LOD\HU!�LOD\HU�QDPH �LPJ/D\HU��FOLS ���������!�LPJ�QDPH GDYLQFL�VUF �GDYLQFL�MSJ ª

ZLGWK ��� KHLJKW ���!��LOD\HU!

Page 57: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/58

L ’imbrication de Layers

• Une layer peut contenir plusieurs layers

• Ces layers imbriquées (nested) se positionnent par rapport à la layer englobante

• position positive ou négative�LOD\HU�QDPH SDUHQW/D\HU�OHIW ����WRS �!�OD\HU QDPH OD\HU��]�LQGH[ �� OHIW ��WRS ���!�3UHPLqUH�/D\HU���OD\HU!�OD\HU QDPH OD\HU��]�LQGH[ �� OHIW ����WRS ���!�6HFRQGH�/D\HU��OD\HU!�EU!�EU!/D\HU�SDUHQWH��LOD\HU!

n Applications• Déplacement groupé

• Masquage partielle dynamique

Page 58: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/59

Le Scripting Client (i)

n But : Moins d’intervention du Serveur WWW• Génération dynamique de documents HTML

par le butineur• Contrôle des formulaires HTML par le butineur• Contrôle des ressources du butineur

n Scripts embarqués dans un document HTML• Mécanisme ouvert

�0(7$�KWWS�HTXLY �&RQWHQW�6FULSW�7\SH��FRQWHQW �WH[W�WFO�!�6&5,37!�«���6&5,37!�6&5,37�/$1*8$*( �-DYD6FULSW�!�«���6&5,37!�6&5,37�/$1*8$*( �-DYD6FULSW��65& �VFUSW�MV�!�«���6&5,37!

Page 59: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/60

Le Scripting Client (ii)

n Fonctionnalités• Représentation objet des éléments du document

layer, form, input, img, …

• Manipulation des caractéristiques de ces éléments• REMARQUE : précurseur à DOM

• Programmation événementielle• rendre le document « dynamique »

n Langages• JavaScript (NS), JScript (MS), ECMAScript

• rien à voir avec Java

• VBScript (MS)• syntaxe Visual Basic, dialogue avec les contrôles ActiveX

Page 60: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/61

Exemple JavaScript

<HTML><HEAD><TITLE>Vérification de l’age</TITLE><SCRIPT LANGAGE="JavaScript">IXQFWLRQ�9HULI$JH�IRUP��^

if ((form.sonAge.value < 0) || (form.sonAge.value > 120)) {alert("Vous ne pouvez pas avoir "+ form.sonAge.value+" ans !");form.sonAge.value = 0;

}}</SCRIPT></HEAD><BODY><FORM NAME="formulaire">Votre Nom<INPUT TYPE=TEXT NAME="sonNom"><BR>9RWUH�ÇJH�,1387�7<3( 7(;7�1$0( �VRQ$JH�RQ&KDQJH �9HULI$JH�IRUPXODLUH��!��3!<INPUT TYPE=SUBMIT VALUE="Soumettre"><INPUT TYPE=RESET>��)250!��%2'<!��+70/!

Page 61: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/62

Le Scripting Serveur

n Utilisation• Traitement des formulaires par le serveur• Génération de pages HTML à la volée

• requête sur des bases de données, …

n Les Techniques• Script générant du HTML

• CGI : Common Gateway Interface, Fast-CGI• NSAPI, ISAPI, Servlets

• Script inclus dans des pages HTML• SSI : Server Side Include• SSS : Server Side Script

Active Server Pages (MicroSoft), EJB (NS), JSP (Sun), ...

Page 62: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/63

Les Logiciels Auteurs

n Création de pages HTMLn Principales fonctionnalités

• mode WYSIWYG, partiellement WYSIWYG �SUHYLHZ�• ensemble ou partie des fonctionnalités HTML 3.2, 4.0, XML

• CSS, Frame, Form, DOM, DTD, ...

• scripting client et layer DHTML• multi-cible �'+70/�SRXU�1DYLJDWRU��'+70/�SRXU�,(�

• scripting serveur• multi-cible �$63��-63��/LYHZLUH��«�

• bibliothèque de composants• fenêtrage iconifiable, scrollbar, …• sous la forme DHTML, d ’ applets, de contrôle ActiveX, ...

• outils annexes• retouche image, création de map, ...

Page 63: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/64

Les Logiciels Auteurs - Produit

n NS Communicatorn Microsoft FrontPagen Macromedia Dreamweavern Astound Dynamiten mBed Interactorn ExperTelligence

n WebberActiven NetObjects Fusionn GoLive CyberStudion Allaire HomeSiten SoftQuad HotMetaln Pictorious iNet Solon Adobe PageMill

Page 64: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/65

XHTML

n Appliquer l ’extensibilité de XML à HTML4.01• ajout de nouveaux éléments, ...

n3 étapes��'2&7<3( KWPO��38%/,&

����:�&��'7'�;+70/�����6WULFW��(1���'7'�[KWPO��VWULFW�GWG�!��'2&7<3( KWPO���38%/,&

����:�&��'7'�;+70/���� 7UDQVLWLRQDO��(1���'7'�[KWPO��WUDQVLWLRQDO�GWG�!��'2&7<3( KWPO���38%/,&

����:�&��'7'�;+70/���� )UDPHVHW��(1���'7'�[KWPO��IUDPHVHW�GWG�!

Page 65: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/66

XHTMLLes différences avec HTML4n Un document doit correct et valider une des trois DTDs

• pas de chevauchement�S!OHV�pOpPHQWV�HP!V ·HPERLWHQW��HP!��S!DX�OLHX�GH�S!OHV�EDOLVHV�HP!VH�FKHYDXFKHQW�SDV��S!��HP!

• éléments vides�EU�!�KU�!�DX�OLHX�GH��EU!�KU!�TXL�HVW�,1&255(&7

• valeurs attributs�WDE�FRO ���!�DX�OLHX�GH��WDE�FRO �!�TXL�HVW�,1&255(&7

n Style et Script�VFULSW!��>&'$7$>��� XQHVFDSHG VFULSW�FRQWHQW����@@!��VFULSW!

n Un convertisseur HTML vers XHTMLKWWS���ZZZ�Z��RUJ�3HRSOH�5DJJHWW�WLG\�

Page 66: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/67

XHTML - Exemple

n Document XML utilisant des éléments du domaine de noms XHTML�"[PO YHUVLRQ ����� HQFRGLQJ �87)���"!

���� LQLWLDOO\� WKH�GHIDXOW�QDPHVSDFH�LV �ERRNV����!�ERRN [POQV XUQ�ORF�JRY�ERRNV[POQV�LVEQ XUQ�,6%1�������������� [PO�ODQJ �HQ� ODQJ �HQ�!�WLWOH!&KHDSHU E\ WKH�'R]HQ��WLWOH!�LVEQ�QXPEHU!������������LVEQ�QXPEHU!�QRWHV!���� PDNH +70/ WKH�GHIDXOW�QDPHVSDFH IRU�D K\SHUWH[W�FRPPHQWDU\ ��!�S [POQV KWWS���ZZZ�Z��RUJ������[KWPO!7KLV LV�DOVR�DYDLODEOH��D KUHI �KWWS���ZZZ�Z��RUJ��!RQOLQH��D!�

��S!��QRWHV!��ERRN!

Page 67: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/68

XHTML - Exemple

n Document XHTML utilisant la recommandation MathML�KWPO�[POQV �KWWS���ZZZ�Z��RUJ������[KWPO� [PO�ODQJ �HQ� ODQJ �HQ�!�KHDG!�WLWOH!$�0DWK�([DPSOH��WLWOH!��KHDG!�ERG\!

�S!7KH�IROORZLQJ�LV�0DWK0/�PDUNXS���S!�PDWK [POQV �KWWS���ZZZ�Z��RUJ������0DWK�0DWK0/�!�DSSO\!��ORJ�!�ORJEDVH!�FQ!�����FQ!��ORJEDVH!�FL!�[���FL!��DSSO\!��PDWK!

��ERG\!��KWPO!

Page 68: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/69

SMIL6\QFKURQL]HG�0XOWLPHGLD�,QWHJUDWLRQ�/DQJXDJH

n Présentation multimédia• synchronisant du texte, des images, des flux vidéo ou audio

ou n ’ importe quel autre média.• Syntaxe basé sur une DTD (XML) SMIL

http://www.w3.org/TR/REC-smil/SMIL10.dtd

• Visualisateurs (Players)• CWI Grins, Helio Barbizon, HPAS, Productivity Works L p player,

RealNetworks G2

• Outils auteur• Allaire HomeSite, CWI Grins, HotSausage SMIL Composer

SuperTool, LP Studio, TAG Editor 2.0 - G2 release by Digital Renaissance, VEON authoring tool, RealSlideshow

Page 69: Didier DONSEZ - LIG Membreslig-membres.imag.fr/donsez/cours/html.pdf · ˇ ˝ ’ L G L H U ’ R Q V H] ˝ ˝ ˇ + 7 0 / 3 Notion d ’HyperTexte nHyperlien = Références entre

����������'LG

LHU�'RQ

VH]��

����

�����

��+70

/72

Bibliographie

n Beaucoup de Guides, Tutoriels, Manuels• http://search.yahoo.fr/search/fr?p=HTML

n Des livres• Attention, ca change très vite !

• Jeff Rouyer , Dynamic HTML Web Magic, Ed New Riders, ISBN: 1568304218, 07/98, pp 296 +CD-ROM

http://www.htmlguru.com/magicUn livre pour les graphistes avec de jolis exemples