Page précédente
Le B A BA du Html tout à la main
II ème partie
Page suivante

Inserer une image

    L'insertion d'une image se fait avec le marqueur <IMG SRC="ImgUrl">.
    Si on met ce marqueur au milieu d'une phrase, l'image viendra s'y inserer au même titre qu'un caractère normal, le bas du texte étant aligné le bas de l'image. "ImgUrl" est l'Url de l'image.
    Les principaux paramètres du marqueur <IMG ...> sont :
    • HEIGHT="pixels" et WIDTH="pixels" : taille de l'image. Ces paramètres sont optionels mais il est recommendé de les données afin que le browser puisse reservé la bonne taille avant le chargement de l'image. On a la possibilité aussi de modifier la taille initiale d'une image.
    • ALIGN= LEFT | RIGHT | CENTER.... permet d'aligner le texte par rapport à l'image.
      • LEFT : L'image est alignée avec la marge gauche et le texte commence en haut à droite de l'image
      • RIGHT : L'image est alignée avec la marge droite et le texte commence en haut à gauche de l'image.
      • CENTER : Le texte est aligné avec le centre de l'image
    Pour les autres possibilités voir la réference de IMG.
    A noter l'existence du marqueur <BR CLEAR="LEFT | RIGHT | ALL"> qui fait un saut de ligne en forçant le texte à la prochaine ligne vide (et non pas au bord de la ligne suivante le long d'une image ...)

    Exemple :
    Ici j'insère une 
    <IMG SRC=404.jpg WIDTH=170 HEIGHT=94> 
    image au milieu du texte<BR>
    
    
    Ici j'insère une image au milieu du texte
    Le texte est centré
    <IMG SRC=404.jpg WIDTH=170 HEIGHT=94 ALIGN=CENTER> 
    par rapport à l'image.<BR>
    
    Le texte est centrépar rapport à l'image
    J'ai réduit la taille 
    <IMG SRC=404.jpg WIDTH=85 HEIGHT=47 ALIGN=CENTER> 
    de l'image.<BR>
    
    J'ai réduit la taillede l'image
    <IMG SRC=404.jpg WIDTH=85 HEIGHT=47 ALIGN=LEFT> 
    Ici, l'image est à gauche et le texte 
    est aligné sur le bord de l'image.
    Blablabla, blablabla, 
    blablabla, blablabla, 
    blablabla, blablabla, 
    blablabla, blablabla.
    (ca faisait longtemps :-)
    
    Ici, l'image est à gauche et le texte est aligné sur le bord de l'image. Blablabla, blablabla, blablabla, blablabla, blablabla, blablabla, blablabla, blablabla.(ca faisait longtemps :-)


Création de liens hypertextes

    Un lien hypertexte se fait grace au marqueur <A HREF="...."> Texte</Aa
    Le "Texte" apparaitra alors souligné et pourra être cliqué. Ce qu'il y a après le HREF est une URL standard.
    On a la possibilité d'utiliser des images comme lien hypertext, il faut alors utiliser la syntaxe : <A HREF="...."><img src="...."> </a> et l'image devient alors "cliquable". Personellement, je conseille d'utiliser le parametre BORDER=0 dans le marqueur <IMG...> parfce que je trouve que le lien de couleur autour de l'image n'est pas beau, mais bon, ça se discute ....
    Si on veut changer la couleur du lien, il faut mettre le marqueur <FONT...> après le marqueur <A HREF=....>
    exemple : <A HREF=toto.html><font color=red>ceci est un lien</FONT></A>


    <BODY BGCOLOR=CYAN TEXT=GREEN LINK=BLACK VLINK=BLACK>
    blablabla, blabalbla , 
    bblablabla, 
    <A HREF=toto.html>
    lien qui ne mène nulle part</A>
    <BR>
    <A HREF=toto.html>< FONT COLOR=RED>
    on a changé la couleur du lien
    </FONT>< /A>
    <BR>
    <A HREF=toto.html>
    <IMG SRC=404.jpg WIDTH=85 HEIGHT=47 ALIGN=LEFT> 
    </A>L'image à gauche est cliquable.
    
    blablabla, blabalbla , bblablabla, lien qui ne mène nulle part
    on a changé la couleur du lien
    L'image à gauche est cliquable.


    Une autre possibilité de lien est un lien interne à la page : c'est à dire que le lien hypertexte renvoie à la même page, mais plus haut ou plus bas. Par exemple ici, on est à la fin de la page, si vous cliquez ici, vous retournerez automatiquement tout en haut. Ceci se fait grâce à deux marqueurs : tout d'abord, une marqueur du type <A NAME="un_nom_quelconque"></A> à l'endroit de destination du lien. Ici, j'ai mis ce type de lien juste après le marqueur BODY. Ensuite un marqueur de type <A HREF="#un_nom_quelconque">, le # indiquant un lien interne. On a la possibilité d'adresser un lien interne depuis une autre page. Par exemple si depuis une autre page vous mettez <A HREF=image.html#fin>...</A>, vous arriverez directement au début de ce chapitre, car j'y ai mis un marqueur <A NAME="fin"></A>


La suite ...


Dernière modif : 2 Mai 1999 http://philippe.sarcher.org/html/image.html Philippe Sarcher