Université Abdelamalek Essaâdi

Faculté des Sciences et Techniques de Tanger

Département Génie Informatique

Module : Architecture Client/Serveur &

Développement Web Dynamique
Licence génie informatique
TP2
Travail à faire

1. Créer deux pages : index.html et un Styles.CSS

2. Créer 4 blocs ( voir ci-dessous la figure )

Bloc1 : Entête
hauteur :100px, Margeur : 600px
Bloc2 : Menu Bloc3 : Corps
hauteur :400 hauteur :400
Margeur :100 Margeur : 600px

Bloc4 : Pied
hauteur :100px, Margeur : 600px

 Syntaxe de création d’un bloc

Il faut créer un id qui contient les propriétés du bloc dans un fichier style.CSS et l’appeler
dans la page index.html dans la balise <div>

 Exemple :
o Fichier Style.CSS
#bloc
{
width:600px;
height:50px;
background-color:red;
}
o Fichier index.html
<div id="bloc">Ceci est le bloc1</div>

 La balise <div> définit une division ou une section, appelé aussi calque, dans un
document HTML. Elle est utilisée pour regrouper des éléments sous forme de bloc et ainsi
pouvoir les formater en CSS.
 Pour afficher deux div l'un à côté de l'autre, il va donc nous falloir utiliser une autre
propriété. C'est la propriété float qui va s'en charger(peut prendre les valeurs , left ou right)

3. Ajouter l’image 1 comme arrière-plan du bloc 1

4. Ajouter un menu au niveau du bloc 2
5. Tous les textes qui vont apparaitre dans le bloc 3 vont respecter la même mise en forme
a. Taille : 18
b. Type d’écriture : times new roman
c. En gras

Nom
Prénom
Situation actuelle Tel
Adresse
Diplômes email
Centres de Filière
compétences Année scolaire

Divers
Me Contacter
Copyright ©
 Diplômes Année d’obtention
Situation actuelle

Diplômes
Centres de
compétences
Divers
Me Contacter
Copyright ©

Centre de Compétences
Systèmes
Situation actuelle
Langages
Web et scripts
Diplômes Programme
Centres de Réseaux
compétences Autres

Divers
Me Contacter
Copyright ©
 Université Abdelamalek Essaâdi
Faculté des Sciences et Techniques de Tanger
Département Génie Informatique

Module : Architecture Client/Serveur &

Développement Web Dynamique
Licence génie informatique
TP3

Exercice1

1. Créer la page suivante

2. Au niveau du menu, ajouter des boutons au lien des liens hypertextes
3. Ajouter un liste roulant contient les valeurs suivantes : étudiant, Professeur, entrepreneur

Nom
Email
Situation actuelle Message

Diplômes
Centres de compétences
Divers
Me Contacter
Envoyer

Copyright ©