Introduction et HTML

Jean-Christophe Routier

Description

Présentation des bases de la création de documents web par la découverte des technologies « côté client ».

Informations

• Publié par: Force_IT
• Nombre de lectures: 51
• Licence : En savoir +
  Paternité, pas d'utilisation commerciale, partage des conditions initiales à l'identique
• Langue: Français

Extrait

TW1 Introduction Documents Web HTML Contenu Arbres TW1 Introduction Documents Web HTML Contenu Arbres
Introduction
Introduction et HTML
Objectifs :
Technologies du Web 1
◮
Pr´esentation des bases de la cr´eation de documents web par la
d´ecouverte des technologies « cotˆ ´e client »
Jean-Christophe Routier
◮
cr´eation de la page, contenu et forme : HTML/CSS
Licence 1 SESI
◮
programmation : javascript
Universit´e Lille 1
◮
approfondi et prolong´e par l’UE Technologies du Web 2 du S4
Informatique
http://portail.fil.univ-lille1.fr/ls2/tw1
Universit´e Lille 1 - Licence 1 SESI Technologies du Web 1 1 Universit´e Lille 1 - Licence 1 SESI Technologies du Web 1 2
TW1 Introduction Documents Web HTML Contenu Arbres TW1 Introduction Documents Web HTML Contenu Arbres
Ce cours n’est pas... A l’issue de ce module vous devriez...
ˆ
◮
Etre capables de concevoir des documents web dans le respect
◮
... un catalogue exhaustif des fonctionnalit´es HTML et CSS
des standards.
◮
... un cours de « cr´eation graphique » de page web
◮
Connaˆıtre les principaux standards du web : (X)HTML 5, CSS,
◮
... un cours complet sur javascript
Javascript, DOM
◮ ◮
pas de « programmation objet »
Maˆıtriser la notion de s´eparation contenu / forme / dynamicit´e
◮
◮
pas d’utilisation de frameworks existants Savoir
◮
mod´eliser un document sous forme arborescente et traduire ce mod`ele en
◮
... un cours complet sur les technologies web
un document (X)HTML 5
◮
pas de programmation cˆot´e serveur (php, J2EE, etc.)
◮
r´ealiser la mise en forme en utilisant le langage CSS
◮
pas de bases de donn´ees
◮
rendre le document dynamique et le manipuler via l’interface DOM /
◮
pas d’« ajax »
javascript
ˆ
◮
Etre conscient de l’importance du respect des normes
Bon alors...
◮
Maˆıtriser le processus de r´edaction et de validation des documents.
on va faire quoi ?
◮
Savoir utiliser des outils de d´eveloppement adapt´es
◮
inspecteurs de structure HTML et de style CSS,
◮
debugger javascript
Universit´e Lille 1 - Licence 1 SESI Technologies du Web 1 3 Universit´e Lille 1 - Licence 1 SESI Technologies du Web 1 4TW1 Introduction Documents Web HTML Contenu Arbres TW1 Introduction Documents Web HTML Contenu Arbres
A l’issue de ce module vous devriez... Fonctionnement
◮
quelques cours d’amphi, pas n´ecessairement chaque semaine
◮
Savoir d´evelopper des programmes en javascript et connaˆıtre les
◮
notions d’ordre g´en´eral
bases de ce langage.
◮
2 TD d’1h30 par semaine, tous en « salle machines »
◮
syntaxe
◮
apprendre par la pratique
◮
sp´ecificit´e du langage
◮
lire les documentations propos´ees
◮
r´eutiliser ce qui a ´et´e vu en ocaml (InitProg et API1)
◮
savoir rechercher une information, l’analyser et l’utiliser
◮
fonctionnalit´es « de base » du langage
◮
explorer, essayer
◮
produire des pages web dynamiques
◮
r´ealisation de « mini-projets »
◮
Connaˆıtre les bases de la programmation ´ev´enementielle.
◮
principes ◮
exercices `a rendre r´eguli`erement, pris en compte dans l’´evaluation
◮
mise en œuvre
ˆ
◮
Etre capables de rechercher des informations dans un document
De nombreux ´el´ements seront acquis via les exercices.
et de les exploiter
◮
sp´ecifications de standards (HTML, CSS) Evaluation :
◮
sites de r´ef´erences
contrˆoles en TD + devoir final + exercices rendus
Universit´e Lille 1 - Licence 1 SESI Technologies du Web 1 5 Universit´e Lille 1 - Licence 1 SESI Technologies du Web 1 6
TW1 Introduction Documents Web HTML Contenu Arbres TW1 Introduction Documents Web HTML Contenu Arbres
Internet et le web
◮
W3C « World Wide Web Consortium »
◮
Internet : un r´eseau mondial (supranational) de machines
◮
organisme de normalisation charg´e de promouvoir la compatibilit´e des
interconnect´ees
technologies du web
◮
un r´eseau de r´eseaux
◮
« un seul web partout et pour tous »
◮
des protocoles de communication : TCP-IP
◮
nombreuses applications : courrier electronique, transfert de fichiers
´
(ftp), messagerie instantan´ee, peer-to-peer, World Wide Web
◮
HTML5 = HTML5 + CSS3 + javascript
◮
le Web (Tim Berners-Lee, 1989) :
◮
syst`eme d’information r´eparti en « pages web » = documents web
◮
bas´e sur la notion d’hypertexte et la notion d’hyperliens permettant de
naviguer entre les documents web
֒→ les documents forment un graphe = « toile »
◮
des protocoles de commmunication HTTP, HTTPS
◮
des adresses pour nommer les documents : URL
◮
des langages pour cr´eer les documents : HTML, CSS, javascript
◮
des navigateurs qui interpr`etent les documents
Universit´e Lille 1 - Licence 1 SESI Technologies du Web 1 7 Universit´e Lille 1 - Licence 1 SESI Technologies du Web 1 8TW1 Introduction Documents Web HTML Contenu Arbres TW1 Introduction Documents Web HTML Contenu Arbres
Client-Serveur Documents web
◮
n´ecessit´e de respecter les normes/standards, interop´erabilit´e
(diff´erents clients)
◮
validation (XHTML5 et CSS)
◮
s´eparation contenu-forme
◮
contenu : XHTML, structure du document
◮
forme : CSS, pr´esentation, style
◮
exemple : sans style⊙ – style 1⊙ – style 2⊙
◮
avantages :
◮
adaptation aux diff´erents supports, accessibilit´e
◮
facilit´e de maintenance, ´evolutivit´e
Universit´e Lille 1 - Licence 1 SESI Technologies du Web 1 9 Universit´e Lille 1 - Licence 1 SESI Technologies du Web 1 10
TW1 Introduction Documents Web HTML Contenu Arbres TW1 Introduction Documents Web HTML Contenu Arbres
HTML
Langage
vocabulaire + syntaxe + s´emantique
HTML
HyperText Markup Language
HTML :
◮
un langage de description de document
◮
vocabulaire = ´el´ements pr´ed´efinis, identifi´es par des balises
◮
permet de structurer le contenu d’un document ◮
ouvrante/fermante : <element>/</element>
◮
insensible `a la casse : <eLEmENt> = <eLeMeNT>
◮
langage de balisage parenth´es´e
mais XHTML⇒ minuscules
XHTML :
◮
s´emantique = role/sens des elements
ˆ ´´
◮
une « version » d’HTML conforme au langage XML ◮
<h1> : un titre de premier niveau
◮
<p> : un paragraphe de texte
◮
XML : eXtensible Meta Language
◮
<img> : une image stock´ee dans un fichier externe
◮
XHTML5≡ HTML5
◮
<time> : une heure ou une date
◮
mˆemes ´el´ements et mˆemes attributs
◮
syntaxe = r`egles d’´ecriture du document
◮
une syntaxe plus rigoureuse
plus facilement manipulable par des outils logiciels
Universit´e Lille 1 - Licence 1 SESI Technologies du Web 1 11 Universit´e Lille 1 - Licence 1 SESI Technologies du Web 1 12TW1 Introduction Documents Web HTML Contenu Arbres TW1 Introduction Documents Web HTML Contenu Arbres
Structure d’un document
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- enteˆte du document -->
<head>
Structure minimale :
<title>Document HTML 5 minimal</title>
◮
un DOCTYPE
<meta charset="UTF-8"/>
</head>
◮
un ´el´ement racine <html>
◮ <!-- corps du document -->
un ´el´ement entˆete <head>
<body>
◮
un ´el´ement titre <title>
<!-- on placera ici le contenu de la page -->
◮
d´eclaration de l’encodage de caract`eres utilis´e </body>
</html>
◮
un ´el´ement corps <body>
⊙
Universit e Lille 1 - Licence 1 SESI Technologies du Web 1 13 Universit e Lille 1 - Licence 1 SESI Technologies du Web 1 14
TW1 Introduction Documents Web H