Onwebcreations.Net  
Onwebcreations.Net
 
Programmation
Services Gratuits
Codes Sources
Divertissements
   

  Les outils avancés de mise en page HTML Haut de page

 


  Les tableaux Haut de page

Pour disposer en toute liberté vos éléments au sein d'un document HTML, et garantir un affichage correct de votre mise en page, vous aurez systématiquement recourt aux tableaux. Des tableaux dans des tableaux, des fusions de cellules visibles, ou invisibles, cet outil est très souple, et d'une efficacité redoutable.

Comme nous l'avions déjà évoqué dans les généralités sur le document HTML, ce langage consiste à coder une mise en page en 2 dimensions de façon linéaire, c'est à dire en ligne de code HTML de dimension 1. Un tableau, nécessairement en 2 dimensions doit alors être réduit à la dimension 1 dans le codage HTML. Une balise nommée <table></table> code respectivement pour le début et la fin d'un tableau. Une autre balise s'imbrique dans <table></table> pour coder les débuts et fins de lignes du tableau. Cette balise se nomme <tr></tr>. Enfin, une balise s'imbrique une nouvelle fois dans <tr></tr>, pour coder les débuts et fins de cellules. Il s'agit de <td></td>. Les illustrations ci dessous illustrent ce codage.

 


Le codage HTML de dimension 1 d'un tableau en 2 dimensions

 


Les indentations des balises aident la compréhension du code HTML

 


Le même tableau, sans indentations du code HTML.
Nettement moins lisible !


 

Les retours à la ligne, les retraits ou indentations n'ont aucune influence sur le résultat final de la mise en page HTML. Et pour cause, nous sommes en dimension 1. Les deux dernières illustrations de codes HTML provoquent l'affichage d'un tableau strictement identique, seule la disposition du code HTML varie, par l'ajout de retours à la ligne, et d'indentations. Ceci est purement destiné à améliorer la compréhension du code pour le programmeur. L'indentation consiste à retourner à la ligne, en insérant un retrait de longueur croissante, à chaque imbrication d'une nouvelle balise HTML. Ceci aide à visualiser la portée des balises ouvertes, et vérifier ainsi leurs fermetures respectives. Lors d'une fermeture de balise, vous diminuez votre indentation d'un niveau.

D'autre part, les indentations facilitent la correction d'un problème d'affichage lié à un oubli de fermeture de balise par exemple, qui est une erreur très courante. Une bonne habitude consiste à écrire la balise de fermeture systématiquement après l'ouverture d'une balise.

Notez cependant que la balise </td> de notre tableau HTML précédent ne respecte pas la règle de l'indentation. Il devrait être au même niveau de retrait que son homologue d'ouverture <td>. Ceci est une liberté que vous pouvez prendre, le but étant d'améliorer au maximum la lisibilité et de la compréhension visuelle instantanée de votre codage HTML.

Cette règle très simple de l'indentation est générale à tous les langages de programmation informatique. L'indentation est une convention adoptée par tous les programmeurs et dont il faut avoir le réflexe le plus tôt possible. Ici, vous manipulez les indentations avec des balises HTML sur un exemple relativement simple. Il en va de même pour les programmes beaucoup plus complexes.

Un très grand nombre de propriétés peuvent être appliquées sur un tableau. Les propriétés de <table> s'appliquent sur l'ensemble du tableau, tandis que les propriétés de <td> s'appliquent uniquement sur la cellule concernée.

 


  Propriétés de la balise TABLE Haut de page

Propriétés de <table>
Propriété Type de valeur Description
border pixels Largeur des bordures
cellpadding pixels Marge intérieur des cellules
cellspacing pixels Marge entre les cellules
bordercolor Couleur hexadécimale ou
nom anglais (blue, green, red, etc..)
Couleur des bordures du tableau
width pixels / pourcentage (%) Largeur du tableau, fixée soit par une valeur absolue en pixels, soit par une proportion en pourcentages en rapport avec la largeur de la fenêtre du navigateur.
height pixels / pourcentages (%) Hauteur du tableau. Ce paramètre est optionnel.
bgcolor Couleur hexadécimale ou
nom anglais (blue, green, red, etc..)
Couleur d'arrière plan du tableau
background Chemin relatif ou absolu d'une image Intègre un motif en tant qu'arrière plan du tableau

 


  Propriétés de la balise TD Haut de page

Propriétés de <td>
Propriété Type de valeur Description
width pixels / pourcentage (%) Largeur de la cellule, fixée soit par une valeur absolue en pixels, soit par une proportion en pourcentages en rapport avec la largeur du tableau. Ce paramètre est optionnel.
height pixels / pourcentages (%) Hauteur du tableau. Ce paramètre est optionnel.
bgcolor Couleur hexadécimale ou
nom anglais (blue, green, red, etc..)
Couleur d'arrière plan de la cellule.
background Chemin relatif ou absolu d'une image Intègre un motif en tant qu'arrière plan de la cellule.
align left / center / right / justify Alignement horizontal du contenu de la cellule.
valign top / middle / bottom Alignement vertical du contenu de la cellule. ( top = haut, middle = milieu, bottom = bas);

 

 

Exemple :

cellule 1. Texte par défaut pour mettre en évidence l'alignement du contenu de cette cellule. cellule 2. Texte par défaut pour mettre en évidence l'alignement du contenu de cette cellule.
cellule 3. Texte par défaut pour mettre en évidence l'alignement du contenu de cette cellule. cellule 4. Texte par défaut pour mettre en évidence l'alignement du contenu de cette cellule.

Dont voici le code HTML :

<div align="center">
<table border="1" cellpadding="4" cellspacing="4" bordercolor="#c0c0c0" width="60%" height="293">

  <tr>
    <td width="33%" height="126" align="justify" valign="top">
    <b>cellule <font size="4">1</font>.</b> Texte par défaut 
    pour mettre en évidence l'alignement du contenu de cette cellule.</td>

    <td width="67%" height="126" align="right">
    <b>cellule <font size="4">2</font>.</b> Texte par défaut 
    pour mettre en évidence l'alignement du contenu de cette cellule.</td>
  </tr>


  <tr>
    <td width="33%" height="139" align="left" valign="bottom">
    <b>cellule <font size="4">3</font>.</b> Texte par défaut 
    pour mettre en évidence l'alignement du contenu de cette cellule.</td>

    <td width="67%" height="139" align="center" valign="top">
    <b>cellule <font size="4">4</font>.</b> Texte par défaut 
    pour mettre en évidence l'alignement du contenu de cette cellule.</td>
  </tr>

</table>
</div>




  Fusion de cellules verticales Haut de page

 

Fusionner les cellules verticalement correspond à transformer N cellules en une seule cellule. Il s'agit aussi d'une fusion de N lignes au sein d'une colonne. La balise d'ouverture d'une cellule dans le codage HTML est <td>. Pour indiquer qu'il s'agit d'une cellule fusionnée, ajoutez une propriété nommée rowspan, qui reçoit pour valeur N, le nombre de lignes fusionnées. Les illustrations suivantes vont vous aider à y voir plus clair.

 


La cellule 3 a disparu

 


Le codage HTML d'une fusion de cellules verticales

 

La cellule 3 a bel et bien disparu et appartient désormais à la cellule 1. Ainsi, nous retrouvons le contenu de la cellule 1 en ligne 1. Quant à la ligne 2, il n'y a plus qu'une seule cellule à définir, la cellule 3 n'existant plus.

 


  Fusion de cellules horizontales Haut de page

Fusionner les cellules horizontalement correspond à transformer N cellules en une seule cellule. Il s'agit aussi d'une fusion de N colonnes au sein d'une ligne. La balise d'ouverture d'une cellule dans le codage HTML est <td>. Pour indiquer qu'il s'agit d'une cellule fusionnée, ajoutez une propriété nommée colspan, qui reçoit pour valeur N, le nombre de colonnes fusionnées. Les illustrations suivantes vont vous aider à y voir plus clair.

 


La cellule 2 a disparu

 


Le codage HTML d'une fusion de cellules horizontales

 

La cellule 2 a bel et bien disparu et appartient désormais à la cellule 1. Ainsi, la ligne 1 ne contient qu'une seule cellule à définir. La ligne 2 reste inchangée.


  Les cadres ou frames Haut de page

Il s'agit d'un découpage de la fenêtre du navigateur en plusieurs fenêtres intégrées et indépendantes les unes des autres.

Exemple de frames.

Télécharger l'exemple (ZIP) - ouvrez ex1_INDEX.htm

Pour examiner le codage HTML de la page supportant la structure de frames, cliquez sur le bouton Affichage, puis selectionnez Source dans le menu contextuel sous MS Internet Explorer. Pour visualiser le codage HTML des pages Web intégrée à la structure de frames, faites un clic droit sur l'une des frames, puis Afficher la source. Vous pouvez par ailleurs renommer les fichiers par l'extension .txt ou les ouvrir à l'aide de Bloc Notes de MS Windows.

Vous constaterez que la page supportant la structure de frames (ex1_INDEX.htm) ne contient pas de <body>. La structure fait appel à deux autres pages externes. Ces pages sont affichées sur une seule et même fenêtre.

De manière analogue aux tableaux, la balise <frameset></frameset> code respectivement pour le début et la fin d'une structure de frames. La balise <frame> appelle les pages externes. Voici le codage HTML de la structure de frames de notre exemple.

<html>
<head>
<title> Exemple de frames </title>
</head>
<frameset cols="200,*">
<frame name="left" src="ex1_left.htm">
<frame name="right" src="ex1_right.htm">
</frameset>
<noframes>
Message si le navigateur ne supporte pas les frames </noframes>
</html>

Il est théoriquement possible d'imbriquer à l'infinie des structures de frames, c'est à dire créer des subdivisions dans les cadres de la manière suivante.

  <frameset rows="200,*">

    <frame name="top" src="ex2_top.htm">

    <frameset cols="35%, *"> <frame name="left" src="ex2_left.htm"> <frame name="right" src="ex2_right.htm"> </frameset>
  </frameset>

Exemple de subdivisions de structures de frames.

Télécharger l'exemple (ZIP) - ouvrez ex2_INDEX.htm

 


  Propriétés de la balise FRAMESET Haut de page

Propriétés de <frameset>
Propriété Type de valeur Description
FRAMEBORDER yes / no Afficher ou masquer la bordure de séparation entres les frames.
FRAMESPACING pixels Définir l'espacement entre les frames.
BORDER pixels Largeur de la bordure de séparation.

 


  Propriétés de la balise FRAME Haut de page

Propriétés de <frame>
Propriété Type de valeur Description
SCROLLING yes / no Afficher ou masquer les ascenseurs de défilement.
MARGINWIDTH pixels Marge intérieure de la frame sur les cotés verticaux.
MARGINHEIGHT pixels Marge intérieure de la frame sur les cotés horizontaux.
FRAMEBORDER yes / no Afficher ou masquer la bordure de séparation de la frame.
NORESIZE   La présence de ce paramètre fige les dimensions de la frame, et rend impossible le re-dimensionnement  par le visiteur.

 

Voir un exemple mettant en application ces propriétés.

Télécharger l'exemple (ZIP) - ouvrez ex3_INDEX.htm

 

 

 
    Haut de page
© Onwebcreations.Net : Programmation & Services Internet
Accessible aussi par : Services-Gratuits-Webmasters.com
Contacter le suppport technique
Internaute(s) actuellement sur le site.