Académique Documents
Professionnel Documents
Culture Documents
Bases de données
et Internet
Travaux pratiques
Professeur : F. Kaghat
T.P. n° 1 : HTML – XHTML
Exercice 1 : Paragraphes
Ecrire un code XHTML qui permet de créer la page web de la structure suivante :
msn.gif
Insérez ce logo dans votre page Web (n'omettez pas l'attribut alt). Puis associez-y un lien vers le
serveur de msn (l'image devient alors un "bouton").
Utilisez comme valeur pour l'attribut border la valeur 0.
1
Liste à puce :
Adresse : Faculté des Sciences et Techniques de Fès, Maroc.
Tél : (212) 12 34 56 78 90
Fax : (212) 12 34 56 78 91
E-mail : html@gmail.com
Combinaison de listes numérotée et à puce :
1. Premier cycle universitaire :
Module 1 : Physique
Module 2 : Mathématiques
2. Dexième cycle universitaire :
o Module 1 : Systèmes d‘information
o Module 2 : Bases de données
3. Stage :
FST, Fès
2
Exercice 7 :
Le but de cet exercice est de créer un curriculum vitae en langage HTML. Nous serons
amené à utiliser la balise <table> pour la création des tableaux, <tr> pour l'ajout des lignes
et <td> pour l'insertion des cellules.
Créer une nouvelle page appelée cv.html.
Saisir le texte suivant comme titre h2, couleur "bleu foncé" :
CURRICULUM VITAE
A la ligne suivante, taper le texte "Informations personnelles" en gras couleur darkred et puis
passer à la ligne suivante.
Marquer le texte FST de Fès comme lien hypertexte sur le site de la FST : http://www.fst-
usmba.ac.ma/. Insérer une barre séparatrice de taille 50% couleur grise. Mettre une
couleur d'arrière plan beige pour la page. Changer les couleurs des liens hypertextes en vert
foncé.
Ajouter un paragraphe contenant le texte écrivez-moi aligné à droite comme lien hypertexte sur
l’email : alami@yahoo.fr
Exercice 8
Faire correspondre à chaque morceau de code à droite sa définition à gauche :
3
T.P. n° 2 : HTML - XHTML : Les tableaux
Exercice 1 : Tableaux
Ecrire une page XHTML qui contient le tableau suivant :
4
Exercice 4
Le recrutement via Internet est un moyen virtuel pour mettre en place une solution
d'intermédiation entre l'offreur et le demandeur d'emploi. Le but de cet exercice est de réaliser un
composant d'un site du recrutement Electronique ou ce qu'on appelle EJOB.
Créer une page Web appelée rubriques.html dans laquelle on regroupe toutes les rubriques du site
selon la présentation suivante :
Espace Entreprise
» Déposer une offre
» Consulter les CV
» Forum entreprises
Espace Étudiant
» Déposer votre CV
» Consulter les offres
» Forum étudiants
Les rubriques doivent être marquées comme des liens hypertexte sur le vide pour le
moment. La mise en forme doit être respectée et l'arrière plan des titres de ce sommaire doit
être en bleu foncé et la couleur du texte blanche.
Exercice 5 :
Créer une page appelée formations.html contenant le tableau suivant :
Nos Formations
Intitulé de la formation Perspectives
Contrôleur de gestion
Responsable administratif
Système d'information, Audit et Contrôle de
Auditeur interne
gestion
Responsable d'études
Ingénieur conseil en système d'information
Conseiller en gestion de patrimoine
Responsable du marketing de produits
Génie Financier - Banque et Finance financie
Ingénieur financier
Responsable d'études financières
o Chef de produit
Marketing et Commerce o Conseiller en marchandising
o Directeur commercial
Vers la fin du tableau ajouter le texte retour comme lien hypertexte qui permettra de revenir à la
page index.htm.
5
Tableau 1 Tableau 2
Tableau 3
En utilisant les balises XHTML et les attributs adaptés écrire le code XHTML permettant de
définir ces tableaux:
Note: On s’intéressera dans cet exercice uniquement à la structure des tableaux.
6
Exercice 8 :
Créer une page web qui regroupe une liste des liens hypertextes pour des moteurs de
recherche et serveurs de messagerie gratuits sous forme du tableau suivant :
Les phrases soulignées doivent être mises sous la forme indiquée ci -dessus et qui
représentent les adresses des serveurs web selon la correspondance suivante
Le moteur google http://www.google.fr
Aller sur altavista http://www.altavista.com
Rechercher par carrefour http://www.carrefour.fr
7
Le serveur yahoo http://www.yahoo.fr
Le serveur caramail http://www.caramail.com
Le serveur hotmail http://www.hotmail.com
A côté de chaque ligne du tableau on affiche une petite image de dimension 30X30 pixels
cliquable supposée enregistrée dans le même dossier que la page et s'appelle puce.gif.
Exercice 9 :
Créer une page nommée cours.html qui permet à l'internaute de télécharger des supports de
cours gratuitement. La page possède le canevas suivant :
Supports gratuits
word télécharger
Dépannage du premier degré d'un réseau
Le SGBD ACCESS pdf télécharger
Programmation Web en PHP word télécharger
Création des sites Web word télécharger
pdf télécharger
Langage C++
Les couleurs et du texte doivent être alternés d'une ligne à une autre. Si la couleur de
l'arrière plan est claire, la couleur du premier plan est foncée. Appliquer les couleurs selon
votre goût.
Marquer le texte Télécharger comme lien hypertexte, dans l'ordre, sur les documents
suivants : Resaux.doc, access.pdf, php.doc, web.doc, cpp.pdf.
8
T.P. n° 3 : HTML - XHTML :
Les formulaires
Exercice 1 :
Créer le code XHTML qui permet de concevoir le formulaire suivant :
Exercice 2 :
Créez une petite calculatrice permettant d’effectuer des opérations arithmétiques élémentaires
(addition, soustraction, multiplication et division) sur deux opérandes.
1. Affichez un formulaire permettant, dans l’ordre, de saisir la première opérande, puis de
sélectionner l’opération parmi une liste (champ SELECT), enfin de saisir la seconde opérande.
2. Remplacez le champ SELECT par des champs RADIO.
9
Exercice 3 :
1) Dans la page web exerxice.html, créez un formulaire pays composé au moins des éléments
suivants :
• un champ select pour sélectionner le nom d’un pays parmi Allemagne, Espagne, France et Italie
(respectez la casse en saisissant l’attribut value des champs option du select),
• un champ input de type text pour saisir sa superficie,
• un champ input de type text pour saisir le nombre d’habitants de ce pays,
• un champ textarea pour décrire ce pays,
• un champ input de type submit et de value Envoyer pour envoyer les informations au script
exercice.php,
• un champ input de type reset et de value Effacer pour réinitialiser votre formulaire.
Mettez la valeur de l’attribut method du formulaire à get.
Exercice 4 :
Ecrire un code XHTML qui permet de créer la page web de la structure suivante :
10
Exercice 5 :
Ecrire un code XHTML qui permet de créer la page web de la structure suivante :
Exercice 6 :
Vous allez maintenant coder un formulaire complet destiné à collecter des informations auprès de
l’internaute. Les informations le plus souvent demandées dans les formulaires sont les suivantes :
un nom d’utilisateur ;
une adresse ;
une adresse de courrier électronique ;
un mot de passe ;
la confirmation du mot de passe ;
une date de naissance ;
le genre (masculin/féminin) ;
les domaines d’intérêt ;
les hobbies.
Lorsque l’utilisateur clique sur le bouton Submit, toutes les informations saisies dans le
formulaire sont traitées par un script PHP.
Ecrire le code de la page Web affichant le formulaire HTML d’enregistrement d’un site d’achat
en ligne (voir figure ci-dessous, sauvegardez le fichier sous le nom index.htm).
11
Réaliser ce formulaire HTML destiné à collecter des informations sur l’utilisateur
12
T.P. n° 4 : Feuilles de style en cascade (CSS)
Exercice 1 :
Compléter le tableau suivant en donnant la signification de chacune des règles de style suivantes :
2 h1 {
color: green;
text-align: right;
}
3 h2
{font-family: Lucida, Helvetica, Arial,
sans-serif;
font-weight: bold;
font-size: 18pt;
text-align: center;
color: black;}
4 h1, h2, h3, p { color: green; }
5 p em { color: red; }
6 ul {list-style-type: square}
7 a { color: blue; }
Exercice 2 :
Créer une feuille de style interne appliquée aux titres :
gras
taille 4
italique
13
Exercice 3 :
Créer une feuille de style interne appliquée aux liens hypertextes :
taille 10px
couleur rouge
pas de soulignement
Exercice 4 :
Créer une feuille de style interne appliquée aux listes à puces :
gras
taille 12px
verdana
Exercice 5 :
Créer une feuille de style interne appliquée aux tableaux :
Largeur de 50%
Sans bordure
L’alignement des cellules au centre
Exercice 6 :
Créer un fichier externe qui regroupe tous les styles des exercices : 2, 3, 4 et 5.
Exercice 7 :
Réalisez la page Web représentée par l'image ci-dessous :
d'abord en définissant un "embedded style sheet"
puis en définissant un "external" stylesheet
14
T.P. n° 5
Installation de l’environnement de
développement. Programmation en PHP (1ère
partie)
Documentation
Le site officiel de PHP est extrêmement bien fait. La documentation de n'importe quelle fonction
est accessible depuis l'URL :
http://php.net/nom_de_la_fonction
N'oubliez pas de consulter les commentaires utilisateurs, car de très nombreux commentaires
donnent des conseils très utiles.
La documentation complète de PHP est disponible en français à l’adresse :
http://www.php.net/manual/fr/
Remarque :
Enregistrez toujours votre fichier sur votre serveur web en tp_y/exercice_z.php et ouvrez-le
depuis votre navigateur : http://xxx.xxx.xxx.xxx/tp_y/ exercice_z.php
Avec
y : numéro du T.P.
z : numéro de l’exercice
Exercice 1 : phpinfo()
Recopiez le texte suivant dans un fichier ~/tp_4/essai.php :
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content=''text/html; charset=ISO-8859-1" />
<title>mon premier script php</title>
</head>
<body>
<?php phpinfo() ?>
</body>
</html>
Exercice 2 :
1) Quelle est la différence entre un \n et un <br /> ?
15
2) Le fichier suivant peut-il être enregistré avec l’extension .php ou .htm ? Où se fait le traitement
des données ?
Exercice 3 :
1) Déclarer votre prénom dans une variable et faire afficher « Bonjour » suivi de la valeur de
cette variable.
2) Utiliser la fonction strtoupper pour faire afficher votre prénom en majuscule.
3) Utiliser la fonction strtolower pour faire afficher votre prénom en minuscule.
4) Utiliser la fonction strlen pour compter combien de caractères comporte votre variable.
5) Utiliser les caractères spéciaux \n \r et \t puis comprendre leurs significations.
6) Utiliser <pre> et </pre> autour de votre code, si besoin, pour garder le format désiré
(preformated)
Exercice 4 :
1) Comment connaître la version de PHP utilisée ?
2) Afficher le nom du navigateur ainsi que la date courante (au format 15 novembre 2010) en
haut à droite de l'écran.
3) Ecrire un programme PHP qui affiche le nom du script en cours d’exécution, ainsi que
l'adresse IP.
16
T.P. n° 6
Programmation en PHP (2ème partie)
Remarque :
Enregistrez toujours votre fichier sur votre serveur web en tp_y/exercice_z.php et ouvrez-le
depuis votre navigateur : http://xxx.xxx.xxx.xxx/tp_y/ exercice_z.php
Avec
y : numéro du T.P.
z : numéro de l’exercice
Exercice 1 :
1) Écrire un programme PHP qui affiche tous les nombres impairs entre 0 et 15000, par ordre
croissant : « 1 3 5 7 ... 14995 14997 14999 »
2) Écrire un programme qui écrit 500 fois « Je dois faire des sauvegardes régulières de mes
fichiers. »
4) Affecter une valeur à la variable nbre ($nbre=5 ;) et afficher la somme des entiers de 1 à nbre.
On réalisera cet exercice avec l’instruction for puis avec l’instruction while.
Exercice 2 :
1) Remplir un tableau indexé de chaînes de caractères avec quelques valeurs (première chaîne,
deuxième chaîne, une autre chaîne,…). Afficher toutes ces valeurs dans une liste à puces à l’aide
d’une boucle « pour tout élément »).
17
Vendredi : Couscous
Exercice 5 :
Soit un tableau $note représentant les notes de la gamme : $note = array ("do", "ré", "mi", "fa",
"sol", "la", "si", "do");
Parcourez le tableau avec la fonction foreach et affichez les notes dans un tableau HTML.
Exercice 6 :
Un tableau associatif contient les notes des étudiants en PHP
Exercice 7 :
Stocker la matrice ci-dessous dans un tableau à deux dimensions puis, à l’aide de deux boucles
« pour » imbriquées, calculer la somme des valeurs contenues dans le tableau. Afficher le
résultat.
1 3 5
9 0 2
18
T.P. n° 7
Programmation en PHP (3ème partie).
Traitement en PHP d’un formulaire
Remarque :
Enregistrez toujours votre fichier sur votre serveur web en tp_y/exercice_z.php et ouvrez-le
depuis votre navigateur : http://xxx.xxx.xxx.xxx/tp_y/ exercice_z.php
Avec
y : numéro du T.P.
z : numéro de l’exercice
Exercice 1 :
Ecrire une page qui demande par formulaire un entier positif entre 10 et 100 (mettre 37 comme
valeur par défaut) et qui appelle en mode post une seconde page dont l'affichage est le carré et la
racine carrée du nombre fourni. La variable php associée au nombre sera nommée mon_Nb. On
vérifiera que la valeur entrée est bien un entier compris entre 10 et 100.
Remarque : La racine carrée : sqrt().
19
Exercice 2 : Calculatrice
Créez une petite calculatrice permettant d’effectuer des opérations arithmétiques élémentaires
(addition, soustraction, multiplication et division) sur deux opérandes.
1) Affichez un formulaire permettant, dans l’ordre, de saisir la première opérande, puis de
sélectionner l’opération parmi une liste (champ SELECT), enfin de saisir la seconde opérande.
Associez à ce formulaire le script effectuant le calcul et affichant le résultat.
2) Remplacez le champ SELECT par des champs RADIO.
Exercice 4:
1) Dans la page web exerxice4.html, créez un formulaire pays composé au moins des éléments
suivants :
• un champ select pour sélectionner le nom d’un pays parmi Allemagne, Espagne, France et Italie
(respectez la casse en saisissant l’attribut value des champs option du select),
• un champ input de type text pour saisir sa superficie,
• un champ input de type text pour saisir le nombre d’habitants de ce pays,
• un champ textarea pour décrire ce pays,
• un champ input de type submit et de value Envoyer pour envoyer les informations au script
exercice4.php,
• un champ input de type reset et de value Effacer pour réinitialiser votre formulaire.
Mettez la valeur de l’attribut method du formulaire à get.
20
2) Créez alors le fichier exercice4.php. Dans ce fichier, insérez des instructions permettant
d’afficher dans l’ordre les données : nom, superficie, nombre d’habitants et description saisies
dans le formulaire pays.
3) Que constatez-vous dans la barre d’adresse du navigateur lorsque vous saisissez et validez
dans le formulaire exercice4.html les données d’un pays.
Exercice 5 :
Créer un formulaire qui possède les champs suivants: nom, prénom, état civil (boutons radio
marié ou célibataire) et salaire.
Le formulaire calcule les impôts payés de la manière suivante:
5% du salaire pour les salaires inférieurs à 30000
10% du salaire pour les salaires entre 30000 et 60000
15% entre 60000 et 100000
10% en dessus de 100000
Si la personne est mariée, rabais de 10%
Afficher les nom et prénom, le salaire et le montant d'impôts payé par la personne.
21
T.P. n° 8
Programmation en PHP (4ème partie). Site web
de vente par correspondance
Remarque :
Enregistrez toujours votre fichier sur votre serveur web en tp_y/exercice_z.php et ouvrez-le
depuis votre navigateur : http://xxx.xxx.xxx.xxx/tp_y/ exercice_z.php
Avec
y : numéro du T.P.
z : numéro de l’exercice
Exercice 1 :
Créer une fonction addition acceptant 2 paramètres : $a et $b.
Cette fonction doit calculer un résultat intermédiaire $r, étant l’addition de $a et $b.
La fonction doit faire un retour à la ligne avant de renvoyer ce résultat $r.
L’appel de la fonction pourra se faire via des variables, ou directement grâce à des valeurs
numériques.
Ex : addition ($x,$y);
Ex : addition (14,6);
Exercice 2 :
La fonction mail permet d’envoyer des emails.
Créez un couple formulaire/script PHP permettant de saisir les informations constituant un email,
et de l’envoyer.
Exercice 3 :
Une société de vente de composants informatiques souhaite créer son site web de vente par
correspondance.
1) Ecrire un formulaire qui demande les informations suivantes : Nom, Prénom, Adresse, Code
postal, Ville, Téléphone du client suivis du questionnaire suivant :
Votre commande
Indiquez les composants que vous commandez (avec la quantité désirée)
22
Carte son 107.00 1
Processeur 246.00 1
Indiquez le cadeau que vous choisissez (sélection unique d’un article : souris, 20 CD-R,
webcam…)
2) Ecrire un script PHP qui affiche la facture du client selon ce qu’il a commandé.
23