images et liens

références

          Stock.XCHNG - banque de photos gratuites

          FreeFoto - banque de photos

          Images, cliparts, gabarits, etc.



la navigation

Comme pour toutes les autres applications en informatique, il faut maîtriser la structure de fichiers pour savoir où stocker et récupérer les objets dont on se sert.



La structure de votre site, sur le poste local comme sur le serveur, pourrait avoir l'air de ceci :

structure de fichiers


Pour insérer une image du dossier "images" dans le fichier "index.html", j'utilise la commande suivante :
            <img src="images/14737html31.jpg" ...
Puisque index.html est dans le "root", je descend dans "images" pour obtenir le fichier .jpg.

Si je suis dans un fichier .html à l'intérieur d'un autre dossier, comme "membres", je dois remonter au "root" puis descendre dans "images" comme ceci :
            <img src="../images/14737html31.jpg" ...





utilisation d'images

Les images sont très importantes dans la page Web. Elles servent à illustrer les idées, à attirer l'attention et elles servent à briser les textes trop longs pour les rendre plus intéressants.

lever de soleil


Pour insérer une image on utilise la balise <img> comme ceci :

tag image


Les attributs de l'élément img
  • src= : source de l'image; peut être dans un répertoire local ou un URL

  • width= et height= : la taille de l'image, en pixels. Ces attributs ne sont pas obligatoires mais peuvent accélerer le chargement car le navigateur n'a pas à attendre de lire l'image et peut afficher tout le texte avant d'avoir fini les images.

  • border= : affiche un cadre autour de l'image - c'est recommandé de faire plutôt cela dans le stylesheet.

  • alt= : aspect important d'accessibilité - c'est ce qui remplace l'image lorsque la page est rendue en voix pour les aveugles. Il existe un autre attribut, longdesc= qui pourrait contenir le URL d'un document plus long pour décrire l'image.

  • title= : description de l'image affichée lors d'un mouseover et aussi un aspect important de SEO car les mots clés contenus dans title sont retenus par Google dans son index d'images et peuvent produire du traffic.


image animée


formats d'images

Toutes les images doivent être en format comprimé : jpeg, gif ou png. Il ne faut jamais utiliser un format bitmap (.bmp) car c'est beaucoup trop gros.

  • .gif - utilisé pour du texte ou lorsqu'on a des blocs de couleurs, sans dégradés, comme dans des cliparts - supporte l'animation et la transparence - peut être interlaced ce qui rend le chargement plus rapide mais est aussi plus gros.

  • .jpeg - utilisé pour les photos, lorsqu'il y a beaucoup de dégradés - jusqu'à 16 million de couleurs - ne supporte pas animation - progressive jpeg est comme un interlaced gif.

  • .png - comme .gif, avec plus de couleurs - pas d'animation - évite certains problèmes de licences qu'on peut avoir avec .gif et .jpeg.

La taille des images est mesurée en pixels, comme l'écran. Par exemple, une image de 600 X 400 est d'une grandeur raisonnable pour l'affichage.

Si vous utilisez des photos d'une caméra digitale, notez qu'elles devront probablement être réduites avant de les mettre dans la page. La photo a souvent une taille d'environ 3700 X 2600, ce qui est beaucoup trop gros pour afficher. La seule raison de garder des photos de grande résolution est pour les imprimer clairement - à l'affichage il n'y a pas de différence.






création de liens

Le site Web consiste d'un ensemble de pages distinctes reliées par des liens (anchors). Les liens peuvent pointer à des adresses à l'intérieur de la page, à d'autres pages ou à d'autres sites sur le Web.

Pour créer un lien à un site externe dans la page Web, on utilise le tag :
             <a href= " ... ">

Par exemple,
<a href="http://www.webprofesseur.com" target="_blank">Cours de niveau collégial en programmation Internet, Visual Basic, Access, PHP</a>

Les attributs de l'élément <a ...
  • href= : le URL du site lié.

  • target= : permet d'ouvrir la page visitée dans une nouvelle fenêtre, ce qui laisse la page courante dans la fenêtre active. Ceci est un élément de SEO car on garde le visiteur sur notre site.

  • texte du lien (link text) : la description du site lié est importante pour Google afin d'établir l'importance du lien.


lien interne

Pour créer un lien à l'intérieur de la page il faut d'abord créer un ancre au point qu'on veut atteindre :

            <a name="debut"></a>

Pour l'utiliser on écrit : <a href="#debut">Haut de la page</a>

Ceci aura pour effet d'ajouter un lien à l'intérieur de la page.


Haut de la page

Précédente            Suivante