Chap8 : Eléments de présentation 3IÉME ANNÉE
ELÉMENT DE PRÉSENTATION
I. PRODUCTION DES PAGES WEB :
1) CREATION DES PAGES WEB:
Pour créer des pages WEB, on doit tout d’abord collecter les informations nécessaires et en divers
types (images, textes, son…) ainsi que de spécifier une méthode d’organisation de ces informations et
enfin utiliser l’une des méthodes suivantes pour éditer les pages :
En utilisant un éditeur HTML front page
En utilisant le langage HTML en écrivant directement le code source des pages WEB à
l’aide des balises
2) CREATION DES PAGES WEB AVEC FRONT PAGE:
L’éditeur Front Page est un outil pour la conception, la création et la modification des pages Web
A. Lancement de Front Page :
Activité 1: TP1 /Question 1
B. Présentation de l’interface de Front Page:
Activité 2: TP1 /Question 2
C. Créer une nouvelle page :
Activité 3: TP1 /Question 3
Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Page ou site WEB.
Si vous avez choisi Page, sélectionnez le type de la page puis valider
SI vous avez choisi site WEB sélectionnez Site WEB normal et indiquez son emplacement ,
chaque nouvelle page créer devra être sauvegardée dans ce site
D. Enregistrement d'une page :
Activité 4: TP1 /Question 4
Dans le menu Fichier, pointez sur Enregistrer sous
Spécifier les paramètres d’enregistrement( lecteur , dossier , nom…) puis valider
E. Insérer un tableau :
Activité 5: TP1 /Question 5
Placez le point d'insertion à l'endroit où vous voulez insérer le tableau.
Dans le menu Tableau, pointez sur Insérer, puis cliquez sur Tableau.
Spécifier la taille du tableau, puis valider.
F. Insérer une image :
Activité 6: TP1 /Question 6
Placez le point d'insertion à l'endroit où vous voulez insérer un graphisme.
Dans le menu Insertion, sélectionnez Image puis cliquez sur Images clipart ou A partir
du fichier si vous avez une image dans un endroit bien déterminé (Disquette, dossier,…).
Si vous avez choisi Images clipart, sélectionnez une catégorie puis une image enfin cliquez
sur le bouton Insérer le clip.
G. Appliquer un thème à des pages sélectionnées :
Activité 7: TP1 /Question 7
En mode Dossier, sélectionnez les pages auxquelles vous souhaitez appliquer un thème.
Dans le menu Format, cliquez sur Thème.
Cliquez sur Pages sélectionnées.
Dans la liste de thèmes, cliquez sur le thème à appliquer. Un aperçu s'affiche sous exemple
de thème.
G. Créer un texte défilant :
Activité 8: TP1 /Question 8
sélectionnez le texte qui devra s'afficher dans le zone texte défilant.
Dans le menu Insertion, cliquez sur Composant puis Texte défilant.
1
Chap8 : Eléments de présentation 3IÉME ANNÉE
Modifier les paramètres du texte défilant (Dans la zone Texte, tapez la ligne de texte qui
devra s'afficher dans le texte défilant. Si vous avez sélectionné un texte à l'étape 1, la zone Texte contient
le texte sélectionné) puis valider.
H. Insertion d’un lien hypertexte :
1. Créer un lien hypertexte vers une page ou un fichier
Activité 9: TP1 /Question 9
Sélectionnez le texte ou l’ image qui accède ou fichier à lier.
Cliquez sur Insérer un lien hypertexte.
Sous Lien hypertexte, cliquez sur Fichier ou page WEB existant.
Sélectionnez la page ou le fichier qui vous intéresse.
2. Créer un lien hypertexte vers un emplacement dans une page :
Activité 10: TP1 /Question 10
Signet : Emplacement ou sélection de texte dans un fichier, que vous pouvez nommer afin d'y faire
référence.
Les signets identifient un emplacement de votre fichier auquel vous pouvez ensuite faire référence ou
vers lequel vous pourrez établir un lien.
Ajouter un signet :
En mode Page, effectuez les actions suivantes :
Placez le point d'insertion à l'endroit où vous souhaitez créer un signet ou sélectionnez le
texte auquel vous voulez associer un signet.
Dans le menu Insertion, cliquez sur Signet.
Dans la zone Nom du signet, tapez le nom du signet.
Créer un lien vers un signet :
Sélectionnez du texte ou une image.
Cliquez sur Insérer un lien hypertexte.
Sous Lien hypertexte, cliquez sur la page qui contient le signet.
Dans la zone Sélectionner un emplacement dans le document, cliquez sur le signet à
utiliser comme destination, puis cliquez sur OK
3) CREATION DES PAGES WEB AVEC HTML:
A. Le langage HTML :
Le langage HTML (Hyper Text Markup Language) utilise des marqueurs spéciaux, appelés balises, qui
indiquent comment les navigateurs WEB doivent afficher les éléments de page tels que texte et
graphismes.
Microsoft FrontPage est un outil qui génère le code HTML à votre place lorsque vous ajoutez des
éléments de page dans le volet Normal.
Toute page WEB devrait contenir un certain nombre de balises (ou TAG), dont un en-tête (HEAD) et un
corps (body).
La balise <HTML> indique au navigateur que l’on va utiliser le langage HTML, et la balise </HTML>
indique que l’on a fini d’utiliser ce langage.
Les balises <body> et </body> définissent la zone du corps du document. C’est entre ces balises qu’on
insère les informations à publier.
Entre les balises <HEAD> et </HEAD> réside la description du site, le nom du développeur,…
B. Exercice :
En mode HTML découvrez :
1. La structure générale d’une page WEB vide
2. Les autres balises des actions suivantes :
Paragraphes, Gras, Italique, taille du caractère, couleur du caractère, alignement du texte,
couleur d’arrière plan, insertion d’une image, insertion d’un tableau, Listes (numérotée et
non numérotée), lien hypertexte,...
2
Chap8 : Eléments de présentation 3IÉME ANNÉE
Forme et fonctionnement de quelques balises
Code HTML Aperçu Description
<P> C’est un paragraphe </p> C’est un paragraphe Création d’un paragraphe
<b>Exemple</b> Exemple Gras
<i>Exemple</i> Exemple Italique
<u>Exemple</u> Exemple Souligné
<p align="center"> Exemple </p> Exemple Alignement : centré
<font size="5"> exemple </font> Exemple Taille du texte
<font color="#000080"> exemple Exemple Couleur du texte : Bleu
</font> foncé
<ol> 1. premier exemple Permet l’obtention d’une
<li> premier exemple </li> 2. deuxième exemple liste numérotée (OL :
<li> deuxième exemple</li> Ordered List)
</ol>
<ul> premier exemple Permet l’obtention d’une
<li> premier exemple </li> deuxième exemple liste non numérotée (OL :
<li> deuxième exemple </li> Ordered List)
</ul>
<HR> Dessiner un trait horizontal
<body bgcolor="#CCCCCC"> Couleur d’arrière plan :
GRIS
<p> Insertion d’une image
<img border="0"
src="[Link]
width="67" height="69"></p>
<a href="c:/bac/ [Link]">exemple 1 Insertion d’un lien
hypertexte vers un
document Word
<bgsound Insertion d’un fond sonore.
src="[Link] (loop: c’est le nombre de
loop="-1"> répétition (-1 : toujours))
NB : La balise du fond sonore réside entre les balises <HEAD> et </HEAD>
3
Chap8 : Eléments de présentation 3IÉME ANNÉE
Activité : Réseaux et multimédia
1. Créer un dossier portant le numéro de votre carte d’identité (huit caractères) dans le dossier bac2007
situé à la racine du lecteur C. Enregistrer au fur et à mesure votre travail dans ce dossier.
2. Lancer le logiciel de création de pages WEB et créer un site ‘transport’.
3. Créer 4 pages et sauvegarder les dans le site ‘transport’ sous les noms suivants « Accueil »,
« Terrestre», « Maritime » et « Aérien ». Le contenu de ces pages est donné ci-dessous :
Les moyens de transport
TERRESTRE MARITIME AERIEN
LE MÉTRO LE BATEAU L’AVION
Le métro est de loin le C’est un bâtiment C’est un appareil
mode le plus approprié à flottant à la surface de propulsé généralement
emprunter dans une l’eau destiné au par des réacteurs.
grande ville en raison de transport de passagers C’est le moyen de
sa très grande capacité de ou de marchandises. transport le plus rapide
transport. et le plus cher.
Remarques :
1. Le style d’écriture, les couleurs du texte et des fonds des pages sont laissés au libre choix du candidat.
Toutefois, ces opérations sont importantes dans l’évaluation du site.
2. Une flèche ( )signifie un lien interne entre le mot et une page.
3. Chaque page doit contenir une image. Les images sont à insérer à partir de la bibliothèque ClipArt.
