WEB : INTRODUCTION Présentation du cours Séance d'introduction autour du web
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Présentation du cours
Séance d’introduction autour du web
WEB : INTRODUCTION
http://deptinfo.unice.fr/~renevier/webL3Miage
Philippe.Renevier@unice.frcontenu, organisation PRÉSENTATION DU COURS
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
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 3 / 36CONTRÔ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%
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 4 / 36ORGANISATION
semaine 01 semaine 08
cours : intro web cours : php / délégation, classe, héritage...
semaine 02 tp : ajout de news
cours : CSS semaine 09
tp : exo html cours : génération de php, serialisation
semaine 03 Rendre : vos présentations et vos exercices
cours : intro fonction / session / cookie c’est le 20 novembre
tp : exo CSS tp : news, d’autres persistance (en tout :
semaine 04 fichier, BD, XML)
cours : php / fichier et formulaire
semaine 10
cours : vers la conception
tp : premiers exo en php (date, tableau,
formulaire) tp : news, page de configuration
semaine 05 semaine 11
cours : php / fichier et formulaire Cours : vos présentations
tp : suite des exo (bandeau, session) tp : flux rss ou json.
semaine 06 semaine 12
cours : php / objet / session (suite, cours : vos présentations
autoload) tp : vos exercices
tp : fin des exo (en bonus, lien avec CSS3) semaine 13
semaine 07 tp : vos exercices
cours : xml, json contrôle terminal…
tp : lecture de news
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 5 / 36Protocole, html, CSS, serveur INTRODUCTION AU WEB
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
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 7 / 36DOMAIN 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 ???? DNS
Réponse serveur
134.59.9.1 DNS
serveur
134.59.9.1 DNS
serveur
web serveur
DNS
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 8 / 36DÉ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]
Exemple 1 : une ressource statique est un fichier html
http:// deptinfo.unice.fr /~renevier/ POO
Exemple 2 : une ressource dynamique générée avec des paramètres
http:// iihm.imag.fr /cgi-bin/Vitesse2/ vitesse2.bat ?Keywords=unsa&SearchEngine=Goo
gle&Kind=Search&InfoSpace=&MaxInf
oNumber=100&VitesseMode=Win
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin
9 9 / 36CODAGE 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
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 10 / 36PROTOCOLE 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
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 11 / 36COMMANDE D’UNE REQUÊTE HTTP
Commande Description
GET Requête de la ressource située à l'URL spécifiée
Requête de l'en-tête de la ressource située à l'URL
HEAD
spécifiée
Envoi de données au programme situé à l'URL
POST
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
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 12 / 36RÉPONSE HTTP
Syntaxe
VERSION-HTTP CODE EXPLICATION
EN-TETE : Valeur
...
EN-TETE : Valeur
Ligne vide
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
…
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 13 / 36CODE 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
Ces codes indiquent que la ressource n'est plus à
30x Redirection
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
Classique! Le serveur n'a rien trouvé à l'adresse
404 NOT FOUND spécifiée.
50x Erreur due au serveur Ces codes indiquent qu'il y a eu une erreur interne du serveur
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 14 / 36EN RÉSUMÉ… 1. L’utilisatrice veut voir la page
http://deptinfo.unice.fr/~renevier
2. Tape l’adresse, valide
3. Le navigateur fait une requête 3.f
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 Internet :
- 3.b identification de la
localisation de la page
(DNS)
3.c Internet - …
- 3.f Internet aiguille la
« aiguille » la réponse vers l’ordinateur
machine jusqu’à la demandeur
l’endroit identifié (=
un ordinateur)
3.d - Réception de la demande par le serveur
3.e - Identification du document à partir de l’URL
3.f - Renvois de la réponse (document ou erreur)HTML : LANGAGE DES DOCUMENTS SUR LE WEB
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
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 17 / 36TEXTE ORGANISÉ VISUELLEMENT TEXTE STRUCTURÉ POUR L’ORDINATEUR
Le dormeur du val Le dormeur du val
C'est un trou de verdure où chante une rivière
C'est un trou de verdure où chante une rivière Accrochant follement aux herbes des haillons
Accrochant follement aux herbes des haillons D'argent ; où le soleil, de la montagne fière,
D'argent ; où le soleil, de la montagne fière, Luit : c'est un petit val qui mousse de rayons.
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,
Un soldat jeune, bouche ouverte, tête nue, Dort ; il est étendu dans l'herbe, sous la nue,
Et la nuque baignant dans le frais cresson bleu, Pâle dans son lit vert où la lumière pleut.
Dort ; il est étendu dans l'herbe, sous la nue, Les pieds dans les glaïeuls, il dort. Souriant comme
Sourirait un enfant malade, il fait un somme :
Les pieds dans les glaïeuls, il dort. Souriant comme Nature, berce-le chaudement : il a froid.
Sourirait un enfant malade, il fait un somme : Les parfums ne font pas frissonner sa narine ;
Nature, berce-le chaudement : il a froid. Il dort dans le soleil,
Les parfums ne font pas frissonner sa narine ;
Il dort dans le soleil, la main sur sa poitrine, la main sur sa poitrine,
Tranquille. Il a deux trous rouges au côté droit. Tranquille. Il a deux trous rouges au côté droit.
EXEMPLE DE STRUCTURATION
Arthur RIMBAUD (1854-1891)INTERPRÉTATION DU HTML
Navigateur : recherche des balises et interprétation
….
& (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
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 19 / 36LANGAGE HTML
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 : Mon document
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 :
Balises conteneur
Balises vides
Corps_balise (texte et balises)
{attibut="val"} : liste de couples attribut=‘val’ séparés par des espaces
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 20 / 36PROPRIÉ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…
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 21 / 36FICHIER XHTML MINIMUM
…
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 22 / 36FICHIER HTML5 MINIMUM
…
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 23 / 36BALISES 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 !!)
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 24 / 36BALISES STRUCTURELLES
html : définition du document
un head, un body
head : partie comprenant les entêtes et meta-données du document
Un … 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
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 25 / 36NIVEAU 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.
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 26 / 36NIVEAU 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
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 27 / 36BALISE HYPERTEXT - INLINE
référencer une page par son URI
….
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é
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
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 28 / 36BALISE – IMAGE - INLINE
Balise pour insérer des images.
Balise vide, les paramètres sont des attributs
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)
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 29 / 36PARAGRAPHES (BALISES TEXTUELLES) - BLOCK
p (paragraph)
Balisede niveau « block »
Contient du « inline » : pas de dans un !!
pre (texte pré-formaté)
espaces et retours à la ligne conservés
Balise de niveau « block »
Contient « inline » sauf IMG | OBJECT |BIG | SMALL |
SUB | SUP
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 30 / 36BALISE LISTES - BLOCK
(non ordonnée) ou (ordonnée)
Contiennent uniquement et au moins une
Attributs dépréciés : type (1, A, a, i, I) ; start (ol : une valeur de
début) ; compact
(list item)
« Flow »
Attributs dépréciés : type, value (une valeur), compact
(Définition list)
(dt | dd)+
(term) ou (définition)
dt contient du « inline »
dd contient du « flow »
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 31 / 36BALISES – TABLEAUX - BLOCK
(caption?, (col*|colgroup*), thead?, tfoot?, tbody+)
Le tableau peut avoir une légende
On peut regrouper les colonnes ( et )
Il peut y avoir une entête (répété pour impression) :
Il peut y avoir un pied de tableau (répété pour impression) :
Il doit y avoir au moins un corps de tableau
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.
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 32 / 36BALISES – 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
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 33 / 36BALISES – 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
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) )
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 34 / 36BALISE – 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
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 35 / 36NOUVELLES BALISES DE STRUCTURES HTML5
: notamment pour les menu /
barres de navigation
: notamment pour les pieds de
page
: notamment pour les barres de
navigation
: un contenu
: sous partie d’un article ou
regroupe d’article
: un encart
and
Exemple (source Michel Buffa) :
http://jsbin.com/agoyoj/7/edit
Source de l’image :
http://www.fredcavazza.net/files/2009/09/
html5_structure.png
Université Nice Sophia Antipolis L3 Miage – Web – Philippe Renevier-Gonin 36 / 36Vous pouvez aussi lire
