HTML PDF

Programmation Web :
HTML
Prpar par :
Dr. Hanne GHORBEL AGREBI

hanenghorbel.fseg@gmail.com
22 fvrier 2017 Programmation Web 2016

2016--2017 1
HTML = HyperText Markup Language ?
Hyper : Non linaire, liens entre nuds

Text : Compos de texte
Markup : Marqu, balis
Language : Langage
Langage balises de description de documents

hypertextes

2016--2017 2
1
Quest--ce que HTML ?
Quest
Langage de prsentation de documents

Nest PAS un langage de programmation
Langage : syntaxe STRICTE
Utilis pour construire les pages Web
Navigation hypertexte : ancres, liens
Utilise des balises
Documents exploits par des agents utilisateurs
Navigateur pour visualiser le rsultat
Robots des moteurs de recherche pour indexer
Automates divers pour traiter les donnes

2016--2017 3
Bref historique des normes
WWW Project Proposal (mars 1989)

W3 Consortium (1994) http://www.w3.org
HTML 1.0 (aot 1994)
HTML 2.0 (novembre 1995)
HTML 3.2 (janvier 1997)
HTML 4.0 (avril 1998)
HTML 4.01 (dcembre 1999)
XHTML 1.0 (janvier 2000)
HTML 5 depuis 2003, depuis 2007 au W3C,
standard depuis 2014
2016--2017 4
2
Pourquoi apprendre le langage HTML ?
Il existe des diteurs WYSIWYG What You See

Adobe GoLive Is What You
Macromedia Adobe Dreamweaver Get
Microsoft FrontPage
NetObjects Fusion
Netscape Composer
OpenOffice

Pages Web produites dynamiquement
Programme produisant du code HTML
VOUS crivez le programme WYSIWYG hors jeu
2016--2017 5
Principe de HTML
Structuration dun document texte
Apporter de la structure au document
Apporter de la logique au document
laide de balises
Document simple
Structure et mise en forme sont lies
Titre plus gros, numrotation automatique
Paragraphe = nouvelle ligne
Livre = long texte
Contenu du livre = ensemble de chapitres et de paragraphes
Informations sur le livre ne faisant pas partie intgrante de
lhistoire = titre, auteur, rsum, anne de parution,

2016--2017 6
3
Structurer un document ?
Mettre en forme ?
1- Structurer (HTML)

2016--2017 7
Structurer le document
Titre du document
Titre de niveau 1
Titre de niveau 2
Titre de niveau 3
Paragraphe

Reprer les structures :

Marquer leur dbut/fin
Utilisation de balises
2016--2017 8
4
Appliquer une feuille de style
Style :
Titre
Policededeniveau
base :18pt
TitreRouge
de niveau 1
Paragraphes
Bleu, majuscules
Justifier
Bords haut et bas
re
1Paragraphes
lettre paragraphe
Gros,
Justifier
gris, italique
2016--2017 9
Les grandes lignes
Texte ASCII 7 bits (alphabet non accentu + quelques

symboles)
Retour la ligne non structurant :
non mis en forme
Espaces (sens
(sens large)
large) conscutifs = UN espace
Caractres accentus : reprsentation spcifique
Symboles : reprsentation spcifique
Balises = structure, pas (plus
(plus)) mise en forme
Mise en forme : feuille de style CSS
Commentaires : >

2016--2017 10
5
Bref historique des fonctionnalits
Sparation du fond et de la forme
HTML HTML HTML HTML
2.0 3.2 4.0 4.01
Structuration du document OUI OUI OUI OUI
Mise en forme dans les balises OUI OUI NON NON
Feuilles de style CSS NON NON OUI OUI
Feuilles de style CSS2 NON NON NON OUI
Interactivit JavaScript NON NON OUI OUI

2016--2017 11
Balises (tags, marqueurs) HTML
Texte entour par < et > (chevrons)

Balises insensibles la casse :
<BALISE
BALISE>>
<balise
balise>> quivalent
<Balise
Balise>> mais XHTML minuscules
<bAlIsE
bAlIsE>>
Ouvrante : <balise
balise> > Encadrement d'un bloc
Fermante : </balise
</balise> > (ventuellement optionnelle)
Non visibles dans le rendu du navigateur
attributs/options : <bali attrattr= ="val val" " opt
opt>>

2016--2017 12
6
Utilisation des balises
Utilisation CORRECTE
<i>Texte
Texte<<b>Texte Texte
Texte</
</b
b></
></i
i>
Utilisation INCORRECTE
<i>Texte
Texte<<b>Texte Texte
Texte</
</i
i></
></b
b>
Jamais de chevauchement (pile dtats)

2016--2017 13
Outils de validation
Les spcifications
http://www.w3.org/
HTML 4.01 : http://www.w3.org/TR/html401/
CSS 2.1 : http://www.w3.org/TR/CSS21/
Validation HTML
Validateur en ligne : http://validator.w3.org/
Validateur sur intranet : http://wwwdoc/w3c
http://wwwdoc/w3c--validator/
Validation CSS :
Validateur en ligne : http://jigsaw.w3.org/css
http://jigsaw.w3.org/css--validator/
Validateur sur intranet : http://wwwdoc/css
http://wwwdoc/css--validator/

2016--2017 14
7
Document HTML
Document texte ASCII .htm ou .html

Structure de base :
1. Information sur la version de HTML utilise
2. En-
En-tte dclaratif
3. Corps, contenu du document
1. <!DOCTYPE HTML PUBLIC "-"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
http://www.w3.org/TR/html4/strict.dtd">
>
<html
html>
>
<head
head>
>
2. <title
title>>Ma premire page Web</
Web</title
title>
>
</head>
</head >
<body
body>
>
3. Salut !
</body
</body>>
</html>
</html >
2016--2017 15
Document HTML

Structure de base :
2. En-
En-tte dclaratif
>
<html
html> >
<head>
2. <title>Ma premire page Web</title>
</head>
<body>
3. Salut !
</body>
</html
</html>>
2016--2017 16
8
Document HTML

Structure de base :
2. En-
En-tte dclaratif
>
<html>
<head
head>
>
2. <title
title>
>Ma premire page Web</
Web</title
title>
>
</head>
</head>
<body>
3. Salut !
</body>
</html>
2016--2017 17
Structure et contenu de len-

len-tte
Informations sur le document

Titre du document (obligatoire)
<title
title>> </
</title
title>
>
Mta donnes
<meta name
name=="nom
nom"" content
content=="valeur
valeur"">
<meta name
name=="Author
Author"
" content
content=="J. Cutrona
Cutrona"">
<meta name
name=="keywords" lang
lang=="fr
fr"" content
content=="cours, HTML">
HTML">
<meta name
name=="keywords" lang
lang=="en" content
content=="course, HTML">
HTML">
<meta name
name=="copyright" content
content= ="2005 IUT Reims">
Reims">
Autres informations
Styles
Scripts

2016--2017 18
9
Table ASCII
Car<
Car<->Code Car<
Car<->Code Car<
Car<->Code Car<
Car<->Code Car<
Car<->Code Car<
Car<->Code Car<
Car<->Code
(nul) 0 (dc3) 19 & 38 9 57 L 76 _ 95 r 114
(soh)
soh) 1 (dc4) 20 ' 39 : 58 M 77 ` 96 s 115
(stx)
stx) 2 (nak) 21 ( 40 ; 59 N 78 a 97 t 116
(etx)
etx) 3 (syn) 22 ) 41 < 60 O 79 b 98 u 117
(eot)
eot) 4 (etb) 23 * 42 = 61 P 80 c 99 v 118
(enq)
enq) 5 (can) 24 + 43 > 62 Q 81 d 100 w 119
(ack)
ack) 6 (em) 25 , 44 ? 63 R 82 e 101 x 120
(bel) 7 (sub) 26 - 45 @ 64 S 83 f 102 y 121
(bs) 8 (esc) 27 . 46 A 65 T 84 g 103 z 122
(ht) 9 (fs) 28 / 47 B 66 U 85 h 104 { 123
(nl)
nl) 10 (gs) 29 0 48 C 67 V 86 i 105 | 124
(vt)
vt) 11 (rs) 30 1 49 D 68 W 87 j 106 } 125
(np)
np) 12 (us) 31 2 50 E 69 X 88 k 107 ~ 126
(cr)
cr) 13 (sp) 32 3 51 F 70 Y 89 l 108 (del)
del) 127
(so)
so) 14 ! 33 4 52 G 71 Z 90 m 109
(si) 15 " 34 5 53 H 72 [ 91 n 110
(dle)
dle) 16 # 35 6 54 I 73 \ 92 o 111
(dc1) 17 $ 36 7 55 J 74 ] 93 p 112
(dc2) 18 % 37 8 56 K 75 ^ 94 q 113

2016--2017 19
Entits HTML (dans <body

body>>)
Reprsentation spcifique des

Symboles
Caractres accentus
Absents de la table ASCII donc composition
Forme gnrale des entits HTML
&code
code;;
Quelques exemples
&eacute
eacute;; "é"
&nbsp
nbsp;; " " espace inscable
<
lt; "<" <
&
amp; "&" &

2016--2017 20
10
Tables de caractres
Dfinir la table des caractres de la page HTML

Si non ASCII
Sera utilise par lagent utilisateur (si disponible)
Permet de limiter les entits HTML (source : lisibilit)
Balise META placer dans <head
head>>
Table de caractres "Europe de l'Ouest (latin1)
<meta http
http- -equiv
equiv="content
="content- -type"
content="text
content=" text/html;
/html; charset
charset= =ISO-
ISO-8859
8859-
-1">
Table de caractres UNICODE
<meta http
http- -equiv
equiv="content
="content- -type"
content="text
content=" text/html;
/html; charset
charset= =UTF-
UTF-8">

2016--2017 21
Document HTML

Structure de base :
2. En-
En-tte dclaratif
>
<html>
<head>
2. <title>Ma premire page Web</title>
</head>
<body
body>
>
3. Salut !
</body
</body>
>
</html>
2016--2017 22
11
Utilisation et utilit des balises dans <body
body>>
Initialement : mise en page du document

Police, couleur, taille, alignement du texte,
Maintenant : structuration logique du document
Titres de diffrents niveaux
Paragraphes, citation, exemple, code,
Listes
Tableaux,
Si le document est correctement structur,
structur,
chaque lment structurel pourra est mis en
forme via une feuille de style CSS
2016--2017 23
Mise en page Structuration
Titres (6 niveaux de hirarchie) :

<h1>
h1> </h1
</h1>>
<h2>
h2> </h2
</h2>>
<h3>
h3> </h3
</h3>>
<h4>
h4> </h4
</h4>>
<h5>
h5> </h5
</h5>>
<h6>
h6> </h6
</h6>>
Paragraphes
<p> [</p
</p>]
Saut de ligne :
<br />

2016--2017 24
12
Mise en page Structuration
Ligne de sparation horizontale :

<hr />
Texte prformat (brut) :
<pre
pre>> </ </pre
pre>>
Retours la ligne et espaces multiples apparaissent
Groupe mode en ligne structuration pure
<span
span>> </
</span
span>
>
Groupe mode bloc structuration pure
<div
div>> </
</div
div>
>

2016--2017 25
Mise en forme Structuration
Styles physiques logiques

Gras : <b> </
</bb>
Italique : <i> </
</ii>
Soulign : <u> </
</uu>
Styles logiques
Citation : <cite
cite>> </
</cite
cite>>
Code : <code
code>> </
</code
code>>
Mise en valeur : <em
em>> </
</em
em>
>
Mise en valeur : <strong
strong>> </
</strong
strong>>
Exemple : <samp
samp>> </
</samp
samp>>


2016--2017 26
13
Liste de dfinitions
Liste : <dl
dl>> </
</dl
dl>>
lment : <dtdt>
> [</
</dt
dt>
>]
Dfinition : <dd
dd>> [</
</dd
dd>>]
<dl>
dl>
<dt>
dt>Ours
Ours</
</dt
dt>
>
<dd>
dd>Les ours sont de grands mammifres
plantigrades de l'ordre des Carnivores, famille
des Ursids, sous-
sous-famille des Ursins.
</dd
</dd>
>
<dt>
dt>Chvre
<dd>
dd>La chvre est un mammifre herbivore et
ruminant, appartenant la famille des bovids,
sous-
sous-famille des caprins ou caprins.
</dl
</dl>
> 
-->
2016--2017 27
Liste non numrote
Liste : <ul
ul>> </
</ul
ul>>
lment : <lili>
> [</
</li
li>
>]
Liste des courses :
<ul>
ul>
<li>
li>Beurre
Beurre</
</li
li>
>
<li>
li>Sucre
Sucre</
</li
li>
>
<li>
li>Farine
Farine</
</li
li>
>
<li>
li>Oeufs
<li>
li>Confiture
</ul
</ul>
>

2016--2017 28
14
Liste numrote
Liste : <ol
ol>> </
</ol
ol>>
lment : <lili>
> [</
</li
li>
>]
Liste des courses :
<ol>
ol>
<li>
li>Beurre
Beurre</
</li
li>
>
<li>
li>Sucre
Sucre</
</li
li>
>
<li>
li>Farine
Farine</
</li
li>
>
<li>
li>Oeufs
<li>
li>Confiture
</ol
</ol>
>

2016--2017 29
Tableaux
Tableau : <table
table> > </ </table
table> >
Ligne : <tr
tr>> [</ </tr
tr>>]
Cellule : <td
td>> [</ </td
td>>]
Cellule den-
den-tte : <th
th>> [</</th
th>>]
<table
table>
>
Colonnes
<tr>
tr> <
<td
td> =td>
>1</td
</ nombre
> <
<td
td> maxi
>2</td
</ > de <td
td> td>> par</tr
<tr
</tr>
>>
tr>
<tr>
tr> <
<td
td>
>3</td
</td>
> <
<td
td>
>4</td> <td
</td> td>>5</
</td
td>
> </tr
</tr>
>
</table
</table>
>
<table
table>
>
<tr>
tr> <
<td
td>
>1 <td>
td>2 quivalent au prcdent
<tr>
tr> <
<td
td> td>4 <td
>3 <td> td>>5
</table
</table>
>
2016--2017 30
15
Tableaux avancs
Extension de cellule sur C colonnes :

<td colspan
colspan=
="C">
<table
table>
>
<tr>
tr> <
<td
td>
>1 <td colspan="2">2 
-->
<tr>
tr> <
<td
td>
>3 <td>
td>4 <td>
td>5
</table
</table>
>

2016--2017 31
Tableaux avancs
Extension de cellule sur L lignes :

<td rowspan
rowspan=
="L">
<table
table>
>
<tr>
tr> <
<td
td>
>1 <td rowspan
rowspan=
="2">2
<tr>
tr> <
<td
td>
>3 
--> <td>
td>4 <td>
td>5
</table
</table>
>

2016--2017 32
16
Elments de regroupement
Mcanisme gnrique de structuration du
document
Utilisation conjointe avec les feuilles de style
Groupe en ligne
<span
span>> </
</span
span>
>
Groupe en bloc
<div
div>> </
</div
div>
>

2016--2017 33
Classe, identification et description
Affecter une balise une classe

Attribut class
<p class
class=="ma_classe
ma_classe"">
Donner un identifiant une balise
Sous--groupe de
Sous
Attribut id l'ensemble des
balises
Identifiant doit tre unique (charge du concepteur)
<p>
<p idid=="mon_id_unique
mon_id_unique" ">
Dcrire un lment Une balise <p>
Attribut title pour la plupart des lments
repre de faonHTML
Texte affich sous forme dinfo-
dinfo-bulle (tooltip)
unique

2016--2017 34
17
Liens et ancres
Base de la navigation hypertexte

Lien (ancre
(ancre source dun)
dun) : zone active cliquable
<a href
href= ="URL
URL" ">support du lien</
lien</a a>
Support : texte, image, contenus entre <a> et </
</aa>
URL : ksako ?
Ancre (nomme) : point cible
<a name
name=="nom
nom" ">point dancrage</
dancrage</a a>
name
name== nom unique ( la charge du concepteur)
Comment cibler lancre dans un lien ? URL

2016--2017 35
URL : Universal Resource Locator
Dcrire ladresse dune ressource Web

1. Mcanisme daccs
2. Equipement hbergeant la ressource
3. La ressource et son chemin
http://www.google.fr/index.htm
l 1. 2. 3.
http:// www.google.fr /index.html

ftp:// 66.249.85.99 /im/image.png
mailto: 1123636579 /linux

2016--2017 36
18
Marque de fragment
Faire rfrence un emplacement repr dans

une ressource
Atteindre une ancre
<h1><
h1><a
a name
name=
="x1"
x1">txt
txt</
</a
a></
></h1
h1>
>
ou atteindre un lment identifi
<h1 id=
id="x1"
x1">txt
txt</
</h1
h1>
>
URL se terminant par #nom_de_l_ancre

http://www.w3.org/TR/html4/
intro/intro.html#fragment-
intro/intro.html#fragment -uri
2016--2017 37
Image
Ajouter une image au sein du document

<img [width
width= ="w"] [height
height= ="h"]
src=
src ="URL
URL"" alt
alt= ="texte alternatif"
alternatif">
src
URI permettant datteindre limage
width et height
permettent lagent de prvoir un emplacement avant
davoir analys limage
permettent au concepteur de redimensionner limage
alt
Texte alternatif si limage est indisponible/corrompue

2016--2017 38
19
Importance de fixer la taille de limage
Situation normale

2016--2017 39

Image absente SANS taille dfinie

2016--2017 40
20
Image absente / chargement AVEC taille
dfinie

2016--2017 41
Qu'est--ce qu'une image

Qu'est
Description nave : grille de carrs de couleur
Pixel

2016--2017 42
21
Images en niveaux de gris
Images en 256 nuances de gris
1 pixel = 1 octet
Valeur de l'octet = intensit lumineuse
0 = noir
255 = blanc

2016--2017 43
Reprsentation de la couleur
Principe de la synthse additive des couleurs

En utilisant 3 couleurs, on peut les former toutes
Rouge, Vert, Bleu en quantit variable
Reprsentation informatique : quantit = entier

Habituellement, 1 octet, soit 256 niveaux
Donc, 1 couleur = 3 octets (1 R, 1V, 1B)

2016--2017 44
22
Reprsentation de la couleur
Images vraies couleurs :

dites 24 bits (3
(31octet = 3
38bits)
16,7 millions de couleurs (256
(256256
256
256=16.777.216)
Chaque pixel = triplet (R,V,B)
Images vraies couleurs + canal alpha :
dites 32 bits, pixel = quadruplet (R,V,B,A)
Images couleurs indexes :
dites 8 bits (1 octet)
2 256 couleurs
Table de 2 256 triplets (R,V,B)
Chaque pixel = 1 index (octet) de la table de couleurs

2016--2017 45
Images "vraies couleurs"
+ + =
rouge vert bleu

2016--2017 46
23
Images couleurs indexes
0 0 0 0 0 1 1 1 1 1 0 0 0 0 0
index rouge vert bleu
0 0 0 1 1 2 2 2 2 2 1 1 0 0 0
0 255 255 255
0 0 1 2 2 2 2 2 2 2 2 2 1 0 0
0 1 2 2 2 2 2 2 2 2 2 2 2 1 0 1 0 0 0
0 1 2 2 2 2 2 2 2 2 2 2 2 1 0 2 255 255 0
1 2 2 2 1 1 2 2 2 1 1 2 2 2 1
1 2 2 2 1 1 2 2 2 1 1 2 2 2 1
1 2 2 2 2 2 2 2 2 2 2 2 2 2 1
1 2 2 2 2 2 2 2 2 2 2 2 2 2 1
1 2 2 2 1 2 2 2 2 2 1 2 2 2 1
0 1 2 2 2 1 1 1 1 1 2 2 2 1 0
0 1 2 2 2 2 2 2 2 2 2 2 2 1 0
0 0 1 2 2 2 2 2 2 2 2 2 1 0 0
0 0 0 1 1 2 2 2 2 2 1 1 0 0 0
0 0 0 0 0 1 1 1 1 1 0 0 0 0 0

2016--2017 47
Format dimages pour le Web
GIF (Compression sans perte)

2 256 couleurs Textes, tracs, figures,
Animation possible images contours prcis
Transparence
JPG (Compression avec perte paramtrable)
16 millions de couleurs
Images naturelles :
Taux de compression lev
photographies
PNG (Compression sans perte)
2 256 couleurs ou 16 millions de couleurs
Canal alpha
Format libre
Tout, condition de bien
choisir le nombre de couleurs
2016--2017 48
24
Formats dimages pour le Web : Bilan
Format Compression Effets visibles lis au format
GIF 256 c. 1:20 Lgre perte de couleurs
GIF 64 c. 1:48 Perte de couleurs
JPEG 100% 1:17 Lger flou
JPEG 50% 1:51 Distorsions importantes
JPEG 5% 1:144 Distorsions trs importantes
PNG 16M c. 1:23 Aucun

2016--2017 49
Images cliquables
Carte de zones cliquables sur une image

<img src
src=="URL1
URL1" " usemap
usemap= ="#nom
"#nom"" alt
alt==>
<map name
name= ="nom
nom" ">
<area href
href=="URL2
URL2" " shape
shape= ="forme
forme""
coords=
coords ="coordonnes_en_pixels
coordonnes_en_pixels" "
alt=
alt ="texte_alternatif
texte_alternatif" ">
[<area > >]
</map
</map> >
name
name= = nom de la carte, repris dans usemap
usemap= =

2016--2017 50
25
Images cliquables : formes de zones
shape
shape=
="forme
forme""
rect : rectangle
coords=
coords="coin_sup_gauche, coin_inf_droit"
coin_inf_droit"
circle : cercle
coords=
coords="centre, rayon"
rayon"
poly : polygone
coords=
coords="point_1, point_2, point_3, "
"
default : toute la zone x
Coordonnes
Coordonnes dun point
dans lespace image (pixels)
y
2016--2017 51
26

HTML PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML PDF

Загружено:

Авторское право:

Доступные форматы

Programmation Web :

Dr. Hanne GHORBEL AGREBI

22 fvrier 2017 Programmation Web 2016

HTML = HyperText Markup Language ?

Hyper : Non linaire, liens entre nuds

Langage balises de description de documents

22 fvrier 2017 Programmation Web 2016

Langage de prsentation de documents

22 fvrier 2017 Programmation Web 2016

Bref historique des normes

WWW Project Proposal (mars 1989)

Il existe des diteurs WYSIWYG What You See

22 fvrier 2017 Programmation Web 2016

22 fvrier 2017 Programmation Web 2016

Reprer les structures :

Les grandes lignes

Texte ASCII 7 bits (alphabet non accentu + quelques

22 fvrier 2017 Programmation Web 2016

Structuration du document OUI OUI OUI OUI

Mise en forme dans les balises OUI OUI NON NON

Feuilles de style CSS NON NON OUI OUI

Feuilles de style CSS2 NON NON NON OUI

Interactivit JavaScript NON NON OUI OUI

22 fvrier 2017 Programmation Web 2016

Balises (tags, marqueurs) HTML

Texte entour par < et > (chevrons)

22 fvrier 2017 Programmation Web 2016

Jamais de chevauchement (pile dtats)

22 fvrier 2017 Programmation Web 2016

Document texte ASCII .htm ou .html

Document texte ASCII .htm ou .html

Document texte ASCII .htm ou .html

Structure et contenu de len-

Informations sur le document

22 fvrier 2017 Programmation Web 2016

22 fvrier 2017 Programmation Web 2016

Entits HTML (dans <body

Reprsentation spcifique des

22 fvrier 2017 Programmation Web 2016

Dfinir la table des caractres de la page HTML

22 fvrier 2017 Programmation Web 2016

Document texte ASCII .htm ou .html

Initialement : mise en page du document

Mise en page Structuration

Titres (6 niveaux de hirarchie) :

22 fvrier 2017 Programmation Web 2016

Ligne de sparation horizontale :

22 fvrier 2017 Programmation Web 2016

Mise en forme Structuration

Styles physiques logiques

22 fvrier 2017 Programmation Web 2016

Liste non numrote

22 fvrier 2017 Programmation Web 2016

22 fvrier 2017 Programmation Web 2016

Extension de cellule sur C colonnes :

22 fvrier 2017 Programmation Web 2016

Extension de cellule sur L lignes :

22 fvrier 2017 Programmation Web 2016

Utilisation conjointe avec les feuilles de style

22 fvrier 2017 Programmation Web 2016

Classe, identification et description

Affecter une balise une classe

22 fvrier 2017 Programmation Web 2016