accès à une masse gigantesque d'informations
distantes
chaque individu peut y mettre les informations qu'il
désire
Succès du Web
Accès
ergonomique et facile
à une masse de données colossale et variée
Les données sur le Web
Données
Multimédia
Hypermédia
Données
réparties
Les serveurs Web
Qu'est ce qu'un serveur web ?
Un service Web
est un logiciel, dont le
rôle est d'écouter des requêtes d'un type
particulier (requête HTTP) provenant de clients qu'on appelle
navigateurs
les plus connus
sont :
Netscape Navigator, Internet Explorer
ou Opera
Un serveur
une
machine qui propose de tels services
Un
serveur web
une
machine qui fait tourner un logiciel de service web
Le
réseau Internet de Nancy 2
Service Web
Le service web
doit
être exécuté sur une machine qui possède une
identification unique sous la forme d'un numéro IP (Internet
Protocol), afin qu'un navigateur puisse localiser le service web sans
ambiguité
Ce numéro (ou adresse IP) est
codé sur quatre octets, comme par exemple 192.67.78.90
Bien que
seul le numéro IP soit nécessaire
la machine possède
généralement un nom enregistré dans un DNS (Domain
Name System), qui permet de retrouver l'adresse IP à partir du
nom
Pour l'utilisateur humain
il est en effet plus simple de se souvenir d'un nom comme :
www.abc.fr
plutôt que : 192.67.78.90
Accès au
Web
L'accès aux serveurs se fait à
l'aide
d'un (Uniform Resource Locator)
Un
URL est le moyen de nommer un objet
dans le monde WWW
Le protocole HTTP (Hyper Text
Transfer Protocole) est assez simple :
il permet au navigateur de demander à
tout service web de lui retourner un fichier stocké
sur le serveur
La plupart du temps, ces fichiers sont au format HTML
Hyper Text Format Language
Ce format consiste en du texte simple agrémenté de balises
de mises en page qui permettent au navigateur de présenter
le texte sous une forme plus agréable à lire
Protocole HTTP
Quand
un service web
tourne sur une machine (supposons 192.67.78.90),
le protocole
HTTP permet à un navigateur d'accéder à la page
d'acceuil du service web en
indiquant comme adresse indifféramment
Important : Une URL peut être relative au document courant. C'est à dire qu'un lien vers un
autre document du même répertoire pourra se faire avec l'URL
simple : document.html
Le langage HTML
HTML =
HyperText Markup Langage
H.T.M.L.
est un
format d'écriture
de document
défini
par le W3C (World Wide Web Consortium), organisme indépendant
chargé
de la normalisation et de la recherche sur la technologie Web
ensemble
de
balises (ou styles ou "tags") utilisés pour définir les
différents composants d'un document Web
Les
balises
de HTML utilisent une syntaxe SGML :
<
balise >
texte </balise>
HTML
HTML n'est pas un langage de programmation !
Ce
n'est qu'un langage de description de documents
Différentes
versions :
HTML 1.0 : C'est
la
toute première
version
HTML 3.2 : C'est
la
version
utilisée actuellement (quelques "vieux" navigateurs ne
supportent
pas encore toutes ses fonctionnalités)
HTML 4.0
(Décembre 97)
: n'est pas encore implémenté sur la plupart des
navigateurs ????
Un document HTML
se range dans un
fichier suffixé par html : ex toto.html
se lit par
différents navigateurs : Internet Explorateur, Netscape...
HTML
Structure
générale d'un document HTML : 2 parties
<HTML>
<HEAD>
<TITLE>
Titre
apparaissant sur la
barre de titre
</TITLE>
</HEAD>
<BODY>
<H1> Titre
apparaissant
dans la fenêtre </H1>
...
</BODY>
</HTML>
HTML
Les
effets
Le texte brut
c'est
bien, mais
si on rajoutait du gras, de l'italique, etc.
Voici les
instructions :
<B> met
le texte en gras
</B>
<STRONG>
met le texte en gros </STRONG> idem que gras
<I> met
le texte en italique
</I>
<CENTER>
centre le texte au milieu de l'écran
</CENTER>
<EM> met
le texte en emphase </EM> idem que italique mais met
le texte
en rouge sur certains navigateurs
HTML
Les
effets
(suite)
<U>
souligne
le texte </U> à
éviter
car cela ressemble à un lien hypertexte
<BLINK>
fait
clignoter le texte</BLINK> ne
fonctionne
pas avec tous les navigateurs, et beaucoup de gens détestent
quand
ça clignote
<BIG>
grossit le texte </BIG> ne
fonctionne pas
avec tous les navigateurs
<SMALL>
rapetisse
le texte </SMALL>
ne fonctionne que sur Netscape et Internet Explorer
<STRIKE>
barre
le texte </STRIKE>
<CODE>
sert pour les listings de programmes </CODE>
permet d'utiliser la police de caractère non proportionnelle
"courrier"
HTML
Les
effets
(suite)
<BLOCKQUOTE>
ceci est une citation
qui
apparaît en retrait par rapport au texte
</BLOCKQUOTE>
<PRE> texte
: préformaté
: permet de représenter un texte sous forme d'un tableau /PRE>
Budget : Revenu brut 750 000,00 F Cout de revient 132 825,00 F Benefice brut 617 175,00 F
<ADDRESS>
pour donner son adresse</ADDRESS>
Pour mettre le
texte <SUP>
en exposant </SUP>
Pour mettre le
texte <SUB>
en indice </SUB>
<HR>
barre de séparation
HTML
Les
titres
Pour
créer
des titres
de différentes tailles, utiliser l'instruction <Hx>
et </Hx> avec pour "x" des valeurs
allant
de 1 (le plus grand) à 6 (le plus petit)
Niveau
de titre taille 1
Niveau
de titre taille 2
Niveau
de titre taille 3
Niveau
de titre taille 4
Niveau
de titre taille 5
Niveau
de titre taille 6
HTML
Les
accents
Partie
la plus
pénible de HTML
HTML
a été
développé par des américains du C.E.R.N. et
à
l'origine il ne reconnaissait pas les caractères accentués
Pour
que le
texte puisse être lu par tous les navigateurs, écrire les
accents :
" é "
s'écrit
"é"
" à "
s'écrit
"à"
" ï "
s'écrit "ï"
" ô "
s'écrit "ô"
" ç "
s'écrit
"ç"
" ñ "
s'écrit
"ñ"
HTML
Les
accents
: syntaxe générale pour obtenir toutes les combinaisons :
"&"+"la_lettre"+"l'effet"+";"
Les
effets
"acute" pour accent aigue, "grave" pour accent grave, "uml" pour
tréma,
"circ" pour circonflexe, "cedil" pour une cédille, "tilde" pour
un tilde.
A
cause
de leur insertion dans le texte, ces caractères
s'écrivent
:
" <
" s'écrit " < "
" > "
s'écrit " > "
" &
" s'écrit " & "
guillemet
s'écrit " " "
Le
mot
"général" s'écrit donc :
général
HTML
Les
listes
Les
listes simples
Le code :
<UL>Balise
de début de liste <LI>
des pommes <BR> <LI>
des poires <BR> <LI>
des scoubidous <BR> </UL>Balise
de fin de liste
Donne
comme résultat
des pommes
des poires
des
scoubidous
Pour changer de
marqueur, indiquer
la nouvelle marque par <UL
TYPE="disc"> ou <UL
TYPE="square"> ou <UL
TYPE="circle">
HTML
Les
listes
numérotées
Le code :
<OL>
Balise
de début de liste <LI>
élément 1 de la liste <LI>
élément 2 de la liste <LI>
élément 3 de la liste </OL>Balise
de fin de liste
Donne comme
résultat
élément
1 de
la liste
élément
2 de
la liste
élément
3 de
la liste
HTML
Listes
des définitions
Ces listes n'ont pas de
marqueurs au début
de chaque rubrique, et chaque rubrique se compose d'un titre (DT) suivi
de une ou plusieurs définitions (DD) qui apparaissent en retrait
<DL>Balise
de début de liste <DT>
Titre de la première définition <DD>
Texte de la première définition <DT>
Titre de la deuxième définition <DD>
Texte de la deuxième définition <DT>
Titre de la troisième définition <DD>
Texte de la troisième définition </DL>Balise
de fin de liste
Voici le
résultat :
Titre de la
première définition
Texte de la
première définition
Titre de la
deuxième définition
Texte de la
deuxième définition
Titre de la
troisième définition
Texte de la
troisième définition
HTML
Imbriquer
les différentes
listes
<DL>Balise
de début de liste <DT>
<B>Titre de la première définition </B> <DD><I>Texte
de la première définition </I> <OL>
Balise de début de liste <LI>
<U>élément 1 de la liste </U> <LI>
<U>élément 2 de la liste </U> <LI>
<U>élément 3 de la liste </U> </OL>
Balise de fin de liste <DT>
<B>Titre de la deuxième définition </B> <DD>
<I>Texte de la deuxième définition </I> <UL>
Balise de début de liste <LI>
<U>élément 1 de la liste </U> <LI>
<U>élément 2 de la liste </U> <LI>
<U>élément 3 de la liste </U> </UL>
Balise de fin de liste <DT>
<B>Titre de la troisième définition </B> <DD>
<I>Texte de la troisième définition </I> </DL>Balise
de fin de liste
Voici le
résultat
:
Titre de la
première définition
Texte de la
première définition
élément
1 de la liste
élément
2 de la liste
élément
3 de la liste
Titre de la
deuxième définition
Texte de la
deuxième définition
élément
1 de la liste
élément
2 de la liste
élément
3 de la liste
Titre de la
troisième définition
Texte de la
troisième définition
Image et Son
Quels formats d'image utiliser ?
2 formats d'images sont
compatibles avec
tous les navigateurs
GIF et Jpeg
On peut tenter
d'incorporer
d'autres formats,
mais on limite la consultation des pages au navigateur qui supporte ce
format (les navigateurs récents supportent le .PNG, .BMP etc...).
Le GIF est limité
à 256
couleurs alors que le Jpeg permet l'affichage jusqu'à 16
millions
de couleurs et offre une meilleure compression (avec perte de
qualité).
Le GIF a cependant des options intéressantes comme la
transparence
que nous verrons plus loin.
Image
et son
Insérer
des
images
On utilise l'instruction <IMG>,
(partant du principe que l'image est dans le même
répertoire)
:
<IMG
SRC="nom_de_l'image.gif"> :
Insertion d'une image GIF
<IMG
SRC="nom_de_l'image.jpg"> :
Insertion d'une image Jpeg
<IMG
SRC="nom_de_l'image.gif"
ALT="Image de maison"> : Insertion d'une image avec un
texte
explicatif (ALT signifie alternatif) sur l'image si la personne a
désactivé
l'autochargement des images dans netscape 3, ou pour les navigateurs
plus
récents, donner un descriptif lorsque vous passez la souris au
dessus
de l'image
Image
et son
L'instruction <IMG>
supporte aussi d'autres critères
Ces
critères
servent
à aligner l'image par rapport à du texte. Leur
utilisation
se fait de la manière suivante :
<IMG
ALIGN="left" SRC="nom_de_l'image.gif"> :
Insertion
d'une image alignée à gauche
<IMG
ALIGN="right" SRC="nom_de_l'image.gif"> :
Insertion d'une image alignée à droite
<IMG
ALIGN="top" SRC="nom_de_l'image.gif"> :
Insertion
d'une image alignée en haut
<IMG
ALIGN="bottom" SRC="nom_de_l'image.gif"> :
Insertion d'une image alignée en bas
etc.
Image
et son
Le
texte peut être placé au milieu de l'image
<IMG
SRC="pic.gif" ALIGN="MIDDLE"> comme ceci
Le
texte peut être placé au milieu de l'image comme ceci
Le
texte peut
être placé au bas de l'image
<IMG
SRC="pic.gif" ALIGN="BOTTOM"> comme ceci
Le
texte peut
être placé au bas de l'image comme ceci
Une
image peut
être placée au milieu de la page par
<CENTER><IMG
SRC="pic.gif"></CENTER>
<IMG
SRC="pic.gif" ALIGN="RIGHT">
Une image peut
être
placée à droite de la page comme ceci.
Une image peut être
placée à droite de la page
comme
ceci.
<IMG
SRC="pic.gif" ALIGN="RIGHT" HSPACE="20">
Une image peut
être
placée à droite du texte comme ceci. Cette fois-ci on
choisit
de créer un espace (calculé en pixels) entre le texte et
l'image avec HSPACE (HSPACE veut dire Horizontal Space, il existe aussi
VSPACE pour Vertical Space).
Une image peut
être
placée à droite du texte comme ceci. Cette fois-ci, on
choisit
l'espace qu'on veut avec HSPACE.
<IMG
SRC="pic.gif" ALIGN="LEFT" HSPACE="10">
Une image peut
être
mise à gauche du texte comme ceci.
Une image peut être mise
à gauche du texte comme
ceci.
Une
autre astuce
consiste à jouer sur la taille d'une image. Pour agrandir ou
réduire
une image , vous pouvez utiliser les instructions <WIDTH="valeur">
et <HEIGHT="valeur">. comme ici <IMG
SRC="pic.gif" ALIGN="RIGHT" HSPACE="40" WIDTH="80" HEIGHT="80">
Image
et son
Des effets bien
plus
saisissants
peuvent être réalisés grâce aux tableaux en
insérant
les textes et les images dans des cellules voisines (et en dissimulant
la bordure du tableau)
Une autre astuce
consiste à
jouer sur la taille d'une image (les valeurs s'expriment en pixel)
Pour agrandir ou
réduire
une image en jouant sur leur hauteur ou largeur, vous pouvez utiliser
les
instructions <WIDTH="valeur"> et <HEIGHT="valeur">
Voici la syntaxe
:
<IMG
WIDTH="165" HEIGHT="250" SCR="....">
Image
et son
Insérez
du
son et autres types de documents
L'insertion de son se fait
grâce
à l'instruction
<EMBED
SRC="objet_à_insérer">
Les formats
supportés
sont par
exemple les fichiers :
Wave, Sun Au, Aiff, MIDI
(format .WAV,
.AU, .MID) mais aussi :
la méthode normale
est
d'insérer
un lien vers le nom du fichier en prenant bien garde de conserver
l'extension
traditionnelle dudit fichier ( .doc pour un fichier Word, .xls pour un
document Excel...)
Lors du click sur ce lien,
le navigateur utilisera le programme externe adapté à
cette
extension pour afficher le fichier
Cette méthode ne
fonctionne que
dans l'environnement Windows et à la condition que le navigateur
de votre visiteur ait été convenablement
paramétré
Il convient donc
d'éviter au maximum
d'insérer ce type de liens car vous limitez ainsi vos visiteurs
à un seul environnement
Insertion
d'hyperliens
Les
liens,
le coeur du système
Il existe
plusieurs
types de
liens :
absolus
relatifs,
locaux et
distants, textuels (obtenus en cliquant sur un morceau de texte) et
graphiques
(en cliquant sur une image une image)
Création
du lien
Mettre des
balises : <A>
et </A>
Dire où
le lien doit pointer : une page HTML, une image, un son, etc.
i.e.
créer un lien hypertexte
: par HREF
<A HREF="">
</A>
Préciser
l'adresse
où pointe le lien
<A
HREF="http://www.asi.fr/">
Ceci est un lien vers le serveur ASI </A>
Si on passe
la
souris
sur ce lien, on voit au bas du navigateur, dans la barre de status,
vers
quel site il pointe
Quelques
exemples de liens relatifs (par rapport à la page
actuelle)
<A
HREF="test.html"> Lien
vers le fichier test.html dans le même répertoire </A>
<A
HREF="/toto/test.html"> Lien
vers le fichier test.html dans le sous répertoire "toto"
</A>
<A
HREF="../test.html"> Lien
vers le fichier test.html dans le répertoire supérieur </A>
Les liens relatifs
sont forcément
des liens sur le serveur local
Insertion
d'hyperliens
Quelques
exemples de liens absolus (liens qui ont une adresse
complète)
<A
HREF="http://www.asi.fr/faq"> Lien vers la faq d'A.S.I
(FAQ=FrequentlyAsked
Questions) </A>
<A
HREF="http://www.asi.fr/~ericbon/index.html"> Lien vers ma
homepage
</A>
Ces deux liens sont des liens vers des serveurs distants
<A
HREF="/~ericbon/index.html"> Lien vers le même serveur
en
local MAIS obligatoirement à partir de la racine du serveur et
dans
le répertoire /~ericbon/
</A>
Ce lien codé en
"dur"
par rapport à la racine (symbolisée par le "/" de
départ
du lien) implique que ce fichier ne pourra jamais changer de position
dans
l'arborescence. C'est un lien local
Insertion
d'hyperliens
Liens
au sein d'une même page
On peut
diviser la page
en plusieurs parties différentes; créer des liens vers
ces
différentes parties est possible
Pour cela nous
utiliserons l'instruction <NAME>
qui indiquera la destination du lien.
Insérer
simplement l'image
entre l'instruction <A HREF="..."> et
</A>
:
<A
HREF="demo.htm"><IMG SRC="demo.gif"></A>
Pour montrer
que
cette
image est un lien, un cadre apparaîtra autour de l'image.
Cependant
quelques fois ce cadre n'est pas très beau, pour le supprimer il
suffit d'insérer l'argument BORDER="0" (BORDER correspond tout
simplement
à la largeur du cadre. Un cadre de largeur 0 signifie pas de
cadre)
<A
NAME="parag2">
<H2>Paragraphe
II</H2>
bla, bla ...
</BODY>
</HTML>
Les
ancres
Ces ancres peuvent
être appelées à partir d'un autre document
Exemple
:
<HTML>
<HEAD>
<TITLE>Deuxième document</TITLE>
</HEAD>
<BODY>
bla, bla...
<A HREF="mon_fichier.html#parag2"> Vous accédez ici au
paragraphe
II
du document mon_fichier
</A>
</BODY>
</HTML>
Les
tableaux
Syntaxe
:
<TABLE>
et </TABLE> : Instruction
de début
et fin de table
<CAPTION>
et </CAPTION> :
Instruction de
début et fin du titre du
tableau (à n'utiliser que si
nécessaire)
<TR>
et </TR> : Définit
le début
et la fin d'une ligne de cellules
<TD>
et </TD> : Définit
le début
et la fin d'une cellule (le texte est centré verticalement dans
la cellule).
<TH>
et </TH> : Définit
l'en-tête
d'une cellule (cette instruction est identique à <TD>
et </TD> sauf que par
défaut
le texte est en gras et centré horizontalement dans la cellule)
Les
tableaux
Exemple
:
<TABLE> <CAPTION>
Titre du Tableau </CAPTION> <TR><TD>
première cellule </TD><TD> deuxième cellule
</TD></TR> <TR><TD>
première cellule </TD><TD> deuxième cellule
</TD></TR> <TR><TD>
première cellule </TD><TD> deuxième cellule
</TD></TR> </TABLE>
Résultat
:
Titre du Tableau
première cellule
deuxième cellule
première cellule
deuxième cellule
première cellule
deuxième cellule
Les
tableaux
Arguments possibles de <TABLE>
pour améliorer la présentation :
BORDER="valeur"
(taille du cadre autour du tableau, si BORDER="0"
pas de cadre).
CELLSPACING="valeur"
(par défaut cette valeur est de 2. C'est l'espace entre le bord
d'une cellule et le bord de la suivante).
CELLPADDING="valeur"
(par défaut cette valeur est de 1. C'est l'espace entre le bord
d'une cellule et son contenu).
WIDTH="valeur
ou pourcentage"
HEIGHT="valeur
ou pourcentage"
Dans les balises de
rangées ou
de cellules <TR> <TD>
on pourra
ajouter:
ALIGN="left
ou right" pour définir la justification du contenu
de
la cellule ou de la rangée entière.
Les
tableaux
Exemple de tableau un peu
plus complexe
<TABLE
BORDER="6" CELLSPACING="5" CELLPADDING="8" WIDTH="80%"> <CAPTION>
Titre du tableau </CAPTION> <TR><TD>
première cellule </TD><TD> deuxième cellule
</TD></TR> <TR><TH>
première cellule </TH><TH> deuxième cellule
</TH></TR> <TR><TD
ALIGN="CENTER"> première cellule </TD><TD
ALIGN="RIGHT"> deuxième
cellule </TD></TR> </TABLE>
Titre du tableau
première cellule
deuxième cellule
première cellule
deuxième cellule
première cellule
deuxième cellule
Les
tableaux
Exemple de tableau un peu
plus complexe
<CENTER> <TABLE
BORDER="2" CELLSPACING="20"> <TR> <TH><A
HREF="pic.gif"><IMG BORDER="0" SRC="pic.gif" ALT="Voir
l'image"></A></TH> <TH><A
HREF="http://www.babel.net"><IMG BORDER="0" SRC="pic.gif"
ALT="Serveur
Babel"></TH> </TR> <TR> <TH>
ligne 1 même cellule <BR> ligne 2 même cellule
<BR> ligne
3 même cellule </TH> <TH><A
HREF="http://www.babel.net">Lien vers le serveur BABEL</A>
</TH> </TR> </TABLE> </CENTER>
ligne 1 même cellule
ligne 2 même cellule
ligne 3 même cellule
ROWSPAN
et COLSPAN s'utilisent en
attribut
entre <TD> et </TD>
ou <TH> et </TH>.
Ils permettent de dire que la cellule en question compte soit pour
plusieurs
cellules verticales ou plusieurs cellules horizontales.
Exemple :
première
cellule
deuxième
cellule
première
cellule
deuxième
cellule
troisième
cellule
première
cellule
deuxième
cellule
troisième
cellule
première
cellule
deuxième
cellule
Les
formulaires
Rôle
Permettent de
saisir
de l'information
qui sera ensuite envoyée au serveur pour traitement
Présentent
à l'utilisateur
des zones de texte, des choix multiples par le biais de boutons
cliquables,
de listes, etc.
La
récupération
des données est réalisée par une action
spécifique,
par ex. par envoi de courrier
Création
Commande
principale : <FORM>
</FORM>
Ainsi,
pour le courrier électronique, voici la commande
généralement
utilisée :
a. La balise
INPUT
TYPE="TEXT"
: création d'une zone de saisie
Exemple d'une ligne sur 20 colonnes :
Votre nom et prénom :
<INPUT
TYPE="TEXT" NAME="NOM" SIZE="20">
Résultat :
Les
formulaires
b.
La
balise INPUT TYPE="CHECKBOX" crée une série de cases
à
cocher non exclusives
Exemple
sur trois cases :
Quelle est votre langue maternelle ?
Français <INPUT TYPE="CHECKBOX" NAME="CHOIX1">
Anglais <INPUT TYPE="CHECKBOX" NAME="CHOIX2">
Autre <INPUT TYPE="CHECKBOX" NAME="CHOIX3">
Résultat :
Les
formulaires
c. La balise INPUT
TYPE="RADIO" crée une série de cases à
cocher
exclusives