Kamertic - Intégration des TICs dans l'Enseignement

Kamertic - Intégration des TICs dans l'Enseignement

Leçon 8: Insertion des liens et des images dans un document web

 Leçon 8:Insertion des liens et des images

Compétences visées :

  • Insérer un  lien vers une autre page, un autre site et une ancre ;
  • Insérer une image et un son ;
  • Insérer une bulle d‘aide ;
  • Insérer un lien pour envoyer un mail ;

Introduction

Un site  web  est  constitué  de  plusieurs  pages  et  il  est  indispensable  de  pouvoir  naviguer  à travers toutes ces pages. HTML est un langage hypertexte qui permet en cliquant sur un mot, une expression (généralement souligné) ou une image, de se transporter vers un autre endroit du document, vers un autre fichier Html situé  sur l‘ordinateur local, vers un autre ordinateur situé sur le Web. Les liens hypertexte permettent de surfer de page en page et constituent l‘essence même des documents HTML. Une image peut également constituer un  lien.  Dans  ce  chapitre,  nous  présenterons  comment  insérer  un  lien,  une  image,  un  son audio dans une page web.

      I. INSERTION DES LIENS

Un  lien  est  un  texte  ou  une  image  sur  lequel  on  clique  pour  se  rendre  sur  une  autre page. Pour faire un lien, la balise utilisée est très simple: <a>……</a>. Il faut cependant lui ajouter l‘attribut href pour indiquer vers quelle page on souhaite  se rendre. Il est facile de  reconnaître  les  liens  sur  une  page  :  ils  sont  écrits  d'une  façon  différente  (par  défaut  en bleu souligné) et un curseur en forme de main apparaît lorsqu'on pointe dessus.

  1. Un lien vers un autre site

 

Notion d‘adresse URL  (Uniform Ressource Locator) : c‘est une adresse web qui permet localiser de façon unique  une ressource sur Internet. Exemple //www.yahoo.fr.

La syntaxe d‘insertion d‘un lien vers un autre site est la suivante : 

<a href= ‘adresse URL‘‘> Texte du lien </a> 

Où adresse URL désigne l‘adresse URL du site vers lequel on souhaite diriger le visiteur et texte du lien, le texte qui sera affiché pour représenter le lien.

2.       Lien vers une autre page du site

L'organisation  classique,   d'un  site Web  consiste  à  regrouper

l'ensemble  des  éléments  de  celui-ci  (fichiers  html,  images,  ...)  dans  un même  répertoire.

Mais ceci n‘est pas toujours le cas. La syntaxe d‘insertion d‘un lien vers une autre page du site est la suivante : 

<a href= ‘chemin d‘accès ‘> Texte du lien </a>

Le chemin d‘accès dépend selon que les pages se trouvent dans le même dossier ou non.

               a.       Les pages sont dans le même dossier

Le chemin d‘accès est simplement le nom de la page.

<a href=‘‘page.html‘‘> texte </a>

                b.      Une des pages est dans un sous dossier 

Le chemin d‘accès est

<a href=‘‘nom-sous-dossier/ page.html‘‘> texte </a>. 

Si la page se trouve dans un autre dossier du sous dossier alors le chemin d‘accès devient

<a href=‘‘nom-sous-dossier/nom-autre-dossier/page.html‘‘> texte </a>

Il faut donc dans ce cas spécifier à chaque fois le chemin d‘accès absolu au fichier HTML.

                 c.       Une des pages est dans un dossier parent

Le chemin d‘accès est

<a href=‘‘.. / page.html‘‘> texte </a>. 

 3.       Lien vers une ancre

Une ancre est une sorte de point de  repère qu‘on place dans des pages web étendues.

En effet, si une page est très grande il peut être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse passer directement à la partie qui l'intéresse.

Pour créer une ancre,

<a Name="nom ancre">…</a>
  1. Lien vers une ancre de la même page
<a href="#nom ancre">texte du lien</a>
  1. Lien vers une ancre située dans une autre page

L'idée, c'est de faire un lien qui ouvre une nouvelle page et qui amène directement à une ancre située plus bas sur cette page. En pratique, il suffit de taper le nom de la page, suivi d'un dièse (#), suivi du nom de l'ancre.

<a href=‘‘nom_page#nom_ancre‘‘>…</a>

4.       Lien qui affiche une infobulle au survol

On peut utiliser l'attribut ‗‘title‘‘ qui affiche une bulle d'aide lorsqu'on pointe sur le lien.

La bulle d'aide peut être utile pour informer le visiteur avant même qu'il n'ait cliqué sur le lien. On a la syntaxe suivante :

<a href=‘‘adresse_a_atteindre‘‘ title=‘‘texte_de_infobulle‘‘> texte du lien </a>

Exemple 

 <a  href=//www.lybide.cm title=‘‘Site du lycée bilingue de Deido‘‘> Site du LYBIDE </a>

  1. Lien pour envoyer un mail

Si on désire que les visiteurs d‘un site web puissent envoyer un mail au propriétaire, on doit  utiliser  des  liens  de  type  "mailto". Rien  ne  change  au  niveau  de  la  balise,  on  doit simplement modifier la valeur de l'attribut href comme ceci :

<a href="mailto:votre_mail">Texte du lien</a>

Exemple : on désire insérer un lien qui permet d‘envoyer un mail à l‘adresse suivante

youmbich@yahoo.com, l‘instruction est la suivante :

<a href=‘‘mailto :jibacyrille@yahoo.fr‘‘> Envoyez un mail </a>

5.       Un lien pour télécharger un fichier

Pour  insérer  un  lien  qui  permet  au  visiteur  du  site  de  télécharger  un  fichier,  il  faut

Indiquer le nom  du  fichier  à  télécharger  et  en  précisant  son  extension.  On  a  la  syntaxe  <a

href=‘‘nom_fichier‘‘> Texte du lien </a>. Il est à noter que le fichier doit se trouver dans le dossier du site web en question.

Exemple : soit à insérer un lien pour le téléchargement du fichier footballeurs.doc 

<a href=‘‘footballeurs.doc‘‘> Télécharger la liste des footballeurs </a>

 

      II.   INSERTION DES IMAGES

1.       Insérer une image

La balise permettant d‘insérer une image dans une page web est <IMG >. C‘est une balise

non  fermante  c'est-à-dire  qu‘on  n‘a  pas  besoin  de  l‘écrire  en  deux  exemplaires  comme  la plupart  des  balises  utilisées  jusqu'ici.  La  balise  doit  être  accompagnée  de  2  attributs obligatoires :

  SRC : signifie  "source".  Il  permet  d'indiquer  où  se  trouve  l'image  que  l'on  veut insérer. 

  ALT : cela signifie "texte alternatif". On doit toujours indiquer un texte alternatif à l'image, c'est-à-dire un texte court qui décrit ce que contient l'image. 

La syntaxe est

<img src="chemin d'accès de l'image" alt=" voici une photo des élèves de la 1D2 " />

Exemple :  soit  à  insérer  l‘image  promo2010.jpg  dans  une  page  web,  l‘instruction  est  la suivante

<p>voici une photo des éleves de la 1e d2 <br />

<img src="promo2010.jpg" alt=" message alternatif" /></p>

2.  Ajouter une infobulle

<p>voici une photo des etudiants de la promotion arc en ciel <br />

<img  src="promo2010.jpg"  alt="etudiants  de  la  promotion  2010title=‘‘technopedagogues du DITE de l‘ENS‘‘ /></p>

Les images doivent se trouver à l'intérieur d'un paragraphe (<p></p>).

Éviter les caractères accentués, les espaces et les majuscules dans les noms de

fichiers, dossiers et images. Il faut toujours s‘assurer que l‘image est dans le même dossier ou dans un sous dossier du dossier qui contient les pages web

3. Insertion du son

<audio src="musik.mp3" controls></audio>

SRC : il permet d'indiquer où se trouve le son audio que l'on veut insérer

  controls : pour ajouter les boutons "Lecture", "Pause" et la barre de défilement

  width : pour modifier la largeur de l'outil de lecture audio.

  loop : la musique sera jouée en boucle.

  autoplay : la musique sera jouée dès le chargement de la page. 

  preload : indique si la musique

 

 

EXERCICE 1 :

1.  Définir les termes liens, ancre.

2.  Donner la balise qui permet d‘insérer un lien.  Citer deux attributs de cette balise et donner leurs fonctionnalités.

3.  Donner  la  balise  qui  permet  d‘insérer  une  image  dans  un  page web. Citer  trois attributs de cette balise et donner leurs fonctionnalités.

4.  Donner  la balise   qui permet d‘insérer un son audio dans un page web. Citer trois attributs de cette balise et donner leurs fonctionnalités.

5.  Peut-on insérer une vidéo dans une page web ? Si oui à l‘aide de quelle balise ?

EXERCICE 2 :

Que font les instructions suivantes :

1.  <img src= ‗‘fleur.png‘‘ alt=‘‘une rose‘‘ />

2.  <a href="mailto:nancy.gmail.com"> envoyer moi un message </a>

3.  <a href=‘‘cameroun.pdf> télécharger l‘histoire du Cameroun </a>

4.  <a href="//www.yahoo.fr"> yahoo france </a>

5.  <img  src="premiere.jpg"  alt="Eleves de la premiere D2" 

title=‘‘ Eleves de la premiere D2  lybide‘‘ />

EXRECICE 3 :

1)  Votre    page  "source.html"  se  trouve  dans  le  répertoire  "c:sitesource.html",  et ma  page ‗‘cible.html‘‘ se trouve dans "c:sitedocuments ravauxcible.html". Lequel de ces liens est le bon ?

(i)  <a href="documents/travaux/cible.html">

(ii)  <a href="site/documents/travaux/cible.html">

(iii)  <a href="cible.html">

 

 



02/12/2015
0 Poster un commentaire

A découvrir aussi


Ces blogs de Enseignement & Emploi pourraient vous intéresser

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 13 autres membres