HTML .. le Langage des Navigateurs.. 

INTERNET .. Construction de Pages WEB       Insertion des IMAGES [Page_2]

 · 1er cas: l’image se trouve dans le même dossier que le fichier HTML.
<img src=« pic1.jpg »>

· 2ème cas : l’image se trouve dans un autre dossier :
 <img src=« ../../pic2.gif »>  Attention, comme sous Unix c’est le slash qui est utilisé.
     Là on est remonté de 2 répertoires pour trouver l’image.
· 2ème cas(bis): avec un chemin absolu ..attention à la syntaxe ::
<img src=« file://localhost/c:/images/pic3.jpg »>

<img src=« image.jpg » align=center>  comme pour les textes ..!!  ..left, center ou right
<center><img src=« picture.gif »></center> nouvelle balise CENTER .. à refermer après usage !

Si l’on définit une hauteur en pixels , l’image apparaîtra avec cette hauteur et sa largeur sera recalculée par le Navigateur afin de conserver les proportions de l’image.
Il en est de même si l’on définit la largeur ..ce sera la hauteur qui sera recalculée afin, toujours, de conserver ses proportions.. Par exemple:

<img src=« photo.jpg » align=center height=60>
<img src=« Java.gif » width=85>

<img src=« PICTO.GIF » width=60 height=80>

Vous avez acquis suffisamment d’Informations concernant les Textes et les Images utilisables au sein d’une Page WEB pour bénéficier d’un Exercice récapitulatif :

• Ecrire un listing HTML permettant de créer une Page WEB resemblant le plus possible à celle-là

.

Il est possible de ménager un espace Horizontal et Vertical entre une Image et du Texte tout en alignant l’Image.
Par exemple:

<img src=« IMA1.GIF » align=right  hspace=20>  le texte sera aligné sur la gauche de l’image
       séparé de l’image dans le sens horizontal par 20 pixels.
<img src=« IMA2.JPG » align=left vspace=30>    le texte sera aligné sur la droite de l’image
       séparé de l’image dans le sens vertical par 30 pixels.
<img src=« IMA3.GIF » align=bottom>     le texte sera aligné sur le bas de l’image
<img src=« IMA3.GIF » align=middle>     le texte sera aligné à mi-hauteur de l’image
<img src=« IMA3.GIF » align=top>          le texte sera aligné sur le haut de l’image

Nous voici arrivés à l’étude de la composante fondamentale d’une Page WEB : Les Liens ou HyperLiens.
2 grands type de Liens :

• · Lien externe ( vers d’autres Pages WEB  )
• · Lien interne ( au sein d’une même Page ).

• Le Lien externe ...sa Syntaxe de Base est:

<a href=« PROG0.HTML »>Accroche-toi à mon Exo</a>
Ici « PROG0.HTML  » sera le nom de la Page vers laquelle on veut sauter.
Et Accroche-toi à mon Exo sera le texte de notre Page au-dessus duquel apparaîtra la main lorsque la souris le survolera . Alors en cliquant nous déclencherons le saut.

ou <a HREF=« ../exohtml/PROG0.html »>Saute</a>
Chemin définissable comme toujours..!

ou  <a href=« http://www.yahoo.com/ »>Appel du Moteur de recherche</a>
 ici le saut s’effectue vers une adresse URL du réseau ...même syntaxe .

ou  <a href=« mailto:marco@infonie.fr »>Cliquez ici pour m’envoyer un Message</a>

ou <a href=« file://www.netscape.com/bidon.exe »>Clic pour Téléchargement</a>
 file ou ftp pour Télécharger des fichiers n’étant pas des fichiers HTML.

• Le Lien interne ou local :

 <a name=« cible1 »>Ceci est une cible ( ancre )</a>

 <a href = « #cible1 »>Saute à l’ancre dans ce même Document</a>
 cible1 est le nom que nous avons choisi précédemment avec a name N’oubliez pas le  # ..!.

Il est possible de sauter à une ancre définie dans un autre document HTML :

  <a href=« ../exohtml/exo1.html#cible2>Saut vers une ancre située dans une autre page</a>
 Attention..n’oubliez pas le  #  ..!

 <a href=« http://www.marcobolo.com/bid.html#anc1 »>Cliquez ici pour la suite..</a>
 Attention..encore une fois ! ne pas oublier le # ..!

 <a href=« page2.html »><img src=« Hyperim.gif »  width=100></a>
 La balise  img  est située à l’intérieur de la balise   a  donc cette Image devient un Hyperlien !

<a href=« page1.html »>
<img src=« ima1.jpg » width=80>
<img src=« ima8.gif » width=80>
</a>

Les Listes sont très utilisées dans les Pages Web afin de proposer plusieurs choix.
Il est possible de faire précéder chaque ligne d’option d’une Liste par une Puce ou un Numéro ou une lettre ..etc..
Par exemple, voici une liste d’options utilisant la Puce.

• · Option n°1
• · Option n°2
• · Option n°3

<ul>                            la balise UL ouvre la liste
<li>Option n°1</li>    la balise LI ouvre un élément de la Liste
<li>Option n°2</li>
<li>Option n°3</li>
</ul>

1. Option n°1
2. Option n°2
3. Option n°3

<ol>    le Tag  OL  ouvre la liste
<li>Option n°1</li>
<li>Option n°2</li>
<li>Option n°3</li>
 </ol>

<ol type=I>           le Tag  OL  ouvre la liste mais l’attribut I  précise ch.Romains.
<li>Option n°1</li>
<li>Option n°2</li>
<li>Option n°3</li>
 </ol>

<ol type=A>           le Tag  OL  ouvre la liste mais l’attribut A  précise Lettres.
<li>Option n°1</li>
<li>Option n°2</li>
<li>Option n°3</li>
 </ol>

<ul start =5>               le Tag  uL possède l‘attribut Start = x
<li>Option n°5</li>
<li>Option n°6</li>
<li>Option n°7</li>
 </ul>

<ol type=A start=3>
<li>Option C</li>
<li>Option D</li>
<li>Option E</li>
 </ol>

<ol >
<li>Option C</li>
<a href=« page2.html »>  on ouvre le Tag de Lien
<li>Option D</li>
</a>                                    on referme le Tag de Lien
<li>Option E</li>
 </ol>

Ecrivez un nouveau listing HTML appelé : Liste_Lien.html qui permettra d’obtenir une Page Web comprenant:
 

• Une Liste de 3 Options formant les 3 liens suivants :
• saut vers votre 1ère page HTML
• saut vers votre 2ème Page HTML
• saut vers une Ancre située tout en bas de votre 2ème Page HTML ( cette ancre étant en fait constituée par une Image ).
• La 2ème Option comporte 3 sous/options ( a,b,c)..trouvez comment les imbriquer .

Le Tableau est encore plus utile que la Liste car il permet de structurer les informations présentées en lignes et en colonnes.

Conseil: Testez votre travail tout en apprenant ... IEXPLORER vous permet de tester votre page en modifiant votre  source ( menu Affichage..Source )
Donc, bâtissez un listing très simple pour ces expérimentations ..!
 

<table>                                le Tag  Table annonce un Tableau
 <tr>                                    le Tag TR ouvre une rangée (ROW)
     <th>Colonne n°1</th>      le Tag TH ouvre un texte d’ en-tête de colonne (Head).
     <th>Colonne n°2</th>
     <th>Colonne n°3</th>
 </tr>                                    ce qui termine cette 1ère rangée..
 <tr>                                    le Tag TR ouvre une autre rangée (ROW)
    <td>Données=123</td>  le Tag TD ouvre un texte de Données (Data ).
    <td>456=Données</td>
    <td>7 8 9 10 pour terminer</td>
 </tr>                                ce qui termine cette 2ème rangée..
 </table>

Vous pouvez border ce tableau ..et avec des filets en 3d  ( s’il vous plait ) grâce à:

 <table border>

 <table border=12>          Ce qui détermine l’épaisseur de la bordure extérieure.

 <table border=12 cellspacing=7>

 <table width=60% height=40%>

 <table width=600 height=240>

Conseil:  Continuez à expérimenter au fur et à mesure toutes ces syntaxes .

Pour définir l’espace minimum en Pixels entre les bords de cellules et leur contenu:

<table border=3 cellpadding=10> Il y aura 10 pixels de séparation entre les bords de cellules et leurs contenus

• Il est possible définir globalement les couleurs du tableau :

 <table border=12 bordercolor=blue bgcolor=yellow>
Bordercolor est un attribut qui n'est pas reconnu par Netscape ...( IExplorer l'a créé ..!)

• Il est possible définir la couleur de fond d’une cellule ou d’une rangée :

 <td bgcolor=red>     cette cellule aura la couleur de fond rouge
 <tr bgcolor=gray>   cette rangée aura la couleur de fond de toutes ses cellules gris.

• Il est possible placer un Titre au-dessus ou au-dessous du Tableau :

 <table>           la balise caption est placée après la balise table .
 <caption valign=top>C’est mon Tablo le plus Booo ! </caption>
 Le titre sera juste au-dessus du Tableau et centré horizontalement.

 <caption valign=bottom align=left> Le titre est sous le Tableau et à gauche..
 valign accepte : top et bottom .        align accepte : left, center, right.

• · Il est possible de faire courir un texte à côté du Tableau ..la syntaxe est un peu lourde ,mais ça marche!

 <table width=60% align=left>  Le Tableau sera aligné à gauche et sa largeurde 60%

 </table>Exemple d’unTexte situé à droite du tableau<br clear=all>

• Les Tags th et td  permettent les attributs d’alignement align=left ou center ou right Ce qui permet d’aligner le contenu des cellules indépendemment les unes des autres. Par exemple:

 <th align=left>    ou   <td align=right>

Le conseil habituel:  Continuez à expérimenter au fur et à mesure toutes ces syntaxes .

Les fonctionnalités décrites ci-après  ne fonctionnent pas forcément avec n’importe quel Navigateur ..Elles sont implémentées dans HTML 4.0 ..donc les Navigateurs seront bientôt tous en mesure de les exploiter. IEXPLORER  les exploite  déja aujourd’hui (dans sa version 3.2).

•  Il est possible de définir la hauteur d’une rangée ou la largeur d’une colonne en pourcentage des dimensions du Tableau..A savoir que toutes les cellules d’une rangée auront la même hauteur et que toutes les cellules d’une colonne auront la même largeur..

•  Donc il suffit de définir hauteur d’une cellule d’une rangée pour que toutes le soient.

 Et il suffit de définir la largeur d’une cellule d’une colonne pour que toutes le soient.
<td width=50%>Données123</td>
<tr height=50%>

•  Pour définir ces dimensions en pixels ( valeurs absolues ) le principe est le même :
 <th width=120>
 <th height=32>
 <td width=100>
 
•  Les possibilités d’alignement du contenu des cellules sont multiples :

 <th valign=middle>  Le texte de la cellule de titre est centré verticalement ( par défaut)
 <td valign=top>       Le texte de la cellule de données est aligné sur le Haut
 etc....

• Fusion de colonnes:

 <th colspan=3>  Lie les 3 cellules (colonnes d’une même rangée) de l’en-tête.
 <td colspan=3>  Lie les 2 premières  cellules (colonnes d’une même rangée) de Données.

• Fusion de rangées :

 <th rowspan=2>  Lie les 2 premières  cellules (rangées d’une même colonne) de l’en-tête.
 <td rowspan=3>  Lie les 3 premières cellules (rangées d’une même colonne) de Données.

  Ecrire un Listing HTML permettant d’obtenir une page HTML telle que ci-dessous ( bien entendu les images seront
  celles que vous aurez choisies ..!
  Attention..vous remarquerez que le Tableau comporte 2 liens :

• l’un utilisant une Image ( HyperLien ) dans une cellule.
• l’autre un Texte de cellule