Vous êtes sur la page 1sur 72

Langage HTML

Demba SOW Doctorant en Cryptologie LACGAA / DMI / FST / UCAD

Demba SOW / Doctorant en Cryptologie

Plan du cours
Les langages de programmation
Introduction au langage HTML

Les concepts fondamentaux du langage HTML


Hbergement dun site web (projet)

Demba SOW / Doctorant en Cryptologie

Les langages de programmation

Demba SOW / Doctorant en Cryptologie

Les langages de programmation


Motivation Langages interprts Les langages compils

Le langage HTML

Demba SOW / Doctorant en Cryptologie

Motivation
Pour tre compris par un ordinateur, un algorithme doit tre traduit dans un langage spcifique, quon appelle langage de programmation. On obtient ainsi ce quon appelle un programme informatique qui contient lensemble des actions conscutives que lordinateur doit excuter. Ces actions sont appeles instructions. Le langage utilis par le processeur de lordinateur est appel langage machine. Un programme en langage machine est uniquement constitu dune suite de 0 et de 1 (du binaire) .
Demba SOW / Doctorant en Cryptologie 5

Motivation
Il est difficile de comprendre et dcrire des programmes en langage machine. Ainsi il est plus pratique de raliser un programme dans un langage plus comprhensible par lhomme et de le traduire ensuite en langage machine laide dun programme spcialis. Selon la mthode de traduction, on distingue les langages interprts et compils.

Demba SOW / Doctorant en Cryptologie

Langages interprts
Un programme crit dans un langage interprt a besoin, pour chaque excution, dun programme annexe appel interprteur qui va lire le code source pour traduire et faire excuter une une, chacune des interprteurs. Dans ce cas, il ny a pas de gnration de programme excutable.

Exemple: Perl, Lisp, Prolog..

Demba SOW / Doctorant en Cryptologie

Les langages compils


Dans le cas dun programme compil, le programme ralis, appel programme source, est traduit compltement par ce quon appelle un compilateur avant de pouvoir tre excut. La compilation gnre un programme dit excutable. Ce programme gnre un programme, c'est--dire quil na pas besoin dun autre programme pour sexcuter. Mais chaque modification du fichier source (le programme source) il faudra le recompiler pour que les modifications prennent effet.

Exemple: C, Pascal .

Demba SOW / Doctorant en Cryptologie

Le langage HTML: Historique


La dmocratisation du World Wide Web, littralement la large toile d'araigne mondiale, a engendr la ncessit de dvelopper des sites Internet adapts aux aspirations du public en matire de visibilit, d'attraction et de convivialit et en adquation avec les technologies Internet dj existantes.

Effectivement, la prsentation d'une page Web sur le modle du DOS ne serait certainement gure apprcie. C'est pourquoi, l'organisme W3C(World Wide Web Consortium) charg de la standardisation des technologies du Web, a labor un langage de dveloppement appel HTML (Hyper Text Market Language) fonctionnant sur l'ensemble des plateformes existantes ; Windows, Linux, MacOS, etc., mais galement des navigateurs (browsers) comme Netscape Communicator, Internet Explorer, Mozilla, etc.
Depuis l'adoption de la quatrime version en 1997, HTML est devenu un outil de dveloppement puissant et incontournable. La conception des pages Web est devenue d'une extrme simplicit condition de connatre au minimum les bases de ce langage.
Demba SOW / Doctorant en Cryptologie 9

Le langage HTML: Dfinition


Le langage HTML peut tre dfini comme un langage de programmation compil lger qui utilise des balises pour mettre en forme les textes et les images avec des tableaux, des liens ... De mme, le langage HTML est capable de grer la quasitotalit des artifices du Web tels que, videmment les liens hypertextes, les textes formats, les images, les vidos ou animations, les tableaux, les formulaires, les cadres (frames), les scripts, les caractres spciaux, et bien d'autres choses.
Demba SOW / Doctorant en Cryptologie 10

Introduction au langage HTML

Demba SOW / Doctorant en Cryptologie

11

Introduction au langage HTML


Prsentation de HTML Les Outils

Les Balises et Attributs


Le Document HTML minimum

Demba SOW / Doctorant en Cryptologie

12

Prsentation de HTML
Le langage HTMLHyper Text Markup Langage est dfini par le World Wide Web Consortium (W3C) comme un langage de description de document. Il permet de concevoir des pages internet et dtablir des liens entre elles afin de raliser un site internet complet. HTML est le langage de balisage hypertexte utilis dans le Web (HyperText Markup Language). Ce n'est pas un langage de programmation proprement dit. Ce sont "simplement" des balises pour mettre en forme (avec des liens, en tableau, etc...) du texte et des images.

Demba SOW / Doctorant en Cryptologie

13

Les Outils
De nombreux logiciels de dveloppement HTML sont apparus sur le march permettant parfois de concevoir un site Web complet sans une matrise parfaite du langage HTML. Bien qu'un document HTML peut-tre rdig dans n'importe lequel des diteurs de texte comme Notepad puis de renommer le fichier *.txt en *.htm ou *.html quand vous serez aguerris il est conseill d'utiliser un logiciel ddi cet emploi afin de profiter des fonctionnalits et des assistants que la plupart offre.

Demba SOW / Doctorant en Cryptologie

14

Les Outils
Voici quelques uns des diteurs HTML:
WebExpert est pris par les professionnels et constitue le meilleur rapport qualit/prix.

Frontpage se destine un large public et demeure conviviale et simple.


HotMetal Pro est reconnu comme le meilleur mais galement le plus onreux. Hot Dog ddi la fois aux webmasters chevronns comme aux novices du dveloppement web.

DreamWeaver se distingue dans la cration de page dynamique.


Demba SOW / Doctorant en Cryptologie 15

Les Outils
En bref pour crer une page Web en HTML, vous avez besoin de:
Un diteur HTML (Notepad ou WordPad fera trs bien l'affaire par exemple), pour crer votre page HTML;
Un navigateur (Internet Explorer, Netscape, Mozilla, etc...), pour visualiser le rsultat;

NB: vous n'aurez pas besoin d'tre connect Internet pour crer votre site.

Demba SOW / Doctorant en Cryptologie

16

Les Balises et Attributs


Dfinitions
Prsentation des balises usuelles Balises simples Les balises de mise en forme

Demba SOW / Doctorant en Cryptologie

17

Dfinitions
Les balises sont des instructions HTML. Elles sont reconnaissables leur forme particulire. En effet, chacune est encadre par les signes
infrieur (" < ") suprieur (" > "). <Instruction HTML>

De plus, les balises permettent l'ouverture et la fermeture d'une instruction HTML


Une barre oblique, le slash(" / ") en l'occurrence, diffrencie les deux types de balises.
La balise <...> marque le dbut de l'instruction. La balise </...> marque la fin de l'instruction. <Instruction HTML> ... Diverses lments HTML ...</Instruction HTML>
Exemple1: <b> mon texte en gras (bold) </b>. Exemple2: <br> est, par exemple, la balise utilise pour spcifier qu'il faut passer la ligne.

Demba SOW / Doctorant en Cryptologie

18

Dfinitions
Le nom de la balise (contenu entre les crochets) n'est pas sensible la casse. Il peut tre crit indiffremment en majuscule, en minuscule ou en un mlange des deux. L'attribut d'une balise peut tre dfini comme une variable qui existe lintrieur da la balise. Il se met sous la forme suivante: nom_attribut="valeur"
Exemple:

La balise utilise pour faire un lien, a pour nom "a", et pour nom d'attribut "href".
Ainsi, <a href="http://www.google.fr">Google</a> permet de faire un lien vers la page principale du site de Google. Dans ce cas, la valeur de l'attribut "href" est donc "http://www.google.fr".

Demba SOW / Doctorant en Cryptologie

19

Prsentation des balises usuelles


Ouvrir un diteur de texte puis saisissez le programme suivant:
<html> <head>

<title>Mon titre</title>
</head> <body> Voici mon premier document!

</body>
</html>

Sauvegardez le document avec comme extension ".htm" ou ".html", et comme type "texte seulement" ; puis doublecliquez sur le document: votre navigateur par dfaut sera alors ouvert sur la page.
Demba SOW / Doctorant en Cryptologie 20

Prsentation des balises usuelles


Explications des nouvelles balises utilises:
Les balises <html> et </html> : informent votre navigateur qu'il s'agit d'une page HTML; la premire balise doit donc tre la premire de votre code, et la seconde doit tre la dernire. Les balises <head> et </head> : informent votre navigateur qu'il s'agit de l'en-tte de votre page; cette en-tte de votre page comprend pour l'instant le titre de votre page; la balise <head> est toujours place juste aprs la balise <html>. Les balises <title> et </title> : informent votre navigateur qu'il s'agit du titre de votre page; ce titre sera plac dans la barre tout au-dessus de votre navigateur; ces balises doivent se situer l'intrieur de la balise "head", c'est--dire entre <head> et </head>. Les balises <body> et </body> : informent votre navigateur qu'il s'agit du corps de votre document; c'est l que vous allez placer textes, images, et tout ce que contiendra votre page; la balise <body> doit se situer aprs la balise de fermeture de l'en-tte </head>.
Demba SOW / Doctorant en Cryptologie 21

Prsentation des balises usuelles


Remarque :
On peut donc faire une premire constatation
le code d'une page web est compos de deux parties, l'entte de la page (HEAD) et le corps (BODY); et seul le corps de la page est affich l' l'cran: dans votre premire page, il n'y a que la phrase "Voici mon premier document!" qui s'est affiche.

Demba SOW / Doctorant en Cryptologie

22

Balises simples
<br>: passage la ligne. Cette balise na pas de balise de fermeture;

<b>: mettre un texte en gras (bold);


<i>: mettre un texte en italique;

<u>: souligner un texte (underline);


<center>: centrer un texte; etc... Exemple:
Saisissez cette phrase dans votre texte puis excutez le programme: <center> <b> <u> Mon texte </u> </b> <br> Et la suite... </center>

Les commentaires:
<! -- ceci est un commentaire dans mon fichier HTML --> <!-- il n'apparaitra donc pas dans le texte de mon document -->
Demba SOW / Doctorant en Cryptologie 23

Les balises de mise en forme


La balise de couleur La balise de taille Les listes

Quelques balises danimation

Demba SOW / Doctorant en Cryptologie

24

Les balises de mise en forme


La balise de couleur
<font color="red"> Mon texte </font>

Cette balise nous affiche une phrase Mon texte en couleur rouge. Dautres couleurs sont disponibles mais lcriture se fait en anglais. Exemple:
<font color=" yellow"> Mon texte </font>

Demba SOW / Doctorant en Cryptologie

25

Les balises de mise en forme


La balise de couleur
<body bgcolor="red"> Mon texte </body>

Lattribut de cette balise body nous affiche une page en couleur rouge Dautres couleurs sont disponibles mais lcriture se fait en anglais. Exemple:
<body bgcolor=" yellow"> Mon texte </body>

Demba SOW / Doctorant en Cryptologie

26

Les balises de mise en forme


La balise de taille
Taille absolue (de 1 7):
<font size=1>Mon texte</font> <font size=2>Mon texte</font> <font size=3>Mon texte</font> <font size=4>Mon texte</font> <font size=5>Mon texte</font> <font size=6>Mon texte</font> <font size=7>Mon texte</font>

Taille relative:
<font size=-2>Mon texte</font> <font size=-1>Mon texte</font> <font size=+1>Mon texte</font> <font size=+2>Mon texte</font>
Demba SOW / Doctorant en Cryptologie 27

Les balises de mise en forme


La balise de taille
<H1>Mon texte</H1>

<H2>Mon texte</H2>
<H3>Mon texte</H3> <H4>Mon texte</H4> <H5>Mon texte</H5> <H6>Mon texte</H6>
Demba SOW / Doctorant en Cryptologie 28

Les balises de mise en forme


Les listes
Saisissez ce petit programme dans un diteur de texte puis le compil: <UL> <LI> Ligne 1 <LI> Ligne 2 <OL>

<LI> Sous-Ligne 2.1 <LI> Sous-Ligne 2.2


</OL> </UL>

Demba SOW / Doctorant en Cryptologie

29

Les balises de mise en forme


Les listes Explication
<OL> correspond aux listes numrotes (Ordered List);

<UL> correspond aux listes puces (Unordered List);


<LI> sert spcifier qu'on dmarre un nouvel lment de liste; NB: noter que </LI> existe galement, mais n'est pas ncessaire, car suppos fermer l'ouverture du <LI> suivant, ou la fermeture de liste (</OL> ou </UL>).

Demba SOW / Doctorant en Cryptologie

30

Les balises de mise en forme


Les listes Les attributs des listes:
a <ol type="a"> b <ol type="a"> i <ol style="list-style-type: lower-roman"> ii <ol style="list-style-type: lower-roman"> I <ol style="list-style-type: upper-roman"> II <ol style="list-style-type: upper-roman"> a <ol style="list-style-type: lower-alpha "> b <ol style="list-style-type: lower-alpha "> A <ol style="list-style-type: upper-alpha"> B <ol style="list-style-type: upper-alpha">

Demba SOW / Doctorant en Cryptologie

31

Les balises de mise en forme


Les listes Les attributs des listes:

<ul type="disc"> <ul type="disc"> <ul type="circle"> <ul type="circle"> <ul type="square"> <ul type="square">
Demba SOW / Doctorant en Cryptologie 32

Les balises de mise en forme


Quelques balises danimation

<marquee>instructions</marquee> Cette balise nous permet de dfiler les instructions saisies au clavier.
Exemple: <marquee bgcolor="yellow" width="40%" direction="right" loop="0"> Bonjour Monde </marquee>

<blink>instructions</blink> Cette balise nous permet de clignoter les instructions saisies au clavier.

Demba SOW / Doctorant en Cryptologie

33

Les balises de mise en forme


Quelques attributs des balises
Attributs Href Target Valeurs URL _blank _self _top _parent -RED -YELLOw . nom -button -text -submit Description Indique l'adresse URL d'une ressource externe

Indique le cadre cible pour afficher le document.

bgcolor name type

Donne une couleur au fond du document HTML. Indique le nom du document Indique le type de bouton choisi

Demba SOW / Doctorant en Cryptologie

34

Les balises de mise en forme


Quelques attributs des balises
Attributs background bgproperties onload ounload align Valeurs Adresse de limage -fixed Nom de la fonction Nom de la fonction -left -right -center Description Permet laffichage dune image en arrire plan Empche limage prcite de dfiler avec le contenu du document Ouvre une fonction JavaScript laffichage de la page Ouvre une fonction JavaScript la sortie de la page Dfinit lalignement de la ligne

Demba SOW / Doctorant en Cryptologie

35

Les balises de mise en forme


Quelques attributs des balises
Attributs width color size Valeurs valeur couleur valeur en pixel Description Spcifie une largeur de la ligne Applique une couleur la ligne Donne lpaisseur de la ligne

Demba SOW / Doctorant en Cryptologie

36

Le Document HTML minimum


Exercice:
Bonjour et bienvenue(dfiler et mettre en gras cette instruction) Table des matires(clignoter et centrer cette instruction)
I. CHAPITRE 1: Gnralits

A. Historique B. Prsentation
II.CHAPITRE 2: Les langages 1. Introduction 2. Objectifs Dmarche Mthodologie

Ecrire un programme HTML qui nous permet dafficher la page web cidessus en couleur jaune.

Demba SOW / Doctorant en Cryptologie

37

Les concepts fondamentaux du langage HTML

Demba SOW / Doctorant en Cryptologie

38

Les concepts fondamentaux du langage HTML


Les liens Les tableaux Les formulaires Les frames
Demba SOW / Doctorant en Cryptologie 39

Les liens
Les chemins daccs Dfinition et intrts des liens Types de liens

Demba SOW / Doctorant en Cryptologie

40

Les liens
Les chemins daccs Les chemins d'accs peuvent tre: absolus: c'est--dire qu'on spcifie l'adresse complte de ce quoi on fait rfrence.
Exemple: C:\Images\mon_image.gif pour une image ou http://www.google.fr pour un site.

relatifs: la rfrence est faite par rapport l'endroit o l'on se trouve.


Exemple: .\mon_image.gif ou .\maPage.html dsignant des fichiers situs dans le mme rpertoire que le fichier qui y fait rfrence.

Demba SOW / Doctorant en Cryptologie

41

Les liens
Dfinition et intrts des liens Les liens sont des panneaux dindicateurs qui nous permettent de parcourir des pages web lis.

En consquence, les liens prennent une place prpondrante et essentielle dans le fonctionnement global du World Wide Web.
Les liens assurent, donc, la fonction de guider l'internaute dans ses navigations et de lui donner les moyens de mener ses investigations en allant recueillir des informations au travers d'une multitude de pages ou de sites. Cela demeure le principe fondamental d'Internet.
Demba SOW / Doctorant en Cryptologie 42

Les liens
Types de liens Il existe plusieurs types de liens:

Les liens hypertextes Les liens hyper images Les liens locaux

Demba SOW / Doctorant en Cryptologie

43

Les liens
Les liens hypertextes Les liens hypertextes sont des liens construits sur du texte. L'utilisateur devra cliquer sur un mot ou un groupe de mot pour activer un renvoi vers un document cible. La commande <a href=" chemin daccs "> Texte </a> dfinit le lien vers une page sur le Web.

Demba SOW / Doctorant en Cryptologie

44

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

Ces liens fonctionnent exactement de la mme manire que les liens hypertextes.
La commande suivante dfinit le lien vers une page sur le Web : <a href="Adresse cible"> <img src="Adresse de l'image"> </a>

Demba SOW / Doctorant en Cryptologie

45

Les liens
Les liens hyper images Exemple:
Aprs avoir cr une page web, saisissez le programme suivant qui nous permet daller dans la premire page travers un lien image .

<html> <head>
<title> Page de liens des images</title> </head> <body> <a href =" chemin daccs "><img src="Adresse de l'image"></a> </body> </html>

Demba SOW / Doctorant en Cryptologie

46

Les liens
Objectif des liens hyper images
En effet, les images offrent l'utilisateur une surface cliquable plus ou moins large selon leurs dimensions. Par consquent, un dcoupage en zones distinctes d'un lment graphique peut tre un atout indniable.

Imaginons un utilisateur ayant besoin de fabriquer des liens par rapport aux rgions du Sngal, dans cette optique, il lui suffirait de trouver une image adquate puis de lui appliquer des zones de sensibilits diffrentes afin de crer une multitude de liens cliquables partir d'une seule image.
Demba SOW / Doctorant en Cryptologie 47

Les liens
Les images en coordonnes: La balise map entame la dfinition des zones sensibles de l'image.

La balise area permet de dcrire une zone sensible. Les attributs de cette balise sont:
shape="Forme" coords="Coordonnes" href="Adresse cible"

Demba SOW / Doctorant en Cryptologie

48

Les liens
Les images en coordonnes
Forme Description
Dfinit une zone rectangulaire Dfinit une zone circulaire

Coordonnes
X1, Y1 = Coin suprieur gauche X2, Y2 = Coin infrieur droit X, Y = Centre du cercle R = Rayon du cercle

Exemple
<area shape="rect" coords="X1, Y1, X2, Y2 href="doc.htm"> <area shape="circle" coords="X, Y, R" href="doc.htm"> <area shape="polygon" coords="X1,Y1,X2,Y2 ,X3,Y3 href="doc.htm">

rect circle

polygon

Dfinit une zone polygonale

X1, Y1 = Premier point du polygone X2, Y2 = Second point du polygone Xn, Yn = Nime point du polygone

Demba SOW / Doctorant en Cryptologie

49

Les liens
Les liens locaux Les liens internes permettent de crer des renvois l'intrieur du mme document HTML. Pour faire fonctionner ces liens, il suffit de dclarer une ancre dans le document puis de crer le renvoi vers cette ancre. La commande <a name="Nom d'ancre"> dfinit l'ancre atteindre.
La commande <a href="#Nom d'Ancre"> dfinit le lien. La commande </a> ferme le lien.
Demba SOW / Doctorant en Cryptologie 50

Les liens
Les liens locaux

Exemple: Saisissez le programme suivant :


<html> <head> <title>Un titre pertinent</title> </head> <body> <a name="Debut"></a> <a href ="#bas">Bas de page</a><br> "copiez un texte dans cette partie du programme

<a name="bas"></a> <a href="#Debut">Revenir</a> </body> </html>


Demba SOW / Doctorant en Cryptologie 51

Les tableaux
Dfinition
Les tableaux sont dfinis avec la balise <table>. Le tableau est divis en lignes par la balise <tr>. Chaque ligne est divise en cellules par la balise <td>. <table> et </table> servent respectivement ouvrir une nouvelle table, et fermer la table courante; <tr> et </tr> servent dfinir une ligne du tableau; <td> et </td> servent dfinir une cellule du tableau ( noter que </TD> n'est pas indispensable, pour la mme raison que </LI>). <th> et </th> servent dfinir un titre de ligne ou de colonne (le texte apparat alors centr en gras dans la cellule correspondante); <caption> et </caption> servent dfinir un titre pour le tableau.

Demba SOW / Doctorant en Cryptologie

52

Les tableaux
Les attributs de la balise <table>
Dans cette partie nous allons numrer les attributs de la balise table qui sont les plus utiliss:

Lattribut border qui nous permet de dfinir la bordure dun tableau. Cet attribut prend comme valeur les nombres entiers (0,1,2,3, . . .). Lattribut bordercolor nous permet de dfinir la couleur de la bordure du tableau. Cet attribut prend comme valeur les couleurs en anglais. Lattribut bgcolor nous permet de donner une couleur de fond du tableau.
Demba SOW / Doctorant en Cryptologie 53

Les tableaux
Exemple:
Saisissez le programme suivant qui nous permet dafficher un tableau:
<html> <head> <title>Page tableau</title> </head> <body> <table border=1 bgcolor="red "> <caption>Mon tableau</caption> <tr> <th>Nom 1</th> <th>Nom 2 </th> </tr> <tr> <td>Cellule 1 </td> <td>Cellule 2 </td> </tr> </table> </body> </html>
Demba SOW / Doctorant en Cryptologie 54

Les formulaires
Dfinition
Le formulaire dans une page HTML, permet de transmettre des informations fournies par l'utilisateur vers un serveur. Le formulaire au sein d'un site Web peut tre utilis pour rcuprer des informations sur l'utilisateur dans le but de faire des statistiques sur le type de frquentation ou le taux de satisfaction. La commande <form> marque le dbut du formulaire. La commande </form> marque la fin du formulaire.
Demba SOW / Doctorant en Cryptologie 55

Les formulaires
Les attributs de la balise <form>

La balise <form> possde diffrents attributs spcifiant son nom, un cadre de destination aprs la soumission du formulaire.
L'attribut name="Nom du formulaire" dfinit un nom pour le formulaire courant. L'attribut target="Nom du cadre" dfinit le cadre destinataire qui doit afficher les rsultats du formulaire. L'attribut method="Type de transmission" dfinit le type de transmission. L'attribut action="Adresse cible" dfinit l'adresse destinatrice sur le site.
Demba SOW / Doctorant en Cryptologie 56

Les formulaires
Les types de transmission
Il y a deux mthodes d'accs au serveur http, GET et POST La mthode GET fait en sorte que l'information passe par la variable QUERY_STRING pour interprter les donnes. Elle permet de transfrer une faible quantit de donnes au serveur. La mthode POST permet d'envoyer des informations plus importantes au serveur avec une quantit de donnes importantes, et cela en toute confidentialit. Remarque: Dans tous nos programme nous utilisons que de la mthode POST

Demba SOW / Doctorant en Cryptologie

57

Les formulaires
Exemple:
Saisissez le programme suivant qui nous permet dafficher un formulaire
<html> <head> <title>Page formulaire</title> </head> <body> <form action=page1.html method=post> <center><input type=submit value=Voir la page></center> </form> </body> </html>

Remarque: Vous devez construire la page1.html qui est la valeur de lattribut action .
Demba SOW / Doctorant en Cryptologie 58

Les formulaires
Les zone de texte multi-lignes
Les balises <textarea> instructions </textarea> nous permettent de dfinir une zone de texte avec plusieurs lignes. Les attributs de la balise <textarea> les plus importants sont:
Lattribut rows dfinit le nombre de lignes.
Lattribut cols dfinit le nombre de colonnes.

Remarque: La valeur de ces attributs est en pixel.

Demba SOW / Doctorant en Cryptologie

59

Les formulaires
Les zone de texte multi-lignes
Exemple: Changez le programme prcdent en mettant une zone de saisie.
<html> <head> <title>Page formulaire</title> </head> <body> <form action=page1.html method=post> <center> <h1>La zone de texte pour saisir</h1><br> <textarea rows=15 cols=15></textarea><br><br><br> <input type="submit" value="Voir a page1"> </center> </form> </body> </html>
Demba SOW / Doctorant en Cryptologie 60

Les formulaires
Les select
Les select dfinissent une liste de choix affichant une srie d'items sous forme soit de liste droulante, soit de liste simple.

La commande <select> dfinit une liste de choix.


La commande </select> ferme la liste de choix.

Demba SOW / Doctorant en Cryptologie

61

Les formulaires
Les select

Quelques attributs de la balise <select>


L'attribut name="Nom du champ" spcifie un nom pour l'lment. L'attribut size= " Valeur " dfinit le type de liste et le nombre d'items. L'attribut multiple permet de crer une liste choix multiple. L'attribut tabindex="Nombre" dfinit la position de la liste dans l'ordre de tabulation.

L'attribut disabled permet de rendre la liste inactive.


Demba SOW / Doctorant en Cryptologie 62

Les formulaires
Les select
Les balises <option> choix </option> La balise <option> dclare une entre dans la liste. La balise </option> ferme l'entre prcite. Lattribut selected est un attribut de la balise <option> qui nous permet de dfinir une slection par dfaut.

Demba SOW / Doctorant en Cryptologie

63

Les formulaires
Les select
Exemple: La liste droulante Saisissez le programme suivant :
<html> <head> <title>Page formulaire</title> </head> <body> <select > <option selected> Premier item </option> <option> Second item </option> <option> Troisime item </option> <option> Quatrime item</option> <option> Cinquime item </option> </select> </body> </html>

Demba SOW / Doctorant en Cryptologie

64

Les formulaires
Les select
Exemple: La liste simple
Saisissez le programme suivant : <html> <head> <title>Page formulaire</title> </head> <body> <select size=6> <option selected> Premier item </option> <option> Second item </option> <option> Troisime item </option> <option> Quatrime item</option> <option> Cinquime item</option> </select> </body> </html>

Demba SOW / Doctorant en Cryptologie

65

Les frames
La structure
Les cadres (frames) permettent de fractionner la surface d'affichage en plusieurs parties afin d'afficher diffrentes pages HTML simultanment dans le navigateur. Ces cadres servent notamment afficher d'un ct une srie de liens comme un menu ou un sommaire et de l'autre ct des pages contenant des informations en relation. La commande <frameset> marque le dbut de la dfinition des cadres.

La commande </frameset> marque la fin de la dfinition des cadres.


Demba SOW / Doctorant en Cryptologie 66

Les frames
La cration Les cadres sont crs au sein des balises <frameset>. La balise <frame> cre un cadre dans le document HTML. Cette balise possde deux attributs essentiels, un spcifiant la page cible et l'autre dfinissant un nom pour le cadre.
L'attribut src="Adresse du contenu" dfinit le contenu du cadre. L'attribut name="Nom du cadre" permet de nommer le cadre.

Demba SOW / Doctorant en Cryptologie

67

Les frames
Quelques attributs de <frameset>
L'attribut cols="Largeur1,Largeur2"dfinit une largeur pour les cadres. L'attribut rows="Hauteur1,Hauteur2" dfinit une hauteur pour les cadres. Remarque:
Les valeurs de ces attributs sont en pourcentage.
Lorsquon utilise les frameset, on nutilise pas la balise <body>
Demba SOW / Doctorant en Cryptologie 68

Les frames
Exemple: <html> <head> <title>Un titre pertinent</title> </head> <frameset cols="20%,80%"> <frame> </frameset> </html>

Demba SOW / Doctorant en Cryptologie

69

Hbergement dun site web

Demba SOW / Doctorant en Cryptologie

70

Hbergement dun site web

Projet

Demba SOW / Doctorant en Cryptologie

71

Fin du cours

Demba SOW / Doctorant en Cryptologie

72