|
Il est possible de créer des listes d'objets numérotées ou non avec quelques marqueurs.
Liste non numérotée :
<UL>
<LH>Entête en option</LH>
<LI>Point numéro1
<LI>Point numéro2
<LI>Point numéro3
<LI>Point numéro4
</UL>
Liste numérotée
<OL>
<LH>Entête en option</LH>
<LI>texte
<LI>texte
</OL>
Le type de numérotation peut être changé avec: <OL TYPE=""> avec a et A, la numérotation est alphabétique, avec i et I, elle est romaine (majuscules ou minuscules dans les deux cas).
Pour continuer ou changer la numérotation:
<OL START="x">
<LH>Entête en option</LH>
<LI>texte
<LI VALUE="y">texte>
</OL>
TABLES et TABLEAUX
C'est la seule façon de gérer convenablement la présentation.
Les tableaux permettent de diviser la page en zones d'espace et de remplir ces zones avec des objets (textes, images, couleurs), permettant un contrôle amélioré de la position des objets.
Ces tables peuvent avoir un fond et des bords visibles ou non.
Insérer un tableau
<TABLE> et </TABLE> : pour définir un tableau
<TR> et </TR> : pour définir une rangée
<TH> et </TH> : pour les cellules de haut de colonne (facultatif)
<TD> et </TD> : pour une cellule
Exemples :
Bienvenue
<TABLE WIDTH=50%><TR><TD><IMG SRC="tv.gif"></TD><TD>Bienvenue</TD>
</TR></TABLE></CENTER>
Le tableau occupe 50% de la largeur totale de la page sur une ligne avec dans la première cellule l'image et dans la seconde le texte, le tout étant centré.
Bienvenue
<TABLE BORDER COLS=2 WIDTH="100%" >
<TR>
<TD>
<CENTER><IMG SRC="tv.gif" HEIGHT=39 WIDTH=50></CENTER>
<TD>
<CENTER>Bienvenue</CENTER>
</TD>
</TR>
</TABLE>
Mise en forme d'un tableau
A l'intérieur d'une cellule (entre <TD> et </TD>) tout est bien sûr possible, comme mettre plusieurs lignes de texte (avec <BR>, <P> ou autre), changer la couleur des caractères, celle du fond de la cellule, de mettre des liens, des images, modifier les couleurs et les épaisseurs de bordure, etc...
cellpading = espace du texte au bord de la cellule , cellspacing = espace entre les cellules
<TABLE BORDER="2" CELLPADING="2" cellspacing="3" width="50%" bordercolor="#000080">
<tr>
<td width="50%" align="left" bgcolor="#008080" bordercolor="#FF0000"> </td>
<td width="50%" align="left" background="fonkraft.jpg"> </td>
</tr>
</table>
<table bgcolor="#008080"> : mettre un fond de couleur
<table width="50%"> : Occupation en % de la page
<table border="1"> Taille des bords (0=pas de bords)
border color="#FF0000" couleur des bordures
cellpadding="2" Marge intérieure des cellules
cellspacing="3" Espacement entre les cellules
Il est aussi possible de définir le nombre de rangées et de colonnes d'une table et d'attribuer à une cellule plusieurs rangées (rowspan="") ou colonnes (colspan=""), ou les deux.
CADRES FRAME FAMESET
Il est possible de scinder verticalement ou horizontalement une fenêtre en 2 ou plusieurs parties.
Dans chacune de ces parties viendra s'insérer un fichier html.
Ces techniques sont peu utilisées car elles masquent le contenu des cadres aux moteurs de recherche ce qui réduit fortement leur indexation. Danbs certains cas ce peut être le but recherché.
Création d'un fichier Cadre à division verticale
<HEAD>
<TITLE>Guide HTML de base</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<NOFRAMES>
<FRAME SRC="sommhtm.htm">
<FRAME SRC="guidehtml.htm" NAME="droite">
</FRAMESET>
</HTML>
<FRAME SRC="fichier.htm"> permet d'insérer un fichier dans les cadres créés précédemment.
Création d'un fichier Cadre à division horizontale
L'attribut COLS peut être remplacé par ROWS pour avoir une séparation horizontale. La valeur attribuée correspond à la taille du cadre par rapport à la largeur de la page.
<FRAMESET ROWS="20%,80%">
<NOFRAMES>
<FRAME SRC="fichier1.htm">
<FRAME SRC="fichier2.htm" NAME="bas">
</FRAMESET>
</HTML>
Création d'un cadre avec bannière et sommaire
<FRAMESET ROWS="64,*">
<FRAME NAME="banniere" SCROLLING="no" NORESIZE TARGET="sommaire">
<FRAMESET COLS="150,*">
<FRAME NAME="sommaire" TARGET="principal">
<FRAME NAME="principal">
</FRAMESET>
La commande Scrolling avec l'attribut Yes ou No permet d'autoriser ou non une barre de défilement.
Création d'un cadre avec hiérarchie imbriquée
<FRAMESET COLS="150,*">
<FRAME NAME="gauche" SCROLLING="no" NORESIZE TARGET="haut_droite" SRC="fichier.htm">
<FRAMESET ROWS="20%,*">
<FRAME NAME="haut_droite" TARGET="bas_droite" SRC="fichier.htm">
<FRAME NAME="bas_droite" SRC="fichier.htm">
</FRAMESET>
Attribuer un nom à un cadre
Pour pouvoir faire des liens d'un cadre vers un autre, il faut leur donner des noms. Il est conseillé d'attrbuer un nom significatif (haut, bas, gauche, droite...).
<FRAME SRC="fichier.htm" NAME="droite">
Liens entre cadres
Par défaut un navigateur ouvrira la page correspondant au lien dans la même fenêtre que celle du lien.
Pour forcer cette commande il faut utiliser l'attribut TARGET dans le tag du lien.
Exemple : <A HREF="fichier.htm" TARGET="droite">
TARGET indique le nom du cadre cible où devra s'afficher le fichier html.
_blank : ouvre une nouvelle fenêtre pour afficher la page
_self : affiche dans la même fenêtre (par défaut)
_parent : affiche dans le cadre supérieur.
Suite :
La mise en forme du texte en HTML
Les liens et URL en HTML
Les listes, les tables et les tableaux en HTML
les formulaires FORM en HTML
les images en HTML
Les vidéo et son en HTML
|
