à imprimer

Introduction
World Wide Web
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
Introduction
World Wide Web
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
Déroulement
Organisation
CM: Vendredi 10h-13h
30/01, 07/02, . . .
TP: Lundi 14h-16h
02/02, 09/02, . . .
TD: ??
...
Technique Internet de Base
Introduction au HTML
Objectifs
Maxime Morge [email protected]
Création d’une page web
Création d’un site web
Création d’une page web dynamique
Interface avec un système d’information
Licence 2
Université Jean Monnet
2008-2009
Maxime Morge
Introduction
World Wide Web
Principe du HTML
Contenus
HTML (structure, forme, liens, multimédia, cadre, . . . )
Javascript (entrée, formulaires, . . . )
PHP (idem, . . . )
SQL (syntaxe, requêtes, . . . )
PHP/MySQL (interface, . . . )
TIB HTML
Structure
Hyperlien
Maxime Morge
Mise en forme
Les cadres
Le réseau Internet
Introduction
World Wide Web
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
TCP/IP: Principe
Internet= interconnexion des différents réseaux
(internetworking ) dans un unique environnement de
communication homogène dont le point commun est de
fonctionner en suivant les protocoles TCP/IP (Transmission
Control Protocol/Internet Protocol).
Historique
milieu 70
début 80
milieu 80
1991
1993
Conclusion
TIB HTML
Le réseau ARPANET
introduction de TCP/IP dans l’OS BSD
augmentation des réseaux (universitaires) locaux
Lancement du World Wide Web
Les premières sociétés commerciales se connectent . . .
Maxime Morge
TIB HTML
Protocoles TCP/IP = 1 couche matérielle + 4 couches:
1
2
3
4
couche de liens, carte réseau (Ethernet/Wifi) + "driver"
(OS) ;
couche IP, gestion du routage, i.e. le protocole ICMP
(Internet Control Message Protocol) ;
couche transport, régulation des flux de données, i.e. les
protocoles TCP (Transmission Control Protocol) et UDP
(User Datagram Protocol );
couche application, programmes utilisateurs comme HTTP,
FTP, SMTP . . .
Hétérogénéité + Encapsulation
Maxime Morge
TIB HTML
Introduction
World Wide Web
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
TCP/IP: Principe (bis)
ps utilisateur
ex : ping
ps utilisateur
ex : FTP
ps utilisateur
ex : BOOTP
UDP
IP
IGMP
ARP
interface
matérielle
RARP
logiciel hors OS
Maxime Morge
adressage IP
adressage physique
Principe du HTML
TIB HTML
Structure
Hyperlien
Maxime Morge
Mise en forme
Les cadres
Conclusion
Votre client de messagerie (Thunderbird, Netcourrier) se connecte
à votre serveur de messagerie, i.e. un logiciel serveur située sur une
machine de votre FAI/Université pour:
la réception d’un courrier,
le serveur doit recevoir le message du serveur de l’expéditeur,
le serveur doit délivrer le message au destinataire final
(POP3/IMAP);
l’émission de message,
1
2
Hyperlien
Mise en forme
Les cadres
Conclusion
Le client et le serveur doivent utiliser le même protocole/langage de
communication:
HTTP (HyperText Transfer Protocol ) pour l’échanger des
documents hypertextes (textes, images, vidéos, sons);
FTP (File Transfert Protocol ) permet le transfère des fichiers;
SMTP (Simple Mail Transfer Protocol) pour l’envoie des
messages électroniques ;
POP3, IMAP pour la réception des messages électroniques.
Quizz: Et vos PC ? Et le P2P ?
Exemple d’application Internet: la messagerie électronique
2
Structure
Le serveur est initialement passif, à l’écoute, en attente d’une
requête;
Le client est actif, il envoie des requêtes et il attend les
réponses.
support matériel
1
Principe du HTML
Client/serveur= mode de communication entre 1 ou plusieurs
clients qui envoient des requêtes à un serveur.
logiciels dans l’OS
ICMP
World Wide Web
World Wide Web
Application Internet: client/serveur
TCP
Introduction
Introduction
le serveur doit recevoir le message de l’expéditeur (SMTP),
le serveur doit délivrer le message au serveur du destinataire
final.
Alternativement au client de messagerie, un courrielleur web
(webmail ) est un client utilisant le Web (e.g. Hotmail, Yahoo ou
Gmail). Dans ce cas, les courriels sont hébergés, consultés et
transmis sur un site Web par un serveur Web.
Maxime Morge
TIB HTML
Introduction
World Wide Web
Principe du HTML
TIB HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
Exemple d’application Internet: la messagerie électronique
Une adresse électronique :
[email protected]
Un message électronique : expéditeur, destinataires, sujet,
corps, une pièce jointe.
Une boîte : In, Out, Deleted, Archives . . .
Exemple :
From: [email protected]
To: [email protected]
Cc: [email protected]
Bcc: [email protected]
Subject: CM 1 L2 UJM
Bonjour Maxime,
Concernant le 1er CM des L2 à l’UJM, je te dis m... (-:
Cordialement,
Pierre.
Maxime Morge
TIB HTML
Introduction
World Wide Web
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
Exemple d’application Internet: la messagerie électronique
Introduction
World Wide Web
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
Le Web: une application Internet
Le World Wide Web, la toile d’araignée mondiale, est un
réseau de documents hypertextes.
Votre navigateur Web (Mozilla, Opera, IE, Safari) se
connecte à des serveurs Web, i.e. des logiciels serveurs (e.g.
Apache) situés sur les machines des hébergeurs pour:
Trucs et astuces
émettre des requêtes HTTP;
recevoir des réponse HTTP (une ressource).
Confirmer l’attachement sur un courrielleur web.
Compresser les fichiers envoyés.
Une ressource web= un élément consultable (texte, image,
sons, formulaires, script, applets . . . ).
Une page web= un document textuel consultable,
éventuellement lié à d’autres ressources.
Un site web (ou portail)= un ensemble de pages web.
Un hyperlien= un lien entre
Éviter d’envoyer des fichiers trop volumineux.
des éléments dans une même page,
différentes pages d’un même site,
ou différentes pages de différents sites.
Maxime Morge
Introduction
World Wide Web
Principe du HTML
TIB HTML
Structure
Hyperlien
Client/serveur HTTP: principe
Maxime Morge
Maxime Morge
Mise en forme
Les cadres
Conclusion
Introduction
World Wide Web
Principe du HTML
TIB HTML
Structure
Hyperlien
Le navigateur Web
TIB HTML
Maxime Morge
TIB HTML
Mise en forme
Les cadres
Conclusion
Introduction
World Wide Web
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
L’adresse Web (Uniform Resource Locator )
Introduction
Port = une “boîte au lettre” unique sur la machine (par ex :
FTP/21, SMTP/25, HTTP/80, POP3/110).
Les cadres
Conclusion
Notepad;
Emacs;
...
TIB HTML
Structure
Hyperlien
Maxime Morge
Mise en forme
Les cadres
Conclusion
Qu’est ce que le langage HTML ?
Introduction
World Wide Web
Principe du HTML
TIB HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
À quoi ressemble le langage HTML ?
HTML= langage de formatage (6= programmation) qui
permet de structurer, de mettre en forme des pages Web et
d’y inclure des ressources.
HTML est proposé en 1991 par Sir Timothy John Berners-Lee.
HTML est dérivé du SGML (Standard Generalized Markup
Language).
HTML est composé de 4 éléments:
des entités, symboles attribués aux caractères spéciaux
(e.g. à );
des commentaires, non affichés par le navigateur
(e.g. <!– blabla –>);
des éléments, appelés balises, représentent la structure ou le
comportement d’une parties du document
(e.g. <br> ou <b> blabla </b>);
des attributs de balise, déterminent les propriétés des éléments
(e.g. <A HREF="http://maxime.morge.org"
target="LINK">Moi</A>).
Maxime Morge
Mise en forme
Soit avec un éditeur WYSIWYW (What You See Is What You
Want) :
URL (Unified Ressource Location) = adresse pour une
ressource
protocole://(user:pwd@)nom.domaine.ext-:port)/chemin
(par ex,
ftp://morg1234:[email protected]:8080/perso/note.txt)
Principe du HTML
Hyperlien
Dreamweaver;
FrontPage;
M$ Word;
oowriter;
...
DNS (Domain Name Service) = système de traduction
adresse IP ↔ nom de machine
World Wide Web
Structure
Soit avec un éditeur WYSIWYG (What You See Is What You
Get):
Nom de machine = nom.domaine.ext (par ex :
webcit.univ-st-etienne.fr) .
Introduction
Principe du HTML
Comment écrire une page Web ?
Adresse IP = identifiant unique des ordinateurs (par ex :
195.83.83.36).
Maxime Morge
World Wide Web
TIB HTML
Balise = un mot clef encadré par le caractère inférieur (<) et
le caractère supérieur (>) (par ex, <H1> ou <h1>).
Comment utiliser les balises ?
un texte est encadré entre une balise ouvrante et balise
fermante :
<b> Ce texte est en gras </b> →
Ce texte est en gras
une balise est unique :
un retour à la ligne <br> après la balise →
un retour à la ligne
après la balise
Attribut = 1 élément (cle="valeur") de la balise ouvrante
qui définit une propriété supplémentaire :
<p align="center">paragraphe centré</p>
Les balises peuvent être imbriquées :
<b><i>Texte est en italique</i> et en gras</b> →
Texte est en italique et en gras
Maxime Morge
TIB HTML
Introduction
World Wide Web
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
Les caractères spéciaux
Introduction
World Wide Web
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
Les cadres
Conclusion
Structure d’un document HTML
Une page web= fichier texte écrit avec 128 caractères
(A-Z|a-z|0-9. . . ).
Une page web= document numérique affiché avec 256
caractères (A-Z|a-z|0-9|é,à,. . . ).
Code HTML
&agrave;
&eacute;
&ocirc;
&ugrave;
&oelig;
&quot;
&amp;
Maxime Morge
Introduction
World Wide Web
Principe du HTML
<HTML>
<HEAD>
<META NAME="author" CONTENT="M Morge">
<META NAME="description" CONTENT="Site pro.">
<META NAME="keywords" CONTENT="enseignement, recherche">
<TITLE>Dr. Maxime Morge - Universit&agrave; di Pisa</TITLE>
</HEAD>
caractère
à
é
ô
ù
œ
"
&
<BODY>
Contenu
</BODY>
</HTML>
TIB HTML
Structure
Hyperlien
Structuration hiérarchique
Maxime Morge
Mise en forme
Les cadres
Conclusion
Introduction
World Wide Web
Principe du HTML
TIB HTML
Structure
Hyperlien
Mise en forme
Conteneur
Conteneur = balise qui identifie un contenu particulier
6 niveaux de titre (heading ) :
<h1>Titre de niveau 1</h1> →
Titre de niveau 1
<h2>Titre de niveau 2</h2> →
Titre de niveau 2
...
<h6>Titre de niveau 6</h6> →
Titre de niveau 6
<p>paragraphe</p> →
paragraphe
Balise
<CITE>
<CODE>
<EM>
<SAMP>
<STRONG>
<DFN>
<BLOCKQUOTE>
<ADDRESS>
Contenu
une citation
une instruction
une emphase
un exemple
une accentuation
une définition
une note
une adresse
<EM> Une emphase </EM> →
Une emphase
Maxime Morge
TIB HTML
Maxime Morge
TIB HTML
Introduction
World Wide Web
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
Liste= élément structuré et divisé en 6= articles
Introduction
World Wide Web
Principe du HTML
World Wide Web
Balise
<TABLE></TABLE>
<CAPTION></CAPTION>
<TR></TR>
<TH></TH>
<TD></TD>
TIB HTML
Structure
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
Tableau= élément structuré et divisé en lignes et en colonnes
Liste ordonnée :
<ol>
<li> article 1 </li>
</ol>
Liste non-ordonnée :
<ul>
<li> article 1 </li>
</ul>
Liste de définition :
<dl>
<dt>Terme 1</dt>
<dd>Définition 1</dd>
<dt>Terme 2</dt>
<dd>Définition 2</dd>
</dl>
Maxime Morge
Introduction
Contenu
le tableau
le titre
une ligne (Table Row )
cellules d’en-tête (Table Header )
cellules de valeur (Table Data)
Maxime Morge
Hyperlien
Mise en forme
Exemple de tableau
Les cadres
Conclusion
Introduction
World Wide Web
Principe du HTML
TIB HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
Lien hypertexte
Lien hypertexte = élément (par ex, texte bleu souligné) qui
mène vers une autre URL.
Ancrage (<a href="URL">Cliquez ici</a>) où URL=
<TABLE BORDER="1">
<CAPTION> Le titre du tableau </CAPTION>
<TR>
<TH> Titre A1 </TH>
<TH> Titre A2 </TH>
<TH> Titre A3 </TH>
<TH> Titre A4 </TH>
</TR>
<TR>
<TH> Titre B1 </TH>
<TD> Valeur B2 </TD>
<TD> Valeur B3 </TD>
<TD> Valeur B4 </TD>
</TR>
</TABLE>
Titre A1
Titre B1
un page cible d’un autre site
(e.g. <a href="http://www.google.fr">Google</a>)
un page cible d’un même site avec :
un chemin relatif
(e.g. <a href="../index.html">Présentation</a>)
un chemin absolu
(e.g. <a
href="http:://w3.org/Public/index.html">Présentation</a>)
des éléments dans une même page :
Titre A2
Titre A3
Valeur B2
Valeur B3
Le titre du tableau
Maxime Morge
TIB HTML
Titre A4
Valeur B4
un ancrage
(e.g. <a name="art1">Article 1</a>) ;
un lien
(e.g. <a href="statut.html#art1">Go to</a>
Maxime Morge
TIB HTML
Introduction
World Wide Web
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
Image
Introduction
World Wide Web
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
Les couleurs
chiffre hexadécimal = 0, 1, . . . , 9, A, B, . . . , F
Les formats d’images acceptés =
attribut="# RRVVBB" = 6 chiffres hexadécimaux
représentant 2 à 2 les tons de rouge (R), de vert (V) et de
bleu (B).
JPEG (.jpg, .jpeg) : un grand nombre de couleurs, images
bien compressées;
PNG (.png) : taille faible, peu de couleurs, images entrelacées
(affichage progressif);
GIF (.gif) : idem que PNG en moins bien.
Balise simple =
<IMG SRC="URL" ALT="Texte remplaçant l’image"
TITLE="Texte à afficher">.
Par ex, <IMG SRC="./moi.png" ALT="Ma photo"
TITLE="C’est moi">
Maxime Morge
Introduction
World Wide Web
Principe du HTML
TIB HTML
Structure
Hyperlien
Mise en forme
Style du contenu
Les cadres
Conclusion
Introduction
World Wide Web
couleur
red
green
blue
magenta
orange
codage
# FF0000
# 00FF00
# 0000FF
# FF00FF
# FFA500
Maxime Morge
TIB HTML
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Style de texte
Balise de style = modifient l’apparence du texte.
Attributs de la balise <BODY>
Attribut
BACKGROUND="url"
BGCOLOR="couleur"
LINK="couleur"
ALINK="couleur"
VLINK="couleur"
TEXT="couleur"
Effet
l’image
couleur
couleur
couleur
couleur
couleur
Maxime Morge
à l’url en arrière-plan
en arrière-plan
des liens hypertextes
des liens actifs
des liens déjà visités
du texte
TIB HTML
<b> Ce texte est en gras </b> →
Ce texte est en gras
<i> Ce texte est en italique </i> →
Ce texte est en italique
<tt> Écrit par une machine à écrire </tt> →
Écrit par une machine à écrire
Ce texte est en <sub>indice</sub> →
Ce texte est en indice
Ce texte est en <sup>exposant</sup> →
Ce texte est en exposant
Maxime Morge
TIB HTML
Conclusion
Introduction
World Wide Web
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
Style des paragraphes et des titres
Introduction
World Wide Web
Principe du HTML
Balise
<OL>
Attribut
TYPE
<UL>
TYPE
Exemple :
<H1 ALIGN=justify> Titre centré </H1> →
Titre centré
Maxime Morge
Principe du HTML
Mise en forme
Les cadres
Conclusion
Les cadres
Conclusion
Attributs de la balise <IMG>
ALIGN=left : texte aligné à gauche ;
ALIGN=right : texte aligné à droite ;
ALIGN=center : texte centré ;
ALIGN=justify : texte justifié ;
World Wide Web
Hyperlien
Style des listes
ALIGN = attribut pour la disposition du texte :
Introduction
Structure
TIB HTML
Structure
Hyperlien
Style de liste
Valeur
1
A
a
I
i
circ
square
Effet
chiffre
capital
minuscule
chiffre romain capital
chiffre romain minuscule
puce circulaire
puce carrée
Maxime Morge
Mise en forme
Les cadres
Conclusion
Introduction
World Wide Web
Principe du HTML
TIB HTML
Structure
Hyperlien
Styles de images
<ol type=I >
<li> article 1
<ol type=i>
<li>article 1.1</li>
</ol>
</li>
<li> article 2</li>
</ol>
Maxime Morge
TIB HTML
Attribut
HEIGHT
WIDTH
ALIGN
BORDER
Valeur
nombre
nombre
bottom
center
left
middle
top
right
nombre
Effet
hauteur de l’image
largeur de l’image
Alignement
de l’image
largeur de la bordure.
Maxime Morge
TIB HTML
Mise en forme
Introduction
World Wide Web
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Comment afficher plusieurs pages dans différentes zones ?
Conclusion
Introduction
World Wide Web
Principe du HTML
Structure
Hyperlien
Mise en forme
Les cadres
Conclusion
À emporter
Les cadres (frames) ont été introduit à partir de HTML 4.0
<FRAMESET> à la place de <BODY>.
2 cadres verticaux
<FRAMESET COLS="20%,80%">
<FRAME SRC="frame1.htm" NAME="gauche">
<FRAME SRC="frame2.htm" NAME="droite">
</FRAMESET>
2 cadres horizontaux
Contenu: HTML (structure, forme, liens, multimédia, cadre).
Internet: le réseau des réseaux.
Le Web: 1 application Internet.
<FRAMESET ROWS="20%,80%">
<FRAME SRC="frame1.htm" NAME="haut">
<FRAME SRC="frame2.htm" NAME="bas">
</FRAMESET>
HTML: langage de formatage des pages webs.
2 cadres horizontaux et un vertical
<FRAMESET COLS="20%,80%">
<FRAME SRC="frame1.htm" NAME="gauche">
<FRAMESET ROWS="50%, 50%">
<FRAME SRC="frame2.htm" NAME="droit_haut">
<FRAME SRC="frame3.htm" NAME="droit_bas">
</FRAMESET>
</FRAMESET>
Maxime Morge
Objectifs: création d’une page web.
TIB HTML
HTML: sa syntaxe.
Maxime Morge
TIB HTML