170
Partie II : HTML de A à Partie II : HTML de A à Z Z

1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

Embed Size (px)

Citation preview

Page 1: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

1

Partie II : HTML de A à ZPartie II : HTML de A à Z

Page 2: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

2

PlanPlan

PlanPlan1. Introduction2. HTML : La structure3. Les liens4. Le texte5. Les images6. Les tableaux7. Les cadres8. Les formulaires9. HTML et le multimédia10. HTML et les autres langages

Page 3: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

3

Introduction(1)

Historique de HTMLHistorique de HTML HTML (Hyper Text Markup Language) HTML (Hyper Text Markup Language) Conçu par Tim Berners-Lee au CERN en 1990 Conçu par Tim Berners-Lee au CERN en 1990 Dérivé de SGMLDérivé de SGML- Standard Generalized Markup Language- Standard Generalized Markup Language : :

SGML est un langage de description de document pour SGML est un langage de description de document pour échange entre systèmes hétérogènes. échange entre systèmes hétérogènes.

Rendu populaire en 1993 par Mosaic, développé au NCSA Rendu populaire en 1993 par Mosaic, développé au NCSA Pas un traitement de texte mais un standard d'échangePas un traitement de texte mais un standard d'échange Suivi de nombreuses extensions diverses Suivi de nombreuses extensions diverses

Novembre 1995: HTML 2.0 défini par IETF Novembre 1995: HTML 2.0 défini par IETF Janvier 1997: HTML 3.2 défini par W3C Janvier 1997: HTML 3.2 défini par W3C Décembre 1997: HTML 4.0 défini par W3C Décembre 1997: HTML 4.0 défini par W3C HTML+ (1993) et HTML 3.0 (1995) sont non standards HTML+ (1993) et HTML 3.0 (1995) sont non standards

Page 4: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

4

Introduction(2)

Historique de HTMLHistorique de HTML Standardisation de HTMLStandardisation de HTML

[HTML 1.0] 1990 Hypertexte + images [HTML 1.0] 1990 Hypertexte + images [HTML+] 1993 [HTML+] 1993 TABLETABLE, images cliquables, , images cliquables, FORMFORM [HTML 2.0] IETF 11/95 Mosaïc [HTML 2.0] IETF 11/95 Mosaïc [HTML 3.2] W3C 1/97: tableaux, font size, color, java, javascript [HTML 3.2] W3C 1/97: tableaux, font size, color, java, javascript [HTML 4.0] W3C 4/98: frames- styles sheets - améliorations [HTML 4.0] W3C 4/98: frames- styles sheets - améliorations

tableaux , formulaires - HTML dynamique - offre d'alternatives: tableaux , formulaires - HTML dynamique - offre d'alternatives: accès aux handicapésaccès aux handicapés

http://www.w3.org/MarkUp/ http://www.w3.org/MarkUp/

Page 5: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

5

Introduction(3)

Pourquoi HTMLPourquoi HTML

La démocratisation du World Wide Web a engendré la nécessité de La démocratisation du World Wide Web a engendré la nécessité de développer des sites Internet qui doivent être :développer des sites Internet qui doivent être : En adéquation avec les technologies Internet déjà existantesEn adéquation avec les technologies Internet déjà existantes Adaptés aux aspirations du public en matière deAdaptés aux aspirations du public en matière de

– visibilité, – d'attraction– de convivialité

L'organisme L'organisme W3CW3C (World Wide Web Consortium) chargé de la (World Wide Web Consortium) chargé de la standardisation des technologies du Web, a élaboré un langage de standardisation des technologies du Web, a élaboré un langage de développement appelé HTML (Hyper Text Market Language)développement appelé HTML (Hyper Text Market Language) fonctionnant sur :fonctionnant sur :

– L'ensemble des plate-formes existantes Windows, Linux, MacOS, etc., – Des navigateurs (browsers) comme Netscape Communicator,

Internet Explorer, Mozilla, etc.

Page 6: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

6

Introduction(4)

Pourquoi HTML Pourquoi HTML Le langage HTML est capable de gérer la quasi-totalité des artifices Le langage HTML est capable de gérer la quasi-totalité des artifices

du Web tels que:du Web tels que: les liens hypertextes,les liens hypertextes, les textes formatés, les textes formatés, les images, les images, les vidéos ou animations, les vidéos ou animations, les tableaux, les tableaux, les formulaires, les formulaires, les cadres (frames), les cadres (frames), les scripts, les scripts, les caractères spéciaux, les caractères spéciaux, les feuilles de styles les feuilles de styles Etc.Etc.

Page 7: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

7

Introduction(5)

Un exemple de document HTMLUn exemple de document HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">"http://www.w3.org/TR/REC-html40/strict.dtd">

<HTML> <HTML>

<HEAD> <HEAD>

<TITLE>My first HTML document</TITLE> <TITLE>My first HTML document</TITLE>

</HEAD> </HEAD>

<BODY> <BODY>

<IMG src="logo.gif"> <IMG src="logo.gif">

<P>Hello world! </P><P>Hello world! </P>

</BODY></BODY>

</HTML></HTML>   

Page 8: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

8

HTML : La structureHTML : La structure (1) (1)

Les balisesLes balises

Les balises sont des instructions HTMLLes balises sont des instructions HTML

Elles sont reconnaissables à leur forme Elles sont reconnaissables à leur forme particulière. particulière.

chacune est encadrée par les signes chacune est encadrée par les signes inférieur àinférieur à (" < ") et (" < ") et supérieur àsupérieur à (" > "). (" > ").

– <Instruction HTML>  

Elles permettent l'ouverture et la fermeture Elles permettent l'ouverture et la fermeture d'une instruction HTML.d'une instruction HTML.

La balise La balise <<......>> marque le début de marque le début de l'instruction.l'instruction.

La balise La balise </</......>> marque la fin de marque la fin de l'instruction.l'instruction.

<Instruction HTML> ... Diverses éléments HTML ...</Instruction HTML>

Page 9: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

9

HTML : La structure HTML : La structure (2)(2)

La Définition de Type de DocumentLa Définition de Type de Document

La commande de définition du type de document permet de déclarer La commande de définition du type de document permet de déclarer directement dans le document le standard pris en compte dans la directement dans le document le standard pris en compte dans la page.page.

Cette balise est optionnel. Cette balise est optionnel. Les navigateurs ne prennent pas ce paramètre en considération.Les navigateurs ne prennent pas ce paramètre en considération.

– En conséquence, vous pouvez soit l'ignorer complètement ou définir le standard par défaut sans que cela n'affecte l'affichage de la page.

La commande La commande <DOCTYPE " ... "> définit le type de document. définit le type de document.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

Diverses commandes HTML

</HTML>

Page 10: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

10

HTML : La structure HTML : La structure (3)(3)

La Définition de Type de DocumentLa Définition de Type de Document

Type de document Standard pris en compte

"-//IETF//DTD HTML Level 1//EN" HTML 1.0

"-//IETF//DTD HTML//EN" HTML 2.0

"-//IETF//DTD HTML 3.0//EN" HTML 3.0

"-//W3C//DTD HTML 3.2//EN" HTML 3.2

"-//W3C//DTD HTML 4.0 Transitionnal//EN"

HTML 4.0

"-//W3C//DTD HTML 4.0//EN" HTML 4.0

" ... " par défaut

Page 11: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

11

HTML : La structure HTML : La structure (4)(4)

Le document HTMLLe document HTML

Une page HTML comporte comme dans l'ensemble des langages Une page HTML comporte comme dans l'ensemble des langages de programmation, une indication d'ouverture et une autre de de programmation, une indication d'ouverture et une autre de fermeturefermeture

La commande La commande <HTML><HTML> marque le début du document marque le début du document

La commande La commande </HTML></HTML> marque la fin de ce document. marque la fin de ce document.

<HTML> ... Diverses commandes HTML ... </HTML>

Page 12: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

12

HTML : La structure HTML : La structure (5)(5)

Les attributs de HTMLLes attributs de HTML Depuis l'adoption du langage HTML 4.0, il est possible de spécifier la Depuis l'adoption du langage HTML 4.0, il est possible de spécifier la

langue utilisée dans la rédaction de la page et également l'orientation de langue utilisée dans la rédaction de la page et également l'orientation de l'écriture.l'écriture.

L'attribut L'attribut LANG="Langue" indique la langue utilisée. indique la langue utilisée. – Les valeurs possibles peuvent être ; FR pour la France, DE pour

l'Allemagne, ES pour l'Espagne EN pour l'Angleterre, EN-US pour les Etats-Unis, etc

L'attribut L'attribut DIR="Direction" spécifie l'orientation. spécifie l'orientation. – Ils existent deux options pour une direction :

• de droite vers la gauche RTL (Right To Left) • de la gauche vers la droite LTR (Left To Right)

L'attribut L'attribut VERSION="version" spécifie la version du langage HTML spécifie la version du langage HTML utilisée dans la création du documentutilisée dans la création du document– remplacé dans le HTML 4 par la commande de définition du type de document

(DTD).

Page 13: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

13

HTML : La structure HTML : La structure (6)(6)

L'entête d'un documentL'entête d'un document Permettant de regrouper des informations Permettant de regrouper des informations

indispensables pour le référencement de la pageindispensables pour le référencement de la page

Utilisé par les moteurs de recherche afin de Utilisé par les moteurs de recherche afin de déterminer les caractéristiques du document en déterminer les caractéristiques du document en vue de l'indexation du site dans leur base de vue de l'indexation du site dans leur base de données.données.

ExempleExemple– le titre, les mots clés, l'auteur,

La commande La commande <HEAD> marque le début de marque le début de l'entête. l'entête.

La commande La commande </HEAD> marque la fin de de marque la fin de de l'entête.l'entête.

L'attribut L'attribut PROFILE="Adresse d'un profil" définit un document contenant des définit un document contenant des informations utiles pour l'indexation de la page informations utiles pour l'indexation de la page WebWeb

<HTML><HEAD> ... </HEAD> ... Diverses commandes HTML ...</HTML>

Page 14: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

14

HTML : La structure HTML : La structure (7)(7)

Le titre du documentLe titre du document L'en-tête doit contenir un seul titre, clair et L'en-tête doit contenir un seul titre, clair et

précis. précis.

Outre que le titre de la page puisse parfois Outre que le titre de la page puisse parfois être affiché dans un navigateur, les être affiché dans un navigateur, les moteurs de recherche l'utilise moteurs de recherche l'utilise systématiquement dans leurs systématiquement dans leurs investigations.investigations.

Il convient de choisir son titre avec soins Il convient de choisir son titre avec soins et surtout d'éviter de l'omettre étant donné et surtout d'éviter de l'omettre étant donné son importance dans le référencement son importance dans le référencement auprès des outils de recherche.auprès des outils de recherche.

La commande La commande <TITLE> marque le marque le début du titre.début du titre.

La commande La commande </TITLE> marque la fin marque la fin de du titre.de du titre.

<HTML><HEAD> <TITLE>Un titre pertinent</TITLE> ... </HEAD> ... Diverses commandes HTML ...</HTML>

Page 15: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

15

HTML : La structure HTML : La structure (8)(8)

Les balises METALes balises META permet de mettre directement à la permet de mettre directement à la

disposition des moteurs de recherche disposition des moteurs de recherche des informations relatives à un site.des informations relatives à un site.

La commande La commande <META NAME=" M " CONTENT=" D ">

permet de décrire en détail la page permet de décrire en détail la page HTML et d'énoncer ses propriétés.HTML et d'énoncer ses propriétés.

La commande La commande <META HTTP-EQUIV=" M " CONTENT=" D ">

définit une information chargée définit une information chargée avec la page dans le protocole avec la page dans le protocole http.http.

Page 16: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

16

HTML : La structure HTML : La structure (9)(9)

Les balises METALes balises METAMarqueur Description

Author Nom de l'auteur

Description Texte descriptif du site

Keywords Mots clés se rapportant au site

Robots Indexation de la page : index ou noindexIndexation des pages liées : follow ou nofollow

Made Indication de l'adresse eMail

Owns Propriétaire du document courant

Lang Langue du document

Generator Indication du logiciel avec lequel le site a été développé

Page 17: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

17

HTML : La structure HTML : La structure (10)(10)

Les balises METALes balises META

<HTML> <HEAD> <TITLE>TITRE PERTINENT</TITLE> <META NAME="Author" CONTENT="Nom de l'auteur"> <META NAME="Description" CONTENT="Description du contenu de la page"> <META NAME="Keywords" CONTENT="Liste des mots clés"> <META NAME="Robots" CONTENT="index/noindex, follow/nofollow"> <META NAME="Made" CONTENT="adresse@eMail"> <META NAME="Owns" CONTENT="Nom du propriétaire"> <META NAME="Generator" CONTENT="Nom du logiciel">

<HTTP-EQUIV="Date" CONTENT="01/01/2000"> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1">

<LINK REV=made HREF="mailto:[email protected]"> <META NAME="http.language" CONTENT="fr-FX"> ... </HEAD> <BODY> Diverses commandes HTML </BODY></HTML>

Page 18: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

18

HTML : La structure HTML : La structure (11)(11)

Les balises METALes balises META Les attributs de METALes attributs de META

Deux autres attributs de la balise Deux autres attributs de la balise <META><META>

– L'attribut CHARSET="Jeu de caractères" définit l'ensemble des caractères à utiliser avec le document HTML.

– L'attribut SCHEME="Procédé" définit un procédé d'interprétation du contenu de la balise <META>.

Page 19: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

19

HTML : La structure HTML : La structure (12)(12)

La balise BASELa balise BASE Permet de redéfinir une URL de base au sein d'un document HTML en cas Permet de redéfinir une URL de base au sein d'un document HTML en cas

d'erreur d'exploration.d'erreur d'exploration. Définit également une cible dans une page HTML constituée de cadres Définit également une cible dans une page HTML constituée de cadres

(frames).(frames). La commande La commande <BASE HREF="Adresse d'une page"> redéfinit une redéfinit une

adresse URL en cas d'erreur.adresse URL en cas d'erreur. L'attribut L'attribut TARGET="Nom du cadre" définit un cadre dans une définit un cadre dans une

structure de frames en cas d'erreur.structure de frames en cas d'erreur.

<HTML> <HEAD> <TITLE>TITRE PERTINENT</TITLE> <BASE HREF="Adresse URL" TARGET="Nom du cadre"> <META NAME="Description" CONTENT="Description de la page"> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD>Diverses commandes HTML </HTML>

Page 20: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

20

HTML : La structure HTML : La structure (13)(13)

Le corps du documentLe corps du document Le corps de la page contient tous les éléments visibles à partir d'un Le corps de la page contient tous les éléments visibles à partir d'un

navigateur : les liens, le texte, les images, les éléments navigateur : les liens, le texte, les images, les éléments multimédias, les formulaires, etc.multimédias, les formulaires, etc.

Le corps regroupe un grand nombre d'attributs afin de définir la Le corps regroupe un grand nombre d'attributs afin de définir la couleur de fond ou de texte.couleur de fond ou de texte.

La commande La commande <BODY> marque le début du corps. marque le début du corps. La commande La commande </BODY> marque la fin de du corps. marque la fin de du corps.

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> Diverses commandes HTML </BODY> </HTML>

Page 21: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

21

HTML : La structure HTML : La structure (14)(14)

Le corps du documentLe corps du document

Les attributsLes attributs Dans le standard HTML 4 élaboré par le W3C, les attributs Dans le standard HTML 4 élaboré par le W3C, les attributs

possible dans la balise, sont :possible dans la balise, sont :

– Les attributs permettant la gestion des événements, – Les attributs classiques LANG et DIR et TITLE, – Les attributs liés aux feuilles de style (CSS)

• c'est-à-dire, les commandes CLASS, STYLE et ID.

La plupart des attributs cités ci-après, relève des spécifications La plupart des attributs cités ci-après, relève des spécifications du HTML 3.2 du HTML 3.2

– Sont caduque dans les nouvelles normes, – Le formatage de la page s'effectuant désormais par l'intermédiaire des

feuilles de style.

Page 22: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

22

HTML : La structure HTML : La structure (15)(15)

Le corps du documentLe corps du document Les attributsLes attributs

ATTRIBUTS DE FOND ET DE COULEUR DE TEXTE ATTRIBUTS DE FOND ET DE COULEUR DE TEXTE – Il est possible par des attributs de déterminer la couleur ou (et) une image de

fond pour une page HTML et en outre celle du texte. • Ces couleurs seront les valeurs par défaut pour l'ensemble de la page.

– L'attribut BGCOLOR="Couleur" donne une couleur de fond au document HTML.• Les valeurs des couleurs peuvent être indiquées soit par son code

alphanumérique soit par un nom : BGCOLOR="#C000000" ou BGCOLOR="red".

– L'attribut TEXT="Couleur" donne une couleur au texte.– L'attribut BACKGROUND="Adresse de l'image"  permet l'affichage d'une

image en arrière plan.– L'attribut BGPROPERTIES="fixed" empêche l'image précitée de défiler avec

le contenu du document.

Page 23: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

23

HTML : La structure HTML : La structure (16)(16)

Le corps du documentLe corps du document Les attributsLes attributs

ATTRIBUTS DE FOND ET DE COULEUR DE TEXTEATTRIBUTS DE FOND ET DE COULEUR DE TEXTE

ExempleExemple

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY BACKGROUND="Adresse de l'image" BGCOLOR="Couleur" TEXT="Couleur" BGPROPERTIES="fixed" > ... Diverses commandes HTML ... </BODY></HTML>

Page 24: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

24

HTML : La structure HTML : La structure (17)(17)

Le corps du documentLe corps du document Les attributsLes attributs

La couleur des liens– Des attributs permettent la mise en couleur des liens dans différentes

situations.– Lorsque le lien n'est pas activé, il peut prendre une couleur différente de celle

spécifiée par l'attribut correspondant par l'intermédiaire de la balise <FONT...>

– L'attribut LINK="Couleur" • donne une couleur pour un lien non-activé.

– L'attribut ALINK="Couleur"  • donne une couleur pour un lien actif.

– L'attribut VLINK="Couleur" • donne une couleur pour un lien déjà activé.

La valeur d’une couleur est indiquée soit par son code La valeur d’une couleur est indiquée soit par son code alphanumérique soit par un nom entre : alphanumérique soit par un nom entre : BGCOLOR="#C000000"BGCOLOR="#C000000" ou ou BGCOLOR="red"BGCOLOR="red"..

Page 25: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

25

HTML : La structure HTML : La structure (18)(18)

Le corps du documentLe corps du document Les attributsLes attributs

La couleur des liens

Exemple

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY LINK="Couleur" ALINK="Couleur" VLINK="Couleur"> ... Diverses commandes HTML ... </BODY></HTML>

Page 26: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

26

HTML : La structure HTML : La structure (19)(19)

Le corps du documentLe corps du document Les attributsLes attributs

Les margesLes marges – attributs propres à Internet explorer

• TOPMARGIN="Valeur en pixel" définit une marge en haut du document.• BOTTOMMARGIN="Valeur en pixel" définit une marge en bas du

document.• LEFTMARGIN="Valeur en pixel" définit une marge à gauche du document.• RIGHTMARGIN="Valeur en pixel" définit une marge à droite du document.

– attributs ne fonctionnent que sous Netscape.

• MARGINWIDTH="Valeur en pixel" définit une marge dans la largeur du document.

• MARGINHEIGHT="Valeur en pixel" définit une marge dans la hauteur du document.

Page 27: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

27

HTML : La structure HTML : La structure (20)(20)

Le corps du documentLe corps du document Les attributsLes attributs

Les margesLes marges ExempleExemple

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY BOTTOMMARGIN="Valeur en pixel" TOPMARGIN="Valeur" en pixel LEFTMARGIN="Valeur en pixel" RIGHTMARGIN="Valeur" en pixel MARGINWIDTH="Valeur en pixel" MARGINHEIGHT="Valeur" en pixel> ... Diverses commandes HTML ... </BODY></HTML>

Page 28: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

28

HTML : La structure HTML : La structure (21)(21)

Le corps du documentLe corps du document

Les attributsLes attributs

Les attributs ONLOAD et Les attributs ONLOAD et UNONLOADUNONLOAD

– ONLOAD="Nom d'une fonction" ouvre une fonction JavaScript à l'affichage de la page

– ONUNLOAD="Nom d'une fonction" ouvre une fonction JavaScript à la sortie de la page.

– Exemple

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY ONLOAD="Nom de la fonction et paramètres" ONUNLOAD="Nom de la fonction et paramètres"> ... Diverses commandes HTML ... </BODY></HTML>

Page 29: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

29

HTML : La structure HTML : La structure (22)(22)

Le corps du documentLe corps du document Les commentairesLes commentaires

Les commentaires Les commentaires peuvent être placer peuvent être placer partout dans les lignes partout dans les lignes de programmation sauf de programmation sauf à l'intérieur d'une autre à l'intérieur d'une autre balise.balise.

La balise La balise <!-- ... --> permet l'insertion d'un permet l'insertion d'un commentaire.commentaire.

<HTML> <!-- Un commentaire --> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="..."> <!-- Un commentaire --> ... </HEAD> <BODY> <!-- Un commentaire --> ... Diverses commandes HTML ... </BODY> <!-- Un commentaire --></HTML>

Page 30: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

30

HTML : La structure HTML : La structure (23)(23)

Le corps du documentLe corps du document

Les adressesLes adresses

Des liens hypertextes ou hyper images peuvent appeler des documents Des liens hypertextes ou hyper images peuvent appeler des documents localisés dans le site ou bien à l'extérieur vers des pages Web localisés dans le site ou bien à l'extérieur vers des pages Web appartenant à d'autres sitesappartenant à d'autres sites

– Pour un lien externe, l'adressage se fera par l'URL (Uniform Ressource Locator) complète : http://www.domaine.fr/index.htm 

– Pour une page interne au site, il pourra se faire par:

• Une adresse abrégée : "pagecible.htm" pour un lien interne d'un document : #ancrecible ou pour une combinaison des deux derniers : "pagecible.htm#ancrecible« 

• Un adressage vers des répertoires différents : "../repertoire/image/image.gif (normalement http://www.domaine.fr/repertoire/image/image.gif).

Page 31: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

31

HTML : La structure HTML : La structure (24)(24)

Le corps du documentLe corps du document Les commandes INS et DELLes commandes INS et DEL

Ces balises offrent la possibilité de mettre à jour un contenu tout Ces balises offrent la possibilité de mettre à jour un contenu tout en conservant l'information périmée et la nouvelle dans la page en conservant l'information périmée et la nouvelle dans la page HTML.HTML.

– Par exemple, une donnée étant susceptible d'évoluer dans le temps peut devenir caduque à tout moment.

• lors de la modification de cette donnée dans le document, il faut placer l'ancienne en suppression et la nouvelle en insertion.

– Exemple : Dans le cas ci-dessous, le chiffre 148 sera effacé à l'affichage tandis que 170 apparaîtra au sein du texte.

<P> Actuellement le nombre d'internautes s'élève à <DEL>148</DEL> <INS>170</INS> millions selon IDC...</P>

Page 32: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

32

HTML : La structure HTML : La structure (25)(25)

Le corps du documentLe corps du document Les commandes INS et DELLes commandes INS et DEL

La balise INSLa balise INS – La commande <INS> définit l'insertion d'un encart au sein du

document.

• L'attribut CITE="Adresse URL" définit l'adresse du document accueillant l'encart.

• L'attribut DATETIME="Date" définit la date et l'heure de l'insertion.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML> ... Diverses commandes HTML ... <INS CITE="Adresse URL" DATETIME="Date"> Elément à supprimer </INSL> ...</HTML>

Page 33: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

34

HTML : La structure HTML : La structure (27)(27)

Le corps du documentLe corps du document Les attributs communsLes attributs communs

L'attribut L'attribut STYLE="Définition de style" définit un formatage de définit un formatage de styles à l'élément HTML.styles à l'élément HTML.

L'attribut L'attribut ID="Identificateur" définit un identificateur unique définit un identificateur unique pour l'élément.pour l'élément.

L'attribut L'attribut CLASS="Identifiant de style" définit une classe définit une classe permettant d'appliquer une définition de style.permettant d'appliquer une définition de style.

L'attribut L'attribut TITLE="Description" définit une description affichée définit une description affichée dans une bulle pour l'élément.dans une bulle pour l'élément.

L'attribut L'attribut LANG="Langue d'usage" spécifie la langue utilisée spécifie la langue utilisée dans le document.dans le document.

L'attribut L'attribut DIR="rtl/ltr" définit l'orientation de l'écriture du texte définit l'orientation de l'écriture du texte

Page 34: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

35

HTML : La structure(28)HTML : La structure(28)

Le corps du documentLe corps du document Les alignementsLes alignements

Outre les alignements pour les titres et les Outre les alignements pour les titres et les paragraphes, il existe des méthodes paragraphes, il existe des méthodes permettant l'alignement des éléments permettant l'alignement des éléments HTML tels que les textes et les images.HTML tels que les textes et les images.

– La commande <DIV ALIGN="Type d'alignement"> marque le début de l'élément à aligner

• La commande </DIV> marque la fin de l'élément à aligner

– L'attribut NOWRAP interdit le retour à la ligne automatique au sein de la division.

Les options possibles d'alignement sont Les options possibles d'alignement sont "Left" (par défaut), (par défaut), "right", , "center" ou ou "justify"..

<HTML> <HEAD> ... </HEAD> <BODY> <H1>Titre</H1> <P ALIGN="left">Paragraphe</P> <DIV ALIGN="center"> Différents objets HTML </DIV> ... Diverses commandes HTML </BODY></HTML>

Page 35: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

36

HTML : La structure(29)HTML : La structure(29)

Le corps du document Le corps du document Les alignementsLes alignements ExempleExemple

<DIV ALIGN="left"> <H3> ... </H3> <P> ... </P></DIV><DIV ALIGN="center"> <H3> ... </H3> <P> ... </P></DIV><DIV ALIGN="right"> <P> ... </P></DIV><DIV ALIGN="justify"> <H3> ... </H3> <P> ... </P></DIV>

<DIV ALIGN="right"> <IMG SRC="..." BORDER="0" WIDTH="350" HEIGHT="243"></DIV><DIV ALIGN="left"> <IMG SRC="..." BORDER="0" WIDTH="350" HEIGHT="230"></DIV>

Page 36: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

37

Les liens(1)Les liens(1)

Les liensLes liens DéfinitionDéfinition

La balise La balise <A...> permet de permet de créer un lien dans un créer un lien dans un document HTML.document HTML.

La balise La balise </A> permet de permet de fermer un lien dans un fermer un lien dans un document HTML.document HTML.

L'attribut L'attribut HREF="Adresse cible" permet de diriger un permet de diriger un lien vers un document lien vers un document cible.cible.

ExempleExemple

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <A NAME="Debut"></A> ... Diverses commandes HTML ... <A HREF="Adresse cible">...</A> ... </BODY></HTML>

Page 37: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

38

Les liens(2)Les liens(2)

Les liensLes liens L'attribut TARGETL'attribut TARGET

L'utilisation de l'attribut L'utilisation de l'attribut TARGETTARGET permet de diriger l'ouverture permet de diriger l'ouverture d'un document cible vers une fenêtre déterminée du navigateur. d'un document cible vers une fenêtre déterminée du navigateur.

– Il est possible d'ouvrir une page cible dans la fenêtre contenant le lien, ou dans une seconde fenêtre ou encore dans des cadres (ou frames).

Cet attribut est surtout utilisé dans le cas ou une page Internet Cet attribut est surtout utilisé dans le cas ou une page Internet est structurée autour des cadres. est structurée autour des cadres.

– Dans ce contexte particulier, les pages cibles risquent de s'ouvrir dans le mauvais cadre.

L'attribut L'attribut "TARGET="Cadre cible" définit la fenêtre dans définit la fenêtre dans laquelle la page cible doit s'afficher.laquelle la page cible doit s'afficher.

Page 38: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

39

Les liens(3)Les liens(3)

Les liensLes liens L'attribut TARGETL'attribut TARGET

Valeurs possibles Description

_blank Ouverture de la page cible dans une nouvelle fenêtre

_parent Ouverture de la page cible dans le cadre parent

_self Ouverture de la page cible dans le cadre hôte

_top Ouverture de la page cible dans la fenêtre hôte

Nom du cadre Ouverture de la page cible dans le cadre portant le nom cité

Page 39: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

40

Les liens(4)Les liens(4)

Les liensLes liens L'attribut TARGETL'attribut TARGET

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <A NAME="Debut"></A> ... Diverses commandes HTML ... <A HREF="Adresse de la page cible" TARGET="Cadre cible"> Lien </A> ... </BODY></HTML>

Page 40: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

41

Les liens(5)Les liens(5)

Les liensLes liens Les autres attributs de Les autres attributs de la balise la balise <A...><A...>

L'attribut L'attribut NAME="Nom de l'image" définit un nom pour l'image. définit un nom pour l'image.

L'attribut L'attribut TYPE="Type MIME" spécifie le type MIME du document spécifie le type MIME du document cible.cible.

L'attribut L'attribut REL="Type de relation" indique la relation entre le indique la relation entre le document et la cible hypertexte.document et la cible hypertexte.

– Les valeurs possibles peuvent être ; alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subjection, appendix, helpet bookmark.

– Cette valeur pet être utile à un moteur de recherche lors de l'analyse de la page HTML pour un référencement notamment.

L'attribut L'attribut REV="Type de relation indique la relation inverse entre la indique la relation inverse entre la cible hypertexte et le document.cible hypertexte et le document.

Page 41: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

42

Les liens(6)Les liens(6)

Les liensLes liens Les autres attributs de Les autres attributs de la balise la balise <A...><A...>

L'attribut L'attribut CHARSET="Type d'encodage" détermine l'ensemble détermine l'ensemble des caractères utilisés pour encoder la cible hypertexte.des caractères utilisés pour encoder la cible hypertexte.

L'attribut L'attribut HREFLANG="type de langage" spécifie le langage spécifie le langage d'encodage de la cible hypertexte.d'encodage de la cible hypertexte.

L'attribut L'attribut ACCESSKEY="Raccourci" définit un raccourci (lettre définit un raccourci (lettre + + AltAlt).).

L'attribut L'attribut LANG="Langue" définit une langue pour la zone de définit une langue pour la zone de texte.texte.

L'attribut L'attribut ID="nom d'identificateur" définit pour l'applet un nom définit pour l'applet un nom d'identificateur unique au sein de la page.d'identificateur unique au sein de la page.

L'attribut L'attribut TITLE="Description" définit une description affichée définit une description affichée dans une bulle.dans une bulle.

Page 42: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

43

Les liens(7)Les liens(7)

Les liensLes liens Les liens hypertextesLes liens hypertextes

Les liens hypertextes sont des liens construits sur du texte.Les liens hypertextes sont des liens construits sur du texte. L'utilisateur devra cliquer sur un mot ou un groupe de mot pour L'utilisateur devra cliquer sur un mot ou un groupe de mot pour

activer un renvoi vers un document cible.activer un renvoi vers un document cible. La commande La commande <A HREF="Adresse cible">Texte</A> définit le définit le

lien vers une page sur le Web.lien vers une page sur le Web.

<HTML> ...<BODY> <A HREF="../index.htm" TARGET="_blank"> Ce lien pointe vers la page d'accueil</A> ... Diverses commandes HTML ... <A HREF="Adresse cible">Texte</A> ... </BODY></HTML>

Page 43: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

44

Les liens(8)Les liens(8)

Les liensLes liens Les liens hyperimagesLes liens hyperimages

Les hyperimages sont des images qui servent de liens vers un document cible.

<A HREF="Adresse cible"> <IMG SRC="Adresse de l'image></A>

Exemple<HTML> <HEAD> ... </HEAD> <BODY> <A NAME="Debut"></A> ... Diverses commandes HTML <A HREF="contact.html" TARGET="_blank"> <IMG SRC="email.gif" WIDTH="96" HEIGHT="64"></A> </BODY></HTML>

Page 44: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

45

Les liens(9)Les liens(9)

Les liensLes liens Les images en coordonnéesLes images en coordonnées

La balise La balise <A><A> possède deux attributs permettant de rendre des possède deux attributs permettant de rendre des images interactives. images interactives.

– Ils découpent une hyperimage en plusieurs zones dans le but de créer plusieurs liens différents à partir d'un support identique.

• L'attribut SHAPE="Forme" définit le type de forme d'une zone de découpage.

• L'attribut COORDS="Liste de coordonnées" définit les coordonnées de la zone de découpage.

La balise La balise <AREA> permet de créer, aussi, ce type d'images, permet de créer, aussi, ce type d'images, mais l'instruction mais l'instruction <A><A> peut être utilisé dans des cas particuliers peut être utilisé dans des cas particuliers comme avec la balise comme avec la balise <OBJECT><OBJECT> notamment. notamment.

Page 45: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

46

Les liens(10)Les liens(10)

Les liensLes liens Les images en coordonnéesLes images en coordonnées

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <A NAME="Debut"></A> ... <A HREF="Adresse cible" SHAPE="Forme" COORDS="Liste de coordonnées"> <IMG SRC="Adresse de l'image"> </A> ... Diverses commandes HTML ... </BODY></HTML>

Page 46: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

47

Les liens(11)Les liens(11)

Les liensLes liens Les images en coordonnées Les images en coordonnées

Les zones sensiblesLes zones sensibles

– Un découpage en zones distinctes d'un élément graphique peut être un atout indéniable.• Exemple: un utilisateur ayant besoin de fabriquer des liens par rapport aux

régions de France

– La balise <IMG SRC ...> offrent deux attributs pour définir le type d'image sensible

• L'attribut ISMAP définit une image sensible côté serveur.

• L'attribut USEMAP="Nom d'ancre" attribue un nom d'ancre à une image sensible côté client.

– La commande MAP NAME="Ancre cible" entame la définition des zones sensibles de l'image

– La commande AREA SHAPE="Forme" COORDS="Coordonnées" HREF="Adresse cible" permet de décrire une zone sensible.

Page 47: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

48

Les liensLes liens

Les liensLes liens Les images en coordonnées Les images en coordonnées

Les zones sensiblesLes zones sensibles

*Forme Description **Coordonnées Exemple

rect Définit une zone rectangulaire X1, Y1 = Coin supérieur gauche

X2, Y2 = Coin inférieur droit

<AREA

SHAPE="rect" COORDS="X1, Y1, X2, Y2" HREF="doc.htm">

circle Définit une zone circulaire X, Y = Centre du cercle

R = Rayon du cercle

<AREA

SHAPE="circle" COORDS="X, Y, R"

HREF="doc.htm">

polygon Définit une zone polygonale X1, Y1 = Premier point du polygone X2, Y2 = Second point du polygone Xn, Yn = Nième point du polygone

<AREA

SHAPE="polygon" COORDS="X1,Y1,X2,Y2,X3,Y3" HREF="doc.htm">

Page 48: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

49

Les liens(13)Les liens(13)

Les liensLes liens Les images en coordonnées Les images en coordonnées

Les zones sensiblesLes zones sensibles<HTML> <HEAD> ... </HEAD> <BODY> <MAP NAME="Ancre"> <AREA SHAPE="Forme" COORDS="X1,Y1,X2,Y2,..." HREF="Lien cible"> </MAP> <IMG SRC="Adresse de l'image" WIDTH="Valeur" HEIGHT="Valeur" USEMAP="#Ancre"> ... Diverses commandes HTML ... </BODY></HTML>

Page 49: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

50

Les liens(14)Les liens(14)

Les liensLes liens Les images en coordonnées Les images en coordonnées

Les zones sensiblesLes zones sensibles

<IMG SRC="images/Le monde.jpg" BORDER="0" WIDTH="800" HEIGHT="600" USEMAP="#lemonde"><MAP NAME="lemonde"> <AREA SHAPE="circle" COORDS="405,105,70" HREF="#europe"> <AREA SHAPE="circle" COORDS="680,380,120" HREF="#oceanie"> <AREA SHAPE="rect" COORDS="325,175,505,430" HREF="#afrique"> <AREA SHAPE="polygon" COORDS="250,0,120,40,55,110,55,110,120,180, 230,520,280,500,320,310,250,200,300,100" HREF="#amerique"> <AREA SHAPE="polygon" COORDS="450,30,510,180,540,270,550,280,630,260, 695,237,710,70,657,20,550,0" HREF="#asie"></MAP>

Page 50: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

51

Les liens(15)Les liens(15)

Les liensLes liens Les images en coordonnéesLes images en coordonnées

Les attributs de AreaLes attributs de Area – L'attribut NOHREF indique qu'aucun document n'est

associé à cette zone.– L'attribut ID="nom d'identificateur" définit pour l'applet un

nom d'identificateur unique au sein de la page.– L'attribut ALT="Texte" spécifie un texte de remplacement

de l'objet.– L'attribut TITLE="Description" définit une description

affichée dans une bulle.– L'attribut ACCESSKEY="Raccourci" définit un raccourci

(lettre + Alt).

Page 51: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

52

Les liens(16)Les liens(16)

Les liensLes liens Les images en coordonnéesLes images en coordonnées

Les attributs de AreaLes attributs de Area – L'attribut NOTAB interdit que la zone soit comprise dans

l'ordre de tabulation.– L'attribut TABINDEX="Valeur" définit un ordre de

tabulation.– L'attribut TABORDER="Valeur" définit un ordre de

tabulation (Internet Explorer).– L'attribut ALIGN="Type d'alignement" définit un

alignement de l'élément.– L'attribut LANG="Langue" définit une langue pour la zone

de texte.

Page 52: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

53

Les liens(17)Les liens(17)

Les liensLes liens Les liens internesLes liens internes

Les liens internes permettent de créer des renvois à l'intérieur Les liens internes permettent de créer des renvois à l'intérieur du même document HTML.du même document HTML.

Pour faire fonctionner ces liens, il suffit de déclarer une ancre Pour faire fonctionner ces liens, il suffit de déclarer une ancre dans le document puis de créer le renvoi vers cette ancre.dans le document puis de créer le renvoi vers cette ancre.

La commande La commande <A NAME="Nom d'ancre"> définit l'ancre à définit l'ancre à atteindre.atteindre.

La commande La commande <A HREF="#Nomd'Ancre"> définit le lien. définit le lien.– La commande </A> ferme le lien.

Page 53: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

54

Les liens(18)Les liens(18)

Les liensLes liens Les liens internesLes liens internes

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <A NAME="Debut"></A> ... Diverses commandes HTML ... <A HREF="#Debut">Revenir</A> ... </BODY></HTML>

<A NAME="haut"></A>...<A HREF="#haut">Haut de page</A> <A HREF="#bas">Bas de page</A>...<A NAME="bas"></A>

Page 54: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

55

Les liens(19)Les liens(19)

Les liensLes liens Les liens locauxLes liens locaux

Les liens locaux permettent de créer des renvois vers des Les liens locaux permettent de créer des renvois vers des documents HTML localisés sur un même serveur Internet,.documents HTML localisés sur un même serveur Internet,.

Pour mettre en oeuvre ces liens, il suffit de créer un renvoi vers Pour mettre en oeuvre ces liens, il suffit de créer un renvoi vers le document cible et éventuellement vers l'une de ces ancres à le document cible et éventuellement vers l'une de ces ancres à partir de la page Web hôte.partir de la page Web hôte.

La commande La commande <A HREF="Adresse du document"> définit le lien définit le lien vers le document cible.vers le document cible.

– La commande </A> ferme le lien.

Page 55: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

56

Le texteLe texte (1) (1)

Le texteLe texte Les titresLes titres

Comme dans un traitement de texte, la mise en forme hiérarchisée du texte améliore l'aspect visuel du document.

Le langage HTML met six niveaux de titres différents à la disposition des programmeurs.

Cependant, le résultat fourni par les six balises de titre peut Cependant, le résultat fourni par les six balises de titre peut dépendre du navigateur utilisé pour afficher les pages.dépendre du navigateur utilisé pour afficher les pages.

La commande La commande <Hniveau de titre>> marque le début du titre. marque le début du titre.

La commande La commande </Hniveau de titre> marque la fin du titre. marque la fin du titre.

Page 56: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

57

Le texteLe texte (2) (2)

Le texteLe texte Les titresLes titres

Code Description Exemple

<H1> Premier titre </H1> Titre 1Premier titre

<H2>Second titre</H2> Titre 2 Second titre<H3>Troisième titre</H3> Titre 3 Troisième titre

<H4>Quatrième titre</H4> Titre 4 Quatrième titre

<H5>Cinquième titre</H5> Titre 5 Cinquième titre

<H6>Sixième titre</H6> Titre 6 Sixième titre

Page 57: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

58

Le texte(3)Le texte(3)

Le texteLe texte Les titresLes titres

L'alignement du titreL'alignement du titre

– Les balises titres possèdent un attribut permettant un alignement indépendant du reste du document.

– L'attribut ALIGN="Type d'alignement"  permet l'alignement du titre.

• Les options possibles d'alignement sont

• "Left" (par défaut) pour la gauche,

• "right" pour la droite ou • "center" pour le centre.

<HTML> <HEAD> <</HEAD> <BODY> <H1 ALIGN="Alignement">Titre</H1> ... Diverses commandes HTML ... </BODY></HTML>

Page 58: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

59

Le texteLe texte (4) (4)

Le texteLe texte Les paragraphesLes paragraphes

Une balise permet de formater un texte brut en paragraphe.Une balise permet de formater un texte brut en paragraphe.– La commande <P> marque le début du paragraphe.

– La commande </P> marque la fin du paragraphe.

<HTML> <HEAD> </HEAD> <BODY> <H1 ALIGN="Alignement">Titre</H1> <P>Paragraphe</P> ... Diverses commandes HTML </BODY></HTML>

Page 59: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

60

Le texteLe texte (5) (5)

Le texteLe texte Les paragraphesLes paragraphes

L'alignement des paragraphesL'alignement des paragraphes – L'attribut ALIGN="Type d'alignement" permet l'alignement

du texte.• Les options possibles d'alignement sont "Left" (par

défaut) pour la gauche, "right" pour la droite ou "center" pour le centre.

<HTML> <HEAD> </HEAD> <BODY> <H1 ALIGN="Alignement">Titre</H1> <P ALIGN="Type d'alignement>Paragraphe</P> ... Diverses commandes HTML </BODY></HTML>

<H3> ... </H3><P ALIGN="center"> ... </P><P ALIGN="left"> ... </P><P ALIGN="right"> ... </P><P ALIGN="justify"> ... </P>

Page 60: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

61

Le texteLe texte (6) (6)

Le texteLe texte Les commandes de lignesLes commandes de lignes

Des instructions permettent :Des instructions permettent :– Insérer des nouvelles de ligne <BR>,

– Empêcher des sauts de ligne <NOBR>

– Organiser des ruptures de ligne <WBR>.

Page 61: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

62

Le texte(7)Le texte(7)

Le texteLe texte Les commandes de lignesLes commandes de lignes

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> ... </HEAD> <BODY> <H1 ALIGN="Alignement">Titre</H1> <P> Une première ligne<BR> <NOBR>Une seconde ligne <WBR> extrêmement longue</NOBR> </P> ... Diverses commandes HTML ... </BODY></HTML>

<H3><NOBR>Irak-ONU</NOBR></H3><P>A Bagdad, <NOBR> l'Irak ne se considère pas concerné </NOBR> par la décision du Conseil de sécurité de l'ONU d'approuver <NOBR>le plan d'organisation du <WBR> nouvel organisme chargé de le désarmer</NOBR>, a déclaré <BR> samedi le vice-Premier ministre<BR> irakien Tarek Aziz.</P>

Page 62: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

63

Le texteLe texte (8) (8)

Le texteLe texte La police de caractèresLa police de caractères

Plusieurs commandes permettent de définir les caractéristiques de la Plusieurs commandes permettent de définir les caractéristiques de la police, en l'occurrence le type, la taille et la couleur des caractères.police, en l'occurrence le type, la taille et la couleur des caractères.

Une autre commande se charge de l'ensemble des caractéristiques Une autre commande se charge de l'ensemble des caractéristiques précitées, il s'agit de "précitées, il s'agit de "<FONT ... ><FONT ... >".".

– Un attribut "FACE" définit la police, – Un attribut "SIZE" s'occupe de la taille – Un attribut "COLOR" prend en charge la couleur.

La commande La commande <FONT FACE="Nom de la police"> définit les définit les caractéristiques des caractères.caractéristiques des caractères.

– La commande </FONT> ferme la commande.

Page 63: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

64

Le texte(9)Le texte(9)

Le texteLe texte La police de caractèresLa police de caractères

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> ... </HEAD> <BODY> <H1>Titre</H1> <P ALIGN="left">Paragraphe</P> <DIV ALIGN="right"> <FONT FACE="Nom de police"> Texte </FONT> </DIV> ... Diverses commandes HTML </BODY></HTML>

<FONT FACE="Times New Roman" ><H3> ... </H3></FONT><P><FONT FACE="MS Sans Serif">...</FONT></P><P><FONT FACE="Verdana">...</FONT></P><P><FONT FACE="Book Antiqua, Haettenschweiler, Arial">...</FONT></P>

Page 64: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

65

Le texte(10)Le texte(10)

Le texteLe texte La police de caractèresLa police de caractères

La taille de la policeLa taille de la police– La taille de la police se définit par l'attribut "SIZE" de l'instruction

"<FONT ... >".

– La taille de la police est déterminée à partir de sept valeurs, la troisième étant la valeur par défaut : <FONT SIZE="1 >.

– La taille se définit également par rapport à la taille par défaut (0) entre "-6" et "+6": <FONT SIZE="+1> ou <FONT SIZE="-6>.

<BODY> <H1>Titre</H1> <FONT SIZE="Taille"> <P ALIGN="left">Paragraphe</P> <DIV ALIGN="right"> Texte </DIV> </FONT> </HTML> </BODY>

Page 65: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

66

Le texte(11)Le texte(11)

Le texteLe texte La couleur de la policeLa couleur de la police

L’attribut L’attribut COLORCOLOR permet d'appliquer une couleur à la police de permet d'appliquer une couleur à la police de caractère. Il suffit de l'utiliser dans la balise "caractère. Il suffit de l'utiliser dans la balise "<FONT ... ><FONT ... >".".

La valeur de la couleur à spécifier s'effectue soit par un code La valeur de la couleur à spécifier s'effectue soit par un code alphanumérique soit par un nom : alphanumérique soit par un nom : COLOR="#C000000"COLOR="#C000000" ou ou COLOR="red"COLOR="red"..

En outre l'attribut "En outre l'attribut "TEXTTEXT" de la commande " de la commande <BODY><BODY> se se chargeait déjà de la couleur du texte pour l'ensemble du chargeait déjà de la couleur du texte pour l'ensemble du document tandis que l'attribut "document tandis que l'attribut "COLORCOLOR" s'applique à des " s'applique à des portions de texte.portions de texte.

Page 66: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

67

Le texte(12)Le texte(12)

Le texteLe texte La couleur de la policeLa couleur de la police

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> ... </HEAD> <BODY> <H1>Titre</H1> <FONT COLOR="Couleur"> <P ALIGN="left">Paragraphe</P> <DIV ALIGN="right"> Texte </DIV> </FONT> ... Diverses commandes HTML ... </BODY></HTML>

<BODY TEXT="#660000"> <H1>Tchétchénie</H1> <FONT COLOR="green"> <P>INHUMAINE. La nouvelle guerre que conduisent les généraux russes, depuis septembre 1999, ….</P> </FONT> <P>Et, selon des organisations humanitaires internationales …..</P> <I>Par Ignacio Ramonet - Le Monde</I></BOBY>

Page 67: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

68

Le texte(13)Le texte(13)

Le texteLe texte La police par défautLa police par défaut

La commande La commande <BASEFONT> permet de définir une police par permet de définir une police par défaut. défaut.

– Cette instruction ne comporte pas de balise de fermeture. En conséquence, l'ensemble du texte se situant derrière la balise se verra appliquer la police définie.

– Cependant, cette commande est déconseillée si vous utilisez HTML 4.0, préférez l'attribut "SIZE" de la balise "<FONT ... >".

L'attribut L'attribut FACE="Nom de la police" permet d'affecter une police permet d'affecter une police de caractères par défaut.de caractères par défaut.

L'attribut L'attribut SIZE="Taille" permet de définir une taille par défaut. permet de définir une taille par défaut. L'attribut L'attribut COLOR="Couleur" permet d'affecter une couleur par permet d'affecter une couleur par

défaut à la police.défaut à la police. L'attribut L'attribut NAME="Nom" permet de définir un nom pour l'élément. permet de définir un nom pour l'élément.

Page 68: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

69

Exemple de SynthèseExemple de Synthèse

ExempleExemple

Page 69: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

70

Le texte (14)Le texte (14)

Le texteLe texte La police par défaut : La police par défaut : ExempleExemple

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> ... </HEAD> <BODY> <BASEFONT SIZE="Taille" FACE="Nom de police" COLOR="Couleur"> <H1>Titre</H1> <P ALIGN="left">Paragraphe</P> <DIV ALIGN="right"> <FONT FACE="Nom de police"> Texte </FONT> </DIV> Diverses commandes HTML </BODY></HTML>

Page 70: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

71

Le texteLe texte

Le texteLe texte Les listesLes listes

HTML offre plusieurs types de liste : HTML offre plusieurs types de liste : – des listes à puces, les listes numérotées,les listes hiérarchisées.

Les listes à pucesLes listes à puces – comportent trois différentes types de puces

• mais tous les navigateurs ne les reconnaissent malheureusement pas. En général, par défaut sera affiché des puces en forme de disque plein.

– La commande <UL> ouvre une liste à puce.• La commande </UL> ferme la liste à puce.

– La commande <LI> introduit une entrée dans la liste.• La commande </LI> ferme une entrée dans la liste.

– L'attribut TYPE="Forme" donne le type de puces.– L'attribut VALUE="Valeur" associe cette valeur à cet élément de liste.– L'attribut COMPACT permet de rendre la liste plus compacte mais est

obsolète en HTML 4.0.

Page 71: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

72

Le texteLe texte

Le texte Le texte Les listesLes listes

Commande Description Exemple

<UL TYPE="disc"> <LI>Ligne 1</LI> <LI>Ligne 2</LI> <LI>Ligne 3</LI></UL>

Puce en forme de disque plein

•Ligne 1 •Ligne 2 •Ligne 3

<UL TYPE="circle"> <LI>Ligne 1</LI>

<LI>Ligne 2</LI> <LI>Ligne 3</LI></UL>

Puce en forme de cercle vide

oLigne 1 oLigne 2 oLigne 3

<UL TYPE="square"> <LI>Ligne 1</LI>

<LI>Ligne 2</LI> <LI>Ligne 3</LI></UL>

Puce en forme de carré plein

•Ligne 1 •Ligne 2 •Ligne 3

<UL> <LI>Ligne 1</LI>

<LI>Ligne 2</LI> <LI>Ligne 3</LI></UL>

Puce en forme de carré plein

Ligne 1 Ligne 2 Ligne 3

Page 72: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

73

Le texteLe texte

Le texte Le texte Les listesLes listes

Les listes à pucesLes listes à puces

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> ... </HEAD> <BODY> <H1>Titre</H1> <P ALIGN="left">Paragraphe</P> <DIV ALIGN="right"> Texte <UL> <LI>Première entrée</LI> <LI>Seconde entrée</LI> ... </UL> </DIV> ... Diverses commandes HTML ... </BODY></HTML>

Page 73: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

74

Le texteLe texte

Le texteLe texte Les listesLes listes

Les listes numérotéesLes listes numérotées – Le langage HTML permet de numéroter les listes de plusieurs façons par

l'intermédiaire de l'attribut <TYPE> qui s'applique également dans ce cas.

– un attribut spécial permet de commencer une numérotation à partir d'un numéro précis.

– La commande <OL> ouvre la liste numérotée.

• La commande </OL> ferme la liste numérotée.

– L'attribut START="Valeur de départ" permet de débuter la numérotation à un point précis.

– L'attribut TYPE="Type de puces" donne l'apparence des puces.

– L'attribut COMPACT permet de rendre la liste plus compacte mais est obsolète en HTML 4.0.

Page 74: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

75

Le texteLe texte

Les listesLes listes

Commande Description Exemple

<OL> <LI>Ligne 1</LI> <LI>Ligne 2</LI> <LI>Ligne 3</LI></OL>

Puce du type chiffre arabe1.Ligne 1 2.Ligne 2 3.Ligne 3

<OL TYPE="a" START="12"> <LI>Ligne 1</LI> <LI>Ligne 2</LI> <LI>Ligne 3</LI></OL>

Puce du type lettre minusculel.Ligne 1 m.Ligne 2 n.Ligne 3

<OL TYPE="A"> <LI>Ligne 1</LI> <LI>Ligne 2</LI> <LI>Ligne 3</LI></OL>

Puce du type lettre majusculeA.Ligne 1 B.Ligne 2 C.Ligne 3

<OL TYPE="i" COMPACT> <LI>Ligne 1</LI> <LI>Ligne 2</LI> <LI>Ligne 3</LI> <LI>Ligne 4</LI></OL>

Puce du type numérotation romaine minusculei.Ligne 1 ii.Ligne 2 iii.Ligne 3 iv.Ligne 4

<OL TYPE="I" START="5"> <LI>Ligne 1</LI> <LI>Ligne 2</LI> <LI>Ligne 3</LI> <LI>Ligne 4</LI></OL>

Puce de type numérotation romaine majusculeV.Ligne 1 VI.Ligne 2 VII.Ligne 3 VIII.Ligne 4

Page 75: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

76

Le texteLe texte

Le texte Le texte Les listesLes listes

Les listes numérotéesLes listes numérotées

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> ... </HEAD> <BODY> <H1>Titre</H1> <P ALIGN="left">Paragraphe</P> <DIV ALIGN="right"> Texte <OL TYPE=Forme START=Numéro de départ> <LI>Première entrée</LI> <LI>Seconde entrée</LI> ... </OL> </DIV> ... Diverses commandes HTML ... </BODY></HTML>

Page 76: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

77

Le texteLe texte

Le texte Le texte Les listesLes listes

Les listes hiérarchiséesLes listes hiérarchisées– La commande <DL> ouvre la liste hiérarchisée.

• La commande </DL> ferme la liste hiérarchisée.

– La commande <DT> ouvre une nouvelle entrée.

– La commande <DD> permet d'affecter un texte descriptif à la balise précédente.

– L'attribut " COMPACT" permet de rendre la liste plus compacte

• est obsolète en HTML 4.0.

Page 77: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

78

Le texteLe texte

Le texte Le texte Les listesLes listes

Les listes hiérarchiséesLes listes hiérarchisées

Commande Description Exemple

<DL>

<DT>Titre 1</DT>

<DD>Description 1</DD>

<DT>Titre 2</DT>

<DD>Description 2</DD>

<DT>Titre 3</DT>

<DD>Description 3</DD>

</DL>

Liste hiérarchisée Ligne 1 Description 1 Ligne 2 Description 2 Ligne 3 Description 3

Page 78: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

79

Le texteLe texte

Le texte Le texte Les listesLes listes

Les listes hiérarchiséesLes listes hiérarchisées

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> ... </HEAD> <BODY> <H1>Titre</H1> <P ALIGN="left">Paragraphe</P> <DIV ALIGN="right"> Texte <DL> <DT>Première entrée</DT> <DD>Description</DD> <DT>Seconde entrée</DT> <DD>Description</DD> ... </DL> </DIV> ... Diverses commandes HTML ... </BODY></HTML>

Page 79: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

80

Les imagesLes images

Les imagesLes images Les formats graphiques

Un document HTML peut comporter des images de type et de capacité diverses.

trois types d'images sont appréciés pour leur compression, et partant, pour leur faible taille :

– le JPEG (Joint Photographic Expert Group)

– le GIF (Graphic Interchange Format)

– le PNG (Portable Network Graphic).

• pourrait devenir le format graphique de l'avenir.

Page 80: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

81

Les imagesLes images

Les imagesLes images Les formats graphiques

Les images GIF sont particulièrement intéressantes du fait de leurs propriétés, en l'occurrence la transparence et l'animation.

– L'avantage du format GIF est également de permettre d'afficher sur n'importe quel couleur de page, des éléments graphiques avec un fond transparent.

les images JPEG offrent une résolution et une gamme de couleurs élevés permettant l'affichage d'éléments graphiques de haute qualité.

Le format PNG gère la transparence comme le GIF et un codage des couleurs sur 24 bits à l'instar du JPEG.

– Néanmoins, la taille de ces images demeure encore trop importante.

Page 81: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

82

Les imagesLes images

Les imagesLes images

Il est nécessaire de parfaitement cibler ses besoins afin d'obtenir la Il est nécessaire de parfaitement cibler ses besoins afin d'obtenir la meilleure qualité d'affichage possible tout en respectant le rapport meilleure qualité d'affichage possible tout en respectant le rapport taille/résolution.taille/résolution.

Une résolution trop élevée provoque un ralentissement de Une résolution trop élevée provoque un ralentissement de chargement de la page chargement de la page

une trop faible résolution dégrade la qualité générale de l'image.une trop faible résolution dégrade la qualité générale de l'image.

 

 

  

 

 

Page 82: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

83

Les imagesLes images

Les imagesLes images

Page 83: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

84

Les imagesLes images

Les imagesLes images L'insertionL'insertion

L'insertion d'une image dans un document HTML s'effectue par L'insertion d'une image dans un document HTML s'effectue par l'intermédiaire de la balise l'intermédiaire de la balise <IMG SRC="Adresse de l'image">

Cette commande regroupe l'ensemble des propriétés intrinsèques et Cette commande regroupe l'ensemble des propriétés intrinsèques et extrinsèques de l'image à afficher.extrinsèques de l'image à afficher.

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <IMG SRC="Adresse de l'image"> ... Diverses commandes HTML ... </BODY></HTML>

<IMG SRC="images/eclipse.jpg" BORDER="0" WIDTH="157“ HEIGHT="126">

Page 84: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

85

Les imagesLes images

Les imagesLes images L'insertionL'insertion

Les dimensionsLes dimensions – Les navigateurs affichent par défaut une image dans leurs

dimensions d'origine.

• si aucune taille n'est définie, l'utilisateur peut être confronté à un affichage inadéquat et à un ralentissement du chargement de la page HTML.

– Les dimensions d'un élément graphique ont pour origine le coin supérieur gauche.

• L'attribut WIDTH="Valeur" en pixels définit la largeur.• L'attribut HEIGHT="Valeur" en pixels définit la hauteur.

– Pour ajuster une image à une dimension précise tout en conservant les proportions, il suffit de préciser soit la hauteur, soit la largeur et automatiquement l'une ou l'autre des dimensions s'alignera sur celle que vous aurez spécifié.

Page 85: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

86

Les imagesLes images

Les imagesLes images L'insertionL'insertion

Les dimensionsLes dimensions<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <IMG SRC="Adresse de l'image" WIDTH="Valeur" HEIGHT="Valeur" > ... Diverses commandes HTML ... </BODY></HTML>

Page 86: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

87

Les imagesLes images

Les imagesLes images L'insertionL'insertion

Les attributs d'espacement texte/imageLes attributs d'espacement texte/image

– Les attributs HSPACE et VSPACE créent une marge entre le texte ou le reste du contenu et l'image

• améliore la qualité de la présentation et la lisibilité générale du document.

– L'attribut HSPACE="Valeur" en pixels définit un espacement horizontal entre l'image et le texte.

– L'attribut VSPACE="Valeur" en pixels définit un espacement vertical entre l'image et le texte.

Page 87: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

88

Les imagesLes images

Les imagesLes images L'insertionL'insertion

Les attributs d'espacement texte/imageLes attributs d'espacement texte/image

<HTML> <HEAD> ... </HEAD> <BODY> <P ALIGN="Type d'alignement">Début du paragraphe... <IMG SRC="Adresse de l'image" ALIGN="Type d'alignement" HSPACE="Valeur" VSPACE="Valeur" WIDTH="Valeur" HEIGHT="Valeur"> Suite du paragraphe </P> ... Diverses commandes HTML ... </BODY></HTML>

Page 88: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

89

Les imagesLes images

Les imagesLes images L'insertionL'insertion

Les encadrements Les encadrements – Une image peut comporter un

cadre. • Cet encadrement est

possible en utilisant un nouvel attribut de la balise insertion d'image.

– L'attribut BORDER="Valeur en pixels" applique une bordure autour d'une image.

<HTML> <HEAD> ... </HEAD> <BODY> <IMG SRC="Adresse de l'image" BORDER="Valeur" ALIGN="Type d'alignement" WIDTH="Valeur" HEIGHT="Valeur"> ... Diverses commandes HTML ... </BODY></HTML>

Page 89: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

90

Les imagesLes images

Les imagesLes images L'insertion L'insertion

Les alignementsLes alignements – L'attribut d'alignement dans une image ne permet pas d'aligner

l'image dans le document comme le ferait le même attribut avec <TABLE> ou <P>

• mais d'aligner le texte par rapport à l'image.

– Pour cela, il faut utiliser l'attribut d'alignement de la commande d'insertion d'image et les balises de paragraphe puis placer le texte entre les deux instructions.

– La commande <P><IMG SRC="Adresse de l'image" ALIGN="Type d'alignement"> Légende </P> permet l'alignement d'un texte par rapport à une image.

– Les différentes valeurs de cet attribut sont : top, middle, bottom, left et right.

Page 90: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

91

Les imagesLes images

Les imagesLes images L'insertion L'insertion

Les alignementsLes alignements

Type d'alignement

Description

ALIGN="top" Le texte en haut à droite de l'image

ALIGN="middle" Le texte à droite et à mi-hauteur de l'image

ALIGN="bottom" Le texte en bas à droite de l'image

ALIGN="left" Le texte à gauche de l'image

ALIGN="right" Le texte à droite de l'image

Page 91: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

92

Les imagesLes images

Les imagesLes images L'insertion L'insertion

Les alignementsLes alignements <HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <P> <IMG SRC="Adresse de l'image" ALIGN="Type d'alignement"> texte </P> ... Diverses commandes HTML ... </BODY></HTML>

Page 92: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

93

Les imagesLes images

Les imagesLes images

L'insertion L'insertion

Les légendesLes légendes

– L'attribut ALT="Légende" permet d'affecter une légende à l'image

• Permet l'affichage dans une bulle d'une légende • Si l'affichage de l'image ne se déroule pas

correctement, une légende apparaît à l'emplacement de l'image.

– L'attribut NAME="Nom de l'image" définit un nom à l'image.

– L'attribut LONGDESC="Adresse du document" définit l'adresse d'un document décrivant l'image.

Page 93: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

94

Les imagesLes images

Les imagesLes images L'insertion L'insertion

Les légendesLes légendes

<HTML> <HEAD> ... </HEAD> <BODY> <IMG SRC="Adresse de l'image" NAME="Nom" ALT="Légende" ALIGN="Type d'alignement" WIDTH="Valeur" HEIGHT="Valeur" HSPACE="Valeur" VSPACE="Valeur"> ... Diverses commandes HTML ... </BODY></HTML>

<IMG SRC="../images/Alt.jpg" BORDER="0" WIDTH="269" HEIGHT="170" ALT="Le texte de l'attribut ALT apparaît lorsque l'image ne peut s'afficher pour une raison quelconque ou à l'intérieur d'une bulle">

Page 94: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

95

Les imagesLes images

Les imagesLes images L'insertionL'insertion

Affichage en basse résolutionAffichage en basse résolution

– Une image peut être chargé en basse résolution dans le navigateur de Netscape Communicator.

– L'attribut LOWSRC="Adresse de l'image" permet le chargement en basse résolution d'une image.

<HTML> <HEAD> ... </HEAD> <BODY> <IMG LOWSRC="Adresse de l'image" ALIGN="Type d'alignement" WHIDHT="Valeur" HEIGHT="Valeur" > Diverses commandes HTML </BODY></HTML>

<IMG LOWSRC="../images/Paysage.jpg" BORDER="0" WIDTH="320" HEIGHT="240">

Page 95: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

96

Les imagesLes images

Les imagesLes images Les liens hyperimagesLes liens hyperimages

Les hyperimages sont des images qui servent de liens vers un Les hyperimages sont des images qui servent de liens vers un document cible.document cible.

Ces liens fonctionnent exactement de la même manière que les liens Ces liens fonctionnent exactement de la même manière que les liens hypertextes.hypertextes.

<<A HREF="Adresse cible"> <IMG SRC="Adresse de l'image></A>

<HTML> ... <BODY> <A NAME="Debut"></A>Diverses commandes HTML ... <A HREF="Adresse"> <IMG SRC="Adresse de l'image"> </A> </BODY></HTML>

<A HREF="contact.html" TARGET="_blank"> <IMG SRC="email.gif" WIDTH="96" HEIGHT="64"></A>

Page 96: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

97

Les imagesLes images

Les imagesLes images Les boutons imagesLes boutons images

Les images peuvent se substituer aux boutons de commandes Les images peuvent se substituer aux boutons de commandes standards à l'instar des hyperimages et partant d'accomplir des standards à l'instar des hyperimages et partant d'accomplir des fonctions identiques aux boutons précités.fonctions identiques aux boutons précités.

La commande La commande <INPUT TYPE="image"><INPUT TYPE="image"> spécifie la création spécifie la création d'un bouton à base d'une image.d'un bouton à base d'une image.

L'attribut L'attribut SRC="Adresse de l'image""SRC="Adresse de l'image"" permet d'affecter une permet d'affecter une image à la commande.image à la commande.

L'attribut L'attribut USEMAP="Adresse de l'image"USEMAP="Adresse de l'image" permet d'affecter permet d'affecter une image en coordonnées (image-map) à la commande.une image en coordonnées (image-map) à la commande.

L'attribut L'attribut ALT="Texte"ALT="Texte" affiche une description de l'image. affiche une description de l'image.

Page 97: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

98

Les imagesLes images

Les imagesLes images Les boutons imagesLes boutons images

<HTML> <HEAD> ... </HEAD> <BODY> <FORM> <INPUT TYPE="image" NAME="Nom du bouton" SRC="Adresse de l'image" ALT="Texte"> ... </FORM> ... Diverses commandes HTML ... </BODY></HTML>

<INPUT TYPE="image" SRC="images/globe1.gif" WIDTH="64" HEIGHT="64" NAME="image" ALT="...">

Page 98: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

99

Les tableauxLes tableaux

Les tableauxLes tableaux La structureLa structure

La commande La commande <TABLE> marque le début d'un tableau. marque le début d'un tableau.– La commande </TABLE> marque la fin d'un tableau.

Un tableau peut être composé de trois sous-parties permettant de Un tableau peut être composé de trois sous-parties permettant de distinguer respectivement, la partie supérieure, le corps et la partie distinguer respectivement, la partie supérieure, le corps et la partie inférieure d'un tableau.inférieure d'un tableau.

<HTML> <BODY> <TABLE> ... </TABLE> ... Diverses commandes HTML ... </BODY></HTML>

Page 99: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

100

Les tableauxLes tableaux

Les tableauxLes tableaux La structureLa structure

La têteLa tête– Dans un tableau, le partie

supérieure constitue la tête du tableau.

• Elle peut être composée de plusieurs lignes et cellules.

– La commande <THEAD> marque le début d'une tête de tableau.

• La commande </THEAD> marque la fin d'une tête de tableau.

<HTML> ...<BODY> <TABLE> <THEAD> ... </THEAD> ... </TABLE> ... Diverses commandes HTML ... </BODY></HTML>

Page 100: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

101

Les tableauxLes tableaux

Les tableauxLes tableaux La structure La structure

Le corpsLe corps – Un tableau est constitué d'un

corps formé par des cellules et constituant la partie recueillant les données.

• La commande <TBODY> marque le début du corps d'un tableau.

• La commande </TBODY> marque la fin du corps d'un tableau.

<HTML> <BODY> <TABLE> <THEAD> ... </THEAD> <TBODY> ... </TBODY> ... </TABLE> ... Diverses commandes HTML ... </BODY></HTML>

Page 101: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

102

Les tableauxLes tableaux

Les tableauxLes tableaux Les légendesLes légendes

Un tableau peut comporter une légende permettant de définir Un tableau peut comporter une légende permettant de définir globalement son contenu.globalement son contenu.

Une balise placée entre les commandesUne balise placée entre les commandes <TABLE><TABLE> et et </TABLE></TABLE> autorise l'assignation d'une légende au tableau. autorise l'assignation d'une légende au tableau.

La commande La commande <CAPTION><CAPTION> marque le début de la légende. marque le début de la légende.

– La commande </CAPTION> marque la fin de la légende.

L'attribut L'attribut ALIGN="Type d'alignement"ALIGN="Type d'alignement" permet l'alignement permet l'alignement horizontal de la légende.horizontal de la légende.

L'attribut L'attribut VALIGN="Type d'alignement"VALIGN="Type d'alignement" permet l'alignement permet l'alignement vertical de la légende.vertical de la légende.

Page 102: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

103

Les tableauxLes tableaux

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date"

CONTENT="01/01/2000"> ... </HEAD> <BODY> <TABLE> <CAPTION ALIGN="Type d'alignement" VALIGN="Type

d'alignement"> Légende du tableau </CAPTION> ... </TABLE> ... Diverses commandes HTML ... </BODY></HTML>

Page 103: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

104

Les tableauxLes tableaux

Les tableauxLes tableaux Les lignesLes lignes

La commande La commande <TR><TR> marque le début d'une ligne. marque le début d'une ligne.– La commande </TR> marque la fin d'un ligne.

L'en-têteL'en-tête Au sein d'un tableau, Au sein d'un tableau, la ligne supérieure ou la première colonne

constitue en général l'en-tête. La commande La commande <TH><TH> marque le début d'un en-tête. marque le début d'un en-tête.

– La commande </TH> marque la fin d'un en-tête. Les colonnes et les cellulesLes colonnes et les cellules

Les cellules sont disposées exclusivement au sein d'une ligne. Les Les cellules sont disposées exclusivement au sein d'une ligne. Les instructions de création de cellules sont toujours comprises entre les instructions de création de cellules sont toujours comprises entre les balises balises <TR><TR> et et </TR></TR>..

La commande La commande <TD><TD> marque le début d'une cellule. marque le début d'une cellule.– La commande </TD> marque la fin d'une cellule.– L'attribut COLS="Nombre de colonnes" définit le nombre de colonnes (Attribut

obsolète).

Page 104: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

105

Les tableauxLes tableaux

<TABLE COLS="Nombre de colonnes"> <CAPTION> Titre du tableau </CAPTION> <TR> <TH>Titre première colonne</TH> <TH>Titre seconde colonne</TH> ... </TR> <TR> <TD>Première cellule</TD> <TD>Seconde cellule</TD> ... </TR> <TR> <TD>Première cellule</TD> <TD>Seconde cellule</TD> ... </TR> ... </TABLE>

Page 105: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

106

Les tableauxLes tableaux

Les tableauxLes tableaux Tous les éléments du tableau, les colonnes, les en-têtes et les Tous les éléments du tableau, les colonnes, les en-têtes et les

cellules et le tableau lui-même par rapport à la surface d'affichage, cellules et le tableau lui-même par rapport à la surface d'affichage, peuvent être redimensionnés indépendamment.peuvent être redimensionnés indépendamment.

L'attribut L'attribut WIDTH="Valeur"WIDTH="Valeur" définit la largeur. définit la largeur. L'attribut L'attribut HEIGHT="Valeur"HEIGHT="Valeur" définit la hauteur. définit la hauteur.

Les valeurs peuvent s'exprimer en pixels ou en pourcentage de la Les valeurs peuvent s'exprimer en pixels ou en pourcentage de la surface d'affichage : surface d'affichage : WIDTH=250WIDTH=250 ou ou WIDTH=80%WIDTH=80%..

Il est possible d'affecter les deux attributs de dimensionnement à Il est possible d'affecter les deux attributs de dimensionnement à pratiquement tous les éléments, c'est-à-dire pratiquement tous les éléments, c'est-à-dire <TABLE><TABLE>, , <TH><TH> et et <TD><TD> sauf la commande de création de lignes sauf la commande de création de lignes <TR><TR>..

Page 106: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

107

Les tableauxLes tableaux

<TABLE WIDTH="Valeur" HEIGHT="Valeur"> <CAPTION ALIGN="Type d'alignement" VALIGN="Type d'alignement"> Titre du tableau </CAPTION> <TR> <TH WIDTH="Valeur" HEIGHT="Valeur“ >Titre colonne 1</TH> <TH>Titre colonne 2</TH> ... </TR> <TR><TD>Première cellule</TD> <TD WIDTH="Valeur" HEIGHT="Valeur">Seconde cellule</TD></TR> <TR> <TD WIDTH="Valeur" HEIGHT="Valeur">Première cellule</TD> <TD>Seconde cellule</TD> ... </TR> ... </TABLE>

Page 107: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

108

Les tableauxLes tableaux

Les tableauxLes tableaux Les espacementsLes espacements

L'attribut L'attribut CELLPADDING="Valeur"CELLPADDING="Valeur" définit l'espace de remplissage définit l'espace de remplissage entre les données et le quadrillage.entre les données et le quadrillage.

L'attribut L'attribut CELLSPACING="Valeur" CELLSPACING="Valeur"  définit l'espacement entre les définit l'espacement entre les cellules.cellules.

Les valeurs s'expriment en pixels : Les valeurs s'expriment en pixels : BORDER=3BORDER=3, , CELLSPACING=15CELLSPACING=15 ou ou HSPACE=20HSPACE=20..

Les borduresLes bordures

L'attribut L'attribut BORDER="Valeur"BORDER="Valeur" définit la largeur de la bordure et le définit la largeur de la bordure et le quadrillage.quadrillage.

Les valeurs s'expriment en pixels : Les valeurs s'expriment en pixels : BORDER="3"BORDER="3", , BORDER="15"BORDER="15" ou ou BORDER="20"BORDER="20"..

Page 108: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

109

Les tableauxLes tableaux

<TABLE CELLSPACING="Valeur" CELLSPADDING="Valeur""  BORDER="Valeur"BORDER="Valeur" > <CAPTION> Titre du tableau </CAPTION> <TR> <TH WIDTH="Valeur" HEIGHT="Valeur">Titre colonne 1</TH> <TH WIDTH="Valeur" HEIGHT="Valeur">Titre colonne 2</TH> ... </TR> <TR> <TD>Première cellule</TD> <TD>Seconde cellule</TD> ... </TR> ... </TABLE>

Page 109: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

110

Les tableauxLes tableaux

Les borduresLes bordures Quadrillage avec FRAMEQuadrillage avec FRAME

Un tableau peut comporter un quadrillage spécial en affichant Un tableau peut comporter un quadrillage spécial en affichant seulement une partie des bordures.seulement une partie des bordures.

L'attribut L'attribut FRAME="Type de bordureFRAME="Type de bordure"" définit le quadrillage du tableau. définit le quadrillage du tableau.

Les couleurs de borduresLes couleurs de bordures Les balises Les balises <TABLE><TABLE>, , <TD><TD>, et enfin , et enfin <TH><TH> acceptent des attributs acceptent des attributs

permettant de modifier la couleur des bordures.permettant de modifier la couleur des bordures.

L'attribut L'attribut BORDERCOLOR="couleur"BORDERCOLOR="couleur" définit une couleur de bordure.définit une couleur de bordure.

L'attribut L'attribut BORDERCOLORDARK="couleur"BORDERCOLORDARK="couleur" définit une couleur de définit une couleur de bordure foncée.bordure foncée.

L'attributL'attribut BORDERCOLORLIGHT="couleur"BORDERCOLORLIGHT="couleur" définit une couleur de définit une couleur de bordure claire.bordure claire.

Page 110: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

111

Les tableauxLes tableaux

<TABLE BORDER="Valeur" FRAME="Type de bordure"> <CAPTION ALIGN="Type d'alignement" VALIGN="Type d'alignement"> Titre du tableau </CAPTION> <TR> <TH WIDTH="Valeur" HEIGHT="Valeur">Titre colonne 1</TH> <TH WIDTH="Valeur" HEIGHT="Valeur">Titre colonne 2</TH> ... </TR> <TR> <TD>Première cellule</TD> <TD>Seconde cellule</TD> ... </TR> ... </TABLE>

Page 111: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

112

Les tableauxLes tableaux

Les bordures Les bordures Quadrillage avec FRAMEQuadrillage avec FRAME

AboveAbove bordures externes en haut du tableau seulementbordures externes en haut du tableau seulement BelowBelow bordures externes en bas du tableau seulementbordures externes en bas du tableau seulement BorderBorder bordures sur tous les côtés du tableaubordures sur tous les côtés du tableau BoxBox bordures autour du tableau seulementbordures autour du tableau seulement InsidesInsides bordures sur le dessus et le dessous du tableau bordures sur le dessus et le dessous du tableau

seulementseulement HsidesHsides bordures externes du coté horizontal du tableaubordures externes du coté horizontal du tableau LhsLhs bordures externes du coté gauche du tableau bordures externes du coté gauche du tableau

seulementseulement RhsRhs bordures externes du coté droit du tableau seulementbordures externes du coté droit du tableau seulement VoidVoid enlève toutes les bordures externes du tableauenlève toutes les bordures externes du tableau VsidesVsides bordures externes du coté droit et gauche du tableaubordures externes du coté droit et gauche du tableau

Page 112: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

113

Les tableauxLes tableaux

<TABLE WIDTH="90%" BORDER="5" BORDERCOLOR="#FF9900"> <TR> <TD BORDERCOLOR="#00FF00"> </TD> <TD BORDERCOLOR="#00FF00"> </TD> <TD BORDERCOLOR="#00FF00"> </TD> </TR> <TR> <TD BORDERCOLOR="#00FF00"> </TD> <TD BORDERCOLOR="#00FF00"> </TD> <TD BORDERCOLOR="#00FF00"> </TD> </TR> <TR> <TD BORDERCOLOR="#00FF00"></TD> <TD BORDERCOLOR="#00FF00"> </TD> <TD BORDERCOLOR="#00FF00"> </TD> </TR></TABLE>

Page 113: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

114

Les tableauxLes tableaux

Les alignementsLes alignements L'attribut L'attribut ALIGN="Type d'alignement"ALIGN="Type d'alignement" définit un alignement horizontal du définit un alignement horizontal du

tableau et des cellules.tableau et des cellules. Les options d'alignement horizontal sont "Les options d'alignement horizontal sont "LeftLeft" (par défaut) pour la " (par défaut) pour la

gauche, "gauche, "rightright" pour la droite ou "" pour la droite ou "centercenter" pour le centre." pour le centre.

L'alignement dans les cellulesL'alignement dans les cellules Dans un document HTML, il est possible d'appliquer un alignement des Dans un document HTML, il est possible d'appliquer un alignement des

éléments au sein d'un tableau, à l'intérieur des cellules.éléments au sein d'un tableau, à l'intérieur des cellules.

L'attribut L'attribut ALIGN="Type d'alignement"ALIGN="Type d'alignement" définit un alignement définit un alignement horizontal du tableau et des cellules.horizontal du tableau et des cellules.

– Les options d'alignement horizontal sont "Left" (par défaut) pour la gauche, "right" pour la droite ou "center" pour le centre.

L'attribut L'attribut VALIGN="Type d'alignement"VALIGN="Type d'alignement" définit un alignement définit un alignement horizontal dans les lignes ou les cellules.horizontal dans les lignes ou les cellules.

– Les options d'alignement vertical sont "middle" (par défaut) pour le milieu, "top" pour le haut ou "bottom" pour le bas ou "baseline" pour le bas de la ligne courante.

Page 114: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

115

Les tableauxLes tableaux

<TABLE ALIGN="center"   > <CAPTION ALIGN="Type d'alignement" VALIGN="Type

d'alignement"> Titre du tableau </CAPTION> <TR> <TH ALIGN="Type d'alignement" VALIGN="Type d'alignement"> Titre colonne 1 </TH> <TH>Titre colonne 2</TH> ... </TR> <TR> <TD ALIGN="Type d'alignement" VALIGN="Type d'alignement"> Première cellule </TD> <TD>Seconde cellule</TD> </TR> </TABLE>

Page 115: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

116

Les tableauxLes tableaux

Les tableauxLes tableaux

Les fusionsLes fusions Les attributs de fusions se rencontrent dans les balises de cellules Les attributs de fusions se rencontrent dans les balises de cellules

<TH><TH> ou ou <TR><TR>– L'attribut COLSPAN="Nombre de cellules" définit le nombre de cellules à

fusionner horizontalement.

– L'attribut ROWSPAN="Nombre de cellules" définit le nombre de cellules à fusionner verticalement.

Les fondsLes fonds Le langage HTML offre à l'utilisateur la possibilité d'appliquer à un Le langage HTML offre à l'utilisateur la possibilité d'appliquer à un

tableau et à chacune des cellules des fonds de couleur ou des fonds à tableau et à chacune des cellules des fonds de couleur ou des fonds à base d'images.base d'images.

– L'attribut BACKGROUND="Adresse de l'image" définit une image en arrière-plan de l'élément essentiellement sous Internet Explorer.

– L'attribut BGCOLOR="couleur" définit une couleur de fond.

Page 116: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

117

Les tableauxLes tableaux

<TABLE BORDER=1> <TR> <TH COLSPAN="5" BGCOLOR="#0000CC"> Cellules fusionnées horizontalement </TH> </TR> <TR> <TD ROWSPAN="5" BGCOLOR="#DEEDFF"> Cellules fusionnées verticalement </TD> <TD COLSPAN="4" BGCOLOR="#FFCFE3"> Cellules fusionnées horizontalement </TD> </TR> <TR> <TD>Cellule</TD> <TD>Cellule</TD> <TD COLSPAN="2" ROWSPAN="4" BGCOLOR="#969696"> Cellules fusionnées verticalement et horizontalement - </TD> </TR> <TR> <TD>Cellule</TD> <TD>Cellule</TD> </TR> <TR> <TD>Cellule</TD> <TD>Cellule</TD> </TR> <TR> <TD>Cellule</TD> <TD>Cellule</TD> </TR></TABLE>

Page 117: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

118

Les tableauxLes tableaux

<TABLE BACKGROUND="Adresse de l'image" BGCOLOR="Couleur">

<CAPTION> Titre du tableau </CAPTION> <TR> <TH BACKGROUND="Adresse de l'image" BGCOLOR="Couleur">

Titre colonne 1 </TH> <TH>Titre colonne 2</TH> ... </TR BACKGROUND="Adresse de l'image"

BGCOLOR="Couleur"> <TR> <TD> Première cellule </TD> <TD>Seconde cellule</TD> ... </TR> ... </TABLE>

Page 118: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

119

Les cadresLes cadres

Les cadresLes cadres La structureLa structure

Les cadres (frames) permettent de fractionner la surface Les cadres (frames) permettent de fractionner la surface d'affichage en plusieurs parties afin d'afficher différentes pages d'affichage en plusieurs parties afin d'afficher différentes pages HTML simultanément dans le navigateur.HTML simultanément dans le navigateur.

– Ces cadres servent notamment à afficher d'un côté une série de liens comme un menu ou un sommaire et de l'autre côté des pages contenant des informations en relation.

La commande La commande <FRAMESET> marque le début de la définition marque le début de la définition des cadres.des cadres.

– La commande </FRAMESET> marque la fin de la définition des cadres.

Page 119: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

120

Les cadresLes cadres

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date"

CONTENT="01/01/2000"> ... </HEAD> <FRAMESET> ... <BODY> ... Diverses commandes HTML ... </BODY> </FRAMESET></HTML>

Page 120: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

121

Les cadresLes cadres

Les cadresLes cadres La créationLa création

Les cadres sont créés au sein des balises Les cadres sont créés au sein des balises <FRAMESET><FRAMESET>..

La balise fabriquant ces cadres possèdent deux attributsLa balise fabriquant ces cadres possèdent deux attributs essentielsessentiels

– un spécifiant la page cible – l'autre définissant un nom pour le cadre

La commande La commande <FRAME><FRAME> crée un cadre dans le document crée un cadre dans le document HTML.HTML.

– L'attribut SRC="Adresse du contenu" définit le contenu du cadre.

– L'attribut NAME="Nom du cadre" permet de nommer le cadre.

– L'attribut LONGDESC="Adresse du document" spécifie un document définissant le contenu du cadre.

Page 121: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

122

Les cadresLes cadres

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description"

CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <FRAMESET> <FRAME SRC="Adresse du document" NAME="Nom du

cadre"> ... <BODY> ... Diverses commandes HTML ... </BODY> </FRAMESET></HTML>

Page 122: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

123

Les cadresLes cadres

Les cadresLes cadres Les dimensions Les dimensions

Deux attributs permettent de définir des dimensions pour chacun Deux attributs permettent de définir des dimensions pour chacun des cadres.des cadres.

– L'attribut COLS="Largeur1,Largeur2,..." définit une largeur pour les cadres.

– L'attribut ROWS="Hauteur1,Hauteur2,..." définit une hauteur pour les cadres.

– Les deux attributs acceptent des valeurs en pourcentage ou en pixels. • Une étoile peut remplacer une des valeurs et constitue, donc, une

dimension variable.

Dans un environnement de cadres, la division se fera soit Dans un environnement de cadres, la division se fera soit verticalement soit horizontalement, les deux ensembles étant verticalement soit horizontalement, les deux ensembles étant impossible. impossible.

– Pour opérer une division horizontale et verticale, il faudra créer deux <FRAMESET> imbriqués l'un dans l'autre.

Page 123: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

124

Les cadresLes cadres

<FRAMESET COLS="33%,33%,34%"> <FRAME SRC=" " NAME="Cadre1"> <FRAME SRC=" " NAME="Cadre2"> <FRAME SRC=" " NAME="Cadre3"></FRAMESET>

Division verticale en trois parties égales Voir exemple

<FRAMESET ROWS="20%,80%"> <FRAME SRC=" " NAME="Cadre1"> <FRAME SRC=" " NAME="Cadre2"></FRAMESET>

Division horizontale en deux parties Voir exemple

<FRAMESET COLS="240,400"> <FRAME SRC=" " NAME="Cadre1"> <FRAME SRC=" " NAME="Cadre2"></FRAMESET>

Division horizontale en deux parties sur 640 pixels Voir exemple

<FRAMESET ROWS="120,360"> <FRAME SRC=" " NAME="Cadre1"> <FRAME SRC=" " NAME="Cadre2"> </FRAMESET>

Division horizontale en deux parties sur 480 pixelsVoir exemple

Page 124: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

125

Les cadresLes cadres

Les cadres Les cadres Les borduresLes bordures

Un attribut permet aux cadres de créer une bordure autour Un attribut permet aux cadres de créer une bordure autour d'eux. D'autres appliquent une couleur à cette bordure ou en d'eux. D'autres appliquent une couleur à cette bordure ou en fixe la taille.fixe la taille.

L'attribut L'attribut FRAMEBORDER="Valeur"FRAMEBORDER="Valeur" détermine selon le choix détermine selon le choix l'affichage d'une bordure en trois-dimensions ou standard.l'affichage d'une bordure en trois-dimensions ou standard.

L'attribut L'attribut BORDER="Valeur en pixel"BORDER="Valeur en pixel" définit la largeur de la définit la largeur de la bordure pour les cadres.bordure pour les cadres.

L'attribut L'attribut BORDERCOLOR="couleur"BORDERCOLOR="couleur" définit une couleur de définit une couleur de bordure.bordure.

Page 125: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

126

Les formulairesLes formulaires

Les formulairesLes formulaires La structureLa structure

Le formulaire permet de transmettre des informations fournies par Le formulaire permet de transmettre des informations fournies par l'utilisateur vers un serveur.l'utilisateur vers un serveur.

La commande La commande <FORM><FORM> marque le début du formulaire marque le début du formulaire

Les caractéristiques de transmissionsLes caractéristiques de transmissions La balise La balise <FORM><FORM> possède deux attributs spécifiant possède deux attributs spécifiant

– Une adresse ou le formulaire devra être envoyé ; une adresse destinatrice • L'attribut ACTION="Adresse cible" définit l'adresse destinatrice sur

le site.

– La méthode de transmission sur le réseau Internet.• L'attribut METHOD="Type de transmission" définit le type de

transmission.

– L'attribut ENCTYPE="Type d'encodage" définit la méthode d'encodage des données.

Page 126: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

127

Les formulairesLes formulaires

Les formulairesLes formulaires Les caractéristiques de transmissionsLes caractéristiques de transmissions

Il y a deux méthodes d'accès au serveur http, Il y a deux méthodes d'accès au serveur http, GETGET et et POSTPOST : :

– La méthode GET fait en sorte que l'information passe par la variable QUERY_STRING pour interpréter les données.

• Cette méthode devrait être utilisée quand l'objet de la demande est d'obtenir de l'information du serveur.

• Elle permet de transférer une faible quantité de données, au maximum 256 caractères.

– La méthode POST permet de changer ou ajouter des informations au serveur.

• Celle-ci provoque l'envoi de fichiers complets au serveur.

• Elle est privilégiée dans le cas d'un courrier eMail.

Page 127: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

128

Les formulairesLes formulaires

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <FORM ACTION="Adresse cible" METHOD="Type de transmission"> ... </FORM> ... Diverses commandes HTML ... </BODY></HTML>

Page 128: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

129

Les formulairesLes formulaires

Les formulairesLes formulaires Les types d'encodageLes types d'encodage

Le type "Le type "application/x-www-forme-urlencodedapplication/x-www-forme-urlencoded" est inefficace " est inefficace pour envoyer de grandes quantités de données binaires ou des pour envoyer de grandes quantités de données binaires ou des textes qui contiennent des caractères non-ASCII. C'est le type textes qui contiennent des caractères non-ASCII. C'est le type par défaut.par défaut.

Le type "Le type "multipart/form-datamultipart/form-data" devrait être utilisé pour soumettre " devrait être utilisé pour soumettre des formulaires qui contiennent des données non-ASCII, et des des formulaires qui contiennent des données non-ASCII, et des données binaires.données binaires.

En général, l'attribut "En général, l'attribut "enctypeenctype" spécifie le type MIME utilisé pour " spécifie le type MIME utilisé pour soumettre le formulaire au serveur. soumettre le formulaire au serveur.

Lorsque la valeur de l'attribut "Lorsque la valeur de l'attribut "methodmethod" vaut "" vaut "postpost", la valeur ", la valeur associée associée

par défaut est "par défaut est "application/x-www-form-urlencodedapplication/x-www-form-urlencoded".".

La valeur "La valeur "multipart/form-datamultipart/form-data" est employée lorsque le " est employée lorsque le formulaire inclut le téléchargement de fichiers associés.formulaire inclut le téléchargement de fichiers associés.

Page 129: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

130

Les formulairesLes formulaires

<FORM action="http://server.com/cgi/handle" enctype="multipart/form-data" method="post"> Votre nom ? <INPUT TYPE="text" NAME="Nom"><BR> Quels fichiers voulez-vous envoyer ? <INPUT TYPE="file"

NAME="fichiers"><BR> <INPUT TYPE="submit" VALUE="Envoyer"> <INPUT TYPE="reset" VALUE="Annuler"> </FORM>

Page 130: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

131

Les formulairesLes formulaires

Les formulairesLes formulaires

Les attributs de FORMLes attributs de FORM

L'attribut L'attribut NAME="Nom du formulaire"NAME="Nom du formulaire" définit un nom pour le définit un nom pour le formulaire courant.formulaire courant.

L'attribut L'attribut TARGET="Nom du cadre"TARGET="Nom du cadre" définit le cadre définit le cadre destinataire qui doit afficher les résultats du formulaire.destinataire qui doit afficher les résultats du formulaire.

L'attribut L'attribut ACCEPT-CHARSET="Liste"ACCEPT-CHARSET="Liste" définit une liste de jeux définit une liste de jeux de caractères acceptés par le serveur traitant le formulaire.de caractères acceptés par le serveur traitant le formulaire.

L'attribut L'attribut LANG="Langue" LANG="Langue"  définit une langue pour l'élément.définit une langue pour l'élément.

L'attribut L'attribut DIR="rtl/ltr"DIR="rtl/ltr" définit une direction d'écriture. définit une direction d'écriture.

L'attribut L'attribut TITLE="Description"TITLE="Description" définit une description affichée définit une description affichée dans une bulle.dans une bulle.

Page 131: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

132

Les formulairesLes formulaires

Les formulairesLes formulaires Les champs d'entréeLes champs d'entrée

La commande La commande <INPUT><INPUT> définit un champ d'entrée. définit un champ d'entrée.

– L'attribut NAME="Nom du champ d'entrée" définit une chaîne de caractères pour le champ d'entrée.

– L'attribut TYPE="Type de champ" définit le type de donnée du champ de saisie.

Page 132: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

133

Les formulairesLes formulaires

Les formulairesLes formulairesType de champ Description

button Création d'un bouton poussoir

checkbox Création de cases à cocher

file Création d'un bouton de sélection de fichier

hidden Création d'un champ cachée

image Création d'un bouton image

password Création d'un champ autorisant la saisie de mot de passe

radio Création de cases radios

reset Création d'un bouton de réinitialisation

submit Création d'un bouton de soumission

texte Création d'un élément de saisie de texte.

Page 133: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

134

Les formulairesLes formulaires

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date"

CONTENT="01/01/2000"> ... </HEAD> <BODY> <FORM> <INPUT NAME="Nom du champ" TYPE=Type de champ>

... </FORM> ... Diverses commandes HTML ... </BODY></HTML>

Page 134: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

135

Les formulairesLes formulaires

Les formulairesLes formulaires Les champs d'entréeLes champs d'entrée

Les attributs des champs d'entrée Les attributs des champs d'entrée – Attributs permettent d'apporter de nombreuses fonctionnalités améliorant

l'ergonomie, la convivialité et la présentation.• DISABLED permet la désactivation de l'élément.

• READONLY spécifie le mode lecture seule de l'élément.

• NOTAB exclut l'élément de l'ordre de tabulation.

• ALIGN="Type alignement" définit un alignement de l'élément.

• LANG="Langue" définit une langue pour l'élément

• DIR="rtl/ltr" définit une direction d'écriture.

• TITLE="Description" une description affichée dans une bulle.

• VALUE="Chaîne de caractères" définit la valeur du paramètre envoyé à l'application traitant le formulaire si l'élément est sélectionné.

Page 135: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

136

Les formulairesLes formulaires

Les formulairesLes formulaires Les champs de saisieLes champs de saisie

Les champs de saisie servent dans la plupart des cas à saisir Les champs de saisie servent dans la plupart des cas à saisir des valeurs (âge, nombre quelconque, etc.) ou des mots (nom, des valeurs (âge, nombre quelconque, etc.) ou des mots (nom, adresse, etc.) ainsi que des mots-de-passe.adresse, etc.) ainsi que des mots-de-passe.

La commande La commande <INPUT TYPE="text"><INPUT TYPE="text"> crée un champ de saisie crée un champ de saisie d'une seule ligne.d'une seule ligne.

La commande La commande <INPUT TYPE="password"><INPUT TYPE="password"> crée un champ de crée un champ de saisie mot-de-passe.saisie mot-de-passe.

Page 136: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

137

Les formulairesLes formulaires

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date"

CONTENT="01/01/2000"> ... </HEAD> <BODY> <FORM> <INPUT TYPE="text" NAME="boitetxt" SIZE="38"

MAXLENGTH="48" VALUE="Champ de saisie d'une largeur de 38 pour un maximum de 48 caractères">

<INPUT TYPE="password" NAME="BteMotPass" SIZE="30" MAXLENGTH="30">

</FORM> ... Diverses commandes HTML ... </BODY></HTML>

Page 137: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

138

Les formulairesLes formulaires

Les formulairesLes formulaires Les champs de saisieLes champs de saisie

Les cases radiosLes cases radios

– Les cases radios permettent à l'utilisateur de faire un seul choix parmi plusieurs options possibles.

– La commande <INPUT TYPE="radio"> crée une case radio.

– L'attribut CHECKED sélectionne une case par défaut.

Page 138: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

139

Les formulairesLes formulaires

<HTML> <HEAD> .. </HEAD> <BODY> <FORM> <INPUT TYPE="radio" NAME="CaseRadio" VALUE="Premier

item"> Premier item<INPUT TYPE="radio" NAME="CaseRadio" VALUE="Second

item"> Second item<INPUT TYPE="radio" NAME="CaseRadio" VALUE="Troisième

item"> Troisième item<INPUT TYPE="radio" NAME="CaseRadio" VALUE="Quatrième

item"> Quatrième item<INPUT TYPE="radio" NAME="CaseRadio" VALUE="Cinquième

item"> Cinquième item ... </FORM> ... Diverses commandes HTML </BODY></HTML>

Page 139: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

140

Les formulairesLes formulaires

Les formulairesLes formulaires Les champs de saisieLes champs de saisie

Les cases à cocherLes cases à cocher– Les cases à cocher font parties en général d'un groupe d'options

dans lequel un usager peut sélectionner un ou plusieurs items contrairement aux cases radios.

– La commande <INPUT TYPE="checkbox"> marque la fin du formulaire.

– L'attribut CHECKED sélectionne une case par défaut.

Page 140: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

141

Les formulairesLes formulaires

Les formulairesLes formulaires Les champs de saisieLes champs de saisie

Les boutons de commande permettent après le renseignement des Les boutons de commande permettent après le renseignement des différents éléments d'un formulaire par un utilisateur d'envoyer vers le différents éléments d'un formulaire par un utilisateur d'envoyer vers le destinataire les informations ou encore d'annuler le processus.destinataire les informations ou encore d'annuler le processus.

La commande La commande <INPUT TYPE="submit"><INPUT TYPE="submit"> crée un bouton crée un bouton d'enregistrement.d'enregistrement.

La commande La commande <INPUT TYPE="reset"><INPUT TYPE="reset"> crée un bouton d'annulation. crée un bouton d'annulation.

La commande La commande <INPUT TYPE="file"><INPUT TYPE="file"> crée un bouton fichier attaché. crée un bouton fichier attaché.

L'attribut L'attribut ACCEPT="Nom du bouton"ACCEPT="Nom du bouton" spécifie le type de fichier spécifie le type de fichier attaché.attaché.

Page 141: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

142

Les formulairesLes formulaires

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Bouton"> <INPUT TYPE="reset" VALUE="Recommencer"> <INPUT TYPE="submit" VALUE="Soumettre"> <INPUT TYPE="file" NAME="FichierAttache" ACCEPT="fichier"> ... </FORM> ... Diverses commandes HTML ... </BODY></HTML>

Page 142: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

143

Les formulairesLes formulaires

Les formulairesLes formulaires Les champs de saisieLes champs de saisie

Les boutons imagesLes boutons images – Les images peuvent se substituer aux boutons de commandes

standards à l'instar des hyperimages et partant d'accomplir des fonctions identiques aux boutons précités.

– La commande <INPUT TYPE="image"> spécifie la création d'un bouton à base d'une image.

– L'attribut SRC="Adresse de l'image" permet d'affecter une image à la commande.

– L'attribut USEMAP="Adresse de l'image" permet d'affecter une image en coordonnées (image-map) à la commande.

– L'attribut ALT="Texte" affiche une description de l'image.

Page 143: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

144

Les formulairesLes formulaires

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date"

CONTENT="01/01/2000"> ... </HEAD> <BODY> <FORM> <INPUT TYPE="image" NAME= " SALARIE"

SRC= "petit_1106.jpg " ALT= " exemple de bouton image"> ... </FORM> ... Diverses commandes HTML ... </BODY></HTML>

Page 144: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

145

Les formulairesLes formulaires

Les formulairesLes formulaires Les champs de saisieLes champs de saisie

Les entrées cachéesLes entrées cachées

– Les entrées cachées permettent, lors de l'envoi, de joindre au formulaire une information non visible pour l'utilisateur.

– Lorsque la balise <INPUT> possède le type hidden, elle n'accepte plus que deux attributs, en l'occurrence NAME et VALUE.

– La commande <INPUT TYPE="hidden"> spécifie la création d'une entrée cachée

– L'attribut NAME="Nom du champ" permet d'affecter un nom à l'entrée cachée.

– L'attribut VALUE="Valeur de la variable" permet d'affecter une valeur à l'entrée cachée.

Page 145: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

146

Les formulairesLes formulaires

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <FORM> <INPUT TYPE="hidden" NAME="EntreeCachee"

VALUE="Valeur non visible pour l'utilisateur"> ... </FORM> ... Diverses commandes HTML ... </BODY></HTML>

Page 146: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

147

Les formulairesLes formulaires

Les formulairesLes formulaires

Les champs multilignesLes champs multilignes

Un champ multiligne permet d'entrer un texte de plusieurs lignes Un champ multiligne permet d'entrer un texte de plusieurs lignes dans une zone de saisie.dans une zone de saisie.

La commande La commande <TEXTAREA><TEXTAREA> définit une zone de texte. définit une zone de texte.– La commande </TEXTAREA> ferme la zone de texte.

– L'attribut NAME="Nom du champ" définit un nom pour la zone de texte.

– L'attribut COLS="Valeur" spécifie un nombre de caractères sur une ligne

– L'attribut ROWS="Valeur" spécifie un nombre de lignes.

Page 147: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

148

Les formulairesLes formulaires

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <FORM> <TEXTAREA NAME="txtmulti" COLS="25" ROWS="3" WRAP="virtual"> Ceci

est une boite à texte de 25 colonnes et 3 lignes.</TEXTAREA>

<TEXTAREA NAME="txtmulti2" COLS="38" ROWS="5" WRAP="physical"> Ceci est une boite à texte de 38 colonnes et 5 lignes.</TEXTAREA>

... </FORM> ... Diverses commandes HTML ... </BODY></HTML>

Page 148: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

149

Les formulairesLes formulaires

Les formulairesLes formulaires Les champs multilignesLes champs multilignes

Les attributs de TEXTAREALes attributs de TEXTAREA– WRAP="off/virtual/physical" définit la présence de coupure de ligne.

• Off La coupure de ligne désactivée.• Physical La coupure des lignes est activée.• Virtual La coupure des lignes est activée pour

l'usager mais transmise sans coupure des lignes.

– DISABLED permet la désactivation de la zone de texte.– READONLY spécifie le mode lecture seule de l'élément.– TABINDEX="Valeur" définit un ordre de tabulation.– ALIGN="Type d'alignement" définit un alignement de l'élément.– LANG="Langue" définit une langue pour l'élément.– DIR="rtl/ltr" définit une direction d'écriture.– TITLE="Description" définit une description affichée dans une bulle.

Page 149: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

150

Les formulairesLes formulaires

<HTML> <HEAD> </HEAD> <BODY> <FORM> <TEXTAREA

NAME="Nom du champ" COLS="Valeur" ROWS="Valeur" WRAP="off/virtual/physical" DISABLED READONLY TABINDEX="Valeur" LANG="Langue" TITLE="Description">

Contenu par défaut </TEXTAREA> ... </FORM> ... Diverses commandes HTML ... </BODY></HTML>

Page 150: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

151

Les formulairesLes formulaires

Les formulairesLes formulaires Les listes de choixLes listes de choix

Les listes de choix sont des champs affichant une série d'items sous Les listes de choix sont des champs affichant une série d'items sous forme soit de liste déroulante, soit de liste simple.forme soit de liste déroulante, soit de liste simple.

Les listes de choix peuvent autoriser la multisélection d'items.Les listes de choix peuvent autoriser la multisélection d'items.

La commande La commande <SELECT><SELECT> définit une liste de choix. définit une liste de choix.

– L'attribut NAME="Nom du champ" spécifie un nom pour l'élément.

– L'attribut SIZE="Valeur"* définit le type de liste et le nombre d'items.• Une valeur définie à 1 provoque une liste déroutante.• Un valeur supérieure à 1 provoque une liste simple.

– L'attribut MULTIPLE permet de créer une liste à choix multiple.

– L'attribut TABINDEX="Nombre" définit la position de la liste dans l'ordre de tabulation.

– L'attribut DISABLED permet de rendre la liste inactive.

Page 151: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

152

Les formulairesLes formulaires

Les formulairesLes formulaires Les listes de choixLes listes de choix

La commande La commande <OPTION><OPTION> déclare une entrée dans la liste. déclare une entrée dans la liste.

– L'attribut VALUE="Nom de l'entrée" définit la sélection d'un item par défaut.

– L'attribut SELECTED définit la sélection d'un item par défaut.

– L'attribut LABEL="Chaîne de caractères" définit un label pour l'option.

Page 152: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

153

Les formulairesLes formulaires

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> </HEAD> <BODY> <FORM> <TEXTAREA NAME="Nom du champ" COLS="Valeur" ROWS="Valeur">

Contenu par défaut </TEXTAREA> <SELECT NAME="listderoul" SIZE="1"> <OPTION VALUE="Premier item"> Premier item </OPTION> <OPTION VALUE="Second item"> Second item </OPTION> <OPTION VALUE="Troisième item"> Troisième item

</OPTION> <OPTION VALUE="Quatrième item"> Quatrième item </OPTION> <OPTION VALUE="Cinquième item" SELECTED> Cinquième item

</OPTION></SELECT> </FORM> ... Diverses commandes HTML ... </BODY></HTML>

Page 153: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

154

Les formulairesLes formulaires

Les formulairesLes formulaires Les boutonsLes boutons

– Les boutons de commande permettent après le renseignement des différents éléments d'un formulaire par un utilisateur d'envoyer vers son destinataire les informations ou encore d'annuler le processus.

– La commande <BUTTON> crée un bouton poussoir.– La commande </BUTTON> ferme la balise précédente.– L'attribut TYPE="type de bouton" permet de définir la

fonction du bouton.– L'attribut VALUE="Nom de la commande" permet

d'affecter une valeur au bouton.– L'attribut NAME="Nom du bouton" permet de nommer la

commande.

Page 154: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

155

Les formulairesLes formulaires

Les formulairesLes formulaires Les boutonsLes boutons

TypeType de boton de boton

– Button Création d'un simple bouton permettant de déclencher un script.• <BUTTON TYPE="button“ VALUE="button"

NAME="script"> Lancement script</BUTTON>Lancement script

– Submit Création d'un bouton de provoquer la soumission du formulaire.• <BUTTON TYPE="submit" VALUE="submit"

NAME="soumission"> Enregistrer</BUTTON>Enregistrer

– Reset Création d'un bouton de réinitialisation du formulaire• <BUTTON TYPE="reset" VALUE="reset"

NAME="rechargement">Recommencer</BUTTON>Recommencer

Page 155: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

156

HTML et le multimédia (01)HTML et le multimédia (01)

HTML et le multimédiaHTML et le multimédia Les formats vidéosLes formats vidéos

Un document HTML peut accueillir divers éléments multimédias Un document HTML peut accueillir divers éléments multimédias tels que des vidéos ou des sons.tels que des vidéos ou des sons.

Les vidéos au format AVI ou quicktime consomment énormément Les vidéos au format AVI ou quicktime consomment énormément de mémoire, une seconde avec une définition de 320x240, 16 de mémoire, une seconde avec une définition de 320x240, 16 millions de couleurs et 15 images par secondes représente millions de couleurs et 15 images par secondes représente environ 3 méga-octets sans compression.environ 3 méga-octets sans compression.

Le format MPEG permet une compression efficace pour une Le format MPEG permet une compression efficace pour une dégradation infime par rapport aux deux autres. Le résultat est dégradation infime par rapport aux deux autres. Le résultat est immédiatement visible non seulement au niveau de l'occupation immédiatement visible non seulement au niveau de l'occupation mémoire mais aussi par voie de conséquence au niveau du temps.mémoire mais aussi par voie de conséquence au niveau du temps.

Les trois formats précités restent les plus répandus sur le World Les trois formats précités restent les plus répandus sur le World Wide Web, ainsi le langage HTML les supporte et offre les outils Wide Web, ainsi le langage HTML les supporte et offre les outils nécessaire à leur intégration dans une page Internet.nécessaire à leur intégration dans une page Internet.

Page 156: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

157

HTML et le multimédia HTML et le multimédia (02)(02)

HTML et le multimédiaHTML et le multimédia L'insertion des vidéosL'insertion des vidéos

La commande IMG, utilisée pour l'affichage d'image, permet également d'insérer La commande IMG, utilisée pour l'affichage d'image, permet également d'insérer dans une page Web des fichiers vidéos au format AVI, Quicktime ou MPEG dans une page Web des fichiers vidéos au format AVI, Quicktime ou MPEG auxquels s'ajoutent les mondes VRML (Virtual Reality Modeling Language).auxquels s'ajoutent les mondes VRML (Virtual Reality Modeling Language).

La commande La commande <IMG DYNSRC="Adresse du fichier vidéo"><IMG DYNSRC="Adresse du fichier vidéo"> insère une vidéo insère une vidéo ou un monde VRML.ou un monde VRML.

– L'attribut START="fileopen/mouseover"* définit la méthode de démarrage d'une vidéo. Deux options sont possible :

• FILEOPEN (valeur de défaut) signifie que le vidéo débutera lorsque le document sera complètement chargé,

• MOUSEOVER signifie que le vidéo démarrera lorsque l'usager déplacera la souris devant l'animation.

– L'attribut LOOP="Nombre de répétitions" détermine le nombre de répétitions d'une vidéo.

– L'attribut CONTROLS" permet l'affichage des éléments de contrôle – Les autres attributs de cette balise sont identiques à celles de la commande

d'insertion d'image.

Page 157: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

158

HTML et le multimédia HTML et le multimédia (03)(03)

HTML et le multimédiaHTML et le multimédia L'insertion des vidéosL'insertion des vidéos

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <IMG DYNSRC="Adresse du fichier vidéo" START="fileopen/mouseover" LOOP="Nombre de répétitions" CONTROLS> ... Diverses commandes HTML ... </BODY></HTML>

Page 158: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

159

HTML et le multimédia HTML et le multimédia (04)(04)

HTML et le multimédiaHTML et le multimédia Les formats audios Les formats audios

Le son est soumis aux mêmes exigences que les vidéos, le temps de Le son est soumis aux mêmes exigences que les vidéos, le temps de téléchargement et la capacité en mémoire.téléchargement et la capacité en mémoire.

Les formats WAVE, AIFF, ou MIDI sont reconnus dans une page web Les formats WAVE, AIFF, ou MIDI sont reconnus dans une page web et peuvent rendre vos documents HTML plus vivant, mais au risque et peuvent rendre vos documents HTML plus vivant, mais au risque de les rendre plus lent au chargement.de les rendre plus lent au chargement.

En conséquence, les fichiers au format MIDI seront généralement En conséquence, les fichiers au format MIDI seront généralement préférés pour leur très faible consommation en ressource, près de dix préférés pour leur très faible consommation en ressource, près de dix milles fois inférieurs au premier.milles fois inférieurs au premier.

Il existe plusieurs outils permettant de lire des fichiers audios à partir Il existe plusieurs outils permettant de lire des fichiers audios à partir d'une page Web. d'une page Web. – Windows Media Player : édité par Microsoft, – Quicktime Player: édité par Apple, – Real Player : édité par Real Networks, – Crescendo : édité par LiveUpdate.

Page 159: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

160

HTML et le multimédia HTML et le multimédia (05)(05)

HTML et le multimédiaHTML et le multimédia Lancement d'un son au démarrageLancement d'un son au démarrage

Une commande spéciale permet de démarrer la lecture d'un Une commande spéciale permet de démarrer la lecture d'un fichier audio WAVE, MIDI, AIFF ou AU lors du chargement d'un fichier audio WAVE, MIDI, AIFF ou AU lors du chargement d'un document HTML.document HTML.

La commande La commande <BGSOUND ...><BGSOUND ...> permet de lancer un fichier permet de lancer un fichier audio au chargement de la page HTML.audio au chargement de la page HTML.

– L'attribut SRC="Adresse du média" indique l'adresse du fichier sonore à jouer.

– L'attribut BALANCE="Valeur" détermine la balance stéréo entre une valeur de -10 000 à +10 000.

– L'attribut LOOP="true/false" permet de faire jouer un fichier sonore en boucle.

– L'attribut LANG="Type de langue"* spécifie la langue utilisée.– L'attribut TITLE="Description" permet d'ajouter un commentaire dans

une bulle.

Page 160: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

161

HTML et le multimédia HTML et le multimédia (06)(06)

HTML et le multimédiaHTML et le multimédia Lancement d'un son au démarrageLancement d'un son au démarrage

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <BGSOUND SRC="Adresse du fichier audio" BALANCE="Valeur" LOOP="true/false" LANG="Langue" TITLE="Description"> ... Diverses commandes HTML ... </BODY></HTML>

Page 161: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

162

HTML et le multimédia HTML et le multimédia (07)(07)

HTML et le multimédiaHTML et le multimédia L'insertion d’un son par EMBEDL'insertion d’un son par EMBED

Cette commande permet d'insérer dans un document HTML, des Cette commande permet d'insérer dans un document HTML, des fichiers multimédias vidéos ou audios de différents types ; AVI, fichiers multimédias vidéos ou audios de différents types ; AVI, Quicktime, MPEG, MIDI, WAVE, MP3, etc.Quicktime, MPEG, MIDI, WAVE, MP3, etc.

La commande La commande <EMBED ...><EMBED ...> insère un fichier multimédia.et la insère un fichier multimédia.et la commande commande </EMBED></EMBED> termine la commande précitée. termine la commande précitée.

– L'attribut SRC="Adresse du média" indique l'adresse du fichier multimédia à jouer.

– L'attribut PLUGINSPACE="Adresse de l'application" indique l'adresse de l'application.

– L'attribut TYPE="Type d'application" spécifie le type d'application destinée à lancer le fichier.

La commande La commande <NOEMBED ...><NOEMBED ...> insère un contenu alternatif si la insère un contenu alternatif si la commande commande EMBEDEMBED n'est pas supportée. n'est pas supportée.

– La commande </NOEMBED> termine la commande précitée.

Page 162: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

163

HTML et le multimédia HTML et le multimédia (08)(08)

HTML et le multimédiaHTML et le multimédia L'insertion d’un son par EMBEDL'insertion d’un son par EMBED

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <EMBED SRC="Adresse du média" PLUGINSPACE="Adresse de l'application" TYPE="Type d'application"> </EMBED> ... Diverses commandes HTML ... </BODY></HTML>

Page 163: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

164

HTML et les autres langages(01)HTML et les autres langages(01)

HTML et les autres langagesHTML et les autres langages L'insertion d'applet JavaL'insertion d'applet Java

Aujourd'hui par sa puissance et sa souplesse, Java®, conçu en Aujourd'hui par sa puissance et sa souplesse, Java®, conçu en 1990 par Sun Microsystem®, est devenu le langage 1990 par Sun Microsystem®, est devenu le langage incontournable pour la programmation Internet. incontournable pour la programmation Internet.

Le langage Java® est capable de développer de véritables Le langage Java® est capable de développer de véritables applications professionnelles gérant parfaitement toutes les applications professionnelles gérant parfaitement toutes les techniques liées au multimédia et à l'interactivité. techniques liées au multimédia et à l'interactivité.

Java® se distingue, également, par sa faculté à savoir solliciter Java® se distingue, également, par sa faculté à savoir solliciter intelligemment les ressources de l'ordinateur client afin intelligemment les ressources de l'ordinateur client afin d'effectuer une partie du travail d'effectuer une partie du travail

– donc de soulager le serveur. Autrement dit, le serveur envoie des données aux ordinateurs clients qui se chargent alors des calculs liés aux animations multimédias notamment.

Page 164: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

165

HTML et les autres langages (02)HTML et les autres langages (02)

HTML et les autres langagesHTML et les autres langages L'insertion d'applet JavaL'insertion d'applet Java

Un applet Java est un module externe contenant du code pré Un applet Java est un module externe contenant du code pré compilé qui s'exécute par l'intermédiaire du navigateur de la compilé qui s'exécute par l'intermédiaire du navigateur de la machine d'un client.machine d'un client.

Ainsi, il s'avère que le navigateur de l'usager doit impérativement Ainsi, il s'avère que le navigateur de l'usager doit impérativement être capable de supporter la technologie Java®, soit de contenir être capable de supporter la technologie Java®, soit de contenir les ressources propres à ce langage sans quoi, le programme les ressources propres à ce langage sans quoi, le programme sera purement et simplement ignoré par le navigateur.sera purement et simplement ignoré par le navigateur.

La commande La commande <APPLET><APPLET> insère une applet Java® dans une insère une applet Java® dans une page HTML et la commande page HTML et la commande </APPLET></APPLET> ferme l'applet Java. ferme l'applet Java.

– L'attribut CODE="Nom de la classe" définit le nom de la classe du code à exécuter.

– L'attribut CODEBASE="Adresse du code" spécifie l'adresse depuis laquelle le code est récupéré.

Page 165: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

166

HTML et les autres langages (03)HTML et les autres langages (03)

HTML et les autres langagesHTML et les autres langages L'insertion d'applet JavaL'insertion d'applet Java

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <APPLET CODE="Nom de la classe" CODEBASE="Adresse du code"> ... </APPLET> ... Diverses commandes HTML ... </BODY></HTML>

Page 166: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

167

HTML et les autres langages (03)HTML et les autres langages (03)

HTML et les autres langagesHTML et les autres langages L'insertion d'applet JavaL'insertion d'applet Java

Les attributs de APPLET Les attributs de APPLET – Tous les attributs se placent au sein de la balise <APPLET...>.

– ATTRIBUTS DE DEMARRAGE • L'attribut ARCHIVE="Adresse d'archive" spécifie une

adresse d'archive où se trouve le code de la classe.• L'attribut MAYSCRIPT propre à Netscape, permet à l'applet

d'accéder au code javascript contenu dans ma page HTML.• L'attribut OBJECT="donnée" spécifie la représentation de

l'état d'exécution de l'objet.• L'attribut ID="nom d'identificateur" définit pour l'applet un

nom d'identificateur unique au sein de la page.• L'attribut DOWNLOAD="Valeur" spécifique à Internet

explorer, indique l’ordre de l’image.

Page 167: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

168

HTML et les autres langages (04)HTML et les autres langages (04)

HTML et les autres langagesHTML et les autres langages L'insertion d'applet JavaL'insertion d'applet Java

Les attributs de APPLET Les attributs de APPLET

– ATTRIBUTS DE TAILLE

• L'attribut BORDER="Valeur" définit la largeur de la bordure pour une application vidéo.

• L'attribut HEIGHT="Valeur" définit la hauteur de l'application.• L'attribut WIDTH="Valeur" définit la largeur de l'application.• L'attribut BGCOLOR="Couleur" applique une couleur d'arrière plan

pour l'application.

– ATTRIBUTS D'ALIGNEMENT • L'attribut ALIGN="Type d'alignement"* indique l’alignement de

l'application dans la page HTML (Internet explorer).• L'attribut HSPACE="Valeur" définit un espace vertical.• L'attribut VSPACE="Valeur" définit un espace horizontal.

Page 168: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

169

HTML et les autres langages (05)HTML et les autres langages (05)

HTML et les autres langagesHTML et les autres langages L'insertion d'applet JavaL'insertion d'applet Java

Les attributs de APPLET Les attributs de APPLET – ATTRIBUTS DIVERS

• L'attribut NAME="Nom de l'instance" détermine un nom d'instance courante de l'applet.

• L'attribut ALT="Texte" spécifie un texte de remplacement en cas d'incapacité d'exécution de l'applet.

• L'attribut LANG="Type de langue"* spécifie la langue utilisée.

• L'attribut TITLE="Description" permet d'ajouter un commentaire.

Page 169: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

170

HTML et les autres langages (06)HTML et les autres langages (06)

HTML et les autres langagesHTML et les autres langages L'insertion d'applet JavaL'insertion d'applet Java

L'insertion par OBJECT L'insertion par OBJECT – Cette commande permet d'insérer dans un document HTML, des

objets multimédias de différents types tels que les contrôles ActiveX® ou des modules Flash ainsi que des programmes écrits en Java®.

– La commande <OBJECT ...> insère un fichier multimédia et la commande </OBJECT> termine la commande précitée.

• L'attribut CLASSID="java:Nom du fichier Java" identifie l'implémentation de l'objet, la syntaxe pouvant varier selon le type de l'objet.

• L'attribut CODEBASE="Adresse de chargement" identifie l'adresse à partir duquel le code de l'objet sera chargé.

• L'attribut CODETYPE="Type de l'application" définit le type de contenu associé au code.

• L'attribut DATA="Nom" identifie une adresse où l'objet pourra importer les données nécessaires à son initialisation.

• L'attribut TYPE="Type d'application" spécifie le type des données de l'objet.

Page 170: 1 Partie II : HTML de A à Z. 2 Plan Plan Plan 1. 1. Introduction 2. 2. HTML : La structure 3. 3. Les liens 4. 4. Le texte 5. 5. Les images 6. 6. Les tableaux

171

HTML et les autres langages (07)HTML et les autres langages (07)

HTML et les autres langagesHTML et les autres langages L'insertion d'applet JavaL'insertion d'applet Java

L'insertion par OBJECTL'insertion par OBJECT

<HTML> <HEAD> <TITLE>Un titre pertinent</TITLE> <META NAME="Description" CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000"> ... </HEAD> <BODY> <OBJECT

CLASSEID="java:fichier classe" CODETYPE="application/java" TYPE="Type d'application" CODEBASE="Adresse de chargement" DATA="Nom"> .

.. </OBJECT> ... Diverses commandes HTML ... </BODY>