Université Mohammed Premier Module : Technologie du Web
Faculté des Sciences - Oujda Filière : Informatique Appliquée (IA-S3)
Département d’informatique Année Universitaire : 2024-2025
TP N°1
Exercice 1 :
Objectif
Le but de ce TP c'est de comprendre la structure d'un document HTML et comment créer
une page HTML avec texte, titres et en-têtes et paragraphes. (HTML de base, le corps et
l'en-tête, titre, texte, attributs de texte, séparateurs, mise en forme, caractères
admissibles)
Vous allez créer une page, appelée Premiere_HTML.html, qui fera apparaître plusieurs
mises en forme de paragraphes et de titres. La page comprendra 3 parties. Afficher et vérifier
dans le navigateur votre travail entre chaque partie. Pour cela, enregistrez votre fichier avec le
bloc-notes et réactualisez la page dans le navigateur.
Description de la page à créer : • Un paragraphe centré constitué des 3 lignes
• Le fond de la page sera bleu et le texte suivantes avec le texte jaune et de taille 5 :
blanc. Je suis le 2éme paragraphe
• Le titre de la page sera : au centre
Mise en forme de base En taille 5 et en jaune
1ére partie : • Une ligne séparatrice de taille 7, de 300
• Un titre de niveau 1 centré : pixels de longueur et de couleur noire.
éme
PREMIERE PARTIE 3 partie :
• Un paragraphe avec le texte suivant en • Un titre de niveau 3 centré :
rouge : TROISIEME PARTIE
Je suis le premier paragraphe, je suis • Un paragraphe, à droite comprennent le
rouge… texte suivant en taille 7 et la police Arial :
• Une ligne séparatrice de taille 2 et de Je suis le dernier paragraphe, je suis en taille
couleur rouge. 7 avec la police Arial et à droite
2éme partie :
• Un titre de niveau 2 centré :
DEUXIEME PARTIE
Exercice 2
Objectif
Le but de ce TP c'est de comprendre l'utilisation des tableaux ainsi que les listes et leurs
usages pour le contrôle du placement des éléments dans une page HTML.
▪ Étude des balises principales des tableaux (TABLE, TR, TD, TH, CAPTION,
THEAD, TFOOT ,TBODY) et leurs paramètres ;
▪ Insertion d'un tableau simple ;
▪ Étude des balises principales des listes (OL, UL, LI) et de leurs paramètres ;
1
Exercice 2-1 : Réaliser les tableaux ci-dessous :
a)
b)
c)
Exercice 2-2 : Créez le document HTML qui affiche la page suivante.
a)
2
b)
Exercice 3
Objectif
Le but de ce TP c'est de comprendre l'adressage, être en mesure d'insérer des liens
hypertextes et des images dans une page et d'assimiler les paramètres obligatoires et
optionnels pour la balise IMG. Voir aussi comment changer l'aspect d'une page : couleurs,
fond, couleur et taille des caractères ainsi que la division de l'écran du navigateur en plusieurs
zones.
• Les liens hypertextes (A HREF)
• Insertion de liens sur des éléments de texte
• Formats d'images permis
• Changer l'aspect d'une page : couleurs et fond, aspect des caractères
• Les cadres (FRAMESET, FRAME et IFRAME)
3
[Link]
Travail à faire
▪ Utiliser le texte et les images dans le dossier : fichiers_TP1.rar
▪ Les images seront sauvegardées dans le même répertoire que les pages HTML [[Link],
fso_logo.png] ;
▪ Programmer la page [Link] qui contienne tous les liens vers les autres pages (Menu) ;
▪ Subdiviser la page [Link] en Cinque parties (frames) et programmer les différents
liens.
▪ Programmer les liens smi, sma et fso respectivement vers les pages html [Link],
[Link] et [Link] ;
▪ NB : Lorsqu‘on clique sur les liens SMI, SMA, les pages seront affichées dans le cadre du
milieu (frame 3) alors que le lien fso dans le cadre situé à droite (frame 4).
Exercice 4
Objectif
Ce TP est un premier pas vers l'interactivité par le biais des formulaires. L'étudiant verra en
détail les différents éléments constituant les formulaires
• Les éléments interactifs disponibles (boîtes de texte, listes de choix, boutons, région de
texte, etc).
• La balise FORM et ses paramètres
• Comment bâtir un formulaire
Enoncé : Reproduire l’apparence de la page ([Link]) de la façon la plus fidèle possible.
4
Travail à faire
▪ Programmer les boutons Soumettre formulaire pour envoyer le contenu du formulaire
par email en utilisant la méthode (METHOD="POST"), le bouton Effacer qui permet
l‘initialisation du formulaire (vider les champs de saisies). La liste déroulante contient
les options suivantes : Maroc, Portugal, Espagne.
▪ Refaire l'exercice en ajoutant les deux balises : fieldset et legend.
