Pour afficher une image dans une page internet, il faut : Avoir l'image stockée sur le site, et lui donner un nom de substitution en cas d'absence de l'image.
Notez, que la balise image <img> est une balise auto-fermée. L'option "alt", alternative, est maintenant obligatoire, elle permet d'afficher un texte en cas d'absence de l'image.
Il n'est pas nécessaire de connaître la taille de l'image. Elle sera affichée à sa taille réelle. Vous pouvez changer la taille sans stocker une nouvelle image sur votre site. Dans ce cas, faites bien attention aux proportions.
Exemple, la photo de ma maison est en 459 sur 284 pixels. Divisons par deux ces valeurs. Cela donne :
Voila vous en savez assez pour faire des pages internet avec du texte et des images, soit la totalité de mon site. Il ne reste qu'à apprendre à naviguer entre ces pages. Ce sont les liens hypertextes.
Pointer et aller à une autre page html ou ailleurs dans la même page relève d'une fonction identique, les liens hypertextes.
La balise est normale du type <a>.....</a>, avec à l'intérieur de la balise ouverture, le paramètre adresse <a href="...." >, qui donne l'adresse URL où aller.
"../Bateau/Brambers.html" est l'adresse web. "../" indique un niveau à remonter de votre page et à celle où vous allez. (Pour cette adresse c'est la racine de mon site). Attention, de bien compter le nombre de niveaux correspondant à votre organisation de dossiers. Exemple, trois niveaux s'écriront "../../../".
Il est possible de mettre en absolu "http://www.legallou.com/Bateau/Brambers.html". Cela ne peut apporter que des inconvénients en cas de changement.
Si vous êtes dans le même dossier, pas nécessaire d'indiquer les niveaux.
Entre les deux balises d'ouverture et fin, le texte "Mon bateau" sur lequel le lecteur cliquera.
Il vous faudra placer un indicateur où aller. Indicateur assez souvent appelé ancre. C'est la même balise <a> utilisée avec un paramètre "name", soit :
Le code html
L'adresse URL du code du lien sera complétée par celle de l'ancre. Le caractère "#" le spécifiant.
Le code html
C'est strictement identique, excepté que vous n'avez pas à indiquer les niveaux d'accès, puisque vous y êtes déjà. Le nom de la page que vous lisez suffit, dans mon exemple le nom de la page est "autre", le nom de l'ancre est "image".
Voilà, vous avez appris tout ce que j'utilise pour faire mon site, en particulier la page que vous lisez. Regardez son code source, cela vous donnera un exemple complet.
C'est le même raisonnement, sauf que le lien hypertexte au lieu d'être caché derrière un texte, il est caché derrière une image.
Le lien HREF et l'image IMG sont tous les deux dans la balise < a >
Le lien pointe, dans cet exemple, vers une page html.
Le lien pourrait pointer sur une autre image, la même, mais de taille différente. C'est le cas type de visualisation d'imagette pour un chargement rapide, et la vue des images en grand format se faisant en cliquant sur les imagettes.
Il faut rajouter une commande "onclick", ses paramètres sont :
Si vous avez de nombreuses photos, et pour éviter la commande "onclick" assez longue, il faut passer à du javascript ce qui est hors d'une introduction pour débutant. Si vous voulez voir comment, c'est ici
Merci de votre visite
