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>
- 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
