Home

Apprendre le HTML et les CSS

Par l'exemple

- Pour le débutant complet -

Les images

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.


maison

Son code dans la page html est :
maison1

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 :

maison

Son code dans la page html deviendra :
maison2

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.

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.


Le code html
goto1

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.


Mon bateau




A l'intérieur de la page d'une autre page

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
ancre

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
goto2

Les spécifications de mon bateau


A l'intérieur de la page de la même page

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".


goto-image

paragraphe image de cette page


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.




Liens hypertextes derrière une image


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.


601LienImage

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.




image
Cliquez sur l'image


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.


image
Cliquez sur l'image

image

Il faut rajouter une commande "onclick", ses paramètres sont :

Pour plus de détail voir http://openweb.eu.org/articles/popup/

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




Etape suivante - Les tableaux





Merci de votre visite


UP