Travail à faire
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.
Télécharger les images
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“.
Vérifier que vous avez dans ce dossier les fichiers images nécessaires
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++
Puis insérer le code suivant dans le fichier acceuil.html et enregistrer.
<HTML>
<HEAD>
<TITLE> MinCOM</TITLE>
</HEAD>
<BODY>
<H1> Ac ceuil </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>
</HTML>
- Ouvrir le fichier acceuil.html avec le navigateur pour visualisez le résultat.
8. Dans le code HTML de la page acceuil.html, remplacer le texte « Accueil » de la balise H1 par « Page principale » puis Enregistrer.
9. Remarquer le résultat en actualisant le fichier acceuil.html dans le navigateur pour obtenir l’affichage suivant :
10. Ajouter la balise « center » puis Enregistrer pour mettre le contenu de la balise H1 au centre de la page.
11. Remarquer le résultat en actualisant le fichier acceuil.html dans le navigateur
12. Transformer maintenant le contenu de la balise H4 en un texte animé en ajoutant la balise <marquee> puis Enregistrer
13. Remarquer le résultat en actualisant le fichier acceuil.html dans le navigateur
14. Ajouter un logo dans la 7ème ligne du code HTML comme suit
15. 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
16. Taper le code suivant :
17. Enregistrer puis Remarquer le résultat en actualisant le fichier contact.html dans le navigateur
18. Ajouter le code suivant dans la ligne 11 pour afficher le logo
<img src=”contact.png”>
19. Enregistrer puis Remarquer le résultat en actualisant le fichier contact.html dans le navigateur
20. 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
21. Editer le fichier acceuil.hmtl et ajouter le code suivant à partir de la ligne 16
<Hr>
<a href=”acceuil.html”> Acceuil </a>
<Br>
<Hr>
22. 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
23. Editer le fichier contact.html et ajouter le code suivant à partir de la ligne 26
<Hr>
<a href=”acceuil.html”> Acceuil </a>
<Br>
<Hr>
24. Enregistrer puis Remarquer le résultat en actualisant le fichier contact.html dans le navigateur