Module : Programmation Web Avancée

Filière GI, Semestre : 4, AU : 2022-2023

TP1 : Programmation Web Statique

Objectifs de l’activité pratique :
1. Notions sur le HTML, le WEB et le W3C
2. Créer une page web statique au format HTML :
- les marqueurs ou balises
- entête d’une page :
- titre de page
- corps d’une page :
- création d’un tableau avec et sans les bordures
- modifier le fond, la police de caractère, la taille et la couleur
- insérer un lien sur un texte
- insérer un texte défilant et un lien
- insérer une image animée et un lien
- insérer une balise contenant un menu déroulant avec liens
- insérer une animation
3. Mise en forme du formulaire
4. Créer une feuille de style au format CSS (tutoriel)
5. Création des scripts JS
Partie 1 :
Exercice 1
a. À l’aide d’un éditeur de texte de votre choix, recopiez le code ci-dessous :

1/8
 b. Sauvegardez le code sous le nom : Q1.html dans un dossier (ou répertoire) que vous aurez
préalablement créé et nommé : TP_1_web.
c. Ouvrez le fichier que vous venez d’enregistrer avec un client web(navigateur).

Exemple d’affichage sur FireFox

Remarques :

Certaines balises permettent d'ajouter des propriétés spéciales aux éléments délimités par les
balises, ou même pour les éléments définis par les balises. Ces propriétés sont appelées attributs et
prennent certaines valeurs. Les attributs sont toujours situés dans les balises d'ouverture après le
nom de la balise, et sont séparés par des espaces, les attributs sont suivis du signe = puis des valeurs
qui sont délimitées par des guillemets " . La valeur ne doit pas faire plus de 1024 caractères. Par
exemple un paragraphe peut être centré, grâce à l'attribut align et la valeur center. La balise et le
paragraphe s'écriront alors de la manière suivante :

<p align="center" >Texte du paragraphe </p>

<p></p>: balise d'ouverture et balise de fermeture.
align : attribut d'alignement.
="center" : valeur de l'attribut d'alignement (ici : center pour centrer le texte).

Les balises HTML : Visiter le site https://www.w3schools.com/

d. Essayer de modifier le fichier précédent afin de centrer le paragraphe, modifier la taille de

la police et la couleur de My First paragraph en rouge, puis enregistrer ce fichier avec le
nom index.html (en gardant l’ancien fichier avec l’ancien nom Q1.html).

2/8
 e. Entrez l’adresse où se trouve les deux fichiers html dans votre navigateur mais sans
indiquer le nom du fichier html. Concluez concernant la particularité du fichier nommé
index.html.
f. Au niveau de la page index.html, créer un lien vers une nouvelle page nommée est.html
dont le contenu est décrit dans la figure ci-dessous.

g. En utilisant des règles de style css , Ajouter les règles nécessaires entre les balises
<style></style> afin d’aboutir le résultat de la figure ci-dessous.
Les changements : Enlever les bordures(Sélecteur de balise), Centrer le lien Accueil
(Sélecteur de classe), Centrer les logos (Sélecteur de classe).

Partie 2 : Formulaire HTML5

1- Utilité d’utilisation et principaux éléments constituant un formulaire
Le rôle d’un formulaire HTML est de retourner des informations saisies par utilisateur vers une
application serveur. C’est un moyen principal d’interaction entre ces derniers.
La création d’un formulaire nécessite la connaissance de quelques balises HTML indispensables :
1- Structure : un formulaire commence toujours par la balise
<form action="/page.php" method="post"> et se termine par la balise </form>
1.1 L’attribut action :
L'attribut action définit l'action à effectuer lors de la soumission du formulaire.
Généralement, les données du formulaire sont envoyées vers un fichier sur le serveur lorsque
l'utilisateur clique sur le bouton Envoyer. Et Si l'attribut action est omis, l'action est définie sur la
page actuelle.

3/8
 1.2 L’attribut method :
L'attribut method spécifie la méthode HTTP à utiliser (post ou get) lors de la soumission des
données du formulaire.
2- Champ de saisie de text en ligne :
<input type = "text" name ="nom_du_champ" value="chaîne">
3- Boutons d’envoi et d’effacement :
<input type=" submit " value = "Envoyer">
<input type = "reset" name ="efface" value = "Effacer">
4- Case à cocher et bouton radio :
<input type = "checkbox" name ="case1" value="valeur_case">
<input type = "radio" name ="radio1" value ="valeur_radio">
5- Liste de sélection avec options à choix unique
<select name ="listechoix" >
<option value = "un"> choix </option>
<option value ="deux"> choix2 </option>
</select>
6- Liste de sélection avec options à choix multiples
<select name =" listechoix " multiple>
<option value = "un"> choix1 </option>
<option value = "deux"> choix2 </option>
</select>
Pour aller plus loin sur les éléments du formulaire, visiter le site https://www.w3schools.com/

2- Méthodes d’envoi get et post

La transmission des informations saisies par l’utilisateur via un formulaire est assurée selon deux
méthodes d’envoi GET et POST.
A. La méthode GET : place les informations d'un formulaire directement à la suite de l'adresse
URL de la page appelée.
http://www.site.com/cible.php?champ1=valeur1&champ2=valeur2
Inconvénients :
- rendre visibles les données dans la barre d’adresse du navigateur.
- De plus, la longueur totale est limitée à 255 caractères, ce qui rend impossible la
transmission d’un volume de données important.
B. La méthode POST : regroupe les informations dans l'entête d'une requête HTTP
Assure une confidentialité efficace des données

4/8
Exercice 2 :
Le but de cet exercice est de rédiger le code d’une page nommée YourName-formulaire.html, et
qui doit avoir l’apparence de la page correspondante, en annexe du sujet (p. X).
Question 1 : Créer l’en-tête HTML, le titre (avec une balise h1) et la phrase de bas de page.
Question 2 : Créer le formulaire avec la balise <form>. La cible (action) du formulaire sera
destination.html. Mettre en place le pourtour du formulaire à l’aide de la balise <fieldset> ; le
texte en haut à gauche du cadre s’obtient grâce à la balise <legend>.
Question 3 : Ajouter les champs noms et prénoms (type text).
Question 4 : Ajouter le champ date de naissance (type date).
Question 5 : Ajouter le champ lieu de naissance (type radio) ; les balises nécessaires seront
entourées de balises fieldset afin d’obtenir l’aspect visuel du cadre (le texte Lieu de naissance
s’obtient grâce à la balise <legend>). Attention : il faut que le choix soit exclusif, c’est-à-dire
qu’on ne puisse pas sélectionner les deux boutons simultanément : pour cela, il faut que les
différents boutons aient le même name (mais un id différent).
Question 6 : Ajouter le champ adresse postale (balise textarea). La zone de texte fait 2 lignes et
30 colonnes. La syntaxe de textarea est la suivante :
<textarea id="..." rows="..." cols="..." placeholder="..."></textarea>

Question 7 : Ajouter le champ code postal (type number).

Question 8 : Ajouter les champs adresse électronique et page personnelle (types email et url)
Question 9 : Ajouter le champ téléphone portable (type text).
Question 10 : Ajouter le champ semestre (balises select). La liste déroulante devra contenir les
valeurs S1, S2, S3 et S4. Pour chacune des valeurs, il faut mettre un champ value (qui peut être
identique à la valeur affichée).
Question 11 : Ajouter le champ « niveau en HTML » (type range). La barre devra aller de 0
(min="0") à 10 (max="10") avec des pas d’incrément de taille 1 (step="1").
Question 12 : Ajouter le champ connaissances (type checkbox) ; les balises nécessaires seront
entourées de balises fieldset afin d’obtenir l’aspect visuel du cadre. Il faut que les différentes cases
aient le même name (mais pas le même name que les deux boutons plus haut !).
Question 13 : Ajouter le bouton « Envoyer » (balise button avec type submit).

Exercice 3 : Mise en forme du formulaire

Question 1 : Effectuer une copie de la page réalisée à l’exercice précédent, et la nommer
YourName-formulaire2.html. Créer une feuille de style CSS vierge VotreNom-
formulaire.css.

Question 2 : Ajouter à VotreNom-formulaire2.html un lien vers la feuille de style, en

ajoutant dans l’en-tête HTML (<head>) une balise <link rel="stylesheet" ... />.

5/8
N.B : Dans la suite de l’exercice, il conviendra de remplir la feuille de style VotreNom-
formulaire.css de façon à obtenir l’apparence de la page correspondante, en annexe (page
8). Les seules modifications autorisées au fichier HTML VotreNom-formulaire2.html seront
l’ajout d’un nombre minimal d’attributs de type class ou id dans le corps de la page. Toutes
les autres modifications se feront dans le fichier CSS.
Question 3 : Modifier la feuille de style afin que toute la page (sélecteur body) soit par défaut en
police de caractères à chasse fixe (font-family: monospace;).

Question 4 : Mettre en forme le titre (sélecteur h1) comme suit : la marge supérieure (margin-
top) est de 2em, son alignement est centré (text-align:center;), et la barre inférieure est
noire de largeur 10 pixels (border-bottom: solid black 10px;).

Question 5 : Ajouter dans le code HTML un id="main" au cadre (fieldset) principal. Modifier
la feuille de style afin que l’espace (padding) entre le contenu du formulaire et ce cadre principal
soit de 50 pixels. Ceci ne doit pas s’appliquer aux deux sous-cadres « Lieu de naissance » et «
Connaissances ».

Question 6 : Modifier la feuille de style afin que les légendes de cadres (sélecteur legend)
s’affichent en majuscules (text-transform: uppercase;).

Question 7 : Modifier la feuille de style afin que les étiquettes (sélecteur label) concernées
s’affichent en gras.
Question 8 : Modifier la feuille de style afin que les étiquettes soient toutes alignées à gauche, et
que les champs s’affichent tous alignés à une distance de 250 pixels de la partie gauche de
l’étiquette. On utilisera une solution qui ajoutera à un sélecteur d’étiquette (label) une largeur de
250 pixels ainsi que les propriétés display: block; et float: left;.

Question 9 : Mettre en forme le cadre connaissances : la couleur du texte est rouge, celle du fond
est #C0C0FF.

Question 10 : Mettre en forme la phrase en bas de page, comme suit : cette phrase est séparée
de ce qui précède d’un espace de 2em, les barres supérieures et inférieures sont bleues et d’une
largeur de 5 pixels, le texte est centré, et sa taille est x-small.

Exercice 4 : Améliorations et vérifications

Dans cet exercice, nous allons améliorer le fichier VotreNom-formulaire2.html (et
uniquement ce fichier).
Question 1 : Modifier votre formulaire pour que le semestre sélectionné par défaut soit S2.
Question 2 : Modifier votre formulaire pour que seule la case « HTML » soit cochée par défaut.
Question 3 : Modifier votre formulaire pour que le code postal ne puisse avoir que 5 chiffres au
maximum.
Question 4 : Modifier votre formulaire pour que le numéro de téléphone portable soit un numéro
de téléphone français valide (10 chiffres commençant par un 06 ou 07). En cas d’erreur, le
navigateur doit afficher un message contenant « Numéro à 10 chiffres sans espace et
commençant par 06 ou 07 ». (L’erreur doit s’afficher lorsque l’on clique sur le bouton « Envoyer
».)
Question 5 : Ajouter un bouton qui, lorsque l’on clique dessus, réinitialise tous les champs du
formulaire à leur valeur par défaut.

6/8
Question 6 : Ajouter deux zones de texte Nom_Arabe, Prénom_Arabe en obligant l’utilisateur à
saisir que des lettres en arabe. En cas d’erreur, le navigateur doit afficher un message contenant
« Vous devez saisir votre nom en arabe ».

Annexe 1 :

7/8
Annexe 2

8/8