web : introduction -...
TRANSCRIPT
WEB : INTRODUCTION
Présentation du cours
Séance d’introduction autour du web
http://deptinfo.unice.fr/~renevier/webL3Miage
L3 Miage – Web – Philippe Renevier-Gonin 3 / 36 Université Nice Sophia Antipolis
CONTENU DU COURS
Objectif principal : Persistance sur le web
Persistance éphémère (session, cookie)
Persistance à long terme :
Fichier(s)
BD
Sérialisation
Besoin d’un minimum de connaissance sur le web
Ouverture sur la conception
L3 Miage – Web – Philippe Renevier-Gonin 4 / 36 Université Nice Sophia Antipolis
CONTRÔLE DE CONNAISSANCE
Une note de tp : 20%
Une note de contrôle intermédiaire (QCM, questions de cours, questions de tp) : 20%
Une note d’étude approfondie : 20% Présentation de 15 min en cours (support, oral)
Questions possibles
Un exercice à faire en tp (support, corrigé)
En groupe de 4
Sujet autour du web (php, html5, javascript, etc.) à faire valider À proposer pour le mercredi 25 septembre
Un contrôle terminal (exercice, étude de cas) : 40%
L3 Miage – Web – Philippe Renevier-Gonin 5 / 36 Université Nice Sophia Antipolis
ORGANISATION semaine 01
cours : intro web
semaine 02
cours : CSS
tp : exo html
semaine 03
cours : intro fonction / session / cookie
tp : exo CSS
semaine 04
cours : php / fichier et formulaire
tp : premiers exo en php (date, tableau,
formulaire)
semaine 05
cours : php / fichier et formulaire
tp : suite des exo (bandeau, session)
semaine 06
cours : php / objet / session (suite,
autoload)
tp : fin des exo (en bonus, lien avec CSS3)
semaine 07
cours : xml, json
tp : lecture de news
semaine 08
cours : php / délégation, classe, héritage...
tp : ajout de news
semaine 09
cours : génération de php, serialisation
Rendre : vos présentations et vos exercices
c’est le 20 novembre
tp : news, d’autres persistance (en tout :
fichier, BD, XML)
semaine 10
cours : vers la conception
tp : news, page de configuration
semaine 11
Cours : vos présentations
tp : flux rss ou json.
semaine 12
cours : vos présentations
tp : vos exercices
semaine 13
tp : vos exercices
contrôle terminal…
L3 Miage – Web – Philippe Renevier-Gonin 7 / 36 Université Nice Sophia Antipolis
UNE PAGE WEB…
Pour l’internaute (client) Un navigateur
Une URL
Un document
Des scripts (programmes)
Pour le « fournisseur » (serveur) Une adresse
Un serveur (ordinateur)
Un serveur (logiciel, extensions)
Des documents (fichiers)
Des scripts (programmes)
une infrastructure Physique
logicielle
L3 Miage – Web – Philippe Renevier-Gonin 8 / 36 Université Nice Sophia Antipolis
DOMAIN NAME SERVER ET @IP
Je veux voir http://deptinfo.unice.fr/~renevier
Mon navigateur veut récupérer ~renevier sur http://deptinfo.unice.fr/
Demande de résolution
deptinfo.unice.fr ???? serveur
DNS
serveur
DNS
serveur
DNS
DNS
Réponse
134.59.9.1
134.59.9.1
serveur
web
L3 Miage – Web – Philippe Renevier-Gonin 9 / 36 Université Nice Sophia Antipolis
DÉSIGNER UN DOCUMENT SUR LE WEB : URL
NOTION d’URL (Uniform Resource Locator) :
Un URL représente une identification d’un endroit où stocke une ressource sur
le réseau Internet
Une ressource peut-être stockée à plusieurs endroits, elle possède dont un ou
plusieurs URL
Format d’un URL : (note : le symbole [xxx] signifie que xxx est facultatif)
Protocole:// Hôte [:Port] Chemin Nom [#Ancre] [?Paramètres]
9
http:// iihm.imag.fr /cgi-bin/Vitesse2/ vitesse2.bat ?Keywords=unsa&SearchEngine=Goo
gle&Kind=Search&InfoSpace=&MaxInf
oNumber=100&VitesseMode=Win
http:// deptinfo.unice.fr /~renevier/ POO
Exemple 1 : une ressource statique est un fichier html
Exemple 2 : une ressource dynamique générée avec des paramètres
L3 Miage – Web – Philippe Renevier-Gonin 10 / 36 Université Nice Sophia Antipolis
CODAGE D’UNE URL Tabulation %09 < %3C
Espace %20 = %3D
" %22 > %3E
# %23 ? %3F
% %25 @ %40
& %26 [ %5B
( %28 \ %5C
) %29 ] %5D
+ %2B ^ %5E
, %2C ' %60
. %2E { %7B
/ %2F | %7C
: %3A } %7D
; %3B ~ %7E
L3 Miage – Web – Philippe Renevier-Gonin 11 / 36 Université Nice Sophia Antipolis
PROTOCOLE HTTP :
TRANSFERT ENTRE LE CLIENT ET LE SERVEUR
HTTP (HyperText Transfer Protocol) : protocole le plus utilisé sur Internet depuis 1990.
La version 0.9 était uniquement destinée à transférer des données sur Internet (en particulier des pages Web écrites en HTML).
La version 1.0 du protocole (la plus utilisée) permet désormais de transférer des messages avec des en-têtes décrivant le contenu du message en utilisant un codage de type MINE.
Transfert de fichiers localisés grâce à une URL entre un navigateur (le client) et un serveur Web (httpd).
Le navigateur effectue une requête HTTP
Le serveur traite la requête puis envoie une réponse HTTP
RFC 1945 - Hypertext Transfer Protocol -- HTTP/1.0
RFC 2616 - Hypertext Transfer Protocol -- HTTP/1.1
L3 Miage – Web – Philippe Renevier-Gonin 12 / 36 Université Nice Sophia Antipolis
COMMANDE D’UNE REQUÊTE HTTP
Commande Description
GET Requête de la ressource située à l'URL spécifiée
HEAD Requête de l'en-tête de la ressource située à l'URL
spécifiée
POST Envoi de données au programme situé à l'URL
spécifiée
PUT Envoi de données à l'URL spécifiée
DELETE Suppression de la ressource située à l'URL spécifiée
L3 Miage – Web – Philippe Renevier-Gonin 13 / 36 Université Nice Sophia Antipolis
RÉPONSE HTTP
Syntaxe
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-Length : 1245
Last-Modified : Fri, 14 Jan 2000 08:25:13 GMT
…
L3 Miage – Web – Philippe Renevier-Gonin 14 / 36 Université Nice Sophia Antipolis
CODE RÉPONSE HTTP
Code Message Description
10x Message d'information Ces codes ne sont pas utilisés dans la version 1.0 du protocole
20x Réussite Ces codes indiquent le bon déroulement de la transaction
30x Redirection Ces codes indiquent que la ressource n'est plus à
l'emplacement indiqué
40x Erreur due au client Ces codes indiquent que la requête est incorrecte
403 FORBIDDEN L'accès à la ressource est tout simplement interdit
404 NOT FOUND
Classique! Le serveur n'a rien trouvé à l'adresse
spécifiée.
50x Erreur due au serveur Ces codes indiquent qu'il y a eu une erreur interne du serveur
EN RÉSUMÉ…
Internet : - 3.b identification de la
localisation de la page
(DNS)
- …
- 3.f Internet aiguille la
réponse vers l’ordinateur
demandeur
3.d - Réception de la demande par le serveur
3.e - Identification du document à partir de l’URL
1. L’utilisatrice veut voir la page
http://deptinfo.unice.fr/~renevier
2. Tape l’adresse, valide
3. Le navigateur fait une requête
4. Le navigateur attend la réponse
5. Affiche la « page »
6. L’utilisatrice lit la page
3.a : le navigateur, via
l’ordinateur, demande
un document
3.c Internet
« aiguille » la
machine jusqu’à la
l’endroit identifié (=
un ordinateur)
3.f - Renvois de la réponse (document ou erreur)
3.f
L3 Miage – Web – Philippe Renevier-Gonin 17 / 36 Université Nice Sophia Antipolis
LANGAGE HTML
Une balise : une instruction de mise en forme
Une balise : contient des textes et/ou des
autres balises autorisées
Une balise : structure le texte
Avant : une balise : mise en forme
EXEMPLE DE STRUCTURATION
TEXTE ORGANISÉ VISUELLEMENT TEXTE STRUCTURÉ POUR L’ORDINATEUR
Le dormeur du val
C'est un trou de verdure où chante une rivière
Accrochant follement aux herbes des haillons
D'argent ; où le soleil, de la montagne fière,
Luit : c'est un petit val qui mousse de rayons.
Un soldat jeune, bouche ouverte, tête nue,
Et la nuque baignant dans le frais cresson bleu,
Dort ; il est étendu dans l'herbe, sous la nue,
Pâle dans son lit vert où la lumière pleut.
Les pieds dans les glaïeuls, il dort. Souriant comme
Sourirait un enfant malade, il fait un somme :
Nature, berce-le chaudement : il a froid.
Les parfums ne font pas frissonner sa narine ;
Il dort dans le soleil, la main sur sa poitrine,
Tranquille. Il a deux trous rouges au côté droit.
<h1>Le dormeur du val</h1>
<p>C'est un trou de verdure où chante une rivière<br />
Accrochant follement aux herbes des haillons<br />
D'argent ; où le soleil, de la montagne fière, <br />
Luit : c'est un petit val qui mousse de rayons.</p>
<p>Un soldat jeune, bouche ouverte, tête nue, <br />
Et la nuque baignant dans le frais cresson bleu, <br />
Dort ; il est étendu dans l'herbe, sous la nue, <br />
Pâle dans son lit vert où la lumière pleut.</p>
<p>Les pieds dans les glaïeuls, il dort. Souriant comme<br />
Sourirait un enfant malade, il fait un somme :<br />
Nature, berce-le chaudement : il a froid.</p>
<p>Les parfums ne font pas frissonner sa narine ; <br />Il dort dans le soleil,
la main sur sa poitrine, <br />
Tranquille. Il a deux trous rouges au côté droit.</p>
Arthur RIMBAUD (1854-1891)
L3 Miage – Web – Philippe Renevier-Gonin 19 / 36 Université Nice Sophia Antipolis
INTERPRÉTATION DU HTML
Navigateur : recherche des balises et interprétation <NOM_DE_BALISE>….</NOM_DE_BALISE>
& (caractères spéciaux) : "&#code ascii;". Ex :
il y a : & /& ; < / < ; > / >
é / é (note les caractères s'obtiennent par la &+lettre+accent; les accents étant acute, grave, circ, cedil, tilde et aussi les ligatures avec lig, e.g. æ / æ).
Liens hypertexte : Chaque document HTML identifié par une URL
Un document HTML peut contenir des liens vers les autres
documents (html, multimédia, programme, etc.)
Outil de validation : http://validator.w3.org
L3 Miage – Web – Philippe Renevier-Gonin 20 / 36 Université Nice Sophia Antipolis
BALISES DE BASE
Format général de balise :
Les balises conteneurs : les balises contiennent de textes et des balises autorisées.
Une balise conteneur est utilisée pour présenter ou structurer le texte et les balises
qui lui appartiennent.
Exemple : <h1> Mon document </h1> <!-- titre -->
Les balises vides : qui sont destinées à insérer un élément hors du texte dans le
document : séparateur, saut paragraphe, saut de ligne, image, …
Exemple : <hr> <!-- ajouter un séparateur horizontal -->
LANGAGE HTML
Balises conteneur
<nom_Balise {attribut="val"}>
Corps_balise (texte et balises)
</nom_Balise>
Balises vides
<nom_Balise {attribut="val"} />
{attibut="val"} : liste de couples attribut=‘val’ séparés par des espaces
L3 Miage – Web – Philippe Renevier-Gonin 21 / 36 Université Nice Sophia Antipolis
PROPRIÉTÉS DES BALISES HTML
Propriétés générales (mais pas systématiques)
id, class (document-wide identifiers)
lang (language information), dir (text direction)
title (element title)
style (inline style information )
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events )
Définition dans la DTD de html…
L3 Miage – Web – Philippe Renevier-Gonin 22 / 36 Université Nice Sophia Antipolis
FICHIER XHTML MINIMUM
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>…</title>
</head>
<body>
</body>
</html>
L3 Miage – Web – Philippe Renevier-Gonin 23 / 36 Université Nice Sophia Antipolis
FICHIER HTML5 MINIMUM
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
</body>
</html>
L3 Miage – Web – Philippe Renevier-Gonin 24 / 36 Université Nice Sophia Antipolis
BALISES HTML / XHTML
Balises structurelles
Balises contenant du texte (phrase)
Balise hypertext
Balises de titres
Balises de paragraphes et citations
Balises de listes
Balises de table (tableaux)
Balises de formulaire
les images cliquables, objets, applet
Balises de Frame
Balises Meta (entêtes)
Basiles HTML5…
Balises de mise en forme (dépréciées !!)
L3 Miage – Web – Philippe Renevier-Gonin 25 / 36 Université Nice Sophia Antipolis
BALISES STRUCTURELLES
html : définition du document
un head, un body
head : partie comprenant les entêtes et meta-données du document
Un <title> … </title> obligatoire
Les balises « meta », « script », « style », etc. optionnelles
title : titre du document
Titre de la page (en haut du navigateur)
Contient du texte
body : corps du document
Partie centrale du navigateur
« block » ou script
ins et del
Attribut spécifique : onload, onunload
L3 Miage – Web – Philippe Renevier-Gonin 26 / 36 Université Nice Sophia Antipolis
NIVEAU BLOCK
Niveau de structuration du document à gros grain Regroupement de phrase
Regroupement de « paragraphe »
Balises concernées : Regroupement générique : div | fieldset
Paragraphes : p | pre
Titres : h1 | h2 | h3 | h4 | h5 | h6
Listes : ol | ul | dl
Tableau : table
Formulaire : form
Etc.
L3 Miage – Web – Philippe Renevier-Gonin 27 / 36 Université Nice Sophia Antipolis
NIVEAU INLINE
Niveau de la phrase
texte (PCDATA)
phrase : em | strong | code | samp | cite …
special : a (lien, avec href)| img (image, avec alt et src) | br (retour à la ligne, balise vide) | script| sub | sup | span …
formulaire : input | select | textarea | label | button
etc
L3 Miage – Web – Philippe Renevier-Gonin 28 / 36 Université Nice Sophia Antipolis
BALISE <a> HYPERTEXT - INLINE
référencer une page par son URI <a href="http://deptinfo.unice.fr">….</a>
référencer à l’intérieur d’une page
référence : href= "URI#nom de l'ancre" (lien local si URI ="") "nom de l'ancre" = la valeur d’un attribut id d’une balise (n’importe laquelle) http://deptinfo.unice.fr/~renevier/introweb/html/exo/index.html#exo2
Contient des éléments html « inline » excepté <a>
Attributs
href (uri)
name (id) hreflang = langcode : langue de la destination, seulement quand il y a href type = content-type (MIMETYPE : ftp://ftp.isi.edu/in-
notes/iana/assignments/media-types/.) rel = relation entre le document courant et la cible (quand href)
Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix ,Help, Bookmark
rev = idem rel (dans le sens inverse) charset = encodage de la cible
L3 Miage – Web – Philippe Renevier-Gonin 29 / 36 Université Nice Sophia Antipolis
BALISE <img> – IMAGE - INLINE
Balise pour insérer des images.
Balise vide, les paramètres sont des attributs
<img src="http://deptinfo.unice.fr/~renevier/philippe2.jpg"
alt="picture of philippe at 29" />
src="philippe.jpg" : adresse de l’image (adresse
relative ou absolue en http://)
alt="picture of philippe at 29" : description de
l’image (en remplacement)
L3 Miage – Web – Philippe Renevier-Gonin 30 / 36 Université Nice Sophia Antipolis
PARAGRAPHES (BALISES TEXTUELLES) - BLOCK
p (paragraph)
Balise de niveau « block »
Contient du « inline » : pas de <p> dans un <p> !!
pre (texte pré-formaté)
espaces et retours à la ligne conservés
Balise de niveau « block »
Contient « inline » sauf IMG | OBJECT |BIG | SMALL | SUB | SUP
L3 Miage – Web – Philippe Renevier-Gonin 31 / 36 Université Nice Sophia Antipolis
BALISE LISTES - BLOCK
<ul> (non ordonnée) ou <ol> (ordonnée) Contiennent uniquement et au moins une <li> Attributs dépréciés : type (1, A, a, i, I) ; start (ol : une valeur de
début) ; compact
<li> (list item) « Flow » Attributs dépréciés : type, value (une valeur), compact
<dl> (Définition list) (dt | dd)+
<dt> (term) ou <dd> (définition) dt contient du « inline » dd contient du « flow »
L3 Miage – Web – Philippe Renevier-Gonin 32 / 36 Université Nice Sophia Antipolis
BALISES <table> – TABLEAUX - BLOCK
(caption?, (col*|colgroup*), thead?, tfoot?, tbody+) Le tableau peut avoir une légende <caption> On peut regrouper les colonnes (<col> et <colgroup>) Il peut y avoir une entête (répété pour impression) : <thead> Il peut y avoir un pied de tableau (répété pour impression) : <tfoot> Il doit y avoir au moins un corps de tableau <tbody>
Attributs summary (texte) align (déprécié, left,center ou right) width (largeur en pixel ou pourcentage) cellspacing (pixel ou %) -- spacing between cells -- cellpadding (pixel ou %) -- spacing within cells -- frame = void|above|below|hsides|lhs|rhs|vsides|box|border (cadre
autour du tableau): void: No sides. This is the default value. above: The top side only. below: The bottom side only. hsides: The top and bottom sides only. vsides: The right and left sides only. lhs: The left-hand side only. rhs: The right-hand side only. box: All four sides. border: All four sides.
L3 Miage – Web – Philippe Renevier-Gonin 33 / 36 Université Nice Sophia Antipolis
BALISES <table> – TABLEAUX - BLOCK
Attributs (suite)
rules = none|groups|rows|cols|all (les traits internes) none: No rules. This is the default value.
groups: Rules will appear between row groups and column groups only.
rows: Rules will appear between rows only.
cols: Rules will appear between columns only.
all: Rules will appear between all rows and columns.
border = pixel (épaisseur du trait externe)
Processus d’affichage
Résumé
Titre
Entêtes et pieds
Calcul du nombre de colonne (nombre de ligne donné par nombre de TR)
Rendu des cellules
caption (titre) Ne contient que du inline
L3 Miage – Web – Philippe Renevier-Gonin 34 / 36 Université Nice Sophia Antipolis
BALISES <table> – TABLEAUX - BLOCK
thead (entêtes) et tfoot (pieds) et tbody (corps) tr+
même nombre de colonne
ordre d’apparition
tbody toujours requis sauf si unique et pas de thead ni de tfoot
colgroup Contient des <col>
regroupement de colonnes
attribut : span (nombre) width (% ou relative (poids) )
col vide
regroupement d’attributs pour des colonnes
attribut : span (nombre) width (% ou relative (poids) )
L3 Miage – Web – Philippe Renevier-Gonin 35 / 36 Université Nice Sophia Antipolis
BALISE <table> – TABLEAUX - BLOCK
tr (ligne)
(th | td)+
th (titre) ou td (data) : les cellules
Contient du « flow »
attribut
rowspan = nombre de ligne
colspan = nombre de colonne
L3 Miage – Web – Philippe Renevier-Gonin 36 / 36 Université Nice Sophia Antipolis
NOUVELLES BALISES DE STRUCTURES HTML5
<header> : notamment pour les menu / barres de navigation
<footer> : notamment pour les pieds de page
<nav> : notamment pour les barres de navigation
<article> : un contenu
<section> : sous partie d’un article ou regroupe d’article
<aside> : un encart
<figure> and <figcaption>
Exemple (source Michel Buffa) : http://jsbin.com/agoyoj/7/edit
Source de l’image : http://www.fredcavazza.net/files/2009/09/html5_structure.png