DR : Oriental Module : Développement web côté client

Etablissement : Centre mixte << Travaux pratiques >>

OFPPT Formateur : CHENNOUFI Issam

Série TP N 01
Dans l’ensemble des exercices ci-dessous, utiliser votre éditeur HTML de votre choix : NotePad+
+, SublimeText, Visual Studio, …etc.

Parties abordées dans cette série :

 Structure d’un document HTML5
 Titres
 Paragraphes
 Images
 Listes
 Liens

EXERCICE 01 :
1. Ecrivez le squelette d’une page HTML5 avec les caractéristiques suivantes
o Encodage : utf-8
o Titre de la page : première page XHTML
o Auteur : vous même
o Mots clés : xhtml, test
2. Dans le corps de la page, écrire ce qui suit en HTML (Garder la même forme, texte en gras
doit rester en gras en HTML, taille de texte…, pour les images mettez les images de votre
choix):

Filière : TDI
Groupe : 101 CDS

Modules de la filière :

Bases de données:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into

1
 DR : Oriental Module : Développement web côté client
Etablissement : Centre mixte << Travaux pratiques >>
OFPPT Formateur : CHENNOUFI Issam

electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.

Développement client/serveur:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.

Stagiaires:
o ALAMI KARIM (http://www.alami.com)
o BAGHDADDI FATIMA (http://www.fatima.ma)
o BERRICHI HICHAM (http://www.berrichi.org)
o ALAOUI KARIMA (http://www.karima.net)

EXERCICE 02 :
1. Créer deux pages HTML : page1.html et page.html, dans la page 1 mettez un lien qui mène
vers la page 2, dans la page 2 mettez un lien qui mène vers la page 1.
2. On continue toujours sur l’exercice précédent, créer un dossier d1 dans lequel il faut mettre
une page page3.html, mettre un lien dans cette page qui mène vers la page 1.
Dans la page 2 mettre un lien qui mène vers la page 3.
3. Afficher une vidéo mp4 de teste dans la page 1
4. Afficher un fichier audio mp3 de teste dans la page 1