HTML

HyperText Markup Language

Didier DONSEZ
Université de Valenciennes Institut des Sciences et Techniques de Valenciennes donsez@univ-valenciennes.fr

1

Au sommaire
n n n n

Rappels Les Bases de HTML Formulaires HTML Les Evolutions d ’ HTML
• Feuilles de Styles • DOM • Layers

Didier Donsez, 1998,2000

HTML, 2

Notion d ’ HyperTexte
n

Hyperlien = Références entre documents
• navigation d ’ document à l ’ un autre Europe France
Pays d ’ Europe occidental divisée en 22 régions … 1- Un de 5 continents … … union européenne … … France, Belgique, ... 2- Pers de la mythologie grecque, Fille d ’ Agénor enlevée par Zeus ...

Belgique

Didier Donsez, 1998,2000

Zeus
...

Agénor
Roi de Phénicie, Père d ’ Europe …
HTML, 3

Notion d ’ Hypermédia
n

Hypertexte enrichi du Multimédia
• Images, Sons, Vidéo, Animations contenant des zones sensibles (boutons … )

France
Pays d ’ Europe occidental divisée en 22 régions …

Région Nord Pas de Calais
...

Didier Donsez, 1998,2000

Région Rhone Alpes
...
HTML, 4

HTML : Hyper Text Markup Language
n n

Langage de Description de Documents HyperTextuels 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

Didier Donsez, 1998,2000

n

Remarque pour la GED
• Les éléments HTML n ’ pas tous une signification sémantique. Elle est ont surtout typographique !!! (voir SGML/XML) HTML, 5

Exemple de Document HTML
Document HTML Entête Titre : « Document HTML » Corps (couleur de fond = blanc) Titre1 : « Titre » Image : externe dans le fichier logo.gif Ancre : « Sommaire » vers le fichier sommaire.htm
Didier Donsez, 1998,2000

Titre : «Chapitre 1 » Texte : «Texte Libre »

HTML, 6

Exemple de Document HTML
<HTML> <HEAD> <TITLE>Document HTML</TITLE> </HEAD> <BODY BACKGROUND="fond.gif" bgproperties="fixed"> <H1 align=center>Titre</H1> <HR> <IMG SRC="/icon/logo.gif><BR> <A HREF="./sommaire.htm"> Sommaire </A><BR> <H2>Chapitre 1</H2> Texte libre (Paragraphe 1.1) <BR> Texte libre (Paragraphe 1.2) <BR> <H2>Chapitre 2</H2> Texte libre (Paragraphe 2.1) <BR> </BODY> </HTML>
HTML, 7

Didier Donsez, 1998,2000

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)
n

• fin de l ’ élément <ELEM ATTR=VAL>
• pas de contenu

n
Didier Donsez, 1998,2000

Exemple
• <H1>Sommaire</H1>, <A HREF="index.htm"></A>, <HR>

HTML, 8

Caractères utilisés
n

= entité HTML
• caratère code ISO8859-1
• • • • • • • • • 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 &#34; &#38; &#60; &#62; &#160; &#163; &#231; &#232; &#233;

entité
&quot; &amp; &lt; &gt; &nbsp; &pound; &ccedil; &egrave; &eacute; " & < > _ £ ç è é

Didier Donsez, 1998,2000

n

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

HTML, 9

Mise en Page du Texte
• Alignements •P • BR • HR • PRE CENTER, LEFT , RIGHT

paragraphe passage à la ligne règle horizontale texte préformaté

Didier Donsez, 1998,2000

HTML, 10

Titres (Headlines)
• <H1>Chapitre 1</H1> • <H2>Section 1.1</H2> • <H3>Sous Section 1.1.1</H3>
n

Exemple
<H1>Table of Contents</H1> <P><A href="#section1">Introduction</A><BR> <A href="#section2">Some background</A><BR> <A href="#section2.1">On a more personal note</A><BR> ...the rest of the table of contents... ...the document body... <H2 id="section1">Introduction</H2> ...section 1... <H2 id="section2">Some background</H2> ...section 2... <H3 id="section2.1">On a more personal note</H3> ...section 2.1...

Didier Donsez, 1998,2000

HTML, 11

Les Listes
n

Liste sans ordre, Liste Ordonnée, Liste de Définition • Exemple
<DL> <DT>Dweeb <DD>young excitable person who may mature into a <EM>Nerd</EM> or <EM>Geek</EM> <DT>Cracker <DT>Pirate <DD>hacker on the Internet <DT>Nerd <DD>male so into the Net that he forgets his wife's birthday </DL>

Didier Donsez, 1998,2000

<UL> <LI> ()Niveau 1 <OL> <LI> 1) Niveau 2 <OL> <LI VALUE=10>10) Niveau3 <LI VALUE=20>20) Niveau3 <LI> 21) Niveau3 </OL> <LI> 2) Niveau 2 </OL> <LI> () Niveau 1 </UL>

HTML, 12

Inclusion d ’ Images
n

Elément IMG
<IMG SRC="/icon/logo.gif" ALT="My Company Logo">

• 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 » évite les reformatages intempestifs au chargement du document

• Remarque
Didier Donsez, 1998,2000

• 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)
HTML, 13

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"
<DIV id="section1"> <H1>...</H1> <P>... </DIV> <DIV id="section2"> <H1>...</H1> <P>... </DIV>

Didier Donsez, 1998,2000

n

Pas de sémantique, utilisable avec les styles

HTML, 14

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 ’ texte souligné de un couleur bleue • Sur une image, un cadre de couleur bleue entoure celle-ci n

Les ancres A (Anchor)
For more information about W3C, please consult the <A href="http://www.w3c.org/">W3C Web site</A>.

n
Didier Donsez, 1998,2000

Les liens LINK
<HEAD> ...other head information... <TITLE>Chapter 5</TITLE> <LINK rel="prev" href="chapter4.html"> <LINK rel="next" href="chapter6.html"> </HEAD>

HTML, 15

URL Uniform Ressource Locator [RFC 1738]
n

Désignation d ’ document sur le Web un
• URL absolue
http://www.univ-valenciennes.fr/limav/index.html ftp://ftp.lip6.fr/pub http://glardax:8000/~donsez/index.htm#rech http://glardax:8000/limav/donsez/donsez.jpg

• Format d ’ URL pour HTTP, FTP une
protocole://dnsmachine:port/rep/fic#target

NB: URI (Uniform Ressource Identifier) = URL
Didier Donsez, 1998,2000

n

Remarque
news:comp.text.sgml mailto:donsez@univ-valenciennes.fr
HTML, 16

URL Relative
Résolution [RFC1808] d ’ une URL relative au document courant
Document Courant = http://glardax:8000/limav/index.html /limav/indexgb.htm http://glardax:8000/limav/indexgb.htm ../pub http://glardax:8000/pub ~donsez/donsez.jpg http://glardax:8000/~donsez/donsez.jpg #rech http://glardax:8000/limav/index.html#rech donsez http://glardax:8000/limav/donsez

Didier Donsez, 1998,2000

<BASE ...> URL de base pour la résolution
<base href="http://houebe/limav/index.html">
HTML, 17

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 ’ fonction javascript une

Didier Donsez, 1998,2000

n

Applet Java Imagemap
• personnalisation des formes, des actions ou des effets visuels • voir l ’ applet imagemap.class dans les démos du JDK
HTML, 18

Les Images Sensibles (ii)
n

Déclaration d ’ une MAP
<map name="bureau"> <area shape="polygon" alt="index de ces pages" coords="114,152,534,150,607,335,100,295,134,296,133,216,94,216,111,151" href="thehtml.htm"> <area shape="circle" alt="fichier d' aide" coords="317,111,33" href="help.htm"> <area shape="rect" alt="ICQ" coords="15,53,87,182" href= "javascript:play('ping.au')"> <area shape="polygon" coords="99,16,227,2,235,18,241,96,112,113,98,33" href="links.htm"> <area shape="rect" coords="103,219,130,291" href="mailto:donsez@uvhc.fr"> <area shape="rect" coords="0,0,639,359" href="author.htm" > </map>

Didier Donsez, 1998,2000

n

Définition d ’ une image sensible
<img src="banner.gif" USEMAP="carte.htm#bureau" >

• Remarque : la carte peut être définie dans un autre fichier

HTML, 19

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
<TABLE BORDER="2" WIDTH="50%"> <TR> <TD> Hello world. </TD> <TD> Ceci est ma premiere page en langage HTML.</TD> </TR> <TR> <TD> Est elle jolie ? </TD> <TD> Oh oui !!!! </TD> </TR> </TABLE>
HTML, 20

Didier Donsez, 1998,2000

Les Tables -Exemple
<TABLE border="1"> <TR><TD>1 <TD>2 <TD>3 <TR><TD colspan="2">4 <TD>6 <TR><TD>7 <TD>8 <TD>9 </TABLE> <TABLE border="1"> <CAPTION> <EM>A test table with merged cells</EM> </CAPTION> <TR><TH rowspan="2"><TH colspan="2">Average <TH rowspan="2">Red<BR>eyes <TR><TH>height<TH>weight <TR><TH>Males<TD>1.9<TD>0.003<TD>40% <TR><TH>Females<TD>1.7<TD>0.002<TD>43% </TABLE>
HTML, 21

Didier Donsez, 1998,2000

L’ espacement dans une table

Didier Donsez, 1998,2000

HTML, 22

Les objets externes (i)
n

Inclusion de « documents » externes
data="TheEarth.mpeg" type="application/mpeg"> Votre browser ne visualise pas les films MPEG. </OBJECT> <OBJECT

n

Objets imbriqués : suite d ’ objets alternatifs

<OBJECT title="The Earth as seen from space" classid="http://www.observer.mars/TheEarth.py"> <!-- Else, try the MPEG video --> <OBJECT data="TheEarth.mpeg" type="application/mpeg"> <!-- Else, try the GIF image --> <OBJECT data="TheEarth.gif" type="image/gif"> <!-- Else render the text --> The <STRONG>Earth</STRONG> as seen from space. </OBJECT> </OBJECT> </OBJECT>

Didier Donsez, 1998,2000

HTML, 23

Les objets externes (ii)
n

Inclusion de contrôles ActiveX et d ’ applets (appliquette)
<OBJECT id="clock1" classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502" data="data:application/x-oleobject;base64, ...base64 data..."> A clock. </OBJECT> <OBJECT codetype="application/java" classid="AudioItem" width="15" height="15"> <PARAM name="snd" value="Hello.au|Welcome.au"> Java applet that plays a welcoming sound. </OBJECT>

Didier Donsez, 1998,2000

n

Ancienne forme (non recommendée)
<APPLET code="AudioItem" width="15" height="15"> <PARAM name="snd" value="Hello.au|Welcome.au"> Java applet that plays a welcoming sound. </APPLET>
HTML, 24

Les Formulaires HTML
n

Entrée d ’ informations dans un formulaire
• Evitez de rentrer votre numéro de carte de crédit !!!!!

• Le contenu du formulaire est envoyé à un serveur puis traité par un script du serveur
<HTML><HEAD><TITLE>Formulaire</TITLE></HEAD> <BODY><H1 align=center>Formulaire</H1><hr> <FORM ENCTYPE="multipart/form-data" METHOD="POST" ACTION="/servlet/formprocess"> Ligne de Texte : <INPUT TYPE=text VALUE=" A Remplir" NAME=lig> Zone de Texte : <TEXTAREA NAME=zon COLS=40 ROWS=5> A Remplir </TEXTAREA> <INPUT TYPE=checkbox VALUE="Opt1" NAME=opt> Option 1 <INPUT TYPE=checkbox VALUE="Opt2" NAME=opt> Option 2<BR> <INPUT Type=submit Value="Envoi"> <INPUT Type=reset Value="Reinit"> </FORM> </BODY></HTML>
HTML, 25

Didier Donsez, 1998,2000

Les Formulaires HTML
n

Assure l ’ interactivité avec l ’ utilisateur
• Entrée d ’ information dans un formulaire
• Evitez de rentrer votre numéro de carte de crédit !!!!!

• Le contenu du formulaire est envoyé à un serveur puis traité par un programme CGI du serveur
<FORM action="http://somesite.com/prog/adduser" method="post"> <P> First name: <INPUT type="text" name="firstname"><BR> Last name: <INPUT type="text" name="lastname"><BR> email: <INPUT type="text" name="email"><BR> <INPUT type="radio" name="sex" value="Male"> Male<BR> <INPUT type="radio" name="sex" value="Female"> Female<BR> <INPUT type="submit" value="Send"> <INPUT type="reset"> </P> </FORM>

Didier Donsez, 1998,2000

HTML, 26

Les éléments d’ formulaire un
n

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

n

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

• Evénements : onfocus, onblur, onselect , onchange, accept
n n n
Didier Donsez, 1998,2000

n n

TEXTAREA BUTTON SELECT, OPTGROUP, OPTION FIELDSET cadre de régroupement ISINDEX obsolète
HTML, 27

Les éléments d’ formulaire un
n

Liste de Choix : SELECT-OPTION
<SELECT NAME="os"> <OPTION VALUE="none"> Choose Operating 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>
HTML, 28

Didier Donsez, 1998,2000

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,...
HTML, 29

Didier Donsez, 1998,2000

XForm : Exemple (1/2)
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML-XForms 1.0//EN" "http://www.w3.org/TR/xhtml-forms1/DTD/xhtml-xforms1.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title>Purchase Order</title> <xform id="po_xform" … > … </xform> </head> <body> <h1>Shipping Information</h1> <form name="po_xform"> Name: <input name="purchaseOrder.shipTo.name"/><br/> Street: <input name="purchaseOrder.shipTo.street"/><br/> City: <input name="purchaseOrder.shipTo.city"/><br/> Zip: <input name="purchaseOrder.shipTo.zip"/><br/> <button onclick="submit('po_xform')">Submit</button> </form> </body></html>

Didier Donsez, 1998,2000

HTML, 30

XForm : Exemple (2/2)
… <xform id="po_xform" xmlns="http://www.w3.org/2000/xforms" action="http://www.my.com/cgi-bin/receiver.pl" method="postXML"> <model> <group name="purchaseOrder"> <group name="shipTo"> <string name="name"/><string name="street"/><string name="city"/> <string name="zip"> <mask>ddddd</mask></string> </group></group> </model> <instance> <purchaseOrder> <shipTo> <name>Alice Smith</name><street>123 Maple Street</street><city>Mill Valley</city> <zip>90952</zip> </shipTo> </purchaseOrder> </instance> </xform> ... HTML, 31

Didier Donsez, 1998,2000

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
<FRAMESET COLS=”100, *"> <FRAME SRC="docgauche.htm"> <FRAMESET ROWS=”25%,50%,*"> <FRAME SRC="docdroitehaut.htm"> <FRAME SRC="docdroitemilieu.htm"> <FRAME SRC="docdroitebas.htm"> </FRAMESET> </FRAMESET> <NOFRAMES> Document non supporté par votre navigateur </NOFRAMES>
HTML, 32

Didier Donsez, 1998,2000

Les éléments des Frames HTML
• FRAMESET
• COLS
le frameset est composé de colonnes donne la largeur de chaque colonne

• ROWS
le frameset est composé de lignes donne la hauteur de chaque ligne

• FRAME
• SRC
document à afficher dans le cadre

• NAME
nomme un cadre

• TARGET
Didier Donsez, 1998,2000

désigne le cadre qui affichera le document demandé nomdecadre, _BLANK, _PARENT, _TOP, _SELF Remarque : l ’ élément BASE peut avoir un attribut TARGET

<BASE href="http://www.mycom.com/Slides" target="dynamic">
HTML, 33

Les cibles dans les Frames HTML
<FRAMESET COLS="100, *"> <FRAME SRC="som1.htm" NAME="fr1"> <FRAME SRC="intro.htm" NAME="fr2"> </FRAMESET> <HTML><HEAD><BASE TARGET="fr2"></HEAD> <BODY> <A HREF="intro.htm"> Accueil</A><BR> <A HREF="produit.htm" TARGET="fr2"> Produits</A><BR> <A HREF="sommaire.htm" TARGET="_top"> Support Technique</A><BR> <A HREF="http://www.w3c.org/TR" TARGET="_self"> Documentation W3C</A><BR> <A HREF="som2.htm" TARGET="fr1"> Suite Sommaire</A><BR> </BODY></HTML>

indexframe.htm

som1.htm

Didier Donsez, 1998,2000

HTML, 34

L élément IFRAME (Inline Frame)
texteinclus.html
<HTML><BODY> <H1>Texte inclus</H1> </BODY></HTML>

Didier Donsez, 1998,2000

<HTML><BODY> ... <IFRAME src="texteinclus.html" width="400" height="500" scrolling="auto" frameborder="1"> [Votre visualisateur ne supporte pas les frames. Cependant, vous pouvez visiter <A href= "texteinclus.html"> le document relatif.</A>] </IFRAME> … </BODY></HTML>
HTML, 35

doc.html

Les évolutions de HTML (i)
• Qui normalise ?
• Initialement IETF (HTML1.0, HTML2.0) • Maintenant le World Wide Web Consortium (HTML3.x et +)
MIT, INRIA, Univ. KEIO

• HTML 4.x
• 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

• XML (eXtended Markup Language)
Didier Donsez, 1998,2000

• Forme allégée de SGML (v1.0 02/98) • Description sémantique des documents (DTD) • XHTML (eXtended HTML) • appliquer à HTML4.01 l ’ extensibilité de XML
ajout de nouveaux éléments, ...
HTML, 36

Les évolutions de HTML (i)
n

Multimédia
• HDML (Handheld Device Markup Language) • WML (Wireless Markup Language)
• pour l ’ informatique mobile
adapté aux transmissions bas débit et aux petits écrans

• • • •
n

XML Document Navigation Language NaVigation Markup Language (NVML) Annotation of Web Content for Transcoding POIX: Point Of Interest eXchange Language Specification

Multimédia
• HTML/TIME
• Synchronisation de plusieurs documents multimédia
basé sur SMIL (W3C)

Didier Donsez, 1998,2000

HTML, 37

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 ’ pas encore de définition officiel au W3C est

n

Dynamic HTML
• DHTML = HTML + CSS + Layers + Scripting • MAIS fonctionnalités différentes ou incompatibles entre MS Internet Explorer 4.0 et NS Navigator 4.0

Didier Donsez, 1998,2000

HTML, 38

Cascading Style Sheets (CSS)
n

Partage de Feuilles de Style entre plusieurs documents HTML
• charte commune sur un ensemble des documents • modularité
• évite de modifier les CGI pour des « histoires » de présentation • diminuer les temps de chargement

• styles alternatifs
• polices compactes/grandes polices, SF différents (X11, Win, Mac)
n

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

Didier Donsez, 1998,2000

n

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

n

Supporté par Navigator 3.x et Internet Explorer 4.x
HTML, 39

L’ élément STYLE
<HEAD> <STYLE type="text/css"> H1.myclass { border-width: 1; border: solid; text-align: center} P.special { color : green; } </STYLE> <STYLE TYPE="text/javascript"> classes.myclass.P.color="red"; /* exprimé en JavaScript */ document.tags.P.color = "blue"; </STYLE> </HEAD> <BODY> <H1 class="myclass"> <H1> <P class="myclass"> <P class="special"> <P> </BODY>

Didier Donsez, 1998,2000

Ce H1 est affecté par le style </H1> Ce H1 n’ affecté par aucun style </H1> est Ce P est rouge </P> Ce P est vert </P> Ce P est bleu </P>
HTML, 40

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 }

Didier Donsez, 1998,2000

HTML, 41

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 }

Didier Donsez, 1998,2000

HTML, 42

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% }

Didier Donsez, 1998,2000

HTML, 43

L’ élément STYLE dépendance au média (CCS2)
<HEAD> <!-- Media : screen, tty, tv, projection, handheld, print, braille, aural, all --> <STYLE type="text/css" media="projection"> H1 { color: blue} </STYLE> <STYLE type="text/css" media="print"> H1 { text-align: center } </STYLE> <STYLE type="text/css" media="aural"> A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)} </STYLE> </HEAD> <BODY> <H1> This one is center on a printer and blue on screen </H1> </BODY>
HTML, 44

Didier Donsez, 1998,2000

Définition de styles externes et cascadés
styl1.css styl2.css spec1.htm H1.cs { color : blue; text-align: center }

@import "styl1.css"; P.cs { color : green; border: solid red; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40"> <HTML> <HEAD> <LINK href="styl2.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <H1 class="cs">Titre en bleu</H1> <P class="cs">Paragraphe en vert. <P>Paragraphe Normal. </BODY> </HTML>
HTML, 45

Didier Donsez, 1998,2000

Positionnement avec les styles
<html><head><title>DIV positionné</title> <style TYPE="text/css"> #banniere {position:absolute; top:20px; left:20px;background-color:#CC00EE; width:200px; border-width:1; border-color:#CC00EE; } #colonne1 {position:absolute; top:80px; left:10px;background-color:teal; width:200px; border-width:2px; border-color:white; } </style> </head><body BGCOLOR="white"> <div ID="banniere"><h1>Le Journal du Soir</h1><img SRC="logo.jpg" align="right"></div> <div STYLE=" position:absolute; top:80px; left:10px;background-color:teal; width:200px; border-width:2px; border-color:white; background-color:#6666FF"> <h1>Colonne 2 </h1> <p>This is a blue block of HTML content.</p> </div> </body></html>
HTML, 46

Didier Donsez, 1998,2000

Utilisation des polices avec les styles
<STYLE TYPE="text/css"> H2 { font-family: Poster Bodoni, Arial, serif; font-size: 22pt; color: #FF4C55; } </STYLE> <STYLE TYPE="text/javascript"> with (tags.H1) { if (window.innerWidth < 700) { fontFamily = "Poster Bodoni, Arial, serif" fontSize = "36pt" } else { fontFamily = "Babushka, Arial, serif" fontSize = "44pt" } color = "#FF4C55" } </STYLE>

Didier Donsez, 1998,2000

HTML, 47

Les Polices Chargeables (Downloadable Fonts)
n

Chargement de polices spéciales non présentes dans le navigateur
• le fichier .pfr regroupe les descriptions de plusieurs polices chargeables

Didier Donsez, 1998,2000

<HTML><HEAD> <LINK REL="fontdef" SRC="http://www.truedoc.com/pfrs/SnowCap.pfr"> <STYLE TYPE="text/css"> @font-face { font-family: "Poster Bodoni"; src: url(http://www.truedoc.com/pfrs/Amelia.pfr); } H1 { font-family: "Amelia BT"; size: 12; align: center; } </STYLE> </HEAD><BODY> <H1>L ’ hiver est la</H1> et il <FONT FACE="SnowCap BT">neige </FONT>! <BODY><HTML>
HTML, 48

Document Object Model (DOM)
n

Description d ’ document XML (en donc HTML) un sous la forme d ’ objet composite un
• chaque élément (textes, graphiques, headlines, styles) est un sous objet lui même composite. • un script (VBScript, JavaScript, ECMAScript … ) 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)

Didier Donsez, 1998,2000

HTML, 49

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

Didier Donsez, 1998,2000

HTML, 50

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 modifiable
par rapport au document (x, y) et aux autres layers (z)

n

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

Didier Donsez, 1998,2000

HTML, 51

Exemple de Layers
<html> <layer name=pic z-index=0 left=200 top=100> <img src="smile.gif" width=160 height=120> </layer> <layer name=txt z-index=1 left=200 top=100> <font size=+4> <i> Bonjour ! </i> </font> </layer></html> <html> <layer name=pic z-index=2 left=200 top=100> <img src="img.gif" width=160 height=120> </layer> <layer name=txt z-index=1 left=200 top=100> <font size=+4> <i> Layers-Demo </i> </font> </layer></html>
Didier Donsez, 1998,2000

Bonjour ! Bonjour !
Bonjour !
HTML, 52

<html> <layer name=pic z-index=2 left=200 top=100 visibility=hide> <img src="img.gif" width=160 height=120> </layer> <layer name=txt z-index=1 left=200 top=100> <font size=+4> <i> Layers-Demo </i> </font> </layer></html>

Le Clipping
n

Définition
• permet de masquer les parties de la layer en dehors du clip

n

Usage
<ilayer left=0 top=0 clip="20,50,110,120"> <img src="davinci.jpg" width=209 height=264> </ilayer> <ilayer name="imgLayer" clip="0,0,0,0"> <img name=davinci src="davinci.jpg » width=209 height=264> </ilayer>
HTML, 53

Didier Donsez, 1998,2000

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 <ilayer name=parentLayer left=100 top=0> <layer name=layer1 z-index=10 left=0 top=-10> Première Layer </layer> <layer name=layer2 z-index=20 left=200 top=-10> Seconde Layer</layer> <br><br> Layer parente </ilayer> n
Didier Donsez, 1998,2000

Applications
• Déplacement groupé • Masquage partielle dynamique
HTML, 54

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 Scripts embarqués dans un document HTML • Mécanisme ouvert
<META http-equiv="Content-Script-Type" content="text/tcl"> <SCRIPT> … </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> … </SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="scrpt.js"> … </SCRIPT>
HTML, 55

n

Didier Donsez, 1998,2000

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

Didier Donsez, 1998,2000

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

HTML, 56

Exemple JavaScript
<HTML><HEAD><TITLE>Vérification de l’ age</TITLE>
<SCRIPT LANGAGE="JavaScript"> function VerifAge(form) { 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> Votre  ge<INPUT TYPE=TEXT NAME="sonAge" onChange="VerifAge(formulaire)"> <P> <INPUT TYPE=SUBMIT VALUE="Soumettre"> <INPUT TYPE=RESET> </FORM></BODY></HTML>
HTML, 57

Didier Donsez, 1998,2000

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
Didier Donsez, 1998,2000

• SSI : Server Side Include • SSS : Server Side Script
Active Server Pages (MicroSoft), EJB (NS), JSP (Sun), ...
HTML, 58

Les Logiciels Auteurs
n
n

Création de pages HTML
Principales fonctionnalités
• mode WYSIWYG, partiellement WYSIWYG (preview) • ensemble ou partie des fonctionnalités HTML 3.2, 4.0, XML
• CSS, Frame, Form, DOM, DTD, ...

• scripting client et layer DHTML
• multi-cible (DHTML pour Navigator, DHTML pour IE)

• scripting serveur
• multi-cible (ASP, JSP, Livewire, … )

• bibliothèque de composants
Didier Donsez, 1998,2000

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

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

Les Logiciels Auteurs - Produit
n n n n n n

NS Communicator Microsoft FrontPage 98 Macromedia Dreamweaver 1.0 Astound Dynamite 1.1 mBed Interactor 1.1.1 ExperTelligence

n n n n n n n

WebberActive 4.0 NetObjects Fusion 3.0. GoLive CyberStudio 3.0 Allaire HomeSite 3.0 SoftQuad HotMetal Pro 4.0 Pictorious iNet Solo Adobe PageMill 3.0

Didier Donsez, 1998,2000

HTML, 60

XHTML
n

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

n

3 étapes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">

Didier Donsez, 1998,2000

HTML, 61

XHTML Les différences avec HTML4
n

Un document doit correct et valider une des trois DTDs
• pas de chévauchement
<p>les éléments<em>s ’ emboitent</em></p> au lieu de <p>les balises<em>se chevauchent pas</p></em>

• éléments vides
<br/><hr/> au lieu de <br><hr> qui est INCORRECT

• valeurs attributs
<tab col="3"> au lieu de <tab col=3> qui est INCORRECT
n

Style et Script
<script> <![CDATA[ ... unescaped script content ... ]]> </script>

Didier Donsez, 1998,2000

HTML, 62

XHTML - Exemple
n

Document XML utilisant des éléments du domaine de noms XHTML
<?xml version="1.0" encoding="UTF-8"?> <!-- initially, the default namespace is "books" --> <book xmlns='urn:loc.gov:books' xmlns:isbn='urn:ISBN:0-395-36341-6' xml:lang="en" lang="en"> <title>Cheaper by the Dozen</title> <isbn:number>1568491379</isbn:number> <notes> <!-- make HTML the default namespace for a hypertext commentary --> <p xmlns='http://www.w3.org/1999/xhtml'> This is also available <a href="http://www.w3.org/">online</a>. </p> </notes> </book>
HTML, 63

Didier Donsez, 1998,2000

XHTML - Exemple
n

Document XHTML utilisant la recommandation MathML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title>A Math Example</title></head> <body> <p>The following is MathML markup:</p> <math xmlns="http://www.w3.org/1998/Math/MathML"> <apply> <log/> <logbase> <cn> 3 </cn> </logbase> <ci> x </ci> </apply> </math> </body></html>
HTML, 64

Didier Donsez, 1998,2000

SMIL
Synchronized Multimedia Integration Language
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
Didier Donsez, 1998,2000

• 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
HTML, 65

Bibliographie
n

n

Beaucoup de Guides, Tutoriels, Manuels • http://search.yahoo.fr/search/fr?p=HTML 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/magic Un livre pour les graphistes avec de jolis exemples

Didier Donsez, 1998,2000

HTML, 68