Cours : Programmation web 1

Chapitre1 : Introduction à la programmation web

Enseignante : Ameni Aloui

[email protected]

Année universitaire : 2023-2024

 Comment ça marche ?
Pour consulter un site Web sur Internet, il suffit de taper l’adresse correcte
du site dans la barre d’adresse d’un navigateur Web, et le site s’affiche.
⇒ La machine qui permet la consultation du site Web demandé est appelé
Client Web.

Le véritable client est un logiciel qui s’exécute sur cette machine et réalise
l’opération de consultation.
• Ce logiciel est le plus souvent un navigateur Web.
• Les navigateurs Web les plus populaires sont Internet Explorer, Mozilla
Firefox, Chrome, Safari et Opera.
 Comment ça marche ?

• Pour être accessible, un site Web doit être publié sur un serveur qui est un
type particulier d’ordinateur dont le rôle est d’attendre les demandes des
clients, et d’y répondre. Un serveur rend un service à ses clients.
⇒ Un serveur qui permet de publier des sites Web est appelé serveur Web.

• Il existe de nombreux types de serveurs, en fonction du service rendu :

serveur de fichiers, de messagerie, de base de données
 Comment ça marche ?
• La communication entre le client et le serveur est effectuée
suivant ce scénario :

❏ L’échange est initié par le client, qui envoie au serveur une requête
pour consulter une ressource Web.
❏ Le serveur prépare la page HTML associée.
❏ Le serveur renvoie la page HTML au client, qui l’affiche.

• Cette communication entre le client et le serveur Web est

garantie par un protocole de communication.
 Protocole de communication
• Un protocole de communication est une norme d’organisation et de
transmission des données numériques lors d’un échange entre le client et le
serveur.

• Toute application orientée sur un service doit être capable de comprendre

un message provenant d’une autre application orientée sur le même service.

• Un message électronique doit être traité par une application orientée

services de messagerie,

• Cependant qu’un message d’une page web doit être examiné

par une application orientée services Web.
 Protocole de communication
• Les ports permettent au serveur de différencier une information binaire issue d’un message
électronique d’une information binaire issue d’un navigateur web.
• Les ports correspondent à des numéros d’identifications fixes et connus pour les deux parties
communicantes.
• Par convention, le port 80 été attribué par défaut à la réception des trames (inf. binaire) de type
Web.
• Plusieurs protocoles ont été introduits selon le type des informations échangées entre le client et le
serveur :
★ Protocoles de messageries,
★ Protocoles de transfert de fichiers,
★ Protocoles Web ou HTTP.
 Protocole HTTP
•HTTP (HyperText Transfert Protocol) est introduit avec le langage HTML en 1989 conduisant
avec la notion de URL à l’apparition du World Wide Web. Il est très simple et basé sur des
commandes textuelles.
■ Une URL est une chaîne de caractères utilisée pour adresser les ressources dans le Web
■ Exemple : http://www.example.com/chemin/page.html?q=req
Protocole hote chemin nom de la chaîne de requête,
absolu sur page Web transmise à la page
le service
▪ Les serveurs HTTP les plus utilisés sont : ▪ HTTP : Protocole du Web
✔ Apache HTTP Server de la Apache Software ▪ Protocole d'échange entre client et serveur
Foundation; ~67% du marché (2004) ▪ Protocole orienté ligne de caractères
✔ Internet Information Services de Microsoft ▪ Le client demande un fichier, le serveur lui
✔ Sun Java System Web Server de Sun Microsystems donne tel qu'il est stocké – processus statique
✔ Le serveur Web Zeus de Zeus Technology ▪ Le serveur peut aussi générer un fichier en
fonction de la demande du client – processus
dynamique
 Protocole HTTP
• Le principe de fonctionnement du protocole HTTP :
• Le client envoie une requête au serveur avec une URL,
• Une connexion client/ serveur est établie sur le port 80,
• Le client envoie une requête GET/POST vers le serveur,
• Le serveur répond par une réponse HTTP composée d’un code (200 pour accord, 400
pour erreur due au client, 500 pour erreur due au serveur) et des données demandées.
• La connexion est fermée.
▪ Echanges multi-plateforme
▪ ASCII 7bits
▪ Requêtes émises en clair Réponses émises en clair
Protocole HTTP

Client Web Serveur Web

(Navigateur) Réseau (Apache)

Connexion (port 80)

http://www.exam
ple.com/chemin/p
age.html?q=req Validation de la connexion

Requête HTTP

Réponse HTTP
Fermeture de connexion
 Les Langages Couramment Utilisés

HTML CSS JavaScript

La base de la structure d'une page Les styles pour habiller une page Un langage de programmation
web web pour ajouter des interactions
Cours : Programmation web 1

Chapitre 2 : HTML
Historique
 Principe
■ Système hypertexte publique fonctionnant sur
Internet et qui permet de consulter, avec un
navigateur, des pages mises en ligne dans des
sites.
L'image de la toile vient des hyperliens qui lient
les pages Web entre elles.
■ Communication entre un serveur (HTTP) et un
client (navigateur)
■ Le langage HTML permet de créer des
▪ HTML : Hyper Text Markup Language
documents interactifs grâce à des liens
hypertextes, qui relient votre document à
▪ Définit la structure logique d’un document WEB
d'autres documents.
■ En cliquant sur une zone de texte (ou une ▪ Composé d’un ensemble de commandes de formatage
image, un logo) mise en évidence, on peut
accéder a un nouveau document situé sur un ▪ Basé sur des d’environnement possédant un début et une fin
autre ordinateur en n'importe quel point du
▪ Pour mettre en œuvre du HTML, il suffit:
globe.
○ d'un éditeur de texte pour taper le code de la page,
○ d'un navigateur WEB pour afficher la page formatée.
Principe: Bonne Pratique
 Balises: Paire de balises
• Mots clés permettant de structurer une page HTML,
• Mot clé entre crochets ,
!
• Les balises vides ne nécessitent pas de balises de
fin
• La plupart des balises sont utilisées par paire
Exemples :
Balise d'ouverture ou de début, – <br /> pour un saut de ligne
Balise de fermeture ou de fin. – <hr /> pour une ligne horizontale
<BALISE>…</BALISE> ▪ La plupart des environnements peuvent être
Exemple : <h1> Soins des animaux domestiques 101</h1> imbriqués selon des règles bien définies
• La balise de fin doit utiliser la même casse que la balise de début
<H1><B>Mon exemple</B></H1>
• Les balises dénotent des "constructions" documentaires:
➢ styles de paragraphe (normal, énumérations, =titres…) ▪ Il n’est pas permis de faire chevaucher des
➢ Tableaux environnements
➢ styles de caractères (gras, italique, souligné…)
➢ références à des images ! <H1><B>Mon exemple</H1></B>
➢ références hyper-texte
➢ formulaires Les minuscules/majuscules n’interviennent pas
➢ etc… dans la définition des balises

NB . Commentaire : Indispensables dans certains cas, ils alourdissent cependant le temps de chargement d’une page. Ils
n’apparaissent pas dans la fenêtre du navigateur. La syntaxe est la suivante :
<!-- Commentaire –>
Balises : Attribut
Un attribut est un modificateur d'éléments HTM permettant de fournir des informations
supplémentaires
• Il s’agit d’une extension d'éléments
• Syntaxe :
<balise attribut1="valeur1" attribut2="valeur2" attribut2="valeur2">abcd</balise>
Exemple :
– <a href="http://www.google.tn">Ceci est un lien.</a>
Balises : Structure Minimale d’une page web
• <html> : Identifie la page comme un document HTML

• <head> : Contient le balisage et le code utilisé par le navigateur, par exemple les
scripts ajoutant de l'interactivité et les mots clés permettant aux moteurs de recherche
de localiser la page,

• <title> : Affiche le titre de la page qui apparaît en haut du navigateur Web,

• <body> : Entoure le contenu visible sur la page Web affichée dans un navigateur
Web
Balises : Structure Minimale d’une page web
Balises : Structure Minimale d’une page web
Entête
Exercice
HTML: Mise en pages
 1- Texte 2- Couleurs

3- Les liens 4- Images

hypertextes

5- Listes 6- Tableaux

7- Formulaire
1-Texte
<p>Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau fraîche</i> par temps chaud.</b></p>

• <P> Définit le texte en tant que paragraphe

<P ALIGN="Valeur">.

⇒ Valeur peut prendre les valeurs : à gauche, à droite, centré ou justifié

1-Texte
• <Hx> (avec x=1 à 6) : Cette balise permet d'afficher des titres d'importance variant selon six
niveaux, de 1 (le plus fort) à 6 (le plus faible donc), en insérant un saut à la ligne à sa suite. On
l'utilise pour afficher les titres principaux, secondaires, les sous-titres etc. d'un texte.

• <BIG> et </BIG> : Augmente la taille du texte, que ce soit du texte simple ou un titre (dans ce
cas il n'y a pas de retour à la ligne).

• <CENTER> et </CENTER> : Centre le texte dans la page.

• <BR> : Insère un saut de ligne. Notez bien qu'il n'y a pas de contre-balise.
1-Texte

• <HR> : Créer un trait horizontal de séparation aussi appelé filet. Là aussi

pas de contre-balise.
• Les caractères spéciaux sont présentés comme suit:

&lt: crochet gauche <

&gt: crochet droit >
&nbsp: espace insécable (Vous vous rendrez compte petit à petit
que les espaces ne sont pas toujours reconnus par le navigateur).
 2-Couleurs
❏ Changer la couleur du fond

<BODY BGCOLOR="Couleur">
sert à définir la couleur du fond de l'écran .La couleur COLOR peut être indiquée de deux façons:

1 - par son nom :

Black - Maroon - Green - Olive - Navy - Purple - Teal - Gray - Silver - Red - Lime - Yellow - Blue - Fuchsia - Aqua - White

2 - par sa valeur :
color=#rrggbb ou rr gg et bb sont les 3 couleurs Rouge, Verte et Bleue. Les valeurs pour chacune des couleurs s'expriment
en hexadécimal (base 16) de 00 à FF.

Exemple : Le noir = #000000, le blanc = #FFFFFF, le gris clair = #C5C5C5, le gris foncé = #303030, le rouge = #FF0000, …
 2-Couleurs
❏ Modifier l’apparence du texte

• La taille de la police
<FONT Size="x"> sert à modifier la taille de la police, avec x=1 à 7. Contrairement à <Hx>, 1 est la valeur
la plus petite.

• La couleur de la police
<FONT Color="Couleur"> sert à modifier la couleur de la police, de la même façon qu'on modifie la
couleur du fond de page.
• La police utilisée
<FONT Face="Police"> sert à changer la police. Par exemple: arial, times new roman, comic sans
ms, book antiqua etc.

On peut aussi définir les spécificités d'une polices à utiliser par défaut pour tout le document à l'aide
de <BASEFONT Face="Police" Size="x" COLOR="Couleur">.

On n'est pas obligé de préciser les trois attributs, on

peut se contenter de choisir d'indiquer la police et
sa couleur, ou la couleur et la taille.
1-Texte- Exercice 1/2
Créez une page nommée Base HTML.html, dans cette page on fait apparaître plusieurs mises
en forme des titres et des paragraphes. La page Base_HTML.html comprendra trois parties
détaillées ci-dessous. Il est conseillé de vérifier dans le navigateur le travail réalisé après chaque
partie. Pour cela, enregistrez la page avec le bloc-notes et actualisez la page web dans votre
navigateur. La description de la page à réaliser est donnée comme suit :
● Le fond de la page sera en bleu et le texte par défaut en blanc.
● La mise en forme du document est :
1-Texte- Exercice 2/2
1ère partie :
o Le titre de niveau 1 « h1 » centré : « PREMIERE PARTIE »
o Un paragraphe ayant le texte suivant en rouge : « Je suis le premier
paragraphe, je suis rouge »
o Une ligne séparatrice de taille 2 et de couleur rouge
2ème partie :
o Le titre de niveau 2 « h2 » centré : « DEUXIEME PARTIE »
o Un paragraphe centré composé de trois lignes suivantes avec le texte qui est en jaune et de
taille 5 : « Je suis le 2eme paragraphe au centre en taille 5 et en jaune »
o Une ligne séparatrice horizontale de taille 7, de 300 pixels de longueur et ayant la couleur noire

3ème partie :
o Le titre de niveau 3 « h3 » centré : « TROISIEME PARTIE »
o Un paragraphe, aligné à droite avec le texte suivant la police Arial et en taille
7 : « Je suis le dernier paragraphe de la page, je suis avec la police Arial en
taille 7 et aligné à droite… ».
3-Les liens Hypertextes

• Le lien HTML, également appelé hyperlien ou lien hypertexte, sert à diriger le visiteur vers une
destination spécifique, d'un simple clic. Le lien peut être inséré sur tous types de contenus : texte
ou image, par exemple.

• Pour coder le lien en HTML, il faut renseigner l'élément < a >, pour « anchor » ou « ancre » : cet
élément informe que le contenu est un lien. Il faut ensuite ajouter l'attribut href, nécessaire et
suffisant, qui indique le chemin de destination : une page du site ou d'un site tiers, un fichier à
visualiser ou à télécharger, une adresse e-mail ou encore un endroit spécifique d'une page web.

• D'autres attributs, facultatifs, permettent de paramétrer de manière avancée le fonctionnement

de l'hyperlien.
3-Les liens Hypertextes
• Les différentes utilisations de a href

URL absolue

L'URL absolue se présente sous la forme : https://www.adresse-du-site.extension.

URL relative
L'URL est dite relative lorsqu'elle pointe vers un emplacement relatif au fichier à partir
duquel le lien HTML est inséré.

Section de page

Il est possible de faire un lien HTML pour diriger le visiteur à un endroit spécifique de la page
web. Pour coder le lien vers une section de page, il faut dans un premier temps nommer cette
section à l'aide de l'attribut id, pour permettre son identification. Ensuite, il faut renseigner le lien
HTML en utilisant le symbole # suivi du nom id
 3-Les liens Hypertextes

< a href="adresse de redirection" > texte cliquable à afficher < /a >.

• Pour faire un lien HTML sur une image, il faut insérer l'attribut img src entre les balises d'ouverture
et de fermeture de l'attribut a href :
< a href="adresse de redirection" > < img src="URL de l'image" > < /a >. Lorsque le contenu
cliquable est une image, le lien modifie l'aspect du pointeur lorsque l'utilisateur survole l'image.

⇒<a href=URL> : Balise généralement utilisée pour ancrer une URL (Uniform Resource
Locator) à du texte ou une image ou pour créer une liaison aux sections du document,
Exercice
• La police utilisée est "verdana", sauf
pour les liens qui ont la police par
défaut.

•Le code de la couleur utilisée pour le

titre et le bas de page est #003569
(C'est la même couleur utilisée dans la
majeur partie de ce site.)

•L'image de la bannière mesure 100% de

la page, si vous voulez la même, rendez
vous au lien
suivant: http://www.chiny.me/images/a
rr_bannp.png.

•Le code de la couleur utilisée pour le

texte du corps de la page est :#444444
(Il s'agit d'un gris foncé).
4-Images
La réduction des données étant la règle sur le web, deux formats de fichiers images sont pris en
charge, GIF et JPG (ou JPEG) qui sont des formats hautement comprimés.
Format GIF
Présente l'inconvénient d'être limité à 256 couleurs, mais dipose de trois points forts :
▪ Ces fichiers se composent par couches et non par lignes ce qui permet au surfeur de voir
rapidement l'image en chargeant une page web, même si cette image est floue au départ,
sa qualité s'améliore avec l'arrivée de chaque nouveau paquet de données.

▪ On peut rendre transparent un fichier GIF.

▪ On peut en faire des animations (GIF animés).

Format JPEG
C'est le format adapté aux photos puisqu'il permet de représenter
jusqu'à 16.7 millions de couleurs.
⇒Si vous souhaitez utiliser une image qui n'est ni au format GIF ni au format JPG, il
suffit de l'ouvrir dans un logiciel de dessin et de l'enregistrer au format GIF ou JPG.
 4-Images
❖ Insertion d’une image <IMG SRC=« image.extension">
pas de contre balise, ce qui est logique puisqu'il ne s'agit pas ici de formater du texte mais
d'insérer un objet)

Lorsque l'image se trouve dans le même dossier que le fichier qui charge l'image, pas de problème, il suffit
d'indiquer son nom. Si ce n'est pas le cas, comme on l'a vu pour les liens, il faudra indiquer au navigateur
l'adresse relative ou absolue du fichier.

❖ Attributs relatifs à une image <IMG SRC="calv01.gif" HEIGHT=num1 WIDTH=num2>

HEIGHT: indique la hauteur en pixels de l'image

WIDTH: indique la largeur en pixels de l'image.

On peut utiliser ces attributs ensemble (attention au

respect des proportions pour ne pas déformer l'image)
ou séparément.
4-Images

❖ Alignement d’une image

On peut utiliser la balise <CENTER></CENTER> pour centrer l'image. Mais il existe un attribut qui permet
d'aligner mais aussi de définir la position de l'image par rapport au texte: ALIGN.
En voici quelques exemples :
4-Images
4-Images
❖ Espacement par rapport à l'environnement et bordure

✔ On peut ajouter l'attribut BORDER pour entourer l'image d'un cadre; la syntaxe sera la
suivante : BORDER=valeur.

✔ Pour éviter qu'un texte ne touche l'image, ce qui n'est pas vraiment esthétique, on peut
définir une distance minimale à l'aide des deux attributs HSPACE=valeur (distance entre
l'image et le texte à côté - H comme horizontal...) et VSPACE=valeur (distance entre l'image
et le texte du dessus et du dessous - V comme vertical...).

Pour ces trois attributs, les valeurs sont exprimées en pixels.

4-Images
❖ Utiliser un lien comme un lien

C'est tout simple, il suffit de combiner ce que tu as appris dans la leçon précédente et
dans celle-ci :

<A HREF=« Image ciblé"><IMG SRC=« nom image.extension"></A>.

<A HREF="mailto:[email protected]"><IMG SRC="truc.gif"></A>.

4-Images Exercice (½)
 4-Images Exercice (2/2)
1. Développer les liens Venus1, Venus2 et Venus3 vers les pages HTML
«Venus1.html », « Venus2.html » et « Venus3.html » ;
2. Programmer les liens papillon et bougie respectivement vers la page «
papillon.html » et la page « bougie.html » ;
3. Les images seront toutes enregistrées dans le même répertoire avec les pages
HTML développées ;
4. Programmer la page « Left.html » présentant le menu qui contient tous les liens
vers les autres pages du site ;
5. Diviser la page index.html en 3 cadres et programmer ses liens.
5-Listes
une liste est donc une façon de présenter un certain nombre d'éléments; deux
points caractérisent cette présentation :

▪ Un retrait du texte (ou indentation).

▪ Une puce (le petit signe non numérique: un rond, un carré, une flèche etc. ) ou
une lettre / un chiffre devant chacun des éléments de la liste.

Types de liste

▪ Les listes à puces(listes non ordonnées).

▪ Les listes ordonnées
▪ Les listes de définition
5-Listes: Les listes à puces
<UL> </UL> (Unordered List) indique au navigateur le début et la fin d'une liste non
ordonnée.

Pour lui donner un contenu concret, chacun des éléments composant la liste est
introduit à l'intérieur des deux balises par la paire <LI> </LI> (List Item).
Ainsi, la structure de base d'une liste à puces de 5 éléments sera la suivante:

Il est tout à fait possible de se contenter de mettre le tag <LI> seul, mais si l'on
veut être strictement conforme au HTML, le tag de fermeture s'impose.
D'autre part, il est possible d'utiliser des balises de mise en forme du texte,
d'insertion de lien à l'intérieur du couple <LI> </LI>.

Le HTML n'offre pas autant de possiblité que le traitement de texte en matière

de puces, dont l'affichage dépend aussi du navigateur utilisé. Toutefois, il est
possible de substituer d'autres puces à celle par défaut. Ceci se fait par
l'utilisation de l'attribut TYPE qui peut prendre les valeurs suivantes: disk (par
défaut), circle ou square.
5-Listes: Les listes à puces
5-Listes: Les listes ordonnées
Le principe est le même que pour les listes non ordonnées:
<OL></OL> (Ordered List) indique au navigateur le début et la fin d'une liste
ordonnée et la paire <LI> </LI> sert à en introduire chacun des éléments qui sera
automatiquement numéroté par le navigateur.
De façon évidente, la structure de base d'une liste ordonnée de 3 éléments sera la
suivante:

Là aussi, on utilise l'attribut TYPE avec les valeurs suivantes: A (lettres majuscules), a (lettres
minuscules), i (petits chiffres romains), I (grands chiffres romains)
1 étant la valeur par défaut.
L'attribut START permet de spécifier à partir de quel niveau la numérotation doit commencer; ainsi,
le code source suivant:
5-Listes: Les listes de définition
Utilisées au départ pour répertorier des définitions (d'où le nom !) ces listes connaissent d'autres
usages.
<DL> </DL> (Definition List) indique au navigateur le début et la fin d'une liste de définition et la
paire <DT> (Definition Term) et <DD> (Definition Data) sert à en introduire les éléments: un terme
et sa définition.
5-Listes Exercice
Créer le document html qui permet d'obtenir cette hiérarchie :
6-Tableaux
Un tableau se définit comme un arrangement de lignes et de colonnes. Certes. En quoi ceci est-il
utile dans le processus de création d'un site web ?

Tout simplement parce que en jouant sur le nombre de lignes et de colonnes, leur taille,
l'alignement du texte ou de l'image à l'intérieur des cellules etc. on peut optimiser la présentation
d'une page
6-Tableaux
<TABLE> </TABLE> indique au navigateur le début et la fin d'une table. Le tableau est ensuite
décrit ligne par ligne à l'aide des balises : <TR> </TR> (Table Row). Pour créer des cellules, il faut
définir des colonnes à l'intérieur de chaque ligne ; deux cas se présentent alors :

•On veut définir une série de cellules d'en-tête (cellules servant de titre aux colonnes, je le
rappelle) : on utilise alors à l'intérieur de la ligne la paire <TH> </TH> (Table Head) autant de fois
qu'il y a de colonnes...

• On veut définir une série de cellules de données (qui pourront contenir du texte, des images,
une table...) : on utilise alors à l'intérieur de la ligne la paire <TD> </TD> (Table Data) autant de
fois qu'il y a de colonnes..

Remplir le tableau
Rien de plus simple : il suffit, à l'intérieur
des couples <TD> </TD> de taper le texte
(avec la mise en forme désirée) ou
d'insérer des images, le tout à l'endroit
désiré du tableau.
6-Tableaux
Il peut être nécessaire que soient visibles bordure et quadrillage du tableau. Les
attributs <BORDER="x">, <CELLSPACING="x"> et <CELLPADDING="x"> (où x est une valeur en
pixels) sont là pour permettre de jouer sur l'existence et l'épaisseur de la bordure et du quadrillage.

Attribut Utilisation
Le simple ajout de cet attribut, sans spécification de valeur, fait apparaître une
bordure et un quadrillage dont la taille est à la discrétion du navigateur.
<BORDER="x"> Si cet attribut n'est pas présent, la bordure n'est pas visible mais le tableau est
affiché avec l'espacement qui lui est réservé par le navigateur. En fixant la
valeur à 0, on supprime bordure et quadrillage.
Sert à définir l'espace entre les cellules du tableau. Sa valeur par défaut est
<CELLSPACING="x">
fixée à 2.
Indique la distance minimale entre le bord d'une cellule et son contenu. Sa
<CELLPADDING="x">
valeur par défaut est de 1.
6-Tableaux
Attributs des balises <TR>, <TH> et <TD>

<ALIGN="LEFT|CENTER|RIGH
Permet d'aligner le contenu de la cellule concernée.
T">
<VALIGN="TOP|MIDDLE|BOTT Permet d'aligner verticalement (en haut, au centre ou en bas) le
OM"> contenu de la cellule concernée.
Même fonctionnement que dans la balise <TABLE>. Si on définit la
<WIDTH="x">
largeur d'une cellule, elle définit la largeur pour la colonne entière.
Même fonctionnement que dans la balise <TABLE>. Si on définit la
<HEIGHT="x">
hauteur d'une cellule, elle définit la hauteur de toute la ligne.
Permet de réunir (fusionner) x lignes. Les habitués des feuilles de
calcul excel comprendront tout de suite... si ce n'est pas clair, une
<ROWSPAN="x">
étude attentive du code source permettra, je l'espère, de clarifier la
chose.
<COLSPAN="x">Fait fusionner x colonnes
6-Tableaux: Exercices
 7-Formulaires
L'utilisation des formulaires est une clé de l'interactivité grandissante entre le webmaster et les
visiteurs.

Un formulaire Web, également appelé formulaire HTML, est une page en ligne qui permet la saisie
par l'utilisateur. Il s'agit d'une page interactive qui imite un document ou un formulaire papier, où les
utilisateurs remplissent des champs particuliers.
❖ Structure de base

<FORM> </FORM> indique au navigateur le début et la fin d'un formulaire. Deux éléments essentiels sont ensuite
précisés à l'intérieur du tag d'ouverture :

L'adresse de destination du formulaire ("http://www.truc.com/" ou "mailto:[email protected]")

: <FORM ACTION="URL">. Le but de ce p'tit cours étant une initiation, on retiendra la seule
possibilité de recevoir par mail le contenu du formulaire rempli.

La méthode de transmission du formulaire : <FORM METHOD="METHODE">

où METHODE est soit GET soit POST.
7-Formulaires
❖ Structure de base
Outre les deux attributs mentionnés ci-dessus, on peut aussi choisir de
préciser :

Le type d'encodage du formulaire : <FORM ENCTYPE="TYPE">. On

choisira de fixer le type d'encodage à text/plain pour ce qui nous
concerne.

Le nom du formulaire : <FORM NAME="Nom"> (sert ensuite le cas

échéant dans des scripts).
Le contenu d’un formulaire peut être:

Zone de saisie à une ligne

Zone de saisie multiligne

Choisir, cocher, sélectionner

7-Formulaires
❖ Structure de base: Zone de saisie à une ligne
Elles sont créées par la balise <INPUT> qu'on ne ferme pas, tout comme c'était le cas pour la
balise d'insertion d'image. A l'intérieur de cette balise, un certain nombre d'éléments sont à
préciser :
Ce type de contenu n’est pas fonctionnel car rien ne permet de déclencher l'envoi du
formulaire rempli à l'adresse indiquée, ce que nous verrons plus loin.

Attribut Fonction
Chaque zone de saisie doit avoir un nom unique (et de préférence significatif) dans le formulaire. Ce nom doit bien être
<NAME="nom"> mis entre guillemets et ne doit contenir ni accents ni espace. Il sert lors de la récupération du contenu du formulaire par
mail.
<SIZE="valeur"> Détermine la longueur (nombre de caractères) de la zone affichée à l'écran
Détermine la longueur interne de la zone, soit le nombre de caractères qu'elle peut réellement contenir (illimité par
<MAXLENGTH="valeur">
défaut). Le cas échéant, une barre de défilement s'ajoutera si la longueur interne est supérieure à la longueur affichée.
En principe, on peut tout écrire dans une zone input. Mais on peut aussi choisir de spécifier le type de saisie autorisée:
texte, nombre entier, nombres décimaux, date, adresse internet, mot de passe (caractères non visibles et remplacés par
<TYPE="text|int|float|date|url|
des astérisques).
password">
Nous reviendrons plus loin sur des cas particuliers de valeur pour TYPE comme radio, checkbox, button, submit, reset
et file.
<VALUE="valeur"> Sert à afficher une valeur par défaut de la zone de saisie.
<MIN="valeur"> Fixe la valeur minimale autorisée dans une zone destinée à la saisie numérique.
<MAX="valeur"> Fixe la valeur maximale autorisée dans une zone destinée à la saisie numérique.
7-Formulaires
❖ Structure de base: Zone de saisie multilignes

Ces zones servent par exemple à entrer des commentaires et autres remarques d'une certaine
longueur. Elles sont créées par la balise <TEXTAREA> </TEXTAREA>. Cette zone de saisie doit
elle aussi être nommée de la même façon qu'une zone monoligne, par <TEXTAREA
NAME="nom">.

On doit également en définir la taille, c'est ce à quoi servent <TEXTAREA ROWS="valeur"

COLS="valeur">.

<FORM ACTION=«traitement.php" METHOD="POST" ENTYPE="text/plain">

<P align="left">Veuillez entrer votre mot de passe : <INPUT TYPE="PASSWORD"
NAME="pass" SIZE="9"> <BR>
Votre date de naissance : <INPUT TYPE="DATE" NAME="Naissance" SIZE="8"
MAXLENGHT="8" VALUE="jj/mm/aa"> <BR>
<TEXTAREA NAME="Comment" COLS="30" ROWS="10">Entrez ici votre
commentaire</TEXTAREA> <BR>
</FORM>
7-Formulaires
❖ Structure de base: Bouton d’option

On propose un certain nombre de petit "boutons", chacun ayant un nom, parmi lesquels on ne
peut en choisir qu'un. C'est ici qu'on utilise <INPUT TYPE="radio">.

On va ensuite utiliser <INPUT TYPE="radio" NAME="Nom"> pour nommer le groupe de zone

d'options et créer autant de zones de même nom que d'options (ça paraît complexe comme ça,
mais un p'tit exemple et hop ça sera limpide).

Tous les boutons d'un même groupe ont le même nom, il va donc falloir définir un nom interne
pour différencier les différents boutons (je rappelle qu'on ne peut en choisir qu'un) ce qui se fait
avec <INPUT TYPE="radio" NAME="Nom" VALUE="valeur">.
7-Formulaires
❖ Structure de base: Bouton d’option

Tous les boutons correspondant au choix de l'état-civil sont nommé EC mais ont
chacun un nom interne différent: lors du retour du formulaire le mail contiendra EC =
Valeur interne du bouton sélectionné.
L'attribut CHECKED permet de présélectionner un bouton (à utiliser bien
évidemment pour un seul d'entre eux !).
Le nom de la zone et le nom interne ne doivent comporter ni espace, ni accent, ce
qui évidemment n'est pas le cas pour la "légende" (texte visible à l'écran).
❖ Structure de base: Case à cocher

Elles se présentent comme les boutons d'options comme un groupe de

boutons avec une légende, mais avec cette différence que le visiteur
peut en cocher plusieurs. Le fonctionnement est semblable à celui vu
pour les boutons d'options avec cette fois la syntaxe suivante :

<INPUT TYPE="CHECKBOX" NAME="Nom de la zone" VALUE="Nom

interne">.
 7-Formulaires
❖ Structure de base: Liste de choix

Elles permettent elles aussi à l'utilisateur de choisir une option parmi d'autres. On les créée à l'aide de
la balise <SELECT NAME="Nom de la liste" SIZE="5" MULTIPLE> </SELECT> : notez bien qu'il n'y a
toujours ni espace ni accent dans le nom, que SIZE indique le nombre d'éléments qui seront visibles
sans le recours à une barre de navigation et que MULTIPLE autorise expressément les choix
multiples (utilisation de la touche MAJ et de la touche CTRL) . Il convient ensuite de spécifier les
différents éléments de cette liste: <OPTION>Elément de la liste</OPTION>
7-Formulaires
❖ Structure de base: Bouton

Une fois le formulaire créé, il faut penser à l'envoyer; donner au visiteur la

possibilité de tout reprendre à zéro

La syntaxe pour le bouton d'envoi de commande d'envoi de formulaire est la

suivante : <INPUT TYPE="SUBMIT" VALUE="Nom">, le nom étant le texte
qui figurera sur le bouton.

La syntaxe pour le bouton de "remise à zéro" du formulaire est la suivante

: <INPUT TYPE="RESET" VALUE="Nom">, le nom étant le texte qui figurera
sur le bouton.
EXERCICE
EXERCICE
Indications sur le formulaire :
● Les boutons radio appartiennent
au même groupe (exclusivement
mutuelles).
● Le champ Localité possède une
valeur prédéfinie : Tunis.
● La liste des pays contient les
noms suivants (dans cet ordre) :
Algérie, Libye, Maroc et Tunisie.
Avec Tunisie est présélectionnée.
● La liste Applications permet
plusieurs choix possibles avec
size="4" et multiple comme
attribut de la liste.
EXERCICE
Écrire une page HTML5, avec les feuilles des styles, destiné à l'envoi d'un fichier en upload HTTP. Pour cela nous aurons recours à un
formulaire tel que celui-ci :
● Il utilise la méthode post
● Il présente une zone de saisie pour un identifiant (input de type text qui aura automatiquement le focus dès l'ouverture de la page et
dont la valeur saisie devra impérativement commencer par une lettre minuscule (faire en sorte que l'utilisateur en soit informé en cas
d'échec par l'attribut title),
● Il présente une zone de saisie pour un mot de passe (input de type password contenant impérativement entre 4 et 8 caractères
contenant impérativement au moins un chiffre, une lettre majuscule, une lettre minuscule et un autre caractère.
● Il présente un champ caché nommé MAX_FILE_SIZE et dont la valeur sera 3000 (input de type hidden). Ce champ peut limiter la
taille du fichier transféré aussi bien au niveau du navigateur qu'au niveau du script traitant le formulaire coté serveur.
● Il présente une zone de saisie pour des fichiers (input de type file en mode multiple.
● Il présente un bouton d'envoi.
● L'envoi de ce formulaire est désactivé
EXERCICE

DIV: form
Cours : Programmation web 1

Chapitre 3 : CSS
Définition
CSS - Cascading Style Sheets
Mise en cascade des styles

Langage qui permet de définir les styles

appliqués aux balises dans un fichier externe .css

Le concept des feuilles de style est introduit en 1997 par Microsoft avec son Internet
Explorer 3.0, ces feuilles de style n'ont connu qu'un intérêt limité du fait que celles-ci
n'étaient pas reconnues par Netscape Navigator 3.0. Depuis les choses ont bien changé,
puisque la norme Html 4.0 en a repris le concept (CSS version 1).
Principe
Dans un document, il arrive souvent que l'on attribue à certains éléments des caractéristiques
de mise en forme identiques. Par exemple, les noms de chapitres seront mis en police Arial, en
gras et en couleur bleue.

On peut imaginer que l'on puisse donner à cette définition de mise en forme un nom soit "titre"
et qu'à chaque nouveau chapitre, plutôt que d'écrire chaque fois le nom du titre et puis de
devoir le mettre en Arial, gras, bleu, l'on puisse dire à l'ordinateur, nom du chapitre mais dans la
mise en forme que j'ai défini sous le nom de "titre". Cette définition de mise en forme
particulière, on va l'appeler feuille de style.
Le concept de feuilles de style « Style Sheets » existe déjà dans les logiciels de traitements
de texte comme dans Microsoft Word. Pour l’utiliser dans des pages web Il faut coupler le
concept au langage Html par des propriétés spécifiques.

On remarque que l'on parle de feuilles de style car l’objectifs est d'en définir plusieurs. On
parle aussi de feuilles de style en cascade « Cascading Style Sheets » ou « CSS » car en cas
de styles identiques, un ordre de priorité sera déterminé par le navigateur.

Il faut savoir que les feuilles de style ne sont pas une composante directe du langage Html
mais un développement à part dans la publication de pages Web.
Utilité
Distinction entre la structuration du texte et les propriétés typographiques que l'on applique au
texte

Les styles permettent d'appliquer certaines propriétés à des balises HTML

Plusieurs documents peuvent partager les mêmes instructions typographiques

Homogénéité de typographie et de présentation de toutes les pages auxquelles s'appliquent la

feuille de styles

L'apparence des documents peut facilement être modifiée en utilisant les styles définis dans la
feuille de styles
Comment ?
La mise en forme doit peut etre mise:

Directement dans la page HTML

Dans un fichier séparé : c'est la feuille de styles ! ! Un style défini

directement dans la page HTML est prioritaire

Un style défini directement dans la page HTML est

prioritaire sur un style défini dans un fichier externe
La balise <style >
Définition d’un style
❖ Syntaxe générale
balise { propriété_de_style: valeur;
La syntaxe de définition d'un style est la suivante :
propriété_de_style: valeur }
Exemple : H3 { font-family: Arial ; font-style: italic }

la balise H3 sera en Arial et en italique. Et dans la page html toutes les balises <H3> appliquerons ce
style.

Dans la définition d’un style il faut respecter les règles suivantes :

Les feuilles de style portent sur les balises principalement.
Les propriétés de style sont entourées par des « { ».
Le couple "propriété de style, valeur" est séparé par deux point (:).
Chaque couple "propriété de style : valeur" est séparé par un point-virgule (;).
!
On peut attribuer plusieurs valeurs à une même propriété. Dans ce cas, on séparera les différentes
valeurs par des virgules. Exemple : H3 {font-family: Arial, Helvetica}.
Le CSS ne fait pas de différence entre majuscules et minuscules.
Définition d’un style
❖ Style interne
Les styles internes sont incorporés à l'intérieur d'une page Html, c’est pour
cette raison qu’ils s’appellent styles internes.

Styles dans la balise <HEAD> Styles dans la balise <BODY>

Ces styles s’appliqueront à toutes les On peut aussi utiliser les feuilles de style
balises du document. Pour définir les dans le corps de la page Html. La syntaxe
styles dans l’entête d’une page HTML est la suivante :
on utilise la syntaxe la suivante : <HTML>
<HEAD>
La balise <STYLE> avertit le navigateur </HEAD>
qu’on va utiliser des feuilles de style. <BODY>
<HEAD> <H1 style="font-family: Arial;
<STYLE type="text/css"> font-style: italic"> Titre1 </H1>
<!-- Définition des styles --> </BODY>
</STYLE> </HTML>
</HEAD> Le style Arial, italique n'affectera que
cette seule balise H1.
Définition d’un style
Styles dans la balise <HEAD> Styles dans la balise <BODY>

On peut aussi définir le style

L'attribut type="text/css" comme suit :
informe que ce qui suit est du
texte et qu'il s'agit de code css. <STYLE type="text/css">
H1 {font-family: Arial; font-style:
Pour faire des commentaires en italic}
CSS, on utilise la notation /* ... */ </STYLE>

Dans ce cas ce style affectera

toutes les balises H1 qui vont
le suivre.
Définition d’un style
❖ Style externe
C'est bien de pouvoir définir une présentation de style valable pour une page (styles internes).
Mais CSS propose mieux.

Définir une présentation de style valable pour plusieurs pages et même pour toutes les pages d'un
site. Ce qui est possible, en créant une page externe qui regroupera toutes les feuilles de style, et
en reliant chaque page à cette page de style.
On crée d'abord, dans le répertoire du site, un fichier avec l'extension .css soit par exemple
styles.css qui contiendra toutes les feuilles de style. Et qui a la structure suivante :
Balise1 { propriété_de_style: valeur }
Balise2 { propriété_de_style: valeur }

Exemple:
BODY { color: red }
P { color:blue; font-family:Times; text-align:left }

Ensuite, on crée une page html normale soit page1.htm (dans le même répertoire que le fichier
styles.css). Et dans son entête on ajoute le code nécessaire pour utiliser les styles déjà définies
commesuit :
 Définition d’un style
❖ Style externe
<HTML>
<HEAD>
<LINK rel=stylesheet type="text/css" href="styles.css">
</HEAD>
<body>
<P align="center">Text 1</P>
Text 2
</body>
</html>

La balise <LINK> avertit le browser qu'il faudra réaliser un lien.

L'attribut rel=stylesheet (sans guillemets) précise qu'il y trouvera une feuille de style externe.

L'attribut type="text/css" précise que l'information est du texte et du genre CSS.

L'attribut classique de lien href donne le chemin d'accès au fichier CSS à lier.
Les classes
❖ Notions de classes

Pour affecter des styles différents à une même balise, les feuilles de style proposent la solution
des classes. La définition d'un style était : balise {propriété de style: valeur}

Elle devient : balise.nom_classe { propriété de style: valeur } Ou, comme la mention de la balise
est facultative : .nom_classe { propriété de style: valeur }

L'emploi du point « . » devant le nom de la classe est obligatoire.

Pour appeler l'effet de style dans le document, on ajoute le nom de la classe à la balise.
<balise class="nom_classe"> ... </balise>
Définition d’un style
Exemple:
On souhaite mettre ce qui est important dans le texte en gras et en bleu. On crée la classe «
.essentiel » : .essentiel { font-weight: bold; color: green }
Et dans le document Html, il suffit d'appeler la classe « essentiel » quand
cela se révèle nécessaire :

<P align="center">Text 1</P>

Text 2
<P class="essentiel"> paragraphe
</P>
<H1 class="essentiel">Titre 1</H1>
 Les balises SPAN et DIV
❖ Utilité

Il faut penser à un système pour déconnecter certains morceaux de paragraphe ou plusieurs

paragraphes de cette logique d'écriture avec des feuilles de style. Ce sont respectivement les
balises SPAN et DIV qui créent ainsi des petits blocs particuliers dans le document sans devoir
passer par les éléments structurels du Html classique.

Notons que SPAN et DIV s'utilisent toujours avec les classes.

La balise SPAN <HTML>

<HEAD>
La balise <SPAN> permet d'appliquer des <STYLE type="text/css"> .element {font-size:
styles à des parties du texte d’un paragraphe. x-large } </STYLE>
</HEAD>
Exemple:
<BODY>
<P>Un monde de <SPAN
Si on voudrais écrire : Un monde de géants. class="element">géants</SPAN>.</P>
</BODY>
</HTML>
Les balises SPAN et DIV
La balise DIV <HTML>
<HEAD>
La balise <DIV> permet de <STYLE type="text/css"> .zone {font-size: x-small}
regrouper plusieurs paragraphes </STYLE>
c'est-à-dire de délimiter une zone </HEAD>
comportant plusieurs <BODY>
paragraphes. Texte Normal
<DIV class="zone">
<P>Texte 1</P>
<P>Texte 2</P>
</DIV>
</BODY>
</HTML>
Ce code donne comme résultat :
Texte Normal
Texte 1
Texte 2
Positionner avec CSS
Il est possible de positionner, au pixel près, du texte ou une image dans une page HTML avec les
feuilles de style. Il y a deux types de position : position absolue et position relative.

La position absolue {position: absolute} se détermine par rapport au coin supérieur gauche de la
fenêtre du navigateur. Les oordonnées de ce point sont top = 0 et left = 0.

Les coordonnées d'un point s'expriment en pixels, du haut en bas pour top et de gauche à droite
pour left.

La position relative {position: relative} se détermine par rapport à d'autres éléments de la page,
par exemple un élément du code Html.
Positionner avec CSS
❖ Positionner un texte

Pour placer un texte dans une position donnée, on utilise la propriété « position » pour laquelle on
précise le type de position absolue ou relative et les valeur en pixels de top et left.

On veut placer le texte : "Publication Html" à 50 pixels du haut de la fenêtre (top) et à 150 pixels
à gauche (left).
Positionner avec CSS
❖ Positionner une image
Positionner avec CSS
❖ Superposer un texte sur une image
Positionner avec CSS
Positionner avec CSS
Exercice
Cours : Programmation web 1
Chapitre 4: Javascript
Introduction
Introduction
Introduction
Introduction
JAVA Javascript
ava est un langage de programmation compilé JavaScript est un langage de programmation
et interprété interprété.
Les applications Java peuvent s’exécuter sur Le code JavaScript est exécuté sur le
n’importe quelle machine virtuelle (JVM) ou navigateur uniquement, car JavaScript est
navigateur. développé que pour le navigateur.

Le fichier JavaScript porte l’extension «.js». Il

L’extension d’un fichier Java est «.Java» et le
est interprété mais non compilé. Chaque
code source est traduit en bytecodes qui est
navigateur dispose d’un interpréteur Javascript
exécuté par JVM (Java Virtual Machine).
pour exécuter le code JS.

JavaScript est inclut dans une page Web et

Java est un langage autonome.
s’intègre à son contenu HTML.
Mise en place
Elements de base
1. Commentaire
Elements de base
2. Lecture et écriture
Elements de base
2. Lecture et écriture
Elements de base
2. Lecture et écriture
Elements de base
2. Lecture et écriture
Elements de base
3. Déclarations
Elements de base
4. Visibilités des variables
Elements de base
5. Tableaux
Elements de base
5. Tableaux
Elements de base
5. Tableaux
Elements de base
5. Tableaux
Opérateurs
1. Opérateurs arithmétiques

initialisation
Opérateurs
2. Concaténations
Opérateurs

3. Comparaisons
Opérateurs
4. Opérateurs logiques
Conditions
1. If - else
Conditions
2. Switch
Conditions
3. Exercice
Boucles
1. Boucle While
Boucles
1. Boucle While
Boucles
2. Boucle do-while (peu utile)
Boucles
2. Boucle for (très utile)
Boucles
3. Exercices
▪ Ecrire en javascript le jeu “devinette”. Le programme doit choisir un nombre au hasard
entre 1 et 100 que l’utilisateur doit deviner en un nombre minimum de coups. Pour cela, il
propose des nombres et à chaque proposition le programme répond si la valeur à trouver
est plus petite ou plus grande.
▪ L’utilisateur à 10 essaie, on affiche dans un label le nombre de tentatives restantes avec un
couleur rouge .
▪ Quand la valeur est trouvée, on affiche dans une fenêtre le nombre de tentatives
effectuées.
▪ Pour la génération aléatoire, vous utiliserez la fonction :
Fonctions
1. Déclarations
Fonctions
2. Variables globales et locales
Fonctions
3. Arguments
Fonctions
3. Arguments
Fonctions
4. Valeurs de retours
Fonctions
5. Fonctions anonymes
Objets
1. Prototypes
Objets
2. Objets latéraux
enregistrement
Objets
3. Parcourir l’objet avec for-in