14/04/2014

Introduction Dveloppement web statique HTML4

amel.ksibi@gmail.com
World Wide Web (not WWW) : la "toile virtuelle" forme par les diffrents

documents (appels pages web ) lis entre eux par des hyperliens.
Les pages web sont gnralement organises autour d'une page d'accueil, jouant un point

central dans la navigation l'aide des liens hypertextes. Cet ensemble cohrent de pages web lies par des liens hypertextes et articules autour d'une page d'accueil commune est appele site web. Le Web est ainsi une norme archive vivante compose de sites web proposant des pages web pouvant contenir du texte mis en forme, des images, des sons, des vido, etc.

Introduction
Le web est compos de pages web stockes sur des serveurs web, c'est--dire des

Introduction
HTML permet la lecture de documents sur Internet partir de machines diffrentes,

machines connectes Internet en permanence et charges de fournir les pages web demandes.
L'lment cl pour la navigation est le navigateur (en anglais browser, ) c'est--dire le

grce au protocole HTTP, permettant daccs via le rseau des documents reprs par une adresse unique, appele URL.

logiciel client capable d'interroger les serveurs web, d'exploiter leurs rsultats et de mettre en page les informations grce aux instructions contenues dans la page HTML.
Parmi les principaux navigateurs utiliss sur Internet, citons notamment les suivants :
o Mozilla Firefox, o Microsoft Internet Explorer, o Netscape Navigator, o Safari.

HTML: Dfinition
HTML ( HyperText Mark-Up Language ) est un langage dit de marquage (de

HTML: Versions
HTML 1.0 en 1990 : liens hypertextes HTML 2.0 en 1995: premire spcification: ajout des images HTML 3.0 en 1997: standardisation des tableaux ainsi que d'un grand nombre d'lments

structuration ou de balisage )
Rle : formaliser l'criture d'un document avec des balises de formatage. Les balises permettent d'indiquer la faon dont doit tre prsent le document et les

de prsentation.
HTML 4.0 en 1997 : Standardisation des feuilles de style et les cadres (frames). HTML 5.0 partir de 2008 et en cours de spcification en 2012: Nouvelles possibilits en

liens qu'il tablit avec d'autres documents. Le langage HTML a t dvelopp par Tim Berners-Lee au CERN (Suisse) en 1990 et utilis sur le Web depuis.

terme de cration d' applications Web riches bnficiant de l'intgration d'lments multimdias et d'interactivit.

14/04/2014

Balises HTML
Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de dcrire la mise en page et la

Comment utiliser les balises HTML ?

Une balise est un lment de texte (un nom) encadre par le caractre infrieur

(<) et le caractre suprieur (>). par exemple <H1> .

forme d'un contenu rdig en texte simple.

Une page HTML est un simple fichier texte contenant

Les balises HTML ne sont pas sensibles la casse, c'est--dire qu'elles

peuvent tre saisies indiffremment en minuscules ou en majuscules !

des balises permettant de mettre en forme le texte, les images, etc. Balise= marqueur = repre = tag

Les balises HTML fonctionnent par paire afin d'agir sur les lments qu'elles

encadrent. La premire est appele balise d'ouverture (parfois balise ouvrante) et la seconde balise de fermeture (ou fermante). La balise fermante est prcd du caractre /) : <marqueur> Votre texte format </marqueur> exemple: <b> Ce texte est en gras </b> exemple un retour la ligne.

Les balises HTML peuvent parfois tre uniques : la balise <br> reprsente par

Imbrication des balises

Les balises HTML ont la particularit de pouvoir tre imbriques

Attribut HTML
Un attribut est un lment, prsent au sein de la balise ouvrante, permettant de dfinir

de manire hirarchique afin de permettre le cumul de leur proprits. Voici un exemple de texte format avec des balises imbriques : <i><u>exemple</u>, encyclopdie informatique libre</i> exemple, encyclopdie informatique libre l'exemple ci-dessous n'est pas correct : <i><b>exemple</i>, encyclopdie informatique libre</b>

des proprits supplmentaires.

Les attributs se prsentent la plupart du temps comme une paire cl=valeur . Exemple d'attribut pour la balise <p>, permettant de spcifier que le texte doit tre

align sur la droite : <p align="right">Exemple de paragraphe</p>

Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir (aucune,)

une ou plusieurs valeurs.

Espaces, saut de ligne et tabulations

Le langage HTML ne tient pas compte des espaces, des tabulations et des

Commentaires HTML
Il est possible d'ajouter des lments d'information dans une page web sans

sauts de ligne.

Il considre une suite d'un ou plusieurs espaces/tabulations/saut de ligne

comme une seule espace.

que ceux-ci soient affichs l'cran grce un jeu de balises spcifique, appel balises de commentaires. <!-- Voici un commentaire -->
Les balises de commentaires permettent de mettre en commentaire du

Le langage HTML possde par contre des lments permettant de dfinir

chacun de ces lments de mise en forme.

navigateur

<br>: Saut de ligne manuel <NOBR> </NOBR>: empcher le retour automatique la ligne ralis par le

texte mais peuvent galement servir commenter du code HTML.

A noter: il existe une exception pour le code contenu dans des balises <PRE>

dont l'objectif est justement de conserver le formatage du texte (espaces, sauts de lignes, etc.) !

14/04/2014

Notion d'un document HTML

Une page HTML est un simple fichier contenant du texte format

Structure dun document HTML

Toute page doit en effet dbuter par la balise <HTML> et se

avec des balises HTML. Par convention, l'extension donne au fichier est .htm ou .html. Une page web peut tre construite partir du plus basique des diteurs de texte ( bloc-note par exemple), mais il existe des diteurs beaucoup plus volus. Les diteurs WYSIWYG (What You See Is What You Get, sont des diteurs graphiques permettant de travailler sur une page web telle qu'elle sera affiche sur un navigateur quelques dtails prs.

finir par </HTML>.

Entre ces deux balises, on dfinit deux zones :
l'en-tte, spcifi par les commandes <HEAD> et </HEAD>, le corps, dlimit par: <BODY> et </BODY>.
<HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML>

Structure dun document HTML

<HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </ BODY> Ceci est le dbut d'un document de type HTML. Ceci est la fin d'un document de type HTML. Ceci est le dbut de la zone d'en-tte (contenant des informations destines au browser). Ceci est la fin de la zone d'en-tte. Ceci est le dbut du Titre de la page. Ceci est la fin du Titre de la page. Ceci est le dbut du document proprement dit. Ceci est la fin du document proprement dit.

Dclaration du type de document

Il est conseill d'indiquer dans la page HTML le prologue du type de

document, c'est--dire une rfrence la norme HTML utilise, afin de spcifier le standard utilis pour le codage de la page. Cette dclaration se fait par une ligne du type :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML> <HEAD>...</HEAD> <BODY>Contenu de la page</BODY> </HTML>

Le traitement du texte Les balises lmentaires

Tout document HTML contiendra en majorit du texte. Voyons

Le traitement du texte Les balises lmentaires

<HTML> <HEAD><TITLE></TITLE></HEAD> <BODY>texte simple<BR> <B>texte en gras</B><BR> <STRONG>texte en gras</STRONG><BR> <I>texte en italique</I><BR> <B><I>texte en gras et en italique</I></B><BR> <FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en bleu</FONT> <!--C'est fini--> </BODY> </HTML>

comment l'agrmenter par quelques balises lmentaires.

Gras Italique Taille de caractre Couleur de caractre A la ligne Commentaires Paragraphe Centrage [Bold] [Italic] [Font size] [Font color] [Line break] [Comments] [Paragraph] [Center] <B>...</B> <I>...</I> Dbut et fin de zone en gras Dbut et fin de zone en italique

<FONT SIZE=?>...</FONT> Dbut et fin de zone avec cette taille <FONT COLOR="#$$$$$$"> Dbut et fin de zone en couleur </FONT> <BR> Aller la ligne <!-- *** --> <P> <CENTER></CENTER> Ne pas afficher Dbut d'un nouveau paragraphe Centrer

14/04/2014

Le traitement du texte Le codage des couleurs en HTML

Bleu Blanc Rouge Gris clair #0000FF #FFFFFF #FF0000 #C0C0C0 Vert Violet Jaune Noir #00FF00 #8000FF #FFFF00 #000000

Le traitement du texte Quelques balises plus complexes

<NOBR> Empche un changement de ligne. <BLOCKQUOTE> introduit une citation. <XMP> Le browser prend ainsi en compte tous les espaces et sauts de ligne dfinis l'cran. <ADDRESS> pour indiquer une adresse (gnralement en fin de document). <U> souligne le texte. <SUB> place le texte en indice. <SUP> place le texte en exposant. <EM> accentuation. <ABBR> abrviation. <CODE> : code programmation. <STRONG> : accent plus fort. <DFN>: dfinition. <ACRONYM> : acronyme. <DIV align=left>...<DIV align=center><DIV align=right> permettent

d'aligner diffrents lments gauche, au centre et droite.

<DIV STYLE="text-align:justify;"> permet une justification du texte.

Le traitement du texte Les Titres

<Hn>...</Hn> :
Afficher un en-tte de niveau n et sauter une ligne n peut prendre une valeur entire comprise entre 1 et 6

Le traitement du texte Les Titres

Exemple :

Exemple :
<H1>Les mois du printemps</H1> mars, avril, mai <H3>Les mois d'automne</H3>septembre, octobre, novembre

<H1>Les mois du printemps</H1> mars, avril, mai <H3>Les mois d'automne</H3>septembre, octobre, novembre <H4>Les mois d'hiver</H4> janvier <H5>Les mois d'hiver</H5> h5 <H6>Les mois d'hiver</H6> decembre

Listes d'lments
Le langage HTML permet de dfinir deux styles de listes :
les listes numrotes les listes non numrotes

Listes d'lments Les listes numrotes

Une liste numrote est dlimite par les balises <OL> et

</OL> entre lesquelles chaque lment de la liste est prcd de la balise <LI>.
<OL> <LI>lment 1, <LI>lment 2, <LI>lment 3. </OL>

1. lment 1, 2. lment 2, 3. lment 3.

14/04/2014

Listes d'lments Les listes puces

Une liste non numrote est dfinie de la mme faon, sauf

Listes d'lments
Notez qu'il est possible d'imbriquer des listes du mme type

qu'elle est encadre par les balises <UL> et </UL>.

ou de types diffrents.
<UL> <LI>lment 1 : <OL> <LI>sous-lment A, <LI>sous-lment B. </OL> <LI>lment 2, <LI>lment 3. </UL>

<UL> <LI>lment 1, <LI>lment 2, <LI>lment 3. </UL>

lment 1, lment 2, lment 3.

lment 1: 1. sous-lment A, 2. sous-lment B. lment 2, lment 3.

Listes d'lments

Listes d'lments
Exercice 1: <ul> <li>Premier <li>Deuxime <ul> <li>Premier imbriqu <li>Deuxime imbriqu <li>Troisime imbriqu </ul> <li>Troisime </ul>

<UL type="disc "> <UL type="circle"> <UL type="square"> <OL type=1> <OL type=a> <OL type=A> <OL type=i> <OL type=I>

Puces rondes pleine Puces rondes creuses Puces carres (1,2,3) (a,b,c) (A,B,C) (i,ii,iii) (I,II,III)

Listes d'lments
Exercice 2:

Les liens hypertextes

HTML est un langage hypertexte (et hypergraphique) qui vous

Ecrire le document html qui permet dobtenir les listes suivantes:

permet en cliquant sur un mot gnralement soulign (ou une image) de vous transporter :
vers un autre endroit du document. vers un autre fichier HTML situ sur votre ordinateur. vers un autre ordinateur situ sur le Web.

Ce sont ces liens qui vous permettent de surfer de page en page et

qui constituent l'essence des documents HTML.

14/04/2014

Les liens hypertextes Les Liens

La syntaxe de ces liens entre plusieurs pages est simple mais

Les liens hypertextes Les ancres

Des liens peuvent aussi pointer vers un endroit prcis du

entranera de nombreux commentaires : <A HREF="URL ou adresse">...</A> Lien externe: HTML permet d'accder toutes les machines et toutes les ressources du Net. Ce sont les adresses du type :
http://serveur/chemin.../fichier ftp://serveur/chemin.../fichier mailto:utilisateur@hte

mme document ou d'un autre fichier. C'est ce qu'on appelle les ancres, ancrages ou pointeurs [Anchor]. Point d'ancrage
<A NAME="***">...</A> On nomme la cible ***

Lien vers une ancre dans la mme page

<A HREF="#***">...</A> Lien vers la cible *** lorsque celle-ci se trouve dans la mme page

Lien local:

L'organisation classique, et plus que conseille, d'un site Web consiste regrouper l'ensemble des lments de celui-ci (fichiers htm, images, ...) dans un mme rpertoire. L'adresse du lien sera alors tout simplement : fichier.htm <A HREF="2.HTM">Aller vers le document 2</A>

Lien vers une ancre dans une autre page

<A HREF="URL#***">...</A> Lien vers la cible *** lorsque celle-ci se trouve dans une autre page

Les images
Les deux formats d'image (maximum 256 couleurs) reconnus

Les images
Nous pouvons trs bien faire un lien sur une image

sur le Web, sont le format GIF et le format JPEG. <IMG SRC="Adresse de l'image"> : Afficher l'image qui se trouve l'adresse... Attributs:
alt="****" Cet attribut dfinit le texte alternatif dcrivant l'image. Les utilisateurs verront ce texte affich si l'URL de l'image est incorrecte, si l'image n'est pas dans un format support ou jusqu' ce que l'image soit tlcharge. Hauteur et largeur (en pixels) Bordure Alignement

<A HREF="fichier.htm"><IMG SRC="image.gif"></A>

Il est important pour la fluidit de l'affichage de prciser la

taille en hauteur et largeur de l'image car le browser peut ainsi, connaissant l'emplacement rserver pour celle-ci, continuer afficher le texte.. L'attribut align positionne l'image par rapport au texte

width=x height=y border=x (en pixels) align=top align=middle align=botton align=left align=right

Les tableaux Balises de base

Le marqueur <TABLE> initialise le tableau. Le marqueur <TR> dbute une ligne d'un tableau Le marqueur <TD> dbute une cellule.
Dfinition du tableau Dfinition d'une ligne [Table] [Table Row] <TABLE></TABLE> Dbut et fin de tableau <TR></TR> <TD></TD> Dbut et fin de ligne Dbut et fin de cellule

Les tableaux Balises de base

Un tableau deux lignes et deux colonnes, et donc quatre

cellules se reprsente comme suit :

Dfinition d'une cellule [Table Data]

<TABLE> <TR><TD>1</TD> <TD>2</TD></TR> <TR><TD>3</TD> <TD>4</TD></TR> </TABLE>

14/04/2014

Les tableaux Les cellules

Les cellules peuvent contenir tous les lments HTML dj

Les tableaux Les cellules

Exemple dun tableau centr occupant 60% de la fentre

passs en revue, soit :

du texte des images des liens des arrire-plans et mme des tableaux

avec, sur une ligne, trois colonnes.

<CENTER> <TABLE width=60% border=1><TR><TD>cellule1</TD> <TD>cel. 2</TD> <TD>3</TD></TR></TABLE> </CENTER>

chaque cellule a ses propres spcifications:

Largeur d'une cellule Fusion de lignes Fusion de colonnes <TD width=x> en pixels <TD width=%> en pourcentage <TD rowspan=x> <TD colspan=x>

Les tableaux Les cellules

Exemple dun tableau centr occupant 60% de la fentre

Les tableaux Les cellules

Exemple dun tableau centr occupant 60% de la fentre

avec, sur une ligne, trois colonnes gales.

<CENTER> <TABLE width=60% border=1> <TR> <TD width=33%>cellule1</TD> <TD width=33%>cel. 2</TD> <TD width=34%>3</TD> </TR> </TABLE>

avec, sur deux lignes, trois colonnes gales.

<CENTER> <TABLE width=60% border=1> <TR> <TD width=33%>cellule1</TD> <TD width=33%>cel. 2</TD> <TD width=34%>3</TD> </TR> <TR> <TD width=33%>cellule1</TD> <TD width=33%>cel. 2</TD> <TD width=34%>3</TD> </TR> </TABLE> </CENTER>

Les tableaux Les cellules

Exemple dun tableau centr occupant 60% de la fentre

Les tableaux Les cellules

Exercice1:

avec, sur deux lignes, trois colonnes gales telle que la premire ligne prend toute la largeur de la ligne
<CENTER> <TABLE width=60% border=1> <TR> <TD colspan=3 align=center>Tarif au ../../..</TD> </TR> <TR> <TD width=33% >Article 1</TD> <TD width=33%>Ref 002 </TD> <TD width=34% align=right>30fr</TD> </TR> </TABLE> </CENTER>

Donner le document html qui permet dobtenir ce tableau.

14/04/2014

Les tableaux Les cellules

Exercice2:

Les formulaires
Avec les formulaires, le langage Html vous ouvre la porte de

Donner le document html qui permet dobtenir ce tableau.

l'interactivit.
L'internaute pourra remplir un champ de saisie de texte ou

d'autres objets interactifs comme des cases cocher.

Ces donnes seront transmises une application sur le

serveur qui les traitera.

Les formulaires
<FORM method="post" action="URL d'expdition" enctype="text/plain">

Les formulaires
Un formulaire contient des balises qui permettent de

L'attribut "method" vous offre le choix entre get et post. L'attribut "action" spcifie l'adresse d'expdition des donnes. L'attribut "enctype" (optionnel) spcifie l'encodage utilis pour

dlimiter des objets envoyer : case de texte, case cocher, bouton ... Chaque balise contient au moins 3 paramtres.
id="..." : c'est une chaine de caractres qui commence par

le contenu du formulaire.

Ce paramtre ne peut tre utilis qu'accompagn par la mthode

post. enctype="text/plain" encode le contenu du formulaire en format texte lisible par le destinataire
NB: Dans le cas de l'utilisation en interne des formulaires par du

Javascript, les attributs method, action et enctype sont inutiles car on ne fait pas appel au serveur.

une lettre et qui est unique au sein d'une mme page HTML. Elle permet d'identifier la balise de formulaire sans ambigit. name="..." : c'est le nom de la variable qui sera associe la valeur enregistre par le visiteur value="..." : la valeur qui peut tre prcise par dfaut.
Ceci peut s'appliquer toute balise HTML du formulaire.

Les formulaires Balise INPUT

Cest une balise gnrique servant l'entre d'information. Elle possde plusieurs attributs qui sont :
type : button, submit, reset, text , radio, checkbox, image, password, file id : c'est un attribut qui sert identifier, de manire unique, chaque lment de page. name : c'est le nom de la future variable qui sera envoye au traitement value : valeur par dfaut, que l'utilisateur peut changer disabled="disabled" : L'objet est dsactiv au chargement de la page, et affich en gris. readonly="readonly" : Cet attribut interdit de modifier le contenu de l'attribut value. A la diffrence

Les formulaires Ligne de texte/ Mot de passe

<FORM> <INPUT type="text" name="nom" size="50> </FORM> <FORM> <INPUT type=password" name="nom" size="50> </FORM>

indique un champ de saisie d'une seule ligne (affichage en * si le type

est password).

L'attribut name="nom du formulaire" est quasiment obligatoire. Le

nom va identifier la chane de caractres du champ de saisie.

de disabled , l'objet est affich normalement bien que l'utilisateur ne puisse rien entrer. De plus, la possibilit de rcupration de la valeur via un formulaire.

L'attribut size (optionnel) dfinit la longueur du champ de saisie. L'attribut maxlength="x" (optionnel) limite le nombre rel de

checked="checked" : pour cocher un input uniquement lorsqu'il est de type radio ou checkbox.

caractres que l'on peut introduire dans le champ de saisie.

La balise <INPUT> n'a pas de balise de fin.

14/04/2014

Les formulaires Bouton d'option

<FORM> <INPUT type="radio" name="nom du groupe" value="valeur du bouton"> </FORM>
Les boutons d'option, aussi appels boutons radio, ont comme particularit qu'une

Les formulaires Case cocher

<FORM> <INPUT type="checkbox" name="nom" value="valeur attache au bouton"> </FORM>
La philosophie des cases cocher [checkbox] est assez similaire aux boites d'option.

seule option la fois peut tre active (le "ou" exclusif). <FORM> <INPUT type= "radio" name="ville" value="Paris" checked > Paris <INPUT type= "radio" name="ville" value="Londres "> Londres <INPUT type= "radio" name="ville" value="NY "> NY </FORM>
L'attribut name="nom" doit avoir le mme nom pour tout le groupe de boutons

Ici, cependant, plusieurs choix simultans peuvent tre raliss. <FORM> <INPUT type="checkbox" name="choix1" value="1"> Toto <INPUT type="checkbox" name="choix2" value="2"> Titi <INPUT type="checkbox" name="choix3" value="3"> Tata <INPUT type="checkbox" name="choix4" value="4" checked> Tete </FORM>
Des noms diffrents sont ncessaires pour l'utilisation d'un script. Le contenu de l'attribut "value" du ou des boutons retenus seront utiliss par le

d'option.
L'attribut "checked" (optionnel) permet de prslectionner un bouton radio.

Javascript.

Les formulaires Bouton de commande

<FORM> <INPUT type="button" name="nom" value="texte du bouton"> </FORM>
Le bouton de commande sert placer un bouton, auquel on assignera plus tard une

Les formulaires Bouton "Submit"

<FORM> <INPUT TYPE="submit" NAME="nom" VALUE="texte du bouton"> </FORM>
Le bouton Submit a la tche spcifique de transmettre toutes les informations

tche particulire.

contenues dans le formulaire l'URL attributs ACTION et METHOD du tag <FORM>.

Seul le texte du bouton pourra tre modifi

dsigne

dans

les

Les formulaires Bouton RESET"

<FORM> <INPUT TYPE="reset" NAME="nom" VALUE="texte du bouton"> </FORM>
Le bouton Reset permet d'annuler les modifications apportes aux contrles d'un

Les formulaires
Attributs ajouts pour la balise <INPUT> en HTML5:
number : Un contrle permettant de saisir un nombre flottant. range: Un contrle permettant de saisir un nombre dont la valeur exacte n'est pas importante. Search: Un champ de texte sur une seule ligne qui permet de saisir des mots-cls pour une

recherche.
url: Un champ pour diter une URL. L'utilisateur peut tout fait entrer une adresse vide ou

formulaire et de restaurer les valeurs par dfaut.

invalide.
tel: Un contrle pour saisir un numro de tlphone. email : Un champ pour diter une adresse e-mail. color : Un contrle permettant de spcifier une couleur date : Un contrle pour saisir une date (anne, mois et jour, pas d'heure). datetime: Un contrle pour saisir une date et une heure, base sur l'heure UTC (heure, minute,

seconde et fraction de seconde)

datetime-local : Un contrle pour saisir une date et une heure sans fuseau horaire month : Un contrle permettant de saisir un mois et une anne, sans fuseau horaire. time : Un contrle pour saisir une heure, sans fuseau horaire. week : Un contrle permettant de saisir une date forme d'une anne et d'un numro de

semaine, sans fuseau horaire.

14/04/2014

Les formulaires Zone de saisie

<FORM> <TEXTAREA name="nom" rows=4 cols=40>Valeur par dfaut</TEXTAREA> </FORM>

Les formulaires Liste droulante

<FORM> <SELECT name="nom" size="1"> <OPTION Value="Lundi">lundi <OPTION Value="Mardi">mardi </SELECT> </FORM> La balise <SELECT></SELECT> indique au browser l'usage d'une liste droulante. Les lments de la liste sont introduits par la balise <OPTION> ... (</OPTION> facultatif).
L'attribut name="nom" dfinit le nom du formulaire. L'attribut size="x" dtermine le nombre d'lments de liste affich dans la boite

La balise <TEXTAREA>...</TEXTAREA> introduit une zone

de texte multi-lignes.

L'attribut name permet de donner un nom au formulaire.

L'attribut rows=x dtermine le nombre de lignes de la zone de texte. L'attribut cols=y dtermine le nombre de caractres visibles sur chaque ligne Attention !!! La balise <TEXTAREA> a une balise de fin, soit </TEXTAREA>.

d'entre.
L'attribut multiple permet les slection simultanes multiples. On peut prslectionner l'lment affich dans la boite d'entre (par dfaut, le premier

lment de la liste sera retenu). On utilise pour ce faire l'attribut selected de la balise <OPTION>.

Structuration des formulaires

Balises fieldset , legend et label
< fieldset >...</ fieldset > : Cette balise dlimite un champ de donnes de mme nature au sein d'un formulaire. Elle sert encadrer un ensemble de champs pour visuellement (ainsi qu'ergonomiquement et smantiquement) regrouper des objets de mme connotation. Cette dlimitation n'est pas obligatoire mais apporte un plus sur l'aspect ergonomique, simplement parce que lorsqu'on est dans le fieldset des coordonnes, par exemple, on ne trouvera pas de donnes relatives au compte bancaire. <legend>...</legend> : cette balise sert donner un titre au fieldset. Concrtement, elle se place juste aprs l'ouverture de fieldset. <label></label> :
lgende d'un item de formulaire.

Les formulaires Exercice (1/5)

Nous voulons raliser un sondage sur la qualit d'un objet qui

demande des informations de plusieurs types:

Nous identifions clairement les champs suivants :

informations personnelles informations pratiques sur l'objet informations annexes

nom, ge, prnom, ville, code postal, adresse, frquence d'utilisation, commentaire, note sur 10, demander la personne si elle dsire tre tenue au courant des rsultats du sondage.

Les formulaires Exercice(2/5)

Nous pourrons crer 3 fieldset avec leurs <legend> respectives:
<form> <fieldset> <legend>Informations personnelles</legend> </fieldset> <fieldset> <legend>Informations sur l'objet</legend> </fieldset> <fieldset> <legend>Informations annexes</legend> </fieldset> </form>

Les formulaires Exercice(3/5)

Pour un maximum dinteraction, nous aurons besoin :

d'<input> pour du texte (nom, prnom, ge, adresse, ville, cp) de <textarea> pour du texte long (commentaires sur l'objet) de <select> pour la note finale d'<input> pour la slection de la frquence dutilisation (boutons radio) d'<input> pour une demande de confirmation (case cocher)

N.B: les champs de formulaire seront tiquets par le <label>

10

14/04/2014

Les formulaires Exercice(4/5)

<form id="sondage" method="post" action="submit.php"> <fieldset> <legend>Informations personnelles</legend> <p><label for="nom">Nom :</label><input type="text" id="nom" name="nom"></p> <p><label for="prenom">Prnom :</label><input type="text" id="prenom" name="prenom" ></p> <p><label for="age">Age :</label><input type="text" id="age" name="age" ></p> <p><label for="adresse">Adresse :</label><input type="text" id="adresse" name="adressse"></p> <p><label for="cp">Code Postal :</label><input type="text" id="cp" name="cp"></p> <p><label for="ville">Ville :</label><input type="text" id="ville" name="ville" ></p> </fieldset> <fieldset> <legend>Informations sur l'objet</legend> <p style="text-align:center;">Frquence d'utilisation quotidienne :<br /> <input type="radio" id="j1" name="freq" value="1" ><label for="j1">1 fois</label> <input type="radio" id="j2" name="freq" value="2" ><label for="j2">2 fois</label> <input type="radio" id="j3" name="freq" value="3" ><label for="j3">3 fois</label> <input type="radio" id="j4" name="freq" value="4" ><label for="j4">4 fois</label> </p>

Les formulaires Exercice(5/5)

<p><label for="note">Note (1 = excellent) :</label><select id="note" name="note"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected="selected">3</option> <option value="4">4</option> <option value="5">5</option> </select></p> <p><label for="commentaire">Commentaire</label> <textarea id="commentaire" name="commentaire" tabindex="13" cols="40" rows="5"></textarea> </p> </fieldset> <fieldset> <legend>Informations annexes</legend> <p><label for="email_rep">Me tenir inform(e) du rsultat ?</label> <input type="checkbox" id="email_rep" name="email_rep" ></p> </fieldset> <div style="text-align:center;"><input type="submit" name="submit" value="Participer au sondage" ></div> </form>

Les cadres
Comment crer une page HTML compos de plusieurs pages HTML ? Il existe deux faons de structurer un site : utiliser un tableau dans lequel une colonne reprend le contenu du site utiliser des frames qui permettent de diviser l'cran en fentres.
Les frames ont l'avantage vident que l'on peut facilement rajouter des pages ou

Les cadres
Balises
Zone avec des fentres
<FRAMESET>...</FRAMESET> Dbut et fin de zone avec des fentres <FRAME> Dfinition d'une fentre.

modifier le site facilement ; il n'y qu'une seule page changer. Contrairement aux tableaux o il faut changer chaque page.
Il faut aussi dire que les frames sont dlicats et dangereux utiliser(risques de

Agencement des fentres

<FRAMESET ROWS="..."> <FRAMESET COLS="..."> Fentres horizontales Fentres verticales

plantage) et tous les browsers n'ont pas la possibilit de les afficher.

Les cadres
Balise <FRAMESET>
La balise <FRAMESET> prend la place de la balise <BODY> Cest elle qui dans un premier temps va dfinir les cadres, qu'ils

Les cadres
Balise <FRAMESET>
Attribut ROWS: Dcoupage horizontal
o Le nombres de valeurs de l'attribut ROWS dfinissent le nombre

soient verticaux ou horizontaux, et leurs dimensions (en % ou en pixels).

de cadres charger horizontalement.

o Exemple: si ROWS prend quatre valeurs alors le jeu de cadre sera divis en

<frameset rows="liste"> </frameset> <frameset cols="liste"> </frameset> Liste : espacements des colonnes ou des lignes
o en pixels : 30, en % : 20%, ce quil reste : *

quatre frames horizontales.

o Chaque valeur de l'attribut ROWS donne la hauteur de la frame

charge.
o Exemple:

<frameset> peut contenir

o <frameset> o <frame> o <noframes>

<FRAMESET ROWS="200,* "> <FRAME SRC="frame1.htm"> <FRAME SRC="frame2.htm"> </FRAMESET>

la fentre sera dcoup en deux: La premire frame aura une hauteur de 200 px. L'autre prendra le reste de la fentre, sa hauteur est donc variable.

11

14/04/2014

Les cadres
Balise <FRAMESET>
Attribut COLS: Dcoupage Vertical
o Le nombres de valeurs de l'attribut COLS dfinissent le nombre

Les cadres
Balise <FRAMESET>
Dcoupage Vertical et horizontal
<FRAMESET ROWS="200,*"> <FRAME SRC="frame1.htm"> Premire ligne <FRAMESET COLS="200,*"> <FRAME SRC="frame2.htm"> <FRAME SRC="frame3.htm"> </FRAMESET> Seconde ligne </FRAMESET>

de cadres charger verticalement.

o Exemple: si COLS prend quatre valeurs alors le jeu de cadre sera divis en

quatre frames verticales.

o Chaque valeur de l'attribut COLS donne la longueur de la frame

charge.
o Exemple:

<FRAMESET COLS="200,* "> <FRAME SRC="frame1.htm"> <FRAME SRC="frame2.htm"> </FRAMESET>

la fentre sera dcoup en deux: La premire frame aura une longueur de 200 px. L'autre prendra le reste de la fentre, sa longueur est donc variable.

<FRAMESET COLS="200,*"> <FRAME SRC="frame1.htm"> Premire ligne <FRAMESET ROWS="200,*"> <FRAME SRC="frame2.htm"> <FRAME SRC="frame3.htm"> </FRAMESET> Seconde ligne </FRAMESET>

Les cadres
Balise <FRAMESET>
Attribut FRAMEBORDER
Cet attribut permet de dterminer si les cadres auront ou n'auront pas

Les cadres
Balise <FRAMESET>
Exemple:
<FRAMESET ROWS="30%,*" FRAMEBORDER="yes" BORDER=3 BORDERCOLOR="red"> <FRAME NAME="sommaire" SRC="somaire.php3"> <FRAME NAME="article" SRC="article1.php3"> </FRAMESET>

de bordure. Il a deux valeurs YES ou NO.

Par dfaut, FRAMEBORDER="YES".

Attribut BORDER
Pour donner une taille spcifique la bordure, utilisez

l'attribut BORDER dont la valeur est la largeur en pixel de la bordure.

Par dfaut, BORDER=5

Attribut BORDERCOLOR
Cet attribut permet de dfinir la couleur de la bordure de l'ensemble

des cadres l'aide de l'attribut BORDERCOLOR dont la valeur est soit le nom normalis (HTML) de la couleur soit le code hexadcimal correspondant. Par dfaut, cette couleur est celle de la palette Windows courante.

Les cadres
Balise <FRAME>
La commande FRAME permet de dfinir un cadre l'intrieur du <FRAMESET>.

Les cadres
Balise <FRAME>
La commande FRAME permet de dfinir un cadre l'intrieur du <FRAMESET>.

Attribut SRC Cet attribut indique l'URL du document HTML qui sera affich dans un cadre spcifique. Attribut NAME. Cet attribut permet de donner un nom un cadre, ce qui permettra ensuite de l'appeler avec l'attribut TARGET, attention majuscule diffrent de minuscule. Attributs MARGINWIDTH et MARGINHEIGHT
MARGINWIDTH permet de spcifier la grandeur des marges de gauche et de droite du cadre

Attribut NORESIZE En utilisant cet attribut vous interdisez l'utilisateur de redimensionner les cadres. Par dfaut les cadres peuvent tre redimensionns. Attribut SCROLLING Cet attribut permet d'attribuer ou non une barre de dfilement (scrollbar) un cadre. Il possde trois valeurs :
YES : Indique que la barre de dfilement sera toujours visible. NO : Indique que la barre de dfilement ne sera jamais visible. AUTO : Indique que le navigateur dterminera si la barre de dfilement est ncessaire.

cre, la valeur doit tre exprime en pixels, elle peut avoir comme valeur 0. MARGINHEIGHT permet de spcifier la grandeur des marges de haut et de bas du cadre cre, la valeur doit tre exprime en pixels, elle peut avoir comme valeur 0.

Attribut FRAMEBORDER
Cet attribut permet de dterminer si les cadres auront ou n'auront pas de bordure. Deux valeurs YES ou NO.

12

14/04/2014

Les cadres
Balise <NOFRAMES>
Les balises <NOFRAMES> </NOFRAMES> sont un

Les cadres
Liens vers d'autres cadres
<FRAMESET COLS="30%,70%"> <FRAME NAME="sommaire" SRC="sommaire.php3"> <FRAME NAME="article" SRC="article1.php3"> </FRAMESET>
Cet exemple dfinit deux cadres qui se partageront la fentre du navigateur. A gauche se trouvera le sommaire c'est--dire la page sommaire.php3 A droite, l'internaute verra la page article1.php3. Ces deux cadres sont spars horizontalement. Pour que les liens hypertextes de la page sommaire.php3 s'affichent dans le

moyen de prvenir l'internaute que son navigateur ne comprend pas la balise <FRAMESET>. Ces balises permettent de spcifier un texte HTML en version normale. Entre ces balises, il faut donc thoriquement dvelopper un deuxime site ou vous pouvez insrer des liens vers les sites officiels des navigateurs qui supportent les frames pour que le visiteur opte pour une mise jour.

cadre nomm article, il faudra mettre l'attribut TARGET de valeur "article" dans la balise <A> du lien.
<A HREF="article1.php3" TARGET="article">Poulet aux dioxines</A>

Les cadres
Liens vers d'autres cadres
Exemple de page sommaire :
<HTML> <BODY> <UL> <LI><A HREF="article1.php3" TARGET="article">Poulet aux dioxines</A> <LI><A HREF="article2.php3" TARGET="article">Boeuf aux hormones</A> <LI><A HREF="article3.php3" TARGET="article">Vache folle</A> <LI><A HREF="article4.php3" TARGET="article">Sang contamin</A> <LI><A HREF="article5.php3" TARGET="article">Amiante</A> </UL> <A HREF="../index.php3" TARGET="_top">Retour l'index</A> </BODY> </HTML>

Les cadres
Liens vers d'autres cadres
Valeur _self _parent _blank _top Action Affiche la cible dans le mme cadre que le lien Affiche la cible dans le cadre de niveau suprieur Affiche la cible dans une nouvelle fentre Affiche la cible dans la fentre entire du navigateur

Cet exemple montre une liste d'articles thme dont les liens hypertextes renvoient respectivement aux articles correspondants mais la destination de l'affichage des pages associes est le cadre article. Tandit que le lien vers la page index du site sera affich en pleine fentre (TARGET="_top"), ce qui aura pour effet de dtruire tous les cadres en prsence.

13