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
����������'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
����������'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...
����������'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...
����������'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)
����������'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�� ª
����������'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/!
����������'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!
����������'LG
LHU�'RQ
VH]��
����
�����
��+70
/9
Caractères utilisés
n= entité HTML• caratère code ISO8859-1 entité• guillemet " " "• et commercial & & &• signe plus petit que < <
<• plus grand que > > >• espace non sécable   _ • livre sterling £ £ £• c cédille ç ç ç• e accent grave è è è• e accent aigu é é é
n Exemple• a < b if c>d a < b if c>d a < b if c>d
����������'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é
����������'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�������
����������'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/!
����������'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\
��'/!�
����������'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)
����������'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
����������'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�!��+($'!
����������'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
����������'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�!
����������'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
����������'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
����������'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$%/(!�
����������'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$%/(!
����������'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!
����������'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!
����������'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/!
����������'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!
����������'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
����������'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>
����������'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,...
����������'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!
����������'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!���
����������'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!
����������'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">
����������'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/!
����������'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/!
����������'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, ...
����������'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)
����������'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
����������'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
����������'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'<!
����������'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 }
����������'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 }
����������'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% }
����������'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'<!
����������'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
����������'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!
����������'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</(!
����������'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>
����������'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\�����
����������'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�!
����������'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)
����������'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
����������'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, ...
����������'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, ...
����������'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��
����������'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!
����������'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
����������'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!
����������'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
����������'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/!
����������'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), ...
����������'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, ...
����������'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
����������'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�!
����������'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\�
����������'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!
����������'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!
����������'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
����������'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