Fiche de TP HTML
- HTML -
2023-2024
[Link]
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.
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 « [Link] »
5. Accepter le message « oui ».
6. Editer le fichier [Link] en utilisant le logiciel Notepad++
Puis insérer le code suivant dans le fichier [Link] 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>
7. Ouvrir le fichier [Link] avec le navigateur pour visualisez le résultat.
8. Dans le code HTML de la page [Link], remplacer le texte « Accueil » de la
balise H1 par « Page principale » puis Enregistrer.
9. Remarquer le résultat en actualisant le fichier [Link] 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 [Link] 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 [Link] 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 [Link] 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 : [Link]
16. Taper le code suivant :
17. Enregistrer puis Remarquer le résultat en actualisant le fichier [Link] dans le
navigateur
18. Ajouter le code suivant dans la ligne 11 pour afficher le logo
<img src="[Link]">
19. Enregistrer puis Remarquer le résultat en actualisant le fichier [Link] 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@[Link]</td>
</tr>
</table>
Exercice 4 : Lien entre les pages
Nous allons créer un lien dans la page [Link] qui va renvoyer vers la page
[Link]
21. Editer le fichier [Link] et ajouter le code suivant à partir de la ligne 16
<Hr>
<a href="[Link]"> Acceuil </a>
<Br>
<Hr>
22. Enregistrer puis Remarquer le résultat en actualisant le fichier [Link] dans le
navigateur
De la même façon nous allons créer un lien dans la page [Link] qui va renvoyer vers
la page [Link]
23. Editer le fichier [Link] et ajouter le code suivant à partir de la ligne 26
<Hr>
<a href="[Link]"> Acceuil </a>
<Br>
<Hr>
24. Enregistrer puis Remarquer le résultat en actualisant le fichier [Link] dans le
navigateur
