3 Cours Internet / HTML

Internet - HTML
Nicolas Saunier
[email protected]
2004-2005
1
●
Internet,
●
UNIX.
Cours Internet / HTML - 01/10/2004
ère
partie
2
Images...
Cours Internet / HTML - 01/10/2004
3
Internet
●
●
Ensemble de réseaux de toutes tailles
interconnectés par les protocoles TCP/IP
(Transfer Control Protocol/Internet Protocol).
Point de départ: ARPANet,
–
un réseau de quatre ordinateurs reliés par le
ministère de la défense américaine en 1969.
–
rejoints par de plus en plus d'universités et
d'instituts de recherche.
Cours Internet / HTML - 01/10/2004
5
Les services
●
Les services les plus importants d'Internet:
–
E-mail: Simple Mail Transport Protocol (SMTP),
–
Telnet: Telnet Protocol,
–
FTP: File Transfer Protocol,
–
Usenet: Network News Transfer Protocol
(NNTP),
–
HTTP: HyperText Transfer Protocol,
–
...
Cours Internet / HTML - 01/10/2004
6
TCP/IP
●
Protocole commun: TCP/IP,
–
acheminement de proche en proche de
messages découpés en paquets indépendants,
●
●
adresse de destination,
numéro dans l'envoi.
–
réseau ouvert à tout utilisateur ayant obtenu une
adresse (IP, DNS) auprès d'un organisme
accrédité,
–
la gestion est décentralisée en réseaux
interconnectés: pas de gouvernement central.
Cours Internet / HTML - 01/10/2004
7
Comment s'y retrouver ? les URLs
●
●
Les documents (sur d'autres serveurs) sont
définis par les URL (Uniform Resource
Locators), qui précise
–
le protocole utilisé (ex: http, ftp, file),
–
l'adresse du serveur,
–
la localisation du document.
Forme:
protocole://serveur[:port]/chemin/document
Cours Internet / HTML - 01/10/2004
8
La toile
●
●
WWW: ensemble de connections par liens
hypertextes entre
–
pages HTML, lues dans un navigateur,
–
des documents de différentes natures (formats
MIME (Multimedia Internet Mail Extension),
associés à une application),
–
tous les services.
Formation d'une toile en évolution
permanente.
Cours Internet / HTML - 01/10/2004
9
Acteurs d'une communication web
Serveur
Client
Navigateur
Serveur web
PHP
Base de
données
Apache,
IIS,
...
ASP
Autres
ressources
Internet
...
Serveur web Serveur d'application
Cours Internet / HTML - 01/10/2004
10
Client-serveur
●
●
Communication asymétrique (via un réseau)
entre 2 entités (programme ou ordinateur)
–
serveur: entité détenant des ressources
particulières qu'il met à la disposition d'autres
ordinateurs,
–
client: entité accédant à des ressources
éloignées, en se branchant sur un serveur.
Exceptions: client-push (FTP), serveur-push.
Cours Internet / HTML - 01/10/2004
11
Courte explication
●
Client: poste pourvu d'un navigateur.
–
●
Il va effectuer des requêtes au serveur web. Il ne
connaît que HTML et Javascript.
Serveur web: serveur dédié au protocole
HTTP.
–
dont le travail consiste a recevoir les requêtes
des clients, fournir les pages ainsi demandées et
éventuellement passer la main aux serveurs
d'applications.
Cours Internet / HTML - 01/10/2004
12
Serveur web
●
●
Les pages de type HTML sont immédiatement
servies puisque directement compréhensibles
par le client.
Les autres types de pages (.php, .asp, .jsp...)
seront d'abord traitées par les serveurs
d'application.
Cours Internet / HTML - 01/10/2004
13
Serveur d'application
●
Le client demande une page non HTML au
serveur web (ex: script),
–
le serveur web demande au serveur d'application
d'interpréter la demande.
●
●
ex: générer du code HTML qui est ensuite transmis au
serveur web qui le fournit au client.
Le serveur d'application peut accéder à une
base de données,
–
les pages servies au client peuvent alors être
générées dynamiquement, à la volée.
Cours Internet / HTML - 01/10/2004
14
Quelques langages: HTML
●
●
●
●
C'est un langage de description de pages.
–
utilise des balises,
–
interprété à la réception par le navigateur.
HTML sert à présenter des données, à les
organiser dans une page, et permet de faire
des liens vers d'autres ressources.
Feuilles de styles CSS (Cascading Style
Sheet).
Cf 2nde partie du cours.
Cours Internet / HTML - 01/10/2004
15
Javascript
●
●
C'est un langage de script,
–
permet d'effectuer des boucles, des tests,
possède des variables et est orienté objet,
–
Il est exécuté par le navigateur, sur le poste
client.
Possibilité de rendre la page dynamique,
–
tests avant d'envoyer les champs d'un formulaire
HTML au serveur,
–
utilisation pour faire des effets de rollover lors du
passage de la souris sur une image.
Cours Internet / HTML - 01/10/2004
16
Javascript (2)
●
Javascript s'apparente à un langage plus
classique, mais
–
il n'a pas la même liberté d'action: il ne peut agir
sur le disque dur du client ni même sur aucun
périphérique.
–
son champ d'action se limite aux objets de la
page ou plutôt aux objets traités par le
navigateur.
Cours Internet / HTML - 01/10/2004
17
Plug-ins
●
Les possibilités du client peuvent être
étendues par l'ajout de programmes
supplémentaires, les plug-ins,
–
ils permettent de lire, dans la page web, des
fichiers de formats supplémentaires,
–
ex: Flash, Shockwave, VRML, Quicktime, Real
Audio & Video (streaming), PDF...
Cours Internet / HTML - 01/10/2004
18
Java
●
Utilisé comme une applet au sein d'une page
HTML
–
plus de possibilités que Javascript,
–
mais plus lourd à mettre en place,
–
objet présenté sur une page HTML dont le code
java est exécuté par la machine virtuelle java (ou
JVM) du client.
Cours Internet / HTML - 01/10/2004
19
Langages sur serveur
d'application
●
●
Par exemple, PHP, ASP, JSP, script CGI,
–
langages de script s'exécutant sur le serveur,
–
but: faire l'interface entre une base de données
et le serveur Web.
Si une information affichée sur le client est
modifiée dans la base de donnée sur le
serveur, sera-t-elle mise à jour dans la page
affichée sur le client ? Comment ?
Cours Internet / HTML - 01/10/2004
20
Initiation à Unix
Cours Internet / HTML - 01/10/2004
21
Unix
●
Conçu en 1969 aux Bell Labs,
–
●
différentes variantes, BSD et system V (Solaris).
Caractéristiques:
–
écrit en grande partie en C: portable et facile à
maintenir,
–
système multi-utilisateur et multi-tâches,
–
notion de filiation des tâches entre elles,
–
système conçu en couches,
Cours Internet / HTML - 01/10/2004
22
Unix (caractéristiques, suite)
–
cache l'architecture matérielle de la machine,
permettant d'écrire des programmes portables,
–
système de fichiers hiérarchique: structure
arborescente,
–
3 types de fichiers:
●
●
●
–
répertoires,
fichiers standards,
périphériques.
interface utilisateur simple: le "shell".
Cours Internet / HTML - 01/10/2004
23
Structure arborescente
racine (/)
noeuds:
répertoires
usr
inf
cal
include
feuilles:
fichiers
●
stdio.h
time.h
chaque élément est identifié par un nom,
–
associé à un numéro (entier): inode (pour le
système), correspondant à un champ de
données, protection, taille, type...
Cours Internet / HTML - 01/10/2004
24
Chemin d'accès
●
Chemin d'accès à un fichier ou répertoire,
constitué d'une suite de répertoires, séparés
par des "/".
–
absolu: nom complet en partant de la racine,
●
–
relatif: par rapport à l'endroit où l'on se trouve,
●
●
ex: /usr/include/stdio.h.
ex: par rapport à /usr, include/sdtio.h,
répertoire courant ., répertoire parent ...
répertoire personnel,
–
représenté par ~, ~login.
Cours Internet / HTML - 01/10/2004
25
Protection et droit d'accès
●
Chaque fichier (ou répertoire) est créé par un
utilisateur qui en est le propriétaire.
●
Chaque utilisateur appartient à un groupe.
●
3 catégories d'utilisateurs:
–
u (user): l'utilisateur concerné,
–
g (group): les utilisateurs de son groupe,
–
o (other): reste des utilisateurs enregistrés sur
les machines du réseau,
–
a (all): tous les utilisateurs u g o.
Cours Internet / HTML - 01/10/2004
26
Droits d'accès
●
●
Le propriétaire donne des accès à des
groupes. Différentes autorisations,
–
r (read): lire un fichier / lister un répertoire,
–
w (write): écrire un fichier / ajouter ou supprimer
des fichiers dans le répertoire,
–
x (execute): exécuter un fichier / se déplacer
dans le répertoire.
modification par la commande chmod.
Cours Internet / HTML - 01/10/2004
27
Interpréteur de commandes
●
Mode commande: invite (prompt),
–
[hôte] [répertoire] $ [commande],
–
ex: ares ~ $ ls.
Cours Internet / HTML - 01/10/2004
28
Commandes
●
[commande] [-option] [paramètres]
●
man: informations sur une commande,
●
pwd: chemin absolu au répertoire courant,
●
cd: déplacement dans un répertoire,
–
●
ls: liste le contenu d'un répertoire,
–
●
cd, cd ~, cd ~login.
ls -l, ls -a.
mkdir: crée un répertoire,
Cours Internet / HTML - 01/10/2004
29
Commandes (2)
●
rm: supprime un fichier,
●
rmdir: supprime un répertoire,
●
cp: copie un fichier,
●
mv: déplace/renomme un fichier/répertoire,
●
méta-caractères: *, ?, \, [...].
–
●
* remplace n'importe quelle chaîne de caractères.
rlogin, slogin, telnet, ssh: connexion
distante.
Cours Internet / HTML - 01/10/2004
30
Commandes (3)
●
chmod: modifie les droit d'accès,
–
symbolique: chmod [utilisateur]+/[droit] [fichier],
●
–
ex: chmod a+x test.
absolu: chmod xxx [fichier] (0 ≤ x ≤ 7),
●
ex: chmod 755 test.
●
ps: liste les processus,
●
kill: envoie un signal aux processus,
–
kill -9 [processus]: arrête le processus.
Cours Internet / HTML - 01/10/2004
31
Lien avec votre page web...
●
●
http://perso.enst.fr/~login
correspond à ~login/public_html.
droits nécessaires: les internautes
correspondent à la catégorie "autres" (o).
–
droit d'exécution sur les répertoires,
●
–
droit de lecture sur les fichiers,
●
–
chmod 711 public_html.
chmod 644 index.html.
droit de lecture sur les répertoires et index.html.
Cours Internet / HTML - 01/10/2004
32
nde
2
●
●
●
●
●
partie: HTML
HyperText Markup Language: version 4.0.
Standard défini par le World Wide Web
Consortium (W3C).
suit SGML (Standard Generalized Markup
Language) au début.
évolution vers XHTML (1.1), version de
HTML normalisée selon XML.
feuilles de styles CSS (3.0).
Cours Internet / HTML - 01/10/2004
33
HTML
●
●
●
document HTML: fichier texte (ASCII),
pouvant être créé avec n'importe quel
éditeur,
–
notepad, simpletext, emacs...
–
éditeur wysiwyg: mozilla, dreamweaver,
frontpage...
mettre au bon endroit pour que ça marche.
après toute modification, recharger (cf clientserveur).
Cours Internet / HTML - 01/10/2004
34
Les balises
●
élément de structure du document:
matérialisé par un couple, de début et de fin
de structure,
–
<ELEMENT>texte...</ELEMENT>
–
possibles attributs de l'élément
–
ne dépend pas de la casse.
Cours Internet / HTML - 01/10/2004
35
Premier document HTML
<HTML>
<HEAD>
<TITLE>Mon premier
document</TITLE>
</HEAD>
<BODY>
<H1>Mon premier document</H1>
Bienvenue dans le WWW
<P>C'est un paragraphe.</P>
<P>Ceci en est un autre</P>
</BODY>
</HTML>
Cours Internet / HTML - 01/10/2004
36
Remarques
●
●
●
●
les blancs successifs sont ignorés.
les retours à la ligne sont ignorés : un
paragraphe est délimité par les balises <P>
et </P>.
balises nécessaires: <HTML>, <HEAD>,
<TITLE> et <BODY>.
utiliser régulièrement l'option "voir" – "source
de la page".
Cours Internet / HTML - 01/10/2004
37
Balises
●
●
HTML: encadre tout le contenu du fichier
HEAD: première partie du document,
contient le titre
–
●
TITLE: titre de la page, affiché dans la barre du
de la fenêtre, les signets.
BODY: seconde partie du document, la plus
grande, encadre le contenu du document.
Cours Internet / HTML - 01/10/2004
38