|
Brûlons les étapes et passons directement à la mise en page.
Ce que j'appelle mise en page c'est tout simplement installer les éléments et maitriser (tant que possible) leur position sur la page html.
On peut s'y prendre de plusieurs façons, la plus simple est d'écrire un texte, éventuellement l'illustrer, sans se soucier de l'aspect, la lecture se faisant de gauche à droite et de haut en bas. Pas très esthétique, ni très efficace!
Il existe une balise qui peut s'avérer assez utile pour l'insertion rapide de texte, c'est :
<PRE> ..... </PRE>
Le texte qui sera inséré dans ctte balise sera affiché tel quel, avec les retour à la ligne et les alignements réalisés par des espaces.
On pourra toutefois ajouter d'autres commandes et options html pour peaufiner son aspect final.
essayez avec l'exemple de la "Page 2", installer la balise <PRE> à la ligne 6 et insérer y un texte, sans oublier de refermer la balise avec </PRE>
Les tableaux
Les pages que vous êtes en train de lire sont toutes réalisées en tableau, plus souple d'emploi pour organiser le travail de mise en page.
La gestion d'un tableau va se faire par cellules en lignes et en colonnes, indépendantes les unes des autres quant à leur contenu. Les paramètres d'une cellule n'agira pas sur une autre.
Pour déclarer un tableau : <TABLE>
Ensuite il faut déclarer le début de la ligne : <TR>
puis la première cellule (ou colonne) : <TD>
A partir de ce moment tout ce qui sera saisi sera validé pour cette cellule du tableau.
Pour passr à la colonne suivante sur la même ligne : </TD><TD>
Et on continu comme celà jusqu'à la fin de la ligne : </TD></TR>
A ce moment, soit on créé une nouvelle ligne :<TR><TD> et l'on continu ou alors on arrête en refermant le tableau : </TABLE>
Un bon dessin vaut mieux qu'une explication pour comprendre et vous montrer l'utilité d'un tableau.
J'espère qu'avec cet exemple ci contre je vous donnerai l'envie de faire plein de tableaux.
Pour en savoir plus, n'hésitez pas à consulter les sites qui donnent des cours de html (ex: l'altruiste.com) car ceci n'est qu'un tout petit aperçu. Le but étant de vous faire toucher ce langage, qui, en finale, n'est pas très compliqué.
Rappel : pour essayer l'exemple, soit copier le le à l'aide d'un éditeur de texte ou alors copier/coller le; puis sauvegarder avec l'extension .html
|
|
Et comme image prenons un petit exemple qui va servir de travaux pratiques.
Pour avancer un peu plus dans la compréhension et les avantages des tableaux je vais utiliser quelques options insérées avec les balises :
Border=0/1 pour voir les bordures du tableau (=1 affichage 1 pixel; =0 pas de bordures)
Width=X ou "X" sera une valeur en nombre de pixels (ou en pourcentage%) pour donner la largeur d'une cellule ou d'un tableau
Height=Y ou "Y" sera une valeur en nombre de pixels (ou en pourcentage%) pour donner la hauteur d'une cellule ou d'un tableau
align=left/right/center simplement pour aligner horizontalement le contenu d'une cellule (gauche, droit, centre
valign=middle/top/bottom pour l'alignement vertical (milieu, haut ou bas)
Avec ce minimum on va pouvoir réaliser une petite présentation en tableau.
<html>
<title>Mon premier tableau</title>
<body bgcolor=#CCCCCC text=black>
<center>
<TABLE border=1 width=400>
<TR>
<TD width=100 align=center>
TEXTE Ligne 1 / Colonne 1
</TD>
<TD align=left valign=middle>
TEXTE Ligne 1 / Colonne 2
</TD></TR>
<TR>
<TD width=100 align=center>
TEXTE Ligne 2 / Colonne 1
</TD>
<TD align=left valign=middle>
TEXTE Ligne 2 / Colonne 2
</TD></TR>
</TABLE>
</center>
</body>
</html>
Dans cet exemple, on va créer un tableau de 400 pixels de large comportant 2 lignes et 2 colonnes. La première colonne ayant une largeur de 100 pixels, la deuxième colonne prenant une dimension égale au restant de la largeur du tableau, le contenu étant aligé à gauche et au milieu
A la place de texte on peut également installer une image selon la syntaxe vue dans la page précédente.
Pour ne pas voir l'affichage des bordures il suffit de mettre "0" ou d'enlever l'option.
José
|
|
