1_2_DOCUMENT

Lexique Sommaire
.
Mai 2013
• HTLM5 Storage, etc
• Modernizr, Less, etc.
Langages & Documents
Réfs
Techs
http://www.polytech.unice.fr/~pfz/LANGDOC/COURS
10 chapitres en 2 versions .ppt et .pdf
accès distant mais sans les exemples
ou
après téléchargement du répertoire COURS
accès local avec les exemples
Chap I
.
Documents Structurés
.
.
Chap II - HTML
.
"Hyper Text Markup Language"
.
Paul Franchi
SI 4
2013-14
Chap II - HTML 5
21/04/2017
Transparent - 1
Lexique Sommaire
Sommaire du Cours
.
.
.
.
.

Chap I - Documents: Historique, Modèles, Standards et Références

Chap II - HTML: voir le cours CIP1-CMD & HTML5

Chap III - XML: "eXtensible Markup Language", les Bases

Chap IV - DTD: "Document Type Definition"

Chap V - CSS: Feuilles de Styles en Cascades& CSS3

Chap VI - DOM, DHTML: "Domain Object Model "& Programmation
Dynamique en HTML & SPRY & JQuery

Chap VII - XSD: Schémas XML

Chap VIII - XML "Advanced" Processeurs et Dialectes: XPath, Xlink

Chap IX - XSLT: Transformations XML

Chap X - RDF: "Resource Description Framework"

Chap IX - AJAX: "Asynchronous JavaScript And XML"

Savoir-Faire: Basic Advanced

Etat de l'Art: HTML5
Réfs
Techs
State of the Art
CSS3 SPRY JQuery SVG MathML
RDF AJAX
.
21/04/2017
Transparent 2
Lexique Sommaire
Some References

Web
 EPU courses (in French)
 Création & Manipulltion de Document
http://www.polytech.unice.fr/~pfz/cmd.html
 Introduction to Internet http://rainbow.i3s.unice.fr/iai/
 Langages & Documents
http:www.polytech.unice;fr/~pfz/document.html
Réfs
Techs
 W3C tutorial : http://www.w3schools.com/
 Mozilla Development Center
http://developer.mozilla.org/en/docs/Main_Page
 W3C, http://www.w3.org/
 Web Developer's Bookmarks http://antriksh.com/resources/
 XML Wiki Book http://en.wikibooks.org/wiki/XML__Managing_Data_Exchange
Browser
compatibility

Biblio:
 many issues at EPU's lib
21/04/2017
Transparent 3
Lexique Sommaire
Documentation et Manuels
Réfs
Techs

Documents du web
 liste de balises HTML
 code des couleurs RVB
 code HTML des caractères ISO
 liste des extensions de fichiers (formats)
 Expressions Rationnelles
Browser
compatibility

Manuels.
 Expressions régulières sous Emacs
 Recherche et remplacement sous Emacs
 compléments Emacs
 grep sous Unix
21/04/2017
Transparent 4
Lexique Sommaire
Web Reference Browser
Réfs
Techs
Browser
compatibility
metadata .xml
de XML vers HTML5+CSS3
21/04/2017
Transparent 5
Lexique Sommaire
Doc Example Browser
Réfs
Techs
Browser
compatibility
metadata .xml
de XML vers HTML5+CSS3+JS
21/04/2017
Transparent 6
Lexique Sommaire
Browser
compatibility








































API – Application Programming Interface
ANSI – American National Standards Institute
ASCII – American Standard Code for Information Interchange (128 car.)
AJAX – Asynchronous JavaScript & XML
CSS – Cascading Style Sheets
DHTML – Dynamic HTML
DOM – Document Object Model
DTD – Document Type Definition
HTML – HyperText Markup Language
HTTP – HyperText Transfer Protocol
ISO - International Standards Organization
Mozilla - Fondation (global community for free and open Internet software))
MVC - Model View Controler
RDF - Resource Description Framework
REST - Representational State Transfer
RIA - Rich Internet Application
RSS - Really Simple Syndication
SGML - Standard Generalized Markup Language
SOAP - Simple Access Object Protocol
SPRY - Extensions JS pour HTML - Adobe Lab.
SVG - Scalable Vector Graphics
UNICODE – World wide Code (16 bits)
UTF-8 – Unicode version 8 bits
URL / URI – Uniform Resource Locator / Identifier
XML – eXtensible Markup Language
XBL – XML Binding Language (Mozilla)
XForms – XML Forms
XHTML – HTML 4 en XML
XLink – XML Linking Language
XPath – XML Path Language
XPointer – XML Pointer Language
XSL - eXtensible Stylesheet Language
XSLT – XSL Transformations
XSL-FO – XSL Formatting Objects
XSD – XML Schémas Définition Language
XUL – XML User Language (Mozilla)
W3C – World Wide Web Consortium
Web2.0 – Web dit "sémantique"
WHATWG - Web Hypertext Application Technology Working Group
WSDL - Web Service Description Language
21/04/2017
Réfs
Lexique
Techs
Transparent 7
Lexique Sommaire
.
Langages & Documents
Réfs
Techs
.
.
.
Chap I
Documents Structurés
Historique & Standards
Architectures Web
.
Lexique
Références
Modèle de Documents (SGML)
Paul Franchi
SI 4
2013-14
.
21/04/2017
Transparent - 8
Lexique Sommaire
"
"
Réfs
Using the
standards for Web
light Client
Information Processing (R)évolution?
1985
Web Techniques:
"Grand Tour"
1995
Techs
2005
Web Programming:
Advanced "Know
Hows"
" Document
Processing": analyse
des besoins
HTML - Génèse
 XHTML - source
type (version simpliste)
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoirfaire
What is HTML 5 ?
HTML 5 new
features

HTML 5 at a glance
Powerful, but Hectic !!
21/04/2017
Transparent 9
"
"
Web based Applications: directly from the Client to Data
the Client and the Server can run
on separate hardwares
the Client is the Master
the Client Application emits
requests for Ressources directly
to the Server
both Client and Server agree on a
network communication protocol
(http, ftp, url, uri, tcp/ip)
the Server software resolves the
requests and send replies back to
the Client
the request/reply process can be
synchronous or asynchronous.










suited only for performance
or security purpose
no generality
no flexibility
evolution made uneasy
21/04/2017
Client
Application
software
Server
Data
Ressources
Transparent 10
"
"
MVC (Model View Controller) Architecture
 Smalltalk, Xerox PARC, 1979
1. The user interacts with the user
interface (View, (X)HTML).
2. The controller handles the input
event from the user interface, often
via a registered handler or callback
and converts the event into
appropriate action for the model.
3. The controller notifies the model of the user action, possibly
resulting in a change in the model's state. (For example, the
controller updates the user's shopping cart.)
4. A view queries the model in order to generate an appropriate user
interface (for example, the view lists the shopping cart's contents).
The view gets its own data from the model. The controller may (in
some implementations) issue a general instruction to the view to
render itself. In others, the view is automatically notified by the
model of changes in state (Observer) which require a screen
update.
5. The user interface waits for further user interactions, which
restarts the cycle.
21/04/2017
Transparent 11
"
"
3-Tier Web Client Server Architecture
 John J. Donovan (OEC),
Cambridge, MA, 1990
 Presentation tier
This is the topmost level of the application.
The presentation tier displays information
related to such services as browsing
merchandise, purchasing, and shopping
cart contents. It communicates with other
tiers by outputting results to the
browser/client tier and all other tiers in the
network.
 Application tier (business logic, logic
tier, data access tier, or middle tier)
The logic tier is pulled out from the
presentation tier and, as its own layer, it
controls an application’s functionality by
performing detailed processing.
 Data tier
This tier consists of database servers. Here
information is stored and retrieved. This tier
keeps data neutral and independent from
application servers or business logic. Giving
data its own tier also improves scalability
and performance.
21/04/2017
Transparent 12
"
"
Using the standards for Web light Client
HTML
CSS
DHTML, JS
AJAX
Server side
scripting
XML
XSL
C, Java, C++
Browser
Client side
Application
(Business)
Layer
Server side
Data Layer
21/04/2017
Data Bases
Transparent 13
"
"
AJAX : schéma "HttpRequest / Response"
<html>
<script type="text/javascript">
function HTTP() {
send()
open(GET, ...)
new
XMLHttpRequest
Côté "Serveur"
}
</script>
<body>
responseXML
HTTP() ;
status
</body>
</html>
responseText
Côté "Client"
21/04/2017
Transparent 14
"
"
3 -Tier Architecture for Web light Client
HTML
CSS
DHTML, JS
AJAX
Web Server
Presentation Layer
C, Java, C++
Client
XML
XSL
Application
(Business) Layer
Data Layer
21/04/2017
Server
Data Bases
Transparent 15
"
"
n-Tier Architecture for Web light Client
HTML
CSS
DHTML, JS
AJAX
Presentation Layer
Client
XML
XSL
C, Java, C++
Application
Application
(Business)
Layer
Application
(Business) Layer
(Business) Layers
Data Layer
Server
21/04/2017
Data Bases
Transparent 16
"
"
"en Vrac" Web Server Architecture
Client
(X)HTML
Structure &
Contrôle
Application
(Business)
Style
(Look)
Datas
Server
21/04/2017
Data Base
Transparent 17
"
"
Overused PHP Architecture (détails)
Interface
echo "<div ..><script..>"
Style (Look)
Application
(Business)
echo "<br /><font ..>"
(X)HTML
JS
while(..){
…}
Datas
mysql_connect(..)
$req = mysql_query(..)
Server
21/04/2017
Transparent 18
"
"
RIA Architecture
Rich Client
XML, RDF
Structure
Networking
http, AJAX
CSS, XSL
Applicatio
n
Application
Style
Contrôle &
Web Services
Application
JS, DOM
SOAP, WSDL
Datas
Server
21/04/2017
Data Base
Transparent 19
"
"
"Light Client" vs "Rich Client" (R.I.A.)
Rich Client
XML
XSL
dynamic
HTML, CSS
interface
DHTML, JS, AJAX transform
"import"
of
fonctionalities
reduce the
back&forth
needs
metadata
multi-formats
Data Bases
21/04/2017
Transparent 20
"
"
Web Techniques: "Grand Tour"

"Electronic" vs "Digital" vs "Structured" Documents

Document Models & Standards: SGML, ODA, DSSL, W3C

Languages & Tags: TeX, LaTeX, HTML, XML, XHTML

Layout (Style): CSS, XSL

Document Type & Tree Structure: DTD , XSD, DOM, SAX

Client side Scripting: JavaScript, JScript, VBScript

Server side Scripting: ASP, PHP

Dynamic Document: DHTML

Document Processing & Exchange: XSLT, XPath, XLink

XML Dialects: MathML, SVG, MusicML, MXML, GPX, GeoSciML, KML,

Metadata: RDF, Adobe XMP, Dublin Core, EXIF, TIFF, FGDC- Iso 19115

Rich Interface Applications: Mozilla XUL, Adobe SPRY & FLEX, JavaFX

Networking: HttpRequest, Ajax, RPC, SOAP, RSS, XPConnect

IDE: FrontPage, DreamWeaver, Kompozer, Nvu, Office

Browser (Navigator): I.E, Firefox, Mozilla, Safari, Opéra, Google Chrome

Server Side Processors: EasyPhP, W(M)amp, Apache, Xalan, Saxon
21/04/2017
Transparent 21
"
Lexique Sommaire
"
Web Programming: Basic "Know Hows"
Using the
standards for Web
light Client
Techs

Basic Tagging:
HTML & XHTML

Cascading Styling:
HTML, XML & CSS

Dynamic Pages:
DHTML & JS &
DOM
Web Techniques:
"Grand Tour"
Web Programming:
Advanced "Know
Hows"
" Document
Processing": analyse
des besoins
.css
HTML - Génèse
 XHTML - source
type (version simpliste)
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoirfaire
.xml
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
Réfs

XML
21/04/2017
"
Lexique Sommaire
"
Web Programming: Advanced "Know Hows"
Réfs
Using the
standards for Web
light Client
Techs

XML Dialects: MathML, SVG

Document Definition: DTD,
XSD

Dynamic Pages: DXML & JS
&
DOM & SVG

Networking: Http, Ajax
Web Techniques:
"Grand Tour"
Web Programming:
Advanced "Know
Hows"
" Document
Processing": analyse
des besoins
HTML - Génèse
.dtd
.dtd
 XHTML - source
type (version simpliste)
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoirfaire
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance

XML Processing: XSLT,
XPath, XLink
21/04/2017
XML
rdf
XML
rdf
.xsl
.xsd
"
Using the
standards for Web
light Client
Lexique Sommaire
"
Web Programming: "State of the Art"
Techs

CSS3: Onglets, transform, etc.

HTML 5: canvas, dragNdrop, etc.

AJAX/PHP/SQL

Dynamic XML using XSL/JS

XML as metadata: RDF, SPRY, XUL
Web Techniques:
"Grand Tour"
Web Programming:
Advanced "Know
Hows"
" Document
Processing": analyse
des besoins
HTML - Génèse
 XHTML - source
type (version simpliste)
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoirfaire
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
Réfs
21/04/2017
"
Using the
standards for Web
light Client
Lexique Sommaire
"
Some Références

Web Techniques:
"Grand Tour"
Web Programming:
Advanced "Know
Hows"
Web
 EPU courses (in French)
 Création & Manipulltion de Document
http://www.polytech.unice.fr/~pfz/cmd.html
 Introduction to Internet http://rainbow.i3s.unice.fr/iai/
 Langages & Documents
http:www.polytech.unice;fr/~pfz/document.html
Réfs
Techs
 W3C tutorial : http://www.w3schools.com/
" Document
Processing": analyse
des besoins
 Mozilla Development Center
http://developer.mozilla.org/en/docs/Main_Page
HTML - Génèse
 W3C, http://www.w3.org/
 Web Developer's Bookmarks http://antriksh.com/resources/
 XHTML - source
type (version simpliste)
Quelques règles
d'écriture pour un
"meilleur" (X)HTML

Biblio:
 many issues at EPU's lib
(X)HTML: savoirfaire
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
21/04/2017
Transparent 25
"
Lexique Sommaire
"
Documentation et Manuels
Using the
standards for Web
light Client
Techs

Documents du web
 Tutoriaux du Web
Web Techniques:
"Grand Tour"
 liste de balises HTML
Web Programming:
Advanced "Know
Hows"
 code HTML des caractères ISO
 code des couleurs RVB
 liste des extensions de fichiers
(formats)
" Document
Processing": analyse
des besoins
 Expressions Rationnelles
HTML - Génèse
 XHTML - source
type (version simpliste)
Quelques règles
d'écriture pour un
"meilleur" (X)HTML

Manuels.
 Expressions régulières sous
Emacs
(X)HTML: savoirfaire
 Recherche et remplacement
sous Emacs
What is HTML 5 ?
 compléments Emacs
HTML 5 new
features
 grep sous Unix
HTML 5 at a glance
Réfs
21/04/2017
 W3C :
http://www.w3schools.com/
 CSS Play :
http://www.cssplay.co.uk/index
 Zen Garden :
http://www.csszengarden.com/tr/
francais/
 CSS in10 steps :
http://www.barelyfitz.com/screen
cast/htmltraining/css/positioning/
 10 steps to better CSS:
http://shapeshed.com/journal/10_ste
ps_to_better_css/
Transparent 26
"
Using the
standards for Web
light Client
Web Techniques:
"Grand Tour"
Web Programming:
Advanced "Know
Hows"
" Document
Processing": analyse
des besoins
HTML - Génèse
 XHTML - source
type (version simpliste)
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoirfaire
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
Lexique Sommaire
"








































Lexique
API – Application Programming Interface
ANSI – American National Standards Institute
ASCII – American Standard Code for Information Interchange (128 car.)
AJAX – Asynchronous JavaScript & XML
CSS – Cascading Style Sheets
DHTML – Dynamic HTML
DOM – Document Object Model
DTD – Document Type Definition
HTML – HyperText Markup Language
HTTP – HyperText Transfer Protocol
ISO - International Standards Organization
Mozilla - Fondation (global community for free and open Internet software))
MVC - Model View Controler
RDF - Resource Description Framework
REST - Representational State Transfer
RIA - Rich Internet Application
RSS - Really Simple Syndication
SGML - Standard Generalized Markup Language
SOAP - Simple Access Object Protocol
SPRY - Extensions JS pour HTML - Adobe Lab.
SVG - Scalable Vector Graphics
UNICODE – World wide Code (16 bits)
UTF-8 – Unicode version 8 bits
URL / URI – Uniform Resource Locator / Identifier
XML – eXtensible Markup Language
XBL – XML Binding Language (Mozilla)
XForms – XML Forms
XHTML – HTML 4 en XML
XLink – XML Linking Language
XPath – XML Path Language
XPointer – XML Pointer Language
XSL - eXtensible Stylesheet Language
XSLT – XSL Transformations
XSL-FO – XSL Formatting Objects
XSD – XML Schémas Définition Language
XUL – XML User Language (Mozilla)
W3C – World Wide Web Consortium
Web2.0 – Web dit "sémantique"
WHATWG - Web Hypertext Application Technology Working Group
WSDL - Web Service Description Language
21/04/2017
Réfs
Techs
Transparent 27
"
Lexique Sommaire
"
Historique et Standards
Using the
standards for Web
light Client
Techs



(X)HTML: savoirfaire
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
HTML – HyperText Markup Language
 CERN, début 1990’s
 XHTML - source
type (version simpliste)
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
SGML - Standard Generalized Markup Language
 norme ANSI, 1983
 norme ISO, 1986
" Document
Processing": analyse
des besoins
HTML - Génèse
GML – Generalized Markup Language
 IBM, 1960’s
 3 initiales des inventeurs
Web Techniques:
"Grand Tour"
Web Programming:
Advanced "Know
Hows"
Réfs

Standards du W3C (MIT, Mass, 1994)
 XML – eXtensible Markup Language, 1998
 HTML (CERN, Genève), 1992, HTML 4, 5 (W3C)
 CSS1 & 2 & CSS3 - Cascading Style Sheets
 DOM – Document Object Model
 XSL – eXtensible Stylesheet Langage
21/04/2017
Transparent 28
"
"
Terminologie de l’information
Lexique Sommaire
Réfs
Using the
standards for Web
light Client


Web Programming:
Advanced "Know
Hows"

What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
Référence
 Accès à une entité
 Lien hypertexte
 XHTML - source
type (version simpliste)
(X)HTML: savoirfaire
Entité
 Un exemplaire physique
 Un livre imprimé, un fichier, etc.
HTML - Génèse
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
Techs
 Un service d’information: serveur
 Normes ISO, numéros ISBN, URL, etc
Web Techniques:
"Grand Tour"
" Document
Processing": analyse
des besoins
Ressource

Document
 Oeuvre logique
 Réalisable sous plusieurs formes physiques
 Version « source » lisible par l’homme:
 Version « source » formatées: HTML, XML, TeX
 Version pour impression: .ps, .pdf, .dvi
21/04/2017
Transparent 29
"
Lexique Sommaire
"
" Document Processing": analyse des besoins
Using the
standards for Web
light Client
Techs

Impression

Visualisation

Conception & Edition

Echange & Conversion

Analyse Lexicale, Syntaxique et Sémantique
 XHTML - source
type (version simpliste)

Transformation & Traduction
Quelques règles
d'écriture pour un
"meilleur" (X)HTML

Collaboration et Partage

Navigation & Recherche

Base Documentaire

Interprétation & Evaluation
Web Techniques:
"Grand Tour"
Web Programming:
Advanced "Know
Hows"
" Document
Processing": analyse
des besoins
Réfs
HTML - Génèse
(X)HTML: savoirfaire
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
21/04/2017
Transparent 30
"
"
Traitement de Document (modèle SGML)
Structure
Logique
Générique
DTD
Interface H/M
EDITION
S. LOGIQUE
Structure
Générique
Format
FORMATAGE
S. LAYOUT
PRESENTATION
21/04/2017
Transparent 31
"
Using the
standards for Web
light Client
Lexique Sommaire
"
Traitement d’un document: l’approche arborescente
Techs

Structure logique ("inductive")
 Une arborescence enracinée des composants
 DTD, DOM, XML-schémas
Web Techniques:
"Grand Tour"
Web Programming:
Advanced "Know
Hows"
" Document
Processing": analyse
des besoins
Réfs

Structure de format ("layout")
 Une attribution de formatage (ODA, DSL)
 Un balisage libre (TeX, HTML)
 Un balisage (LaTeX, XHTML, XML) bien parenthèsé
(emboîtements)
HTML - Génèse
 XHTML - source
type (version simpliste)
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoirfaire
What is HTML 5 ?

Un format de Présentation (sortie, "rendu")
 .ps, .dvi, etc
 Visualisation .pdf etc.
HTML 5 new
features
HTML 5 at a glance
21/04/2017
Transparent 32
"
"
Un modèle de lettre: (exemplaire)
M. Martin
Le 4/11/2002
Société S.
06150 SA
à M. DURAND
Société R. Dpt Informatique
Ref: MM25
Objet: à voir
Monsieur,
J’ai l’honneur de porter à votre attention
1.
le premier point

aaaaaaaaaaaaaa

bbbbbbb
2.
le deuxième
3.
etc.
Sincères salutations,
M. X
21/04/2017
Transparent 33
"
"
Lettre
Un modèle de lettre: structure logique arborescente
EN TETE
Le 4/11/2002auteur
M. Martin
CORPS
date
destinataire
PIED
pretexte
politesse
texte
nom
nom
ref
intro
adr
soc
obj
sec 1
Société S.
à M. DURAND
06150 SA
Société R. Dpt
Informatique
dpt
signature
Monsieur,
pt1
Ref: MM25
pt2
Objet: à voir
J’ai l’honneur de porter à votre attention
sec2
1.
2.
3.
le premier point

aaaaaaaaaaaaaa

bbbbbbb
sec3
Sincères salutations,
le deuxième
etc.
M. X
21/04/2017
Transparent 34
"
"
Lettre
Un modèle de lettre: une structure
logique générique
EN TETE
auteur
date
CORPS
?
destinataire
pretexte
PIED
?
texte
nom
nom
ref
adr
soc
?obj
politesse
pol
intro
?
dpt
signature
?
*
*
section
sssection
Méta-opérateurs réguliers ? + *
21/04/2017
Transparent 35
"
"
Lettre: structure arborescente de format ("layout")
M. Martin
Le 4/11/2002
Société S.
06150 SA
à M. DURAND
Société R.Dpt Informatique
Ref: MM25
Objet: à voir
Monsieur,
J’ai l’honneur de porter à votre attention
1.
le premier point

aaaaaaaaaaaaaa

bbbbbbb
2.
le deuxième
3.
etc.
Sincères salutations,
M. X
21/04/2017
Transparent 36
"
"
Lettre: une structure générique de format («layout»)
Expéditeur
date
Société S.
adresse
*
à Destinataire
Société
Ref:
?
Dpt
?
Objet:
?
?
Monsieur,
introduction

*
a
*
?
politesse
signature
21/04/2017
Transparent 37
Lexique Sommaire
.
Langages & Documents
Réfs
Techs
Chap II - HTML
.
"Hyper Text Markup Language"
.
.
Note au lecteur:
.
ceci n'est pas un cours HTML,
mais un rapide survol
voir le cours "Création et manipulation de
Documents" (CIP1)
Paul Franchi
SI 4
2013-14
HTML 5
.
21/04/2017
Transparent - 38
"
Using the
standards for Web
light Client
Lexique Sommaire
"
HTML - La Génèse
Techs

" Document
Processing": analyse
des besoins



HTML 5 at a glance
1995-96 : Web
 1995-96: HTML 2.0
 1997:
HTML 3.2. et 4.0

2000-2006: XHTML
 abandon de XHTML 2.0
What is HTML 5 ?
HTML 5 new
features
1994 : NETCAPE
 CSS et DOM
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoirfaire
1993 : MOSAIC
 img et form - HTML 1.0
HTML - Génèse
 XHTML - source
type (version simpliste)
1989 - 1992 : CERN
 SGML et Hyperliens - HTML 1.0
 Tim Berners-Lee et Dan Connally
Web Techniques:
"Grand Tour"
Web Programming:
Advanced "Know
Hows"
Réfs

2011: HTML 5.0
21/04/2017
Transparent 39
Réfs
HTML - Hyper Text Markup Language
Using the
standards for Web
light Client
Techs
Web Techniques: 
"Grand Tour"
Web Programming:
Advanced "Know
Hows"
Lexique Sommaire
"
"
On <balise> le texte «source» avec un ensemble fini de
balises « markup tags »

le formatage initial du texte source donne un ordre logique
entre les éléments de texte, mais aucune indication
d’espacement (lignes, espaces ou tabulations)

Les balises HTML jouent un double rôle:
" Document
Processing": analyse
des besoins
HTML - Génèse
 XHTML - source
type (version simpliste)
 structuration logique du document
 format de présentation (« layout »)
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoirfaire

What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
Le principe de formatage est celui des boites
rectangulaires arborescentes mais le parenthesage n’est
pas vérifié
21/04/2017
Transparent 40
"
"
Une lettre en HTML (version simpliste)
<html><body bgcolor=#CCCCFF>
<table> <tr>
<td> <p align=left> M. Martin <br> Société S. <br> Avenue A. 06150 SA </p> </td>
<td> <p align=right> <i>
Le 4/11/2002
</i> </td >
</table>
<p align=right> à M. DURAND <br> Société R. <br> Dpt Informatique </p>
<p align=left>
Ref: MM25 <br> Objet: à voir
<p align=center>
Monsieur,
</p>
</p >
<ol> J’ai l’honneur de porter à votre attention
<li> le premier point
<ul> < li > aaaaaaaaaaaaaa <li> bbbbbbb </ul>
<li> le deuxième <li> etc. </ol>
<p align=center>
Sincères salutations, <br> M. X <br> <img src= signature.gif> </p >
</body>
</html>
21/04/2017
Transparent 41
"
Lexique Sommaire
"
Survol d’HTML (version 4.01)
Using the
standards for Web
light Client

Web Programming:
Advanced "Know
Hows"
" Document
Processing": analyse
des besoins
HTML - Génèse
 XHTML - source
type (version simpliste)
(X)HTML: savoirfaire
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
Techs
Balisage
 une balise s’écrit avec < et > deux caractères spéciaux de
début et fin de balise et un identificateur(nom) prédéfini
 le balisage structure le source en éléments
 le balisage associe une balise ouvrante < > et une
fermante </ > par paire (non obligatoire).
 le texte entre une balise ouvrante et une fermante est le
contenu de l’élément
 le balisage est insensible à la casse (préférer les
minuscules, obligatoires en XHTML)
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
Réfs

Attributs de balises
 une balise peut comporter 0 ou plusieurs paires
attribut = "valeur"
<table border="1" align="center">
 sans ou avec (préférer) quotes doubles " " ou simples ' '
21/04/2017
Transparent 42
"
"
HTML - source type (version simpliste)
<html>
<!-- commentaires bienvenus -->
<head>
<title> Titre de la page dans le navigateur </title>
</head>
<body >
<!-- mettre ici le contenu balisé à afficher -->
</body>
</html>
21/04/2017
Transparent 43
"
"
XHTML - source type (version simpliste)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<!-- pour les accents -->
<title> Titre de la page dans le navigateur </title>
</head>
<body >
<!-- mettre ici le contenu balisé bien parenthésé à afficher -->
</body>
</html>
21/04/2017
Transparent 44
"
"
Balisage, Indentation, & Parenthèses
<html>
( <!-- commentaire -->
<head>
(
(
)
<title> Titre de la page </title>
</head>
)
<body
( >
(
<p >
( ... > ... </a>
)
<a href=...
(
<ul>
( <img (src=...
) /> </li>
)
<li>
)
</ul>
)
</p>
)
</body>
)
</html>
21/04/2017
Transparent 45
"
"
Balisage & Arborescence
<html> <!-- commentaire -->
<!--com-->
<head>
<title> Titre de la page </title>
</head>
head
title
<body >
html
<p >
a
<a href=... > ... </a>
body
p
</p>
<ul>
<li> <img src=... /> </li>
</ul>
ul
li
img
</body>
</html>
21/04/2017
Transparent 46
"
Using the
standards for Web
light Client
Lexique Sommaire
"
Les défauts d’ HTML
Réfs
Techs

Beaucoup de versions pas toujours compatibles avec des
interprétations dépendantes des navigateurs

La structure logique n’est pas prise en compte

Pas de structure logique générique

Le balisage n’est pas strictement arborescent

Pas de formatage générique

L’évaluation du formatage est strictement lié au texte

Pas de séparation style-formatage
Quelques règles
d'écriture pour un
"meilleur" (X)HTML

Le balisage mélange le formatage et le style au contenu du texte
(X)HTML: savoirfaire

L’ensemble des balises est clos (aucune extension)
Web Techniques:
"Grand Tour"
Web Programming:
Advanced "Know
Hows"
" Document
Processing": analyse
des besoins
HTML - Génèse
 XHTML - source
type (version simpliste)
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
21/04/2017
Transparent 47
"
Using the
standards for Web
light Client
Web Techniques:
"Grand Tour"
Lexique Sommaire
"
(X)HTML: savoir-faire basique





Web Programming:
Advanced "Know
Hows"


" Document
Processing": analyse
des besoins

HTML - Génèse

 XHTML - source
type (version simpliste)



Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoirfaire
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance

Styles
Textes
Images avec mapping
Liens et Ancres
Listes
Tables
Layers
Frames
Iframes
Forms & Input
"débaliser" un source HTML
Page Web dédiées (multi-panneaux):
 Explorateur: accès par index, listes, aperçus, et visualisation
 Atelier de Développement: code source, visualisation,
documentation
sur le Web




Réfs
Techs
W3Schools - HTML Tutorial
Learn on HTML.net
Dave's Interactive HTML Tutorial
Utexas Html Tutorial
21/04/2017
Transparent 48
"
Using the
standards for Web
light Client
Techs

respecter la validation syntaxique XHTML :
 balisage fermé, bien parenthésé
 usage des ""
 nom de balise en minuscule

associer le balisage à la structure logique
 utiliser <div> et <span>
 utiliser les attributs "id" et "class"

éviter les styles "internes":
 avec des balises: <b> <em> <u> <i> <font>
 avec des attributs : align width
" Document
Processing": analyse
des besoins
HTML - Génèse
 XHTML - source
type (version simpliste)
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoirfaire
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
Réfs
Quelques règles d'écriture pour un "meilleur" (X)HTML
Web Techniques:
"Grand Tour"
Web Programming:
Advanced "Know
Hows"
Lexique Sommaire
"


Préférez
les Standards
préférer les styles CSS, notamment en feuilles externes
du Web
formater avec CSS
 saut de ligne: pas de <br />, éviter <p>, utiliser display:
 espace, tabulations: éviter  , utiliser padding: et margin:
 placement: pas de <table >, utiliser display: float: position:
21/04/2017
Transparent 49
"
Using the
standards for Web
light Client
Lexique Sommaire
"
HTML - Commentaires Conditionnels IE
Syntaxe d'un commentaire conditionnel positif:
 <!--[if condition]> HTML ou XHTML ou CSS ou Script
<![endif]-->

Syntaxe d'un commentaire conditionnel négatif:
 <!--[if condition]><![IGNORE[--><![IGNORE[]]> HTML
<![endif]-->
 version non valide pour XHTML et XML

Conditions:
 IE : Toutes versions d'IE
 lt IE version: Versions d'IE inférieures à version
 lte IE version: Versions d'IE inférieures ou égales à version
 IE version: La version version d'IE
 gte IE version: Versions d'IE supérieures ou égales à
version
 gt IE version: Versions d'IE supérieures à version
 version: IE 5, 5.5, 6 ou 7.

Très utile pour adapter les styles CSS aux versions IE
Web Programming:
Advanced "Know
Hows"
HTML - Génèse
 XHTML - source
type (version simpliste)
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoirfaire
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
Techs

Web Techniques:
"Grand Tour"
" Document
Processing": analyse
des besoins
Réfs
21/04/2017
Transparent 50
Lexique Sommaire
.
Langages & Documents
Réfs
Techs
Chap II - HTML 5
.
.
.
HTML 5
HTML5 Slideshow
.
"Responsible" Web development
Paul Franchi
SI 4
2013-14
.
21/04/2017
Transparent - 51
"
Lexique Sommaire
"
What is HTML 5 ?
Using the
standards for Web
light Client

Web Programming:
Advanced "Know
Hows"
On 10 April 2007, the Mozilla Foundation, Apple and Opera
Software proposed[5] that the new HTML working group of the
W3C adopt the WHATWG’s HTML5 as the starting point of its
work and name its future deliverable "HTML5".
On 9 May 2007, the new HTML working group resolved to do
that.[
" Document
Processing": analyse
des besoins
HTML - Génèse
 XHTML - source
type (version simpliste)
(X)HTML: savoirfaire
Techs
HTML 5
 The new standard for HTML, XHTML, and the
HTML DOM..
 HTML 5 still a work in progress..
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
Réfs

Browser Support
 Safari, Chrome, Firefox, and Opera do some ...
 Internet Explorer 9 will do….
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
21/04/2017
Transparent 52
"
Lexique Sommaire
"
HTML 5 new features
Using the
standards for Web
light Client
Web Techniques:
"Grand Tour"

HTML - Génèse
 XHTML - source
type (version simpliste)
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoirfaire
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
Techs
 article, footer, header, nav, section

New form controls, like
 calendar, date, time, email, url, search
Web Programming:
Advanced "Know
Hows"
" Document
Processing": analyse
des besoins
New content elements, like
Réfs

New elements for video and audio media

The canvas element for drawing

Web Applications:
 persistent Storage (localStorage vs sessionStorage)
 Web Workers (asynchronous computations in JS)
 WHATWG client-side session
 File & DOM drag n drop API
21/04/2017
Transparent 53
"
Using the
standards for Web
light Client
Web Techniques:
"Grand Tour"
Web Programming:
Advanced "Know
Hows"
Lexique Sommaire
"
HTML 5 at a glance
Réfs
Techs

CANVAS

VIDEO & AUDIO

DRAG n DROP

sur le Web
 HTML 5 Slides
Presentation
 HTML 5 demos
 MDC Canvas Tutorial
 SVG or Canvas
 Drag n Drop in FF 3.5
" Document
Processing": analyse
des besoins
HTML - Génèse
 XHTML - source
type (version simpliste)
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoirfaire
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
21/04/2017
Transparent 54
"
Using the
standards for Web
light Client
"


Web Techniques:
"Grand Tour"
" Document
Processing": analyse
des besoins
Quelques règles
d'écriture pour un
"meilleur" (X)HTML

HTML 5 new
features
HTML 5 at a glance
Techs
jquery.js
modernizr.js
normalize.css
LESS
 extends CSS with dynamic behavior.

selectivizr.js
 CSS adaptation for IE



(X)HTML: savoirfaire
What is HTML 5 ?
Réfs
 CSS resets for modern standards (HTML5)
HTML - Génèse
 XHTML - source
type (version simpliste)
« Responsible » Web development
 detects browser features

Web Programming:
Advanced "Know
Hows"
Lexique Sommaire

Yeoman, ANGULARJS, Bootstrap/, responsibleSlider.js
Joomla, Wordpress
Jquery UI jQuery UI is a curated set of user interface
interactions, effects, widgets, and themes built on top of
the jQuery JavaScript Library.
Foundation "The most advanced responsive
front-end framework in the world."
21/04/2017
Transparent 55
"
Using the
standards for Web
light Client
Web Techniques:
"Grand Tour"
"
Lexique Sommaire
« Responsible » Fluid Design
Responsive web design (RWD) is a web design approach aimed at
crafting sites to provide an optimal viewing experience - easy reading
and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices (from desktop computer monitors to
mobile phones).
Réfs
Techs
Web Programming:
Advanced "Know
Hows"
" Document
Processing": analyse
des besoins
HTML - Génèse
Fixed websites have a set width, and resizing the browser or viewing it on
different devices won’t affect on the way the website looks. This can
require horizontal scrolling and a site that doesn’t look good on tablets or
smartphones.
 XHTML - source
type (version simpliste)
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoirfaire
What is HTML 5 ?
HTML 5 new
features
HTML 5 at a glance
Fluid websites are built using percentages for widths. As a result,
columns are relative to one another and the browser, allowing it to scale
up and down fluidly
Adaptive websites introduce media queries to target specific device sizes,
like smaller monitors, tablets, and mobile.
Responsive websites are built on a fluid grid and use media queries to
control the design and its content as it scales down or up with the
browser or device.
.
21/04/2017
Transparent 56