Vous êtes sur la page 1sur 12

Université Ibn Zohr, Faculté des Sciences

A.U. 2013-2014
d’Informatique

Travaux pratiques - Introduction à la programmation Web

Structuration d’un document

Matériel nécessaire :
• Un navigateur (Netscape ou Internet Explorer)
• Un éditeur (NotePad ou Bloc-notes)
Ceci est amplement suffisant et peut faire l’affaire pour écrire vos premières pages HTML.

On vous rappel qu’il n’est absolument pas nécessaire d’avoir accès à un serveur Web ni d’être connecté au
réseau.
Contrainte :
• pour mener à bien notre démarche et atteindre les objectifs qu’on s’est fixés, aucun générateur
(FrontPage par exemple) du code HTML ne sera utilisé
• Pensez à la portabilité de vos documents HTML.
Exercice no1
Pour ce premier exercice, on vous demande de saisir à l’aide de Bloc-notes la structure minimale d’un
document HTML.
- enregistrer la page dans votre répertoire personnel html sous le nom strcut.htm.
- afficher votre page par votre navigateur
- modifier le code source afin que le document affiche : Voici ma première page HTML ! et faire
figurer votre nom et votre prénom.
Exercice no2
Utiliser au maximum les différents types de balises vues dans le cours (CV ou page personnel par
exemple).
- enregistrer la page dans votre répertoire personnel html sous le nom balise1.htm.
- séparer les paragraphes par un trait horizontal de largeur
- utiliser les attributs pour les balises qui les acceptent
Bienvenue dans la page
de (prénom nom)

Etat civil
Premier paragraphe...

Parcours universitaire et scolaire


deuxième paragraphe...

Expériences professionnelles
Troisième paragraphe...

Loisirs
quatrième paragraphe...

Pour me joindre

Vous pouvez m'écrire à l'adresse ...

1
Exercice no3

Illustration de la balise de pré formatage

Sous le nom balise2.htm, écrire le code source correspondant à l’affichage ci-dessous en utilisant la balise
<PRE>.
Résultats du vote
dans la circonscription

Noms votes obtenus %


_________________________________________
Candidat 1: 670 votes 59
Candidat 2: 341 votes 30
Candidat 3: 123 votes 11
_________________________________________
Total des votes: 1134 votes 100

Encore la balise <PRE>


___ ___ ________________ _______________ _______
_| |___|O| |pourquoi faire| |quand on peut| | |
( | |difficile | |faire facile | | |
(_ __ __|--|_ __________ _|--|_ _________ _|--|_ _ _|
OO OO O O O O OO
- supprimer la balise <PRE> puis enregistrer vos modifications
- faire afficher par le navigateur l’effet de suppression de la balise <PRE>
- que constatez-vous ?

Les listes

Exercice no4
Construire une page avec votre un éditeur de prédilection ( Bloc-Notes) , à enregistrer sous le nom
liste.htm, capable de reproduire exactement les listes ci-dessous.

1. Liste non ordonnée (<UL>)

Exemple de liste de type non ordonnée (<UL>)

Répertoires

• Fichiers HTML
• Fichiers images
• Fichiers sons
• Fichiers films

o Fichiers HTML
o Fichiers images
o Fichiers sons
o Fichiers films

Fichiers HTML

2
Fichiers images
Fichiers sons
Fichiers films

2. Liste ordonnée (<OL>)

Exemple de liste de type ordonnée (<OL>)

Cours HTML

1. Structure
2. Divisions
3. Listes

A. Styles
B. Liens
C. Images

i. Tableaux
ii. Frames
iii. Formulaires

< !-- l’attribut start -- >

4. Structure
5. Divisions
6. Listes

3. Liste de Définition

Exemple de liste de définition (<DL> <DT> <DD>)

Quelques définitions de termes


HTML
Hypertext Markup Language
WWW
World Wide Web
Navigateur
Logiciel spécialisé dans l'interprétation du langage HTML
HTTP
Hypertext Transfert Protocol

4. Listes imbriquées
Menu du jour :

1. Entrée
2. Plat chaud
• Tagine
agneaux

3
o avec pruneaux
o sans pruneaux
• Moules frittes
à la crème
au sauce tomates
3. café
• Noir
avec du sucre
o Blanc
o Roux
sans sucre
• Au lait
avec crème
sans crème
4. Dessert

Liens Hypertextes

Exercice no1
Objectif : Lier des pages locales (permettre d'atteindre un autre fichier dans un même dossier, sur une
même machine).

1. Créez dans un répertoire (html/Lien par exemple) deux documents html de façon à ce que le
document 1 soit accessible à partir du document 2 et vice-versa.
2. Utilisez le chemin relatif et le chemin absolu pour avoir le même résultat qu’en 1.

Exercice no2

Objectif : navigation interne à un document

Il s'agit d'installer un système de liens internes à un document long, afin de permettre à l'utilisateur :

1. la consultation directe d' un sujet de son choix à partir d'un sommaire,


2. et inversement, le retour instantané vers le sommaire, à partir d'un paragraphe du document.

Voici la marche à suivre :

• Ajouter en tête de chaque paragraphe une ancre; on pourra les nommer p1, p2 ... jusqu'à p10.
• Transformer chaque ligne du sommaire en hyper lien dont la référence est le nom de paragraphe
correspondant (utiliser au maximum les facilités copier - coller ). Tester.
• Mettre en tête de sommaire une ancre nommée sommaire, puis ajouter en bas de chaque
paragraphe, un lien vers cette ancre.

Exercice no3
Objectif : atteindre un point précis d’un autre document.

A partir d’un document source html on vous demande de pointer vers un point précis d’un autre document
(vous avez le choix de la nature des documents).

4
Tableaux HTM

Exercice N°1
Ecrire le code source (Reproduire) du tableau suivant :
A B C D
1 deux 3 quatre
cinq 6 Sept 8
9 dix 11 douze

Exercice N°2 : regroupement de cellules

1. Ecrire le code source (Reproduire) du tableau suivant :


Moyenne
Population
Hauteur en cm Espérance de vie
Masculin 1,78 70
Sexe
Féminin 1,70 80

2. Ajouter une colonne pour indiquer le poids moyen : par exemple pour Masculin 75 kg et
Féminin 55 kg.

3. Ecrire le code source du tableau suivant :

Comparatif modèle économique


Modèle Vitesse Consommation
Marque Type Numéro de série en km/heure en litre/100 km
Peugeot 106 B2 234.34 132 5,7
Citroën AX AT67B8 6789 126 5,5

Exercice N°3 : votre emploi du temps

Après une courte introduction, représenter (éventuellement sous forme légèrement simplifiée)
votre emploi du temps hebdomadaire, sous forme de tableau HTML.

Remarque : cet exercice pourrait être le point de départ d'un projet.

Exercice N°5 : Table d'images et d'hyperliens

Réaliser un tableau semblable à celui-ci :

5
TP1
Cours sur les formulaires HTML
Images1
Page personnelle
Mon CV

Cours Html

Formulaires HTML

Problème :
1. Ecrivez le code source permettant l’affichage du formulaire ci-dessous.
dessous.
2. Ajoutez d’autres fonctionnalités de votre choix à ce formulaire.
3. La liste proposée par le formulaire est elle de type pop
pop-list
list ou scrolled-list?
scrolled modifiez le
type de cette liste.

Initiation à JavaScript

Exercice no1 : comparaison de l'affichage de texte en HTML et en JS

Voici un code source HTML qui contient un tout petit script JavaScript. Lisez attentivement et
écrivez ce que vous prévoyez à l'exécution.
<html>
<head>
<title> Mon premier script JavaScript!</title>

6
</head>
<body>
<H3>Ceci est un document HTML habituel.</H3>
<script language="JavaScript">
document.write("<I> "+" Ceci est une partie de texte
écrite "+ " avec JavaScript"+"</I><BR>");
var now=new Date();
document.write("Aujourd'hui, nous sommes le "+now);
</script>
<H3>Nous sommes de retour au code HTML habituel.</H3>
</body>
</html>

Exercice no2 : Itération FOR


Ecrire une page pour afficher la table de multiplication par un entier N.

• Déclarer une variable entière N et lui affecter la valeur 7 par exemple


• Utiliser une instruction itérative FOR
• Améliorer la présentation en
o Encadrant les lignes affichées dans un tableau HTML
o ou en générant l'affichage sous forme de liste non ordonnée

Exercice no3 : Boite de dialogue et itération FOR


Généraliser l'exercice précédent. La valeur de la variable N dont on affichera les multiples, doit
être d'abord demandée à l'utilisateur avec la fonction prompt(). Par défaut, si l'utilisateur ne saisit
rien, N vaudra 9.
Exercice no4 : Procédure avec paramètre

• Déclarer une procédure table_mult(N), qui doit calculer et afficher la table de


multiplication par N (si possible encadrée dans un tableau HTML).
• La valeur du paramètre N sera demandée à l'utilisateur au moyen d'une boite de dialogue
PROMPT, puis sera passée en paramètre dans l'appel de table_mult(N).
• Prolongement
Supprimer la demande de valeur N, et faire afficher l'ensemble des tables de
multiplication par N = 1, 2, ... 10, par des appels itératifs table_mult(i)

Exercice no5 : Fonction appelée par un événement

Utilisation de formulaire
<HTML>
<HEAD> <TITLE> Fonction appelée par un événement </TITLE>
<SCRIPT LANGUAGE="JavaScript">

7
function somme_N_entiers (nb) {
var somme=0;
for (i=1; i <=nb ; i++) {
somme=somme + i ;
document.write("Pour i=", i, "---> somme=",somme,"<BR>");
}
return somme;
}
</SCRIPT>
</HEAD>
<BODY>
<H3><CENTER>Somme des N premiers entiers non nuls</CENTER></H3>
<FORM name=formulaire>
<!-- attention, ce qui suit n'est pas une affectation ! -->

Nombre = <INPUT type = "text" name = "nombre" value = 10>


<INPUT type = "button" name = "bouton" value = "Calculer"
onClick = "formulaire.resultat.value=somme_N_entiers
(formulaire.nombre.value)">
Résultat = <INPUT type = "text" name = "resultat" value = "">
</FORM>
</BODY>
</HTML>

Exercice no 6 : Utilisation de la méthode open de l’objet Window


1. Exécuter le script ci-dessous :

<HTML>
<HEAD>
<TITLE> Objets de la classe window </TITLE>
<SCRIPT LANGUAGE = "JAVASCRIPT">
// Déclaration de variables
var hauteur=300; // hauteur de la fenêtre à créer
var largeur=400; //

//Définition des caractéristiques de la fenêtre à créer


options="width="+largeur+",height="+hauteur+"toolbar=yes,status=yes";
function OuvrirFenetre() {
fen1 =open("","fenetre",options);
}
</SCRIPT>
<BODY>
<FORM>
Pour créer une fenêtre "enfant", cliquer sur ce bouton :

8
<INPUT type =Button value="Créer une fenêtre" onClick="OuvrirFenetre ()">
</FORM>
</BODY>
</HTML>

La fonction OuvrirFenetre (), déclenchée par l'événement onClick sur le bouton, utilise la fonction open
() pour ouvrir une nouvelle fenêtre, nommée fen1

2. Ajouter un bouton Fermer qui permet de fermer la fenêtre, Pour cela appeler la méthode close ()
de la classe window.

La méthode close () adressée à une variable fenêtre permet de la fermer. Il est préférable avant de tester si
elle a été ouverte (elle peut être masquée), avec une condition du genre if (fen != null).

Exercice no7 : Ecriture dans une fenêtre après sa création

Ecrire un script en JavaScript composé :

- D’une fonction qui permet de créer une fenêtre (Exercice 1),


- Un Formulaire qui comporte :
o Une zone de texte de type TEXTAREA,
o Un bouton « Ecrire »,
o Un bouton Fermer
Fonctionnement :
L’utilisateur commence par saisir un texte dans le champ TEXTAREA, clique sur le bouton « Ecrire ».
Cette action permettra d’ouvrir une nouvelle fenêtre (appel à la fonction) et transcrit le texte déjà saisi
dans le TEXTAREA dans la nouvelle fenêtre. Le bouton « Fermer » permet de fermer la nouvelle fenêtre.

Mini Projet

Ecrire un programme (HTML/JavaScript) qui permet de réaliser les interfaces ci-dessous.


Fonctionnement :
- La page d’accueil (figure B1) est composée de trois zones (Z1 : 24%, Z2 : 65%),
- L’utilisateur active le lien Fiche de renseignement, ce qui permet de charger le formulaire de saisi
dans la zone "Z2",
- L’utilisateur rempli le formulaire (figure B2) et presse sur le bouton Valider, cette action valide les
informations saisies et les envoie dans la zone "Z3",
- Le champ "Filière" est insaisissable,
- Le bouton "Effacer" réinitialise tous les champs du formulaire,
- La saisie de tous les champs est obligatoire.
Indications :

9
- window.parent.frames[i] référence la frame d’indice i (pour rappel framess est un tableau d’objets
Window),
- formulaire.sexe[i].checked permet de savoir si l’élément d’indice i du tableau sexe est coché,

Z2

Z1

Z3

Figure B1 : page d'accueil

10
Figure B2 : saisie du formulaire

11
Figure B3 : validation du formulaire

12