+ All Categories
Home > Documents > COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 :...

COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 :...

Date post: 03-Apr-2015
Category:
Upload: clementine-monier
View: 116 times
Download: 2 times
Share this document with a friend
56
COURS TP TECHNOLOGIES INTRANET / INTERNET
Transcript
Page 1: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

COURS TP

TECHNOLOGIES

INTRANET / INTERNET

Page 2: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

Le plan du cours

Séance 1 : HTML / DHTML

Séance 2 : Javascript

Séance 3 : XML

Séance 4 : Java, WAP

Séance 5 : ASP, IIS

Séance 6 : PHP, Apache, Mysql

Séance 7: TP

Séance 8: Présentation des TP

Page 3: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

Le TP

Partie cliente :HTML ou XMLCSS ou XSL

JAVASCRIPTFORMULAIRE

COOKIES

option : APPLET ou ACTIVE X

Partie serveur :PHP ou ASP

CONNEXION BASE DE DONNEESVARIABLES SESSION

Page 4: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

COURS TP N°1

INTRODUCTION AU HTML

Page 5: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

Plan de la séance 1

1. Le Protocole HTTP- Notions sur le protocole- Les COOKIES- Les seveurs HTTP

2. Le langage HTML- Les bases du langage

EXO n°1- Les Tables

EXO n°2- Les Frames

EXO n°3- Les formulaires

EXO n°4- Le DHTML- Les CSS- Les SSI

Page 6: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

Les TP

EXO 1 :

Pages HTML balises de bases / Liens & Ancres / Images

EXO 2 :

Pages HTML contenant des Tables imbriquées

EXO 3 :

Frames à plusieurs niveaux

EXO 4 :

Pages HTML contenant des Formulaires

Page 7: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

1. Le protocole HTTP - Historique

Le protocole HTTP (HyperText Transfer Protocol) créé en 1990.

• La version 0.9 était uniquement destinée à transférer des données sur Internet.

• La version 1.0 du protocole permet de transférer des

messages avec des en-têtes décrivant le contenu du message

en utilisant un codage de type MIME

MIME (Multipurpose Internet Mail Extension).

Page 8: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

1. Le protocole HTTP - Communication entre le navigateur et le serveur

• Le but du protocole HTTP est de permettre un transfert de fichiers

localisé grâce à une chaîne de caractères appelée URL (Uniform Resource Locator )

entre un navigateur (le client) et un serveur Web (appelé Httpd)

• La communication C/S en deux temps :

Le navigateur effectue une requête HTTP

Le serveur traite la requête puis envoie une réponse HTTP

Page 9: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

1. Le protocole HTTP - Requête HTTP

Une requête HTTP est un ensemble de lignes envoyées au serveur par le

navigateur :

- Une ligne de requête

La méthode L'URL La version du protocole utilisé par le client

(généralement HTTP/1.0)

- Les champs d'en-tête de la requête : (lignes facultatives)

- Le corps de la requête : (ligne optionnel)

Page 10: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

1. Le protocole HTTP - Exemple de Requête HTTP

Une requête HTTP a donc la syntaxe suivante :

METHODE URL VERSION<crlf>EN-TETE : Valeur<crlf>...EN-TETE : Valeur<crlf>Ligne vide<crlf>CORPS DE LA REQUETE

Exemple de requête HTTP :

GET http://www.yahoo.fr HTTP/1.0 Accept : text/htmlIf-Modified-Since : Saturday, 15-January-2000 14:37:11 GMT User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows 95)

Get / PostType MIME

Info Client

Page 11: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

1. Le protocole HTTP - Réponse HTTP

Une réponse HTTP est un ensemble de lignes envoyées au navigateur par le serveur :

- une ligne de statut : La version du protocole utilisé Le code de statut La signification du code

- Les champs d'en-tête de la requête : (lignes facultatives)

- Le corps de la réponse : Contient le document demandé

Page 12: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

1. Le protocole HTTP - Exemple de Réponse HTTP

Une réponse HTTP a donc la syntaxe suivante

VERSION-HTTP CODE EXPLICATION<crlf>

EN-TETE : Valeur<crlf>...EN-TETE : Valeur<crlf>Ligne vide<crlf>CORPS DE LA REPONSE

Exemple de réponse HTTP : HTTP/1.0 200 OK Date : Sat, 15 Jan 2000 14:37:12 GMT Server : Microsoft-IIS/2.0 Content-Type : text/HTML Content-Lentgh : 1245 Last-Modified : Fri, 14 Jan 2000 08:25:13 GMT

Version HTTP Date de début de transfert des donnéesType MIME

Longueur du Corps

Page 13: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

1. Le protocole HTTP - Les COOKIES

Les cookies sont envoyés dans l'entête HTTP.

Set-Cookie: NOM=valeur [;EXPIRES=date] [;DOMAIN=nom_de_domaine][;PATH=chemin][;SECURE]

Les différents paramètres : NOM : Nom de la variableEXPIRES : Date de validité du cookie. DOMAIN : Domaine d'un cookie. Sans valeur c'est le nom du serveur qui est utilisé. PATH : Chemin définit le chemin d'un cookie. Sans valeur, le navigateur utilise le chemin du document qui a créé les cookies. SECURE : Définit si le cookie est transmis de façon sécurisée. Les navigateurs peuvent stocker :

300 cookies, 4 Ko d'information. 20 cookies par domaine.

Si ces limites sont atteintes, le navigateur détruit les cookies avec la date d'expiration les plus récentes. Exemple Set-Cookie: Nom=EMMA ; path=/; expires=Wednesday, 01-Dec-00 23:00:00 GMT

Page 14: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

1. Le protocole HTTP - Les Codes d ’informations HTTP

Numéro Signification

301 Le document a été déplacé de façon permanente

302 Le document a été déplacé de façon temporaire

401 Vous n'êtes pas autorisé à accéder au document

404 L'URL demandée est valide mais n'est pas sur le serveur

408 Le temps d'attente pour accéder à la page demandée a expiré

503 Service non disponible

Erreurs redirection

Erreurs dues aux clients

Erreurs dues aux serveurs

Page 15: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

1. Le protocole HTTP - Les Serveurs HTTP

Apache : C'est le serveur HTTP le plus utilisé, ce succès est principalement dû à sa robustesse. Plate-forme : UNIX, Windows NT et Windows 95.

Microsoft Information Server : Microsoft propose un serveur rapide et robuste dans les environnements Windows NT / 2000.

Netscape Interprise Server et Commerce Server : Netscape est le troisième des serveurs HTTP utilisés sur Internet. Plate-forme : UNIX Windows NT ( mais pas sous Windows 95)

Le serveur Netscape possède ses API, appelées NSAPI, qui sont bien sûr différentes de celles proposées par Microsoft sous le nom de ISAPI.

OmniHTTP Freeware.

Page 16: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

2. Le Langage HTML - Historique du WEB

1965 Ted Nelson donne naissance à l'Hypertexte.

Mars 1989 Tim Berners-Lee du CERN publie l'article «Hypertexte et le CERN»

Janvier 1993 Il existe une cinquantaine de serveurs http dans le monde

Février 1993 Marc Andreesen édite la première version du browser Mosaic

Mars 1993 Andreessen et Clark s'unissent pour développer Netscape.

Juillet 1993 Le Cern et le MIT puis l'INRIA créent le WWW Consortium.

Octobre 1994 Netscape est lancé en beta test

Février 1995 4 millions d'utilisateurs de Netscape. 75% des browsers sont des Netscape.

Novembre 1995 Netscape sort la version 2.03b qui supporte le langage JAVA.

Décembre 1995 Microsoft lance sa version Internet Explorer 2.0

Page 17: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

Mars 1996 Microsoft annonce que la version d'Internet Explorer 3.0

Décembre 1996 versions IE4 et de Office 97, qui transforment votre PC en un navigateur.

Septembre 1997 La loi anti trust américaine demande à Microsoft de retirer son navigateur de Windows 98.

Janvier 1998 Netscape annonce que les versions de son Navigateur sont toutes libres d'utilisation.

2. Le Langage HTML - Historique Suite

Page 18: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

3. Le Langage HTML - Versions

HTML 1.0 : 1990- niveaux de titres- les paragraphes- les liens hypertexte- les listes

HTML 2.0 : 1994- Les images- Les formulaires

HTML 3.x : 1996- Les formules mathématiques- Les Tables- Les Frames

HTML 4.0 : 1997- DHTML- Les Feuilles de styles- Extension des objets Formulaire

XHTML : 2000 - Rapprochement vers XML

Page 19: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

3. Le Langage HTML - Internet Explorer / Netscape

Microsoft Internet Explorer : Active XNetscape One

JAVA Javascript HTML Plug-Ins

Netscape Navigator

HTTP

PC WINDOWS Macintosh Unix / Linux

JAVA Javascript / VB Script HTML Active X / OLE

Netscape Navigator

HTTP

PC WINDOWS Macintosh

Internet Explorer

Page 20: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

Le langage HTML est un langage à balises

Les balises (TAG) sont de la forme : <marqueur> texte </marqueur>

ou encore <marqueur attribut=argument>

texte </marqueur>

ou même<marqueur>

On peut attribuer plusieurs attributs à la même balise par la syntaxe suivante : <marqueur attribut1=argument1 attribut2=argument2>

texte </marqueur>

3. Le Langage HTML - Généralités

Page 21: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

3. Le Langage HTML - Notions de bases

- Pas de gestion de la casse

- Toutes balises inconnues par le navigateur seront ignorées

- Pas de caractères accentués utilisez les entités :

&gt; pour >

&lt; pour <

&amp; pour &

&nbsp; espace insécable

- Les normes HTML demandent de respecter le codage dans les caractères ASCII 7 bits, sans caractères accentués.

- Les attributs peuvent ne pas être entourés de " ou de '.- plusieurs caractères blancs sont remplacés par un seul caractère blanc,

- les retours-chariot ne seront pas pris en compte.

Page 22: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"> <HTML>

<HEAD> <!-- ENTETEDU DOCUMENT-->

<TITLE>... </TITLE> <! -- Titre du document -->

<BASE>… </BASE> <! -- Chemin de base pour tous les liens relatifs -->

<LINK> ... </LINK> <! -- Lien avec une ressource DTD, CSS, JS -->

<META> </META> <! -- Modification de l'entete HTTP, Date-->

<! -- d'expiration, mots clés -->

</HEAD>

<BODY>

...

<BODY>

</HTML>

3. Le Langage HTML - Structure d'un document HTML

Exemples :

<META HTTP-EQUIV="Expires" CONTENT="Monday, 01-Jan-96" 16:26:30 GMT">

<META NAME="KeyWords" CONTENT="Computer,internet,intranet" >

Page 23: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

3. Le Langage HTML - Balises de formatage physique

Les Titres:

<H1> </H1>

…..

<H6> </H6>

Les styles :

<B> Gras </B> <S> Barré </S>

<I> Italique </I>

<U> Souligné </U>

Les paragraphes :

<P> </P>

<BR> <!-- Pour les sauts de lignes -->

<BLOCKQUOTE> <!-- Pour les tabulations -->

Complément :

<BIG>...</BIG>

<SMALL>...</SMALL>

Page 24: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

3. Le Langage HTML - Balises de formatage logique

<ABBREV> </ABBREV> Abréviation

<ACRONYM> </ACRONYM> Acronyme

<AU> </AU> L'auteur

<CITE> </CITE> Citation

<CODE> </CODE> Instruction

<DEL> </DEL> Texte supprimé mais qui reste présent

<DFN> </DFN> Définition d'instance

<EM> </EM> Emphase

<PERSON> </PERSON> Accentuation du nom d'une personne

<S> </S> Comme strike (barré)

<SAMP> </SAMP> Exemple

<VAR> </VAR> Nom d'une variable

Page 25: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

3. Le Langage HTML - Liens hypertext et Ancres

Un lien permet de définir une région sensible au clic de souris.

<A HREF=adresse title=valeur>texte </A>

<A NAME="signet"> . . . </A> un nom ou d'ancre hypertexte. <A HREF="#nom de signet"> . . . </A> définit un lien vers une ancre<A HREF="URL"> . . . </A> définit un lien vers un URL<A HREF="URL#signet. </A> définit un lien vers un URL avec une ancre définie.

L'argument mailto : adresse permet d'envoyer un courrier électronique à l'adresse correspondante.

<A HREF=mailto:[email protected] ?subject=Sujet > [email protected] </A>

Page 26: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

3. Le Langage HTML - Les polices de caractères

L'ensemble du document :

<BASEFONT SIZE=valeur>

Une partie de texte :

<FONT SIZE=valeur> ..</FONT>

La syntaxe SIZE=+i permet de donner une taille relative par rapport à la taille en cours.

L'attribut COLOR, permet de modifier la couleur du text :

<FONT COLOR="#FF0000">texte </FONT>

Notons que les noms de couleurs peuvent être donnés en toutes lettres (Red,Blue,Green,..)

<FONT COLOR="Green">Green</FONT>

Le Jeu de caractères<FONT FACE="Times New Roman,Arial,Helvetica">….</FONT>

Page 27: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

3. Le Langage HTML - Les listes

Listes de définitions : une liste de définitions <DL> <DT> Terme 1 à définir <DD> Définition du terme 1 <DT> Terme 2 à définir <DD> Définition du terme 2 </DL>

Listes de répertoires : une liste de répertoires <DIR> <LI> texte 1 <LI> texte 2 </DIR>

Listes de numéros : une liste précédée d'un numéro s'incrémentant automatiquement. <OL> <LI> texte 1 <LI> texte 2 </OL>

Liste à puces : permet de donner une liste précédée d'une puce. <UL> <LI> texte 1 <LI> texte 2 </UL>

Listes de menus : permet de donner une liste menus. <MENU> <LI> texte 1 <LI> texte 2 </MENU>

Les listes de numéros ont des attributs permettant de définir le type de numérotations :

<OL TYPE=A|a|I|i|1 START=nb COMPACT>

Liste listes à puces ont un attributs permettant de définir le style de la puce :

<UL TYPE=disc|circle|square>

Page 28: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

4. Le Langage HTML - Les tables

Le tableau est encadré par les marqueurs :

<TABLE> et </TABLE>

Le titre du tableau est encadré par

<CAPTION> </CAPTION>

Chaque ligne est encadrée par

<TR> </TR>

Les cellules d'en-tête sont encadrées par

<TH> </TH> Les cellules de valeur sont encadrées par

<TD> </TD>

HTML 4.0 :Groupement de Lignes :<THEAD> <THEAD><TBODY> <TBODY> <TFOOT> <TFOOT>

Groupement de Colonnes :<COLGROUP>

<COL> </COL></COLGROUP>

Page 29: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

5. Le Langage HTML - Les frames

Fichier d'agencement des cadres, Fichier HTML dont la balise <BODY> est remplacée par la balise <FRAMESET>.

Les dimensions sont fixés en pixels ou en pourcentage (%). <FRAMESET COLS="20%, *"> <!-- Ou ROWS --><FRAME SRC="frame1.htm" NAME="gauche"><FRAME SRC="frame2.htm" NAME="droite"></FRAMESET>

Désigner un cadre avec un lien hypertexte

Pour spécifier le nom du cadre dans lequel doit s'ouvrir un lien :

<A HREF="page.htm" TARGET="gauche">

_self Affiche la cible dans le même cadre que le lien

_parent Affiche la cible dans le cadre de niveau supérieur

_blank Affiche la cible dans une nouvelle fenêtre

_top Affiche la cible dans la fenêtre entière du navigateur

Page 30: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

6. Le Langage HTML - Les formulaires

Les formulaires permettent de réaliser des écrans de saisies. • FORM : Les balises FORM permettent de définir les interfaces d'échange d'informations entre un utilisateur et le serveur http.

<FORM ACTION="url">

...

</FORM>

Les attributs suivants peuvent être utilisés : • ACTION : fournit une adresse URL sur laquelle la requête issue de la FORM va être envoyée. Si le champ ACTION est absent, la requête sera envoyée sur le serveur courant.

• METHOD : est la méthode d'accès au serveur http. On trouve deux méthodes d'accès POST et GET.

GET : Utilise l'URL. Cette méthode limite la taille du message à 255 caractères.

POST : Utilise le champ corps de la requête HTTP.

Page 31: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

6. Le Langage HTML - Les formulaires

INPUT : Cette est utilisée avec des attributs pour spécifier les caractéristiques de la commande clavier (ou souris) désirée.

Les différents attributs que peut utiliser la commande INPUT sont :

TYPE qui peut prendre les valeurs :

text pour les entrées de type texte.

hidden

password pour les entrées de type mot de passe,

checkbox pour les boîtes à cocher.

radio pour les boutons radios

submit un bouton poussoir qui provoque l'envoi de la requête FORM.

reset

image permet de remplacer le bouton par défaut par une image.

file permet de soumettre un fichier au serveur.

Page 32: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

6. Le Langage HTML - Les formulaires

NAME est le nom du champ

VALUE valeur par défaut d'un champ de saisie.

CHECKED

SIZE est la taille du champ pour les champs caractères..

MAXLENGTH est le nombre maximum de caractères

SRC est l'URL de l'image dans le cas où TYPE=image dans ce cas l'attribut ALIGN peut prendre les valeurs LEFT | RIGHT | TOP | MIDDLE | BOTTOM.

Page 33: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

6. Le Langage HTML - Les formulaires

SELECT : Gestion des listes déroulantes La commande SELECT est utilisée avec la syntaxe suivante :

<SELECT NAME="a-menu"> <OPTION VALUE=valeur> Option 1 <OPTION VALUE=valeur> Option 2 </SELECT>

Les attributs de la commande SELECT sont les suivants :

• NAME est le nom symbolique de l'élément. C'est-à-dire le nom du champ utilisé par l'auteur de la page HTML. Ce nom n'est pas visible pour les utilisateurs.

• SIZE donne le nombre d'éléments qui seront affichés dans le menu. Les autres valeurs seront accessibles au moyen d'un ascenseur.

• MULTIPLE indique que la commande SELECT pourra avoir plusieurs sélections.

• SELECTED indique que l'option est sélectionnée par défaut.

• VALUE valeur par défaut

Page 34: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

6. Le Langage HTML - Les formulaires

TEXTAREA : Saisie multilignes

<TEXTAREA NAME=... ROWS=.. COLS=.. > valeur par défaut

</TEXTAREA>

NAME le nom symbolique de l'entrée

ROWS nombre de lignes du champ de saisie

COLS est la longueur de la ligne de saisie du champ texte.

BUTTON : permet de définit un champ bouton d'action

<BUTTON name="reset" type="reset">

<BUTTON name="submit" value="submit" type="submit"> Envoi <IMG src="/gif/icone.gif" alt="Envoi"></BUTTON>

LABEL : La balise LABEL permet d'associer une zone de texte à un champ.

Page 35: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

6. Le Langage HTML - Les formulaires

FIELDSET et LEGEND :

La balise FIELDSET permet de regrouper plusieurs champsLa balise LEGEND permet de donner une légende à un groupe de champs regroupés par une balise FIELDSET.

Les attributs spécifiques à IE :TABINDEX :

<A TABINDEX="10" HREF="...">URL</A> <BUTTON TYPE="button" NAME="get-database" TABINDEX="1"> ACCESSKEY :

<A ACCESSKEY="C" HREF="...">Cliquez ici</A> DISABLED :

<INPUT DISABLED NAME="fred" VALUE="stone"> READONLY :Les éléments pouvant recevoir l'attribut READONLY son INPUT, TEXT, PASSWORD et TEXTAREA.

Page 36: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

7. Le Langage HTML - Les Images

<IMG SRC="nom du fichier">

<FIG SRC="nom du fichier">

Les images à insérer dans les pages HTML sont de deux sortes,

Les GIF (256 couleurs), on distingue deux sous formats :

le format GIF 87a : demandé pour les petites icones et des images ne dépassant pas 1 Ko.

L e format GIF 89a : ce format est appelé le format GIF entrelacé : il est réservé aux plus grosses images, qui s'afficheront en trois passes et aux images transparentes.

Page 37: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

7. Le Langage HTML - Les Images suites

Les JEPG, on distingue deux sous formats :

• le format JPEG : Joint Photographic Expert Group JPEG est la norme la plus répandue à l'heure actuelle pour l'affichage d'images numériques sur Internet Elle se base sur une compression dite "par blocs" c'est à dire pixel par pixel (8x8) selon les courbes de couleur. Bonne performance mais compression très destructive.

• le format JPEG2000 : basée sur l'ondelette suivant la logique mathématique DWT (Discrete Wavelet Transform). L'algorithme distingue les zones à haute et basse fréquence pour appliquer sa compression. La technologie est ensuite multi-résolution c'est à dire à résolution progressive (progressivité en résolution spatiale).

Page 38: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

7. Le Langage HTML - La compression par Ondelettes

•La transformée par ondelettes est équivalente à un filtre passe-bande.

•Elle peut-être décomposée en 2 filtres complémentaires :

• Passe-haut : H, détails • Passe-bas : L, projection

LL1 HL1

LH1 HH1

LL1 HL1 HL1

LH1 HH1

LH2 HH2

LL3 HL3 HL2LH3 HH3 HL1

LH2 HH2

LH1 HH1

Page 39: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

7. Le Langage HTML - Les Images Mappées

La balise <MAP> permet d'associer des pages HTML à des parties différentes d'une image.

A l'intérieur du bloc <MAP> </MAP> on trouve des définitions de type <AREA> définissant chacune des zones sensibles.

<MAP NAME=Nom> <AREA SHAPE=valeur COORDS= "valeur_coordonnées" HREF=URL> <AREA SHAPE=valeur COORDS= "valeur_coordonnées" HREF=URL> </MAP> <IMG SRC=Nom de l'image USEMAP="#Nom">

Les paramètres prennent les valeurs suivantes :

• SHAPE= rect | circle | poly | default

• COORDS= des valeurs entre côtes et séparées par des virgules comme décrit précédemment.

• HREF= l'URL qui sera ouverte

Page 40: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

8. Le Langage HTML - Les formules Mathématiques

Les formules mathématiques : <MATH>…</ MATH >

Les exposants : <SUP>…</SUP>

Les indices : <SUB>…</SUB>

Les factions : <OVER> ATTENTION au accoladesex : <MATH>tan(a) = {sin(a) <OVER> sin(b)} </MATH>

Les racines : <ROOT>...</ROOT> (<SQRT>..</SQRT> pour les racines carrés)

ex : <MATH><ROOT>4<OF>2000</ROOT></MATH>

Les ( ),[ ],{ } : <BOX>...</BOX> ex : <MATH><BOX> ( <LEFT>{ 1 <OVER> 2 }<RIGHT> ) </BOX></MATH>

Page 41: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

9. Le Langage HTML Autres balises intéressantes

<BANNER> </BANNER> Les bannières

<MARQUEE> </MARQUEE > Les textes défilants

<BDO> </BDO > Direction d'écriture

<BGSOUND> </BGSOUND> Son en arrière plan

<BR> Saut de ligne

<HR> Ligne horizontale

<TT> </TT> Caractère de machine à écrire

<BIG> </BIG> Police plus grande

<BLINK> </BLINK> Clignote (propre à Netscape)

<Q> </Q> Encadre le texte par des guillemets

<SMALL> </SMALL> Police plus petite

<STRONG> </STRONG> Forte accentuation rendue par du gras

<STRIKE> </STRIKE> Texte barré (comme S)

Page 42: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

9. Le Langage HTML - Les feuilles de styles : CSS

Les feuilles de style sont apparues en 1997 avec le browser Internet Explorer 3.0, puis s'est généralisé avec les versions 4.0 d'Internet Explorer et de Netscape Navigator.

Définition d'un stylebalise {propriété de style: Valeur; propriété de style:

Valeur ...}

Les feuilles de styles peuvent être définies dans plusieurs sections :

- Dans la balise <STYLE> de la section <HEAD>

<HEAD> <STYLE type="text/css">

<!--

BALISE1 {propriété de style: Valeur; propriété de style: Valeur ...} BALISE2 {propriété de style: Valeur; propriété de style: Valeur ...}

-->

</STYLE> </HEAD>

Page 43: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

9. Le Langage HTML - Les feuilles de styles : CSS

- Dans une URL externe par la balise <LINK>

<HTML> <HEAD> <LINK rel=stylesheet type="text/css" href="style.css">

</HEAD>

1. La balise <LINK> avertit le navigateur qu'il doit établir un lien

2. rel=stylesheet précise qu'il s'agit d'une feuille externe

3. type="text/css" avertit qu'il s'agit de feuilles de style en cascade

4. href=" ... " définit l'emplacement de la feuille de style

- En règles individuelles par l'attribut STYLE des balises à définir

<HTML> <BODY>

<BALISE STYLE="propriété de style: Valeur; propriété de style: Valeur ... "> ... < /BALISE >

</BODY> </HTML>

Page 44: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

9. Le Langage HTML - Les feuilles de styles : CSS

Les Classes

• Permettent d'affecter des styles différents à des balises (modification dynamique de l'aspect d'une page HTML)

La définition des classes:.nom_de_la_classe {propriété de style: Valeur; propriété de style: Valeur ...}

• Pour utiliser une classe : <BALISE class="nom_de_la_classe"> ... </BALISE>

Javascript va permettre grâce à sa gestion d'événement de changer dynamique la classe associée à une balise.

Page 45: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

9. Le Langage HTML - Les feuilles de styles : CSS

Les ID

• Ils permettent d'identifier les balises et d'associer un style à une balise.

• Javascript va référencer la règle de style voulue grace à l'ID

• On l'utilisera de la manière suivante : <BALISE ID="nom_ID" > ... </BALISE>

• En javascript pour changer la class associée à un balise on utilisera la propriété className.<P ID='nom_ID' onMouseOver = "className ='style'">Bonjour

</P>

• Pour affecter un style à une balise en Javascript :- IE :

document.all.nom_ID.style.propriété_de_style

- Navigator :

document.nom_ID.style.propriété_de_style

Page 46: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

9. Le Langage HTML - Les feuilles de styles : CSS

Styles affectés aux liens

A:link{color : #000099;text-decoration : none;font-weight : normal}

A:visited{color : #000099;text-decoration : underline;font-weight : bold;}

A:hover{color : #ff0066;text-decoration : underline;font-weight : normal;}

Liens

Liens visités

Liens survolés

Page 47: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

10. Le Langage HTML - Le DHTML

• Le DHTML (Dynamic HyperText Markup Language) n'est pas un nouveau langage de balises.

• C'est plutôt un ensemble de technologies :

• Le HTML• Les feuilles de style (CSS)• Le modèle objet de document (DOM)• Le Javascript,

• Le DHTML n'est possible que sur Explorer et Netscape Navigator versions 4 ou supérieures.

• Attention le code à écrire est différent pour les deux navigateurs.

• La notion de couche est introduite par les balises DIV, SPAN et LAYER.

Page 48: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

10. Le Langage HTML - Le DHTML

La balise LAYER spécifique à Netscape Navigator<LAYER NAME="Nom de la couche" LEFT="Distance au bord gauche" TOP="Distance au haut">éléments HTML</LAYER>

Les balises DIV et SPAN Ces balises génériques mais mieux supportées par Internet Explorer que Netscape Navigator

DIV : permet de structurer des blocs entier.SPAN : ne que s'appliquer à des éléments simples comme une ligne.

Avec les balises DIV et SPAN, le positionnement peut se faire de deux façons:

• Le positionnement absolu par rapport au coin supérieur gauche de la fenêtre du navigateur• Le positionnement relatif par rapport à d'autres éléments

<DIV style="position: absolute; top: 99 px; left: 99 px; visibility : visible;z-index : 2;">éléments HTML</DIV>

Page 49: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

11. Le Langage HTML - Clients Pull / Serveur Push

Les mécanismes de Serveur Push et de Client Pull ont été introduits à partir des versions 1.1 de Netscape. Ils permettent d'animer des pages Webs, notamment par des séquences d'images.

Server Push : le serveur envoie des données, à la suite d'une demande faite par un client,sans fermer la connexion. La fonction Serveur Push laisse la connexion ouverte, ce qui a pour effet de montrer au lecteur une page HTML jamais chargée à 100%.

Client Pull : la page HTML envoyée par le serveur contient des ordres de rafraîchissement automatique.

La fonction Client Pull provoque la réouverture de la connexion par le client. <META HTTP-EQUIV="Refresh" CONTENT="x; URL=http://..">

Page 50: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

12. Le Langage HTML - Les SII

Les SSI (Server Side Include)

Si elles sont supportées par le serveur http, elle seront compatibles avec tous les navigateurs puisque le code des SSI sera transformé en HTML.

Le format d'un appel SSI est le suivant : <!--#<balise><variables> ->

Les balises reconnues sont break, config, echo, email, exec, if, include, fsize, flastmod, label, goto et odbc.

Les commandes

break : La balise break permet de terminer le document HTML

config : Utilisée pour positionner les options de sortie HTML.

<!--#config timefmt="%d/%m/%y" -->

Page 51: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

12. Le Langage HTML - Les SII

echo : Permet d'insérer certaines données dans une page HTML. Utilisez la variable var

<!--#echo var="DATE_LOCAL" --> est la date du jour

Pour récuperer les variables issues de formulaires par la méthode POST il suffit d'affecter à la variable var la variable utilisée dans le formulaire.

Afficher des variables d'environnement :

DATE_LOCAL la date et l'heure locales du serveur HTTP DOCUMENT_NAME le nom complet du document REMOTE_ADDR l'adresse IP du client distant REMOTE_HOST le nom de la station cliente REMOTE_USER le nom du client distant

Page 52: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

12. Le Langage HTML - Les SII suite

exec : La balise exec permet d'exécuter une commande quelconque par le système d'exploitation du serveur.

<!--#exec cmd='date' -->

goto : La balise goto permet de sauter vers une étiquette #label sans exécuter le code entre l'instruction courante et l'étiquette.<!--#goto ="suite" --> blablabla non renvoyé <BR>

<!--#label ="suite" -->

if : La balise if permet d'effectuer une exécution sous certaines conditions, par exemple, d'afficher une portion de texte HTML si une condition est remplie. La syntaxe générale de la balise est la suivante : <!--#if expr="expression" --> ... <!--#elif expr="expression" --> ... <!--#else --> ... <!--#endif -->

include : Permet d'inclure le contenu d'un fichier dans la page HTML<!--#include vitual|file = "fichier" -->

odbc : La balise odbc permet de soumettre des requêtes à une base de données odbc et de mettre à jour cette dernière. <!--#odbc connect="base,user,pass" --><!--#odbc statement="SELECT NOM, AGE" --><!--#obdc format="%s a %s ans<P>" -->

Page 53: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

12. Le Langage HTML - Les SII exemple

<!--#if expr="${HTTP_USER_AGENT} = /MSIE 5/" --><!--#set var="brtype" value="msie5" -->

<!--#elif expr="${HTTP_USER_AGENT} = /MSIE 4/" --><!--#set var="brtype" value="msie4" -->

<!--#elif expr="${HTTP_USER_AGENT} = /MSIE 3/" --><!--#set var="brtype" value="msie3" -->

<!--#elif expr="${HTTP_USER_AGENT} = /MSIE 2/" --><!--#set var="brtype" value="msie2" -->

<!--#else --><!--#set var="brtype" value="unknown" -->

<!--#endif -->

<!--#include file="$brtype.txt"-->

Page 54: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

13. Les références Les logiciels Wysiwyg

Front Page de Microsoft est un très bon produit, gérant le téléchargement des pages sur le serveur Http (Version française).

Word IA : est une extension de Word qui permet de transformer Word en un éditeur/ Navigateur. Cette version ne supporte que le HTML 2 et ne permet donc pas une mise en page très ergonomique. De plus les efforts de Microsoft vont vers le développement de FrontPage

Netscape Composer : (du package Communicator) uniquement sous Windows. Cest la réponse de Netscape à Microsoft

.

Dreamweaver de Macromedia est le meilleur outil testé. Il est rapide, exempt de bogue et est muni d'une interface très ergonomique et très agréable. Seul le prix peut faire réfléchir l'amateur, mais il reste le meilleur investissement pour le professionnel.

Page 55: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

Les références - Les ouvrages intéressants

•HTML 4 & HTML Dynamique Micro PC Poche Micro ApplicationR Steyer

•XML Langage & applicationsEyrollesAlain Michard Chapitre 5 Les feuilles de styles

Page 56: COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript Séance 3 : XML Séance 4 : Java, WAP Séance 5.

Les références - Les sites WEB à consulter

•http://www.commentcamarche.net/

•http://www.imaginet.fr/

•http://www.allhtml.com


Recommended