preloader

TP 5 : Création des pages web avec HTML - tachicart

Travail à faire 

Télécharger l’énnoncé en pdf 

Vous allez réaliser votre première page web dans laquelle vous présenterez la société MinCOM, agence spécialisée dans la communication sur Internet.

 

Exercice 1 : Préparation de l’environnement de travail

 

1.      Installer le logiciel notePad++ sur votre PC pour éditer le code HTML des pages web.

 

 

Exercice 2 : création de votre première page html

2.      Préparez votre espace de travail en créant un dossier “tp_html“.

 

3.      Dans le dossier « tp_html » Créer un nouveau fichier comme suit :

4.      Nommer le fichier « acceuil.html »

 

5.      Accepter le message « oui ».

6.      Editer le fichier acceuil.html en utilisant le logiciel Notepad++

7.      Copier puis coller le code suivant dans le fichier acceuil.html et enregistrer.

 

<HTML>

<HEAD>

<TITLE> MinCOM</TITLE>

</HEAD>

<BODY>

<H1> Acceuil </H1>

<H4> Bienvenue dans le site officiel de MinCOM </H4>

<P>

MinCOm est une jeune entreprise spécialisée dans la communication et l’organisation des événements

</P>

</BODY>

  1. Ouvrir le fichier acceuil.html avec le navigateur pour visualisez le résultat.

9.      Dans le code HTML de la page acceuil.html, remplacer le texte « Accueil » de la balise H1 par « Page principale » puis Enregistrer.

10. Remarquer le résultat en actualisant le fichier acceuil.html dans le navigateur pour obtenir l’affichage suivant :

11. Ajouter la balise center puis Enregistrer pour mettre le contenu de la balise H1 au centre de la page.

12. Remarquer le résultat en actualisant le fichier acceuil.html dans le navigateur

 

13. Transformer maintenant le contenu de la balise H4 en un texte animé en ajoutant la balise <marquee> puis Enregistrer

 

14. Remarquer le résultat en actualisant le fichier acceuil.html dans le navigateur

15. Ajouter un logo dans la 7ème ligne du code HTML comme suit

 

16. Enregistrer et Remarquer le résultat en actualisant le fichier acceuil.html dans le navigateur

 

 

 

 

Exercice 3 : Création d’autre page

En vous basant sur l’exercice précédent, vous créerez dans le même dossier précèdent une page html que vous nommerez :
contact.html

17.  Taper le code suivant :

18. Enregistrer puis Remarquer le résultat en actualisant le fichier contact.html dans le navigateur

19. Ajouter le code suivant dans la ligne 11 pour afficher le logo

<img src=”contact.png”>

 

20. Enregistrer puis Remarquer le résultat en actualisant le fichier contact.html dans le navigateur

21. Ajouter le code suivant à partir de la ligne 12 pour afficher le tableau de contact

<table  border = “2”  >

   <tr>

      <th>Adresse </th>

     <td>rue 41 n 42 hay Annassim Bir Rami</td>

   </tr>

   <tr>

        <th>Téléphone</th>

     <td> +212 5 33 66 99</td>

       </tr>

   <tr>

        <th> E-mail</th>

     <td>contact@alpha.com</td>

   </tr>

</table>

                

 

Exercice 4 : Lien entre les pages

Nous allons créer un lien dans la page acceuil.html qui va renvoyer vers la page contact.html

22. Editer le fichier acceuil.hmtl et ajouter le code suivant à partir de la ligne 16

<Hr>

<a href=”acceuil.html”> Acceuil </a>

<Br>

<Hr>

 

23. Enregistrer puis Remarquer le résultat en actualisant le fichier acceuil.html dans le navigateur

 

De la même façon nous allons créer un lien dans la page contact.html qui va renvoyer vers la page acceuil.html

 

24. Editer le fichier contact.html et ajouter le code suivant à partir de la ligne 26

<Hr>

<a href=”acceuil.html”> Acceuil </a>

<Br>

<Hr>

 

25. Enregistrer puis Remarquer le résultat en actualisant le fichier contact.html dans le navigateur