La balise <tt></tt> permet de mettre un texte en teletype. Exemple :
texte sans teletype texte en teletype
Bien que cette balise fonctionne toujours avec la plupart des navigateurs, il est préférable d'utiliser un style CSS afin de bien séparer le contenu de la mise en forme.
La balise <b> permet de mettre un texte en gras. Bien qu'elle soit considérée comme obsolète, cette balise fonctionne encore très bien avec tout les navigateurs.
Cette balise vient par pairs, car elle doit entourer la partie de texte qu'elle doit mettre en gras. Exemple :
<p>partie non gras de mon paragraphe <b>la partie mis en gras</b> suite du paragraphe</p>
Mais aujourd'hui il est conseillé d'utiliser un style CSS pour obtenir le même effet. Dans ce cas la propriété "font-weight" est utilisé :
<p>partie normale <span style="font-weight:bold;">texte gras</span></p>
Les frames sont des cadres permettant de découper la fenêtre du navigateur de votre visiteur en plusieurs pages HTML. Ce genre de mise en forme d'une page était très utilisé il y as quelques années, mais aujourd'hui leurs utilisé est très limité étant donnée que des effets similaire et beaucoup plus esthétique peuvent être obtenus à l'aide d'un style CSS.
Les frames nécessite donc la créations de plusieurs document HTML qui seront ensuite insérer dans une autres pages à l'aide de frames.
La première balise à insérer pour créer une frame est <frameset> :
cols & rows
L'attribut cols définit le nombre de colonnes, et rows le nombre de ligne. Exemple :
<framset cols="25%, 75%">
Ici nous auront donc deux colonnes, l'une occupant 25% de l'espace et l'autre 75% de l'espace.
Mais ce n'est pas tout, cette balise doit être accompagné de la balise <frame> sans quoi ceci ne sert à rien.
La balise frame elle doit comprendre au moins l'attribut "src" pour spécifier l'adresse du document HTML à insérer dans la frame. Exemple :
<frameset cols="25%, 75%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
Mais d'autre attribut peuvent aussi être utilisé avec la balise frame :
- name="" nous permet d'ajouter un nom à la frame.
- marginwidth="" définit la taille de la marge en pixels.
- marginheight="" même chose pour la marge du haut.
- scrolling="yes | no" pour définir si la frame doit contenir un barre de défilement.
- noresize cette attribut n'as pas de valeur et permet d'empêcher le navigateur de redimensionner la frame.
- frameborder="0 | 1" indique si la frame doit avoir une bordure ou non.
- bordercolor="#ffffff" définit la couleur de la bordure de frame.
Note : Je n'en parlerais pas d'avantage étant donnée que les frames sont considérée comme obsolète et pourrait très bien ne plus fonctionner à l'avenir. Donc éviter de créer des pages web à l'aide de frames.
La balise <DIV> sert à créer une division au sein d'une page. Les divisions sont des blocs qui servent à grouper des éléments, et peuvent donc être utilisé par la suite avec un style CSS pour créer un design.
Bien sur vous pouvez créer autant de divisions que vous le voulez, et pouvez même créer des divisions au sein d'autres divisions.
Par exemple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>tite de ma page</title>
<link href="design.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="titre">
<p>titre du site</p>
</div>
<div id="menu">
<ol>
<li><a href="page1.html">Page 1</a></li>
....
</ol>
</div>
<div id="corps">
<div id="partie1">
..contenu..
</div>
<div id="partie2">
..contenu..
</div>
</div>
<div id="pied">
..le pied de page..
</div>
</body>
</html>
Ensuite il suffit de préciser la position et les différentes propriétés de chaque élément dans une feuille de style, et voila.
La balise <span> à elle seule n'a aucun effet. C'est une balise "en-ligne" créer spécialement pour être utilisé avec un code CSS. Elle permet donc d'appliquer un style à une partie de texte ou un élément particulier se trouvant dans un bloc.
Par exemple si vous voulez souligner une partie importante au sein d'un paragraphe vous devez procédé comme ceci :
<p>début de mon paragraphe <span class="souligne">la partie souligné du paragraphe</span> suite du paragraphe</p>
Comme pour toutes les balises vous pouvez encoder le style CSS directement dans la balise <span> à l'aide de l'attribut "style" :
<p>mon paragraphe <span style="color:red;">texte rouge</span></p>
Le html dispose de six niveaux d'importance pour les entêtes de paragraphe(appelé header en anglais), dont le premier étant l'entête le plus important et le sixième le moins important. Le niveau d'importance détermine la taille du texte d'entête.
Exemple :
<h1>Entête de niveau 1</h1>
<h2>Entête de niveau 2</h2>
...
<h6>Entête de niveau 6</h6>
Mais il est possible de changer la taille de l'entête à l'aide d'un style css :
<h1 style="font-size: 12px;">Header 1</h1>
ou si vous utilisé une feuille de style :
h1 {font-size: 12px;}
De cette façon tout les header de type h1 seront de taille 12px.
--------
Un entête peut aussi être utilisé avec l'attribut ID qui nous permet soit de définir un identifiant pour un script javascript, un style CSS ou bien un ancre(anchor), c'est à dire un lien interne à la page.
Exemple d'ancre :
<a href="#parag8">Liens vers le paragraphe 8</a>
.......
<h4 id="parag8">paragraphe 8</h4>
Donc lorsque le visiteur clique sur le liens il arrivera directement sur l'entête contenant l'indentifiant "parag8".
--------
Une ou plusieurs class CSS peuvent aussi être attribué à vos entêtes à l'aide de la balise "class" :
<h1 class="class1">Entêtes</h1>
La balise <caption></caption> nous permet de donner un titre à notre tableau. Cette balise doit se trouver juste après la balise <table>.
Exemple :
<table>
<caption>Titre du tableau</caption>
<thead>
<tr>
<th>..</th>
<th>..</th>
</tr>
</thead>
<tfoot>
<tr>
<td>..</td>
<td>..</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>..</td>
<td>..</td>
</tr>
<tr>
<td>..</td>
<td>..</td>
</tr>
</tbody>
</table>
Cette balise vient également avec l'attribut "align" qui nous permet de définir la position du titre.
Les valeurs sont :
- top : en haut du tableau.
- bottom : en bas du tableau.
- right : à droite.
- left : à gauche.
Mais aujourd'hui cet attribut n'est plus vraiment utilisé, on préfère utiliser un style à l'aide de la propriété "caption-side".
Exemple :
.cap {caption-side : top;}
Ensuite ont appel le style dans la balise
<caption class="cap">Titre</caption>
Ou bien on ajoute le style directement dans la balise :
<caption style="caption-side: bottom;">titre</caption>
Les valeurs pouvant être appliqué à "caption-side" sont pareils que celles de l'attribut align (left, right, top, bottom).
Pour définir l'entête, le corps et le pied du tableau vous devez utiliser les balises <thead>, <tfoot>, et <tbody> dans cet ordre. Noter que la balise <thead> s'utilise avec <th>. La balise <th> sert à marquer un entête de colonne, le texte entre ces balises sera mis en valeur (en gras la plupart du temps) :
<table border="1">
<thead>
<tr>
<th>Produit</th>
<th>Quantité</th>
<th>Prix</th>
<tr>
</thead>
<tfoot>
<tr>
<td>Totale</td>
<td>25</td>
<td>25€</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Pomme</td>
<td>7</td>
<td>12€</td>
</tr>
<tr>
<td>Orange</td>
<td>13</td>
<td>8€</td>
</tr>
<tr>
<td>Pamplemousse</td>
<td>10</td>
<td>10€</td>
</tr>
</tbody>
</table>
Vous pouvez aussi définir un entête de colonne sans utiliser <thead>, <tfoot>, <tbody> :
<table>
<tr>
<th>..</th>
<th>..</th>
</tr>
<tr>
<td>..</td>
<td>..</td>
</tr>
</table>
Pour les attributs, même chose que pour les autres balises : align, valign, id, class, style.
Comme vous le savez sans doute déjà la balise <td> correspond aux colonnes d'un tableau. Comme pour les autres cette balise peut être utilisé avec différents attributs.
bgcolor
L'attribut bgcolor peut être attribué à une où plusieurs
colonnes de notre tableau. Cet attribut permet d'appliquer une couleur
de fond à notre colonne(aujourd'hui on préfère utiliser une feuille de
style). ex:
<table width="500">
<tr>
<td bgcolor="#FFFF00>..</td>
<td bgcolor="red">..</td>
</tr>
</table>
width
Nous pouvons aussi définir la taille de la colonne à l'aide de l'attribut width. ex:
<table width="200">
<tr>
<td width="50">..</td>
<td width="150">..</td>
</tr>
</table>
height
Pour définir la hauteur l'attribut height peut être utilisé. ex:
<table width="500" border="1">
<tr>
<td height="250">..</td>
<td>..</td>
</tr>
<table>
Note: toutes les colonnes qui se trouve sur la même ligne seront affecté, même si vous ne spécifier pas de hauteur pour les autres colonnes. Et la valeur la plus haute sera attribué à toutes les colonnes. ex:
<td height="250">..</td>
<td height="500">..</td>
<td>..</td>
Dans ce cas toutes les colonnes prendront une taille de 500 pixels, y compris la première colonnes.
align
La balise <td> peut aussi prendre comme attribut
"align" afin d'aligner le texte sur la gauche(left), la droite(right),
le centre(center) ou justifié(justify). Exemples :
<table width="500" height="500" border="5">
<tr>
<td align="right">texte 1</td>
<td align="center">texte 2</td>
<td align="left">texte 3</td>
<td align="justify">texte 4</td>
</tr>
</table>
valign
Un autre attributs pourvant être utilisé avec la balise
<td> : valign. Cet attribut permet d'aligner le texte
verticalement. Par défaut cette attribut prend comme valeur "middle",
voulant dire que le texte sera aligné au milieux sur le plan verticale
de la colonne. Les autres valeurs sont :
- top : aligné vers le haut.
- bottom : aligné vers le bas.
- baseline : toutes les colonnes recevant cette valeur seront aligné à la même hauteur.
Exemple :
<table width="640" height="800" border="1">
<tr>
<td valign="top">texte 1</td>
<td valign="bottom">texte 2</td>
<td valign="baseline">texte 3</td>
<td valign="baseline">texte 4</td>
</tr>
</table>
nowrap
Cet attribut permet d'empecher le retour à la ligne dans la cellule. ex:
<table border="1" width="50">
<tr>
<td nowrap="1">un texte sans retour à la ligne</td>
<td>deuxième texte avec retour à la ligne cette fois</td>
</tr>
</table>
Dans cette exemple le premier texte prendra le plus d'espace possible sans retour à la ligne, l'autre recevra l'espace restant.
La balise <tr> sert à définir une rangée. Comme pour les autres cette balise est accompagné de divers attributs dont voici une liste.
align
Comme vous le savez déjà cet attribut permet
d'aligner le texte ou les images placé dans les colonnes du tableau.
Lorsque vous utilisez l'attribut align avec la balise <tr>, la
valeur de l'attribut prendra effet sur toutes les colonnes encadré dans
les balises <tr>..</tr>. ex:
<table width="500" height="800" border="1">
<tr align="center">
<td>contenu 1</td>
<td>contenu 2</td>
</tr>
</table>
Les valeurs pouvant être appliqué sont :
- center : centrer le texte.
- right : aligner sur la droite.
- left : aligner sur la gauche.
- justify : justifier le texte(aligner le texte à gauche et à droite).
valign
Comme pour les autres balises nous pouvons spécifier
l'alignement du texte sur le plan verticale à l'aide de l'attribut
valign. Comme pour align la valeur sera appliqué à toutes les colonnes
présentes entre les balises <tr>..</tr>. ex:
<table width="200" height="400" border="2">
<tr valign="top">
<td>texte 1</td>
<td>texte 2</td>
</tr>
</table>
Les valeurs pouvant être appliqué sont :
- top : aligner en haut.
- bottom : aligner en bas.
- middle : au milieu (par défaut).
- baseline : les balises contenant cette valeur seront aligné les unes par rapport aux autres.
bgcolor
La couleur de fond des colonnes peut également être
spécifier dans la balise <tr>. Cela permet d'appliquer la couleur
à toutes les colonnes contenu dans la balise. ex:
<table width="300" height="600" border="5">
<tr bgcolor="#F0F0F0">
<td>texte 1</td>
<td>texte 2</td>
</tr>
</table>
Mais bien sur vous avez la possibilité par la suite d'appliquer une autre couleur sur une ou plusieurs colonnes contenu dans cette balise. ex:
<table width="200" height="300" border="1">
<tr bgcolor="#FFF0F0">
<td bgcolor="#FF0000">texte 1</td>
<td>texte 2</td>
</tr>
</table>
Suite à venir...
