Vous êtes sur la page 1sur 4

Université Hassiba Ben Bouali de Chlef

Faculté des Sciences Exactes et Informatique


Département d’Informatique

Module : Développement Application Web


Niveau 2ème année licence Année universitaire 2019/2020

Fiche TP N°1
Exercice 1 :
Préparez votre espace de travail en créant un dossier "Mon site" dans lequel vous allez créer un sous-dossier
"Premier exercice". Prenez un éditeur de texte (Sublime Text, Bloc-notes, Notepad) et créez votre première
page html. Ajoutez une balise <p> .....</p> avec le texte « Bonjour tout le monde ».
Méthode :
 Enregistrez votre fichier sous le nom «index.html» dans le sous dossier « premier exercice». Attention à
bien renseigner l'extension en .html et non en .txt.
 Tapez le code html en respectant bien l'écriture des balises.
 Visualisez le résultat dans votre navigateur Web (Internet Explorer, Firefox, chrome...)

Exercice 2 :
Ecrasez le code de la page html de l’exercice1 avec le texte suivant. Visualisez le résultat dans votre
navigateur.

<html> <head>
<title>TP DAW </title> <meta name="description" lang="fr" content=‘’Cette page vous permettra de trouver
toutes les informations sur la formation Licence Informatique ’’>
<meta name="Keywords" content=“Licence, TSW , HTML"> <meta name="Author"
content=" Hadj henni"> <meta http-equiv="Refresh" content="5; URL=http://www.univ-chlef.dz">
</head> <body> bienvenue sur notre site;
vous allez être réorienter vers notre nouvelle adresse en 5 secondes:
www.univ-chlef.dz
</body>
</html>

Exercice 3 :
Dans le dossier "Mon site", créez un nouveau sous-dossier "deuxième exercice". En vous basant sur l'exercice
1, Créez 4 pages html :
 accueil.html
 presentation.html
 realisation.html
 contact.html
Pour chacune des pages, vous organiserez le contenu de la manière suivante:
Accueil Présentation Nos Réalisations Contact
Bienvenue sur le site de CWA est une agence Le site de l’Université HB- Notre équipe
l’agence CWA spécialisée dans la conception Chlef
et la réalisation des sites
internet.

Exercice 4 :
Reprenez les pages html de l'exercice 3 et modifiez les titres et les textes en y insérant des balises des mises en
forme (testez les mises en forme proposées ci-dessous).
 <i> </i> Italique
 <b> </b> Gras
 <sup> </sup> Exposant
 <sub> </sub> Indice

Exercice 5 :
Reprenez la page réalisation de l’exercice 3 afin d’y insérer une image.

Accueil Présentation Nos Réalisations Contact


Bienvenue sur le site de CWA est une agence Le site de l’Université HB- Notre équipe
l’agence CWA spécialisée dans la conception Chlef
et la réalisation des sites
internet.

Méthode :
 Créez un dossier "images" dans votre sous-dossier "deuxième exercice".
 Enregistrez l’image du site dans le dossier "images"
 Insérez dans la page la balise <img /> en pointant la source vers l'image correspondante.
 Enregistrez et visionnez le résultat dans votre navigateur Internet

Exercice 6 :
 La page "accueil.html" servira de page de regroupement. Dans cette page, ajoutez un menu pointant
vers chacune des pages du site. Vous nommerez les titres du menu du même nom que leurs pages
correspondantes (Présentation, Réalisations, Contact)
 Sur la page "realisation.html", insérez un lien sur le texte « le site » vers le site de l'université UHB de
Chlef (http://www.univ-chlef.dz).
 Sur chaque page, ajoutez un bouton retour, redirigeant le visiteur vers la page d'accueil du site.

Méthode :
 Ouvrez vos pages html.
 Insérez les balises de liens sur les mots concernés.
 Enregistrez et visionnez le résultat dans votre navigateur Web
Solution
Exercice 3 :
Accueil.html
<html>
<head>
<title>Accueil</title>
</head>
<body>
<h1>accueil</h1>
<p>bienvenue sur le site de l’agence cwa</p>
</body>
</html>

presentation.html
<html>
<head>
<title>presentation</title>
</head>
<body>
<h1>Présentation</h1>
<p> CWA est une agence spécialisée dans la conception et la réalisation des sites internet.</p>
</body>
</html>

realisation.html
<html>
<head>
<title>realisation</title>
</head>
<body>
<h1>Nos réalisations</h1>
<p> Le site de l’Université HB-Chlef </p>
</body>
</html>

Exercice 5 :
realisation.html
<html>
<head>
<title>realisation</title>
</head>
<body>
<h1>Nos réalisations</h1>
<p> Le site de l’Université HB-Chlef </p>
<img src="Capture.png" width="100" height="400">
</body>
</html>
Exercice 6 :
Accueil.html
<html>
<head>
<title>Accueil</title>
</head>
<body>
<h1>accueil</h1>
<p>bienvenue sur le site de l’agence cwa</p>
<ul>
<li><a href="presentation.html">Présentation</a></li>
<li><a href="realisations.html">Nos réalisations</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>

presentation.html
<html>
<head>
<title>presentation</title>
</head>
<body>
<h1>Présentation</h1>
<p> CWA est une agence spécialisée dans la conception et la réalisation des sites internet.</p>
<a href="accueil.html">retour</a></li>
</body>
</html>