Vous êtes sur la page 1sur 6

I.

Introduction :
HTML est un langage de description de document utilisé sur Internet pour faire des pages
Web. Son sigle signifie « HyperText Markup Language » en anglais, littéralement « langage
de marquage hypertexte ». Le balisage HTML est incorporé dans le texte du document et est
interprété par un navigateur Web, Le XHTML est quant à lui une évolution du HTML ; le
sigle signifie Extensible Hypertext Markup Language. Nous verrons plus loin la différence
entre les deux, mais la plupart des informations sont valables pour les deux langages. Le
terme (X) HTML signifie donc « HTML ou XHTML », La formulation du langage HTML est
fort simple, en effet des balises permettent d'appliquer différents formatages. Elles sont

délimitées par les deux symboles « supérieur à » et « inférieur à »,  <…>.

II. Travail à faire :


1) Préparation l’espace de travail en créant un dossier « tp1 » dans lequel vous allez créer trois
sous dossiers audio, IMAGES et vidéo, placez vos fichier images, son et vidéo dans ces dossiers.

2) Création avec utilisation un éditeur de texte (bloc note) votre propre document html nommé
index.html.

Figure 1 - dossier « tp1 TPM»

3) Réalisation la page Web simple illustrée par la copie-écran ci-dessous. Utilisez pour ce
faire les 2 outils suivants :
 ouvrez le Bloc-notes (Notepad) Windows dans la moitié de gauche de l'écran
 lancer le browser chrome dans la moitié de droite de l'écran
6
Figure 2 - la page Web CHEFFI SID-

4) Réalisation dans le dossier tp1 TPM une page nommée tableau.html qui contient le
tableau demandé :

Figure 3- la page Web bouchahma-

5) création trois pages audio.html, video.html et image.html et insérer vos fichiers audio,
vidéo et image dans ces pages, respectivement. Les pages réalisés sont dans les dossiers
audio, vidéo et image correspondants.
6
Figure 4-la page image-

Figure 5-la page audio-

Figure 6-la page vidéo-


6) Sauvegarde le fichier index.html sous le nom index1.html.

 6.1 Sous la rubrique mes cordonnées, réaliser la liste à puce qui contient dans le TP :
 6.2 Sous la rubrique Mon curriculum vitae, réaliser la liste qui contient dans le TP  :
7) Ajouter au début de la page (juste sous le titre de premier niveau "Mohamed Ali") une table
des matières hypertexte pointant vers des "cibles" points de branchements que l'on mettra
en place dans la page :
6
8) Après la rubrique Mes hobbies rajouter rubrique qui contient dans le TP :
 Note : les questions 6, 7,8 sont réalisées dans ce programme html.

<HTML>
<HEAD>
<TITLE>CHE.INDEX1</TITLE> <HR SIZE="5" width="80%">
</HEAD> <B> Mon curriculum vitae </B> <BR><BR>
<BODY>
<CENTER> <OL TYPE = "1">
<h1> MOHAMED ALI </h1> <LI> Ecole primaire:
</CENTER> <UL>
<HR SIZE="5" width="100%"> <BR><BR> <LI>1ére: Blida
<A NAME="Mes coordonnées"> 1. </A> <LI>2éme-3éme: Soumaa
<A HREF="#Mes coordonnées"> Mes </UL>
coordonnées </A> <BR>

<LI> Ecole secondaire:


<A NAME="Mon curriculum vitae"> 2. </A>
<UL TYPE = "circle">
<A HREF="#Mon curriculum vitae">Mon
curriculum vitae</A> <BR> <LI>1éme-3e: Soumaa
<LI>4éme :Alger

<A NAME="MES Hobbies"> 2. </A> </UL>

<A HREF="#MES Hobbies">MES Hobbies</A>


<LI>Université:

<HR SIZE="5" width="100%">


<B> Mes coordonnées </B> <BR> <BR> <UL TYPE = "square">
<LI> Blida 1 faculté de physique
<UL>
</UL>
</UL>
<LI> Adresse : Université Blida 1 - Soumma
<LI>Tél : +213 (0)21 693 27 73 </OL>

<LI>Fax : +213 (0)21 693 27 27


<LI>E-mail : <A HREF=" http:// <HR SIZE="5" width="80%">
http://WWW.mohamedali@gmail.com/" <h1><B> MES Hobbies </B> </h1> <BR> <BR>
TARGET=_blank> mohamedali@gmail.com
</A>
</UL> a remplir...
6
<LI> <A HREF="../dossier image/image.html"
TARGET=_blank> Mes images </A>
<HR SIZE="5" width="80%"> <BR>
</UL>

<B> Mes Pages préférées </B> <BR> <BR>


</BODY>
<UL>
</HTML>
<LI> Le site université: <A
HREF=http://"http://www.univ-blida.dz/"
TARGET=_blank> www.univ-blida.dz </A>

<LI> <A HREF="../dossier audio/audio.html"


TARGET=_blank> Ma page audio </A>

<LI> <A HREF="../dossier video/video.html"


TARGET=_blank> Ma page video </A>

 L’execution :

6
III. Conclusion :
Dans ce TP, nous avons étudié les bases de langage html. Nous commencer par les bases
balise de html, en suite nous tracer un simple tableau, en suite nous avons crié des pages
image, audio et vidéo. Une simulation de chaque type est réalisée dans ce TP.

Vous aimerez peut-être aussi