DOKU WIKI SIO 2022

Créateur de livres
Ajouter cette page à votre livre

Créateur de livres
Retirer cette page de votre livre

HTML

Présentation

Les pages HTML (HyperText Markup Language) sont les éléments de base de la navigation sur le Web. Il s'agit de pages visualisables sur n'importe quelle machine de la même manière, quelle qu'en soit le système d'exploitation, l'interface, la puissance…, et ce grâce au langage HTML et à ses balises ou marqueurs. Lors de l’envoi d’un serveur vers le poste utilisateur par le protocole HTTP (HyperText Transfert Protocol), seul le texte correspondant est transmis. La mise en forme sera faite par le navigateur du poste récepteur en fonction des balises définies dans le fichier HTML.

Pages Web évoluées

Si le langage HTML mis en forme par le navigateur reste au final la seule partie visible pour l’utilisateur, les pages Web incorporent aujourd’hui de nombreuses améliorations ou simplifications :

Feuilles de style : complément indispensable des sites Web, ces feuilles de style enregistrent en un fichier unique les options de mise en forme (taille et police de caractères, couleur des fonds et du texte, paragraphes, etc). Elles évitent d’avoir à réécrire la mise en forme dans chaque page HTML, et permettent la modification de la mise en forme en une seule fois.
Objets riches : qu’il s’agisse de vidéos, d’applet Java, de contrôles ActiveX ou d’animations flash, ces éléments nécessitent que le navigateur intègre un plugin ou module additionnel capable de les lire
Scripts côté client : exprimés en langage Javascript ou VBScript, ils permettent de contrôler les actions de l’utilisateur (formats de saisies, remplissages de zones, etc), d’automatiser des tâches (calculs intermédiaires) sans repasser par un dialogue avec le serveur Web, de proposer des menus plus riches.
Scripts côtés serveur : ils réalisent toutes les tâches complexes pour chaque connexion (automatisation, interrogation de base de données, remplissage d’un panier d’achat, etc).
Contrairement aux scripts côté client, ils sont réalisés par le serveur Web. Leur code n’est pas visible par l’utilisateur final. Les langages utilisés sont notamment PHP, JSP ou ASP.
Client riche : le langage AJAX (Javascript et XML) permet de renvoyer vers le client la réalisation d’un certain nombre de traitements qui auraient dû être traités par le script côté serveur, de manière à décharger la machine centrale et à exploiter la puissance de poste client.

Syntaxe

HTML un langage de description de contenu qui permet de transporter des informations très compactes (du texte ASCII), la charge de mise en forme étant dévolue au navigateur. Il se base sur des balises (markup) indiquant les mises en forme à appliquer au texte, les intégrations à ajouter (fond, image, son, etc).

Les balises

Elles s’écrivent entre <…>, et possèdent la plupart du temps une balise fermante </…>. Exemple : la mise en gras se fait par <b>texte à mettre en gras</b>. On ferme les balises dans l’ordre inverse où on les a ouvertes

Exemple : <HTML> <b><i>………..</i></b> </HTML> Les balises peuvent comporter des options au format option=“valeur”

Exemple : <HTML> <table align=“ cente” r border=“ 2” bgcolor=“ 9933CC” > </HTML>

1 La structure d’une page WEB

Elle comporte deux parties :

L’entête (<html><head></html>) qui décrit la page (mots clés (<html><meta></html>), auteur, éditeur utilisé, titre affiché dans la barre de titre (<html><title></html>), etc) et comporte les scripts côté client (notamment les déclarations de fonctions).
Le corps (<html><BODY></html>) qui contient tout ce qui sera affiché dans le navigateur.

Illustration

<html>                   indique que le document contient du langage HTML 
Entete : balise <head>
    - Titre pour la barre de titre du navigateur : balise <title>
    - Commentaires sur l’auteur, l’outil de création, les mots clés... : balise <meta>
</head>
corps : balise <body>
  1.textes
  2.tableaux : balise <table> 
  3.images : balise <img...>
  4.liens : balise <a href=>
  5. commentaires HTML <!...>
</body>
</html>

Frames, multimédia, objets et chargement

Au delà du texte même qu’elle contient, une page Web peut faire référence à des objets externes : Une page peut ainsi n’être que le cadre de présentation de multiples pages : la balise <html><frameset></html> et son découpage en <html><frame></html> permet de présenter des informations de manière structurée, tout en économisant certains transferts pour des parties stables (menus, entête, etc).

On voit aussi sur cette copie d’écran que la page intègre des images (grâce à la balise <img src=“nom_image”…>). On pourra aussi associer du son (<html><embed src=“nom_fichiersonore”…></html>). Enfin, une page pourra intégrer un élément plus complexe comme des applets java (balise <html><applet…></html>) ou des contrôles ActiveX Microsoft (balise <html><object…></html>).

Toute la difficulté de ces pages composites réside dans leur chargement sur le poste client. En effet, le client demande une page HTML. Le serveur lui retourne le contenu textuel de cette page (le frame initial, la page brute). Le logiciel client doit alors parcourir le code et repérer tous les éléments intégrés à la page, pour lesquels il doit faire une demande de chargement (GET) auprès du serveur.

Dans les premières versions des serveurs HTTP, le dialogue était réalisé en mode UDP : pour chacune des parties de la page, une demande unique était adressée au serveur. Intéressant lorsque les pages étaient essentiellement composées de texte, ce principe est devenu limité. Les échanges aujourd’hui sont réalisés en TCP (sur le port 80) avec l’envoi complet de toutes les parties sur un seul dialogue.

Le client doit quand même réaliser une demande pour chaque partie constitutive de la page. À la fin du chargement de la page et de ses compléments, la connexion est terminée par le serveur ou conservée le temps de la session (keep-alive)

2 HTML et XHTML

HTML est une norme qui découle d’un standard plus large nommé SGML (Standard Generalized Markup Language) qui a aussi donné lieu à la norme XML (Extensible Markup Language) pour le stockage des données, indépendamment de sa mise en forme. Très souple dans l’écriture du code (majuscules, valeurs encadrées ou non de guillemets, balises non fermées), le HTML pose des problèmes lors de la validation de pages par des automates (notamment les moteurs de recherche) et parfois de son affichage dans les navigateurs. C’est pourquoi le standard XHTML a vu le jour qui impose au HTML la rigueur nécessaire au XML. Les balises et options doivent être écrites en minuscule. Toute balise doit avoir une balise fermante (y compris pour <html><br></html>, <html><link></html> ou <html><meta></html> par exemple). Les valeurs sont toutes écrites entre “ ” .

Pour des questions de lisibilité et de repérage des balises, ce document ne respecte pas le XHTML.

3 Entête : La balise <HEAD>

Compris entre la balise <html><head></html> et <html></head></html>, l’entête permet de donner des informations sur le document. Il ne doit pas contenir de texte à afficher sur la page WEB. En revanche, compris entre la balise <html><title></html> et <html></title></html>, on peut indiquer le texte à afficher dans la barre de titre du navigateur. On y placera aussi toutes les informations de description du contenu de la page grâce à la balise <html><meta></html> et ses options NAME (qui définit le nom de l’information qui suit, par exemple author, copyright, revisitafter, date, etc) et CONTENT (qui donne la valeur qui sera étudiée par les moteurs de recherche par exemple). Les scripts sont généralement placés dans l’entête.

4 Corps de la page : la balise <BODY>

C’est ici que l’on pourra définir les options suivantes :

Option	Syntaxe
couleur du fond de la page	BGCOLOR=“codecouleur”
image d’arrière plan	BACKGROUND=“fichierimage”
son diffusé en fond sonore	BGSOUND=“fichierson”
couleur par défaut du texte	TEXT=“codecouleur”
couleur des liens hypertexte	LINK=“codecouleur”
couleur des liens déjà visités	VLINK=“codecouleur”
couleur du lien en cours de sélection	ALINK = “code couleur”

Par exemple, pour obtenir un texte rouge (FF0000) sur fond noir (000000), et que les liens soient en blanc (FFFFFF), puis verts s’ils sont visités (0000FF), on aura une balise comme suit : <HTML><body bgcolot=“000000” text=“FF0000” link=“FFFFFF” vlink=“0000FF”></HTML>

II La mise en forme

1 Les titres de paragraphe

Des formats prédéfinis permettent la mise en forme des titres. Le résultat peut différer d’un navigateur à l’autre.

Balises

Balise	Explication
H1 à H10	Crée une hiérarchie de titres
	Option	Usage
	ALIGN=Center/Left/Right	détermine l'alignement du titre

2 La mise en forme des paragraphes

Le HTML ne prend pas en compte la mise en forme qui peut être faite dans le fichier textuel. Les retours à la ligne, les tabulations ou le centrage réalisés lors de la création du code sont ignorées, et c’est au travers des balises que l’on réalise cette organisation.

Balises

Balise	Valeur ou option	Explication
P		encadre un paragraphe avec une mise en forme générale
ALIGN	Center/Left/Right	détermine l'alignement du paragraphe
PRE		encadre un paragraphe en respectant sa mise en forme du texte Les retours à la ligne, les tabulations, la police de caractère… sont reproduits à l’identique dans la page WEB
DIV		Définit l’alignement pour une division de texte (toutes les balises de paragraphe, image et texte qu’il encadre). Est aussi utilisé avec les feuilles de style pour enrichir la mise en page (voir fiche css)
DIV	ALIGN=Center / Left / Right	détermine l'alignement de la division
BR		Retourne à la ligne Cette balise n'a pas besoin d'être refermée (pas de </BR>) en html. En XHTML, on écrira <br/> qui ouvre et ferme simultanément.
CENTER		centre le texte. N’est plus utilisé et remplacé par <DIV ALIGN=“center”>
BLOCKQUOTE DIR		encadre un paragraphe indenté
HR		trace une ligne séparatrice horizontale (Horizontal Rule)
	WIDTH=valeur	définit la largeur du trait
	SIZE=valeur	définit l’épaisseur du trait
	NOSHADE	élimine l’affichage en 3D

3 La mise en forme des caractères

Pour modifier les paramètres d’affichage du texte (gras, police, taille,…), on recourra aux balises ci dessous.

Police de caractères

Balise	Valeur ou option	Explication
FONT		détermine la police de caractères
	FACE=nompolice	définit la police (Arial,Times….)
	SIZE=valeur	définit la taille de la police
	COLOR=codecouleur	détermine la couleur du texte

Les styles

Balise	Style
B	gras (bold)
U>	souligné (underlined)
I>	Italique
S>	Caractère barré (strike)
SUB>	Indice
SUP>	Exposant
EM>	style appuyé (emphathised), généralement en italique
STRONG	style appuyé, généralement en gras
BIG	Caractère plus gros
SMALL	Caractère plus petit

Autres balises

Balise	Explication
BLINK	fait clignoter le texte (avec Netscape uniquement)
MARQUEE	affiche un texte défilant appelé bannière
BEHAVIOR	permet de modifier le mode de défilement avec les valeurs SCROLL (valeur par défaut) : défile de gauche à droite et s’arrête après avoir atteint le bord droit SLIDE : idem mais de droite à gauche ALTERNATE : défilement alternatif gauche→droite et droite→gauche.

4 Les caractères spéciaux

Certains caractères ne peuvent être affichés directement de manière sûre et nécessitent de passer par un caractère spécifique reconnu de manière universelle (par exemple pour les caractères accentués).

Caractère	Usage
	espace insécable (Non Brokable SPace)
< ou <	Signe inférieur à < (Lesser Then)
> ou >	Signe supérieur à > (Greater Then)
&	é commercial & (AMPerstand)
é	é
&egrave ;	è
&ecirc ;	ê
&Ccedil	ç

5 Les codes de couleur

Les couleurs affichables pour le texte, le fond et les liens, sont déterminées par le célèbre triolet RVB : rouge, vert et bleu. Pour chacune de ces couleurs, on peut définir une valeur comprise entre 0 et 255, exprimée sur deux positions hexadécimales. On obtient ainsi 16 millions de couleurs affichables. Cependant, tous les navigateurs ne les supportent pas nécessairement. Voici les valeurs les plus courantes. Le noir correspond à la valeur #000000.

Aujourd’hui, tous les codes de couleur ont un nom associé. En voici quelques exemples

III Les objets de présentation

1 Les tableaux

Il est possible de présenter les informations sous forme de tableau. On les utilise aujourd’hui à la place des frames pour séparer les différentes zones d’un document (entête, menu, zone d’affichage de l’information). C’est aussi un outil très courant pour organiser le texte en colonnes ou positionner des éléments à droite et à gauche, avec les balises <html><div></html>.

Balises

Balise	Valeur ou option	Explication
CAPTION		titre du tableau (optionnel)
CAPTION	VALIGN=top/bottom	cette option permet de déterminer si le titre sera au-dessus (top) ou au-dessous (bottom) du tableau
TABLE		encadre la définition du tableau
	Les options suivantes sont facultatives et devraient être renvoyées dans le CSS
	CELLSPACING=valeurnumérique	définit l'espace entre les cases (lignes et colonnes)
	BORDER=valeurnumérique	définit l’épaisseur (en points) de la bordure
TH		encadre les titres des colonnes (table header)
TR		encadre une nouvelle ligne (table row)
TD		définit le contenu des cellules (table data)
Les options suivantes sont valables pour le tableau et/ou les cases/lignes/colonnes qui le composent
HEIGHT	valeurnumérique (en points ou en %)	définit la hauteur minimum du tableau
WIDTH	valeurnumérique (en points ou en %)	définit la largeur de l’élément
COLSPAN	valeurnumérique	crée une case sur le nombre de colonnes spécifié
ROWSPAN	valeurnumérique	crée une case sur le nombre de lignes spécifié
ALIGN	center/left/right	détermine l'alignement du texte dans les cases de la ligne
VALIGN	top/middle/bottom	détermine la position du texte dans la hauteur de la cellule ou pour toute la ligne
BGCOLOR	Valeurnumérique	donne la couleur du fond pour cette partie du tableau
CELLPADDING		définit l’espace entre le texte et le bord de la cellule

2 Les listes à puces ou numérotées

La création de listes permet l’affichage d’informations de manière structurée grâce à des puces ou une numérotation.

Balises

La déclaration d'une liste se fait par les balises <html><OL></html> ou <html><UL></html>. La numérotation ou le niveau de puce continue tant que la balise correspondante n’est pas refermée. L’affichage d’une puce/numéro nécessite la balise <html><LI></html>

Balise	Explication
UL	(Unordered List) : encadre la déclaration des listes à puces On choisira la puce par l’option type = disc \| square \| circle qui donnent respectivement un rond plein, un carré plein ou un cercle vide.
OL	(Ordered List) : encadre la déclaration des listes numérotées On choisira la numérotation par l’option type = 1 \| a \| A\| i \| I Le nnuméro de départ est défini par l’option START = numéro
LI	(List Item) : déclare une nouvelle ligne comportant une puce ou un numéro
LH	(List Header) : encadre la déclaration du titre d'une liste

Exemples : Il est possible de combiner ces diverses possibilités.

Exemple 1

HTML <HTML> <UL>a <LH>le titre</LH>

<LI> tiret 1
<LI> tiret 2
<UL> sous liste
  <LI>sl1
  <LI>sl2 
</UL>
<LI>tiret 3

</UL> </HTML>

RÉSULTAT

a
Le titre
tiret 1
tiret 2
- sous liste
- sl1
- sl2
tiret 3

Exemple 2

HTML <HTML> <OL>

<LI> tiret 1
<LI> tiret 2 
<UL> sous liste
  <LI>sl1
  <LI>sl2 
</UL>
<LI>tiret 3 
<OL>
  <LI>a1
  <LI>a2 
</OL>

</OL> </HTML>

RÉSULTAT

tiret 1
tiret 2

sous liste
sl1
sl2

tiret 3
1. a1
2. a2

Remarque : la mise en forme (tabulation) du code HTML n’est là que pour la lisibilité, elle est ignorée par le navigateur.

3 Insertion d'image

Il est à noter que seules les images au format JPEG (extensions .jpg ou .jpeg), GIF et PNG sont supportées par les navigateurs. On ne peut pas intégrer d’image au format bitmap, qui sont trop volumineuses.

Balises

Balise	Valeur	Explication
IMG		inclut une image dans le document
	SRC=“fichierimage”	définit le chemin d'accès au fichier et son nom
	ALIGN=Left/Right	définit l'alignement vertical de l'image dans la page
	ALIGN=Top/Middle/Bottom	définit l'alignement du texte qui suit l'image par rapport à celle-ci (en haut,au milieu ou en bas).
	On choisira une valeur soit pour l'alignement vertical, soit pour l'alignement du texte
	BORDER=valeurnumérique	définit un encadrement autour de l'image

4 Incorporation de texte

Lorsque certaines parties de code sont amenées à être reproduites sur des pages (par exemple une barre de menu, l’incorporation des feuilles de style, les coordonnées de l’entreprise en bas de chaque page, etc), on peut être amené à enregistrer ces informations récurrentes dans un fichier (ou plusieurs) à part.

On peut souhaiter alors inclure ce contenu à l’intérieur d’autres pages, mais cette possibilité n’est offerte que par les langages de script côté serveur (PHP, ASP et autre) par une commande nommée include. Il existe deux solutions intermédiaires en HTML : la balise <html><object></html> et la balise <html><iframe></html>, qui font apparaître le texte incorporé à l’intérieur d’un cadre avec barre de défilement. <HTML> <object data = “intro.html” type = “text/html”> </object> <iframe src=“intro.html” name=“nom_cadre”></iframe> </HTML>

Ces deux solutions équivalentes (mais seule la seconde semble être supportée par IE et Firefox) acceptent les options WIDTH et HEIGHT qui permettent de définir la largeur et la hauteur du cadre en nombre de pixels, de pouces, de centimètres ou en pourcentage.

IV Liens hypertexte

Le but même des pages Web est de permettre la navigation de pages en pages grâce à des liens hypertexte (c’est à dire du texte réactif). Il existe plusieurs possibilités de navigation :

A l’intérieur même d’une page, qui nécessite la dépose d’un signet sur un point repérable, puis d’un lien vers ce signet
Entre pages d’un site : on naviguera donc dans une arborescence grâce à des liens relatifs (c’est à dire qui donnent le chemin d’accès aux fichiers par rapport à l’endroit de la page en cours)
Entre sites : on devra alors spécifier un chemin absolu précisant l’intégralité des informations nécessaires à la navigation, c’est à dire l’URL complète du fichier ( http://nomSite.nomdomaine.nomExtension/nomFichier).

Balises

Balise	Valeur ou option	Explication
A		définit un signet (bookmark) dans la page ou crée un lien hypertexte. La balise pose une ancre (anchor) sur laquelle la souris pourra agir. Il y a deux possibilités : soit on situe un point particulier dans le même document (on parlera de signet), soit on renvoie vers un signet ou un autre document (lien hypertexte)
	NAME = nom_du_signet	positionne une marque dans la page Attention : la casse (majuscule/minuscule) est prise en compte.
	HREF [chemin][/fichier][#nom signet]	établit un lien vers un répertoire, un document ou un signet.
	HREF [URL][/fichier][#nom signet]	établit un lien vers un site et un document ou un signet dans ce site.
	TARGET = cadre/top	ouvre la fenêtre dans le cadre nommé (voir frames) ou par dessus un document avec cadre

Exemples :

définition d'un signet appelé ici : <html><a name=“ici” /></html>
définition d'un lien vers ce signet : <html><a href=#ici>lienversici</a></html>
définition d’un lien vers une page nommée pag2.htm : <html><a href=Pag2.htm>Page2</a></html>
définition d’un lien en cliquant sur une image : <html><a href=Pag2.htm><img src=suite.gif></a></html>
définition d’un lien vers un autre site : <html><a href=“http://www.ac-caen.fr”>Le site académique</a></html>

V Les frames (ou cadres)

Dans un document HTML, il est possible de composer l’écran en plusieurs sous parties affichant chacune une page HTML. Le premier intérêt de cette technique est que certaines parties récurrentes dans un site Web peuvent n’être envoyées qu’une seule fois par le serveur. Aux premiers temps de l’internet, avec des connexions très lentes, il y avait un intérêt évident.

Cette technique a tendance à disparaître pour des questions d’ergonomie et de simplicité d’usage. On lui préfère les tableaux ou la combinaison de balises <html><div></html> ou <html><span></html> et de feuilles de style.

Balises

Balise	Valeur ou option	Explication
FRAMESET		encadre la déclaration d’une page avec FRAME
	FRAMEBORDER=valeurnumérique	définit la taille de l’encadrement
	FRAMESPACING=valeurnumérique	définit la distance entre les cadres
	COLS=v1,v2,v3…	définit la taille des cadres en colonne
	ROWS=v1,v2,v3…	définit la taille des cadres en ligne
	Pour ROWS et COLS, les dernières valeurs peuvent être remplacées par *, indiquant que l’on attribue le reste pour la dernière ligne ou colonne.
FRAME		encadre la déclaration d’un des cadres du document avec FRAME
	NAME=nom	indique le nom affecté au cadre
	SRC=fichier	indique le fichier qui sera affiché dans ce cadre
	MARGINWIDTH=Valeurnumérique	indique la taille de la bordure
	MARGINHEIGHT=valeurnumérique	indique la hauteur de la bordure
	WIDTH=valeurnumérique(en points ou en %)	indique la largeur du cadre
	HEIGHT=valeurnumérique(enpointsouen%)	indique la hauteur du cadre
	NORESIZE	empêche l’utilisateur de redimensionner le cadre
	SCROLLING=Yes/No/Auto	définit les possibilités de défilement du cadre
	HSCROLL=Yes/No	affiche (ou non) une barre de défilement horizontale
	VSCROLL=Yes/No	affiche (ou non) une barre de défilement verticale
NOFRAME		encadre le message affiché si le navigateur ne supporte pas les FRAMES

Exemple

Un document (par exemple, AccueilLJR.htm) permettra cette disposition à l’écran.

On dispose ici d’un document comportant une première division – nommée frameset - horizontale (par exemple 15% de l’écran pour l’entête et 85% pour le reste), la deuxième partie horizontale étant un second frameset composé de deux colonnes (par exemple 150 points pour le menu et 450 points pour le reste).

Il contiendra, après sa partie HEAD, les éléments suivants : <HTML> <html>… <frameset rows=“15%,*” frameborder=“2”>

 <frame name="EnHaut" src="entete.htm" scrolling="no" noresize> 
 <frameset cols="150,450" frameborder="2">
     <frame name="GAUCHE" src="Menu.htm" scrolling="auto">
     <frame name="DROITE" src="Formation.htm" scrolling="auto"> 
 </frameset>

</frameset>

 <noframe>
     ....Texte à afficher de type « Votre navigateur ne supporte pas les frames » 
 </noframe>

… </html> </HTML>

Par ailleurs, les liens du Menu (fichier HTML pointé par la partie de gauche de la partie du bas) seront exprimés en réutilisant le nom des cadres tels que définis dans le fichier AccueilLJR.htm : <HTML><a href = “Formation.htm” target=“DROITE”>La Formation</a></HTML>

VI Les formulaires

Les formulaires vont permettre d'établir une interaction entre l'utilisateur et le serveur WEB. Le principe est de donner des zones à saisir et de les envoyer par l'intermédiaire d'un bouton SUBMIT au serveur qui, à l'aide de programmes spécifiques (PERL, CGI, PHP, ou autres), pourra en tirer un résultat.

Balises

Balise	Valeur ou Option	Explication
FORM		Inclut un formulaire dans le document
	method=POST/GET	indique si l’on doit envoyer les valeurs en les masquant (POST) ou visibles(GET)
	action=“fichier”	indique quelle est la page appelée lorsque l’on clique sur le bouton submit. Cette page pourra traiter les données du formulaire
INPUT		permet d'insérer un objet particulier dans un formulaire
	TYPE=…	voir tableau des objets de formulaire ci-dessous
	NAME=nom	définit le nom de l'objet
	ID=valeur	définit l’identifiant d’un objet. Utilisé lorsque plusieurs éléments ont le même nom.
	VALUE=valeur	valeur attribuée à l'objet input ou texte affiché sur les bouton
	* L'id sert à créer un groupe d'objets ayant tous le même nom (name) mais des valeurs différents. Cela permet de créer des choix pour les boutons et cases à cocher et pour les scripts côté client. * Le nom de l'objet (name) servira pour la récupération dans les autres pages et pour les scripts côté client. * La valeur (value) de l'objet est l'information envoyée par le formulaire (hors valeurs renseignées pour les zones de saisie) et l'intitulé des boutons de commande.
	SIZE=valeurnumérique	définit le nombre de caractères à saisir pour les zones de texte (text et password)
SELECT		permet d'inclure une liste de choix (déroulante ou non) dans un formulaire
	NAME=nom	définit le nom de l'objet
	SIZE=valeurnumérique	nombre d'éléments dans la liste
	MULTIPLE	permet de choisir plusieurs options dans la liste (ne marche pas sur tous les navigateurs)
	Les données de la liste sont définies par des balises <HTML><option>valeur1<option> <option>valeur2<option>…</HTML>
TEXTAREA		définit une zone de saisie étendue
	ROWS=valeur	nombre de lignes de texte
	COLS=valeur	nombre de caractères (colonnes) par ligne

Les objets des formulaires

Les objets input peuvent prendre plusieurs formes.

Type	Description	Syntaxe
Checkbox	Case à cocher qui permet d’activer ou non une valeur. La propriété CHECKED indique si l’objet est coché	<HTML><input name=“abonne”type=“Checkbox” CHECKED></HTML>
File	Permet d’envoyer le contenu d’un fichier choisi sur le disque du client. Ce bouton fait apparaître un bouton permettant de parcourir le disque local. Élément reconnu par Netscape uniquement.	<HTML><input name=“fichier” type=“File”></HTML>
Image	Permet de positionner une image (notamment pour les listes à puces). La propriété SRC donne le chemin d’accès à l’image	<HTML><input src=“./beck.gif” name=“liste” type=“Image”></HTML>
Password	Zone de texte où les données saisies sont remplacées par le caractère *	<HTML><input name=“passe” type=“Password”></HTML>
Radio	Bouton d’option qui permet de choisir une valeur parmi plusieurs. La propriété CHECKED indique si l’objet est validé	<HTML><input name=“rad0” type=“Radio”></HTML>
Reset	Bouton qui remet à zéro toutes les valeurs du formulaire	<HTML><input value=“Effacer” name=“raz” type=“Reset”></HTML>
Submit	Bouton qui envoie les données du formulaire vers la page précisée dans la propriété action	<HTML><input value=“Envoyer” name=“sub” type=“Submit”></HTML>
Text	Zone de texte standard	<HTML><input value=“entrez votre nom” name=“nom” type=“Text”></HTML>

Il existe deux autres objets qui ne sont pas du type Input. Ils possèdent leur propre balise et reconnaissent les propriétés name et value. Ils sont présentés dans le tableau ci-dessous.

Nom d’objet	Description	Syntaxe
TEXTAREA	Zone de texte étendue avec retour à la ligne, barres de défilement… Les propriétés ROWS et COLS définissent le nombre de ligne et le nombre de colonne de la zone (nombre de caractères par ligne).

<textarea name=“zone” rows=“12” cols=“25”> </textarea> </HTML> |

SELECT et OPTION

Liste déroulante (SELECT) qui peut être à choix simple ou à choix multiple (attribut MULTIPLE dans la balise SELECT). Contenu de la liste (OPTION), on peut indiquer quelle est la valeur sélectionnée par défaut en ajoutant l’attribut SELECTED dans la balise OPTION)

<option selected>Caen </option>
<option>Cherbourg </option>
<option>Alençon</option>

</select></HTML>

Table des matières

HTML

Présentation

Pages Web évoluées

Syntaxe

Les balises

1 La structure d’une page WEB

Frames, multimédia, objets et chargement

2 HTML et XHTML

3 Entête : La balise <HEAD>

4 Corps de la page : la balise <BODY>

II La mise en forme

1 Les titres de paragraphe

Balises

2 La mise en forme des paragraphes

Balises

3 La mise en forme des caractères

Police de caractères

Les styles

Autres balises

4 Les caractères spéciaux

5 Les codes de couleur

III Les objets de présentation

1 Les tableaux

Balises

2 Les listes à puces ou numérotées

Balises

3 Insertion d'image

Balises

4 Incorporation de texte

IV Liens hypertexte

Balises

V Les frames (ou cadres)

Balises

Exemple

VI Les formulaires

Balises

Les objets des formulaires