Les Feuilles de styles en cascade (CSS) Le langage HTML permet la distinction entre les différents éléments d'une page C'est le navigateur qui interprète

Les Feuilles de styles en Les Feuilles de styles en cascade (CSS)cascade (CSS)

Le langage HTML permet la distinction entre les différents éléments d'une page

C'est le navigateur qui interprète cette page

Pour chaque élément HTML, il existe un style standard qui permet d'obtenir un rendu dans toutes les situations

Les CSS permettent de définir une ou plusieurs apparences à différents éléments

Intérêt des feuilles de styleIntérêt des feuilles de style

Meilleur contrôle sur le résultat finalMeilleur contrôle sur le résultat final

Meilleure maîtrise de la présentation de la Meilleure maîtrise de la présentation de la pagepage

Conception facilitéeConception facilitée

Unification des styles des pages facilitée Unification des styles des pages facilitée sans modification du contenu de la pagesans modification du contenu de la page

Simplification du code HTMLSimplification du code HTML

Exemples d'un même document Exemples d'un même document avec différentes feuilles de styleavec différentes feuilles de style

<BODY>

<H1>Titre 1</H1>

<H2>Sous-titre 1</H2>

<p>bla bla bla</p>

<H1>Titre 2</H1>

<H2>Sous-titre 2</H2>

<p>bla bla bla</p>

</BODY>

Code Commun CSS 1 CSS 2

Navigateurs et spécificationsNavigateurs et spécifications

Les CSS ne sont supportées que par des Les CSS ne sont supportées que par des versions ultérieures à Netscape 4.0 et IE versions ultérieures à Netscape 4.0 et IE 3.03.0

Toutes les spécifications sur l'évolution du Toutes les spécifications sur l'évolution du standard CSS sont sur le site du W3C (standard CSS sont sur le site du W3C (http://www.w3.orghttp://www.w3.org))

Désormais, il est préférable de toujours Désormais, il est préférable de toujours utiliser des feuilles de style utiliser des feuilles de style

Comment ajouter des feuilles de styles Comment ajouter des feuilles de styles ??

Les CSS peuvent être ajoutées de 3 Les CSS peuvent être ajoutées de 3 façons :façons : Directement dans le document (en ligne)Directement dans le document (en ligne) Dans un bloc de l'entête du documentDans un bloc de l'entête du document Dans un fichier lié au documentDans un fichier lié au document

On peut utiliser les 3 simultanément mais On peut utiliser les 3 simultanément mais un style sera prédominant (hiérarchie des un style sera prédominant (hiérarchie des styles)styles)

CSS en ligneCSS en ligne

Il suffit d'ajouter l’attribut STYLE à l'élément Il suffit d'ajouter l’attribut STYLE à l'élément que l'on veut modifierque l'on veut modifier<ELEMENT STYLE="property:value; <ELEMENT STYLE="property:value; property:value; …">…</ELEMENT>property:value; …">…</ELEMENT>

Un style en ligne peut être appliqué à Un style en ligne peut être appliqué à n'importe quel élément HTML et cela modifie n'importe quel élément HTML et cela modifie seulement l'apparence de l'élément concernéseulement l'apparence de l'élément concernéMéthode très peu utilisée sauf pour Méthode très peu utilisée sauf pour surcharger un style déjà défini pour un type surcharger un style déjà défini pour un type d'élémentd'élément

Exemple de CSS en ligneExemple de CSS en ligne<BODY><BODY><H2 STYLE="font-size:26pt;color:red;<H2 STYLE="font-size:26pt;color:red;text-align: center;">text-align: center;">titre avec un style</H2>titre avec un style</H2>

<H2>Titre sans style</H2><H2>Titre sans style</H2></BODY></BODY>

CSS en entêteCSS en entête

On définit un bloc de style dans l'entête délimité On définit un bloc de style dans l'entête délimité par par

<STYLE TYPE="text/css">…</STYLE><STYLE TYPE="text/css">…</STYLE>Le style ainsi défini sera appliqué à tous les éléments du Le style ainsi défini sera appliqué à tous les éléments du document qui possèdent un styledocument qui possèdent un styleDans le bloc de style on trouve des règles de style Dans le bloc de style on trouve des règles de style portant sur un élément et le style présenté entre portant sur un élément et le style présenté entre accolades "accolades "{…}{…}" avec des propriétés énoncés sous la " avec des propriétés énoncés sous la forme forme

propriété : valeur ;propriété : valeur ;

Exemple de CSS en entêteExemple de CSS en entête<HTML> <HEAD> <TITLE>CSS en entête</TITLE>

<STYLE TYPE="text/css">

h2 {font-size : 26pt ;color : red ;text-align : center;}

</STYLE>

</HEAD>

<BODY>

<H2>titre avec un style</H2>

<H2>Titre tjrs avec un style</H2>

</BODY>

</HTML>

CSS en fichier liéCSS en fichier lié

Les styles sont dans un fichier séparéLes styles sont dans un fichier séparéOn précise dans l'entête quel fichier lié utiliser On précise dans l'entête quel fichier lié utiliser pour le style avec :pour le style avec :

<LINK REL="STYLESHEET"HREF="style.css"><LINK REL="STYLESHEET"HREF="style.css"> Dans le fichier de style les règles des styles Dans le fichier de style les règles des styles sont définies selon le modèle donné sont définies selon le modèle donné précédemmentprécédemmentOn utilise l'extension "On utilise l'extension ".css.css" pour les fichiers " pour les fichiers de stylede style

Exemple de CSS en fichier Exemple de CSS en fichier liélié

<HTML><HEAD>

<LINK REL="STYLESHEET" HREF="style.css">

</HEAD>

<BODY>


<H2>Titre tjrs avec un style</H2>

</BODY>

</HTML>

h2 {

font-size:25pt;

font-family:arial;

color:red;

text-align:center;

}

Modification du rendu par CSSModification du rendu par CSS

Cela peut se faireCela peut se faire Pour tous les éléments du même type (H2 Pour tous les éléments du même type (H2

par exemple)par exemple) Pour une classe d'éléments, dans ce cas Pour une classe d'éléments, dans ce cas

on indique aux éléments leur classe par on indique aux éléments leur classe par l'attribut l'attribut class="xxx"class="xxx"

Pour un élément particulier repéré par son Pour un élément particulier repéré par son identifiant donné en attribut (identifiant donné en attribut (id="xxx"id="xxx"))

Association élément Association élément style style dans une CSSdans une CSS

Les associations se font par :Les associations se font par : Nom de l'élément (appelé sélecteur)Nom de l'élément (appelé sélecteur)

H1 { propriété : valeur; …}H1 { propriété : valeur; …} Nom du sélecteur – point – nom de la classeNom du sélecteur – point – nom de la classe

P.intro { propriété : valeur; …}P.intro { propriété : valeur; …} # – identifiant# – identifiant

#p1 { propriété : valeur; …}#p1 { propriété : valeur; …}

Exemple d'utilisation des CSS Exemple d'utilisation des CSS : une feuille de style: une feuille de style

P.intro {

font-size:1.5em;

font-family:arial,helvetica;

color:maroon;

}

#id1 {

margin-left: 25pt;

color : green;

background-color:silver;

}

h1 {

font-size : 26pt ;

color : teal ;

text-align : center;

}

Exemple d'utilisation des CSS : Exemple d'utilisation des CSS : un document avec CSSun document avec CSS<HTML><HEAD>

<TITLE>CSS en entête</TITLE>

<LINK REL="STYLESHEET" HREF="style.css">

</STYLE>

</HEAD>

<BODY>


<p class="intro">paragraphe d'introduction</p>

<p id="id1">paragraphe avec le style de l'id1</p>

</BODY>

</HTML>

Visualisation du documentVisualisation du documentobtenuobtenu

Titre avec le style par défaut au sélecteur H1

Paragraphe avec le style associéà l'identifiant id1

Paragraphe avec le styleassocié à la classe d'élémentsintro

CouleursCouleursLa notation des couleurs est disponible sous trois formesLa notation des couleurs est disponible sous trois formes

Notation hexadécimaleNotation hexadécimalecolor : #FF0000;color : #FF0000;

Notation décimaleNotation décimalecolor : rgb(255,0,0);color : rgb(255,0,0);

Nom de la couleur Nom de la couleur color : red;color : red;

Il y a 16 couleurs prédéfinies : aqua, black, blue, fuchsia, gray, Il y a 16 couleurs prédéfinies : aqua, black, blue, fuchsia, gray, green, lime, maoon, navy, olive, purple, red, silver, teal, white et green, lime, maoon, navy, olive, purple, red, silver, teal, white et yellowyellow

Les mesures sur le canevas du document se font en pixels (px)Les mesures sur le canevas du document se font en pixels (px)Les polices sont définies en points (pt), picas (pc), mm, cm, in Les polices sont définies en points (pt), picas (pc), mm, cm, in ou en mesures relatives par rapport au bloc englobant (em) ou ou en mesures relatives par rapport au bloc englobant (em) ou relativement à la hauteur de la lettre ‘x’ (ex)relativement à la hauteur de la lettre ‘x’ (ex)

Couleur et arrière planCouleur et arrière plan

color : couleur du textecolor : couleur du texte

background-color : couleur de l’arrière background-color : couleur de l’arrière planplan

background-image, background-repeat, background-image, background-repeat, background-attachment, background-background-attachment, background-position : voir position : voir http://www.w3.org/Style/CSS/

background : sélecteur générique

Propriétés du textePropriétés du texte

word-spacing : normal | <length>word-spacing : normal | <length>letter-spacing : normal | <length>letter-spacing : normal | <length>text-decoration : none | [ underline || overline || text-decoration : none | [ underline || overline ||

line-through || blink ]line-through || blink ]vertical-align : baseline | sub | super | top | text-top | vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom |<percentage>middle | bottom | text-bottom |<percentage>text-transform : capitalize | uppercase | lowercase | nonetext-transform : capitalize | uppercase | lowercase | nonetext-align : left | right | center | justifytext-align : left | right | center | justifytext-indent : <length> | <percentage>text-indent : <length> | <percentage>line-height : <number> | <length> | <percentage>line-height : <number> | <length> | <percentage>

Gestion des polices de caractèresGestion des polices de caractères

font-familly : [familly-name | generic-family],*font-familly : [familly-name | generic-family],* family-name : nom de la police de caractèresfamily-name : nom de la police de caractères generic-family : en dernier choix parmi (serif, sans generic-family : en dernier choix parmi (serif, sans

serif, cursive, fantasy et monospace)serif, cursive, fantasy et monospace) body { font-family: arial, helvetica, sans-serif }body { font-family: arial, helvetica, sans-serif }

font-style : normal|italic|obliquefont-style : normal|italic|obliquefont-variant: normal|small-capsfont-variant: normal|small-capsfont-weight: normal|bold|bolder|lighter|100|…|900font-weight: normal|bold|bolder|lighter|100|…|900font-size : absolute-size|relative-size|length font-size : absolute-size|relative-size|length

|percentage|percentage p { font-size : 12 pt;}p { font-size : 12 pt;} blockquote { font-size : large;}blockquote { font-size : large;} em { font-size : 150%;}em { font-size : 150%;} em { font-size : 1.5em;}em { font-size : 1.5em;}

Le sélecteur générique Le sélecteur générique fontfont

Font:[<font-style> ||<font-variant> ||<font-Font:[<font-style> ||<font-variant> ||<font-weight> ]? <font-size> [/<line-height>]? weight> ]? <font-size> [/<line-height>]? <font-family><font-family>

P { font : 12pt/14pt sans-serif;}P { font : 12pt/14pt sans-serif;}

P { font : 80% sans-serif;}P { font : 80% sans-serif;}

P { font : x-large/110% "new century schoolbook", P { font : x-large/110% "new century schoolbook", serif;}serif;}

P { font : bold italic large Palatino, serif;}P { font : bold italic large Palatino, serif;}

P { font : normal small-caps 120%/120% fantasy;}P { font : normal small-caps 120%/120% fantasy;}

Les boites dans les CSSLes boites dans les CSS

Une page HTML est construite sur un "canevas" Une page HTML est construite sur un "canevas" (ensemble du texte) qui est plus grand que la (ensemble du texte) qui est plus grand que la fenêtre (partie visible)fenêtre (partie visible)Un élément est considéré comme une boite Un élément est considéré comme une boite rectangulaire placé sur le canevas, pour lequel rectangulaire placé sur le canevas, pour lequel on peut définir la marge (on peut définir la marge (marginmargin), la bordure ), la bordure ((borderborder) et la distance entre le bord et le ) et la distance entre le bord et le contenu (contenu (paddingpadding))Chaque partie de la boite est divisée en quatre Chaque partie de la boite est divisée en quatre ((toptop, , leftleft, , rightright, , bottombottom))

Propriétés des boitesPropriétés des boites

Contenu du bloc

Padding

BorderMarginPlace

occupée par le bloc

Sélecteurs de gestion de boites (1)Sélecteurs de gestion de boites (1)

border, border-top, border, border-top, border-right, border-border-right, border-bottom, border-leftbottom, border-left

CaractéristiqueCaractéristiques d’une bordures d’une bordure

ValeursValeurs

*-width*-width LargeurLargeur Taille en point,Taille en point,

thin, medium, thickthin, medium, thick

*-style*-style ApparenceApparence none, hidden, dotted, none, hidden, dotted, dashed, solid, double, dashed, solid, double, groove, ridge, inset, outsetgroove, ridge, inset, outset

*-color*-color CouleurCouleur couleurcouleur

border-spacingborder-spacing

border-collapseborder-collapse

EspacementEspacement

Effet de bordureEffet de bordure

Taille(s) en point Taille(s) en point

Collapse, separateCollapse, separate

Sélecteurs de gestion de boites (2)Sélecteurs de gestion de boites (2)

margin, margin-top, marging-right, margin, margin-top, marging-right, marging-bottom, margin-leftmarging-bottom, margin-leftpadding, padding-top, padding-right, padding, padding-top, padding-right, padding-bottom, padding-leftpadding-bottom, padding-left

Valeurs possibles : taille, pourcentage ou Valeurs possibles : taille, pourcentage ou auto.auto.Td { margin : 2px 3em 1.6% auto;Td { margin : 2px 3em 1.6% auto;

padding: 1em 2em; }padding: 1em 2em; }

Autres sélecteursAutres sélecteurs

width, height : length | autowidth, height : length | autofloat : left | right | nonefloat : left | right | noneclear : none | left | right | bothclear : none | left | right | bothwhite-space : normal | pre | nowrapwhite-space : normal | pre | nowraplist-style-type : disc | circle | square | decimal | list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | lower-roman | upper-roman | lower-alpha | upper-alpha | noneupper-alpha | nonelist-style-image : <url> | nonelist-style-image : <url> | nonelist-style-position : inside | outsidelist-style-position : inside | outsidelist-style : [<list-style-type>] || [<list-style-list-style : [<list-style-type>] || [<list-style-position>] || [<list-style-image>]position>] || [<list-style-image>]

Balises DIV et SPANBalises DIV et SPANDIV permet de définir une division qui DIV permet de définir une division qui peut être munie d'un stylepeut être munie d'un style

SPAN permet de distinguer une partie SPAN permet de distinguer une partie du texte en ligne pour lui appliquer un du texte en ligne pour lui appliquer un style spécifiquestyle spécifique

Propriétés pouvant être modifiées Propriétés des boites Propriétés du texte (polices) Propriétés du texte (mots, espaces, paragraphes) Propriétés de positionnement

Exemple récapitulatifExemple récapitulatif

<html><head><link rel="STYLESHEET" HREF="style.css"></head>

<body bgcolor="#FFFFFF">

<div id="d1">Bonjour</div>

<div id="d2">Salut</div>

<div id="d3">Buenos dia</div>

<div id="d4">Hello</div>

<div id="d5">Good Morning</div>

</body>

</html>

Le code HTML est des plus simple :5 divisions contenant chacune un Mot. La présentation est reportée sur la feuille de style qui traite séparémentchaque division pour la positionner,choisir la couleur et la police.

Le HTML dynamique permet de réaliser des présentation animées et interactivesUn bloc peut se déplacer sur la page

(animation ou interaction avec l'utilisateur)Le style des blocs peut être modifiéLa capture d'un événement souris permet de

déclencher des actionsDes zones de l'écran peuvent être réservées

pour le défilement de textesDes menus déroulants peuvent être créés

Le HTML Dynamique (DHTML) : Le HTML Dynamique (DHTML) : introductionintroduction

Intérêt du DHTMLIntérêt du DHTML

Meilleure maîtrise de l'interaction lecteur documentMeilleure maîtrise de l'interaction lecteur document

La personnalisation des pages peut se faire parLa personnalisation des pages peut se faire par Script CGI : pour des applications complètesScript CGI : pour des applications complètes Applets Java : interaction au sein de l'appletApplets Java : interaction au sein de l'applet Plug-ins : Flash, acrobat reader etc …Plug-ins : Flash, acrobat reader etc … Par le rafraichissement de pagesPar le rafraichissement de pages

<META HTTP-EQUIV="Refresh" <META HTTP-EQUIV="Refresh" URL="http://www.monserveur;fr/mapage.html">URL="http://www.monserveur;fr/mapage.html">

Par des programmes au sein même des pages HTML qui sont Par des programmes au sein même des pages HTML qui sont interprétés par le serveur : ASP (Active Server Pages) pour IIS interprétés par le serveur : ASP (Active Server Pages) pour IIS de Microsoft ou Php pour Apachede Microsoft ou Php pour Apache

DHTML : la coopérationDHTML : la coopération

HTML 4.0 : associe aux éléments des identifiants ou des HTML 4.0 : associe aux éléments des identifiants ou des classes et définit la capture d'événementsclasses et définit la capture d'événementsLes feuilles de style : langage normalisé de définition de Les feuilles de style : langage normalisé de définition de positionnement des éléments sur le canevaspositionnement des éléments sur le canevasDOM (Document Object Model) : Le DOM interprète DOM (Document Object Model) : Le DOM interprète chaque élément qui constitue votre page Web. Ces chaque élément qui constitue votre page Web. Ces éléments sont considérés comme des objets auxquels éléments sont considérés comme des objets auxquels les scripts peuvent accéder. Ce procédé a été mis au les scripts peuvent accéder. Ce procédé a été mis au point par le W3C, afin d'établir une norme pour assurer point par le W3C, afin d'établir une norme pour assurer une compatibilité (lors de la lecture d'une page HTML une compatibilité (lors de la lecture d'une page HTML Dynamique) parfaite entre les deux principaux Dynamique) parfaite entre les deux principaux navigateurs du marché (I.Explorer et Netscape). navigateurs du marché (I.Explorer et Netscape).

Le Document Object ModelLe Document Object Model

Quand une page est chargée par un navigateur, il y a Quand une page est chargée par un navigateur, il y a construction de graphe des tous les objets qui sont construction de graphe des tous les objets qui sont affichés sur le canevas. Ce graphe sert à désigner les affichés sur le canevas. Ce graphe sert à désigner les élément pour que les scripts puissent y avoir accès.élément pour que les scripts puissent y avoir accès.Le DOM dépend du navigateur utiliséLe DOM dépend du navigateur utilisé

Dans IE, chaque élément peut devenir scriptable (modification Dans IE, chaque élément peut devenir scriptable (modification du style, de la position du contenu)du style, de la position du contenu)

Dans Netscape, seuls les DIV et les images peuvent être Dans Netscape, seuls les DIV et les images peuvent être modifiées ou déplacéesmodifiées ou déplacées

Conséquence : le code Javascript est différent pour Conséquence : le code Javascript est différent pour obtenir le même résultatobtenir le même résultatNouvelles normes : Unification du DOMNouvelles normes : Unification du DOM

Stratégie de développement Stratégie de développement cross-browsercross-browser

L'écriture de pages dynamiques va nécessiter L'écriture de pages dynamiques va nécessiter de satisfaire les deux navigateursde satisfaire les deux navigateursPour cela on peutPour cela on peut Développer des pages spécifiques à chaque Développer des pages spécifiques à chaque

navigateurnavigateur Faire des branchements internes (les scripts sont Faire des branchements internes (les scripts sont

spécifiques à chaque navigateur)spécifiques à chaque navigateur) Réaliser une API qui permet aux développeurs de Réaliser une API qui permet aux développeurs de

sites de s'appuyer sur des fonctions qui vont traduire sites de s'appuyer sur des fonctions qui vont traduire pour chaque navigateurpour chaque navigateur

Exemple de Détection du Exemple de Détection du navigateurnavigateur

var IEDyn; //vrai si IE > 4var IEDyn; //vrai si IE > 4var NSDyn; //vrai si NS > 4var NSDyn; //vrai si NS > 4var noDyn=true; //autre navigateurvar noDyn=true; //autre navigateurIf (parseInt(Navigator.appVersion) >=4) {If (parseInt(Navigator.appVersion) >=4) {

if (navigator.appName=="Netscape") {if (navigator.appName=="Netscape") {NSDyn=true;NSDyn=true;IEDyn=false;IEDyn=false;

}}else {else {

if (!navigator.appVersion.indexOf("Win")==-1) {if (!navigator.appVersion.indexOf("Win")==-1) {IEDyn=true;IEDyn=true;NSDyn=false;NSDyn=false;

}}}}

}}

Le DOM de NetscapeLe DOM de NetscapeWindow

Frame

document

Location

History

Layer

Link

Image

Area

Anchor

Applet

Plugin

Form

Textarea

Text

FileUpload

Password

Hidden

Submit

Reset

Radio

Checkbox

Button

Select Option

Navigator

Plugin

MimeType

Placer un script dans une pagePlacer un script dans une pageLes scripts peuvent être placés dans différents endroits Les scripts peuvent être placés dans différents endroits d'une page HTMLd'une page HTMLEn général les fonctions sont dans un script de l'en-têteEn général les fonctions sont dans un script de l'en-têtePour éviter que le script ne soit interprété par des Pour éviter que le script ne soit interprété par des navigateurs qui ne reconnaissent pas le Javascript, on navigateurs qui ne reconnaissent pas le Javascript, on place des commentairesplace des commentaires<script type="text/JavaScript"><script type="text/JavaScript">// --></script></script>

Les objets en JavascriptLes objets en JavascriptDe nombreux éléments HTML sont vus De nombreux éléments HTML sont vus comme des "objets" dont le programme comme des "objets" dont le programme Javascript peut lire les caractéristiques, Javascript peut lire les caractéristiques, avant de les transformer.avant de les transformer.

Un objet possède :Un objet possède : Des propriétés qui définissent les Des propriétés qui définissent les

caractéristiques de l'objetcaractéristiques de l'objet Des méthodes qui représentent les calculs Des méthodes qui représentent les calculs

sur l'objetsur l'objet

Exemple de hiérarchie objetExemple de hiérarchie objet

Les propriétés des objetsLes propriétés des objetsReprésentées par une notation hiérarchique à point : Représentées par une notation hiérarchique à point : nom-nom-objet . nom-propriétéobjet . nom-propriétéObjet Image :Objet Image : <IMG name="im1" src="icones/arbre.gif" width="20" <IMG name="im1" src="icones/arbre.gif" width="20" height="20" alt="un arbre">height="20" alt="un arbre">

Cet élément est vu comme l'objet de nom im1Cet élément est vu comme l'objet de nom im1im1.srcim1.src correspond à correspond à "icones/arbre.gif""icones/arbre.gif" im1.widthim1.width correspond à correspond à 2020im1.heightim1.height correspond à correspond à 2020

On peut changer certaines propriétés grâce à l'opérateur On peut changer certaines propriétés grâce à l'opérateur d'affectation d'affectation == im1.src="icones/voiture.gif"im1.src="icones/voiture.gif"

Les méthodes des objetsLes méthodes des objets

Une méthode (ou fonction) permet d'effectuer des Une méthode (ou fonction) permet d'effectuer des calculs ou de modifier les propriétés d'un objetcalculs ou de modifier les propriétés d'un objetMéthode Méthode write()write() de l'objet document : de l'objet document :

document.write("<p>Bonjour</p>");document.write("<p>Bonjour</p>"); L'effet de la méthode L'effet de la méthode writewrite dépend de l'endroit ou elle est dépend de l'endroit ou elle est

placée dans le fichier HTMLplacée dans le fichier HTML

La chaîne de caractères donnée en paramètre peut-La chaîne de caractères donnée en paramètre peut-être :être :

Une simple chaîne de caractères : "Bonjour"Une simple chaîne de caractères : "Bonjour" Une variable de type Une variable de type StringString Du code HTMLDu code HTML

Exemple d'utilisationExemple d'utilisation<!DOCTYPE HTML public "-//W3C//DTD HTML 3.2//EN"><!DOCTYPE HTML public "-//W3C//DTD HTML 3.2//EN"><HTML><HTML><HEAD><HEAD><TITLE>la méthode write</TITLE><TITLE>la méthode write</TITLE><STYLE type="text/css"><STYLE type="text/css">--></STYLE></STYLE><script type="text/JavaScript"><script type="text/JavaScript">// --></script></script></HEAD></HEAD><BODY><BODY><P align=center>le monde</P><P align=center>le monde</P></BODY></BODY></HTML></HTML>

Exemple d'utilisation : Exemple d'utilisation : visualisationvisualisation

Texte inséré par la méthode write qui se trouve dans l'entête du document. La mention d'un identifiant entraîne l'application de la feuille de style associée

L'objet chaîne de caractères L'objet chaîne de caractères StringString

L'objet String représente une chaîne de L'objet String représente une chaîne de caractère (un morceau de texte)caractère (un morceau de texte)

On crée cet objet par l'opérateur newOn crée cet objet par l'opérateur new chaine1=new String("Bonjour, mes amis");chaine1=new String("Bonjour, mes amis"); chaine2=new String("Belle journée");chaine2=new String("Belle journée");

Cet objet possède plusieurs méthodes Cet objet possède plusieurs méthodes dont dont length()length() et et charAt()charAt() etc. etc.

Les événements intrinsèquesLes événements intrinsèquesLes éléments HTML peuvent capturer des événements qui Les éléments HTML peuvent capturer des événements qui correspondent aux actions de l'utilisateurcorrespondent aux actions de l'utilisateur

On peut associer un handler qui capture l'événement et le On peut associer un handler qui capture l'événement et le redirige vers une fonction JavaScriptredirige vers une fonction JavaScript

Handlers associés aux mouvements de la souris ou du clavier :Handlers associés aux mouvements de la souris ou du clavier :

onClick : clic sur la boîte de l'élément concerné

onDblClick : double clic (ne fonctionne pas avec tous les navigateurs)

onMouseDown : le bouton de la souris est enfoncé

onMouseUp : le bouton de la souris est relâché

onMouseOver : le pointeur passe sur la surface de la boîte concernée

onMouseOut : le pointeur quitte la boîte

onMouseMove : le pointeur se déplace

onKeyPress : une touche clavier est pressée

onKeyDown : touche clavier maintenue enfoncée

onKeyUp : touche clavier relâchée

Exemple de handlerExemple de handlerLes handlers sont placés comme attributs de la balise de Les handlers sont placés comme attributs de la balise de l'élémentl'élément

Exemple : un lien capte l'événement d'entrée et de sortie du Exemple : un lien capte l'événement d'entrée et de sortie du pointeur de la zone représentant le lien. Ceci déclenche l'action pointeur de la zone représentant le lien. Ceci déclenche l'action Javascript associée.Javascript associée.

<A href="destination.htm"

onMouseOver="im1.src='../images/avionrouge.gif'"

onMouseOut="im1.src='../images/avionbleu.gif'">

<IMG src="../images/avionvert.gif"

name= "im1"

width = "50"

height = " 50 "

alt = "prends l'avion pour là bas"

border=0>

</A>

Les fonctions JavaScriptLes fonctions JavaScriptLes interactions se font par le biais des handlers qui transmettent la Les interactions se font par le biais des handlers qui transmettent la capture de l'événement à une fonction qui exécutera une actioncapture de l'événement à une fonction qui exécutera une action

Une fonction se déclare de la façon suivante :Une fonction se déclare de la façon suivante :function nom(parametres) {function nom(parametres) {

//commentaire concernant la fonction//commentaire concernant la fonction

instruction1;instruction1;

instruction2;instruction2;

........................

}}

Les déclarations de fonctions sont généralement placées dans l'entête. Les déclarations de fonctions sont généralement placées dans l'entête. L'appel d'une fonction se fait par son nom et ses paramètresL'appel d'une fonction se fait par son nom et ses paramètres

function Exemple(Texte) {function Exemple(Texte) {alert(texte);alert(texte);

}}

Cette méthode affiche du texte dans une boite de dialogue bloquanteCette méthode affiche du texte dans une boite de dialogue bloquante

Exemple de réalisationExemple de réalisationLa fonction La fonction changefond(couleur)changefond(couleur) va va changer la couleur de fond d'une division du changer la couleur de fond d'une division du document. L'événement déclenchant est le document. L'événement déclenchant est le clic sur un bouton d'un formulaire grâce à clic sur un bouton d'un formulaire grâce à onClickonClickfunction changefond(couleur) {function changefond(couleur) {

var p=document.getElementById("d1");var p=document.getElementById("d1");

p.style.backgroundColor=couleur;p.style.backgroundColor=couleur;

}}

<INPUT onClick="changefond('yellow');" <INPUT onClick="changefond('yellow');" type="submit" name="bouton1" value="Jaune">type="submit" name="bouton1" value="Jaune">

Voir un site de specifications du DOM :Voir un site de specifications du DOM : http://www.mozilla.org/docs/dom/http://www.mozilla.org/docs/dom/

Changement de fondChangement de fondLe paramètre est une chaîne de caractères (le nom d'une couleur). Il est donc normalement placé entre guillemets, mais nous sommes déjà à l'intérieur d'une chaîne entre guillemets (onClick="changefond('yellow')") donc on utilise des quotes (').

chgcoul.html

Le XHTMLLe XHTMLLe XHTML 1.0 (eXtensible HTML) est une Le XHTML 1.0 (eXtensible HTML) est une recommandation du W3Crecommandation du W3CVersion de HTML respectant la syntaxe de XML Version de HTML respectant la syntaxe de XML afin de permettre une structure plus stricte et afin de permettre une structure plus stricte et garantir la qualité des documentsgarantir la qualité des documentsIl intègre toutefois les caractéristiques les plus Il intègre toutefois les caractéristiques les plus intéressantes du XML : données structurées, intéressantes du XML : données structurées, extension des fonctions. Il est codé comme du extension des fonctions. Il est codé comme du HTML sauf le prologue, qui doit obligatoirement HTML sauf le prologue, qui doit obligatoirement être du type :être du type :

<!doctype html public " <!doctype html public " "-//w3c//dtd X"-//w3c//dtd XHTML 1.0 //EN">HTML 1.0 //EN">

Écrire en XHTML (1)Écrire en XHTML (1)1.1. Le document doit commencer par la déclaration Le document doit commencer par la déclaration

suivante :suivante :<?xml version="1.0"?><?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "DTD/xhtml1-Transitional//EN" "DTD/xhtml1-transitional.dtd">transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><html xmlns="http://www.w3.org/1999/xhtml">

2.2. Les balises Les balises <head><head> et et <title><title> sont sont obligatoiresobligatoires

3.3. Les balises et leurs attributs doivent être en Les balises et leurs attributs doivent être en minusculesminuscules

4.4. Un attribut doit être entre guillemetsUn attribut doit être entre guillemets5.5. Tous les attributs doivent avoir une valeurTous les attributs doivent avoir une valeur

<div align="center">du Xhtml </div><div align="center">du Xhtml </div>

6.6. Toutes les balises ouvertes doivent Toutes les balises ouvertes doivent être refermées ou se terminer par un être refermées ou se terminer par un ""//" : " : <br/><br/>

7.7. Les balises doivent être correctement Les balises doivent être correctement imbriquées : imbriquées : <strong><em>texte</em></strong><strong><em>texte</em></strong>

8.8. Les éléments en ligne (pas de bloc) ne Les éléments en ligne (pas de bloc) ne peuvent pas contenir de blocpeuvent pas contenir de bloc

9.9. L'attribut L'attribut altalt est obligatoire pour la est obligatoire pour la balise balise imgimg et et typetype pour pour scriptscript

Écrire en XHTML (2)Écrire en XHTML (2)

Écrire en XHTML (3)Écrire en XHTML (3)

10.10. Les signes (Les signes (<<) et () et (&&) ne peuvent plus être ) ne peuvent plus être utilisés seuls s'ils ne sont pas signifiants dans utilisés seuls s'ils ne sont pas signifiants dans le code HTMLle code HTML

<p> Alain & Jean </p><p> Alain & Jean </p>

10.10. Les commentaires ne sont plus spécifiés de la Les commentaires ne sont plus spécifiés de la même façon :même façon :

<script>  </script><script>  </script>

<script> <![CDATA contenu ]]> </script><script> <![CDATA contenu ]]> </script>

Pour valider le code XHTML, on utilisera http://validator.w3.org

Documents

Les Feuilles de styles en cascade (CSS) Le langage HTML permet la distinction entre les différents éléments d'une page C'est le navigateur qui interprète