introduction et html - fil lille 1routier/enseignement/... · 2014-09-05 · html : introduction...

70
HTML ? un langage ` a balises syntaxe validation emantique HTML : introduction Universit´ e Lille 1 Technologies du Web – HTML : introduction 1

Upload: others

Post on 26-Jul-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

HTML : introduction

Universite Lille 1 Technologies du Web – HTML : introduction 1

Page 2: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

au programme...

1 HTML ?

2 un langage a balises

3 syntaxe

4 validation

5 semantique

Universite Lille 1 Technologies du Web – HTML : introduction 2

Page 3: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

au programme...

1 HTML ?

2 un langage a balises

3 syntaxe

4 validation

5 semantique

Universite Lille 1 Technologies du Web – HTML : introduction 3

Page 4: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

HTML

? Ca veut dire quoi « HTML » ?

langage a balises pour hypertextes

Universite Lille 1 Technologies du Web – HTML : introduction 4

Page 5: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

HTML

HTML

langage a balises pour hypertextes

Universite Lille 1 Technologies du Web – HTML : introduction 4

Page 6: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

HTML

HyperText ML

langage a balises pour hypertextes

Universite Lille 1 Technologies du Web – HTML : introduction 4

Page 7: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

HTML

HyperText Markup L

langage a balises pour hypertextes

Universite Lille 1 Technologies du Web – HTML : introduction 4

Page 8: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

HTML

HyperText Markup Language

langage a balises pour hypertextes

Universite Lille 1 Technologies du Web – HTML : introduction 4

Page 9: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

HTML

HyperText Markup Language

langage a balises pour hypertextes

Universite Lille 1 Technologies du Web – HTML : introduction 4

Page 10: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

HTML

HyperText Markup Languagelangage a balises pour hypertextes

un langagede description de documents web, il permet de structurer le contenu deces documents

a balisesla structure des documents est organisee a l’aide de balises

pour hypertextesles documents contiennent des hyperliens permettant un acces direct aune autre partie du document

exemple – sncf

Universite Lille 1 Technologies du Web – HTML : introduction 5

Page 11: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

HTML

HyperText Markup Languagelangage a balises pour hypertextes

un langagede description de documents web, il permet de structurer le contenu deces documents

a balisesla structure des documents est organisee a l’aide de balises

pour hypertextesles documents contiennent des hyperliens permettant un acces direct aune autre partie du document

exemple – sncf

Universite Lille 1 Technologies du Web – HTML : introduction 5

Page 12: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

HTML

HyperText Markup Languagelangage a balises pour hypertextes

un langagede description de documents web, il permet de structurer le contenu deces documents

a balisesla structure des documents est organisee a l’aide de balises

pour hypertextesles documents contiennent des hyperliens permettant un acces direct aune autre partie du document

exemple – sncf

Universite Lille 1 Technologies du Web – HTML : introduction 5

Page 13: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

HTML

HyperText Markup Languagelangage a balises pour hypertextes

un langagede description de documents web, il permet de structurer le contenu deces documents

a balisesla structure des documents est organisee a l’aide de balises

pour hypertextesles documents contiennent des hyperliens permettant un acces direct aune autre partie du document

exemple – sncf

Universite Lille 1 Technologies du Web – HTML : introduction 5

Page 14: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

X

HTML

5

Universite Lille 1 Technologies du Web – HTML : introduction 6

Page 15: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

X

HTML5

version majeure actuelle du langage HTMLajout de balises par rapport aux versions precedentes

Universite Lille 1 Technologies du Web – HTML : introduction 6

Page 16: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

XHTML

5

Universite Lille 1 Technologies du Web – HTML : introduction 6

Page 17: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

XHTML

5

une « version » d’HTML conforme au langage XMLXML : « eXtensible Meta Language »impose des regles d’ecritures

Universite Lille 1 Technologies du Web – HTML : introduction 6

Page 18: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

XHTML5

XHTML5 ≡ HTML5

memes balisesune syntaxe plus rigoureuse

Universite Lille 1 Technologies du Web – HTML : introduction 6

Page 19: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

au programme...

1 HTML ?

2 un langage a balises

3 syntaxe

4 validation

5 semantique

Universite Lille 1 Technologies du Web – HTML : introduction 7

Page 20: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

au programme...

1 HTML ?

2 un langage a balises

3 syntaxe

4 validation

5 semantique

Universite Lille 1 Technologies du Web – HTML : introduction 8

Page 21: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

langage

? C’est quoi un langage ?

Universite Lille 1 Technologies du Web – HTML : introduction 9

Page 22: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

langage

vocabulaire + syntaxe + semantique

syntaxe = grammairesemantique = sens

Le vocabulaire permet de construire des textes qui respectent lasyntaxe et qui ont un sens.

Universite Lille 1 Technologies du Web – HTML : introduction 10

Page 23: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

langage

vocabulaire + syntaxe + semantique

syntaxe = grammairesemantique = sens

Le vocabulaire permet de construire des textes qui respectent lasyntaxe et qui ont un sens.

Universite Lille 1 Technologies du Web – HTML : introduction 10

Page 24: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

langage

vocabulaire + syntaxe + semantique

syntaxe = grammairesemantique = sens

Le vocabulaire permet de construire des textes qui respectent lasyntaxe et qui ont un sens.

Universite Lille 1 Technologies du Web – HTML : introduction 10

Page 25: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

vocabulaire

elements predefinis, identifies par des balises

ouvrante

/fermante : <element> / </element><h1> <p> <strong>

/ </h1> </p> </strong> ...

balises auto-fermantes : <element/><br/> <img/>

HTML insensible a la casse : <eLEmENt> = <eLeMeNT>mais XHTML ⇒ minuscules : <element>

liste

Universite Lille 1 Technologies du Web – HTML : introduction 11

Page 26: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

vocabulaire

elements predefinis, identifies par des balises

ouvrante

/fermante :

<element>

/ </element><h1> <p> <strong>

/ </h1> </p> </strong> ...balises auto-fermantes : <element/>

<br/> <img/>

HTML insensible a la casse : <eLEmENt> = <eLeMeNT>mais XHTML ⇒ minuscules : <element>

liste

Universite Lille 1 Technologies du Web – HTML : introduction 11

Page 27: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

vocabulaire

elements predefinis, identifies par des balises

ouvrante/fermante : <element> / </element>

<h1> <p> <strong>

/ </h1> </p> </strong> ...balises auto-fermantes : <element/>

<br/> <img/>

HTML insensible a la casse : <eLEmENt> = <eLeMeNT>mais XHTML ⇒ minuscules : <element>

liste

Universite Lille 1 Technologies du Web – HTML : introduction 11

Page 28: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

vocabulaire

elements predefinis, identifies par des balises

ouvrante/fermante : <element> / </element><h1> <p> <strong> ...

/ </h1> </p> </strong> ...balises auto-fermantes : <element/>

<br/> <img/>

HTML insensible a la casse : <eLEmENt> = <eLeMeNT>mais XHTML ⇒ minuscules : <element>

liste

Universite Lille 1 Technologies du Web – HTML : introduction 11

Page 29: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

vocabulaire

elements predefinis, identifies par des balises

ouvrante/fermante : <element> / </element><h1> <p> <strong> / </h1> </p> </strong> ...

balises auto-fermantes : <element/>

<br/> <img/>

HTML insensible a la casse : <eLEmENt> = <eLeMeNT>mais XHTML ⇒ minuscules : <element>

liste

Universite Lille 1 Technologies du Web – HTML : introduction 11

Page 30: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

vocabulaire

elements predefinis, identifies par des balises

ouvrante/fermante : <element> / </element><h1> <p> <strong> / </h1> </p> </strong> ...

balises auto-fermantes : <element/>

<br/> <img/>

HTML insensible a la casse : <eLEmENt> = <eLeMeNT>mais XHTML ⇒ minuscules : <element>

liste

Universite Lille 1 Technologies du Web – HTML : introduction 11

Page 31: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

vocabulaire

elements predefinis, identifies par des balises

ouvrante/fermante : <element> / </element><h1> <p> <strong> / </h1> </p> </strong> ...

balises auto-fermantes : <element/><br/> <img/>

HTML insensible a la casse : <eLEmENt> = <eLeMeNT>

mais XHTML ⇒ minuscules : <element>

liste

Universite Lille 1 Technologies du Web – HTML : introduction 11

Page 32: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

vocabulaire

elements predefinis, identifies par des balises

ouvrante/fermante : <element> / </element><h1> <p> <strong> / </h1> </p> </strong> ...

balises auto-fermantes : <element/><br/> <img/>

HTML insensible a la casse : <eLEmENt> = <eLeMeNT>

mais XHTML ⇒ minuscules : <element>

liste

Universite Lille 1 Technologies du Web – HTML : introduction 11

Page 33: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

vocabulaire

elements predefinis, identifies par des balises

ouvrante/fermante : <element> / </element><h1> <p> <strong> / </h1> </p> </strong> ...

balises auto-fermantes : <element/><br/> <img/>

HTML insensible a la casse : <eLEmENt> = <eLeMeNT>mais XHTML ⇒ minuscules : <element>

liste

Universite Lille 1 Technologies du Web – HTML : introduction 11

Page 34: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

On appelle contenu d’un element le code qui se trouve entre sesbalises ouvrante et fermante.

<p> contenu de l’element p </p>

NB : les balises auto-fermantes ont un contenu vide.

Universite Lille 1 Technologies du Web – HTML : introduction 12

Page 35: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

On appelle contenu d’un element le code qui se trouve entre sesbalises ouvrante et fermante.

<p> contenu de l’element p </p>

NB : les balises auto-fermantes ont un contenu vide.

Universite Lille 1 Technologies du Web – HTML : introduction 12

Page 36: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

au programme...

1 HTML ?

2 un langage a balises

3 syntaxe

4 validation

5 semantique

Universite Lille 1 Technologies du Web – HTML : introduction 13

Page 37: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

au programme...

1 HTML ?

2 un langage a balises

3 syntaxe

4 validation

5 semantique

Universite Lille 1 Technologies du Web – HTML : introduction 14

Page 38: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

syntaxe

La syntaxe definitla structure du documentles regles d’ecriture

Universite Lille 1 Technologies du Web – HTML : introduction 15

Page 39: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

structure minimale

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<!-- entete du document --><head>

<title>Document HTML 5 minimal</title><meta charset="UTF-8"/>

</head>

<!-- corps du document --><body>

<!-- on place ici le contenu de la page -->...

</body>

</html>

← declaration du DOCTYPE

← un element racine

← l’entete du document← un titre← la declaration de l’encodage

de caracteres utilise

← le corps du document

Universite Lille 1 Technologies du Web – HTML : introduction 16

Page 40: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

structure minimale

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<!-- entete du document --><head>

<title>Document HTML 5 minimal</title><meta charset="UTF-8"/>

</head>

<!-- corps du document --><body>

<!-- on place ici le contenu de la page -->...

</body>

</html>

← declaration du DOCTYPE

← un element racine

← l’entete du document← un titre← la declaration de l’encodage

de caracteres utilise

← le corps du document

Universite Lille 1 Technologies du Web – HTML : introduction 16

Page 41: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

structure minimale

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<!-- entete du document --><head>

<title>Document HTML 5 minimal</title><meta charset="UTF-8"/>

</head>

<!-- corps du document --><body>

<!-- on place ici le contenu de la page -->...

</body>

</html>

← declaration du DOCTYPE

← un element racine

← l’entete du document← un titre← la declaration de l’encodage

de caracteres utilise

← le corps du document

Universite Lille 1 Technologies du Web – HTML : introduction 16

Page 42: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

structure minimale

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<!-- entete du document --><head>

<title>Document HTML 5 minimal</title><meta charset="UTF-8"/>

</head>

<!-- corps du document --><body>

<!-- on place ici le contenu de la page -->...

</body>

</html>

← declaration du DOCTYPE

← un element racine

← l’entete du document

← un titre← la declaration de l’encodage

de caracteres utilise

← le corps du document

Universite Lille 1 Technologies du Web – HTML : introduction 16

Page 43: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

structure minimale

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<!-- entete du document --><head>

<title>Document HTML 5 minimal</title><meta charset="UTF-8"/>

</head>

<!-- corps du document --><body>

<!-- on place ici le contenu de la page -->...

</body>

</html>

← declaration du DOCTYPE

← un element racine

← l’entete du document

← un titre← la declaration de l’encodage

de caracteres utilise

← le corps du document

Universite Lille 1 Technologies du Web – HTML : introduction 16

Page 44: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

structure minimale

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<!-- entete du document --><head>

<title>Document HTML 5 minimal</title>

<meta charset="UTF-8"/>

</head>

<!-- corps du document --><body>

<!-- on place ici le contenu de la page -->...

</body>

</html>

← declaration du DOCTYPE

← un element racine

← l’entete du document← un titre

← la declaration de l’encodagede caracteres utilise

← le corps du document

Universite Lille 1 Technologies du Web – HTML : introduction 16

Page 45: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

structure minimale

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<!-- entete du document --><head>

<title>Document HTML 5 minimal</title><meta charset="UTF-8"/>

</head>

<!-- corps du document --><body>

<!-- on place ici le contenu de la page -->...

</body>

</html>

← declaration du DOCTYPE

← un element racine

← l’entete du document← un titre← la declaration de l’encodage

de caracteres utilise

← le corps du document

Universite Lille 1 Technologies du Web – HTML : introduction 16

Page 46: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

regles d’ecriture

parenthesage

Un document html valide est bien parenthese.

1 A toute balise ouvrante <element> doit etre associee une balisefermante </element>.

2 Les elements ne doivent pas se chevaucher :premier ouvert, dernier ferme

Universite Lille 1 Technologies du Web – HTML : introduction 17

Page 47: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

regles d’ecriture

parenthesage

Un document html valide est bien parenthese.

1 A toute balise ouvrante <element> doit etre associee une balisefermante </element>.

2 Les elements ne doivent pas se chevaucher :premier ouvert, dernier ferme

Universite Lille 1 Technologies du Web – HTML : introduction 17

Page 48: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

regles d’ecriture

parenthesage

Un document html valide est bien parenthese.

1 A toute balise ouvrante <element> doit etre associee une balisefermante </element>.

2 Les elements ne doivent pas se chevaucher :premier ouvert, dernier ferme

Universite Lille 1 Technologies du Web – HTML : introduction 17

Page 49: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

regles d’ecriture

parenthesage

Un document html valide est bien parenthese.

1 A toute balise ouvrante <element> doit etre associee une balisefermante </element>.

2 Les elements ne doivent pas se chevaucher :premier ouvert, dernier ferme

<p> debut <code>emboite ?</p> suite </code>

Universite Lille 1 Technologies du Web – HTML : introduction 17

Page 50: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

regles d’ecriture

parenthesage

Un document html valide est bien parenthese.

1 A toute balise ouvrante <element> doit etre associee une balisefermante </element>.

2 Les elements ne doivent pas se chevaucher :premier ouvert, dernier ferme

<p> debut <code>emboite ?</p> suite </code>! illegal !

Universite Lille 1 Technologies du Web – HTML : introduction 17

Page 51: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

regles d’ecriture

parenthesage

Un document html valide est bien parenthese.

1 A toute balise ouvrante <element> doit etre associee une balisefermante </element>.

2 Les elements ne doivent pas se chevaucher :premier ouvert, dernier ferme

<p> debut <code>emboite ?</code> suite </p>

Universite Lille 1 Technologies du Web – HTML : introduction 17

Page 52: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

regles d’ecriture

emboitement (1)Le contenu d’un element peut etre constitue d’autres elements« emboites ».

<p>debut du contenu de p<code>

debut emboite 1<strong>

contenu emboite 2</strong>fin emboite 1

</code>suite du contenu de p

</p>

Universite Lille 1 Technologies du Web – HTML : introduction 18

Page 53: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

regles d’ecriture

emboitement (1)Le contenu d’un element peut etre constitue d’autres elements« emboites ».

<p>debut du contenu de p<code>

debut emboite 1<strong>

contenu emboite 2</strong>fin emboite 1

</code>suite du contenu de p

</p>

Universite Lille 1 Technologies du Web – HTML : introduction 18

Page 54: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

regles d’ecriture

emboitement (2)Les emboitements obeissent a des regles.Tous les emboitements ne sont pas possibles.

exemples :un element <p> ne peut pas contenir un element <h1>

un element <ul> contient necessairement au moins un element <li>

un element <li> est necessairement emboite dans un element <ul>

etc.

Universite Lille 1 Technologies du Web – HTML : introduction 19

Page 55: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

regles d’ecriture

emboitement (2)Les emboitements obeissent a des regles.Tous les emboitements ne sont pas possibles.

exemples :un element <p> ne peut pas contenir un element <h1>

un element <ul> contient necessairement au moins un element <li>

un element <li> est necessairement emboite dans un element <ul>

etc.

Universite Lille 1 Technologies du Web – HTML : introduction 19

Page 56: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

au programme...

1 HTML ?

2 un langage a balises

3 syntaxe

4 validation

5 semantique

Universite Lille 1 Technologies du Web – HTML : introduction 20

Page 57: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

au programme...

1 HTML ?

2 un langage a balises

3 syntaxe

4 validation

5 semantique

Universite Lille 1 Technologies du Web – HTML : introduction 21

Page 58: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

document valide

Un document (X)HTML est valide s’il respecte toutes ces regles.

exemple

Universite Lille 1 Technologies du Web – HTML : introduction 22

Page 59: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

validation

Les outils de validation permettent de verifier la correctionsyntaxique d’un document.

http://validator.w3.org/nu (extension xhtml)

exemple (bis)

important

La validation d’un document produit doit etre systematique

Universite Lille 1 Technologies du Web – HTML : introduction 23

Page 60: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

validation

Les outils de validation permettent de verifier la correctionsyntaxique d’un document.

http://validator.w3.org/nu (extension xhtml)

exemple (bis)

important

La validation d’un document produit doit etre systematique

Universite Lille 1 Technologies du Web – HTML : introduction 23

Page 61: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

au programme...

1 HTML ?

2 un langage a balises

3 syntaxe

4 validation

5 semantique

Universite Lille 1 Technologies du Web – HTML : introduction 24

Page 62: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

au programme...

1 HTML ?

2 un langage a balises

3 syntaxe

4 validation

5 semantique

Universite Lille 1 Technologies du Web – HTML : introduction 25

Page 63: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

semantique

A chaque element (balise) est associee une semantique qui definitson usage.Elle permet de savoir quand et pourquoi utiliser un element.

l’element <p> sert a representer un paragraphe MDNl’element <time> sert a identifier une heure ou une date MDNl’element <td> represente une « case » dans un tableau MDNl’element <strong> sert a donner de l’importance a un texte MDNetc.

Aux balises s’ajoutent bien evidemment les contenus texte pour donnerla semantique (le sens) global du document.

Universite Lille 1 Technologies du Web – HTML : introduction 26

Page 64: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

semantique

A chaque element (balise) est associee une semantique qui definitson usage.Elle permet de savoir quand et pourquoi utiliser un element.

l’element <p> sert a representer un paragraphe MDN

l’element <time> sert a identifier une heure ou une date MDNl’element <td> represente une « case » dans un tableau MDNl’element <strong> sert a donner de l’importance a un texte MDNetc.

Aux balises s’ajoutent bien evidemment les contenus texte pour donnerla semantique (le sens) global du document.

Universite Lille 1 Technologies du Web – HTML : introduction 26

Page 65: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

semantique

A chaque element (balise) est associee une semantique qui definitson usage.Elle permet de savoir quand et pourquoi utiliser un element.

l’element <p> sert a representer un paragraphe MDNl’element <time> sert a identifier une heure ou une date MDN

l’element <td> represente une « case » dans un tableau MDNl’element <strong> sert a donner de l’importance a un texte MDNetc.

Aux balises s’ajoutent bien evidemment les contenus texte pour donnerla semantique (le sens) global du document.

Universite Lille 1 Technologies du Web – HTML : introduction 26

Page 66: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

semantique

A chaque element (balise) est associee une semantique qui definitson usage.Elle permet de savoir quand et pourquoi utiliser un element.

l’element <p> sert a representer un paragraphe MDNl’element <time> sert a identifier une heure ou une date MDNl’element <td> represente une « case » dans un tableau MDN

l’element <strong> sert a donner de l’importance a un texte MDNetc.

Aux balises s’ajoutent bien evidemment les contenus texte pour donnerla semantique (le sens) global du document.

Universite Lille 1 Technologies du Web – HTML : introduction 26

Page 67: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

semantique

A chaque element (balise) est associee une semantique qui definitson usage.Elle permet de savoir quand et pourquoi utiliser un element.

l’element <p> sert a representer un paragraphe MDNl’element <time> sert a identifier une heure ou une date MDNl’element <td> represente une « case » dans un tableau MDNl’element <strong> sert a donner de l’importance a un texte MDN

etc.

Aux balises s’ajoutent bien evidemment les contenus texte pour donnerla semantique (le sens) global du document.

Universite Lille 1 Technologies du Web – HTML : introduction 26

Page 68: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

semantique

A chaque element (balise) est associee une semantique qui definitson usage.Elle permet de savoir quand et pourquoi utiliser un element.

l’element <p> sert a representer un paragraphe MDNl’element <time> sert a identifier une heure ou une date MDNl’element <td> represente une « case » dans un tableau MDNl’element <strong> sert a donner de l’importance a un texte MDNetc.

Aux balises s’ajoutent bien evidemment les contenus texte pour donnerla semantique (le sens) global du document.

Universite Lille 1 Technologies du Web – HTML : introduction 26

Page 69: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

semantique

A chaque element (balise) est associee une semantique qui definitson usage.Elle permet de savoir quand et pourquoi utiliser un element.

l’element <p> sert a representer un paragraphe MDNl’element <time> sert a identifier une heure ou une date MDNl’element <td> represente une « case » dans un tableau MDNl’element <strong> sert a donner de l’importance a un texte MDNetc.

Aux balises s’ajoutent bien evidemment les contenus texte pour donnerla semantique (le sens) global du document.

Universite Lille 1 Technologies du Web – HTML : introduction 26

Page 70: Introduction et HTML - FIL Lille 1routier/enseignement/... · 2014-09-05 · HTML : introduction Universit´e Lille 1 Technologies du Web – HTML : introduction 1. HTML ? un langage

HTML ? un langage a balises syntaxe validation semantique

a suivre ...

HTML : les elements

Universite Lille 1 Technologies du Web – HTML : introduction 27