Image flottante Le HTML! c'est si simple.

               Le HTML n'est pas un langage de programmation.
               Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un contenu rédigé en texte simple.


Cette page ainsi que son CSS est conforme aux règles du   W3C
Valid HTML 5     CSS Valide !

Une page toute simple.
Pour créer une page internet, nous avons besoin d'un éditeur de texte afin d'y insérer certains codes.
Personnellement je me sers de Notepad que vous pouvez télécharger
    ici.
ATTENTION:    Faites vos essais avec 2 navigateurs au moins (Internet Explorer puis un autre soit Google Chrome ou Firefox).
Personnellement je me sers de IE8, IE9, Firefox, Google Chrome et Opéra et c'est fou la différence qu'il peut y avoir entre IE et Firefox par exemple.

Un script minimum est nécessaire.
Un doctype.  (qui se trouve en tête du document HTML).
On parle de «doctype» pour faire court, mais il s'agit en fait d'une ligne de déclaration du type de document, qui indique au navigateur dans quel type de HTML la page a été écrite (HTML-3.2 «classique», HTML-4 de transition ou strict, XHTML, etc...).
HTML 4.01 Strict :
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
ET ENFIN: Le dernier le HTML 5 (c'est celui-ci que nous utiliserons dans nos pages).
< !DOCTYPE html >
Si vous voulez en savoir plus sur le doctype cliquez   ici  (page en anglais).

Les balises <head>  < /head >  (nous aurons l'occasion d'y revenir à plusieurs reprises).
Les balises <head>  </head> permettent normalement de fournir, entre autres, une description de votre site par le biais de mots clés et de phrases décrivant votre site afin que les moteurs de recherche le reconnaissent et le référencent au mieux. Elle a d'autres fonctions comme notamment, la redirection automatique vers une URL.
C'est entre ces balises que nous allons, pour le moment, mettre "le titre de notre page internet" et la "balise <meta>" qui correspond au codage de notre page internet.

On ouvre la balise < head > on inscrit notre code et on referme la balise </head>

Les balises <body> </body>.
L'élément BODY est l'élément constitutif principal d'un document. C'est donc l'un des plus importants du langage HTML.
Il permet de caractériser le corps du texte dans un document HTML de toutes les manières possibles, puisqu'il encadre une multitude d'éléments qui contribuent à donner à un document HTML l'apparence que vous lui connaissez.
C'est à l'intérieur de ces balises que l'on va insérer notre texte, nos images et tout ce qui apparaitra sur notre page.

On ouvre la balise <body> on inscrit notre texte et on referme la balise </body>
Nous n'avons plus qu'à refermer la balise < /html >
< !DOCTYPE html >
< head >
               Le titre de la page internet nos balises "meta".
< /head >
< body >
               C'est ici, entre ces deux balises, que l'on inscrit notre texte, que l'on met nos images ect ect
< /body >
< /html >

Ce qui nous donne: Voir image.


    Si vous ne comprenez pas visionnez cette vidéo.
Insérer une feuille de style (CSS) dans la page HTML.
                    On a fait notre essai et on a remarqué que notre page internet était triste, très triste.
On va insérer du code "CSS" (Cascading Style Sheets : feuilles de style en cascade) entre la balise <head> et </head> du code HTML.
L'objectif principal des feuilles de style est de séparer autant que possible la présentation et le contenu d'une page.
Elles peuvent aussi permettre d'adapter automatiquement la présentation d'une page en fonction du média servant à l'afficher.
On peut citer les avantages suivants :
La structure du document et la présentation peuvent être gérées dans des fichiers séparés.
La conception d'un document peut se faire sans se soucier de la présentation.
Dans le cas d'un site web, la présentation est uniformisée : les documents (pages HTML) font référence aux mêmes feuilles de style. Cette caractéristique permet, de plus, une remise en forme rapide de l'aspect visuel.

Pour se faire nous allons insérer entre les balises <head> et </head> ce code suivant (code en vert):
<style type="text/css">     (balise style.)
body      (Page du navigateur.)
     {       (on ouvre l'accolade "touche AltGr + la touche 4" touche ou il y a l'apostrophe.)
     background-color: green;      (la page sera verte (background-color = couleur du fond ici green = vert). vous pouvez changer la couleur.)
     }      (on referme l'accolade "touche AltGr + la touche +" touche ou il y a le + et = à gauche de la touche Retour.)
#corps (Votre page.)
     {      (on ouvre l'accolade "touche AltGr + la touche 4" touche ou il y a l'apostrophe.)
     margin-top: 10px;       (c'est la marge que l'on va laisser entre le navigateur et votre page. Vous pouvez soit l'augmenter, soit la diminuer.)
     margin: auto;       (votre page sera centrée automatiquement.)
     width:900px;       (largeur de votre page.)
     padding: 10px;      (votre texte ne collera pas à la bordure.)
     border: 2px solid red;       (bordure rouge de 2px d'épaisseur. Vous pouvez, bien sûr, changer l'épaisseur et la couleur)
     background-color: blue;       (le fond de votre page sera bleu (background-color = couleur du fond ici blue = blue))
     height:500px;      (hauteur de votre page.)
     }      (on referme l'accolade "touche AltGr + la touche +" touche ou il y a le + et = à gauche de la touche Retour.)
</style>      (On referme la balise style)
Ce qui nous donnera:      Voir image

Si vous désirez ne pas tapez ces codes ou que vous soyez trop flemmard (comme moi) cliquez sur "Sélectionner le code HTML avec le CSS" copiez et collez le dans votre éditeur de texte. Cliquez sur "Langage" puis sur "HTML".
Changez les couleurs si vous le désirez (au contraire faites le) mettez votre texte à la place du commentaire (attention le fond de votre page est bleu) , ensuite, cliquez sur "Fichier" "Enregistrer sous" donnez un nom au fichier et cliquez sur "Enregistrer" puis allez voir le résultat.

Ma page "HTML" ainsi que son "CSS".
Maintenant nous allons réaliser notre page qui nous servira pour tous ces tutoriels.
Vous avez le choix de faire une page avec sa "feuille de style" ou de faire une page avec le "CSS" externe.
Vu que nous allons modifier notre page assez souvent, je vous conseille de faire 2 fichiers. Un pour le "HTML" et l'autre pour le "CSS".
Ouvrez un dossier, donnez-lui un nom et c'est à l'intérieur de celui-ci que nous y placerons nos fichiers.


Sélectionnez le code html ci-dessous puis copiez et collez le dans votre éditeur de texte (Notepad).
Ensuite cliquez sur "Langage" et "HTML".
Cliquez sur "Fichier" et "Enregistrer sous" et donnez lui un nom de fichier que vous aurez choisi.
ex: "index" ou même "mon_fichier" et cliquez sur "Enregistrer".

      Voir image

Sélectionnez le code CSS ci-dessous puis copiez et collez le dans votre éditeur de texte (Notepad). Ensuite cliquez sur "Langage" et "CSS".
Cliquez sur "Fichier" et "Enregistrer sous" et donnez lui le nom de fichier que vous aurez choisi dans votre code HTML et cliquez sur "Enregistrer".

     Voir image

On peut aussi mettre le CSS entre la balise "head" et "/head" du code HTML le résultat serait le même (essayez et vous verrez).
Sélectionnez le code html ci-dessous puis copiez et collez le dans votre éditeur de texte (Notepad). Ensuite cliquez sur "Langage" et "HTML".
Cliquez sur "Fichier" et "Enregistrer sous" et donnez lui un nom de fichier.

Maintenant imaginons que nous ayons une cinquantaine de fichiers HTML avec le même CSS et que nous voulions changer les couleurs, il nous faudrait le faire dans tous les fichiers et franchement ça représente beaucoup de travail alors que si on avait le même code CSS pour tous les fichiers HTML on ne le changerait qu'une seule fois.

     Voir image
Une page avec en-tête, un menu, un corps de page et un pied de page.

                         Nous allons créer une page comme     celle-ci
Dans notre CSS nous allons mettre les codes suivants (codes en vert).
    body
            {
            background-color: #406D67;       /*couleur de la page*/
    }
Pour l'en-tête de la page.
    #en_tete       /*Nom de ma div (vous mettez le nom que vous voulez)*/
            {
            width: 700px;       /*Largeur de mon en-tête*/
            height: 40px;       /*Hauteur de mon en-tête*/
            background-image: url("images/banniere.gif");        /*background-image ou background-color*/
            background-repeat: no-repeat;         /* Image qui ne se répètera pas*/
            margin-bottom: 10px;        /* Marge entre le navigateur et l'en tête*/
            border: 1px solid yellow;       /* Une bordure jaune de 1 pixel*/
            margin-left:280px;       /* dimensions et couleur de la bordure de la bannière*/
    }
Pour le menu.
    #menu
            {
            float: left;         /*Menu placé a gauche du corps*/
            width: 120px;         /*Largeur du menu*/
            margin-left:180px;        /*menu à 180 pixels du bord gauche*/
            padding: 10px;        /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
            height: 460px;        /*hauteur du menu*/
            background-color: #D7DADA;         /* Couleur de fond du menu.*/
            }
Pour le corps de la page.
    #corps
            {
            width: 700px;        /*Largeur du corps de la page*/
            height: 460px;         /*Hauteur du corps de la page*/
            margin-left: 340px;        /* Une marge à gauche pour pousser le corps, afin qu'il ne passe pas sous le menu */
            margin-bottom: 10px;        /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
            padding: 10px;         /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
            background-color: #F5F59D;        /* Une couleur de fond pour le corps */
            }
Pour le pied de la page.
    #pied_de_page
            {
            width: 860px;        /*Largeur du pied de la page*/
            padding:10px;         /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
            background-color: #00EECE;        /* Le pied de page sera de couleur bleu ciel*/
            margin-left:180px;        /* La bannière sera à 180 pixels du bord gauche*/
            }
Voir l'image du code "CSS"
Voir l'image du code "HTML"
La taille du texte.

             Obtenir différentes tailles du texte avec la balise < font >
                          Attention, cette balise n'est plus utilisée en HTML 5 mais elle est utilisée avec le HTML 4 et le XHTML (les navigateurs la reconnaissent encore mais elle est appelée à disparaitre dans les années à venir. Préférez lui la balise "span" avec sa feuille de style).
Ces textes sont à insérer entre les balises < body >  et   < /body >
< font size="1" > Le texte est écrit en petit. < /font >
Ce qui donnera dans votre page:     Le texte est écrit en petit.

< font size="3" > Le texte est écrit plus gros.< /font >
< font size="5" > Le texte est écrit encore plus gros.< /font >
Ce qui donnera dans votre page:     Le texte est écrit encore plus gros.

< font size="7" > Le texte est écrit très gros.< /font >
Ce qui donnera dans votre page:     Le texte est écrit très gros.
Comme vous le constatez, on ouvre la balise< font size="6" > et l'on referme la balise < /font >
Faites des essais pour vous rendre compte du résultat.

             Obtenir différentes tailles du texte avec la balise < span >
Si on insère dans le "CSS".
     .texte1 { font-size: 12px; }
     .texte2 { font-size: 18px; }
     .texte3 { font-size: 26px; }
     .texte4 { font-size: 36px; }
Et entre les balises < body >  et   < /body >
< span class="texte1" > Le texte est écrit en petit.< /span >
Ce qui donnera dans votre page:     Le texte est écrit en petit.

< span class="texte2 > Le texte est écrit plus gros.< /span >
Ce qui donnera dans votre page:     Le texte est écrit plus gros.

< span class="texte3 > Le texte est écrit encore plus gros.</span>
Ce qui donnera dans votre page:     Le texte est écrit encore plus gros.

< span class="texte4> Le texte est écrit très gros.< /span >
Ce qui donnera dans votre page:     Le texte est écrit très gros.
Comme vous le constatez, on ouvre la balise < span class="texte4 > et l'on referme la balise < /span >
Faites des essais pour vous rendre compte du résultat.

La taille du texte et ses couleurs.
            
Obtenir différentes couleurs du texte avec la balise < font >
                          Attention, je me répète, cette balise n'est plus utilisée en HTML 5 (les navigateurs la reconnaissent encore mais elle est appelée à disparaitre dans les années à venir. Préférez lui la balise "span" avec sa feuille de style).
Ces textes sont à insérer entre les balises < body >   et   < /body >
< font size="1" color="blue" > Le texte est écrit en petit et de couleur bleue.< /font >
Ce qui donnera dans votre page:      Le texte est écrit en petit et de couleur bleue.

< font size="3" color="maroon" > Le texte est écrit un peu plus gros et de couleur marron..< /font >
Ce qui donnera dans votre page:      Le texte est écrit un peu plus gros et de couleur marron.

< font size="5" color="green" > Le texte est écrit encore plus gros et de couleur verte.< /font >
Ce qui donnera dans votre page:      Le texte est écrit encore plus gros et de couleur verte.

< font size="6" color="red" > Le texte est écrit très gros et de couleur rouge.< /font >
Ce qui donnera dans votre page:      Le texte est écrit très gros et de couleur rouge.

Comme vous le constatez, on ouvre la balise font: < font size="6" color="red" > et l'on referme la balise < /font >
Comme vous l'avez remarqué tout le script est en anglais y compris les couleurs.
On peut aussi se servir du code des couleurs que vous trouverez ici
Vous choisissez la couleur puis vous copiez/collez le code qui est donné (avec la touche dièse).

Exemple: < font size="3" color="#00ED47" > la touche "dièse" suivit du code 00ED47 donne la couleur verte.< /font >
La taille du texte étant mise par défaut par le navigateur on peut mettre:
< font color="#ED00C5" > La taille du texte sera par défaut mais sa couleur sera violette..< /font >
Ce qui donnera dans votre page:     La taille du texte sera par défaut et sa couleur violette.
Autre exemple:
< font color="#ED00C5" > Mon texte sera violet.< /font > Ce qui donnera dans votre page:     Mon texte sera violet.
< font color="#00ED08" > Mon texte sera vert.< /font > Ce qui donnera dans votre page:     Mon texte sera vert.
< font color="#EDAD00" > Mon texte sera orange.< /font > Ce qui donnera dans votre page:     Mon texte sera orange.
Ou encore:
< font color="#EE003F" > T< /font > < font color="#5140A4" > E< /font > < font color="#007D08" > X< /font > < font color="#EDAD00" > T< /font >
Ce qui donnera dans votre page: TEXT
Faites des essais pour vous rendre compte du résultat.
Je me répète: insérez les textes entre les balises< body >  et   < /body >

             Obtenir différentes couleurs du texte avec la balise< span >
Si on insère dans le "CSS".
     .blue { font-size: 12px; color: blue; }
     .maroon { font-size: 18px; color: maroon; }
     .green { font-size: 26px; color: green; }
     .red { font-size: 36px; color: red; }
Et entre les balises <body>  et   </body>
< span class="blue" > >Le texte est écrit en petit et de couleur bleue.</span>
Ce qui donnera dans votre page:     Le texte est écrit en petit et de couleur bleue.

< span class="maroon" > Le texte est écrit un peu plus gros et de couleur marron.</span>
Ce qui donnera dans votre page:     Le texte est écrit un peu plus gros et de couleur marron.

< span class="green" > Le texte est écrit encore plus gros et de couleur verte.</span>
Ce qui donnera dans votre page:     Le texte est écrit encore plus gros et de couleur verte.

< span class="red" > Le texte est écrit très gros et de couleur rouge.</span>
Ce qui donnera dans votre page:      Le texte est écrit très gros et de couleur rouge.

Comme vous le constatez, on ouvre la balise: < span class="red" > et l'on referme la balise< /span >
Comme vous l'avez remarqué tout le script est en anglais y compris les couleurs.

On peut aussi se servir du code des couleurs que vous trouverez   ici   ou encore   ici
Vous choisissez la couleur puis vous copiez/collez le code qui est donné (avec la touche dièse).
Exemple: dans le CSS      .code_green { font-size: 14px; color: #00ED47; }
Et entre <body>  et  </body>          <span class="code_green"> la touche "dièse" suivit du code 00ED47 donne la couleur verte.</span>
La taille du texte étant mise par défaut par le navigateur on peut mettre:
On insère dans le "CSS".      .defaut { font-color: darkorchid; }
Et entre <body>  et  </body>          <span class="defaut"> La taille du texte sera par défaut mais sa couleur sera violette.< /span >
Ce qui donnera dans votre page:     La taille du texte sera par défaut et sa couleur violette.
Ou encore:
Si on insère dans le "CSS".
     .red { font-size: 18px; color: yellow; }
     .darkorchid { font-size: 18px; color: darkorchid; }
     .green { font-size: 18px; color: green; }
     .yellow { font-size: 18px; color: yellow; }
Et entre les balises <body>  et  </body>
<span class="red"> T< /span > <span class="darkorchid"> E< /span > <span class="green"> X< /span > <span class="yellow"> T< /span > Ce qui donnera dans votre page: TEXT
Faites des essais pour vous rendre compte du résultat.

Faire flotter notre texte à droite.
Nous allons créer une "div" dans notre CSS (code en vert).
            .texte_droite
             {
             float: right ;
             }
Puis dans notre corps entre les balise body et body:
EXEMPLE:
<span class="texte_droite"> Mon texte flottera à droite.</span>
Ce qui donnera dans votre page:    
Mon texte flottera à droite.
AUTRE EXEMPLE:
Ce texte flottera à gauche (par défaut).<span class="texte_droite"> Celui-ci flottera à droite.</span>
Ce qui donnera dans votre page:    
Ce texte flottera à gauche (par défaut).Celui-ci flottera à droite.
Faire défiler notre texte.
             De gauche à droite, de droite à gauche, de haut en bas, de bas en haut.
                         
Pour cela nous allons utiliser la balise <marquee> que nous mettrons entre las balises body et /body.
Attention, cette balise n'est plus utilisée en HTML 5 et peu recommandée avec le HTML 4 et le XHTML (les navigateurs la reconnaissent encore mais il est préférable d'utiliser du "Javascript" à la place et nous n'en sommes pas encore là.
<marquee>         Début de balise
align="top"         top texte aligné en haut, middle aligné au centre, bottom Texte aligné en bas
behavior="scroll"         behavior(comportement)"scroll" texte arrive et disparait "slide" Texte arrive et stop "alternate" Texte gauche/droite
bgcolor="#rrggbb"         Couleur de fond du Marquee
direction="right"         "right" arrive par la droite, "left" arrive par la gauche "up" monte "down" descends
height="20px"         Hauteur de Marquee en pourcentage ou en pixels
width="50%"         Largeur du Marquee en pourcentage ou en pixels
scrollamount="nombre"         Vitesse du défilement
scrolldeley="nombre"         Délais en millisecondes du défilement
onmouseover="this.stop()"         Le texte s'arrête si le curseur de la souris est dessus.
onmouseout="this.start()"         Le texte repart si le curseur de la souris s'écarte.
Bla bla bla...         Le texte
</marquee>         Fin de balise

Ainsi, ce script:
<marquee bgcolor="yellow" behavior="scroll" direction="left" width="800px" height="18px" scrollamount="8" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
< strong > < i >Dans cet exemple le texte est en gras et en italique. Il va de droite à gauche disparaît et revient.< /i >< /strong >
</marquee>
Donnera:    ceci sur votre page

Amusez vous, faites des essais.
Laisser une marge ou des espaces entre les mots.
             Comme vous l'avez sûrement remarqué sur cette page des espaces sont mis entre les mots, des phrases sont en gras, soulignées et en italiques et il y a des marges sur certaines phrases.
Pour laisser un espace entre les mots il suffit d'ajouter esperluette puis nbsp; entre les mots.

Par exemple:
Je laisse un &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; espace &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ici.
Donnera sur votre page:
Je laisse un         espace        ici
On peux aussi créer une "div" et dans notre "CSS" on notera ceci.
         .espace
         {
         margin:50px;
         }

Et entre les balises "body"
Je laisse un < span class="espace" > espace < /span >< span class="espace" > ici < /span >
Donnera sur votre page:
Je laisse un espaceici.
Pour laisser une marge on écrira dans notre CSS (pour l'exemple j'en mets 3).
     .marge { margin-left:50px; }
     .marge1 { margin-left:100px; }
     .marge2 { margin-left:150px; }

Et entre les balises "body"
< span class="marge" > J'ai laissé une marge de 50 pixels.< /span > < br />
< span class="marge" > J'ai laissé une marge de 100 pixels.< /span > < br />
< span class="marge" > J'ai laissé une marge de 150 pixels.< /span > < br />
Donnera sur votre page:
J'ai laissé une marge de 50 pixels.
J'ai laissé une marge de 100 pixels.
J'ai laissé une marge de 150 pixels.
Maintenant, on va mettre une phrase de 14 pixels, en vert foncé, en gras, italique et soulignée.
N'oublions pas que le "HTML5" ne prend plus certaines balises et qu'il est conseillé de se servir de la feuille de style (CSS).

     .ma_div       /*Le nom de la div (vous mettez le nom que vous voulez)*/
          {
          font-size: 14px;       /*La taille du texte est de 14 pixels*/
          color: #006C0B;       /*La couleur du texte est vert foncé*/
          font-weight: bold;       /*Le texte est en gras*/
          font-style: italic;       /*Le texte est en italique*/
          text-decoration: underline;       /*Le texte est souligné*/
          }
Et entre les balises "body"
< span class="ma_div" >Mon texte est de couleur verte, il fait 14 pixels, il est en gras en italique, et il est souligné. </span>
Donnera sur votre page:
Mon texte est de couleur verte, il fait 14 pixels, il est en gras en italique, et il est souligné.
Insérer des liens.
Pour faire un lien, on se sert de ce qu'on utilise toujours pour coder du HTML : un élément.
Un simple élément avec un seul attribut et vous pourrez relier tout et n'importe quoi.
Un lien possède deux extrêmités, appelées ancres, et une direction. Le lien part de l'ancre « source » et pointe vers l'ancre « destination », qui peut représenter n'importe quelle ressource Web (par exemple, une image, une séquence vidéo, un extrait sonore, un programme, un document HTML, un élément au sein d'un document HTML, etc.).
L'élément « a » tient pour « anchor » (ancre) et l'attribut href qui est l'abréviation de « hypertext reference » qui indique où conduit le lien, habituellement à une adresse Internet ou à un nom de fichier.

<a href="le nom du fichier, de la page internet, de l'image etc"> Cliquez ici </a>

Par exemple: <a href="couleur_du_texte.html"> Retour à la page précédente</a >
Donnera sur votre page:      Retour à la page précédente     Lien pour l'exemple, non cliquable.

Ou alors: <a href="http://www.louetdom.fr"> Aller au site "louetdom"</a>
Donnera sur votre page:      Aller au site "louetdom"    Lien pour l'exemple, non cliquable.

Observer la différence entre ces deux liens. Ce ne sont pas les mêmes.
Aller au site "louetdom"    Lien pour l'exemple, non cliquable.
Aller au site "louetdom"    Lien pour l'exemple, non cliquable.
Rendre les liens plus gais.
Si vous désirez que tous les liens de votre site soient en gras, italiques, rouges, vert avec un fond jaune lorsqu'ils sont survolés par la souris comme celui-ci par exemple:   Retour à la page précédente  (lien pour l'exemple, non cliquable)  nous allons nous servir du "CSS".

Nous allons rajouter ce code
  en vert   dans notre "CSS" juste avant la fermeture de la balise < /style > .
< style type="text/css">
body
{
background-color: black;       /*Le fond de la page est noir*/
}
#corps
{
margin-top: 10px;
      /*Marge entre le navigateur et ma page*/
padding: 10px;       /*Marge entre la bordure et le texte*/
width:900px;       /*Largeur de ma page*/
margin: auto;       /*Ma page est centrée*/
border: 2px solid red;       /*Bordure rouge*/
background-color: #d7dada;       /*Le fond de ma page est gris*/
height:500px;       /*Hauteur de ma page*/
}
a   {
font-size:16px;       /*Les liens font 16 pixels*/
color:#A40005;       /*Les liens sont couleur brique*/
font-style: italic;       /*Les liens sont en italique*/
font-weight:bold;       /*Les liens sont en gras*/
}
a:hover  {       /* Au passage de la souris*/
background-color: #F4F455;       /*La couleur du fond des liens est jaune*/
color:#00933B;       /*La couleur du lien est verte*/
font-size:16px;       /*Les liens font 16 pixels*/
      }
Le code ci-dessous ne fonctionne pas avec tous les navigateurs. Personnelement, je ne le met pas. Libre à vous de le mettre ou pas.
a:visited {       /* Si le visiteur clique sur le lien */  
font-size:16px;       /* Il fera toujours 16 pixels */  
color:#F26100;       /* Sa couleur aura changé (ici elle sera orange)*/  
text-decoration:none;       /* Le lien ne sera plus souligné */  
}
< /style >
Tout ce qui se trouve entre /* et */ sont des commentaires.
Ceux-ci ne sont pas visibles dans votre page. Vous pouvez les mettre si vous le désirez, ils vous seront utiles par la suite.
Vous pouvez notez votre code sur 3 lignes comme ci-dessous, il n'y a pas de différences sauf pour mieux vous repérer.
            a:  {  font-size:16px; color:#A40005; font-style: italic; font-weight:bold;  }
            a:hover  {   background-color: #F4F455; color:#00933B; font-size:16px;  }
Le code ci-dessous ne fonctionne pas avec tous les navigateurs. Personnelement, je ne le met pas. Libre à vous de le mettre ou pas.
            a:visited   {   font-size:16px; color:#F26100; text-decoration:none;   }

Vous pouvez récupérer le code çi-dessous (avec les commentaires), changer les couleurs et la taille des liens à votre guise.

Ouvrir les liens dans une nouvelle page ou onglet.
Pour ouvrir les liens dans une nouvelle page ou onglet (tout dépend du navigateur que vous utiliser et de son paramétrage):
Il vous suffit d'ajouter "target="_bank".

<a href="le nom du fichier, de la page internet, de l'image etc" target="_bank"> Cliquez ici </a>

Par exemple: <a href="http://www.louetdom.fr" target="_bank"> Aller au site "louetdom"</a >
Donnera sur votre page:      Aller au site "louetdom"   Vous pouvez essayez le lien.

Maintenant, nous allons voir les images.
                Comment insérer une image, rendre une image cliquable, zoomer sur une image etc etc.
Pour commencer, ouvrons dans notre dossier un nouveau dossier que nous nommerons "images"
Moi, je viens de le faire pour l'exemple et à l'intérieur de ce dossier, j'y ai glissé 4 images qui se nomment:

chat.gif    et qui fait 800 par 600 pixels.
chat1.jpg    et qui fait 640 par 480 pixels.
chats2.jpg    et qui fait 300 par 225 pixels.
chats3.jpg    et qui fait 150 par 113 pixels (c'est celle-ci que l'on prendra en premier pour nos exemples).
On remarque que les extensions (jpg, gif) sont différentes.
En informatique, une extension de nom de fichier est un suffixe ajouté au nom d'un fichier pour identifier son format. Ainsi, on dira qu'un fichier nommé truc.txt a l'extension txt ou .txt.
Si vous mettez des images dans une page, ne choisissez pas des images trop lourdes car votre page pourrait mettre plus de temps pour se charger (servez-vous de "Photofiltre" pour changer les extensions ou réduire la taille de vos images) et les visiteurs peuvent ne pas attendre.

Donc, pour insérer une image on utilisera la balise "IMG" avec ses principaux attributs qui sont:
SRC:   Indique l'emplacement de l'image (il est obligatoire).
ALT:   Permet d'afficher un texte alternatif lorsque l'image ne s'affiche pas.
TITLE:   Permet d'afficher une infobulle lors du survol de l'image par le curseur.
WIDTH:   Permet de spécifier la largeur de l'image.
HEIGHT:   Permet de spécifier la hauteur de l'image.


EXEMPLE 1:
<img src="images/chat3.jpg" title="Mon chat fait des siennes!" width="150px" height="113px" alt="Désolé mais cette image a été retirée de la page."/>
Donnera cette image.
Désolé mais cette image a été retirée de la page.

EXEMPLE 2:
Il est inutile de marquer les attributs "width" et "height" car nous avons les mêmes valeurs que notre image. On les enlève:
<img src="images/chat3.jpg" title="Mon chat fait des siennes!" alt="Désolé mais cette image a été retirée de la page."/>
Donnera cette image.
Désolé mais cette image a été retirée de la page.

EXEMPLE 3:
On change les attributs "width" et "height" on va mettre 200 par 200.
<img src="images/chat3.jpg" width="200" height="200" title="Mon chat fait des siennes!" alt="Désolé mais cette image a été retirée de la page."/>
Donnera cette image.
Désolé mais cette image a été retirée de la page.

EXEMPLE 4:
Maintenant on va imaginer que l'on a marqué la mauvaise extension, ou que l'image est absente ou qu'elle ne soit pas dans le bon dossier etc etc (pour l'exemple on va changer l'extension "jpg" en "gif").
<img src="images/chat3.gif" width="200" height="200" title="Mon chat fait des siennes!" alt="Désolé mais cette image a été retirée de la page."/> < /a>
Donnera une image qui sera différente selon le navigateur que vous utilisez.

Désolé mais cette image a été retirée de la page. Ici avec Google Chrome.

Désolé mais cette image a été retirée de la page. Ici avec Internet Explorer.

Désolé mais cette image a été retirée de la page. Ici avec Firefox

Les images flottantes.
Nous l'avons remarqué ci-dessus le texte est positionné dessus et dessous l'image.
Dans cette rubrique nous allons positionner notre texte à coté de l'image (soit à gauche, soit à droite) pour cela nous allons encore nous servir de la "feuille de style" (CSS).
En langage html, la balise "Div" est très importante car elle permet d'introduire des éléments de type bloc. Elle permet de modifier dans son intégralité la structure d'une page web. Son utilisation est également liée à l'utilisation de feuilles de style en langage css.
Chaque terme permet de créer des propriétés CSS personnalisées, que vous pouvez appliquer à vos balises, mais il existe des différences entre une classe (.image_flottante_gauche) ici employée pour l'image flottante et un id (#corps) ici employé pour le corps de la page.
Un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page. Une classe peut caractériser plusieurs objets (identiques ou non).

Par exemple, il est possible d'avoir ce code :
<div class="image_flottante_gauche"></div>
<div class="image_flottante_gauche"></div>
Mais il n'est pas correct d'avoir ce code :
<div id="corps"></div>
<div id="corps"></div>
Par exemple ici dans ma page pour désigner les corps, j'ai mis:
<div id="corps">Le corps de ma page avec ses couleurs, son texte, ses images ect ect. </div>
<div id="corps1">Le corps de ma page avec ses couleurs, son texte, ses images ect ect. </div>
<div id="corps2">Le corps de ma page avec ses couleurs, son texte, ses images ect ect. </div>
En effet, l'id ne doit désigner qu'un seul objet du document. On peut bien sûr définir autant d'id que l'on veut dans la feuille de style, mais il faut qu'ils soient uniques dans la page html. La balise Div se place entre les balises <body> et </body>. Lors de son utilisation, elle entraîne un retour à la ligne.
Donnez un nom à votre "div" par exemple ".imageflottante" ou ".image_flottante" ou encore ".cequejeveux" peu importe.
Il faut éviter de mettre des majuscules, des accents, ou de laisser des espaces même après le point, seul l'underscore (tiret bas) est accepté.
Il faut que le nom que vous avez choisi soit le même qui figure dans votre fichier "HTML".


Image flottante à gauche.
                 Nous allons faire flotter notre image a gauche.
Je nomme ma div ".image_flottante_gauche" et dans mon fichier HTML j'ai mis "class="image_flottante_gauche"
Dans notre feuille de style nous allons ajouter ce code en vert avec les commentaires:

Ou ajouter ce code?    C'est simple allez voir ici
.image_flottante_gauche    /*Le nom de votre "div" */
{
float:left;
    /*l'image flottera à gauche du texte*/
margin-right:100px;     /*une marge à droite de l'image pour que le texte ne colle pas à l'image (ici nous avons éxagéré en mettant 100px)*/
}
On peut aussi, comme je l'ai dit plus haut, mettre le code comme ceci:
.image_flottante_gauche   {  float:left;   margin-right:100px;  }
Nous mettons ce code entre les les balises < body > et < /body >
< img src="images/chat3.jpg" class="image_flottante_gauche" title="Mon chat fait des siennes!" alt="Désolé mais cette image a été retirée de la page."/>

EXEMPLE:
< body >
< div id="corps" >
Le chat est un vertébré car il possède un squelette.<br />
Ce sont des mammifères car les femelles ont des mamelles comme le chien, le lapin, la souris pour allaiter leurs petits.<br />
<img src="images/chat3.jpg" class="image_flottante_gauche" title="Mon chat fait des siennes!" alt="Désolé mais cette image a été retirée de la page."/>
En plus, ils respirent avec des poumons. Le chat appartient à lafamille des félidés qui regroupe les grands et petits félins.<br />
Le chat habite dans une maison ou bien le chat est sauvage et il vit dans les villes ou les villages et les campagnes.<br />
Le chat qui vit dans une maison dort dans un panier ou dans le lit, un lit douillet, de préférence.<br />
Le chaton, lui aussi, dormira n'importe où, mais il aimera se pelotonner dans un lit chaud, douillet et bien à lui.<br />
Le chat sauvage vit partout où il peut trouver à manger. Chez nous, il n'y a plus de chats sauvages dans nos forêts. <br />
< / div >
< / body >
Donnera sur votre page.
Le chat est un vertébré car il possède un squelette.
Ce sont des mammifères car les femelles ont des mamelles comme le chien, le lapin, la souris pour allaiter leurs petits.
Désolé mais cette image a été retirée de la page. En plus, ils respirent avec des poumons. Le chat appartient à lafamille des félidés qui regroupe les grands et petits félins.
Le chat habite dans une maison ou bien le chat est sauvage et il vit dans les villes ou les villages et les campagnes.
Le chat qui vit dans une maison dort dans un panier ou dans le lit, un lit douillet, de préférence.
Le chaton, lui aussi, dormira n'importe où, mais il aimera se pelotonner dans un lit chaud, douillet et bien à lui.
Le chat sauvage vit partout où il peut trouver à manger. Chez nous, il n'y a plus de chats sauvages dans nos forêts.


On remarque que notre image est proche du cadre et nous pouvons mettre une marge plus importante.
Pour cela il suffit de rajouter ce code:    margin-left:50px;
.image_flottante_gauche    /*Le nom de votre "div" */
{
float:left;
    /*l'image flottera à gauche du texte*/
margin-right:100px;     /*une marge à droite de l'image pour que le texte ne colle pas à l'image (ici nous avons éxagéré en mettant 100px)*/
margin-left:50px;     /*une marge à gauche de l'image pour que celle-ci ne colle pas trop à la bordure (ici nous avons mis 50px)*/
}
Donnera sur votre page.
Le chat est un vertébré car il possède un squelette.
Ce sont des mammifères car les femelles ont des mamelles comme le chien, le lapin, la souris pour allaiter leurs petits.
Désolé mais cette image a été retirée de la page. En plus, ils respirent avec des poumons. Le chat appartient à lafamille des félidés qui regroupe les grands et petits félins.
Le chat habite dans une maison ou bien le chat est sauvage et il vit dans les villes ou les villages et les campagnes.
Le chat qui vit dans une maison dort dans un panier ou dans le lit, un lit douillet, de préférence.
Le chaton, lui aussi, dormira n'importe où, mais il aimera se pelotonner dans un lit chaud, douillet et bien à lui.
Le chat sauvage vit partout où il peut trouver à manger. Chez nous, il n'y a plus de chats sauvages dans nos forêts.


Image flottante à droite.
                 Nous allons faire flotter notre image a droite.
Je nomme ma div ".image_flottante_droite" et dans mon fichier HTML j'ai mis "class="image_flottante_droite"
Dans notre feuille de style nous allons ajouter ce code en vert avec les commentaires:

.image_flottante_droite    /*Le nom de votre "div" */
{
float:right;
    /*l'image flottera à droite du texte*/
margin-left:100px;     /*une marge à gauche de l'image pour que le texte ne colle pas à l'image (ici nous avons éxagéré en mettant 100px)*/
}
Nous mettons ce code entre les les balises < body > et < /body >.
< img src="images/chat3.jpg" class="image_flottante_droite" title="Mon chat fait des siennes!" alt="Désolé mais cette image a été retirée de la page." />

EXEMPLE:
< body >
< div id="corps" >
Le chat est un vertébré car il possède un squelette.<br />
Ce sont des mammifères car les femelles ont des mamelles comme le chien, le lapin, la souris pour allaiter leurs petits.<br />
< img src="images/chat3.jpg" class="image_flottante_droite" title="Mon chat fait des siennes!" alt="Désolé mais cette image a été retirée de la page." />
En plus, ils respirent avec des poumons. Le chat appartient à lafamille des félidés qui regroupe les grands et petitsfélins.<br />
Le chat habite dans une maison ou bien le chat est sauvage et il vit dans les villes ou les villages et les campagnes.<br />
Le chat qui vit dans une maison dort dans un panier ou dans le lit, un lit douillet, de préférence.<br />
Le chaton, lui aussi, dormira n'importe où, mais il aimera se pelotonner dans un lit chaud, douillet et bien à lui.<br />
Le chat sauvage vit partout où il peut trouver à manger. Chez nous, il n'y a plus de chats sauvages dans nos forêts. <br />
< / div">
< / body">
Donnera sur votre page.
Le chat est un vertébré car il possède un squelette.
Ce sont des mammifères car les femelles ont des mamelles comme le chien, le lapin, la souris pour allaiter leurs petits.
Désolé mais cette image a été retirée de la page. En plus,ils respirent avec des poumons. Le chat appartient à lafamille des félidés qui regroupe les grands et petitsfélins.
Le chat habite dans une maison ou bien le chat est sauvage et il vit dans les villes ou les villages et les campagnes.
Le chat qui vit dans une maison dort dans un panier ou dans le lit, un lit douillet, de préférence.
Le chaton, lui aussi, dormira n'importe où, mais il aimera se pelotonner dans un lit chaud, douillet et bien à lui.
Le chat sauvage vit partout où il peut trouver à manger. Chez nous, il n'y a plus de chats sauvages dans nos forêts.

On remarque que notre image est proche du cadre et nous pouvons mettre une marge plus importante.
Pour cela il suffit de rajouter ce code:    margin-right:50px;
.image_flottante_droite    /*Le nom de votre "div" */
{
float:right;
    /*l'image flottera à droite du texte*/
margin-left:100px;     /*une marge à gauche de l'image pour que le texte ne colle pas à l'image (ici nous avons éxagéré en mettant 100px)*/
}
margin-right:50px;     /*une marge à gauche de l'image pour que celle-ci ne colle pas trop à la bordure (ici nous avons mis 50px)*/
}
Donnera sur votre page.
Le chat est un vertébré car il possède un squelette.
Ce sont des mammifères car les femelles ont des mamelles comme le chien, le lapin, la souris pour allaiter leurs petits.
Désolé mais cette image a été retirée de la page. En plus,ils respirent avec des poumons. Le chat appartient à lafamille des félidés qui regroupe les grands et petits félins.
Le chat habite dans une maison ou bien le chat est sauvage et il vit dans les villes ou les villages et les campagnes.
Le chat qui vit dans une maison dort dans un panier ou dans le lit, un lit douillet, de préférence.
Le chaton, lui aussi, dormira n'importe où, mais il aimera se pelotonner dans un lit chaud, douillet et bien à lui.
Le chat sauvage vit partout où il peut trouver à manger. Chez nous, il n'y a plus de chats sauvages dans nos forêts.


Images de chaque coté du texte.
                 Nous allons faire flotter une image de chaque coté du texte.
.image_flottante_gauche    /*Le nom de votre "div" */
{
float:left;
    /*l'image flottera à gauche du texte*/
margin-right:10px;     /*une marge à droite de l'image pour que le texte ne colle pas à l'image*/
margin-left:50px;     /*une marge à gauche de l'image pour que celle-ci ne colle pas trop à la bordure (ici nous avons mis 50px)*/
}
.image_flottante_droite    /*Le nom de votre "div" */
{
float:right;
    /*l'image flottera à gauche du texte*/
margin-left:10px;     /*une marge à droite de l'image pour que le texte ne colle pas à l'image */
margin-right:50px;     /*une marge à gauche de l'image pour que celle-ci ne colle pas trop à la bordure (ici nous avons mis 50px)*/
}
EXEMPLE:
< body >
< div id="corps" >
Le chat est un vertébré car il possède un squelette.<br />
Ce sont des mammifères car les femelles ont des mamelles comme le chien, le lapin, la souris pour allaiter leurs petits.
< img src="images/chat3.jpg" class="image_flottante_gauche" title="Mon chat fait des siennes!" alt="Désolé mais cette image a été retirée de la page." />
< img src="images/chat4.jpg" class="image_flottante_droite" title="Mon chat fait des siennes!" alt="Désolé mais cette image a été retirée de la page." />
En plus, ils respirent avec des poumons. Le chat appartient à lafamille des félidés qui regroupe les grands et petitsfélins< br />
Le chat habite dans une maison ou bien le chat est sauvage et il vit dans les villes ou les villages et les campagnes.<br />
Le chat qui vit dans une maison dort dans un panier ou dans le lit, un lit douillet, de préférence.<br />
Le chaton, lui aussi, dormira n'importe où, mais il aimera se pelotonner dans un lit chaud, douillet et bien à lui.< br />
Le chat sauvage vit partout où il peut trouver à manger. Chez nous, il n'y a plus de chats sauvages dans nos forêts. < br />
< / div">
< / body">
Donnera sur votre page.
Le chat est un vertébré car il possède un squelette.
Ce sont des mammifères car les femelles ont des mamelles comme le chien, le lapin, la souris pour allaiter leurs petits. Désolé mais cette image a été retirée de la page. Désolé mais cette image a été retirée de la page. En plus,ils respirent avec des poumons. Le chat appartient à lafamille des félidés qui regroupe les grands et petits félins.
Le chat habite dans une maison ou bien le chat est sauvage et il vit dans les villes ou les villages et les campagnes.
Le chat qui vit dans une maison dort dans un panier ou dans le lit, un lit douillet, de préférence.
Le chaton, lui aussi, dormira n'importe où, mais il aimera se pelotonner dans un lit chaud, douillet et bien à lui. Le chat sauvage vit partout où il peut trouver à manger. Chez nous, il n'y a plus de chats sauvages dans nos forêts.


Image placée à un endroit précis.
                 Nous allons faire flotter une image à un endroit que nous aurons choisi comme le site à Sandra par exemple.
Dans notre feuille de style (CSS) on inscrit le code suivant:
.image_flottante_centre    /*Le nom de votre "div" */
{
position: relative;     /*l'image flottera à une position donnée*/
padding:10px;     /*10 pixels en dessous et dessus du texte ou d'une autre image (bien sûr, vous mettez votre dimension).*/
left: 350px;     /*Image placée à 350 pixels de la gauche de la bordure du corps (bien sûr, vous mettez votre dimension)*/
}
EXEMPLE:
< body >
< div id="corps" >
Le chat est un vertébré car il possède un squelette.<br />
Ce sont des mammifères car les femelles ont des mamelles comme le chien, le lapin, la souris pour allaiter leurs petits.
< img src="images/chat3.jpg" class="image_flottante_gauche" title="Mon chat fait des siennes!" alt="Désolé mais cette image a été retirée de la page." />
< img src="images/chat4.jpg" class="image_flottante_droite" title="Mon chat fait des siennes!" alt="Désolé mais cette image a été retirée de la page." />
En plus, ils respirent avec des poumons. Le chat appartient à lafamille des félidés qui regroupe les grands et petitsfélins< br />
Le chat habite dans une maison ou bien le chat est sauvage et il vit dans les villes ou les villages et les campagnes.<br />
Le chat qui vit dans une maison dort dans un panier ou dans le lit, un lit douillet, de préférence.<br />
< img src="images/chat4.jpg" class="image_flottante_centre" title="Mon chat fait des siennes!" alt="Désolé mais cette image a été retirée de la page." /> < br />
Le chaton, lui aussi, dormira n'importe où, mais il aimera se pelotonner dans un lit chaud, douillet et bien à lui.< br />
Le chat sauvage vit partout où il peut trouver à manger. Chez nous, il n'y a plus de chats sauvages dans nos forêts. < br />
< / div >
< / body >
Donne sur ma page.
Le chat est un vertébré car il possède un squelette.
Ce sont des mammifères car les femelles ont des mamelles comme le chien, le lapin, la souris pour allaiter leurs petits. Désolé mais cette image a été retirée de la page. Désolé mais cette image a été retirée de la page. En plus,ils respirent avec des poumons. Le chat appartient à lafamille des félidés qui regroupe les grands et petits félins.
Le chat habite dans une maison ou bien le chat est sauvage et il vit dans les villes ou les villages et les campagnes.
Le chat qui vit dans une maison dort dans un panier ou dans le lit, un lit douillet, de préférence.
Désolé mais cette image a été retirée de la page.
Le chaton, lui aussi, dormira n'importe où, mais il aimera se pelotonner dans un lit chaud, douillet et bien à lui.
Le chat sauvage vit partout où il peut trouver à manger. Chez nous, il n'y a plus de chats sauvages dans nos forêts.

Attention: les dimensions qui sont données sont celles de ma page.
Il est bien entendu que vous devez mettre les dimensions par rapport à votre page.


Les images cliquables.
                     Utiliser une image dans un lien.
L'utilisation d'une image comme étiquette dans un lien ne pose bien entendu aucun problème.
Nous avons vu dans les chapitres précédents comment faire un lien.
Nous sommes donc capable de faire un lien sur une image en imbriquant ses 2 balises.

On met d'abord le lien, ensuite l'image, sinon ça ne fonctionne pas.
Pour l'image flottante à gauche:
< a href="http://www.louetdom.fr">
<img src="chats3.jpg" class="image_flottante_gauche" title="Cliquez sur l'image" alt="Mon chat" border="0" />< /a >

Pour l'image flottante à droite:
<a href="images/chat.gif">
<img src="chats4.jpg" class="image_flottante_droite" title="Cliquez sur l'image" alt="Mon chat" border="0" />
< /a >

En cliquant sur l'image de gauche, vous serez ramené vers le site de "louetdom"
Si vous cliquez sur l'image de droite vous aurez l'aggrandissement de cette image.

Ce qui donnera sur votre page.

Mon chat
Mon chat En cliquant sur l'image de gauche, vous serez ramené vers le site de "louetdom".

Si vous cliquez sur l'image de droite vous aurez l'aggrandissement de cette image.




Les images cliquables par régions.
                     Nous avons  ici   ou  ici   un parfait exemple d'image cliquable par régions.
Sur le web on utilise fréquemment des images dites sensibles (ou cliquables) avec lesquelles il est possible d'obtenir différents effets lorsque certaines zones sont « sollicitées » par le curseur de la souris.
L'utilisation la plus courante est, sans doute, un lien dynamique vers une autre page web lorsqu'on clique sur une de ces zones sensibles.
Ce « filtre » permet de délimiter facilement la ou les zones sensibles souhaitées dans une image.
Les logiciels de création de sites web ont cette fonction en standard. Avec ce « filtre » de GIMP vous avez la possibilité de faire la même chose.
On va insérer le code que nous a donné le logiciel "Gimp" entre les balises
< body >  et  < / body >
<img src="images/mon_image.gif" width="300" height="300" border="0" usemap="#map" />
<map name="map">
<area shape="rect" coords="15,12,122,87" href="images/chat.gif" />
<area shape="rect" coords="138,97,290,184" href="http://www.louetdom.fr" />
<area shape="rect" coords="5,204,157,294" href="http://fr.wikipedia.org/wiki/Poitou-Charentes" />
</map>
On rajoute l'attribut "alt" et l'attribut "title":
Mais ce n'est pas obligatoire.

Bien sûr, vous mettez votre propre texte.
Sur le chat on ajoute l'attribut:
title="voir image de 800 par 600 pixels"
Et l'attribut:   alt="Photo de mon chat"
Sur l'image du site louetdom on ajoute l'attribut:
title="Aller au site louetdom"
Et l'attribut:   alt="image du site louetdom"
Sur l'image Wikipédia on ajoute l'attribut:
title="Wikipedia.Poitou-Charentes"
Et l'attribut:   alt="Poitou-Charentes"

Le passage de la souris sur l'image nous fera apparaitre le texte.
Voici, si nous le désirons, le texte à marquer entre les balises < body >  et  < / body >.
<img src="images/mon_image.gif" width="300" height="300" border="0" usemap="#map" />
<map name="map">
<area shape="rect" coords="15,12,122,87" title="voir image de 800 par 600 pixels" alt="Photo de mon chat" href="images/chat.gif" />
<area shape="rect" coords="138,97,290,184" title="Aller au site louetdom" alt="image du site louetdom" href="http://www.louetdom.fr" />
<area shape="rect" coords="5,204,157,294" title="Wikipedia.Poitou-Charentes" alt="Poitou-Charentes" href="http://fr.wikipedia.org/wiki/Poitou-Charentes" />
</map>
Mettre une image à la place d'une couleur en fond de page.
Dans la div #corps de notre "CSS" nous avons par exemple: background-color: blue;
Il nous est tout à fait possible de mettre une image à la place d'une couleur.
Toutefois, attention au poids de cette image. Ne choisissez pas une image trop lourde car votre page mettrait plus de temps à se charger.
Donc à la place de
background-color: blue; dans la div #corps de notre CSS nous allons mettre ce code:
     #corps      /*Cette balise concerne le corps de la page internet (la bordure rouge et ce qui est à l'intérieur de la bordure rouge) */
     {      /*On ouvre l'accolade*/
     padding: 10px;      /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
     border: 2px solid red;      /* Une bordure pour bien marquer les limites du corps ici rouge */
     background-image: url ("Le chemin complet de votre image.jpg ou .gif ou .png ect ect");      /* Une petite image de fond à la place de la couleur*/
     background-repeat: no-repeat;      /* Une petite image de fond qui se répètera ou pas ( celle ci ne se repetera pas )horizontalement en haut */
     }     /*On ferme l'accolade*/
Voici des exemples d'images avec le code.
Exemple 1.       La même image retravaillée avec "Photofiltre".
Attention:  L'image doit avoir la même dimension que le corps.
Corps width:900px; height:750px; image 800 X 505         Corps width:900px; height:300px; image 1267 X 800
Corps width:900px; height:750px; image 800 X 505 mais en ne mettant pas "background-repeat: no-repeat;"
On peux aussi mettre des images sur toute la page dans la section body de notre CSS.
Personnellement, je ne vous le conseille pas. Il faut trouver des images avec une haute résolution et la page qui va s'afficher sur votre PC ne sera pas la même que celle du visiteur.
     body      (Page du navigateur.)
     {      (on ouvre l'accolade "touche AltGr + la touche 4" touche ou il y a l'apostrophe.)
     background-image: url ("Le chemin complet de votre image.jpg ou .gif ou .png ect ect");      /* Une petite image de fond à la place de la couleur*/
      background-repeat: no-repeat;      /* Une petite image de fond qui se répètera ou pas ( celle ci ne se repetera pas )horizontalement en haut */
     }      (on referme l'accolade "touche AltGr + la touche +" touche ou il y a le + et = à gauche de la touche Retour.)
Voici des exemples d'images avec le code. La dimension du corps en hauteur a été changée pour l'exemple
Exemple 1.       Exemple 2.       Exemple 3.

Faire apparaître une image sur une autre image au survol de la souris.
                     Nous avons  ici   un exemple d'image apparaissant sur une autre image au survol de la souris.
Pour cela nous allons créer une "div" que nous nommerons ici "chats_flottants" ou le nom que vous choisissez peu importe.
Dans notre CSS on va mettre le code suivant (pour l'exemple, j'ai repris les chats).
Nous allons utiliser la propriété "display" avec la valeur "block"     Si vous désirez en savoir plus sur la propriété "display".
#chats_flottants
        {
       display:block;
       background-image: url('images/chat4.jpg');
       background-repeat: no-repeat ;
       width:231px;
       height:320px;
       }
#chats_flottants:hover
       {
       background-image: url('images/chat5.jpg');
       background-repeat: no-repeat ;
       }

Puis entre les balises< body > et < /body >
< body >
< div id="chats_flottants" class="imageflottante" > < /div>< br />
Passez le curseur de la souris sur l'image.< br />< br />< br />< br />< br />
< /body >
< /html >
Donnera sur votre page.

Passez le curseur de la souris sur l'image.




Vous avez remarqué tous les retours à la ligne < br /> que nous avons du mettre.
En en mettant qu'un seul ou même deux l'image aurait dépassé du corps de la page.
C'est une petite image, imaginez une image plus grande comme  celle-ci   avec juste un retour à la ligne.
Maintenant pour avoir une image correcte comme  celle-ci  il m'a fallu faire   17 retours à la ligne.

Heureusement, nous avons une solution. On va ajouter une "div" eh oui, encore.
Dans notre "CSS", nous allons rajouter:

       La propriété CSS clear permet d'indiquer qu'un élément doit venir se placer en dessous des éléments flottants qui le précèdent.
       .dessous       Vous mettez le nom que vous voulez, moi, j'ai mis "dessous".
        {
       clear: both;
       La propriété clear, et ses valeurs left, right, both et none
        }
Puis entre les balises< body > et < /body >
< body >
< div id="chats_flottants" class="imageflottante" > < /div>< br />
Passez le curseur de la souris sur l'image.
< div class="dessous" >< /div>
< /body >
< /html >
Ce qui donnera  la même image  mais sans les   sauts à la ligne.
Faire apparaître une image au survol d'un lien.

En cliquant sur les liens, vous serez amené vers le cri des animaux du site louetdom.
Lorsque le curseur de ma souris survolera le lien, l'image du lien, se placera dans ce carré.
Attention: faites des essais car comme je l'ai déjà dit la différence se fait d'un navigateur à l'autre et, même d'un système d'exploitation à l'autre.
Si vous avez 2 navigateurs, essayez et vous vous apercevrez d'une petite différence entre les 2.

Le cri de la panthère.
Le cri du coyote.
Le cri de l'épervier.
Pour réaliser cela j'ai mis ces codes suivants dans le CSS:
Remarquez la position des accolades entre les 4 codes. Rassurez-vous toutes ces positions sont valables.

Pour créer le carré ou se logera l'image:
#corps_animaux         /*Le nom de ma div */
       {
        float: right;        /*Mon carré flottera à droite du corps*/
        width: 280px;        /*Largeur du carré*/
        height:100px;        Hauteur du carré*/
        padding:5px;        Espace pour que le texte ne touche pas sur les bords*/
        background-color: #BDEFE9;        /* Couleur du font de la page ici vert très pale */
        margin-right: 10px;        /* Le carré flottera à 130px du bords droit*/
        margin-top:-30px;        /*Le carré sera à - 55px du haut*/
        }
Et pour les liens:
Pour l'image de la panthère:
a .lien_panthere  {
        display: block;
        width:0px;        /*A laisser*/
        position: absolute;
        margin-left:-5px;         /*Emplacement de la puce (ici juste devant le lien)*/
        margin-top:10px;         /*Emplacement de la puce en hauteur (ici juste derrière le lien)*/
        }
a:hover .lien_panthere   {
        margin-left:707px;        /*l'image sera à 707 pixels du bord gauche*/
        width:auto;        /*A laisser*/
        height:auto;        /*A laisser*/
        margin-top: -20px;        /*L'image sera à - 20 pixels du haut du cadre*/
        }
Pour l'image du coyote.
a .lien_coyote
       {  display: block;   width:0px;   position: absolute;   margin-top:10px;   margin-left:-5px;   margin-top:10px;   }

a:hover .lien_coyote
       {  margin-left:707px;  width:auto;  height:auto;  margin-top:-40px;  }

Pour l'image de l'épervier.
a .lien_epervier   {  display: block;  width:0px;  position: absolute;  margin-left:-5px;  margin-top:10px;  }
a:hover .lien_epervier    {   margin-left:707px;   width:auto;   height:auto;   margin-top:-60px;   }

Nous mettons ce code entre les les balises < body > et < /body >
< body >
< div id="corps" >
En cliquant sur les liens, vous serez amené vers le cri des animaux du site louetdom.< br />
< div id="corps_animaux"> Lorsque le curseur de ma souris survolera le lien, l'image du lien, se placera dans ce carré.< br />
Attention: faites des essais car comme je l'ai déjà dit la différence se fait d'un navigateur à l'autre et, même d'un système d'exploitation à l'autre.< br />
Si vous avez 2 navigateurs, essayez et vous vous apercevrez d'une petite différence entre les 2.< br />
< /div >
< a href="http://www.louetdom.fr/quiz/animaux/animaux1/panthere.html"><img src="images/panthere.jpg" alt="" class="lien_panthere"/>Le cri de la panthère.< /a >< br />
< a href="http://www.louetdom.fr/quiz/animaux/animaux1/coyote.html"><img src="images/coyote.jpg" alt="" class="lien_coyote"/>Le cri du coyote.< /a >< br />
< a href="http://www.louetdom.fr/quiz/animaux/animaux1/epervier.html"><img src="images/epervier.jpg" alt="" class="lien_epervier"/>Le cri de l'épervier.< /a >< br />
< /div >
< /body >
< /html >

Les images zoomables.
               Nous avons plusieurs façons de zoomer sur les images. En HTML et en JavaScript.
Sur cette page on va se servir du html, pour le Javascript, nous verrons sur une autre page.
Dans notre CSS on note le code suivant:

   .zoom {
          height:auto;        /* La hauteur de la div sera automatique*/
          }
   .zoom img {
          width:150px;        /* largeur de l'image insérée */
          height:113px;         /* hauteur de l'image insérée */
          cursor:pointer;         /* Le curseur se changera en main dès qu'il sera sur l'image */
          }
Mettre la taille de l'image normale sinon le zoom sera flou ici l'image zoomée fait 450 par 338 mais j'ai mis une taille plus petite.
   .zoom img:hover {
          width:300px; /* largeur de l'image zoomée */
          height:226px; /* hauteur de l'image zoomée */
          }
   .dessous    {
          clear: both;
       La propriété clear, et ses valeurs left, right, both et none
        }
Nous mettons ce code entre les les balises < body > et < /body >
< div class="zoom" >
< img src="images/chats3.jpg"class="imageflottante" alt="Désolé mais cette image a été retirée de la page." title="Mon chat fait des siennes" /> < /div >

Ce sont des mammifères car les femelles ont des mamelles comme le chien, le lapin, la souris pour allaiter leurs petits.< br />
En plus,ils respirent avec des poumons. Le chat appartient à lafamille des félidés qui regroupe les grands et petits félins.< br />
Le chat habite dans une maison ou bien le chat est sauvage et il vit dans les villes ou les villages et les campagnes.< br />
Le chat qui vit dans une maison dort dans un panier ou dans le lit, un lit douillet, de préférence.< br />
Le chaton, lui aussi, dormira n'importe où, mais il aimera se pelotonner dans un lit chaud, douillet et bien à lui.< br />
Le chat sauvage vit partout où il peut trouver à manger. Chez nous, il n'y a plus de chats sauvages dans nos forêts.< br />
< div class="dessous" > < /div>
Donnera sur votre page sans rajouter la div "dessous":
Désolé mais cette image a été retirée de la page.
Ce sont des mammifères car les femelles ont des mamelles comme le chien, le lapin, la souris pour allaiter leurs petits.
En plus,ils respirent avec des poumons. Le chat appartient à lafamille des félidés qui regroupe les grands et petits félins.
Le chat habite dans une maison ou bien le chat est sauvage et il vit dans les villes ou les villages et les campagnes.
Le chat qui vit dans une maison dort dans un panier ou dans le lit, un lit douillet, de préférence.
Le chaton, lui aussi, dormira n'importe où, mais il aimera se pelotonner dans un lit chaud, douillet et bien à lui.
Le chat sauvage vit partout où il peut trouver à manger. Chez nous, il n'y a plus de chats sauvages dans nos forêts.

Si on ne met pas la div"dessous" comme on le remarque l'image zoomée sort du cadre.
En rajoutant la div "dessous" le cadre suit la taille de l'image:

Désolé mais cette image a été retirée de la page.
Ce sont des mammifères car les femelles ont des mamelles comme le chien, le lapin, la souris pour allaiter leurs petits.
En plus,ils respirent avec des poumons. Le chat appartient à lafamille des félidés qui regroupe les grands et petits félins.
Le chat habite dans une maison ou bien le chat est sauvage et il vit dans les villes ou les villages et les campagnes.
Le chat qui vit dans une maison dort dans un panier ou dans le lit, un lit douillet, de préférence.
Le chaton, lui aussi, dormira n'importe où, mais il aimera se pelotonner dans un lit chaud, douillet et bien à lui.
Le chat sauvage vit partout où il peut trouver à manger. Chez nous, il n'y a plus de chats sauvages dans nos forêts.


                                      Et voila vous êtes prêt pour faire votre première page.