UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
Classe : SEIOT2
Matière : Programmation WEB
Enseignants TP: Med. A. DAHDEH, Yossra Ben Hattab Nb pages : 3
TP n°2
HTML
Environnement de travail
Navigateur web
Editeur de texte : Bloc-notes, Notepad++, Sublime Text, Visual Studio Code,….
Vous auriez besoins pour ce TP2 de :
Votre page html de TP1.
Un dossier images contenant les images nécessaires pour ce TP, et placez ce
dossier dans le répertoire site-perso.
Rappel
Insertion d’image
Pour insérer une image la balise img est utilisée en spécifiant dans son attribut scr
l’emplacement de l’image. L’attribut alt signifie "texte alternatif", on doit toujours indiquer
un texte alternatif à l'image, c'est-à-dire un court texte qui décrit ce que contient l'image.
Exemple : <img src="images/maphoto.jpg" alt="Ma Photo" />
Les liens externes
<A HREF="URL de la page web cible">texte ou image représentant la
zone cliquable</A>
Exemple :
La zone cliquable est un texte : <A HREF= "URL"> Cliquez ici </A>
la zone cliquable est une image : <A HREF= "URL "> <IMG SRC="globe.gif"></A>
Adresse absolue et adresse relative :
Adresse absolue :
Il s’agit de l’adresse complète du site avec l’indication du lieu du document (texte ou image)
<A HREF= "http://www.website.com/index.html"> Cliquez ici </A>
Adresse RELATIVE
Il s’agit de la localisation du document à partir du dossier ouvert.
<A HREF= "index.html"> Cliquez ici </A>
Nous devons utiliser l’adresse relative pour que les liens fonctionnent indépendamment
de la localisation du site.
[email protected] 1
UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
Liens internes
Lien interne vers une ancre : <A HREF="#nom_ancre "> texte ou image </A>
Définition de l’ancre :
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va servir de repère. Ce
peut être n'importe quelle balise.
Exemple : <h2 id="mon_ancre">Titre</h2>
Lien interne externe
Lien externe vers une ancre dans le document de départ:
<A HREF="URL du fichier cible#nom_ancre">texte ou image</A>
Lien Exécutable
Fait référence à un programme exécutable ou à un service de l'Internet (FTP, E-Mail ... ).
Exemple :
<A HREF="http://www.FAO.org">texte ou image</A> : ce lien permet l’accès au
site de la FAO
<A HREF="mailto:[email protected]">texte ou image</A> : ce lien
permet l’accès au logiciel de messagerie électronique et l’envoi de messages.
Création de menu
La balise <nav> est utilisée pour créer de menu de navigation en HTML5, généralement, dans
cette balise on trouve des liens permettant d’accéder soit à d’autres pages du site, soit à
différents contenus de la page.
Exemple :
<nav>
<ul>
<li><a href="pageDuMenu1">Menu1</a></li>
<li>Menu2
<ul>
<li><a href="pageSM1.html">Sous-Menu2.1</a></li>
<li><a href="pageSM2.html">Sous-Menu2.2</a></li>
<li><a href="pageSM3.html">Sous-Menu2.3</a></li>
</ul>
</li>
<li><a href="pageDuMenu3">Menu3</a></li>
<li>…< /li>
</ul>
</nav>
Travail demandé
1. Insérez les images et créez les liens de la figure ci-dessous.
[email protected] 2
UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
2. Créez un menu à l’aide de la balise <nav>…</nav> au début du bloc « content », incluant
les éléments suivants :
3. Rédigez une autre page « cv.htm » contenant votre CV ayant l’allure suivante et ajouter un
lien externe entre cette page et votre page d’accueil.
Curriculm Viteae Header
État civil
o Nom :
o Prénom :
o Date et lieu de naissance :
o Nationalité :
Article
Diplômes
o 2004
o 2002
o 2003
Stages
o 2004
1. stage 1
2. stage2
o 2002
1. stage 1
2. stage2
Accueil Footer
[email protected] 3
