plan

Nouvelles Technologies Introduction

Sadok Ben Yahia, [email protected]

http://www.cck.rnu.tn/sbenyahia

Département d’InformatiqueFac. Sces. Tunis

© Sadok Ben Yahia Fac Sces Tunis 2

Plan

Introduction

Les services internet

Le web

Le protocole HTTP

Langage HTML


Réseaux: Introduction

C'est un ensemble fonctionnel constitué par des machines

(ordinateurs, imprimantes, etc.) reliées entre elles par des liens (fils

de cuivre, fibre optique).

Suivant la distance couverte:

les réseau locaux (LAN: local area network),

les réseaux nationaux (WAN: wide area network).

Il ne suffit pas de relier deux machines avec n'importe quel câble

pour assurer la mise en route du réseau. Il faut permettre aux

machines de dialoguer entre elles : c’est la fonction des protocoles

réseau.


Réseaux: Protocoles

Les protocoles sont indispensables pour permettre à deux ou ++ machines de dialoguer de façon correcte.

la transmission des données sur le réseau (liaison)

l'acheminement correct des données sur le réseau (transport)

la détection des erreurs avec le cas échéant la retransmission des données

le dialogue entre des applications (programmes) sur des machines différentes

Couche applicationMise en forme des données

Couche TransportAdressage et transport des données

Couche LiaisonTransmission des données sur le support physique


L'internet : un réseau de réseaux

L'Internet est un réseau de

réseaux (méta-réseau).

Sa structuration est similaire à un

emboîtement de poupées russes: on

part du réseau local pour aller vers le

réseau international.

L'élément de base est le réseau

local qui s'insère ensuite dans un

réseau de campus (dans le cas d'une

université) lui même connecté sur un

réseau régional.

Les réseaux régionaux sont

fédérés au niveau national par un

réseau d'interconnexion qui offre en

plus des connexions internationales.


Les services de l'Internet - Présentation

On appelle service Internet toute application mettant en jeu les protocoles

de communication de l'Internet donc TCP/IP.

Les services permettront de :

échanger du courrier électronique

se connecter sur des machines distantes

récupérer des fichiers (programmes, données, etc.)

consulter les forums électroniques (également appelés news)

accéder à de l'information

participer à une discussion grâce à un serveur de liste


Les services de l'Internet

Du point de vue de l'utilisateur on peut considérer schématiquement l'Internet comme étant divisé en deux espaces:

un espace de communication directe entre individus

un espace d'information

Internet

Espace de communication Espace d'information

Courrier News Listes Web ftp

Messages Article Message

Pages Fichiers

Chacun de ces espaces se caractérise par des supports d'information spécifiques:courrier = messagesforums = articleslistes de diffusion = messagesweb = page (constituée de fichiers textes, images, sons, etc.)ftp = fichier de tout type


WWW : World Wide Web

HTML :Créé en 1989 au CERN par Tim Berners-Lee

Mettre en ligne de la documentation (initialement technique pour physiciens)

Services de l'Internet

Web

Messagerie

Transfert de fichiers (FTP)

Forum de nouvelles (news), de discussion (chat)

Principes du Web

Hypertexte : HTML

Client/serveur : HTTP

Schéma de désignation : URL


Hypertexte

Texte "normal "

organisation linéaire

éventuellement renvois sous forme de sommaires, index, notes de bas de page

Hypertexte

organisation pas forcément linéaire

texte enrichi de liens

renvoi vers un document

renvoi vers une partie du même document

renvoi vers une partie d'un autre document


Client/serveur

Client : le navigateur (Internet Explorer, Netscape, ...)Serveur : le serveur Web (Apache, Microsoft IIS, ...)

HTTPClient Serveur Web

réponse :document HTML

requête

Le serveur répond en fournissant le document demandé ou un message d'erreur si le document n'existe pas

Le client émet une requête


Schéma de désignation : Uniform Resource Locator (URL)

Permet de désigner une page Web

Chaque page a un nom unique pas d'ambiguïté possible

Protocole : // serveur / page

http://www.fst.ca/index.html

Organisation hiérarchique possible pour les pages (=hiérarchie fichier disque)

Protocole :// serveur / répertoire / ... / pagehttp://www.ulaval.ca/papers/2002/index.html


Compléments sur les URL’s

Eléments constitutifs (optionnels) d'une URL

protocole:// protocoles utilisables : HTTP, FTP, MAILTO, FILE, NEWS

utilisateur@ login pour les pages protégées

serveur nom ou adresse IP (ex. : 163.136.27.6 ) du serveur

:numéro numéro de port TCP du serveur

/répertoire chemin d'accès dans la hiérarchie de répertoires

fichier nom du document à atteindre

#signet signet dans le document à atteindre

?options information transmise au serveur (ex. : formulaire)

Exemple

http://[email protected]:8080/pub/cv.html#diplomes

ftp://[email protected]

http://www.altavista.com/query.html?erty


Structure d'un document HTML

Déclaration version HTML utilisée

En-tête

Corps du document

Déclaration de version et en-tête facultatifs Absence de corps document vide (sauf cas spéciaux, ex.: frames)

<! DOCTYPE ….><HtML>

<HEAD>En-tête

</HEAD><BODY>Corps du

document</BODY></HTML>


HTML : Règles de balisage

Deux types de balises :

autonome < .. > (ex. : <DOCTYPE >)

délimitant une zone

balise de début de zone < ... > (ex. :

<HTML> )

balise de fin de zone </… > (ex. :

</HTML> )

Identifiants de balise non sensibles à la casse (<BODY> = <Body>)


HTML : Règles de balisage

certaines balises sont associées à un ou plusieurs attributs : chaque attribut à un identifiant et une valeur (entre " " et après = )

ex. : <IMG SRC="photo.gif" ALT="une photo">

commentaires <!- - ceci est un commentaire - - >

encodage de caractère & ... ;

< > & < > &amp

caractères accentués & lettre accent ;

é à ô é &agrave ô


HTTP: Hypertext Transfert Protocol

Protocole réseau d’échange de l’information sur le Web

Principe de base

un couple requête/réponse par document à charger

+ autant de req./rép. qu'il y a d'éléments inclus (images, frames, sons, ...)

Web IISApache...

ClientExplorerNetscape…..

…….

Les éléments inclus sont désignés par des URLsIls peuvent être localisés :

- sur le même site (que le document) et dans le même répertoire- sur le même site mais dans un répertoire différent- sur un site différent


Le protocole HTTP

Définit le langage utilisé pour les échanges entre client et serveur Web

version 0.9 simple protocole de transfert de données (GET et réponse)

version 1.0 restée un Internet Draft (RFC 1945)

actuellement version 1.1 RFC 2616 (juin 1999)

Pas de session permanente entre client/serveur


Déroulement d’une requête HTTP

Envoi d’une requête (URL)

client serveur

démonHTTPD

HTTP

Attente de la réponse du serveur

Établissement de la connexion

Réponse du serveur

Affichage de la réponse

Demande de connexion

réponse

Fermeture de la connexion


Déroulement d’une requête HTTP

Envoi d’une requête (URL)

client serveur

démonHTTPD

Attente de la réponse du serveur

Établissement de la connexion

Réponse du serveur

Demande de connexion

protocolesans étatréponse

Affichage de la réponse

Fermeture de la connexion


Exemple de transaction HTTP

% telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur web



% telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur webTrying 148.60.4.30...Connected to apollon.univ-tunis1.tn.Escape character is '^]'.



% telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur webTrying 148.60.4.30...Connected to apollon.univ-tunis1.tn Escape character is '^]'.GET /index.html HTTP/1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . demande de transfertHost: apollon.univ-tunis1.tn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . nom du serveurFrom: [email protected] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . adresse demandeur (optionnelle)

(ligne blanche = fin de l’entête HTTP de la requête)



% telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur webTrying 148.60.4.30...Connected to apollon.univ-tunis1.tn.Escape character is '^]'.GET /index.html HTTP/1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . demande de transfertHost: apollon.univ-tunis1.tn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . nom du serveurFrom: [email protected] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . adresse demandeur (optionnelle)


HTTP/1.1 200 OK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . réponse du serveurDate: Tue, 02 Jun 2001 14:11:17 GMTServer: Apache/1.3b6Last-Modified: Mon, 07 Apr 2001 10:39:08 GMT . . . . . . . . . . . . . informations sur la ressource ETag: "b3dd-524-33b78ccc"Content-Length: 1316 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . taille de la ressourceAccept-Ranges: bytes Content-Type: text/html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . type MIME

(ligne blanche = fin de l’entête HTTP de la réponse)

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> (contenu)<HTML>….</HTML>



% telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur webTrying 148.60.4.30...Connected to cck.univ-tunis.tn.Escape character is '^]'.GET /index.html HTTP/1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . demande de transfertHost: cck.univ-tunis.fr . . . . . . . . . . . ………... . . . . . . . . . . . . . . . . . . . nom du serveurFrom: [email protected] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . adresse demandeur (optionnelle)


HTTP/1.1 200 OK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . réponse du serveurDate: Tue, 02 Jun 2001 14:11:17 GMTServer: Apache/1.3b6Last-Modified: Mon, 07 Apr 2001 10:39:08 GMT . . . . . . . . . . . . . informations sur la ressource ETag: "b3dd-524-33b78ccc"Content-Length: 1316 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . taille de la ressourceAccept-Ranges: bytes Content-Type: text/html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . type MIME

(ligne blanche = fin de l’entête HTTP de la réponse)

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> (contenu)<HTML>….</HTML>Connection closed by foreign host. fermeture de la connexion


Requête HTTP

Permet d'envoyer des commandes au serveur Web

3 commandes principales (présentes dans HTTP/1.0 et 1.1)

GET : demande d'un document

HEAD : demande de l'en-tête (HTTP) d'un document

POST : dépose d'information sur le serveur

GET : requête principale, 80 % des requêtes Web

HEAD : au travers de l'en-tête, permet de savoir si un document a changé

POST : envoi de d'information saisie dans un formulaire client

Format de la requête (1 ligne)

commande URL version HTTP comprise par le client

GET /index.html HTTP/1.1


Requête HTTP (2)

Pour les commandes POST, informations supplémentaires nécessaires

Format de la requête (plusieurs lignes)

commande URL version HTTP comprise par le client

ligne blanche

Informations envoyées par le client

POST /cgi-bin/prog.exe HTTP/1.1

Nom=XXX&Prenom=YYTZl


Réponse HTTP (1)

La réponse du serveur Web à une commande

Format de la réponse (plusieurs lignes)

version HTTP du serveur code retour commentaire

en-tête 1 HTTP: valeur....en-tête n HTTP: valeur

document texte (HTML) ou binaire (GIF, JPG)

HTTP/1.1 200 OKContent-Length: 9872Content-Type: text/html

<HTML>....</HTML>


Réponse HTTP (2)

code retour : renseigne sur le succès (200) ou l'échec (4xx) de la requête

en-têtes HTTP : informations transmises par le serveur sur le document envoyé

•Content-Length : taille du document

•Last-Modified : date de dernière modification du document

•Server : nom du logiciel serveur

•Expire : date d'expiration du document

•Content-Type : type MIME ( Multipurpose Internet Mail Extensions) du

document

Exemple d'en-têtes

Nombreux autres en-têtes possibles


Réponse HTTP (3)

Type (MIME) du document : Classification des documents de la forme :

médium/format

text/html : document texte HTML

text/plain : document texte "brut"

image/gif : image GIF

image/jpeg : image JPEG

audio/wav : fichier son au format .wav

video/mpeg : fichier vidéo au format .mpeg

application/ps : fichier généré par une application au format

PostScript

application/octet-stream : fichier d'octets "brut"

+ nombreux autres types existants


Les codes de réponse sous HTTP

10x : information

20x : succès

30x : redirection

40x : erreur du client

50x : erreur du serveur

200 OK

301 Moved permanently

401 Unauthorized402 Payment required403 Forbidden404 Not found

500 Internal server error


Le language (HTML): Hypertext Markup Language


Les titres en HTML

<Hn> … </Hn> n varie entre 1 et 6.

H1 Titre de rang 1

H2 Titre de rang 2

H3 Titre de rang 3

H4 Titre de rang 4

H5 Titre de rang 5

H6 Titre de rang

Exemple : <H1 align=“center”> Titre1</H1>


Les Divisions d’un document

<BR> : Retour à la ligne

<P…> … </P> : Nouveau paragraphe

<HR…> : Ligne horizontale de séparation

Attribut: ALIGN : l’alignement de la ligne

COLOR : Couleur de la ligne

NOSHADOW : Supprime l’effet 3D

SIZE : la hauteur de la ligne

WIDTH : la largeur de la ligne


Exemple

<HTML>

<BODY>

<H2 ALIGN="CENTER"> Le réseau Internet </H2>

<BR> Le World Wide Web est un service d'Internet.

<HR SIZE="3" WIDTH="90%" ALIGN="CENTER">

<P ALIGN="RIGHT">

Internet propose également d'autres services comme l'E-mail, FTP...

</P>

</BODY>

</HTML>


Les Styles

<B> ... </B> : Pour écrire en gras.

<I> ... </I> : Pour écrire en italique.

<U> ... </U> : Pour souligner le texte.

<S> … </S> : Pour barrer le texte

<TT> ... </TT> : Caractères de machine à écrire.

<CENTER> … </CENTER> : Le texte va être centré.

<SUB> ... </SUB> : Texte en indice.

<SUP> ... </SUP> : Texte en exposant.

<FONT…> ... </FONT> : Agit sur la police, la couleur et la taille des caractères.


Exemple <BODY>

<B> Ce texte va être affiché en gras </B>

<BR> <I> Ce texte va être affiché en italique </I>

<BR> <U> Ce texte va être souligné </U>

<BR> <S> Ce texte va être barré </S>

<BR> <TT> Ce texte va être en caractères de M.A.E </TT>

<CENTER> Ce texte va être centré </CENTER>

<BR> <BR> X<SUB>1</SUB><SUP>2</SUP> + 4

X<SUB>2</SUB> + 5 = 0

<BR> <B> <I> Cette équation n’admet pas de solutions

<U> dans R </U> </B> </I>

</BODY>


Exemple

<HTML>

<BODY>

<H2> Démonstration de l’utilisation de la balise FONT </H2>

<FONT SIZE=3 COLOR="#000000" FACE="Arial"> Noir

</FONT> <BR>

<FONT SIZE=4 COLOR="#FFFF00" FACE="Arial Black">

Jaune </FONT> <BR>

<FONT SIZE=6 COLOR="#FF0000" FACE="Comic sans MS">

Rouge </FONT> <BR>

</BODY>

</HTML>


Fond de page et couleur du texte

La balise <BODY> peut recevoir plusieurs attributs qui vont permettre de contrôler la couleur du fond de la fenêtre du Browser, la couleur des caractères du texte, et enfin la couleur des liens.

BGCOLOR : Couleur du fond (format RGB)

BACKGROUND : Pour insérer une image de fond (GIF, JPG)

TEXT : Couleur du texte (format RGB)

LINK : Couleur des liens non encore visités (format RGB)

VLINK : Couleur des liens visités (format RGB)

LEFTMARGIN : Marge de gauche en pixels

TOPMARGIN : Marge du haut en pixels


Exemple

<HTML>

<BODY TEXT=“#00FF00” BACKGROUND=“images/bgrd.gif”>

<H2> Démonstration de l’utilisation des attributs BODY </H2>

<BR> Internet est un réseau mondial qui concerne les:

<FONT COLOR=“#FFFFFF“ SIZE=4> Chercheurs </FONT>

<BR>

<FONT COLOR=“#0000FF“ SIZE=4> Militaires </FONT>

<BR>

Internet concerne aussi le monde éducatif et les particuliers...

</BODY>

</HTML>


Les Listes

Les listes sont composées de deux éléments:

1. Les ancres de type de liste (<UL> ou <OL>)

2. Les ancres d’item de liste (<LI>)

les types de liste

<UL> et </UL> : Délimitent une liste avec puces (Unordered List).

<OL> et </OL> : Délimitent une liste à numéros ou à lettres (Ordered List).


Exemple<HTML>

<BODY>

<H3 ALIGN=“CENTER” > Exemple de listes régulières </H3>

<OL> <LI> Pommes </LI>

<LI> Melon </LI>

</OL>

<BR>

<UL> <LI> Pommes </LI>

<LI> Melon </LI> </UL> </BODY></HTML>


Les Tableaux

<TABLE> et </TABLE> : Définition d’un tableau.

<TD> et <TD> : Une Cellule du tableau.

<TR> et </TR> : Une ligne du tableau.

<TH> et </TH> : Une Cellule En-tête du tableau (gras et centré).

<CAPTION> et </CAPTION> : Titre du tableau.


Les tableaux

Bordure de cadre[Border] <TABLE border=?></TABLE>

<TABLE border=2><TR><TD>1</TD><TD>2</TD></TR><TR><TD>3</TD><TD>4</TD></TR></TABLE>


Les tableaux … L'espace entre les cellules ou l'épaisseur des lignes du quadrillage

<TABLE cellspacing=?>

La largeur de la table <TABLE width=?> <TABLE width=%>

<TABLE border=2 cellspacing=10><TR><TD>1</TD><TD>2</TD></TR><TR><TD>3</TD><TD>4</TD></TR></TABLE>


Les tableaux … L'enrobage des cellules ou l'espace entre le bord et le contenu

<TABLE cellpadding=?>

<TABLE border=2 cellpadding=10><TR><TD>1</TD><TD>2</TD></TR><TR><TD>3</TD><TD>4</TD></TR></TABLE>


Je veux un tableau centré qui occupe 60% de la fenêtre avec sur une ligne, trois colonnes égales

<CENTER><TABLE width=60% border=1><TR><TD>cellule1</TD><TD>cel. 2</TD><TD>3</TD></TR></TABLE></CENTER>

CENTER><TABLE width=60% border=1><TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD><TD width=34%>3</TD></TR></TABLE></CENTER>

Les tableaux: Atelier

Ajoutons la balise de largeur de la cellule

Je veux ce tableau


Je souhaite que la première ligne prenne toute la largeur de la ligne. La première cellule doit donc déborder sur 3 cellules horizontales

<CENTER><TABLE width=60% border=1><TR><TD colspan=3>cellule 1</TD> </TR><TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD><TD width=34%>3</TD> </TR> </TABLE></CENTER>

<CENTER><TABLE width=60% border=1><TR> <TD width=33% rowspan=2>cellule 1</TD> <TD width=33%>cel 2</TD> <TD width=34%>3</TD></TR> <TR> <TD width=33%>cel 2</TD><TD width=34%>3</TD> </TR> </TABLE></CENTER>

Les tableaux: Atelier

Dans le même style, je souhaite que la première colonne prenne toute la hauteur de la colonne. La première cellule doit donc déborder sur 2 cellules

Tester cette instruction <TD colspan=3 align=center bgcolor="#0000FF">


Exemple<HTML>

<BODY>

<TABLE WIDTH="90%" BORDER="3">

<CAPTION> <B> Types de Données </B> </CAPTION>

<TR> <TH WIDTH="20%"> Type </TH>

<TH WIDTH="80%"> Informations </TH>

</TR>

<TR> <TD WIDTH="20%"> Integer </TD>

<TD WIDTH="80%" ALIGN="CENTER"> Ce type

représente les valeurs comprises entre -32767 et 32768 </TD>

</TR>

</TABLE>

</BODY>

</HTML>


Exemple<HTML>

<BODY>

<TABLE WIDTH="90%" BORDER="3">

<CAPTION> <B> Liste des Enseignants </B> </CAPTION>

<TR> <TH WIDTH="20%"> Spécialité </TH>

<TH WIDTH="80%"> Nom-Prénom </TH>

</TR>

<TR> <TD WIDTH="20%"> Informatique </TD>

<TD WIDTH="80%" ALIGN="CENTER"> Habib Tounsi </TD>

</TR>

</TABLE>

</BODY>

</HTML>


Inclusion d’images, de son et de films

Les images et les séquences vidéo

<IMG> : Cette balise est toujours complétée par le nom de la source avec

l’un des attributs suivants:

SRC : dans le cas d’une image GIF ou JPG.

DYNSRC : dans le cas d’une séquence vidéo AVI.

Le son (par exemple un fond musical)

<BGSOUND> : Cette balise est complétée par les attributs suivants:

SRC : qui indique la source du son WAV.

LOOP : qui indique le nombre de fois que la musique doit être jouée

(INFINITE pour que la musique soit joué sans arrêt).


Les images…

La balise IMG possède de nombreux attributs.

Texte alternatif alt="**** Pour les browser n'ayant pas l'option

"image" activée

Dimensions width=?

Height=? Hauteur et largeur (en pixels)

Bordure border=? (en pixels)

Alignementalign=top

align=middle

align=botton

align=left

align=right


Les images …

L'attribut align positionne l'image par rapport au texte :

<IMG SRC="HELP.gif" align=TOP>Fichier d'aide

<IMG SRC="HELP.gif" align=CENTER>Fichier d'aide

<IMG SRC="HELP.gif" align=BOTTOM>Fichier d'aide

Image et lien: <A HREF="MaVille.htm"><IMG SRC="STAQUET.gif"></A>


Exemple

<HTML>

<BODY>

<H2> Inclusion d’une image </H2>

<IMG SRC=“images/img.gif” ALT=“C’est une image”>

<H2> Inclusion d’une séquence vidéo </H2>

<IMG DYNSRC=“images/clk.avi” START=“MOUSEOVER”

LOOP=“INFINITE” CONTROLS>

<H2> Inclusion d’une musique </H2>

<BGSOUND SRC=“son/msq.wav” LOOP=“3”>

</BODY>

</HTML>


Les liens hypermédias

On distingue 3 types de liens :

Lien Interne : On fait référence à une partie se trouvant dans

le même document.

Lien Externe : On fait référence à un autre document.

Lien Exécutable : On fait référence à un programme

exécutable ou à un service de l’Internet (FTP, E-Mail…).

Lien Externe Interne : On fait référence, dans ce cas, à un

point précis d’un autre fichier HTML.


Définition d’une Ancre

<A...> ... </A> : La balise <A> ne sera jamais utilisée seule.

Elle comporte toujours l’attribut HREF,NAME

L’attribut HREF, ancre de départ

Vers un lien interne : <A HREF="#etiq"> Zone cliquable </A>

Vers un lien externe : <A HREF="url"> Zone cliquable </A>

Vers un lien int/ext : <A HREF="url#etiq"> Zone cliquable </A>

L’attribut NAME, ancre d’arrivée

<A NAME="etiq"> Texte à atteindre </A>


Exemple

<HTML>

<BODY>

<H3> Image en guise d’ancre </H3>

<A HREF="exp10.htm"> <IMG SRC="images/glb.gif" > </A>

<H3> Envoi d’un E-Mail </H3>

<A HREF="Mailto:[email protected]"> Envoyer </A>

<H3> Transfert de fichiers </H3>

<A HREF="FTP://www.edunet.tn"> Transférer </A>

<BR>

</BODY>

</HTML>


Exemple

<HTML>

<BODY>

<A HREF="#aller" NAME="retour"> aller à la 2ème partie </A>

<H2> C’est la première partie du document </H2>

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<A HREF="#retour" NAME="aller"> aller à la 1ère partie </A>

<H2> C’est la deuxième partie du document </H2>

</BODY>

</HTML>


Les cadres (Frames)

Mise en page de plusieurs documents HTML sur la même fenêtre

Création des cadres

<FRAMESET> ... </FRAMESET> : Division d’une zone en sous zones verticales ou horizontales.

<FRAME> : Pour caractériser les sous-zones définies par la balise <FRAMESET>.

Utilisation des cadres

Dans un lien hypertexte on peut spécifier quel cadre le lien doit mettre à jour. Ceci est réalisé par l’attribut TARGET de la balise <A…>.


Attributs de la balise <FRAMESET>

ROWS : Division de la zone en sous-zones horizontales.

ROWS="20%, 30% …"

COLS : Division de la zone en sous-zones verticales.

COLS="40%, 5%, *”

BORDER : Modifier l’épaisseur des barres de délimitation.

FRAMEDORDER : Pour dessiner des bordures entre les frames. Cet attribut peut prendre les valeurs (YES ou NO).

FRAMESPACING : Espace entre les cadres en pixels.

NOFRAME : Pour inclure une version de remplacement, on rajoute ensuite le corps de la page de remplacement

Dans une balise <FRAMESET> on trouve soit l ’attribut ROWS, soit l’attribut COLS, mais pas les deux en même temps.


Attributs de la balise <FRAME>

SRC : URL du document qui va être affiché dans la zone en question

NAME : Pour donner un nom à la zone. Ce nom sera utilisé dans

l’attribut TARGET pour indiquer la cible d’un lien.

MARGINWIDTH : Marge gauche et droite, en pixels.

MARGINHEIGHT: Marge du haut et du bas, en pixels.

NORESIZE : Pour empêcher toute éventuelle modification de la taille

lors de l’exécution (à l’aide de la souris).

SCROLLING : Spécifie si la zone doit posséder une barre de

défilement. Les valeurs peuvent être : YES, NO ou AUTO.


Exemple

<HTML>

<FRAMESET COLS="14%, 86%" FRAMEBORDER=NO>

<FRAME SRC="x1.htm" NAME="x1" SCROLLING=NO>

<FRAMESET ROWS="15%, 85%">

<FRAME SRC="x2.htm" NAME="x2" SCROLLING=NO>

<FRAME SRC="x3.htm" NAME="x3" SCROLLING=AUTO

NORESIZE>

</FRAMESET>

</FRAMESET>

</HTML>


Formulaires

Un formulaire est défini en HTML et peut contenir

zones de saisie de texte

boîtes à cocher (check box)

boutons radio (option button)

menus déroulants

boutons


Formulaires : Balises

Déclaration d'un formulaire <FORM … /FORM>

Attributs principaux ( <FORM ACTION=… METHOD=…

NAME=…>

ACTION :URL vers laquelle envoyer les données saisies

METHOD: commande HTTP à utiliser pour effectuer l'envoi

POST

NAME : nom du formulaire

TARGET : nom de la frame dans laquelle le résultat doit

être affiché


Exemple de formulaire HTML

< FORM ACTION="http://monserveur.com/cgi-bin/prog.exe" METHOD=POST>Nom <INPUT NAME="client" SIZE=46> Rue <INPUT NAME="rue" SIZE=40> Ville <INPUT NAME="ville" SIZE=20>Code postal <INPUT NAME="cp" SIZE=5> Carte de crédit No <INPUT NAME="carte" SIZE=10>Expire <INPUT NAME="expire" TYPE=TEXT SIZE=4> M/C <INPUT NAME="cc" TYPE=RADIO VALUE="mc" CHECKED>VISA <INPUT NAME="cc" TYPE=RADIO VALUE="vis"> Contre remboursement <INPUT NAME="cr" TYPE=CHECKBOX> <INPUT TYPE=SUBMIT VALUE="Envoi"><INPUT TYPE=RESET VALUE="Remise à zéro"> </FORM>


Exemple de formulaire HTML


Formulaires : Balises

Déclaration d'un formulaire <FORM … /FORM>

Attributs principaux ( <FORM ACTION=… METHOD=… NAME=…>

ACTION :URL vers laquelle envoyer les données saisies

METHOD: commande HTTP à utiliser pour effectuer l'envoi POST

NAME : nom du formulaire

TARGET : nom de la frame dans laquelle le résultat doit être affiché

toutes les balises HTML sont permises entre <Form … /FORM> images, tableaux, ...

peuvent être inclus dans un formulaire

des formulaires peuvent être insérés à l'intérieur d'un autre formulaire web


Les formulaires : Balise INPUT

Déclaration des champs de saisie (exclusivement entre <FORM … /FORM>)

NAME : nom du champ de saisie (unique à l'intérieur d'un formulaire)

TYPE : type du champ de saisie

Types possibles ( TYPE=... )

TEXT : zone de saisie texte (type par défaut en cas d'omission de TYPE)

SIZE : taille de la zone

RADIO : bouton radio tous les boutons ayant même nom (NAME) au même groupe dans

ce cas, les attributs (VALUE) permettent de les différencier

CHECKBOX : boîte à cocher

SUBMIT : bouton d'envoi des données au serveur

RESET : bouton d'effacement du formulaire


Formulaire : Envoi des données au serveur

Lorsque l'utilisateur appuie sur le bouton SUBMIT, le navigateur :

construit une chaîne de caractères contenant toutes les données du formulaire

envoie cette chaîne au serveur

Cette chaîne :

ensemble de couples séparées par le caractère &

chaque couple est de la forme nom de champ = valeur saisie

les espaces sont remplacés par le caractère +

Exemple (1 seule ligne)

client=XXY+AZERTY&rue=5410+rue+Gambetta&ville=Quebec&

cp=G1S3E5&carte=0123456789&cc=visa&cr=on

Rq : pour les boîtes à cocher = on si cochée, rien sinon


Autres types possibles pour la balise INPUT

<FORM ACTION=prog.exe" METHOD="POST">

Mot de passe <INPUT TYPE= PASSWORD NAME=" passe" SIZE= 16> <P>

Sélectionner un fichier <INPUT TYPE= FILE NAME=" fichier"> <P>

<INPUT TYPE= SUBMIT VALUE="Envoi">

<INPUT TYPE= RESET VALUE=" Remise à zéro"> <P>

</FORM>

PASSWORD :zone de saisie d'un mot de passe

FILE : sélection d'un fichier à envoyer


Autres types possibles pour la balise

SELECT: définition d'un menu déroulant

HIDDEN : champ caché transmission d'informations "furtives" dans une chaîne de formulaires

BUTTON : un bouton simple ! association avec un traitement JavaScript ou Vbscript

TEXTAREA : zone de saisie d'un texte sur plusieurs lignes


Autres types possibles pour la balise

<FORM>Champ caché <INPUT TYPE= HIDDEN NAME="cache" VALUE="toto"> <P><INPUT TYPE= BUTTON VALUE=" Cliquez" onClick=" fonctionJavaScript()" >TEXTAREA NAME=" zone" ROWS= 3 COLS= 40> texte initial< /TEXTAREA > <P><SELECT NAME=" musicTypes"><OPTION > R&B<OPTION > Jazz<OPTION > Blues<OPTION > New Age<INPUT TYPE= SUBMIT VALUE=" Envoi"><INPUT TYPE= RESET VALUE=" Remise à zéro"> <P></FORM>

Création de sites web

Astuces et conseils

Composition de pages HTML,quelques conseils

Les outils

Quelques conseils

Les erreurs à éviter


Comment construire des pages Web

Avec un éditeur de textes

Éditeur de texte HTML

Éditeur wysiwyg de pages web

Outils de conversion


Conversion de fichiers Word

Attention, si on veut obtenir des documents HTML lisibles, il

faut utiliser les styles pour

les titres,

les sous-titres,

les listes (numérotés ou non) ;

Ne pas utiliser de tabulation.

Attention aux caractères spéciaux, mal traduits


Composition de pages HTML,conseils et principes

Les aspects graphiques, polices, couleurs, images

Typographie, syntaxe, orthographe, caractères accentués

Ne pas abuser des liens vers d’autres sites

Importance de la mise à jour


Composition de pages,organisation et conception

Il faut avant tout un bon contenu

Commencer par faire un schéma de ce qu’on veut rendre accessible

Aller examiner des sites et des pages bien composés et organisés

« Page d’accueil » assez courte, doit comprendre

une liste « cliquable » des rubriques principales,

noms, coordonnées, E-mail du webmaster...,

éventuellement une rubrique « Nouveautés »



Les pages filles doivent permettre par icône(s) de revenir au moins

à la page d’accueil

Utiliser de préférence des URL en minuscules seulement, pas de

caractères spéciaux

Arborescence ni trop profonde ni trop peu

Tester toutes les pages (et les liens qu’elles contiennent) avec

différents navigateurs, différents écrans, résolutions ...

Désigner un responsable du suivi et de la mise à jour



Toujours renseigner l’entête de la page

(balise <title>)

Ne pas dupliquer de l’information présente ailleurs

Unité de style pour toutes les pages, icônes, logos, barres de

navigation ...

placées au même endroit, mais avec possibilité de contenu différent

Couleurs et polices homogènes

Harmonie des couleurs, penser au contraste texte/arrière-plan (de

préférence uni, plus lisible)


Composition de pages

Sobriété : pas de gadgets superflus et souvent nuisibles, parfois non

portables

clignotement, texte déroulant, gif animé ...

Éviter les cartes cliquables (image map) et les cadres (frame) pour

l’instant

Pas de publicité gratuite du type logo Microsoft ou Netscape déclarant

que ce site a été construit avec l’éditeur fantastique machin de la société

truc, ou qu’il est optimisé pour tel ou tel fouineur

Ne pas utiliser les extensions HTML non standard, se limiter à HTML 3.2,

à la rigueur HTML 4.0


Composition d’une page

Sauf cas particuliers (PV de conseils, textes réglementaires, manuels

techniques ...), pas plus de 2 à 3 écrans par page

Pour les documents de référence créés avec d’autres outils que l’éditeur

HTML,

prévoir une « version papier » en PostScript ou PDF

Mise en page en 2 colonnes de largeur inégale par exemple, la colonne de

gauche contenant des liens vers les rubriques principales et celle de droite

une barre de navigation si nécessaire

On peut indiquer la date de dernière mise à jour, l’auteur (ou le

responsable), l’URL de la page ...

Tester l’impression de la page


Composition d’une page

Limiter le nombre de polices, en taille et en type : ne pas utiliser les

polices Windows, pas prévues dans la norme HTML, et pas comprises

par certains navigateurs

Pas de bloc de texte ou de liste d’items trop longs

Limiter le nombre de couleurs utilisées pour le texte, les filets, l’arrière-

plan ...

Utiliser les balises logiques plutôt que physiques : <H1> plutôt que <font

size=7><B>

Vérifier l’orthographe, la syntaxe, les règles typographiques


Composition d’une page, les images

Ne pas en abuser, l’information passe d’abord par le texte

Certains utilisateurs ont pu désactiver le chargement des images

Penser à la durée de chargement pour ceux ne disposant pas de liaison

rapide :

pas plus de quelques dizaines de K octets par page

Prévoyez toujours une option de lien textuel si l’image pointe sur une

URL

<img alt= ...>


Composition d’une page :les images

Regrouper les images utilisées souvent dans un dossier images

Ne pas trop utiliser filets et vignettes exotiques : cela multiplie les

connexions au serveur HTTP

Utilisez les formats standard :

GIF (8 bits), JPEG, bientôt PNG

Pour de grosses images, les remplacer par des vues miniatures pointant

sur l’original

Ou indiquer leur taille à côté du lien permettant de les charger


Composition d’une page,les images

Les images doivent apporter du sens, en renforçant ou illustrant le propos

Une seule image cliquable plutôt que plusieurs côte à côte

Utiliser le GIF entrelacé : affichage progressif

Le moins de couleurs possible par image

Préciser hauteur et largeur de l’image : permet la mise en page du reste de la page


Composition de page,liens et URL

Utiliser les liens (internes à la page, internes au site, externes) de façon raisonnable

Vérifier régulièrement qu’ils restent valides

Pas de liens sur les mots Cliquer ici (pas de sens à l’impression)


Composition de page,liens et URL

Pour les liens sur de gros fichiers (pdf, audio, vidéo ...), indiquer leur taille

en clair

Les URL doivent être entièrement qualifiées, se terminer par / pour un

répertoire

Attention aux majuscules/minuscules

plan

Documents

rseau local

rseau dinterconnexion

rseau rgional

rseau international

fonction des protocoles

rseau locaux lan

rseau transportla dtection

machines ordinateurs