[PDF] Hyper Texte Markup Language cours complet | Cours html

(1)

(2)

Table des matières

Le Langage HTML ... 1

1. Introduction à HTML : Hyper Text Markup Language ... 4

1.1. Quelques règles simples pour l'écriture en langage HTML ... 4

1.2. Qu'est-ce qu'un URL (Uniform Resource Locator). ... 4

2. Les En-têtes - H.T.M.L. ... 5

3. Les délimiteurs - H.T.M.L ... 6

3.1. Les délimiteurs ... 6

3.2. Liste de description ... 7

3.3. Indentation de paragraphe ... 7

3.4. Présentation d'un paragraphe en multi-colonnes... 8

4. Les styles - H.T.M.L. ... 9

4.1. Taille du texte... 9

Une très grande taille... 9

Une grande taille ... 9

Une taille moyenne... 9

4.2. Attributs... 9

5. Les listes - H.T.M.L. ... 13

6. Les caractères spéciaux - H.T.M.L. ... 15

6.1. Les inégalités... 15

6.2. Les caractères accentués... 15

6.3. D'autres caractères utiles ... 16

7. Les images - H.T.M.L. ... 17

7.1. Les images dans le texte... 17

8. Les images réactives - H.T.M.L. ... 19

8.1. Les images réactives - H.T.M.L. (ancienne méthode) ... 19

8.2. Les images réactives - H.T.M.L. (nouvelle méthode)... 21

9. Les liens - H.T.M.L. ... 23

9.1. Les liens vers un document complet distant... 23

9.2. Les liens vers un document complet local ... 23

9.3. Les liens vers une partie d'un document local... 24

9.4. Les liens vers une partie du document courant ... 24

9.5. Adresser un message électronique ... 24

10. Les Formulaires - H.T.M.L. ... 26

10.1. Bouton ... 26

10.2. Sélection d'un fichier... 26

10.3. Texte libre sur une ligne... 26

10.4. Texte libre sur plusieurs lignes... 27

10.5. Menu... 27

ENQUETE sur la SATISFACTION des UTILISATEURS... 28

11. Les tableaux - H.T.M.L. ... 29

11.1. Déclarer le début et la fin d'un tableau... 29

11.2. Définir le début et la fin d'une ligne... 29

11.3. Définit chaque élément de la ligne titre ... 30

(3)

12. <FRAMESET> - H.T.M.L... 32

13. Divers - H.T.M.L... 34

13.1. Centrer un document ... 34

13.2. Modification de la taille et de la couleur des caractères... 34

13.3. Tableau des couleurs ... 34

13.4. Indice et exposant... 38

13.5. Fond sonore ... 39

(4)

1. Introduction à HTML : Hyper Text Markup Language

Un document HTML est composé de texte et de commandes (tag en anglais). Ces commandes permettent de mettre en forme le texte (Titre, caractère gras, italique, image, liens, etc...).

1.1. Quelques règles simples pour l'écriture en langage HTML

• Les commandes HTML ont une marque de début et une marque de fin

• Certaines marques de fin sont facultatives

• Les commandes HTML utilisent les caractères < et > comme délimiteurs.

Exemple :

<TITLE>Cette commande donne un titre au document HTML</TITLE>

• Les commandes HTML peuvent être écrites en minuscules ou en majuscules.

• Un fichier rédigé en HTML doit être suffixé par .html ou .HTML ou .htm ou .HTM

1.2. Qu'est-ce qu'un URL (Uniform Resource Locator).

Un URL est le moyen de nommer un objet dans le monde WWW. La syntaxe d'un URL est la suivante :

type:serveur:port/chemin_d'acces/fichier#etiquette?parametres

Le type de serveur :

http : pour les URL provenant de serveurs WWW gopher : pour les serveurs GOPHER

ftp : pour les fichiers à transférer

telnet : pour ouvrir une session interactive wais : pour interroger une base WAIS news : pour accéder aux forums

(5)

2. Les En-têtes - H.T.M.L.

• <HTML>

</HTML>

Commandes de début et de fin du document HTML

• <HEAD> </HEAD>

Informations non affichées concernant le document

• <TITLE> </TITLE>

Titre du document

Cette information apparait dans la barre de titre du client WWW.

• <META ...>

Situées dans l'en-tête de votre page HTML, ces commandes guident les moteurs de recherche pour indexer votre page

• <BODY> </BODY>

Corps du document

Toutes les informations affichées par le client WWW y sont contenues.

• <BASE HREF="URL"> </BASE>

URL(*) de base pour toutes les références contenues dans ce document.

Par défaut l'URL de base est le serveur HTTP sur lequel se trouve le document.

•

Pour insérer des commentaires.

Exemple

:

<TITLE>Exemple de structure de document HTML</TITLE> <META NAME="Author" CONTENT="Richard MANAS">

<BASE HREF="/usr/home/chezmoi"></BASE> </HEAD> <BODY> ... ... Le document HTML ... </BODY> </HTML>

(6)

3. Les délimiteurs - H.T.M.L

Dans le texte que vous tapez, les espaces et les retours à la ligne ne sont pas interprétés par les clients WWW.

3.1. Les délimiteurs

Les délimiteurs permettent d'aérer et de formater le document.

• <P> </P> Saut de paragraphe • <DIV> </DIV> Division de bloc • <BR> </BR> Saut à la ligne • <HR> </HR>

Insertion d'une ligne horizontale de séparation

Exemples :

Après cette ligne un saut de paragraphe<P> Après celle-ci un saut à la ligne simple<BR> sur la ligne suivante.

<HR>Ce texte est encadré par deux lignes horizontales<HR>

Résultat :

Après cette ligne un saut de paragraphe

Après celle-ci un saut à la ligne simple sur la ligne suivante.

(7)

3.2. Liste de description

• <DL> </DL>

Début et fin de liste de description

• <DT> </DT>

Nom du terme

• <DD> </DD>

Description du terme défini

Exemples

:

<DL>

<DT>Premier terme</DT>

<DD>Description du premier terme<BR>

Cette description peut continuer à la ligne suivante<BR> ainsi de suite ...</DD>

<DT>Second terme</DT>

<DD>Description du second terme</DD> </DL>

Résultat

:

Premier terme

Description du premier terme

Cette description peut continuer à la ligne suivante ainsi de suite ...

Second terme

Description du second terme

3.3. Indentation de paragraphe

• <BLOCKQUOTE> </BLOCKQUOTE>

Exemple

:

Je veux mettre en avant le paragraphe qui suit : <BLOCKQUOTE>

Nous pourrions peut-être tous bien nous entendre avec des gens parfaits. Mais notre tâche est de bien nous entendre avec des gens imparfaits. (Richard L. EVANS)

</BLOCKQUOTE> ... grande vérité !

(8)

Je veux mettre en avant le paragraphe qui suit :

Nous pourrions peut-être tous bien nous entendre avec des gens parfaits. Mais notre tâche est de bien nous entendre avec des gens imparfaits. (Richard L. EVANS)

... grande vérité !

Remarque :

Les commandes BLOCKQUOTE peuvent s'imbriquer les unes dans les autres.

3.4. Présentation d'un paragraphe en multi colonnes

• <MULTICOL> </MULTICOL>

(9)

4. Les styles - H.T.M.L.

Les titres de paragraphes peuvent êtres visualisés en fonction de leur importance. Ils sont représentés par des fontes de caractères de différentes tailles, de la plus grande à la plus petite en voici un exemplaire de chaque.

4.1. Taille du texte

• <H1>Une très grande taille</H1>

Une très grande taille

• <H2>Une grande taille</H2>

Une grande taille

• <H3>Une taille moyenne</H3>

Une taille moyenne

• <H4>Une petite taille</H4>

Une petite taille

• <H5>Une très petite taille</H5>

Une très petite taille

• <H6>Une taille vraiment minuscule</H6>

Une taille vraiment minuscule

4.2. Attributs

Les caractères peuvent recevoir les attributs suivants :

• <STRIKE> ou <S> </STRIKE> ou </S>

Pour barrer du texte.

Exemple

:

(10)

Résultat

:

C'est BEAU et barré

• <U> </U>

Pour souligner du texte.

Exemple :

Ceci <U>n'est pas un lien</U>

Résultat :

Ceci n'est pas un lien

• <BLINK> </BLINK>

Pour faire clignoter du texte.

Exemple : C'est <BLINK>MAGIQUE</BLINK> !!!

Résultat

:

C'est MAGIQUE !!! • <TT> </TT>

Pour intégrer du texte formaté dans une phrase.

Exemple :

Ceci est une phrase contenant un <TT>texte formaté</TT>

Résultat

:

Ceci est une phrase contenant un texte formaté

• <PRE> </PRE>

Cas d'un paragraphe formaté.

Il est inutile de forcer des césures de lignes. Le texte apparaît tel que vous le saisissez.

Exemple

:

Sous DOS tapez les commandes suivantes <PRE>

C:> MKDIR WINSOCK C:> CD WINSOCK

(11)

C:> COPY A:WINSOCK.ZIP C: C:> PKUNZIP -D WINSOCK </PRE>

Résultat

:

Sous DOS tapez les commandes suivantes

C:> MKDIR WINSOCK C:> CD WINSOCK

C:> COPY A:WINSOCK.ZIP C: C:> PKUNZIP -D WINSOCK

• Les styles physiques

o <B> </B>

Pour mettre du texte en gras

Exemple

:

<B>Texte gras</B>

Résultat

:

Texte gras o <I> </I>

Pour mettre du texte en italique

Exemple

:

<I>Texte en italique</I>

Résultat

:

Texte en italique

• Les styles logiques

L'initiative est laissée au client WWW

o <STRONG> </STRONG>

Pour insister sur un texte (en général gras)

Exemple :

(12)

Résultat

:

J'insiste o <EM>

</EM>

Pour mettre du texte en valeur (en général italique)

Exemple

:

<EM>Texte en valeur</EM> Résultat

:

Texte en valeur

o <CITE> </CITE>

Pour insérer une citation (en général italique)

Exemple

:

<CITE>Suivez le boeuf</CITE> Résultat

:

Suivez le boeuf

o <ADDRESS> </ADDRESS>

Pour afficher une adresse (en général italique)

Exemple :

<ADDRESS>manas@unice.fr</ADDRESS>

Résultat

:

(13)

5. Les listes - H.T.M.L.

Il existe deux sortes de listes : non ordonnée et ordonnée Les listes peuvent être emboîtées.

• <UL> </UL>

Liste non ordonnée

• <OL> </OL> Liste ordonnée • <LI> </LI> Elément de la liste Exemple 1

:

Ceci est une liste non ordonnée de termes

<UL>Le titre est cadré <LI>Terme A

<LI>Terme B <LI>Terme C </UL>

Résultat

:

Ceci est une liste non ordonnée de termes

Le titre est cadré

• Terme A

• Terme B

• Terme C

Exemple 2

:

Ceci est une liste ordonnée incluant une sous-liste ordonnée <OL> <LI>Terme A <OL>Sous-liste <LI>Terme A-1 <LI>Terme A-2 </OL> <LI>Terme B <LI>Terme C </OL> Résultat

:

(14)

Ceci est une liste ordonnée incluant une sous liste ordonnée 1. Terme A Sous liste 1. Terme A-1 2. Terme A-2 2. Terme B 3. Terme C

(15)

6. Les caractères spéciaux - H.T.M.L.

6.1. Les inégalités

Les caractères < , > , & et " étant interprétés par HTML, les séquences suivantes permettent leur affichage.

&

lt

; <

&

gt

; >

&

amp

; &

&

quot

; "

Les espaces n'étant pas significatifs, le caractère   permet de forcer un "blanc" autant que souhaité

Exemple :

Les oiseaux gazouillent au printemps

Les oiseaux gazouillent au     printemps

Résultat :

Les oiseaux gazouillent au printemps Les oiseaux gazouillent au printemps

6.2. Les caractères accentués

HTML utilise le jeu de caractères ISO Latin-1 codés sur 8 bits et les caractères ASCII codés sur 7 bits. Avec cette dernière codification les caractères accentués sont représentés par les séquences suivantes :

&e

acute

; é

&E

acute

; É

&e

grave

; è

&e

circ

; ê

&a

grave

; à

&i

uml

; ï

&c

cedil

; ç

&n

tilde

; ñ

&AE

lig

; Æ

(16)

6.3. D'autres caractères utiles

&

euro

;

&

#8364

; €

&

copy

;

&

#169

;

©

&

reg

;

&

#174

; ®

&

deg

;

&

#176

; °

&

ordm

;

º

&

laquo

;

&

#171

; «

&

raquo

;

&

#187

; »

&

micro

;

&

#181

; µ

&

para

;

&

#182

; ¶

&

frac14

;

&

#188

; ¼

&

frac12

;

&

#189

; ½

&

frac34

;

&

#190

; ¾

&

#156

; œ

Le caractère € n'apparaît pas avec tous les navigateurs, optez plutôt pour l'image .

(17)

7. Les images - H.T.M.L.

HTML permet d'insérer des images dans du texte. Ces images apparaissent dans le corps du texte, mais aussi comme ancre, ou même comme document référencé.

Les clients WWW Mosaic acceptent les formats d'images suivants :

• XBM pour les images monochromes • GIF pour les images couleurs

Les clients WWW Netscape ou Internet Explorer acceptent en plus le format

• JPEG pour les images couleurs

7.1. Les images dans le texte

La commande<IMG>permet d'insérer une image dans le texte.

Syntaxe

:

Image adresse d'une image

Attribut "MIDDLE" "TOP" "BOTTOM" "LEFT" ou "RIGHT"

Titre "Un titre" qui se substituera à l'image pour les clients ne pouvant ou ne sachant pas afficher des images (Lynx sur terminal VT100 par exemple). En effet, il est beaucoup plus agréable pour ces utilisateurs de voir un message ou un caractère, au lieu de [IMAGE]

hh nombre de pixels de séparation à droite et à gauche de l'image. (par défaut hh=0)

vv nombre de pixels de séparation en haut et en bas de l'image. (par défaut vv=0)

bb nombre de pixels de l'encadrement de l'image. (par défaut il n'y a pas d'encadrement)

Exemple

:

<IMG SRC="chouetteG.gif"> La chouette ou

<IMG ALIGN=BOTTOM SRC="chouetteG.gif"> La chouette Essayer aussi :

<IMG ALIGN=MIDDLE SRC="chouetteG.gif"> La chouette

<IMG ALIGN=TOP SRC="chouetteG.gif"> La chouette

<IMG ALIGN=LEFT SRC="chouetteG.gif"> chouette <IMG ALIGN=RIGHT "chouetteG.gif"> chouette

(18)

Résultat

:

(19)

8. Les images réactives - H.T.M.L.

Une image réactive permet de lier des documents en fonction de la zone cliquée par l'utilisateur. Le plus bel exemple est la carte de France réactive permettant de connaître région par région tous les serveurs WWW.

(cf URL http://www.urec.cnrs.fr/annuaire/cartes/index.shtml).

Voici deux méthodes pour fabriquer des images réactives.

1. La méthode ancienne liée au serveur, et faisant appel au serveur lors de son

utilisation.

2. La méthode nouvelle autonome, toutes les informations nécessaires à son

fonctionnement sont contenues dans la page HTML affichée par le client.

8.1. Les images réactives - H.T.M.L.

(ancienne méthode)

Cette méthode nécessite l'intervention d'un programme exécutable sur le serveur

imagemap (serveur NCSA) ou htimage (serveur CERN) dans le répertoire /cgi-bin.

Trois éléments indispensables :

• un fichier image .gif

• un fichier carte .map correspondant à l'image .gif • le programme exécutable

Le premier élément est à trouver par vos soins !! Le dernier est fourni par le serveur WWW Reste le fichier .map qu'il faut fabriquer

• soit en utilisant des logiciels comme XV sur plateforme UNIX ou VMS (mais cela reste relativement rébarbatif car il faut relever manuellement les zones qui seront réactives),

• soit le fin du fin en utilisant l'outil spécialisé MAPEDIT qui fabrique selon vos directives ce fameux fichier .map

La syntaxe du contenu de ce fichier est la suivante :

zone url coordonnées,...,coordonnées

Les coordonnées des points de l'image sont définies en pixel suivant les axes x et y, l'origine étant le point en haut et à gauche de l'image.

(20)

Ce fichier contient une zone par ligne, il existe 3 types de zones : rectangle, cercle et polygone, plus la zone "défaut".

Les lignes de commentaires doivent commencer par un "#".

Type de zone Mot-clef Coordonnées

rectangle rect on définit les coordonnées de deux sommets opposé

cercle circle on définit les coordonnées du centre du cercle et les coordonnées d'un des points de la circonférence polygone poly on définit les coordonnées de chaque sommet

défaut default

Exemple :

Chaque utilisateur peut créer son espace html (voir l'administrateur du serveur). Il suffit de créer un répertoire public_html dans lequel on place ses propres fichiers html, images, etc ....

Deux zones sont définies dans un fichier : un rectangle autour du nez et un cercle autour du menton.

Attention :

les URL doivent contenir l'adresse du serveur.

# Premier essai

default http://nephi.unice.fr/CoursHTML/non.html # On fixe le nez

rect http://nephi.unice.fr/CoursHTML/nez.html 54,81 83,107 # On pointe sur le menton (à quand les oreilles !!)

circle http://nephi.unice.fr/CoursHTML/menton.html 72,126 82,138

On utilise ces 3 éléments ainsi :

Exemple

:

(21)

Résultat

:

A vous de cliquer !

8.2. Les images réactives - H.T.M.L.

(nouvelle méthode)

Cette méthode est maintenant la plus employée car elle est indépendante du serveur, toutes les informations concernant les différentes zones sensibles de l'image sont traitées par le client.

Deux éléments indispensables :

• un fichier image .gif ou .jpg • définir les zones réactives

Le premier élément est à trouver par vos soins !! Reste à définir les zones réactives

• soit en utilisant des logiciels comme XV sur plateforme UNIX ou VMS (mais celà reste relativement rebarbatif car il faut relever manuellement les zones qui seront réactives),

• soit en utilisant un outil spécialisé tel que MAPEDIT qui fabrique selon vos directives un fichier .map

La syntaxe du contenu de ce fichier est la suivante :

zone url coordonnées,...,coordonnées

Les coordonnées des points de l'image sont définies en pixel suivant les axes x et y, l'origine étant le point en haut et à gauche de l'image.

Il faudra donc adapter les données fournies dans ce fichier .map à la syntaxe suivante :

Type de zone Mot-clef Coordonnées

rectangle rect on définit les coordonnées de deux sommets opposé

cercle circle on définit les coordonnées du centre du cercle et la longueur du rayon

(22)

polygone poly on définit les coordonnées de chaque sommet

défaut default

Exemple :

</MAP>

(23)

9. Les liens - H.T.M.L.

Une des fonctionnalités la plus agréable du langage HTML est la possibilité de créer des liens vers d'autres documents. Ces documents peuvent être des documents HTML, des images, du son, des films, et des serveurs TELNET, WAIS, FTP et GOPHER. Le logiciel client WWW présente ce lien sous forme de mots soulignés ou d'image encadrée que l'on appelle ancre ou lien. Ce lien est soit un fichier local, soit une URL(*).

Il existe quatre types principaux de liens :

9.1. Les liens vers un document complet distant

Syntaxe

:

<A HREF="URL"> ancre </A>

Exemple

:

pour accéder aux pages du CRI - UNSA

<A HREF="http://www.unice.fr/html/French/cri.html"> Le CRI </A> U.N.S.A.

Résultat

:

Le CRI de l'U.N.S.A.

9.2. Les liens vers un document complet local

Syntaxe

:

<A HREF="nom_de_fichier_local"> ancre </A>

Exemple

:

pour accéder à une page d'essai locale

<A HREF="/manas/public_html/Diaporama"> Cliquer ICI </A>

Résultat

:

(24)

9.3. Les liens vers une partie d'un document local

Syntaxe

:

pour définir un point de branchement

<A HREF="nom_de_fichier_local#etiquette"> ancre </A> pour faire le lien.

Exemple

:

pour accéder au paragraphe 3 du document local

<A NAME="[3]"> Paragraphe 3 : Les soucis </A> <A HREF="exemple_notes.html#[3]"> Note [3] </A>

Résultat

:

Note [3]

9.4. Les liens vers une partie du document courant

Syntaxe

:

pour définir un point de branchement <A HREF="#etiquette"> ancre </A> pour faire le lien.

Exemple

:

pour accéder au mot "ANCRES" du document courant

<A NAME="ANCRES"> Les ancres </A>

<A HREF="#ANCRES"> Voyons retournons au début du fichier </A>

Résultat

:

Voyons retournons au début du fichier

9.5. Adresser un message électronique

Syntaxes :

<A HREF="MAILTO:adresse_correspondant"> ancre </A> ou

(25)

Exemple 1 :

pour m'adresser un message électronique

<A HREF="MAILTO:manas@unice.fr"> Ecrivez-moi !!</A>

Résultat

:

Ecrivez-moi !!

Exemple 2 :

pour m'adresser un message électronique avec un sujet prédéfini

<A HREF="MAILTO:manas@unice.fr?Subject=Coucou"> Ecrivez-moi encore !!</A>

Résultat

:

Ecrivez-moi encore !!

Exemple 3 :

pour m'adresser un message électronique avec un destinataire secondaire, un destinataire secondaire "cachée" ou "officieux" et

un sujet prédéfini <A

HREF="MAILTO:manas@unice.fr?cc=rmanas@unice.fr&bcc=rmanas@unice.fr&Subject= Coucou"> Ecrivez-nous. Nous sommes plusieurs !!</A>

Résultat

:

(26)

10. Les Formulaires - H.T.M.L.

Les clients évolués supportent les formulaires.

Un formulaire est une fiche que l'utilisateur peut remplir, ces informations ainsi saisies sont traitées par le serveur WWW à l'aide d'un programme CGI (

Common Gateway Interface

).

Un formulaire commence et finit par

avec ACTION = "programme executable ou shell" METHOD = GET

POST

Il existe plusieurs types de champs :

10.1. Bouton

avec TYPE = RADIO pour les boutons multiples CHECKBOX pour les cases à cocher

SUBMIT pour envoyer le formulaire une fois rempli RESET pour effacer le contenu du formulaire NAME = "un nom" qui identifie le bouton

VALUE= "valeur" donnée au bouton lorsqu'il est selectionné CHECKED signale un bouton par défaut (RADIO) ou une case cochée avant saisie (CHECKBOX)

TYPE = IMAGE identique au SUBMIT mais le bouton est remplacé par une image de votre choix

NAME = "un nom" qui identifie le bouton SRC = "image" nom du fichier image ALIGN = BOTTOM valeur par défaut

LEFT, RIGHT, TOP, ABSMIDDLE, ABSBOTTOM, TEXTTOP, MIDDLE, BASELINE

sont les autres valeurs possibles

10.2. Sélection d'un fichier

avec TYPE = FILE pour permettre l'envoi d'un fichier NAME = "un nom" qui identifie le champ texte

10.3. Texte libre sur une ligne

(27)

PASSWORD les caractères saisis sont représentes par des '*'

HIDDEN le champ est caché : utile pour transmettre des informations non visibles.

NAME = "un nom" qui identifie le champ texte

10.4. Texte libre sur plusieurs lignes

avec NAME = "un nom" qui identifie le champ texte ROWS = nombre de lignes visibles

COLS = nombre de colonnes visibles

10.5. Menu

avec NAME = "un nom" qui identifie le menu <OPTION SELECTED>

représente chaque choix du menu

avec SELECTED qui signale le choix par défaut

10.6. Exemple de formulaire

<P>

<H3 ALIGN=CENTER>ENQUETE sur la SATISFACTION des UTILISATEURS</H3> <FORM ACTION="/cgi-bin/cours1" METHOD=POST>

<PRE>

<INPUT TYPE=RADIO NAME=SECTEUR1 VALUE="UNIV" CHECKED> Universitaire <INPUT TYPE=RADIO NAME=SECTEUR1 VALUE="CNRS"> C.N.R.S.

<INPUT TYPE=RADIO NAME=SECTEUR1 VALUE="INSE"> I.N.S.E.R.M. <INPUT TYPE=RADIO NAME=SECTEUR1 VALUE="PUBL"> Autre PUBLIC <INPUT TYPE=RADIO NAME=SECTEUR1 VALUE="PRIV"> Privé

<P>

Vos Nom et prénom : <INPUT TYPE=TEXT NAME=NOM1 SIZE=30> </P>

Votre adresse électronique : <INPUT TYPE=TEXT NAME=ADR1 SIZE=30> <P>

Je suis belle/beau<INPUT TYPE=CHECKBOX NAME=BEAU VALUE="beau">, jeune<INPUT TYPE=CHECKBOX NAME=JEUNE VALUE="jeune">, riche<INPUT TYPE=CHECKBOX NAME=RICHE VALUE="riche">,

en bonne santé<INPUT TYPE=CHECKBOX NAME=SANTE VALUE="en bonne sante">

Votre opinion <SELECT NAME=OPINION1> <OPTION>Très satisfait <OPTION SELECTED>Satisfait <OPTION>Indifférent <OPTION>C'est nul !!

(28)

</SELECT>

<P>

Vos commentaires <TEXTAREA NAME=COM1 ROWS=3 COLS=40></TEXTAREA> </P>

</PRE>

</FORM>

ENQUETE sur la SATISFACTION des UTILISATEURS

Universitaire

C.N.R.S.

I.N.S.E.R.M.

Autre PUBLIC

Privé

Vos Nom et prénom :

Votre adresse électronique :

Je suis belle/beau , jeune , riche , en bonne santé

Votre opinion Satisfait

Vos commentaires

Envoyer

(29)

11. Les tableaux - H.T.M.L.

HTML 3 permet la fabrication de tableaux très visuels. On utilise les commandes suivantes :

11.1. Déclarer le début et la fin d'un tableau

<TABLE BORDER= CELLPADDING= CELLSPACING= WIDTH= HEIGHT= BGCOLOR=> </TABLE>

BORDER=

• BORDER=0 le tableau n'a pas de contour

• BORDER=n le tableau a un contour d'épaisseur "n" CELLPADDING=

• Définit l'espace entre l'objet et le contour d'une cellule CELLSPACING=

• Définit l'épaisseur du trait entre les cellules WIDTH=

• Fixe la largeur du tableau HEIGHT=

• Fixe la hauteur du tableau BGCOLOR=

• BGCOLOR="#RRGGBB"

Définit la couleur de fond de tout le tableau. RR, GG et BB sont les valeurs hexadécimales du Rouge(RR), Vert(GG) et Bleu(BB).

11.2. Définir le début et la fin d'une ligne

ALIGN=

• ALIGN=LEFT (par défaut) toutes les cellules de la ligne sont cadrées à gauche

(30)

• ALIGN=RIGHT toutes les cellules de la ligne sont cadrées à droite BGCOLOR=

• BGCOLOR="#RRGGBB"

Définit la couleur de fond des cellules de cette ligne. RR, GG et BB sont les valeurs hexadécimales du Rouge(RR), Vert(GG) et Bleu(BB).

11.3. Définit chaque élément de la ligne titre

Décrit chaque élément du tableau

COLSPAN=

• COLSPAN=n (par défaut n=1) la cellule occupe n colonnes.

ROWSPAN=

• ROWSPAN=n (par défaut n=1) la cellule occupe n lignes.

ALIGN=

• ALIGN= alignement horizontal du contenu de la cellule.

• ALIGN=LEFT (valeur par défaut) alignement à gauche de la cellule.

• ALIGN=RIGHT alignement à droite de la cellule.

• ALIGN=CENTER centrage dans la cellule.

VALIGN=

• VALIGN= alignement vertical du contenu de la cellule.

• VALIGN=BOTTOM (valeur par défaut) alignement au bas de la cellule.

• VALIGN=TOP alignement au sommet de la cellule.

• VALIGN=CENTER centrage dans la cellule.

WIDTH=

• WIDTH= largeur de la cellule en pourcentage ou en pixel.

BGCOLOR=

(31)

Définit la couleur de fond de la cellule. RR, GG et BB sont les valeurs hexadécimales du Rouge(RR), Vert(GG) et Bleu(BB).

11.4. Décrit le titre du tableau

ALIGN=

• ALIGN=TOP (par défaut) la légende du tableau est en haut • ALIGN=BOTTOM la légende du tableau est en bas

Exemple

:

<CAPTION>Comparatif modèle économique</CAPTION> <TH COLSPAN=3>Modèle <TH ROWSPAN=2>Vitesse<BR>en km/heure <TH ROWSPAN=2>Consommation<BR>en litre/100 km <TR> <TH>Marque</TH> <TH>Type</TH> <TH>Numero de série</TH> </TR> <TR> <TD>Peugeot 106</TD> <TD>B2</TD> <TD ALIGN=MIDDLE>234.34</TD> <TD>132</TD> <TD>5,7</TD> </TR> <TR> <TD>Citroën AX</TD> <TD>AT67B8</TD> <TD ALIGN=MIDDLE>6789</TD> <TD>126</TD> <TD>5,5</TD> </TR> </TABLE>

Résultat :

Comparatif modèle économique

Modèle

Marque Type Numero de série

Vitesse en km/heure Consommation en litre/100 km Peugeot 106 B2 234.34 132 5,7 Citroën AX AT67B8 6789 126 5,5

(32)

12. <FRAMESET> - H.T.M.L.

Netscape a implémenté le partage de la fenêtre en "cadres" ou "cellules" autonomes. Ceci revient à diviser la fenêtre en plusieurs zones appelées frames. Chaque zone est gérée indépendamment des autres. Chaque zone porte un nom.

Trois commandes permettent de gérer cette fonctionnalité, mais attention le corps du fichier n'est plus inclus dans <BODY> et </BODY> mais dans <FRAMESET> et </FRAMESET>.

permet de diviser une zone en cellules horizontales ou verticales.

• ROWS="n,n%,*,..."

divise la zone en cellules horizontales.

o n = hauteur en nombre de pixels

o n%= hauteur de la cellule en pourcentage de l'écran

o * = hauteur restante

• COLS="n,n%,*,..."

divise la zone en cellules verticales.

o n = largeur en nombre de pixels

o n%= largeur de la cellule en pourcentage de l'écran

o * = largeur restante

• BORDER

permet de supprimer (BORDER=0) ou d'agrandir la valeur du séparateur de cellules.

caractérise la cellule

• NAME="nom_de_la_zone"

• SRC="URL"

• SCROLLING="yes" ou "no" ou "auto"

• MARGINWIDTH= nombre de pixels de la marge verticale

• MARGINHEIGHT= nombre de pixels de la marge horizontale

• NORESIZE évite la modification de la taille par l'utilisateur

• BORDER= nombre de pixels du bord

• FRAMEBORDER="yes" ou "no" par défaut = "yes" "yes" le séparateur est en 3-D

"no" le séparateur est plat

• FRAMESPACING= nombre de pixels de la séparation

• BORDERCOLOR="#RRVVBB" couleur de la séparation

à partir de cette commande, le texte ne sera affiché que par les Browsers ne sachant pas gérer les frames.

(33)

donner le nom de la cellule ( cf attribut "NAME" de la commande <FRAME>) dans laquelle le

document sera affiché

• TARGET="Cellule-1" affichage dans la cellule "Cellule-1" • TARGET="_self" affichage dans la même cellule

• TARGET="_blank" affichage dans une nouvelle fenêtre

• TARGET="_top" suppression de toutes les frames, retour à un affichage classique

Exemple:

Le but de l'exemple est de fabriquer une page qui ressemble au tableau ci-dessous

Cellule droite-haute Cellule gauche Cellule droite-basse <HTML> <FRAMESET COLS="25%,*">

</FRAMESET> <NOFRAME>

Dommage, votre <I>Browser</I> ne permet pas les <I>frames</I>. </NOFRAME>

</HTML>

(34)

13. Divers - H.T.M.L.

D'autres fonctionnalités existent sous HTML.

13.1. Centrer un document

Pour centrer horizontalement du texte ou une image au milieu de la page.

Exemple

:

<CENTER> Je centre cette ligne. </CENTER>

Résultat

:

Je centre cette ligne.

13.2. Modification de la taille et de la couleur des caractères

Pour augmenter la taille des caractères dans le texte, et changer de couleur.

Exemple

:

<FONT SIZE=+1>C</FONT><FONT SIZE=+3>A</FONT><FONT SIZE=+4

COLOR="#00ff00">D</FONT><FONT SIZE=+3>O</FONT><FONT SIZE=+1>R</FONT>

Résultat

:

C

A

D

O

R

13.3. Tableau des couleurs

Vous pouvez utiliser le nom de la couleur en lieu et place des valeurs héxadécimales bien fastidieuses à utiliser.

(35)

Color Red Green Blue A voir aliceblue F0 F8 FF antiquewhite FA EB D7 aqua 00 FF FF aquamarine 7F FF D4 azure F0 FF FF beige F5 F5 DC bisque FF E4 C4 black 00 00 00 blanchedalmond FF EB CD blue 00 00 FF blueviolet 8A 2B E2 brown A5 2A 2A burlywood DE B8 87 cadetblue 5F 9E A0 chartreuse 7F FF 00 chocolate D2 69 1E coral FF 7F 50 cornflowerblue 64 95 ED cornsilk FF F8 DC crimson DC 14 3C cyan 00 FF FF darkblue 00 00 8B darkcyan 00 8B 8B darkgoldenrod B8 86 0B darkgray A9 A9 A9 darkgreen 00 64 00 darkkhaki BD B7 6B darkmagenta 8B 00 8B darkolivegreen 55 6B 2F darkorange FF 8C 00 darkorchid 99 32 CC darkred 8B 00 00 darksalmon E9 96 7A darkseagreen 8F BC 8F darkslateblue 48 3D 8B darkslategray 2F 4F 4F

(36)

darkturquoise 00 CE D1 darkviolet 94 00 D3 deeppink FF 14 93 deepskyblue 00 BF FF dimgray 69 69 69 dodgerblue 1E 90 FF firebrick B2 22 22 floralwhite FF FA F0 forestgreen 22 8B 22 fuchsia FF 00 FF gainsboro DC DC DC ghostwhite F8 F8 FF gold FF D7 00 goldenrod DA A5 20 gray 80 80 80 green 00 80 00 greenyellow AD FF 2F honeydew F0 FF F0 hotpink FF 69 B4 indianred CD 5C 5C indigo 4B 00 82 ivory FF FF F0 khaki F0 E6 8C lavender E6 E6 FA lavenderblush FF F0 F5 lawngreen 7C FC 00 lightpink FF B6 C1 lightsalmon FF A0 7A lightseagreen 20 B2 AA lightskyblue 87 CE FA lightslategray 77 88 99 lightsteelblue B0 C4 DE lightyellow FF FF E0 lime 00 FF 00 limegreen 32 CD 32 linen FA F0 E6 magenta FF 00 FF maroon 80 00 00

(37)

mediumaquamarine 66 CD AA mediumblue 00 00 CD mediumorchid BA 55 D3 mediumpurple 93 70 DB mediumseagreen 3C B3 71 mediumslateblue 7B 68 EE mediumspringgreen 00 FA 9A mediumturquoise 48 D1 CC mediumvioletred C7 15 85 midnightblue 19 19 70 mintcream F5 FF FA mistyrose FF E4 E1 moccasin FF E4 B5 navajowhite FF DE AD navy 00 00 80 oldlace FD F5 E6 olive 80 80 00 olivedrab 6B 8E 23 orange FF A5 00 orangered FF A5 00 orchid DA 70 D6 palegoldenrod EE E8 AA palegreen 98 FB 98 paleturquoise AF EE EE palevioletred DB 70 93 papayawhip FF EF D5 peachpuff FF DA B9 peru CD 85 3F pink FF C0 CB plum DD A0 DD powderblue B0 E0 E6 purple 80 00 80 red FF 00 00 rosybrown BC 8F 8F royalblue 41 69 E1 saddlebrown 8B 45 13 salmon FA 80 72 sandybrown F4 A4 60

(38)

seagreen 2E 8B 57 seashell FF F5 EE sienna A0 52 2D silver C0 C0 C0 skyblue 87 CE EB slateblue 6A 5A CD slategray 70 80 90 snow FF FA FA springgreen 00 FF 7F steelblue 46 82 B4 tan D2 B4 8C teal 00 80 80 thistle D8 BF D8 tomato FF 63 47 turquoise 40 E0 D0 violet EE 82 EE wheat F5 DE B3 white FF FF FF whitesmoke F5 F5 F5 yellow FF FF 00 yellowgreen 9A CD 32

13.4. Indice et exposant

HTML 3 permet indice et exposant.

et

Exemple

:

F<SUB>(x)</SUB>=x<SUP>2</SUP>+2x+10 Résultat

:

F

(x)

= x

2

+ 2x + 10

(39)

13.5. Fond sonore

P

ermet de lancer un fond sonore.

A utiliser avec précaution car les fichiers sons sont le plus souvent très volumineux.

• SRC= le nom du fichier son à faire jouer pendant l'affichage de la page Les types de fichiers acceptés sont

o midi

o wav

o au

• LOOP= "n" spécifie que le morceau de musique sera joué n fois

Exemple :

Résultat

:

Si vous avez allumé vos hauts-parleurs, vous entendez l'exemple !

Charmant n'est-ce pas ?

13.6. Insertion Vidéo

Permet d'insérer une vidéo.

A utiliser avec précaution car les fichiers videos sont le plus souvent très volumineux.

WIDTH="largeur" HEIGHT="hauteur" ALIGN="BOTTOM"

LOOP="false" </EMBED>

• SRC= le nom du fichier video Les types de fichiers acceptés sont

o mpeg

o mpg

• WIDTH= largeur en pixels de la fenêtre

• HEIGHT= hauteur en pixels de la fenêtre

• ALIGN= alignement du texte et de la fenêtre :

(40)

"ABSBOTTOM"

• LOOP= "true" ou "false"

Exemple :

Résultat

: