Université Sultan Moulay Slimane
Ecole Supérieure de Technologie de Fkih Ben Salah
TP 1 : Introduction au Développement Web
HTML, CSS
Exercice 1 :
Pour ce premier exercice, on vous demande de saisir la structure
minimale d'un document HTML.
• Enregistrer la page dans votre dossier personnel sous le nom
squelet.html
• Afficher votre page par votre navigateur. Exercice 3 :
• Modifier le code source afin que le document affiche: Voici la Illustration de la balise de pré formatage
première page personnel de nom prénom. Ecrire le code source correspondant à l’affichage ci-dessous en
Exercice 2 : utilisant la balise
<PRE>
Utiliser au maximum les différents types de balises vues dans le cours Résultats du module Développement Web
pour concevoir un CV sous la forme ci-dessous. Département d’informatique
• Enregistrer la page dans votre dossier sous le nom cv.html. Noms Note classement
• Séparer les paragraphes par un trait horizontal de largeur et ----------------------------------------------------------------------
longueur fixe.- Karim 16 1
Sara 14.5 2
Mohammed 10 4
-----------------------------------------------------------------------
Supprimer la balise <PRE> puis enregistrer vos modifications. Que
constatez-vous ?
Exercice 4 : 3. Liste de définitions
Construire une page sous le nom liste.html capable de reproduire
exactement les listes ci-dessous.
1. Liste non ordonnée.
4. Listes imbriquées
2. Liste ordonnée
Exercice 5 :
1. Créer dans un répertoire deux document html de façon à ce
que le document 1 soit accessible à partir du document 2 et
vice-versa.
2. A partir d’un document html source on vous demande de
pointer vers un endroit précis du même document.
3. A partir d’un document html source on vous demande de
pointer vers un endroit précis d’un autre document.
Exercice 6 :
1. Ecrire le code source des tableaux suivant en variant les
attributs des balises des tableaux.
2. Présenter votre emploie du temps hebdomadaire sous forme
de tableau html Exercice 8 :
Exercice 7 Appliquer aux différents composants (table liste, formulaire) des
1. Ecrivez le code source permettant l’affichage du exercices précédents des styles CSS de votre choix.
formulaire ci-dessous.
2. Ajoutez d’autres fonctionnalités à votre choix à ce
formulaire.
