Vous êtes sur la page 1sur 55

Lexique Sommaire

Langages & Documents Chap I

Mai 2013 HTLM5 Storage, etc Modernizr, Less, etc.

Rfs Techs

. .

Documents Structurs

http://www.polytech.unice.fr/~pfz/LANGDOC/COURS 10 chapitres en 2 versions .ppt et .pdf accs distant mais sans les exemples ou aprs tlchargement du rpertoire COURS accs local avec les exemples

. .

Chap II - HTML "Hyper Text Markup Language"


Paul Franchi SI 4 2013-14

Chap II - HTML 5
25/12/2013 Transparent - 1

Lexique Sommaire

Sommaire du Cours
.

Rfs Techs

Chap I - Documents: Historique, Modles, Standards et Rfrences 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: Schmas 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
State of the Art

. .

CSS3 SPRY JQuery SVG MathML

RDF AJAX
.
25/12/2013 Transparent 2

Lexique Sommaire

Some References

Rfs Techs

Web EPU courses (in French) Cration & 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 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

25/12/2013

Transparent 3

Lexique Sommaire

Documentation et Manuels

Rfs Techs

Documents du web
liste de balises HTML code des couleurs RVB code HTML des caractres ISO liste des extensions de fichiers (formats) Expressions Rationnelles

Browser compatibility

Manuels.
Expressions rgulires sous Emacs Recherche et remplacement sous Emacs complments Emacs grep sous Unix

25/12/2013

Transparent 4

Lexique Sommaire

Web Reference Browser

Rfs Techs

Browser compatibility

metadata .xml

de XML vers HTML5+CSS3


25/12/2013 Transparent 5

Lexique Sommaire

Doc Example Browser

Rfs Techs

Browser compatibility

metadata .xml

de XML vers HTML5+CSS3+JS


25/12/2013 Transparent 6

Lexique Sommaire
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 Schmas Dfinition Language XUL XML User Language (Mozilla) W3C World Wide Web Consortium Web2.0 Web dit "smantique" WHATWG - Web Hypertext Application Technology Working Group WSDL - Web Service Description Language 25/12/2013

Rfs

Lexique

Techs

Browser compatibility

Transparent 7

Lexique Sommaire

Langages & Documents

Rfs Techs

. .

Chap I
Documents Structurs

. .

Historique & Standards


Architectures Web Lexique Rfrences Modle de Documents (SGML)
.
25/12/2013 Transparent - 8

Paul Franchi SI 4 2013-14

"
Using the standards for Web light Client Web Techniques: "Grand Tour"
Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

"

Lexique Sommaire Rfs

Information Processing (R)volution?

Techs

1985

1995

2005

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

What is HTML 5 ?
HTML 5 new features

Powerful, but Hectic !!


25/12/2013 Transparent 9

HTML 5 at a glance

"

"

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.

Client
Application software

suited only for performance or security purpose no generality no flexibility evolution made uneasy
25/12/2013

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.
25/12/2013 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 applications 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.
25/12/2013 Transparent 12

"

"

Using the standards for Web light Client


HTML CSS DHTML, JS AJAX
XML XSL

Browser

Server side scripting

C, Java, C++
Application (Business) Layer

Client side

Server side

Data Layer
25/12/2013

Data Bases
Transparent 13

"

"

AJAX : schma "HttpRequest / Response"


<html> <script type="text/javascript">

function HTTP() { send()

open(GET, ...)

new XMLHttpRequest

Ct "Serveur"
} </script> <body> responseXML HTTP() ; </body> </html> status responseText

Ct "Client"
25/12/2013 Transparent 14

"

"

3 -Tier Architecture for Web light Client


HTML CSS DHTML, JS AJAX XML XSL

Web Server
Presentation Layer

Client

C, Java, C++
Application (Business) Layer

Data Layer
25/12/2013

Server

Data Bases
Transparent 15

"

"

n-Tier Architecture for Web light Client


HTML CSS DHTML, JS AJAX Client

Presentation Layer

C, Java, C++
Application Application (Business) Layer Application (Business) Layer (Business) Layers

XML XSL

Data Layer Server


25/12/2013

Data Bases
Transparent 16

"

"

"en Vrac" Web Server Architecture

Client
Structure & Contrle Application (Business) Style (Look) (X)HTML

Datas

Server
25/12/2013

Data Base
Transparent 17

"

"

Overused PHP Architecture (dtails) Interface

echo "<div ..><script..>"


Style (Look) Application (Business)

echo "<br /><font ..>" while(..){ }

(X)HTML JS

Datas

mysql_connect(..) $req = mysql_query(..)


Server
25/12/2013 Transparent 18

"

"

RIA Architecture

Rich Client
XML, RDF Networking Structure

http, AJAX
Applicatio n Application Application

CSS, XSL

Style

Contrle & Web Services JS, DOM SOAP, WSDL

Datas

Server
25/12/2013

Data Base
Transparent 19

"

"

"Light Client" vs "Rich Client" (R.I.A.)

Rich Client
dynamic HTML, CSS interface DHTML, JS, AJAX transform XML XSL

"import" of fonctionalities

reduce the back&forth needs

metadata multi-formats Data Bases


25/12/2013 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, Opra, Google Chrome Server Side Processors: EasyPhP, W(M)amp, Apache, Xalan, Saxon

25/12/2013

Transparent 21

"
Using the standards for Web light Client

"

Lexique Sommaire

Web Programming: Basic "Know Hows"


Basic Tagging: HTML & XHTML

Rfs Techs

Web Techniques: "Grand Tour"


Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

Cascading Styling: HTML, XML & CSS

.css

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

Dynamic Pages: DHTML & JS & DOM

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

.xml

XML
25/12/2013

"
Using the standards for Web light Client

"

Lexique Sommaire

Web Programming: Advanced "Know Hows"

Web Techniques: "Grand Tour"


Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

Rfs Techs

XML Dialects: MathML, SVG Document Definition: DTD, XSD Dynamic Pages: DXML & JS & DOM & SVG Networking: Http, Ajax

.dtd

.dtd

.xsd

XHTML - source type (version simpliste)


Quelques rgles 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


25/12/2013

XML rdf XML rdf

.xsl

"
Using the standards for Web light Client Web Techniques: "Grand Tour"
Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

"

Lexique Sommaire

Web Programming: "State of the Art"

Rfs Techs

CSS3: Onglets, transform, etc.

HTML 5: canvas, dragNdrop, etc.

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

AJAX/PHP/SQL Dynamic XML using XSL/JS XML as metadata: RDF, SPRY, XUL
25/12/2013

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

"
Using the standards for Web light Client Web Techniques: "Grand Tour"
Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

"

Lexique Sommaire

Some Rfrences

Rfs Techs

Web EPU courses (in French) Cration & 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 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/

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

Biblio: many issues at EPU's lib

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

25/12/2013

Transparent 25

"
Using the standards for Web light Client Web Techniques: "Grand Tour"
Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

"

Lexique Sommaire

Documentation et Manuels

Rfs Techs

Documents du web
liste de balises HTML code des couleurs RVB

Tutoriaux du Web
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/

code HTML des caractres ISO

liste des extensions de fichiers (formats)


Expressions Rationnelles

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

Manuels.
Expressions rgulires sous Emacs Recherche et remplacement sous Emacs

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

complments Emacs
grep sous Unix
25/12/2013

Transparent 26

"
Using the standards for Web light Client Web Techniques: "Grand Tour"
Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

"

Lexique Sommaire
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 Schmas Dfinition Language XUL XML User Language (Mozilla) W3C World Wide Web Consortium Web2.0 Web dit "smantique" WHATWG - Web Hypertext Application Technology Working Group WSDL - Web Service Description Language 25/12/2013

Lexique

Rfs Techs

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

Transparent 27

"
Using the standards for Web light Client

"

Lexique Sommaire

Historique et Standards

Rfs Techs

GML Generalized Markup Language


IBM, 1960s 3 initiales des inventeurs

Web Techniques: "Grand Tour"


Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

SGML - Standard Generalized Markup Language


norme ANSI, 1983 norme ISO, 1986

HTML HyperText Markup Language


CERN, dbut 1990s

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

Standards du W3C (MIT, Mass, 1994)


XML eXtensible Markup Language, 1998 HTML (CERN, Genve), 1992, HTML 4, 5 (W3C) CSS1 & 2 & CSS3 - Cascading Style Sheets DOM Document Object Model XSL eXtensible Stylesheet Langage
25/12/2013 Transparent 28

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

"
Using the standards for Web light Client Web Techniques: "Grand Tour"

"

Terminologie de linformation

Lexique Sommaire Rfs

Ressource
Un service dinformation: serveur Normes ISO, numros ISBN, URL, etc

Techs

Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

Entit
Un exemplaire physique Un livre imprim, un fichier, etc.

Rfrence
Accs une entit Lien hypertexte

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

Document
Oeuvre logique Ralisable sous plusieurs formes physiques Version source lisible par lhomme: Version source formates: HTML, XML, TeX Version pour impression: .ps, .pdf, .dvi
25/12/2013 Transparent 29

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

"
Using the standards for Web light Client

"

Lexique Sommaire

" Document Processing": analyse des besoins

Rfs Techs

Impression Visualisation Conception & Edition Echange & Conversion Analyse Lexicale, Syntaxique et Smantique Transformation & Traduction Collaboration et Partage Navigation & Recherche Base Documentaire Interprtation & Evaluation
25/12/2013 Transparent 30

Web Techniques: "Grand Tour"


Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

"

"

Traitement de Document (modle SGML)


Structure Logique Gnrique DTD Interface H/M

EDITION

S. LOGIQUE Structure Gnrique Format

FORMATAGE

S. LAYOUT

PRESENTATION

25/12/2013

Transparent 31

"
Using the standards for Web light Client Web Techniques: "Grand Tour"
Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

"

Lexique Sommaire

Traitement dun document: lapproche arborescente

Rfs Techs

Structure logique ("inductive")


Une arborescence enracine des composants DTD, DOM, XML-schmas

Structure de format ("layout")


Une attribution de formatage (ODA, DSL) Un balisage libre (TeX, HTML) Un balisage (LaTeX, XHTML, XML) bien parenths (embotements)

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

Un format de Prsentation (sortie, "rendu")


.ps, .dvi, etc Visualisation .pdf etc.
25/12/2013

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

Transparent 32

"

"

Un modle de lettre: (exemplaire)


M. Martin Le 4/11/2002

Socit S.
06150 SA M. DURAND Socit R. Dpt Informatique

Ref: MM25
Objet: voir Monsieur, Jai lhonneur de porter votre attention 1. le premier point 2. 3. aaaaaaaaaaaaaa bbbbbbb

le deuxime etc. Sincres salutations, M. X


25/12/2013 Transparent 33

"

"

Un modle de lettre: structure logique arborescente


Lettre

Le 4/11/2002
auteur date

EN TETE

CORPS

PIED

destinataire

pretexte

texte

politesse

signature

M. Martin Socit S.

nom

nom

ref

intro

Monsieur,

adr

M. DURAND
soc

obj

sec 1

06150 SA

Socit R. Dpt Informatique


dpt

Ref: MM25
Objet: voir
sec2

pt1

Jai lhonneur de porter votre attention 1. le premier point aaaaaaaaaaaaaa bbbbbbb

pt2

sec3

2.
3.

le deuxime
etc.
25/12/2013

Sincres salutations, M. X
Transparent 34

"

"

Un modle de lettre: une structure logique gnrique


Lettre

EN TETE

?
destinataire pretexte nom ref

CORPS

?
politesse pol

PIED

auteur

date

texte

signature

nom

? *
sssection

adr

soc

obj

intro

?
dpt section

Mta-oprateurs rguliers ? + *
25/12/2013 Transparent 35

"

"

Lettre: structure arborescente de format ("layout")


M. Martin Socit S. Le 4/11/2002

06150 SA Ref: MM25


Objet: voir Monsieur, Jai lhonneur de porter votre attention 1. le premier point 2. 3. aaaaaaaaaaaaaa bbbbbbb

M. DURAND Socit R.Dpt Informatique

le deuxime etc. Sincres salutations, M. X


25/12/2013 Transparent 36

"

"

Lettre: une structure gnrique de format (layout)


Expditeur
Socit S. adresse date

*
? ?
Monsieur,

Destinataire Socit

Ref: Objet: introduction

Dpt

?
? * *

a politesse signature
25/12/2013

Transparent 37

Lexique Sommaire

Langages & Documents

Rfs 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 "Cration et manipulation de Documents" (CIP1)


HTML 5
.
25/12/2013

Paul Franchi SI 4 2013-14

Transparent - 38

"
Using the standards for Web light Client Web Techniques: "Grand Tour"
Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

"

Lexique Sommaire

HTML - La Gnse

Rfs Techs

1989 - 1992 : CERN


SGML et Hyperliens - HTML 1.0 Tim Berners-Lee et Dan Connally

1993 : MOSAIC
img et form - HTML 1.0

1994 : NETCAPE
CSS et DOM

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

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 HTML 5 at a glance

2011: HTML 5.0


25/12/2013 Transparent 39

"
Using the standards for Web light Client

"

Lexique Sommaire Rfs Techs

HTML - Hyper Text Markup Language


On <balise> le texte source avec un ensemble fini de balises markup tags

Web Techniques: "Grand Tour"


Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

le formatage initial du texte source donne un ordre logique entre les lments de texte, mais aucune indication despacement (lignes, espaces ou tabulations)

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

Les balises HTML jouent un double rle:


structuration logique du document format de prsentation ( layout )

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 nest pas vrifi
25/12/2013 Transparent 40

"

"

Une lettre en HTML (version simpliste)

<html><body bgcolor=#CCCCFF> <table> <tr> <td> <p align=left> M. Martin <br> Socit S. <br> Avenue A. 06150 SA </p> </td> <td> <p align=right> <i> </table> <p align=right> M. DURAND <br> Socit R. <br> Dpt Informatique </p> <p align=left> <p align=center> Ref: MM25 <br> Objet: voir Monsieur, </p > </p> Le 4/11/2002 </i> </td >

<ol> Jai lhonneur de porter votre attention <li> le premier point <ul> < li > aaaaaaaaaaaaaa <li> bbbbbbb </ul> <li> le deuxime <li> etc. </ol> <p align=center>

Sincres salutations, <br> M. X <br> <img src= signature.gif> </p > </body>
</html>
25/12/2013 Transparent 41

"
Using the standards for Web light Client Web Techniques: "Grand Tour"
Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

"

Lexique Sommaire

Survol dHTML (version 4.01)

Rfs Techs

Balisage

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

une balise scrit avec < et > deux caractres spciaux de dbut et fin de balise et un identificateur(nom) prdfini le balisage structure le source en lments 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 llment le balisage est insensible la casse (prfrer les minuscules, obligatoires en XHTML)

Attributs de balises
une balise peut comporter 0 ou plusieurs paires attribut = "valeur" <table border="1" align="center"> sans ou avec (prfrer) quotes doubles " " ou simples ' '
25/12/2013 Transparent 42

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

"

"

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>
25/12/2013 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 parenths afficher -->


</body> </html>
25/12/2013 Transparent 44

"

"

Balisage, Indentation, & Parenthses <html> ( <!-- commentaire --> <head> ( <title> Titre de la page </title> </head> ) <body ( >

( <p > ( ... > ... </a> ) <a href=... ( <ul> ) </ul>
</p>

( <img ( ) /> </li> ) <li> src=...

) </body> ) </html>
25/12/2013 Transparent 45

"

"

Balisage & Arborescence

<html> <!-- commentaire --> <head>

<!--com--> title
a

<title> Titre de la page </title> </head> <body >

head
<p >
<a href=... > ... </a>

html

body

p
</p>

<ul>

<li> <img src=... /> </li>

</ul>

ul

li

img

</body> </html>
25/12/2013 Transparent 46

"
Using the standards for Web light Client Web Techniques: "Grand Tour"
Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

"

Lexique Sommaire

Les dfauts d HTML

Rfs Techs

Beaucoup de versions pas toujours compatibles avec des interprtations dpendantes des navigateurs La structure logique nest pas prise en compte Pas de structure logique gnrique Le balisage nest pas strictement arborescent Pas de formatage gnrique Lvaluation du formatage est strictement li au texte Pas de sparation style-formatage Le balisage mlange le formatage et le style au contenu du texte Lensemble des balises est clos (aucune extension)

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

25/12/2013

Transparent 47

"
Using the standards for Web light Client Web Techniques: "Grand Tour"
Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

"

Lexique Sommaire

(X)HTML: savoir-faire basique


Rfs Techs

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

Styles Textes Images avec mapping Liens et Ancres Listes Tables Layers Frames Iframes Forms & Input "dbaliser" un source HTML Page Web ddies (multi-panneaux): Explorateur: accs par index, listes, aperus, et visualisation Atelier de Dveloppement: code source, visualisation, documentation sur le Web
W3Schools - HTML Tutorial Learn on HTML.net Dave's Interactive HTML Tutorial Utexas Html Tutorial
25/12/2013

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

Transparent 48

"
Using the standards for Web light Client Web Techniques: "Grand Tour"
Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

"

Lexique Sommaire

Quelques rgles d'criture pour un "meilleur" (X)HTML

Rfs Techs

respecter la validation syntaxique XHTML : balisage ferm, bien parenths 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

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

Prfrez les Standards prfrer 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 &nbsp;, utiliser padding: et margin: placement: pas de <table >, utiliser display: float: position:
25/12/2013 Transparent 49

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

"
Using the standards for Web light Client Web Techniques: "Grand Tour"

"

Lexique Sommaire

HTML - Commentaires Conditionnels IE

Rfs Techs

Syntaxe d'un commentaire conditionnel positif: <!--[if condition]> HTML ou XHTML ou CSS ou Script <![endif]--> Syntaxe d'un commentaire conditionnel ngatif: <!--[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 infrieures version lte IE version: Versions d'IE infrieures ou gales version IE version: La version version d'IE gte IE version: Versions d'IE suprieures ou gales version gt IE version: Versions d'IE suprieures version version: IE 5, 5.5, 6 ou 7. Trs utile pour adapter les styles CSS aux versions IE
25/12/2013

Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

Transparent 50

Lexique Sommaire

Langages & Documents

Rfs Techs

. .

Chap II - HTML 5

. .

HTML 5

HTML5 Slideshow
"Responsible" Web development
Paul Franchi SI 4 2013-14

.
25/12/2013 Transparent - 51

"
Using the standards for Web light Client Web Techniques: "Grand Tour"
Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

"

Lexique Sommaire

What is HTML 5 ?

Rfs Techs

HTML 5
The new standard for HTML, XHTML, and the HTML DOM.. HTML 5 still a work in progress..
On 10 April 2007, the Mozilla Foundation, Apple and Opera Software proposed[5] that the new HTML working group of the W3C adopt the WHATWGs 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.[

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

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

25/12/2013

Transparent 52

"
Using the standards for Web light Client Web Techniques: "Grand Tour"
Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

"

Lexique Sommaire

HTML 5 new features

Rfs Techs

New content elements, like


article, footer, header, nav, section

New form controls, like


calendar, date, time, email, url, search

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
25/12/2013

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

Transparent 53

"
Using the standards for Web light Client Web Techniques: "Grand Tour"
Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

"

Lexique Sommaire

HTML 5 at a glance

Rfs 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

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

25/12/2013

Transparent 54

"
Using the standards for Web light Client Web Techniques: "Grand Tour"

"

Lexique Sommaire

Responsible Web development

Rfs Techs

jquery.js modernizr.js
detects browser features

Web Programming: Advanced "Know Hows" " Document Processing": analyse des besoins HTML - Gnse

normalize.css
CSS resets for modern standards (HTML5)

LESS
extends CSS with dynamic behavior.

selectivizr.js
CSS adaptation for IE

XHTML - source type (version simpliste)


Quelques rgles d'criture pour un "meilleur" (X)HTML (X)HTML: savoirfaire

Yeoman, ANGULARJS, Bootstrap/ responsibleSlider.js Joomla, Wordpress

What is HTML 5 ?
HTML 5 new features HTML 5 at a glance

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).
25/12/2013 Transparent 55