SlideShare une entreprise Scribd logo
1  sur  115
HTML

merci à Emmanuel
Nauer

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

1
HTML : Exemple à suivre

<HTML>
<HEAD>
<TITLE>Exemple de fichier HTML</TITLE>
</HEAD>
<BODY>
<H1>Exemple de fichier HTML</H1>
<P>Ceci est un exemple de fichier <A HREF="http://www.w3c.org/HTML">HTML</A>
</P>
Un fichier HTML peut contenir :
<UL>
<LI>le texte destin &eacute; &agrave; &ecirc;tre lu;
<LI>des indications de formatage :
<OL>
<LI> caract&egrave;s <B>gras</B>, <I>italiques</I>, ...
<LI> niveaux de sections,
<LI> listes, ...
</OL>
<LI>des liens <A HREF="essai.html">hypertextes</A> (ancre + URL) ;
<LI>mon université
<IMG SRC="http://www.univ-evry.fr" ALIGN=middle>
</UL>
</BODY>
</HTML>

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

2
SGML

Qu’est-ce ?
Standard Generalized Markup Language
Langage permettant de définir des types de documents structurés
méta-langage pour construire des langages de balisage
Utilisation d’un principe de balisage logique

Objectifs
Méthode normalisée pour représenter un document
Indépendant des systèmes de saisies et de traitements
Indépendant de la forme physique finale

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

3
SGML : un exemple

Balise ouvrante

Contenu textuel

<Formation>
<Intitulé> IUP IHM 1</Intitulé>
<Intervenants>
<Enseignant label="1">G. Michel</Enseignant>
<Enseignant label="2">E. Nauer</Enseignant>
...
</Intervenants>
Couple (attribut,valeur)
<Contenu>
<Cours id="1" intervenant="2">
<Titre>Internet</Titre>
<VolumeHoraire>40</VolumeHoraire>
</Cours>
...
</Contenu>
Élément
</Formation>

Balise fermante
Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

4
Document Type Definition (DTD)

Composition d’un élément

Élément optionnel

<! ELEMENT
<! ELEMENT
<! ELEMENT

Formation
Intitulé
Intervenants

(Intitulé, Intervenants?, Contenu) >
#PCDATA >
Enseignant* >

<! ELEMENT
<! ATTLIST

Enseignant
Enseignant

#PCDATA >
label

<! ELEMENT

Contenu

Cours+ >

<! ELEMENT
<! ATTLIST

Cours
Cours

(Titre, VolumeHoraire) >
id
ID
#IMPLIED
intervenant
IDREFS #REQUIRED>

<! ELEMENT
<! ELEMENT

Titre
VolumeHoraire

#PCDATA >
#PCDATA >

ID

Élément
répété (O,N)

#IMPLIED >

Élément
répété (1,N)

Attribut(s)
d’un élément
Type atomique
(chaîne de caractères)

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

5
HTML vs. SGML

Intérêt de SGML
SGML permet – via la DTD – de définir :
l’ensemble des balises pour identifier les éléments d’un document, et
les règles formelles qui décrivent sa structure

Positionnement de HTML par rapport à SGML
HTML est une classe de document SGML
HTML est une DTD SGML
Chaque version de HTML = une DTD différente
Versions actuellement utilisées
HTML version 3.2
HTML version 4.0

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

6
HTML
Qu’est-ce ?
Langage de définition de documents sur le Web
Utilise le principe de balisage introduit dans SGML :

<balise [liste d’attributs]>…contenu...</balise>
pour décrire des documents :
textuels
hypertextes
multimédias
…

Le balisage indique comment interpréter le contenu d’un élément

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

7
Document
HTML

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

8
HTML : Exemple
Exemple de fichier HTML
Ceci est un exemple de fichier HTML
Un fichier HTML peut contenir :

le texte destiné à être lu;
des indications de formatage :
1. caractères gras, italiques, …
2. niveaux de sections,
3. listes, …
des liens hypertextes (ancre + URL)

des incrustations d'images

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

9
HTML : Exemple
<HTML>
<HEAD>
<TITLE>Exemple de fichier HTML</TITLE>
</HEAD>
<BODY>
<H1>Exemple de fichier HTML</H1>
<P>Ceci est un exemple de fichier <HREF="http://www.w3c.org/HTML">HTML</A>
</P>
Un fichier HTML peut contenir :
<UL>
<LI>le texte destin &eacute; &agrave; &ecirc;tre lu;
<LI>des indications de formatage :
<OL>
<LI> caract&egrave;s <B>gras</B>, <I>italiques</I>, ...
<LI> niveaux de sections,
<LI> listes, ...
</OL>
<LI>des liens <A HREF="essai.html">hypertextes</A> (ancre + URL) ;
<LI>mon université <IMG SRC="http://www.univ-evry.fr" ALIGN=middle>
</UL>
</BODY>
</HTML>
Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

10
HTML : Evolution
HTML 1.0
Texte de base, images, liens hypertextes

HTML 2.0
Formulaires de saisie

HTML 3.2
Justification (gauche, centre, droite)
Tableaux
Équations mathématiques

HTML 4.0
Feuilles de style

Voir les attributs de la balise

Figures
Imagemap
…

Ecrire du code Html

Sauvegarder html

11
Conseils & conventions
Fichier HTML = fichier ASCII
Si il est tapé avec un traitement de texte (ex : Word),
il faut l'enregistrer en texte seul.

Document HTML = document échangé sur Internet
Penser à la taille :
du fichier HTML !
(plus il est gros, plus cela prend de temps de transfert)
des éléments présents dans le fichier (images, sons, vidéos, …)

Lisibilité (pour faciliter la maintenance)
Indenter les lignes
Balises HTML en majuscules pour mieux les distinguer du corps du
texte.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

12
HTML : Exemple à ne pas suivre

<html><head><title>Exemple de fichier HTML</title></head>
<body><h1>Exemple de fichier HTML</h1>
<p>Ceci est un exemple de fichier <a
href="http://www.w3c.org/HTML">HTML</a></p>
Un fichier HTML peut contenir :
<ul>
<li>le texte destin &eacute; &agrave; &ecirc;tre lu;
<li>des indications de formatage :
<ol>
<li> caract&egrave;s <b>gras</b>, <i>italiques</i>, ...
<li> niveaux de sections,
<li> listes, ...
</ol>
<li>des liens <A HREF="essai.html">hypertextes</a> (ancre + URL) ;
<li>des incrustations d'images
<img src="http://www.univ-metz.fr/ulogo.gif" align=middle>
</ul>
</body>
</html>

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

13
Structures principales d’un document HTML

Document HTML
<HTML>

Entête

<HEAD>
<TITLE>Exemple de document HTML</TITLE>
</HEAD>

Corps

<BODY>
<H1>Mon 1er document HTML</H1>
<P>
Ceci est un document HTML avec un lien hypertexte sur mon
<A HREF="http://www.univ-evry.fr/">Universit&eacute;</A>.
</P>

</BODY>
</HTML>

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

14
Entête

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

15
Entête : <HEAD> … </HEAD>
Position
en début de document
(après près la balise <HTML> et avant la balise <BODY>)

Rôle
Fournir des informations au sujet du document

Contenu
<TITLE>…</TITLE>
Titre de la fenêtre dans laquelle la page s'affiche

<META>
Différentes informations sur le document ou pour la gestion de
celui-ci

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

16
Ecrire mon premier code

Cliquer sur ECRIRE CODE HTML

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

17
Entête : <META … >
<META NAME="..." CONTENT="...">
Permet de spécifier des méta-données sous la forme de couple
attribut-valeur (NAME=CONTENT)
Ces méta-données peuvent être exploitées, par exemple, par les
moteurs de recherche pour effectuer des recherches sur le contenu
effectif du document

Exemple
<META NAME="author"
CONTENT=« bob synclar">
<META NAME="keywords"
CONTENT=« synclar, page, personnelle, homepage, informatique">
<META NAME="description"
CONTENT="Page personnelle de bob synclar">

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

18
Entête : <META … >

<META HTTP-EQUIV="…" CONTENT="...">
Permet de donner des instructions pour la gestion du document

Exemples
<META HTTP_EQUIV="Content-Type"
CONTENT="text/html; charset=iso-8859-1">

permet de spécifier le type de contenu :
Type de document
Codage des caractères
<META HTTP-EQUIV="Content-language" CONTENT="fr">

permet d’indiquer la langue du contenu du document

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

19
Entête : <META … >

Exemples (suite)
<META HTTP-EQUIV="refresh" CONTENT="Délai;url=AdressePage">

permet de passer automatiquement à une autre page
après un certain délai :
Délai = temps (en seconde) avant l’appel d’une autre page
AdressePage = adresse de la page à charger

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

20
Corps de document

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

21
Corps du document : <BODY> ... </BODY>
Position
placé immédiatement après la balise </HEAD>

Rôle
Délimiter le corps du document
Permet de définir l'apparence du fond de l'écran
et la couleur des éléments textuels

Remarques
– 1 seule balise <BODY> par page
SAUF pour les pages comprenant des frames
– La balise peut s'employer seule ou avec des options
– </BODY> est placé immédiatement avant la balise </HTML>

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

22
Les options du BODY

<BODY

BGCOLOR="#RRVVBB"
LINK="#RRVVBB"
TEXT="#RRVVBB"

BACKGROUND= "AdresseImage"
VLINK="#RRVVBB"
ALINK="#RRVVBB">

BGCOLOR : couleur de fond de la fenêtre
BACKGROUND : image de fond (répétée sous forme de mosaïque)
TEXT : couleur du texte ordinaire *
LINK : couleur du texte/de la bordure d'une image qui est un lien *
VLINK : couleur du texte/de la bordure d'une image qui est un lien
amenant sur une page déjà vue *
ALINK : couleur prise par un lien tant qu'on clique dessus (peu utilisé)
* = si omis, utilisation des couleurs standards (définies dans les préférences utilisateur)

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

23
Voir les balises de body
Cliquer sur les attributs de la balise

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

24
Texte
Affichage écran
Tout texte tapé hors d'une balise est considéré comme du texte et
apparaîtra de ce fait à l'écran

Mise en forme à 2 niveaux
Caractères
Paragraphes

Codage de caractères
Utilisation d’un système de codage qui permette un affichage universel
quelque soit la langue de l'ordinateur sur lequel les pages sont lues.
Spécifiques à certaines langues (et notamment au français)

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

25
Le codage des caractères spéciaux
De la forme : &entité;

&nbsp;

Espace insécable

&brvbar;

|

&plusmn; ±

&pound;

£

&yen;

¥

&Oslash;

Ø

&deg;

°

&copy;

&reg;

&sup2;

2

&sup3;

3

&amp;

&

&frac14;

¼

&frac12;

½

&frac34;

¾

&agrave;

à

&Agrave

À

&oelig;

œ

&eacute;

é

&Eacute;

É

&euml;

ë

&icirc;

î

&Icirc;

Î

&ccedil;

ç

&quot;

"

&szlig;

ß

&ntilde;

ñ

&lt;

<

&gt;

>

&micro;

µ

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

26
Mise en forme des caractères
Les styles
Gras :
Italique :
Souligné :

<B> … </B>
<I> ... </I>
<U> … </U>

Taille de la police par défaut
Possibilité de fixer la taille de police d’une page web

<BASEFONT SIZE="taille">

(avec 1

taille

7)

Si cette balise n'est pas utilisée, la taille par défaut des caractères est
fixée à 3.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

27
Mise en forme des caractères

Spécification d’une police locale
<FONT
FACE="police1[,police2,…] SIZE="s|+s|-s"
COLOR="#RRVVBB"> ...
</FONT>
FACE : la première police installée est utilisée.
Ne proposer que des polices dont on est sûr qu'elles sont
disponibles sur l'ordinateur de consultation :
Arial/Helvetica
Times New Roman/Times

SIZE : taille de la police
1 … 7 (taille absolue)
+1, +2... (taille relative par rapport à la valeur par défaut)
Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

28
Mise en forme des caractères

Remarque sur les balises <FONT>
Elles peuvent être imbriquées :

<FONT SIZE="..."> …
<FONT SIZE="... ">
...
</FONT>
...
</FONT>
Permet de changer des paramètres ponctuellement
(couleur ou taille)

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

29
Mise en forme des paragraphes

<CENTER> … </CENTER>
Centre les éléments inclus entre la balise ouvrante et la balise
fermante

<JUSTIFY> … </JUSTIFY>
Justifie les éléments inclus entre la balise ouvrante et la balise
fermante
À utiliser avec prudence !

<BR>
Pas de balise fermante !
Retour à la ligne
<BR><BR> : 2 retours à la ligne = 1ligne d'espacement

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

30
Mise en forme des paragraphes
<P ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"> … </P>
Alignement des paragraphes situés
<P ALIGN=…> et </P>
Pour passer (ou sauter) une ligne, utiliser des <BR>
Possibilité d’utiliser une balise ouvrante SANS balise fermante

équivaut à

<P>
<BR><BR>

Autre équivalence :

équivaut à

<P ALIGN="CENTER"> ... </P>
<CENTER> </CENTER>

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

31
Mise en forme des paragraphes
<PRE> … </PRE>
Affichage sans mise en page
Saut de ligne = saut de ligne
Espace = espace insécable

<PRE>


/



/
/

/
</PRE>

Voir les attributs de la balise

/
/
/



/

Ecrire du code Html



Sauvegarder html

32
Mise en forme de titres
<H1> … </H1>, <H2> … </H2>, <H3> … </H3>,
<H4> … </H4>, <H5> … </H5>, <H6> … </H6>
Titres de différents niveaux
<H1> : titre de 1er niveau, affichage le plus grand
<H2> : un peu plus petit
…
: de plus en plus petit, jusqu’à
<H6> : titre du plus petit niveau

Remarques
De moins en moins usité
Utilisation des mises en forme de paragraphe pour réaliser la même
chose

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

33
Les listes
<UL> ... </UL>
Marqueur de début et de fin d’une liste à puces

<OL> ... </OL>
Marqueur de début et de fin d’une liste numérotée

<LI>
Marqueur des éléments d’une liste
Pas de balise fermante !
Provoque l'affichage d’une puce ou d’un chiffre selon le contexte

Remarque
Les listes sont imbriquables

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

34
Option des listes à puces
Forme de la puce
Suivant le niveau d'imbrication, les puces sont différentes
Par défaut, on obtient :




pour le 1er niveau (le 4ème, le 7ème, …)
pour le 2ème (le 5ème, le 8ème, …)
pour le 3ème (le 6ème; le 9ème, …)

Option TYPE="disc|circle|square" dans <UL>
Permet de choisir la forme de la puce
Taper les valeurs en minuscules !
Internet Explorer ne les applique pas si elles sont tapées en
majuscules : - (

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

35
Option des listes numérotées
Option START="NombreDeDépart" dans <OL>
Permet de démarrer la numérotation à une valeur spécifique
(NombreDeDépart) autre que 1

Option TYPE="i|I|a|A|1" dans <OL>
Permet de changer le type de numérotation :
i
I
a
A
1

chiffres romains minuscules
chiffres romains majuscules
lettres minuscules
lettres majuscules
chiffres arabes (option par défaut)

Voir les attributs de la balise

Ecrire du code Html

i, ii, iii, iv, ...
I, II, III, IV, ...
a, b, c, d, ...
A, B, C, D, ...
1, 2, 3, 4, ...

Sauvegarder html

36
Création de lignes horizontales
<HR

SIZE="s"
WIDTH="w|w%"
ALIGN="LEFT|CENTER|RIGHT"
COLOR="#RRVVBB"
NOSHADE >
SIZE : épaisseur en pixel de la ligne
WIDTH : largeur de la ligne.
Peut s'exprimer en valeur absolue (pixels) ou en valeur relative
(pourcentage de la largeur de la fenêtre)
ALIGN : alignement à gauche|au centre|à droite dans la fenêtre (à
utiliser si la ligne ne fait pas toute la largeur de la fenêtre)

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

37
Création de lignes horizontales
<HR>
Utilisée sans option, cette balise produit une ligne grise ombrée de 1
pixel d'épaisseur faisant toute la largeur de la fenêtre

Attention, options particulières à certains navigateurs !
COLOR="#RRVVBB"
Option valable avec Internet Explorer
Permet de spécifier la couleur de la ligne

NOSHADE
Option valable avec Netscape
Permet de désactiver l'ombrage de la ligne

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

38
Liens hypertextes

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

39
Les noms de fichiers

Les fichiers HTML ont des extensions précises :
.htm, .html, …

Première page d'un site (ou d'un dossier du site)
En général : index.html.
Dans 99% des cas, cela permet d'atteindre le site ou le dossier.

Les fichiers images
Images de qualité photographique : JPEG (extension : .jpg)
Images de type dessin, ayant au maximum 256 couleurs (dont une
éventuellement transparente) ou les images animées : GIF
(extension .gif)

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

40
Les noms de fichier

Tout (ou presque) est fichier !
Fichier HTML, images, sons, vidéos, …

Désignation des fichiers : URL
<protocole>://[user[:password]@]<machine>[:port][/<path>[#label|?liste paramètres>]]

Lien hypertexte
Permet d’associer un document (i.e. fichier) à une zone cliquable

Deux types de liens hypertextes
Absolus : équivalent à une URL, à utiliser lorsque le document appelé
n’est pas situé sur le même site que le document appelant.
Relatifs : URL - <protocole>://[user[:password]@]<machine>[:port]
à utiliser lorsque le document appelé est situé sur le même site que
le document appelant.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

41
URL

Liens hypertextes absolus
Équivalent à une URL

Liens hypertextes relatifs
Utilisés, dans un document, pour référencer un document localisé sur
le même serveur et accessible par le même protocole
Deux types de liens relatifs
par rapport à la racine du serveur Web
par rapport au répertoire du document qui la contient

Exemple
Soit le document
Les URL relatives
et

désignent l’URL absolue

Voir les attributs de la balise

http://www.univ-evry.fr/fichiers/a.html
/fichiers/b.html
b.html

http://www.univ-evry.fr/fichiers/b.html

Ecrire du code Html

Sauvegarder html

42
Les noms de fichiers



www.toto.com

www.toto.com
japelle.html

plus_bas

www.tutu.com











plus_bas

japelle.html

plus_bas_aussi

encore_plus_bas
jerecois.html

http://www.tutu.com/plus_bas/encore
_plus_bas/jerecois.html
Voir les attributs de la balise

encore_plus_bas

jerecois.html

../plus_bas_aussi/encore_plus_bas/
jerecois.html
Ecrire du code Html

Sauvegarder html

43
Les liens externes

<A HREF="url" TARGET="cadre">
texte ou lien vers l'image qui matérialise le lien
</A>
TARGET="cadre"
Permet de spécifier un nom de fenêtre pour l'affichage.
Si cette option est omise, la nouvelle page remplace l'ancienne dans la
fenêtre en cours.
Si elle est utilisée, si le nom de fenêtre n'a jamais été utilisé, une nouvelle
fenêtre s'ouvre, sinon le contenu de la fenêtre portant ce nom est modifié.
Le lien aura la couleur spécifiée dans l'option LINK du BODY, sauf si le texte
matérialisant le lien est inclus dans une balise
<FONT COLOR> (incluse elle-même dans la balise <A HREF>).

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

44
Les liens internes

Lien interne
Lien qui amène à un endroit spécifique de la page HTML en cours.

Deux étapes :
Mise en place d'une étiquette à l'emplacement à atteindre avec la
balise : <A NAME="nom de l'étiquette">
Appel du lien de manière classique, mais où l'adresse de la page à
atteindre est remplacée par le nom de l'étiquette précédée d'un #
<A HREF="[URL]#nom de l'étiquette"> … </A>

Remarque
Possibilité d'atteindre un emplacement spécifique d'une page
différente de celle où a lieu l'appel de lien en combinant les liens
externes et internes (en faisant suivre l’URL par un # puis le nom de
l'étiquette).

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

45
Les liens internes

Exemples
...

http://www.toto.com/ExempleLienInterne.html

<A NAME="p1">
Le sujet abord&eacute; ici est ...
...
<A NAME="p2">
Contrairement à ce qui était mentionné au
<A HREF="#p1">paragraphe 1</A>

http://www.tutu.com/AccesExterne.html
On peut aussi acc&eacute;der au
<A NAME="http://www.toto.com/ExempleLienInterne.html#p1">
paragraphe 1</A> d’un autre document.
Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

46
Liens hypertextes
dans les images

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

47
Les images

<IMG

SRC="url"
WIDTH="w|w%"
HEIGHT="h|h%"
ALT="texte"
BORDER="b">

SRC="url"
Adresse du fichier image à insérer.

WIDTH="w|w%"
Largeur de l'image affichée.
Si cette option n'est pas spécifiée, l'image est affichée à sa taille
réelle.
On indique soit la valeur en pixel, soit en pourcentage de la taille
originale de l'image
Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

48
Les images

HEIGHT="h|h%"
Hauteur de l'image affichée (mêmes remarques que pour WIDTH).
NB : quand une seule des deux options WIDTH ou HEIGHT est
spécifiée, l'autre est automatiquement calculée en proportion.
NB2 : toujours indiquer au moins un des deux paramètres pour
accélérer l'affichage

ALT="texte"
Texte apparaissant dans une info-bulle quand la souris est
positionnée pendant 1 à 2 secondes sur l'image.

BORDER="b"
BORDER : taille en pixel de la bordure autour de l'image.
Si l'image est un lien et qu'on ne veut pas voir de bordure de la
couleur spécifiée dans l’option LINK du BODY, mettre 0.
Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

49
Liens hypertextes dans les images
Principes
Association d’une carte à une image
<IMG SRC="UrlImage" USEMAP="[URL]#nom de la carte">

Image-map
Carte qui référence des zones d’une image, ainsi que les liens
déclenchés sur chacune de ces parties d’images.
Définition d’une carte

<MAP NAME="nom de la carte">
<AREA …>
[<AREA …>]
</MAP>

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

50
< AREA … >
<AREA

SHAPE=" rect | circle | poly | default "
COORDS="x1,y1,x2,y2
| x,y,r
| x1,y1,x2,y2,x3,y3 …"
HREF="Url cible" >
SHAPE=" ... "
rect
circle
poly
default

zone rectangulaire
disque
zone polygonale
zone par défaut,
= toute la partie de l’image non recouverte par une
zone définie.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

51
< AREA … >
COORDS="x1,y1,x2,y2"
Utilisé si SHAPE="rect"
(x1, y1) défini le coin supérieur gauche de la zone rectangulaire,
(x2, y2) défini le coin inférieur droit.

COORDS="x,y,r"
Utilisé si SHAPE="circle"
(x, y) désigne le centre du cercle, r désigne le rayon.

COORDS="x1,y1,x2,y2, ... xn,yn "
Utilisé si SHAPE="poly"
(xi, yi) définissent les point successifs du polygone.
Le polygone est fermé :
(x1, y1) est automatiquement relié à (xn, yn)

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

52
< AREA … >

<MAP NAME="carte_image">
<AREA SHAPE="rect"
COORDS="25,25,75,75"
HREF="rectangle.html">
<AREA SHAPE="circle" COORDS="150,50,25"
HREF="cercle.html">
<AREA SHAPE="poly"
COORDS="200,50,250,75,275,25,250,25"
HREF="polygone.html">
</MAP>

300 pixels

100 pixels

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

53
voir
http://www.codexpert.com/studio/download.htm

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

54
Tableaux

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

55
Les tableaux

3 types d’éléments imbriqués
<TABLE> … </TABLE>
: ouverture et fermeture du tableau
<TR> … </TR>
: ouverture et fermeture de ligne (Row)
<TD> … </TD>
: ouverture et fermeture de cellule (Data)
Remarques
Ne jamais oublier les balises de fermeture
le tableau pourrait être désordonné, voire ne pas s'afficher.
Les tableaux sont imbricables
Les tableaux servent énormément !
Ils servent à la mise en page :
texte en colonne,
création de menus verticaux sur le coté de la fenêtre).
Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

56
Structure générale d'un tableau

(1) le tableau commence par la balise <TABLE>
(2) puis vient la balise <TR> qui débute la première ligne du tableau
(3) puis on trouve une balise <TD> qui ouvre la première cellule de
données
(3 bis) Le texte (ou l'image) contenu dans cette
cellule est tapé et mis en forme
(4) la cellule est fermée par </TD>
Les étapes (3), (3bis) et (4) sont répétées autant de fois qu'il y a de
cellules dans la ligne

(5) puis la ligne est fermée par </TR>
les étapes (2) à (5) sont répétées autant de fois qu'il y a de lignes
dans le tableau

(6) le tableau est terminé par la balise </TABLE>

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

57
<TABLE> ... </TABLE>

<TABLE
WIDTH="w|w%"
BORDER="b"
CELLPADDING="cp"
CELLSPACING="cs">
WIDTH="w|w%"
Largeur du tableau exprimée en pixel ou en pourcentage de la
largeur de la fenêtre (à utiliser avec prudence).

BORDER="b"
Largeur de l'encadrement du tableau et des cellules exprimée en
pixels.
Si une cellule est vide, il n'apparaît pas.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

58
<TABLE> ... </TABLE>

CELLPADDING="cp"
Marge intérieure de chaque cellule (en pixels).

CELLSPACING="cs"
Espacements horizontal et vertical entre les cellules
du tableau

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

59
Les lignes : <TR> … </TR>

<TR

ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"
VALIGN="TOP|MIDDLE|BOTTOM">
ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"
Alignement horizontal du contenu de toutes les cellules de la ligne :
LEFT
CENTER
RIGHT
JUSTIFY

à gauche (attribut par défaut)
au centre
à droite
justifié (à utiliser avec prudence !)

VALIGN="TOP|MIDDLE|BOTTOM">
Alignement vertical du contenu de toutes les cellules de la ligne :
TOP
MIDDLE
BOTTOM

Voir les attributs de la balise

haut de la cellule
centre verticalement (attribut par défaut)
bas de la cellule

Ecrire du code Html

Sauvegarder html

60
Les cellules : <TD> … </TD>

<TD

ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"
VALIGN="TOP|MIDDLE|BOTTOM"
COLSPAN="c"
ROWSPAN="r"
WIDTH="w|w%">
ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"
Alignement horizontal cellule par cellule (cf. <TR> … </TR>).

VALIGN="TOP|MIDDLE|BOTTOM"
Alignement vertical cellule par cellule (cf. <TR> … </TR>).

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

61
Les cellules : <TD> … </TD>

WIDTH="w|w%"
Largeur de la cellule en pixels ou en pourcentage de la largeur du
tableau.
A spécifier une seule fois dans le tableau (ie pour une seule ligne)
car elle détermine la largeur de la colonne dont fait partie la
cellule.
Quand cette option est omise, la largeur des cellules est calculée par
rapport à celle du tableau, aux espacements et la largeur de la
cellule contenant le plus de texte, colonne par colonne).

Remarques
Veiller à avoir le même nombre de cellules pour chaque ligne du
tableau (en fusionner éventuellement).
Si une cellule sur une ligne est vide, y mettre quand même un
espace insécable (&nbsp;)

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

62
Les cellules : <TD> … </TD>

COLSPAN="c"
Nombre de cellules fusionnées à l'horizontal.
Permet de disposer du texte au dessus de plusieurs
colonnes.
Pour que le tableau s'affiche correctement, il faut que ligne
par ligne, le nombre de cellules soit le même. Dans ce
cas où une cellule est une cellule fusionnée (avec un
COLSPAN), elle compte pour autant de cellule que la
valeur du COLSPAN.
ROWSPAN="r"
<TD
idem pour
ROWSPAN=3>
les fusions à la verticale
<TD COLSPAN=2>

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

63
Un exemple de tableau complexe

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

64
FRAME

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

65
Les frames (ou cadres)

Objectif
Permettent d'obtenir une ou plusieurs divisions horizontales et/ou
verticales de la fenêtre du navigateur, et ainsi de disposer
"virtuellement" de plusieurs fenêtres.

Utilisation
Au moins une des divisions est généralement employée pour
afficher un menu de parcours du site.
Utilisables avec tous les navigateurs dont la version > 3.0

Pour créer une page contenant des frames
Définir le découpage (FRAMESET).
Définir le contenu des cadres (pages HTML classiques).
Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

66
<FRAMESET> … </FRAMESET>

<FRAMESET ROWS|COLS="d1[,d2,d3…],*"
BORDER="b"
FRAMEBORDER="YES|NO"
FRAMESPACING="fs">
ROWS|COLS="d1[,d2,d3…],*"
ROWS
COLS

division en lignes (horizontale)
pour une division en colonnes (verticale)

d1[,d2, d3…] : indique la hauteur (largeur) en pixel de chaque ligne
(colonne) ; le séparateur de valeurs est la virgule.
* permet d'attribuer à la dernière ligne (colonne) tout l'espace restant.

Possibilité d'indiquer une valeur en pourcentage de la taille de la page. Attention :
l'affichage dépendra de la taille de la fenêtre du navigateur !

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

67
<FRAMESET> … </FRAMESET>
Désactiver l'affichage des bordures entre les frames
Nécessite d’utiliser les 3 options :
BORDER=0
FRAMEBORDER=NO
FRAMESPACING=0

en même temps de manière à ce que toutes les versions de
Netscape Navigator et Internet Explorer se comportent de manière
identique.

Contenu de <FRAMESET> … </FRAMESET>
Chaque FRAMESET contient autant d’éléments <FRAME>
que d'arguments dans l'option ROWS ou COLS.
Chaque <FRAME> indique quelle page afficher.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

68
Exemple de découpage en frame

Fichier frame.html
<FRAMESET cols="70,424">
<FRAME name="menu" src="Fichier1.html">
<FRAMESET rows="69,487">
<FRAME name="titre" src="Fichier2.html">
<FRAME name="contenu" src="Fichier3.html">
</FRAMESET>
</FRAMESET>

titre

Fichier2.html

menu

Voir les attributs de la balise

Fichier1.html

contenu

Fichier3.html

Ecrire du code Html

Sauvegarder html

69
<FRAME … >

<FRAME NAME="nom de la frame"
SCROLLING="YES|NO|AUTO
FRAMEBORDER="YES|NO"
FRAMESPACING="fs"
MARGINWIDTH="mw"
MARGINHEIGHT="mh">
SRC= "url"

SRC= "url"
NORESIZE
BORDER="b"

URL de la page chargée dans la fenêtre

SCROLLING="YES|NO|AUTO"
Gère l'affichage des ascenseurs
YES : toujours présents
NO : jamais
AUTO : affichés si nécessaire
Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

70
<FRAME … >
NAME="nom de la frame"
Désignation utilisée pour identifier chaque cadre.
Sert à désigner le cadre dans lequel va s’afficher un document pointé
par un lien hypertexte.
Option TARGET (dans un élément A) utilisée avec HREF.
< A TARGET="nom du cadre de destination" HREF="url" >
L’absence de TARGET dans un élément A provoque l ’affichage dans
le cadre qui contient le lien.
Nom de cadre prédéfinis : _parent, _top, _blank, ...

Exemple
< A HREF="lien.html" TARGET="contenu">lien</A>

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

71
<FRAME … >
NORESIZE
Empêche le redimensionnement d’un cadre.

FRAMEBORDER, BORDER et FRAMESPACING
Mêmes fonctions que pour la balise FRAMESET
mais leur action est prioritaire s'ils sont ajoutés à la balise FRAME.

MARGINWIDTH="mw"
Espace vide laissé à gauche du cadre (en pixels).

MARGINHEIGHT="mh"
Espace vide laissé en haut du cadre (en pixels).

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

72
Découpages multiples

Exemple de découpages multiples

Deux façons de faire
Découpages imbriqués dans un seul fichier
Découpages dans plusieurs fichiers
Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

73
Découpage unique imbriqué

<FRAMESET COLS="50%,*" BORDER="2" FRAMEBORDER="YES" FRAMESPACING="2">
<FRAME NAME="1" SRC="1.html" SCROLLING="yes">
<FRAMESET ROWS="33%,33%,*">
<FRAME NAME="2" SRC="2.html" SCROLLING="auto">
<FRAME NAME="3" SRC="3.html" SCROLLING="auto">
<FRAMESET COLS="50%,*">
<FRAME NAME="4" SRC="4.html" SCROLLING="auto">
<FRAME NAME="5" SRC="5.html" SCROLLING="auto">
</FRAMESET>

<FRAMESET>
</FRAMESET>

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

74
Découpages en plusieurs fois

frameset.html
<FRAMESET COLS="50%,*" BORDER="2" FRAMEBORDER="YES" >
<FRAME NAME="1" SRC="f1.html" SCROLLING="yes">
<FRAME NAME="2" SRC="f2.html" >
</FRAMESET>

f2.html

21

1

<FRAMESET ROWS="33%,33%,*">
<FRAME NAME="21" SRC="f21.html">
<FRAME NAME="22" SRC="f22.html">
<FRAME NAME="23" SRC="f23.html">
</FRAMESET>

2
22

f23.html

231 23 232
3

Voir les attributs de la balise

<FRAMESET COLS="50%,*">
<FRAME NAME="231" SRC="4.html" >
<FRAME NAME="232" SRC="5.html" >
</FRAMESET>

Ecrire du code Html

Sauvegarder html

75
Découpage unique vs. découpages en plusieurs fois

Découpage unique
Avantage :

facilite la maintenance car il n'y a qu'un seul
fichier FRAMESET.
Inconvénient :
impossibilité de remettre simultanément à jour
plusieurs cadres.

Intérêt du découpage en plusieurs fois
Avantage :

souplesse de mise à jour des cadres car il est
possible de désigner des cadres isolés ou des
ensembles de cadres.
Inconvénient :
lourd à maintenir.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

76
Définition d’une fenêtre dans une page
<IFRAME NAME="nom de la frame"
SRC= "url"
HEIGTH="h"
WIDTH="w"
ALIGN="left|center|right|justify"
SCROLLING="YES|NO|AUTO"
FRAMEBORDER="YES|NO"
MARGINWIDTH="mw"
MARGINHEIGHT="mh">
NAME="nom de la frame"
Identifiant de la fenêtre pour l'utiliser dans les TARGET

SRC= "url"
URL de la page chargée dans la fenêtre

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

77
Définition d’une fenêtre dans une page
HEIGTH="h"
Hauteur de la fenêtre en pixel

WIDTH="w"
Largeur de la fenêtre en pixel

ALIGN="left|center|right|justify"
Alignement de la fenêtre dans le document qui la contient

SCROLLING, FRAMEBORDER, MARGINWIDTH, MARGINH
EIGHT
Idem que dans FRAME

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

78
Formulaires

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

79
Formulaires
Objectif
Interagir avec l’utilisateur
Permet d'obtenir des réponses de l'utilisateur

Balise
<FORM

METHOD="GET|POST"
ACTION="Programme" >

…

</FORM>

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

80
Formulaires
METHOD / ACTION
Programme = méthode de traitement des informations recueillies dans le
questionnaire.
Dépendant des possibilités offertes par l'hébergeur des pages.
Les valeurs à indiquer pour ces options sont à remplir suivant les indications
de l'hébergeur.

ex : Utilisation de mailto comme programme de traitement
Permet, en général, d’envoyer directement le résultat d'un formulaire par
email.
Syntaxe : <FORM
METHOD="POST"
ACTION="mailto:toto@toto.com"
ENCTYPE="text/plain">

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

81
<INPUT … >
Rôle
Permet de définir les différents types de champ d’un formulaire :
zone de saisie,
case à cocher,
bouton radio,
bouton de confirmation,
bouton de remise à zéro des champs.

Différentes syntaxes
Le contenu des attributs est dépendant du type de champ.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

82
<INPUT … >
<INPUT NAME="nom de la zone"
TYPE="TEXT
| CHECKBOX
| RADIO
| SUBMIT
| IMAGE
|RESET"
VALUE="valeur"
CHECKED
SRC="url"
SIZE="taille"
MAXLENGTH="nb" >

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

83
<INPUT … >
VALUE="valeur"
valeur correspond au :
• au contenu initial de la zone de saisie (si TYPE="TEXT")
• au libellé du bouton (si TYPE="SUBMIT" ou "RESET")
• à la valeur retournée (si TYPE="CHECKBOX" ou "RADIO")

CHECKED
Dans le cas d’un bouton à cocher, indique qu’il apparaît coché par
défaut

SRC="url"
Utilisé avec TYPE="IMAGE"
Adresse d’une image à afficher, celle-ci jouant le rôle de bouton de
validation

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

84
<INPUT … >
SIZE="taille"
Utilisé avec TYPE="TEXT"
Correspond à la taille de la zone de saisie.

MAXLENGTH="nb"
Utilisé avec TYPE="TEXT"
Nombre maximum de caractères qu’il est possible de saisir.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

85
<INPUT TYPE="TEXT" … >
Exemple
<INPUT TYPE="TEXT"
NAME="case_texte_1"
VALUE="Texte par défaut"
SIZE="20"
MAXLENGTH="80" >

Texte par défaut

Principes
La case fait 20 caractères de large.
Il est possible d’y saisir 80 caractères au maximum.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

86
<HTML>
<HEAD><TITLE>Exemple de fichier HTML</TITLE></HEAD>
<SCRIPT>
</SCRIPT>
<BODY>
<INPUTTYPE="TEXT"
NAME="case_texte_1"
VALUE="Texte par défaut"
SIZE="20"
MAXLENGTH="80" >
<INPUTTYPE="TEXT"
NAME="case_texte_2"
VALUE=""
SIZE="4"
MAXLENGTH="4" >
</BODY>
</HTML>
Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

87
<INPUT TYPE="CHECKBOX" … >
Exemple
Choix 1&nbsp;<INPUT TYPE="CHECKBOX" NAME="case_1"
VALUE="1" CHECKED><BR>
Choix 2&nbsp;<INPUT TYPE="CHECKBOX" NAME="case_2"
VALUE="1"><BR>
Choix 3&nbsp;<INPUT TYPE="CHECKBOX" NAME="case_3"
VALUE="1"><BR>
Choix 4&nbsp;<INPUT TYPE="CHECKBOX" NAME="case_4"
VALUE="1">

Principes
Plusieurs cases peuvent avoir l'option CHECKED
Les 4 cases n'ont pas le même nom
VALUE indique la valeur qui sera retournée en fonction des la(les)
cases cochées.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

88
Peux être décoché

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

89
<INPUT TYPE="RADIO" … >
Exemple
Choix 1&nbsp;<INPUT TYPE="RADIO" NAME="BoutonRadio"
VALUE="1" CHECKED><BR>
Choix 2&nbsp;<INPUT TYPE="RADIO" NAME="BoutonRadio"
VALUE="2"><BR>
Choix 3&nbsp;<INPUT TYPE="RADIO" NAME="BoutonRadio"
VALUE="3"><BR>
Choix 4&nbsp;<INPUT TYPE="RADIO" NAME="BoutonRadio"
VALUE="4">

Principes
Une seule case peut avoir l'option CHECKED
Les 4 cases ont le même nom
VALUE indique la valeur qui sera retournée en fonction de la
case cochée.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

90
Ne peux être décoché

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

91
Bouton de validation et de mise à zéro

<INPUT NAME="validation" TYPE="SUBMIT" VALUE="Valider">

Bouton de validation avec image :
<INPUT TYPE="IMAGE"

NAME="validation"
SRC="fluide.jpg">

(si l'image fluide.jpg est dans le même dossier que la page).

<INPUT NAME="Effacement" TYPE="RESET" VALUE="Effacer">

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

92
Liste de choix
<SELECT
NAME="nom de la liste" SIZE="1|s">
<OPTION … >texte de la ligne 1</OPTION>
...
</SELECT>
SIZE="1|s"
SIZE="1"
SIZE "1"

liste déroulante
liste défilante.

<OPTION … >texte de la ligne</OPTION>
3 attributs possibles : DISABLED, SELECTED et VALUE
(même rôle que pour les boutons radios)

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

93
Liste de choix
Exemple de liste défilante

<SELECT NAME="liste1"
<OPTION>Ligne
<OPTION>Ligne
<OPTION>Ligne
<OPTION>Ligne
<OPTION>Ligne
<OPTION>Ligne
</SELECT>

Voir les attributs de la balise

SIZE="3">
1</OPTION>
2</OPTION>
3</OPTION>
4</OPTION>
5</OPTION>
6</OPTION>

Ecrire du code Html

Sauvegarder html

94
Liste de choix
Exemple de liste déroulante

<SELECT NAME="liste1"
<OPTION>Ligne
<OPTION>Ligne
<OPTION>Ligne
</SELECT>

Voir les attributs de la balise

SIZE="1">
1</OPTION>
2</OPTION>
3</OPTION>

Ecrire du code Html

Sauvegarder html

95
Liste de choix
<HTML>
Exemple de liste déroulante
<HEAD><TITLE>Exemple de fichier HTML</TITLE></HEAD>
<SCRIPT>
</SCRIPT>
<BODY>
<SELECT NAME="liste1" SIZE="1">
<OPTION>Ligne 1</OPTION>
<OPTION>Ligne 2</OPTION>
<OPTION>Ligne 3</OPTION>
</SELECT>
<SELECT NAME="liste2" SIZE="4">
<OPTION>Ligne 1</OPTION>
<OPTION>Ligne 2</OPTION>
<OPTION>Ligne 3</OPTION>
</SELECT>
</BODY>
</HTML>
Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

96
< TEXTAREA … > … </ TEXTAREA ...>
<TEXTAREA

NAME="nom de la zone"
ROWS="r"
COLS="c">

Rôle
Permet de définir une zone de texte pour saisir des données de taille
plus importante que dans une case de texte.

ROWS="r"
Taille de la zone de saisie en nombre de lignes

COLS="c"
Taille de la zone de saisie en nombre de colonnes.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

97
Et quoi d’autre ?

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

98
Équations mathématiques

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

99
Image de positionnement
Qu’est-ce ?
Image transparente de 1 pixel de large x 1 pixel de haut,
déformé avec les attributs HEIGHT et WIDTH de la balise IMG.

Rôle
Permet le positionnement d’une information à un endroit exact de la
fenêtre.
Permet, par exemple,
de décaler du texte par rapport au bord de la page
définir des marges
de fixer l’espacement vertical ou horizontal

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

100
Commentaire
<!-- commentaire -->
Rôle
Permettre d’ajouter des informations dans les documents HTML sans
qu’elles soient affichées à l’écran.
Utilisé par des outils de création de page Web pour laisser une
signature.
Utilisé pour encapsuler du code PHP, javascript, etc.

Attention !
Ne jamais oublier la taille des pages.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

101
Mailto
<A HREF="mailto:toto@toto.com?subject=bla-bla-bla...">
…
</A>

Rôle
Permet de déclencher l’ouverture d’une nouvelle fenêtre pour l’envoi
d’un courrier électronique.
L’ouverture se réalise lorsqu’on clique sur le lien compris dans
l’élément A.
Le destinataire est toto@toto.com
Le sujet est bla-bla-bla...

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

102
HTML 4

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

103
HTML 4
Ne pas confondre HTML dynamique et HTML 4
HTML dynamique :
nom générique des versions spécifiques de Microsoft et Netscape pour
faire évoluer HTML dans le domaine de l'animation des pages.
Chacun, en tenant bien évidemment compte de sa propre
vision (et de ses propres développements).

HTML 4 :
norme officielle d'évolution de HTML
comprend de nouvelles instructions pour la mise en page de document
HTML

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

104
Feuille de style
Qu’est-ce ?
= Ensemble de mises en forme génériques (position des
éléments, aspect des textes à afficher, …) associés à des balises.
Norme actuelle : CSS (Cascading Style Sheets)
Peut être enregistrée dans un fichier séparé de la page Web,
et ainsi être utilisée par plusieurs pages.
Déclaration de la feuille de style ou de son utilisation dans l’entête ( <
HEAD > … </ HEAD > )

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

105
Feuille de style

Syntaxe
Balise {propriété: valeur [; propriété: valeur …]*}

Exemples
H1
{font-size: 20pt; font-weight: bold ; color: red}
H2
{font-size: 16pt; font-weight: bold ; color: #080000}
P {margin-left: -20px; margin-right: -20px; margin-top: 30px}
BODY
{background: URL(http://my.server.com/pictures/back.gif);
text-indent: 2cm}

Trois possibilités pour les définir :
Dans la page elle-même :

- localement dans un élément
- globalement pour la page

Dans un fichier séparé.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

106
Définition de styles

Définition locale
<P STYLE="margin-left: 1in; margin-right: 1in; color: #0000FF">

Définition globale (dans l’entête < HEAD > … </
HEAD >)
<STYLE type="text/css">
P {font-size: 14pt; color: red ; text-align: center}
H1.red {color: #FF0000; font-size: 20pt}
H1.blue {color: #0000FF; font-size:20pt}

</STYLE>

Utilisation
<H1 CLASS=red>This will be red< /H1>
<P> … </P>
<H1 CLASS=blue>This will be blue< /H1>

Voir les attributs de la balise

Possibilité de définir
des sous-classes

Ecrire du code Html

Sauvegarder html

107
Définition de styles

Définition externe
<LINK REL=STYLESHEET HREF="...URL…
TYPE="text/css" >
L’URL référence un fichier qui contient les définitions des styles.

Utilisation
idem que précédemment

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

108
Définition de styles : positionnement
Absolu, par rapport à la marge
Exemple : {position:absolute; left:40px;top:75px;}
positionnera le texte :
à 40 pixels du bord gauche, et
à 75 pixels du haut de la fenêtre.

Ce type d'instruction permet de superposer des textes

Relatif, par rapport au dernier élément affiché
Exemple : {margin-top:20px; margin-left:300px;}
positionnera le texte :
20 pixels plus bas et
300 pixels plus à gauche

que le dernier texte affiché.

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

109
Définition de styles : polices
font-size : taille de la police.
Valeurs possibles :
xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller
ou une taille exprimée en pixels (px), en points (pt)

font-weight : graisse
Valeurs possibles :
normal, bold, bolder, lighter,
ou une valeur numérique comprise entre 100 et 900

font-style : style d'écriture
Valeurs possibles :
normal, italic, oblique

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

110
Définition de styles : polices
font-family : police
Valeurs possibles :
serif, sans-serif, cursive, fantasy, monospace
ou police précise

color : couleur
Valeurs possibles :
#rrvvbb (codage classique)
valeur symbolique

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

111
Définition de styles : divers
background-color : couleur du fond
Valeurs possibles :
#rrvvbb (codage classique)
valeur symbolique

background-image : URL | none
URL de l’image de fond

etc…

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

112
CSS auto
http://www.elzedo.com/?page=css
Spécification de CSS
http://dicolive.media-box.net/docCSS/css.php?orderByType=1
http://www.w3schools.com/

http://css.alsacreations.com/
code de couleurs
http://www.docmemo.com/internetwebmasters/codescouleurs.
php
Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

113
Pour la beauté de la page
http://www.brand-advocate.com/

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

114
HTML 5

Voir les attributs de la balise

Ecrire du code Html

Sauvegarder html

115

Contenu connexe

Tendances

technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2Benoît Simard
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francaisVlad Posea
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3G²FOSS ENIT
 
Alimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEBAlimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEBGaspar Daniel
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3JDerrien
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTMLNeovov
 
IPW 2eme course - HTML
IPW 2eme course - HTMLIPW 2eme course - HTML
IPW 2eme course - HTMLVlad Posea
 
Les fils RSS : l’information au bout des doigts
Les fils RSS : l’information au bout des doigtsLes fils RSS : l’information au bout des doigts
Les fils RSS : l’information au bout des doigtsAref Jdey
 
IPW Course 3 CSS
IPW Course 3 CSSIPW Course 3 CSS
IPW Course 3 CSSVlad Posea
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5jverrecchia
 

Tendances (20)

Formation web
Formation webFormation web
Formation web
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Css
CssCss
Css
 
Introduction à XML
Introduction à XMLIntroduction à XML
Introduction à XML
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3
 
Html et xhtml
Html et xhtmlHtml et xhtml
Html et xhtml
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
Alimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEBAlimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEB
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
HTML
HTMLHTML
HTML
 
Css+html
Css+htmlCss+html
Css+html
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTML
 
IPW 2eme course - HTML
IPW 2eme course - HTMLIPW 2eme course - HTML
IPW 2eme course - HTML
 
Les fils RSS : l’information au bout des doigts
Les fils RSS : l’information au bout des doigtsLes fils RSS : l’information au bout des doigts
Les fils RSS : l’information au bout des doigts
 
IPW Course 3 CSS
IPW Course 3 CSSIPW Course 3 CSS
IPW Course 3 CSS
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 

En vedette

Présentation html5
Présentation html5Présentation html5
Présentation html5Kénium
 
Catalogue Idwatt 2016
Catalogue Idwatt 2016Catalogue Idwatt 2016
Catalogue Idwatt 2016SOREA
 
Présentation de MEODEX 2015 - Vos modules LED sur mesure
Présentation de MEODEX 2015 - Vos modules LED sur mesurePrésentation de MEODEX 2015 - Vos modules LED sur mesure
Présentation de MEODEX 2015 - Vos modules LED sur mesureMarketing and Sales MEODEX
 
Lucibel Corporate presentation oct2011
Lucibel Corporate presentation oct2011Lucibel Corporate presentation oct2011
Lucibel Corporate presentation oct2011Giorgio Anselmetti
 
Le référencement pour les developpeurs
Le référencement pour les developpeursLe référencement pour les developpeurs
Le référencement pour les developpeursrelevant_traffic_france
 
Superivision Aéroportuaire
Superivision AéroportuaireSuperivision Aéroportuaire
Superivision AéroportuaireKarim Hassaouan
 
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHSN. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHSOpenEdition
 
Exploration et visualisation de fichiers XML avec BaseX
Exploration et visualisation de fichiers XML avec BaseXExploration et visualisation de fichiers XML avec BaseX
Exploration et visualisation de fichiers XML avec BaseXEmmanuelle Morlock
 
Promenades et randonnées autour de Sainte-Maxime
Promenades et randonnées autour de  Sainte-MaximePromenades et randonnées autour de  Sainte-Maxime
Promenades et randonnées autour de Sainte-MaximeSainte-Maxime Tourisme
 
Pepsi Kick
Pepsi KickPepsi Kick
Pepsi KickM51
 
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2jicarbonelli
 
LED lighting - Iluminação LED - Dualcom
LED lighting - Iluminação LED - DualcomLED lighting - Iluminação LED - Dualcom
LED lighting - Iluminação LED - Dualcomdualcom
 
PORTIFÓLIO_LF BUILDING_LINKEDIN
PORTIFÓLIO_LF BUILDING_LINKEDINPORTIFÓLIO_LF BUILDING_LINKEDIN
PORTIFÓLIO_LF BUILDING_LINKEDINLuciano Fonseca
 
French www.lumin-lighting.com
French www.lumin-lighting.comFrench www.lumin-lighting.com
French www.lumin-lighting.comled panel
 

En vedette (18)

Présentation html5
Présentation html5Présentation html5
Présentation html5
 
Catalogue Idwatt 2016
Catalogue Idwatt 2016Catalogue Idwatt 2016
Catalogue Idwatt 2016
 
Présentation de MEODEX 2015 - Vos modules LED sur mesure
Présentation de MEODEX 2015 - Vos modules LED sur mesurePrésentation de MEODEX 2015 - Vos modules LED sur mesure
Présentation de MEODEX 2015 - Vos modules LED sur mesure
 
Lucibel Corporate presentation oct2011
Lucibel Corporate presentation oct2011Lucibel Corporate presentation oct2011
Lucibel Corporate presentation oct2011
 
Le référencement pour les developpeurs
Le référencement pour les developpeursLe référencement pour les developpeurs
Le référencement pour les developpeurs
 
Superivision Aéroportuaire
Superivision AéroportuaireSuperivision Aéroportuaire
Superivision Aéroportuaire
 
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHSN. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
 
Exploration et visualisation de fichiers XML avec BaseX
Exploration et visualisation de fichiers XML avec BaseXExploration et visualisation de fichiers XML avec BaseX
Exploration et visualisation de fichiers XML avec BaseX
 
Promenades et randonnées autour de Sainte-Maxime
Promenades et randonnées autour de  Sainte-MaximePromenades et randonnées autour de  Sainte-Maxime
Promenades et randonnées autour de Sainte-Maxime
 
Spot Mr16 Led lamp
Spot Mr16 Led lampSpot Mr16 Led lamp
Spot Mr16 Led lamp
 
Pepsi Kick
Pepsi KickPepsi Kick
Pepsi Kick
 
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
 
Catálogo Neoflash Iluminação 2016
Catálogo Neoflash Iluminação 2016Catálogo Neoflash Iluminação 2016
Catálogo Neoflash Iluminação 2016
 
Catálogo Holle Iluminação 2016
Catálogo Holle Iluminação 2016Catálogo Holle Iluminação 2016
Catálogo Holle Iluminação 2016
 
LED lighting - Iluminação LED - Dualcom
LED lighting - Iluminação LED - DualcomLED lighting - Iluminação LED - Dualcom
LED lighting - Iluminação LED - Dualcom
 
PORTIFÓLIO_LF BUILDING_LINKEDIN
PORTIFÓLIO_LF BUILDING_LINKEDINPORTIFÓLIO_LF BUILDING_LINKEDIN
PORTIFÓLIO_LF BUILDING_LINKEDIN
 
Leds
LedsLeds
Leds
 
French www.lumin-lighting.com
French www.lumin-lighting.comFrench www.lumin-lighting.com
French www.lumin-lighting.com
 

Similaire à Html

Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09Claude Coulombe
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf4gnzggpfdw
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_baseskitsformation
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxBrahimKarimi
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du WebPatrick Vincent
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxtanokouakouludovic
 
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar
Cours Introduction a la programmation Web ISI Ettaieb AbdessattarCours Introduction a la programmation Web ISI Ettaieb Abdessattar
Cours Introduction a la programmation Web ISI Ettaieb AbdessattarAbdessattar Ettaieb
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Claude Coulombe
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersFrédéric Simonet
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTMLYaya Im
 

Similaire à Html (20)

Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
Mmi Web Design P2
Mmi Web Design P2Mmi Web Design P2
Mmi Web Design P2
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
 
MMI Web Design P2
MMI Web Design P2MMI Web Design P2
MMI Web Design P2
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
les balises HTML5.pdf
les balises HTML5.pdfles balises HTML5.pdf
les balises HTML5.pdf
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du Web
 
HTML basics
HTML basics HTML basics
HTML basics
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
cours Php
cours Phpcours Php
cours Php
 
Introduction à XML
Introduction à XMLIntroduction à XML
Introduction à XML
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
 
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar
Cours Introduction a la programmation Web ISI Ettaieb AbdessattarCours Introduction a la programmation Web ISI Ettaieb Abdessattar
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
 

Html

  • 1. HTML merci à Emmanuel Nauer Voir les attributs de la balise Ecrire du code Html Sauvegarder html 1
  • 2. HTML : Exemple à suivre <HTML> <HEAD> <TITLE>Exemple de fichier HTML</TITLE> </HEAD> <BODY> <H1>Exemple de fichier HTML</H1> <P>Ceci est un exemple de fichier <A HREF="http://www.w3c.org/HTML">HTML</A> </P> Un fichier HTML peut contenir : <UL> <LI>le texte destin &eacute; &agrave; &ecirc;tre lu; <LI>des indications de formatage : <OL> <LI> caract&egrave;s <B>gras</B>, <I>italiques</I>, ... <LI> niveaux de sections, <LI> listes, ... </OL> <LI>des liens <A HREF="essai.html">hypertextes</A> (ancre + URL) ; <LI>mon université <IMG SRC="http://www.univ-evry.fr" ALIGN=middle> </UL> </BODY> </HTML> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 2
  • 3. SGML Qu’est-ce ? Standard Generalized Markup Language Langage permettant de définir des types de documents structurés méta-langage pour construire des langages de balisage Utilisation d’un principe de balisage logique Objectifs Méthode normalisée pour représenter un document Indépendant des systèmes de saisies et de traitements Indépendant de la forme physique finale Voir les attributs de la balise Ecrire du code Html Sauvegarder html 3
  • 4. SGML : un exemple Balise ouvrante Contenu textuel <Formation> <Intitulé> IUP IHM 1</Intitulé> <Intervenants> <Enseignant label="1">G. Michel</Enseignant> <Enseignant label="2">E. Nauer</Enseignant> ... </Intervenants> Couple (attribut,valeur) <Contenu> <Cours id="1" intervenant="2"> <Titre>Internet</Titre> <VolumeHoraire>40</VolumeHoraire> </Cours> ... </Contenu> Élément </Formation> Balise fermante Voir les attributs de la balise Ecrire du code Html Sauvegarder html 4
  • 5. Document Type Definition (DTD) Composition d’un élément Élément optionnel <! ELEMENT <! ELEMENT <! ELEMENT Formation Intitulé Intervenants (Intitulé, Intervenants?, Contenu) > #PCDATA > Enseignant* > <! ELEMENT <! ATTLIST Enseignant Enseignant #PCDATA > label <! ELEMENT Contenu Cours+ > <! ELEMENT <! ATTLIST Cours Cours (Titre, VolumeHoraire) > id ID #IMPLIED intervenant IDREFS #REQUIRED> <! ELEMENT <! ELEMENT Titre VolumeHoraire #PCDATA > #PCDATA > ID Élément répété (O,N) #IMPLIED > Élément répété (1,N) Attribut(s) d’un élément Type atomique (chaîne de caractères) Voir les attributs de la balise Ecrire du code Html Sauvegarder html 5
  • 6. HTML vs. SGML Intérêt de SGML SGML permet – via la DTD – de définir : l’ensemble des balises pour identifier les éléments d’un document, et les règles formelles qui décrivent sa structure Positionnement de HTML par rapport à SGML HTML est une classe de document SGML HTML est une DTD SGML Chaque version de HTML = une DTD différente Versions actuellement utilisées HTML version 3.2 HTML version 4.0 Voir les attributs de la balise Ecrire du code Html Sauvegarder html 6
  • 7. HTML Qu’est-ce ? Langage de définition de documents sur le Web Utilise le principe de balisage introduit dans SGML : <balise [liste d’attributs]>…contenu...</balise> pour décrire des documents : textuels hypertextes multimédias … Le balisage indique comment interpréter le contenu d’un élément Voir les attributs de la balise Ecrire du code Html Sauvegarder html 7
  • 8. Document HTML Voir les attributs de la balise Ecrire du code Html Sauvegarder html 8
  • 9. HTML : Exemple Exemple de fichier HTML Ceci est un exemple de fichier HTML Un fichier HTML peut contenir : le texte destiné à être lu; des indications de formatage : 1. caractères gras, italiques, … 2. niveaux de sections, 3. listes, … des liens hypertextes (ancre + URL) des incrustations d'images Voir les attributs de la balise Ecrire du code Html Sauvegarder html 9
  • 10. HTML : Exemple <HTML> <HEAD> <TITLE>Exemple de fichier HTML</TITLE> </HEAD> <BODY> <H1>Exemple de fichier HTML</H1> <P>Ceci est un exemple de fichier <HREF="http://www.w3c.org/HTML">HTML</A> </P> Un fichier HTML peut contenir : <UL> <LI>le texte destin &eacute; &agrave; &ecirc;tre lu; <LI>des indications de formatage : <OL> <LI> caract&egrave;s <B>gras</B>, <I>italiques</I>, ... <LI> niveaux de sections, <LI> listes, ... </OL> <LI>des liens <A HREF="essai.html">hypertextes</A> (ancre + URL) ; <LI>mon université <IMG SRC="http://www.univ-evry.fr" ALIGN=middle> </UL> </BODY> </HTML> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 10
  • 11. HTML : Evolution HTML 1.0 Texte de base, images, liens hypertextes HTML 2.0 Formulaires de saisie HTML 3.2 Justification (gauche, centre, droite) Tableaux Équations mathématiques HTML 4.0 Feuilles de style Voir les attributs de la balise Figures Imagemap … Ecrire du code Html Sauvegarder html 11
  • 12. Conseils & conventions Fichier HTML = fichier ASCII Si il est tapé avec un traitement de texte (ex : Word), il faut l'enregistrer en texte seul. Document HTML = document échangé sur Internet Penser à la taille : du fichier HTML ! (plus il est gros, plus cela prend de temps de transfert) des éléments présents dans le fichier (images, sons, vidéos, …) Lisibilité (pour faciliter la maintenance) Indenter les lignes Balises HTML en majuscules pour mieux les distinguer du corps du texte. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 12
  • 13. HTML : Exemple à ne pas suivre <html><head><title>Exemple de fichier HTML</title></head> <body><h1>Exemple de fichier HTML</h1> <p>Ceci est un exemple de fichier <a href="http://www.w3c.org/HTML">HTML</a></p> Un fichier HTML peut contenir : <ul> <li>le texte destin &eacute; &agrave; &ecirc;tre lu; <li>des indications de formatage : <ol> <li> caract&egrave;s <b>gras</b>, <i>italiques</i>, ... <li> niveaux de sections, <li> listes, ... </ol> <li>des liens <A HREF="essai.html">hypertextes</a> (ancre + URL) ; <li>des incrustations d'images <img src="http://www.univ-metz.fr/ulogo.gif" align=middle> </ul> </body> </html> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 13
  • 14. Structures principales d’un document HTML Document HTML <HTML> Entête <HEAD> <TITLE>Exemple de document HTML</TITLE> </HEAD> Corps <BODY> <H1>Mon 1er document HTML</H1> <P> Ceci est un document HTML avec un lien hypertexte sur mon <A HREF="http://www.univ-evry.fr/">Universit&eacute;</A>. </P> </BODY> </HTML> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 14
  • 15. Entête Voir les attributs de la balise Ecrire du code Html Sauvegarder html 15
  • 16. Entête : <HEAD> … </HEAD> Position en début de document (après près la balise <HTML> et avant la balise <BODY>) Rôle Fournir des informations au sujet du document Contenu <TITLE>…</TITLE> Titre de la fenêtre dans laquelle la page s'affiche <META> Différentes informations sur le document ou pour la gestion de celui-ci Voir les attributs de la balise Ecrire du code Html Sauvegarder html 16
  • 17. Ecrire mon premier code Cliquer sur ECRIRE CODE HTML Voir les attributs de la balise Ecrire du code Html Sauvegarder html 17
  • 18. Entête : <META … > <META NAME="..." CONTENT="..."> Permet de spécifier des méta-données sous la forme de couple attribut-valeur (NAME=CONTENT) Ces méta-données peuvent être exploitées, par exemple, par les moteurs de recherche pour effectuer des recherches sur le contenu effectif du document Exemple <META NAME="author" CONTENT=« bob synclar"> <META NAME="keywords" CONTENT=« synclar, page, personnelle, homepage, informatique"> <META NAME="description" CONTENT="Page personnelle de bob synclar"> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 18
  • 19. Entête : <META … > <META HTTP-EQUIV="…" CONTENT="..."> Permet de donner des instructions pour la gestion du document Exemples <META HTTP_EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> permet de spécifier le type de contenu : Type de document Codage des caractères <META HTTP-EQUIV="Content-language" CONTENT="fr"> permet d’indiquer la langue du contenu du document Voir les attributs de la balise Ecrire du code Html Sauvegarder html 19
  • 20. Entête : <META … > Exemples (suite) <META HTTP-EQUIV="refresh" CONTENT="Délai;url=AdressePage"> permet de passer automatiquement à une autre page après un certain délai : Délai = temps (en seconde) avant l’appel d’une autre page AdressePage = adresse de la page à charger Voir les attributs de la balise Ecrire du code Html Sauvegarder html 20
  • 21. Corps de document Voir les attributs de la balise Ecrire du code Html Sauvegarder html 21
  • 22. Corps du document : <BODY> ... </BODY> Position placé immédiatement après la balise </HEAD> Rôle Délimiter le corps du document Permet de définir l'apparence du fond de l'écran et la couleur des éléments textuels Remarques – 1 seule balise <BODY> par page SAUF pour les pages comprenant des frames – La balise peut s'employer seule ou avec des options – </BODY> est placé immédiatement avant la balise </HTML> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 22
  • 23. Les options du BODY <BODY BGCOLOR="#RRVVBB" LINK="#RRVVBB" TEXT="#RRVVBB" BACKGROUND= "AdresseImage" VLINK="#RRVVBB" ALINK="#RRVVBB"> BGCOLOR : couleur de fond de la fenêtre BACKGROUND : image de fond (répétée sous forme de mosaïque) TEXT : couleur du texte ordinaire * LINK : couleur du texte/de la bordure d'une image qui est un lien * VLINK : couleur du texte/de la bordure d'une image qui est un lien amenant sur une page déjà vue * ALINK : couleur prise par un lien tant qu'on clique dessus (peu utilisé) * = si omis, utilisation des couleurs standards (définies dans les préférences utilisateur) Voir les attributs de la balise Ecrire du code Html Sauvegarder html 23
  • 24. Voir les balises de body Cliquer sur les attributs de la balise Voir les attributs de la balise Ecrire du code Html Sauvegarder html 24
  • 25. Texte Affichage écran Tout texte tapé hors d'une balise est considéré comme du texte et apparaîtra de ce fait à l'écran Mise en forme à 2 niveaux Caractères Paragraphes Codage de caractères Utilisation d’un système de codage qui permette un affichage universel quelque soit la langue de l'ordinateur sur lequel les pages sont lues. Spécifiques à certaines langues (et notamment au français) Voir les attributs de la balise Ecrire du code Html Sauvegarder html 25
  • 26. Le codage des caractères spéciaux De la forme : &entité; &nbsp; Espace insécable &brvbar; | &plusmn; ± &pound; £ &yen; ¥ &Oslash; Ø &deg; ° &copy; &reg; &sup2; 2 &sup3; 3 &amp; & &frac14; ¼ &frac12; ½ &frac34; ¾ &agrave; à &Agrave À &oelig; œ &eacute; é &Eacute; É &euml; ë &icirc; î &Icirc; Î &ccedil; ç &quot; " &szlig; ß &ntilde; ñ &lt; < &gt; > &micro; µ Voir les attributs de la balise Ecrire du code Html Sauvegarder html 26
  • 27. Mise en forme des caractères Les styles Gras : Italique : Souligné : <B> … </B> <I> ... </I> <U> … </U> Taille de la police par défaut Possibilité de fixer la taille de police d’une page web <BASEFONT SIZE="taille"> (avec 1 taille 7) Si cette balise n'est pas utilisée, la taille par défaut des caractères est fixée à 3. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 27
  • 28. Mise en forme des caractères Spécification d’une police locale <FONT FACE="police1[,police2,…] SIZE="s|+s|-s" COLOR="#RRVVBB"> ... </FONT> FACE : la première police installée est utilisée. Ne proposer que des polices dont on est sûr qu'elles sont disponibles sur l'ordinateur de consultation : Arial/Helvetica Times New Roman/Times SIZE : taille de la police 1 … 7 (taille absolue) +1, +2... (taille relative par rapport à la valeur par défaut) Voir les attributs de la balise Ecrire du code Html Sauvegarder html 28
  • 29. Mise en forme des caractères Remarque sur les balises <FONT> Elles peuvent être imbriquées : <FONT SIZE="..."> … <FONT SIZE="... "> ... </FONT> ... </FONT> Permet de changer des paramètres ponctuellement (couleur ou taille) Voir les attributs de la balise Ecrire du code Html Sauvegarder html 29
  • 30. Mise en forme des paragraphes <CENTER> … </CENTER> Centre les éléments inclus entre la balise ouvrante et la balise fermante <JUSTIFY> … </JUSTIFY> Justifie les éléments inclus entre la balise ouvrante et la balise fermante À utiliser avec prudence ! <BR> Pas de balise fermante ! Retour à la ligne <BR><BR> : 2 retours à la ligne = 1ligne d'espacement Voir les attributs de la balise Ecrire du code Html Sauvegarder html 30
  • 31. Mise en forme des paragraphes <P ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"> … </P> Alignement des paragraphes situés <P ALIGN=…> et </P> Pour passer (ou sauter) une ligne, utiliser des <BR> Possibilité d’utiliser une balise ouvrante SANS balise fermante équivaut à <P> <BR><BR> Autre équivalence : équivaut à <P ALIGN="CENTER"> ... </P> <CENTER> </CENTER> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 31
  • 32. Mise en forme des paragraphes <PRE> … </PRE> Affichage sans mise en page Saut de ligne = saut de ligne Espace = espace insécable <PRE> / / / / </PRE> Voir les attributs de la balise / / / / Ecrire du code Html Sauvegarder html 32
  • 33. Mise en forme de titres <H1> … </H1>, <H2> … </H2>, <H3> … </H3>, <H4> … </H4>, <H5> … </H5>, <H6> … </H6> Titres de différents niveaux <H1> : titre de 1er niveau, affichage le plus grand <H2> : un peu plus petit … : de plus en plus petit, jusqu’à <H6> : titre du plus petit niveau Remarques De moins en moins usité Utilisation des mises en forme de paragraphe pour réaliser la même chose Voir les attributs de la balise Ecrire du code Html Sauvegarder html 33
  • 34. Les listes <UL> ... </UL> Marqueur de début et de fin d’une liste à puces <OL> ... </OL> Marqueur de début et de fin d’une liste numérotée <LI> Marqueur des éléments d’une liste Pas de balise fermante ! Provoque l'affichage d’une puce ou d’un chiffre selon le contexte Remarque Les listes sont imbriquables Voir les attributs de la balise Ecrire du code Html Sauvegarder html 34
  • 35. Option des listes à puces Forme de la puce Suivant le niveau d'imbrication, les puces sont différentes Par défaut, on obtient :    pour le 1er niveau (le 4ème, le 7ème, …) pour le 2ème (le 5ème, le 8ème, …) pour le 3ème (le 6ème; le 9ème, …) Option TYPE="disc|circle|square" dans <UL> Permet de choisir la forme de la puce Taper les valeurs en minuscules ! Internet Explorer ne les applique pas si elles sont tapées en majuscules : - ( Voir les attributs de la balise Ecrire du code Html Sauvegarder html 35
  • 36. Option des listes numérotées Option START="NombreDeDépart" dans <OL> Permet de démarrer la numérotation à une valeur spécifique (NombreDeDépart) autre que 1 Option TYPE="i|I|a|A|1" dans <OL> Permet de changer le type de numérotation : i I a A 1 chiffres romains minuscules chiffres romains majuscules lettres minuscules lettres majuscules chiffres arabes (option par défaut) Voir les attributs de la balise Ecrire du code Html i, ii, iii, iv, ... I, II, III, IV, ... a, b, c, d, ... A, B, C, D, ... 1, 2, 3, 4, ... Sauvegarder html 36
  • 37. Création de lignes horizontales <HR SIZE="s" WIDTH="w|w%" ALIGN="LEFT|CENTER|RIGHT" COLOR="#RRVVBB" NOSHADE > SIZE : épaisseur en pixel de la ligne WIDTH : largeur de la ligne. Peut s'exprimer en valeur absolue (pixels) ou en valeur relative (pourcentage de la largeur de la fenêtre) ALIGN : alignement à gauche|au centre|à droite dans la fenêtre (à utiliser si la ligne ne fait pas toute la largeur de la fenêtre) Voir les attributs de la balise Ecrire du code Html Sauvegarder html 37
  • 38. Création de lignes horizontales <HR> Utilisée sans option, cette balise produit une ligne grise ombrée de 1 pixel d'épaisseur faisant toute la largeur de la fenêtre Attention, options particulières à certains navigateurs ! COLOR="#RRVVBB" Option valable avec Internet Explorer Permet de spécifier la couleur de la ligne NOSHADE Option valable avec Netscape Permet de désactiver l'ombrage de la ligne Voir les attributs de la balise Ecrire du code Html Sauvegarder html 38
  • 39. Liens hypertextes Voir les attributs de la balise Ecrire du code Html Sauvegarder html 39
  • 40. Les noms de fichiers Les fichiers HTML ont des extensions précises : .htm, .html, … Première page d'un site (ou d'un dossier du site) En général : index.html. Dans 99% des cas, cela permet d'atteindre le site ou le dossier. Les fichiers images Images de qualité photographique : JPEG (extension : .jpg) Images de type dessin, ayant au maximum 256 couleurs (dont une éventuellement transparente) ou les images animées : GIF (extension .gif) Voir les attributs de la balise Ecrire du code Html Sauvegarder html 40
  • 41. Les noms de fichier Tout (ou presque) est fichier ! Fichier HTML, images, sons, vidéos, … Désignation des fichiers : URL <protocole>://[user[:password]@]<machine>[:port][/<path>[#label|?liste paramètres>]] Lien hypertexte Permet d’associer un document (i.e. fichier) à une zone cliquable Deux types de liens hypertextes Absolus : équivalent à une URL, à utiliser lorsque le document appelé n’est pas situé sur le même site que le document appelant. Relatifs : URL - <protocole>://[user[:password]@]<machine>[:port] à utiliser lorsque le document appelé est situé sur le même site que le document appelant. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 41
  • 42. URL Liens hypertextes absolus Équivalent à une URL Liens hypertextes relatifs Utilisés, dans un document, pour référencer un document localisé sur le même serveur et accessible par le même protocole Deux types de liens relatifs par rapport à la racine du serveur Web par rapport au répertoire du document qui la contient Exemple Soit le document Les URL relatives et désignent l’URL absolue Voir les attributs de la balise http://www.univ-evry.fr/fichiers/a.html /fichiers/b.html b.html http://www.univ-evry.fr/fichiers/b.html Ecrire du code Html Sauvegarder html 42
  • 43. Les noms de fichiers  www.toto.com www.toto.com japelle.html plus_bas www.tutu.com         plus_bas japelle.html plus_bas_aussi encore_plus_bas jerecois.html http://www.tutu.com/plus_bas/encore _plus_bas/jerecois.html Voir les attributs de la balise encore_plus_bas jerecois.html ../plus_bas_aussi/encore_plus_bas/ jerecois.html Ecrire du code Html Sauvegarder html 43
  • 44. Les liens externes <A HREF="url" TARGET="cadre"> texte ou lien vers l'image qui matérialise le lien </A> TARGET="cadre" Permet de spécifier un nom de fenêtre pour l'affichage. Si cette option est omise, la nouvelle page remplace l'ancienne dans la fenêtre en cours. Si elle est utilisée, si le nom de fenêtre n'a jamais été utilisé, une nouvelle fenêtre s'ouvre, sinon le contenu de la fenêtre portant ce nom est modifié. Le lien aura la couleur spécifiée dans l'option LINK du BODY, sauf si le texte matérialisant le lien est inclus dans une balise <FONT COLOR> (incluse elle-même dans la balise <A HREF>). Voir les attributs de la balise Ecrire du code Html Sauvegarder html 44
  • 45. Les liens internes Lien interne Lien qui amène à un endroit spécifique de la page HTML en cours. Deux étapes : Mise en place d'une étiquette à l'emplacement à atteindre avec la balise : <A NAME="nom de l'étiquette"> Appel du lien de manière classique, mais où l'adresse de la page à atteindre est remplacée par le nom de l'étiquette précédée d'un # <A HREF="[URL]#nom de l'étiquette"> … </A> Remarque Possibilité d'atteindre un emplacement spécifique d'une page différente de celle où a lieu l'appel de lien en combinant les liens externes et internes (en faisant suivre l’URL par un # puis le nom de l'étiquette). Voir les attributs de la balise Ecrire du code Html Sauvegarder html 45
  • 46. Les liens internes Exemples ... http://www.toto.com/ExempleLienInterne.html <A NAME="p1"> Le sujet abord&eacute; ici est ... ... <A NAME="p2"> Contrairement à ce qui était mentionné au <A HREF="#p1">paragraphe 1</A> http://www.tutu.com/AccesExterne.html On peut aussi acc&eacute;der au <A NAME="http://www.toto.com/ExempleLienInterne.html#p1"> paragraphe 1</A> d’un autre document. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 46
  • 47. Liens hypertextes dans les images Voir les attributs de la balise Ecrire du code Html Sauvegarder html 47
  • 48. Les images <IMG SRC="url" WIDTH="w|w%" HEIGHT="h|h%" ALT="texte" BORDER="b"> SRC="url" Adresse du fichier image à insérer. WIDTH="w|w%" Largeur de l'image affichée. Si cette option n'est pas spécifiée, l'image est affichée à sa taille réelle. On indique soit la valeur en pixel, soit en pourcentage de la taille originale de l'image Voir les attributs de la balise Ecrire du code Html Sauvegarder html 48
  • 49. Les images HEIGHT="h|h%" Hauteur de l'image affichée (mêmes remarques que pour WIDTH). NB : quand une seule des deux options WIDTH ou HEIGHT est spécifiée, l'autre est automatiquement calculée en proportion. NB2 : toujours indiquer au moins un des deux paramètres pour accélérer l'affichage ALT="texte" Texte apparaissant dans une info-bulle quand la souris est positionnée pendant 1 à 2 secondes sur l'image. BORDER="b" BORDER : taille en pixel de la bordure autour de l'image. Si l'image est un lien et qu'on ne veut pas voir de bordure de la couleur spécifiée dans l’option LINK du BODY, mettre 0. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 49
  • 50. Liens hypertextes dans les images Principes Association d’une carte à une image <IMG SRC="UrlImage" USEMAP="[URL]#nom de la carte"> Image-map Carte qui référence des zones d’une image, ainsi que les liens déclenchés sur chacune de ces parties d’images. Définition d’une carte <MAP NAME="nom de la carte"> <AREA …> [<AREA …>] </MAP> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 50
  • 51. < AREA … > <AREA SHAPE=" rect | circle | poly | default " COORDS="x1,y1,x2,y2 | x,y,r | x1,y1,x2,y2,x3,y3 …" HREF="Url cible" > SHAPE=" ... " rect circle poly default zone rectangulaire disque zone polygonale zone par défaut, = toute la partie de l’image non recouverte par une zone définie. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 51
  • 52. < AREA … > COORDS="x1,y1,x2,y2" Utilisé si SHAPE="rect" (x1, y1) défini le coin supérieur gauche de la zone rectangulaire, (x2, y2) défini le coin inférieur droit. COORDS="x,y,r" Utilisé si SHAPE="circle" (x, y) désigne le centre du cercle, r désigne le rayon. COORDS="x1,y1,x2,y2, ... xn,yn " Utilisé si SHAPE="poly" (xi, yi) définissent les point successifs du polygone. Le polygone est fermé : (x1, y1) est automatiquement relié à (xn, yn) Voir les attributs de la balise Ecrire du code Html Sauvegarder html 52
  • 53. < AREA … > <MAP NAME="carte_image"> <AREA SHAPE="rect" COORDS="25,25,75,75" HREF="rectangle.html"> <AREA SHAPE="circle" COORDS="150,50,25" HREF="cercle.html"> <AREA SHAPE="poly" COORDS="200,50,250,75,275,25,250,25" HREF="polygone.html"> </MAP> 300 pixels 100 pixels Voir les attributs de la balise Ecrire du code Html Sauvegarder html 53
  • 54. voir http://www.codexpert.com/studio/download.htm Voir les attributs de la balise Ecrire du code Html Sauvegarder html 54
  • 55. Tableaux Voir les attributs de la balise Ecrire du code Html Sauvegarder html 55
  • 56. Les tableaux 3 types d’éléments imbriqués <TABLE> … </TABLE> : ouverture et fermeture du tableau <TR> … </TR> : ouverture et fermeture de ligne (Row) <TD> … </TD> : ouverture et fermeture de cellule (Data) Remarques Ne jamais oublier les balises de fermeture le tableau pourrait être désordonné, voire ne pas s'afficher. Les tableaux sont imbricables Les tableaux servent énormément ! Ils servent à la mise en page : texte en colonne, création de menus verticaux sur le coté de la fenêtre). Voir les attributs de la balise Ecrire du code Html Sauvegarder html 56
  • 57. Structure générale d'un tableau (1) le tableau commence par la balise <TABLE> (2) puis vient la balise <TR> qui débute la première ligne du tableau (3) puis on trouve une balise <TD> qui ouvre la première cellule de données (3 bis) Le texte (ou l'image) contenu dans cette cellule est tapé et mis en forme (4) la cellule est fermée par </TD> Les étapes (3), (3bis) et (4) sont répétées autant de fois qu'il y a de cellules dans la ligne (5) puis la ligne est fermée par </TR> les étapes (2) à (5) sont répétées autant de fois qu'il y a de lignes dans le tableau (6) le tableau est terminé par la balise </TABLE> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 57
  • 58. <TABLE> ... </TABLE> <TABLE WIDTH="w|w%" BORDER="b" CELLPADDING="cp" CELLSPACING="cs"> WIDTH="w|w%" Largeur du tableau exprimée en pixel ou en pourcentage de la largeur de la fenêtre (à utiliser avec prudence). BORDER="b" Largeur de l'encadrement du tableau et des cellules exprimée en pixels. Si une cellule est vide, il n'apparaît pas. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 58
  • 59. <TABLE> ... </TABLE> CELLPADDING="cp" Marge intérieure de chaque cellule (en pixels). CELLSPACING="cs" Espacements horizontal et vertical entre les cellules du tableau Voir les attributs de la balise Ecrire du code Html Sauvegarder html 59
  • 60. Les lignes : <TR> … </TR> <TR ALIGN="LEFT|CENTER|RIGHT|JUSTIFY" VALIGN="TOP|MIDDLE|BOTTOM"> ALIGN="LEFT|CENTER|RIGHT|JUSTIFY" Alignement horizontal du contenu de toutes les cellules de la ligne : LEFT CENTER RIGHT JUSTIFY à gauche (attribut par défaut) au centre à droite justifié (à utiliser avec prudence !) VALIGN="TOP|MIDDLE|BOTTOM"> Alignement vertical du contenu de toutes les cellules de la ligne : TOP MIDDLE BOTTOM Voir les attributs de la balise haut de la cellule centre verticalement (attribut par défaut) bas de la cellule Ecrire du code Html Sauvegarder html 60
  • 61. Les cellules : <TD> … </TD> <TD ALIGN="LEFT|CENTER|RIGHT|JUSTIFY" VALIGN="TOP|MIDDLE|BOTTOM" COLSPAN="c" ROWSPAN="r" WIDTH="w|w%"> ALIGN="LEFT|CENTER|RIGHT|JUSTIFY" Alignement horizontal cellule par cellule (cf. <TR> … </TR>). VALIGN="TOP|MIDDLE|BOTTOM" Alignement vertical cellule par cellule (cf. <TR> … </TR>). Voir les attributs de la balise Ecrire du code Html Sauvegarder html 61
  • 62. Les cellules : <TD> … </TD> WIDTH="w|w%" Largeur de la cellule en pixels ou en pourcentage de la largeur du tableau. A spécifier une seule fois dans le tableau (ie pour une seule ligne) car elle détermine la largeur de la colonne dont fait partie la cellule. Quand cette option est omise, la largeur des cellules est calculée par rapport à celle du tableau, aux espacements et la largeur de la cellule contenant le plus de texte, colonne par colonne). Remarques Veiller à avoir le même nombre de cellules pour chaque ligne du tableau (en fusionner éventuellement). Si une cellule sur une ligne est vide, y mettre quand même un espace insécable (&nbsp;) Voir les attributs de la balise Ecrire du code Html Sauvegarder html 62
  • 63. Les cellules : <TD> … </TD> COLSPAN="c" Nombre de cellules fusionnées à l'horizontal. Permet de disposer du texte au dessus de plusieurs colonnes. Pour que le tableau s'affiche correctement, il faut que ligne par ligne, le nombre de cellules soit le même. Dans ce cas où une cellule est une cellule fusionnée (avec un COLSPAN), elle compte pour autant de cellule que la valeur du COLSPAN. ROWSPAN="r" <TD idem pour ROWSPAN=3> les fusions à la verticale <TD COLSPAN=2> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 63
  • 64. Un exemple de tableau complexe Voir les attributs de la balise Ecrire du code Html Sauvegarder html 64
  • 65. FRAME Voir les attributs de la balise Ecrire du code Html Sauvegarder html 65
  • 66. Les frames (ou cadres) Objectif Permettent d'obtenir une ou plusieurs divisions horizontales et/ou verticales de la fenêtre du navigateur, et ainsi de disposer "virtuellement" de plusieurs fenêtres. Utilisation Au moins une des divisions est généralement employée pour afficher un menu de parcours du site. Utilisables avec tous les navigateurs dont la version > 3.0 Pour créer une page contenant des frames Définir le découpage (FRAMESET). Définir le contenu des cadres (pages HTML classiques). Voir les attributs de la balise Ecrire du code Html Sauvegarder html 66
  • 67. <FRAMESET> … </FRAMESET> <FRAMESET ROWS|COLS="d1[,d2,d3…],*" BORDER="b" FRAMEBORDER="YES|NO" FRAMESPACING="fs"> ROWS|COLS="d1[,d2,d3…],*" ROWS COLS division en lignes (horizontale) pour une division en colonnes (verticale) d1[,d2, d3…] : indique la hauteur (largeur) en pixel de chaque ligne (colonne) ; le séparateur de valeurs est la virgule. * permet d'attribuer à la dernière ligne (colonne) tout l'espace restant. Possibilité d'indiquer une valeur en pourcentage de la taille de la page. Attention : l'affichage dépendra de la taille de la fenêtre du navigateur ! Voir les attributs de la balise Ecrire du code Html Sauvegarder html 67
  • 68. <FRAMESET> … </FRAMESET> Désactiver l'affichage des bordures entre les frames Nécessite d’utiliser les 3 options : BORDER=0 FRAMEBORDER=NO FRAMESPACING=0 en même temps de manière à ce que toutes les versions de Netscape Navigator et Internet Explorer se comportent de manière identique. Contenu de <FRAMESET> … </FRAMESET> Chaque FRAMESET contient autant d’éléments <FRAME> que d'arguments dans l'option ROWS ou COLS. Chaque <FRAME> indique quelle page afficher. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 68
  • 69. Exemple de découpage en frame Fichier frame.html <FRAMESET cols="70,424"> <FRAME name="menu" src="Fichier1.html"> <FRAMESET rows="69,487"> <FRAME name="titre" src="Fichier2.html"> <FRAME name="contenu" src="Fichier3.html"> </FRAMESET> </FRAMESET> titre Fichier2.html menu Voir les attributs de la balise Fichier1.html contenu Fichier3.html Ecrire du code Html Sauvegarder html 69
  • 70. <FRAME … > <FRAME NAME="nom de la frame" SCROLLING="YES|NO|AUTO FRAMEBORDER="YES|NO" FRAMESPACING="fs" MARGINWIDTH="mw" MARGINHEIGHT="mh"> SRC= "url" SRC= "url" NORESIZE BORDER="b" URL de la page chargée dans la fenêtre SCROLLING="YES|NO|AUTO" Gère l'affichage des ascenseurs YES : toujours présents NO : jamais AUTO : affichés si nécessaire Voir les attributs de la balise Ecrire du code Html Sauvegarder html 70
  • 71. <FRAME … > NAME="nom de la frame" Désignation utilisée pour identifier chaque cadre. Sert à désigner le cadre dans lequel va s’afficher un document pointé par un lien hypertexte. Option TARGET (dans un élément A) utilisée avec HREF. < A TARGET="nom du cadre de destination" HREF="url" > L’absence de TARGET dans un élément A provoque l ’affichage dans le cadre qui contient le lien. Nom de cadre prédéfinis : _parent, _top, _blank, ... Exemple < A HREF="lien.html" TARGET="contenu">lien</A> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 71
  • 72. <FRAME … > NORESIZE Empêche le redimensionnement d’un cadre. FRAMEBORDER, BORDER et FRAMESPACING Mêmes fonctions que pour la balise FRAMESET mais leur action est prioritaire s'ils sont ajoutés à la balise FRAME. MARGINWIDTH="mw" Espace vide laissé à gauche du cadre (en pixels). MARGINHEIGHT="mh" Espace vide laissé en haut du cadre (en pixels). Voir les attributs de la balise Ecrire du code Html Sauvegarder html 72
  • 73. Découpages multiples Exemple de découpages multiples Deux façons de faire Découpages imbriqués dans un seul fichier Découpages dans plusieurs fichiers Voir les attributs de la balise Ecrire du code Html Sauvegarder html 73
  • 74. Découpage unique imbriqué <FRAMESET COLS="50%,*" BORDER="2" FRAMEBORDER="YES" FRAMESPACING="2"> <FRAME NAME="1" SRC="1.html" SCROLLING="yes"> <FRAMESET ROWS="33%,33%,*"> <FRAME NAME="2" SRC="2.html" SCROLLING="auto"> <FRAME NAME="3" SRC="3.html" SCROLLING="auto"> <FRAMESET COLS="50%,*"> <FRAME NAME="4" SRC="4.html" SCROLLING="auto"> <FRAME NAME="5" SRC="5.html" SCROLLING="auto"> </FRAMESET> <FRAMESET> </FRAMESET> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 74
  • 75. Découpages en plusieurs fois frameset.html <FRAMESET COLS="50%,*" BORDER="2" FRAMEBORDER="YES" > <FRAME NAME="1" SRC="f1.html" SCROLLING="yes"> <FRAME NAME="2" SRC="f2.html" > </FRAMESET> f2.html 21 1 <FRAMESET ROWS="33%,33%,*"> <FRAME NAME="21" SRC="f21.html"> <FRAME NAME="22" SRC="f22.html"> <FRAME NAME="23" SRC="f23.html"> </FRAMESET> 2 22 f23.html 231 23 232 3 Voir les attributs de la balise <FRAMESET COLS="50%,*"> <FRAME NAME="231" SRC="4.html" > <FRAME NAME="232" SRC="5.html" > </FRAMESET> Ecrire du code Html Sauvegarder html 75
  • 76. Découpage unique vs. découpages en plusieurs fois Découpage unique Avantage : facilite la maintenance car il n'y a qu'un seul fichier FRAMESET. Inconvénient : impossibilité de remettre simultanément à jour plusieurs cadres. Intérêt du découpage en plusieurs fois Avantage : souplesse de mise à jour des cadres car il est possible de désigner des cadres isolés ou des ensembles de cadres. Inconvénient : lourd à maintenir. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 76
  • 77. Définition d’une fenêtre dans une page <IFRAME NAME="nom de la frame" SRC= "url" HEIGTH="h" WIDTH="w" ALIGN="left|center|right|justify" SCROLLING="YES|NO|AUTO" FRAMEBORDER="YES|NO" MARGINWIDTH="mw" MARGINHEIGHT="mh"> NAME="nom de la frame" Identifiant de la fenêtre pour l'utiliser dans les TARGET SRC= "url" URL de la page chargée dans la fenêtre Voir les attributs de la balise Ecrire du code Html Sauvegarder html 77
  • 78. Définition d’une fenêtre dans une page HEIGTH="h" Hauteur de la fenêtre en pixel WIDTH="w" Largeur de la fenêtre en pixel ALIGN="left|center|right|justify" Alignement de la fenêtre dans le document qui la contient SCROLLING, FRAMEBORDER, MARGINWIDTH, MARGINH EIGHT Idem que dans FRAME Voir les attributs de la balise Ecrire du code Html Sauvegarder html 78
  • 79. Formulaires Voir les attributs de la balise Ecrire du code Html Sauvegarder html 79
  • 80. Formulaires Objectif Interagir avec l’utilisateur Permet d'obtenir des réponses de l'utilisateur Balise <FORM METHOD="GET|POST" ACTION="Programme" > … </FORM> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 80
  • 81. Formulaires METHOD / ACTION Programme = méthode de traitement des informations recueillies dans le questionnaire. Dépendant des possibilités offertes par l'hébergeur des pages. Les valeurs à indiquer pour ces options sont à remplir suivant les indications de l'hébergeur. ex : Utilisation de mailto comme programme de traitement Permet, en général, d’envoyer directement le résultat d'un formulaire par email. Syntaxe : <FORM METHOD="POST" ACTION="mailto:toto@toto.com" ENCTYPE="text/plain"> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 81
  • 82. <INPUT … > Rôle Permet de définir les différents types de champ d’un formulaire : zone de saisie, case à cocher, bouton radio, bouton de confirmation, bouton de remise à zéro des champs. Différentes syntaxes Le contenu des attributs est dépendant du type de champ. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 82
  • 83. <INPUT … > <INPUT NAME="nom de la zone" TYPE="TEXT | CHECKBOX | RADIO | SUBMIT | IMAGE |RESET" VALUE="valeur" CHECKED SRC="url" SIZE="taille" MAXLENGTH="nb" > Voir les attributs de la balise Ecrire du code Html Sauvegarder html 83
  • 84. <INPUT … > VALUE="valeur" valeur correspond au : • au contenu initial de la zone de saisie (si TYPE="TEXT") • au libellé du bouton (si TYPE="SUBMIT" ou "RESET") • à la valeur retournée (si TYPE="CHECKBOX" ou "RADIO") CHECKED Dans le cas d’un bouton à cocher, indique qu’il apparaît coché par défaut SRC="url" Utilisé avec TYPE="IMAGE" Adresse d’une image à afficher, celle-ci jouant le rôle de bouton de validation Voir les attributs de la balise Ecrire du code Html Sauvegarder html 84
  • 85. <INPUT … > SIZE="taille" Utilisé avec TYPE="TEXT" Correspond à la taille de la zone de saisie. MAXLENGTH="nb" Utilisé avec TYPE="TEXT" Nombre maximum de caractères qu’il est possible de saisir. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 85
  • 86. <INPUT TYPE="TEXT" … > Exemple <INPUT TYPE="TEXT" NAME="case_texte_1" VALUE="Texte par défaut" SIZE="20" MAXLENGTH="80" > Texte par défaut Principes La case fait 20 caractères de large. Il est possible d’y saisir 80 caractères au maximum. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 86
  • 87. <HTML> <HEAD><TITLE>Exemple de fichier HTML</TITLE></HEAD> <SCRIPT> </SCRIPT> <BODY> <INPUTTYPE="TEXT" NAME="case_texte_1" VALUE="Texte par défaut" SIZE="20" MAXLENGTH="80" > <INPUTTYPE="TEXT" NAME="case_texte_2" VALUE="" SIZE="4" MAXLENGTH="4" > </BODY> </HTML> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 87
  • 88. <INPUT TYPE="CHECKBOX" … > Exemple Choix 1&nbsp;<INPUT TYPE="CHECKBOX" NAME="case_1" VALUE="1" CHECKED><BR> Choix 2&nbsp;<INPUT TYPE="CHECKBOX" NAME="case_2" VALUE="1"><BR> Choix 3&nbsp;<INPUT TYPE="CHECKBOX" NAME="case_3" VALUE="1"><BR> Choix 4&nbsp;<INPUT TYPE="CHECKBOX" NAME="case_4" VALUE="1"> Principes Plusieurs cases peuvent avoir l'option CHECKED Les 4 cases n'ont pas le même nom VALUE indique la valeur qui sera retournée en fonction des la(les) cases cochées. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 88
  • 89. Peux être décoché Voir les attributs de la balise Ecrire du code Html Sauvegarder html 89
  • 90. <INPUT TYPE="RADIO" … > Exemple Choix 1&nbsp;<INPUT TYPE="RADIO" NAME="BoutonRadio" VALUE="1" CHECKED><BR> Choix 2&nbsp;<INPUT TYPE="RADIO" NAME="BoutonRadio" VALUE="2"><BR> Choix 3&nbsp;<INPUT TYPE="RADIO" NAME="BoutonRadio" VALUE="3"><BR> Choix 4&nbsp;<INPUT TYPE="RADIO" NAME="BoutonRadio" VALUE="4"> Principes Une seule case peut avoir l'option CHECKED Les 4 cases ont le même nom VALUE indique la valeur qui sera retournée en fonction de la case cochée. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 90
  • 91. Ne peux être décoché Voir les attributs de la balise Ecrire du code Html Sauvegarder html 91
  • 92. Bouton de validation et de mise à zéro <INPUT NAME="validation" TYPE="SUBMIT" VALUE="Valider"> Bouton de validation avec image : <INPUT TYPE="IMAGE" NAME="validation" SRC="fluide.jpg"> (si l'image fluide.jpg est dans le même dossier que la page). <INPUT NAME="Effacement" TYPE="RESET" VALUE="Effacer"> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 92
  • 93. Liste de choix <SELECT NAME="nom de la liste" SIZE="1|s"> <OPTION … >texte de la ligne 1</OPTION> ... </SELECT> SIZE="1|s" SIZE="1" SIZE "1" liste déroulante liste défilante. <OPTION … >texte de la ligne</OPTION> 3 attributs possibles : DISABLED, SELECTED et VALUE (même rôle que pour les boutons radios) Voir les attributs de la balise Ecrire du code Html Sauvegarder html 93
  • 94. Liste de choix Exemple de liste défilante <SELECT NAME="liste1" <OPTION>Ligne <OPTION>Ligne <OPTION>Ligne <OPTION>Ligne <OPTION>Ligne <OPTION>Ligne </SELECT> Voir les attributs de la balise SIZE="3"> 1</OPTION> 2</OPTION> 3</OPTION> 4</OPTION> 5</OPTION> 6</OPTION> Ecrire du code Html Sauvegarder html 94
  • 95. Liste de choix Exemple de liste déroulante <SELECT NAME="liste1" <OPTION>Ligne <OPTION>Ligne <OPTION>Ligne </SELECT> Voir les attributs de la balise SIZE="1"> 1</OPTION> 2</OPTION> 3</OPTION> Ecrire du code Html Sauvegarder html 95
  • 96. Liste de choix <HTML> Exemple de liste déroulante <HEAD><TITLE>Exemple de fichier HTML</TITLE></HEAD> <SCRIPT> </SCRIPT> <BODY> <SELECT NAME="liste1" SIZE="1"> <OPTION>Ligne 1</OPTION> <OPTION>Ligne 2</OPTION> <OPTION>Ligne 3</OPTION> </SELECT> <SELECT NAME="liste2" SIZE="4"> <OPTION>Ligne 1</OPTION> <OPTION>Ligne 2</OPTION> <OPTION>Ligne 3</OPTION> </SELECT> </BODY> </HTML> Voir les attributs de la balise Ecrire du code Html Sauvegarder html 96
  • 97. < TEXTAREA … > … </ TEXTAREA ...> <TEXTAREA NAME="nom de la zone" ROWS="r" COLS="c"> Rôle Permet de définir une zone de texte pour saisir des données de taille plus importante que dans une case de texte. ROWS="r" Taille de la zone de saisie en nombre de lignes COLS="c" Taille de la zone de saisie en nombre de colonnes. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 97
  • 98. Et quoi d’autre ? Voir les attributs de la balise Ecrire du code Html Sauvegarder html 98
  • 99. Équations mathématiques Voir les attributs de la balise Ecrire du code Html Sauvegarder html 99
  • 100. Image de positionnement Qu’est-ce ? Image transparente de 1 pixel de large x 1 pixel de haut, déformé avec les attributs HEIGHT et WIDTH de la balise IMG. Rôle Permet le positionnement d’une information à un endroit exact de la fenêtre. Permet, par exemple, de décaler du texte par rapport au bord de la page définir des marges de fixer l’espacement vertical ou horizontal Voir les attributs de la balise Ecrire du code Html Sauvegarder html 100
  • 101. Commentaire <!-- commentaire --> Rôle Permettre d’ajouter des informations dans les documents HTML sans qu’elles soient affichées à l’écran. Utilisé par des outils de création de page Web pour laisser une signature. Utilisé pour encapsuler du code PHP, javascript, etc. Attention ! Ne jamais oublier la taille des pages. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 101
  • 102. Mailto <A HREF="mailto:toto@toto.com?subject=bla-bla-bla..."> … </A> Rôle Permet de déclencher l’ouverture d’une nouvelle fenêtre pour l’envoi d’un courrier électronique. L’ouverture se réalise lorsqu’on clique sur le lien compris dans l’élément A. Le destinataire est toto@toto.com Le sujet est bla-bla-bla... Voir les attributs de la balise Ecrire du code Html Sauvegarder html 102
  • 103. HTML 4 Voir les attributs de la balise Ecrire du code Html Sauvegarder html 103
  • 104. HTML 4 Ne pas confondre HTML dynamique et HTML 4 HTML dynamique : nom générique des versions spécifiques de Microsoft et Netscape pour faire évoluer HTML dans le domaine de l'animation des pages. Chacun, en tenant bien évidemment compte de sa propre vision (et de ses propres développements). HTML 4 : norme officielle d'évolution de HTML comprend de nouvelles instructions pour la mise en page de document HTML Voir les attributs de la balise Ecrire du code Html Sauvegarder html 104
  • 105. Feuille de style Qu’est-ce ? = Ensemble de mises en forme génériques (position des éléments, aspect des textes à afficher, …) associés à des balises. Norme actuelle : CSS (Cascading Style Sheets) Peut être enregistrée dans un fichier séparé de la page Web, et ainsi être utilisée par plusieurs pages. Déclaration de la feuille de style ou de son utilisation dans l’entête ( < HEAD > … </ HEAD > ) Voir les attributs de la balise Ecrire du code Html Sauvegarder html 105
  • 106. Feuille de style Syntaxe Balise {propriété: valeur [; propriété: valeur …]*} Exemples H1 {font-size: 20pt; font-weight: bold ; color: red} H2 {font-size: 16pt; font-weight: bold ; color: #080000} P {margin-left: -20px; margin-right: -20px; margin-top: 30px} BODY {background: URL(http://my.server.com/pictures/back.gif); text-indent: 2cm} Trois possibilités pour les définir : Dans la page elle-même : - localement dans un élément - globalement pour la page Dans un fichier séparé. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 106
  • 107. Définition de styles Définition locale <P STYLE="margin-left: 1in; margin-right: 1in; color: #0000FF"> Définition globale (dans l’entête < HEAD > … </ HEAD >) <STYLE type="text/css"> P {font-size: 14pt; color: red ; text-align: center} H1.red {color: #FF0000; font-size: 20pt} H1.blue {color: #0000FF; font-size:20pt} </STYLE> Utilisation <H1 CLASS=red>This will be red< /H1> <P> … </P> <H1 CLASS=blue>This will be blue< /H1> Voir les attributs de la balise Possibilité de définir des sous-classes Ecrire du code Html Sauvegarder html 107
  • 108. Définition de styles Définition externe <LINK REL=STYLESHEET HREF="...URL… TYPE="text/css" > L’URL référence un fichier qui contient les définitions des styles. Utilisation idem que précédemment Voir les attributs de la balise Ecrire du code Html Sauvegarder html 108
  • 109. Définition de styles : positionnement Absolu, par rapport à la marge Exemple : {position:absolute; left:40px;top:75px;} positionnera le texte : à 40 pixels du bord gauche, et à 75 pixels du haut de la fenêtre. Ce type d'instruction permet de superposer des textes Relatif, par rapport au dernier élément affiché Exemple : {margin-top:20px; margin-left:300px;} positionnera le texte : 20 pixels plus bas et 300 pixels plus à gauche que le dernier texte affiché. Voir les attributs de la balise Ecrire du code Html Sauvegarder html 109
  • 110. Définition de styles : polices font-size : taille de la police. Valeurs possibles : xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller ou une taille exprimée en pixels (px), en points (pt) font-weight : graisse Valeurs possibles : normal, bold, bolder, lighter, ou une valeur numérique comprise entre 100 et 900 font-style : style d'écriture Valeurs possibles : normal, italic, oblique Voir les attributs de la balise Ecrire du code Html Sauvegarder html 110
  • 111. Définition de styles : polices font-family : police Valeurs possibles : serif, sans-serif, cursive, fantasy, monospace ou police précise color : couleur Valeurs possibles : #rrvvbb (codage classique) valeur symbolique Voir les attributs de la balise Ecrire du code Html Sauvegarder html 111
  • 112. Définition de styles : divers background-color : couleur du fond Valeurs possibles : #rrvvbb (codage classique) valeur symbolique background-image : URL | none URL de l’image de fond etc… Voir les attributs de la balise Ecrire du code Html Sauvegarder html 112
  • 113. CSS auto http://www.elzedo.com/?page=css Spécification de CSS http://dicolive.media-box.net/docCSS/css.php?orderByType=1 http://www.w3schools.com/ http://css.alsacreations.com/ code de couleurs http://www.docmemo.com/internetwebmasters/codescouleurs. php Voir les attributs de la balise Ecrire du code Html Sauvegarder html 113
  • 114. Pour la beauté de la page http://www.brand-advocate.com/ Voir les attributs de la balise Ecrire du code Html Sauvegarder html 114
  • 115. HTML 5 Voir les attributs de la balise Ecrire du code Html Sauvegarder html 115