SommaireLexique Langages & Documents Réfs Techs...... Paul Franchi SI 4 2013-14 13/01/2014...

SommaireSommaire

LexiqueLexique

Langages & Documents RéfsRéfs

TechsTechs

..

..

..

..

.

..

Paul FranchiSI 4

2013-14

11/04/23 Transparent - 1

Chap I

Documents Structurés

Chap II - HTML

"Hyper Text Markup Language"

Chap II - HTML 5

http://www.polytech.unice.fr/~pfz/LANGDOC/COURS10 chapitres en 2 versions .ppt et .pdfaccès distant mais sans les exemplesouaprès téléchargement du répertoire COURSaccès local avec les exemples

http://www.polytech.unice.fr/~pfz/LANGDOC/COURS10 chapitres en 2 versions .ppt et .pdfaccès distant mais sans les exemplesouaprès téléchargement du répertoire COURSaccès local avec les exemples

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

SommaireSommaire

RéfsRéfs

TechsTechs

LexiqueLexique

..

..

..

..

.

..

Sommaire du Cours

Transparent 211/04/23

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 State of the Art

Etat de l'Art: HTML5 CSS3 SPRY JQuery SVG MathML RDF AJAX

Browsercompatibility

RéfsRéfs

TechsTechs

SommaireSommaire

LexiqueLexique


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

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

Biblio: many issues at EPU's lib

Some References


RéfsRéfs

TechsTechs

SommaireSommaire

LexiqueLexique


Documentation et Manuels

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

Manuels. Expressions régulières sous Emacs

Recherche et remplacement sous Emacs

compléments Emacs

grep sous Unix


RéfsRéfs

TechsTechs

SommaireSommaire

LexiqueLexique


Web Reference Browser

de XML vers HTML5+CSS3

metadata .xml metadata .xml


RéfsRéfs

TechsTechs

SommaireSommaire

LexiqueLexique


Doc Example Browser

de XML vers HTML5+CSS3+JS

metadata .xml metadata .xml


RéfsRéfs

TechsTechs

SommaireSommaire

LexiqueLexique


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

Lexique

SommaireSommaire

LexiqueLexique


TechsTechs

..

..

..

..

.

..

Paul FranchiSI 4

2013-14


Chap I


Chap I


Historique & Standards

Architectures Web

Lexique

Références

Modèle de Documents (SGML)

Historique & Standards

Architectures Web

Lexique

Références

Modèle de Documents (SGML)

SommaireSommaire

RéfsRéfs

TechsTechsUsing the standar

ds for Web light Client

What is HTML 5 ?

Web Programming: Advanced "Know Hows"

XHTML - source type (version simpliste)

" Document Processing": analyse des besoins

HTML - Génèse

HTML 5 new features

Web Techniques: "Grand Tour"

Quelques règles d'écriture pour un "meilleur" (X)HTML

(X)HTML: savoir-faire

HTML 5 at a glance

" " LexiqueLexique


Powerful, but Hectic !! Powerful, but Hectic !!

1985 1995 2005

Information Processing (R)évolution?

" "


Web based Applications: directly from the Client to Data

Client

DataRessources

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

Application

software

Application

software

ServerServer

" "


MVC (Model View Controller) Architecture

Smalltalk, Xerox PARC, 19791. 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.

" "


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.

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.

" "

C, Java, C++C, Java, C++


Using the standards for Web light Client

Client side

Data Layer

Application (Business)

Layer

Server side

HTML

CSS

DHTML, JS

AJAX

XML

XSL

Data Bases

Browser

Server side scripting

" "


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

function HTTP() {

}</script><body>

HTTP() ;

</body> </html>

Côté "Client"

Côté "Serveur"

AJAX : schéma "HttpRequest / Response"

" "


3 -Tier Architecture for Web light Client

Presentation Layer

Client

Data Layer

Application (Business) Layer

Server

HTML

CSS

DHTML, JS

AJAX

XML

XSL

Data Bases


Web Server

" "


n-Tier Architecture for Web light Client

Presentation Layer

Client

Data Layer

Application (Business) LayerApplication

(Business) LayerApplication (Business) Layers

Server

HTML

CSS

DHTML, JS

AJAX

XML

XSL

Data Bases


" "

Structure & Contrôle


"en Vrac" Web Server Architecture

Client

Data Base


Datas

Style (Look)

Server

(X)HTML

" "

Server

Interface

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


Overused PHP Architecture (détails)


Datas

Style (Look)

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

while(..){… }

echo "<br /><font ..>"(X)HTML

JS

" "

Server


RIA Architecture Rich Client

Data Base

Datas

Style

Structure XML, RDF

CSS, XSL

Networking

Contrôle &Web Services

JS, DOM

SOAP, WSDL

http, AJAX

Application

Application

Application

" "


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

Rich ClientXML

XSL

Data Bases

"import"

of

fonctionalities

"import"

of

fonctionalities

dynamic

interface

transform

dynamic

interface

transform

metadata

multi-formats

metadata

multi-formats

HTML, CSS

DHTML, JS, AJAX

reduce the

back&forth

needs

reduce the

back&forth

needs

" "



"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

"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

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique

11/04/23

Web Programming: Basic "Know Hows"

Basic Tagging:

HTML & XHTML

Cascading Styling:

HTML, XML & CSS

Dynamic Pages:

DHTML & JS &

DOM

XML

Basic Tagging:

HTML & XHTML

Cascading Styling:

HTML, XML & CSS

Dynamic Pages:

DHTML & JS &

DOM

XML

.xml.xml

.css.css

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique

11/04/23


XML Dialects: MathML, SVG

Document Definition: DTD,

XSD

Dynamic Pages: DXML & JS

& DOM & SVG

Networking: Http, Ajax

XML Processing: XSLT,

XPath, XLink

XML Dialects: MathML, SVG

Document Definition: DTD,

XSD

Dynamic Pages: DXML & JS

& DOM & SVG

Networking: Http, Ajax

XML Processing: XSLT,

XPath, XLink .xsl.xsl

.dtd.dtd .xsd.xsd.dtd.dtd

XML

rdf

XML

rdf

XML

rdf

XML

rdf

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique

11/04/23

Web Programming: "State of the Art"

CSS3: Onglets, transform, etc.

HTML 5: canvas, dragNdrop, etc.

AJAX/PHP/SQL

Dynamic XML using XSL/JS

XML as metadata: RDF, SPRY, XUL

CSS3: Onglets, transform, etc.

HTML 5: canvas, dragNdrop, etc.

AJAX/PHP/SQL

Dynamic XML using XSL/JS

XML as metadata: RDF, SPRY, XUL

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique






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/






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/


Some Références

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique


Documentation et Manuels






Manuels. Expressions régulières sous Em

acs


compléments Emacs

grep sous Unix






Manuels. Expressions régulières sous Em

acs


compléments Emacs

grep sous Unix

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/screencast/html-training/css/positioning/

10 steps to better CSS:

http://shapeshed.com/journal/10_steps_to_better_css/

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique




Lexique

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique


Historique et Standards

GML – Generalized Markup Language IBM, 1960’s 3 initiales des inventeurs

SGML - Standard Generalized Markup Language norme ANSI, 1983 norme ISO, 1986

HTML – HyperText Markup Language CERN, début 1990’s

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

GML – Generalized Markup Language IBM, 1960’s 3 initiales des inventeurs

SGML - Standard Generalized Markup Language norme ANSI, 1983 norme ISO, 1986

HTML – HyperText Markup Language CERN, début 1990’s

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

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique


Terminologie de l’information

Ressource Un service d’information: serveur Normes ISO, numéros ISBN, URL, etc

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

Référence Accès à une entité Lien hypertexte

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

Ressource Un service d’information: serveur Normes ISO, numéros ISBN, URL, etc

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

Référence Accès à une entité Lien hypertexte

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

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique



Impression

Visualisation

Conception & Edition

Echange & Conversion

Analyse Lexicale, Syntaxique et Sémantique

Transformation & Traduction

Collaboration et Partage

Navigation & Recherche

Base Documentaire

Interprétation & Evaluation

Impression

Visualisation

Conception & Edition

Echange & Conversion

Analyse Lexicale, Syntaxique et Sémantique

Transformation & Traduction

Collaboration et Partage

Navigation & Recherche

Base Documentaire

Interprétation & Evaluation

" "


Traitement de Document (modèle SGML)

Structure

Logique

Générique

DTD

EDITION

Interface H/M

Structure

Générique

Format

FORMATAGE

S. LOGIQUE

S. LAYOUT

PRESENTATION

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique


Traitement d’un document: l’approche arborescente

Structure logique ("inductive") Une arborescence enracinée des composants DTD, DOM, XML-schémas

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)

Un format de Présentation (sortie, "rendu") .ps, .dvi, etc Visualisation .pdf etc.

Structure logique ("inductive") Une arborescence enracinée des composants DTD, DOM, XML-schémas

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)

Un format de Présentation (sortie, "rendu") .ps, .dvi, etc Visualisation .pdf etc.

" "


Un modèle de lettre: (exemplaire)

M. Martin

Société S.

06150 SA

Le 4/11/2002

à M. DURAND

Société R. Dpt InformatiqueRef: 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

" "


Un modèle de lettre: structure logique arborescente

M. Martin

Société S.

06150 SA

Le 4/11/2002

à M. DURAND

Société R. Dpt Informatique

Ref: MM25

Objet: à voir

Monsieur,


1. le premier point

aaaaaaaaaaaaaa

bbbbbbb

2. le deuxième

3. etc.

Sincères salutations,

M. X

Lettre

EN TETE CORPS PIED

auteur date destinataire pretexte politesse signaturetexte

intro

sec 1

sec2

sec3

nom

adr

nom

dpt

ref

objsoc

pt1

pt2

" "


Un modèle de lettre: une structure logique générique

Lettre

EN TETE CORPS PIED

auteur date destinataire pretexte politesse signaturetexte

pol

section

nom

adr

nom

dpt

ref

objsoc

sssection

intro

?*

*?

? ?

?

Méta-opérateurs réguliers ? + *

" "


Lettre: structure arborescente de format ("layout")

M. Martin

Société S.

06150 SA

Le 4/11/2002

à M. DURAND

Société R.Dpt InformatiqueRef: MM25

Objet: à voir Monsieur,


1. le premier point

aaaaaaaaaaaaaa

bbbbbbb

2. le deuxième

3. etc.Sincères salutations,

M. X

" "


Lettre: une structure générique de format («layout»)

Expéditeur

Société S.

adresse

date

à Destinataire

Société

DptRef:

Objet:

Monsieur,

introduction

a

politesse

signature

?

*

* *

?

?

?

?

SommaireSommaire

LexiqueLexique


TechsTechs

..

..

..

..

.

..

Paul FranchiSI 4

2013-14


Chap II - HTML


Chap II - HTML


Note au lecteur:

ceci n'est pas un cours HTML,mais un rapide survol

voir le cours "Création et manipulation de Documents" (CIP1)

HTML 5

Note au lecteur:

ceci n'est pas un cours HTML,mais un rapide survol

voir le cours "Création et manipulation de Documents" (CIP1)

HTML 5

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique


HTML - La Génèse

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

1995-96 : Web 1995-96: HTML 2.0 1997: HTML 3.2. et 4.0

2000-2006: XHTML abandon de XHTML 2.0

2011: HTML 5.0

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

1995-96 : Web 1995-96: HTML 2.0 1997: HTML 3.2. et 4.0

2000-2006: XHTML abandon de XHTML 2.0

2011: HTML 5.0

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique


HTML - Hyper Text Markup Language

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: structuration logique du document format de présentation (« layout »)

Le principe de formatage est celui des boites rectangulaires arborescentes mais le parenthesage n’est pas vérifié

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: structuration logique du document format de présentation (« layout »)

Le principe de formatage est celui des boites rectangulaires arborescentes mais le parenthesage n’est pas vérifié

" "


<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> </i> </td >

</table>

<p align=right> </p>

<p align=left> </p>

<p align=center> </p >

Le 4/11/2002

à M. DURAND <br> Société R. <br> Dpt Informatique

Ref: MM25 <br> Objet: à voir

Monsieur,

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

</body>

</html>

Sincères salutations, <br> M. X <br> <img src= signature.gif> </p >

Une lettre en HTML (version simpliste)

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique


Survol d’HTML (version 4.01)

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)

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 ' '

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)

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 ' '

" "


<html>



<head>

<title> Titre de la page dans le navigateur </title>

</head>

<body >



</body>

</html>

HTML - 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" />



<title> Titre de la page dans le navigateur </title>

</head>

<body >



</body>

</html>

" "


Balisage, Indentation, & Parenthèses

<html> 

<head>

<title> Titre de la page </title>

</head>

<body >

<p >

<a href=... > ... </a>

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

</ul>

</p>

</body>

</html>

( (

( ) ) (

( ( ... ) ( ( ( ) ) )

) )

)

" "


Balisage & Arborescence

<html> 

<head>

<title> Titre de la page </title>

</head>

<body >

<p >

<a href=... > ... </a>

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

</ul>

</p>

</body>

</html>

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique


Les défauts d’ HTML

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

Le balisage mélange le formatage et le style au contenu du texte

L’ensemble des balises est clos (aucune extension)

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

Le balisage mélange le formatage et le style au contenu du texte

L’ensemble des balises est clos (aucune extension)

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique


(X)HTML: savoir-faire basique 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

W3Schools - HTML Tutorial Learn on HTML.net Dave's Interactive HTML Tutorial Utexas Html Tutorial

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

W3Schools - HTML Tutorial Learn on HTML.net Dave's Interactive HTML Tutorial Utexas Html Tutorial

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique



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

préférer les styles CSS, notamment en feuilles externes

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:

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

préférer les styles CSS, notamment en feuilles externes

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:

Préférez

les Standards

du Web

Préférez

les Standards

du Web

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique


Syntaxe d'un commentaire conditionnel positif: 

Syntaxe d'un commentaire conditionnel négatif: <![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

Syntaxe d'un commentaire conditionnel positif: 

Syntaxe d'un commentaire conditionnel négatif: <![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

HTML - Commentaires Conditionnels IE

SommaireSommaire

LexiqueLexique


TechsTechs

..

..

..

..

.

..

Paul FranchiSI 4

2013-14


Chap II - HTML 5Chap II - HTML 5

HTML 5

HTML5 Slideshow

"Responsible" Web development

HTML 5

HTML5 Slideshow

"Responsible" Web development

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique


What is HTML 5 ?

HTML 5 The new standard for HTML, XHTML, and the

HTML DOM.. HTML 5 still a work in progress..

Browser Support Safari, Chrome, Firefox, and Opera do some ... Internet Explorer 9 will do….

HTML 5 The new standard for HTML, XHTML, and the

HTML DOM.. HTML 5 still a work in progress..

Browser Support Safari, Chrome, Firefox, and Opera do some ... Internet Explorer 9 will do….

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.[

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.[

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique


HTML 5 new features 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

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

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique


HTML 5 at a glance

CANVAS

VIDEO & AUDIO

DRAG n DROP

sur le Web HTML 5 Slides Presentatio

n HTML 5 demos MDC Canvas Tutorial SVG or Canvas Drag n Drop in FF 3.5

CANVAS

VIDEO & AUDIO

DRAG n DROP

sur le Web HTML 5 Slides Presentatio

n HTML 5 demos MDC Canvas Tutorial SVG or Canvas Drag n Drop in FF 3.5

SommaireSommaire

RéfsRéfs



What is HTML 5 ?




HTML - Génèse

HTML 5 new features




HTML 5 at a glance

" " LexiqueLexique


« Responsible » Web development

jquery.js modernizr.js detects browser features

normalize.css CSS resets for modern standards (HTML5)

LESS extends CSS with dynamic behavior.

selectivizr.js CSS adaptation for IE

Yeoman, ANGULARJS, Bootstrap/

responsibleSlider.js Joomla, Wordpress

jquery.js modernizr.js detects browser features

normalize.css CSS resets for modern standards (HTML5)

LESS extends CSS with dynamic behavior.

selectivizr.js CSS adaptation for IE

Yeoman, ANGULARJS, Bootstrap/

responsibleSlider.js Joomla, Wordpress

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).

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).

SommaireLexique Langages & Documents Réfs Techs...... Paul Franchi SI 4 2013-14 13/01/2014...

Documents

Transcript of SommaireLexique Langages & Documents Réfs Techs...... Paul Franchi SI 4 2013-14 13/01/2014...