**Les balises** ""

Les balises ou "tags" servent de commandes au navigateur. Ce sont les instructions du langage HTML. Elles sont insérées dans le texte à afficher et sont placées entre les signes < et > pour se différencier du reste du texte affiché par le navigateur.

Il existe deux types de balises:

- Les marqueurs = une balise seule avec éventuellement un ou plusieurs attributs
	<hr /> <hr align="right" />
	Les balises sont constituées d'un mot clé ("hr" dans cet exemple) et d'attributs auxquels on affecte une ou plusieurs valeurs. L'attribut est suivit du signe égal, puis de la valeur attribuée placée entre guillemets.

- Les conteneurs = deux balises qui encadrent ce sur quoi porte la commande ( un texte ou une image)
	Ces deux balises utilisent le même mot clé;. La balise d'ouverture contient parfois un ou plusieurs attributs. La balise de fermeture est précédée du signe barre oblique ' / '
	<title> Chapitre II </title> <a href="http://www.lesoir.be/" aligne="right" > Le soir </a>

Les balises HTML peuvent indifféremment s'écrire en majuscules ou en minuscule mais il faudra obligatoirement les mettre en minuscule quand nous utiliserons le XML. Autant prendre cette habitude dès le départ.

"" =====Format des caractères===== ""

<b>...</b>	Bold = caractères en gras
<i>...</i>	Italique
<s>...</s>	~~Strike = barré~~
<sub>...</sub>	H₂O Subscript _Indice
<sup> ...</sup>	E = mc²Superscript ^Exposant
<tt>...</tt>	`Teletype / Machine à écrire`
<u>...</u>	Underline = Souligné
<font> ... </font>	Choix de la police, de la taille ou de la couleur

La police

<font face="Arial"> Texte à afficher avec cette fonte </font>

Arial - Book Antiqua - Comic Sans MS - Courier New - Fixedsys - Monotype Corsiva - MS Sans Serif - System - Tahoma - Times New Roman - Trebuchet MS

La taille		La couleur
<font size="1"> ... </font> <font size="2"> ... </font> <font size="3"> ... </font> <font size="4"> ...</font> <font size="5"> ...</font> size = 1 à 7 ( 3 par défaut) ou -3, -2, -1, 0, +1, +2, +3		<font color="#800000"> Rouge </font> <font color="#00FF00"> Vert </font> <font color="#FF0000"> Bleu </font> <font color="#000080"> Rouge foncé </font> <font color="#008000"> Vert foncé </font> <font color="#800000"> Bleu foncé </font> <font color="#808080"> Gris </font>

"" =====Format - Paragraphe===== ""

Tout comme dans les traitements de texte, chaque paragraphe est suivi d'une ligne vide.

<br>	"'Break line" Le marqueur <br> sert à insérer un saut à la ligne mais sans intercaler une ligne vide avant la suivante comme le fait la balise de fermeture </p>
<h1> ... </h1> ... <h6> ... </h6>	Il existe 6 variantes de titres ( h1 à h6) Exemple: <h1> Titre de première importance </h1> L'attribut optionnel align peut prendre les valeur "left" , "center" ou "right"

Ces balises servent en principe pour les citations de plus d'une ligne. Elles sont alors présentées comme un paragraphe mis légèrement en retrait.
NB Les balises <cite> ... </cite> sont destinées aux citations courtes. Elles restent intégrées au texte mais sont généralement mises en évidence par une transcription en italique.

Les balise <div> s'utilisent pour modifier l'alignement ou le style (attibuts "align" et "style") de certains blocs du texte sans pour cela les délimiter par les balises <p> et </p> qui en font des paragraphes séparés par des lignes vides.

Ce texte "préformaté" est affiché par le navigateur tel qu'il a été édité,
en respectant les espaces et les sauts de lignes tels qu'ils ont étés tapés
dans le texte original.

"" =====Les tableaux===== ""

Les tableaux ne servent pas seulement à aligner des chiffres en lignes et en colonnes. Ils s'utilisent souvent sans bordures (comme dans le paragraphe ci-dessous) pour faire de la mise en page.

Quatre balises fondamentales :

<table> ... </table>	Cette balise annonce au navigateur qu'il va lire un tableau
<tr>...</tr>	Table Row = Rangée ou ligne
<td>...</td>	Table Data = Cellule de la table
<th>...</th>	Table Header = " Entête" ( une cellule affichée en gras)

Exemple

Premier trimestre
	Janvier	Février	Mars
Moyenne	4.50	5.11	4.46

<table border="1" width="80%" >
<caption> Premier trimestre </caption>
<tr>
    <th width="25%" >   </th>
    <th width="25%" > Janvier </th>
    <th width="25%" > Février </th>
    <th width="25%" > Mars </th>
</tr>
<tr>
  <th> Moyenne height="40" </th>
    <td> 4.50 </td>
  <td> 5.11 </td>
  <td> 4.46 </td>
</tr>
</table>

"" =====Dimensionnement du tableau et des cellules===== ""

Les dimensions qui peuvent être spécifiées sont :
1° la largeur et la hauteur du tableau ( en % par rapport à l'écran ou en pixels)
        <table border="1" width="80%" >
2° les largeurs et les hauteurs des cellules ( en % par rapport à la largeur de la table)
         <td width="25%" height="20% " >
3° les hauteurs des cellules en pixels
         <td height="40" >
L'indication des dimensions est facultative. Les dimensions des cellules s'adaptent au contenu et cela même si on spécifie les largeurs relatives des cellules. Démonstration: Les 4 colonnes dans l'exemple ci-dessus ont en principe la même largeur, 25% de celle du tableau. Si vous réduisez les dimensions de la fenêtre de l'explorateur, les largeurs des cellules se réduisent mais la colonne "Mars" pourra se rétrécir plus que les autres.
celpadding est un attribut de la balise <table> il spécifie l'espace minimum entre les bords des cellules et le contenu.
celspacing sert à spécifier l'espace entre les cellules.

Fusion les cellules

Les attributs colspan et rowspan permettent la fusion de cellules d'une même ligne ou d'une même colonne. Ces indications peuvent être attribuées aux balises <td> et <th>. Les valeurs données aux attibuts indiquent le nombre de cellules consécutives à fusionner

Exemple

A		B
C	D	E
C	F	G

Alignement à l'intérieur des cellules

Horizontalement: align="left" (par défaut) mais peut valoir aussi "center" ou "right"

Verticalement: valign="middle" (par défaut) mais peut valoir aussi "top" ou "bottom"

"" ===== Balises qui indiquent le début et la fin d'un tableau===== "" Attributs :

align="left \| center \| right"	Alignement du tableau dans la fenêtre de l'explorateur
*bgcolor="couleur"*	Couleur de fond du tableau
*bordercolor="couleur"*	Couleur de la bordure du tableau
*bordercolorlight="couleur"*	Effet 3D - Couleur des traits éclairés
*bordercolordark="couleur"*	Effet 3D - Couleur des traits dans l'ombre
border="x"	Largeur des traits du tableau. La valeur par défaut est 1 pixel. Il faut préciser border="0" pour rendre les bords invisibles
cellpadding="x"	Nombre de pixels entre les bords des cellules et leur contenu
cellspacing="x"	Nombre de pixels entre chaque cellule
height="x"	Hauteur du tableau en pixels par rapport à la fenêtre
width="x"	Largeur en pixels ou en pourcents

<tr ></tr> "Table row" (Les tables sont constituées d'une série de lignes)

Attributs :

align="left \| center \| right"	Alignement horizontale à l'intérieur des cellules de la ligne
valign="top\|middle\|bottom"	Alignement vertical à l'intérieur des cellules de cette ligne
*bgcolor="couleur"*	Couleur de fond des cellules de cette ligne
*bordercolor="couleur"*	Couleur des bordures des cellules de cette ligne
*bordercolorlight="couleur"*	Effet 3D - Couleur des traits éclairés
*bordercolordark="couleur"*	Effet 3D - Couleur des traits dans l'ombre
height="x"	hauteur en pixels des cellules de cette ligne
width="x"	largeur en pixels ou en pourcents par rapport au tableau

<td ></td> "Table data" (Chaque ligne se subdivise en cellules)

<th ></th> "Table header" (Cellule d'entête)

Attributs :

align="left \| center \| right"	Alignement horizontal du contenu de la cellule
valign="top\|middle\|bottom"	Alignement vertical à l'intérieur de la cellule
*bgcolor="couleur"*	Couleur de fond de la cellule
*bordercolor="couleur"*	Couleur de la bordure de la cellule
*bordercolorlight="couleur"*	Effet 3D - Couleur des traits éclairés
*bordercolordark="couleur"*	Effet 3D - Couleur des traits dans l'ombre
height="x"	Hauteur en pixels
colspan="x"	Nombre de cellules à fusionner en largeur
rowspan="x"	Nombre de cellules à fusionner en hauteur
nowrap	Pas de saut à la ligne automatique
width="x"	largeur en pixels ou en pourcents

"" =====Les liens hypertextes===== ""

Sans eux, impossible de surfer d'une page à l'autre, le web n'existerait pas!

Les liens s'indiquent par les balises d'ancrages <a href= "..."> ... </a>
L'attribut href="..." indique la destination du lien. Le plus souvent (si le navigateur n'a pas été reconfiguré autrement) le texte compris entre les balises d'ouverture et de fermeture apparaît en bleu et est souligné. Mais on peut aussi y mettre une image. Elle est alors encadrée en bleu par le navigateur pour indiquer sa fonction de lien.

Liens vers d'autres sites
<a href="http://www.rtbf.be" > RTBF </a>

Liens entre fichiers du même répertoire
<a href="HtmlIntro.htm > Page d'acceuil </a>

Liens vers un fichier dans un répertoire différent
<a href="../Reseaux/TypesRes.htm" > Les différents types de réseaux </a>

Pour se rendre en un point particulier d'un document, il faut d'abord y mettre un signet que l'on désigne par un nom. C'est le rôle de l'attribut name : <a name="Debut" > dans ce cas précis une balise de fermeture </a> est inutile.

Liens locaux = dans la même page :
Associer un lien à ces cibles: <a href="#Debut" > Allez au début </a>
Lien vers un point d'ancrage dans un autre fichier
<a href="../hobbies/cuisine.html#chocolat" > Le chocolat </a>

Lien vers un e-mail
<a herf="mailto:dml@swing.be" > dml@swing.be </a>

"" =====La balise <body>===== ""

Les balises <body> et </body> encadrent le corps de la page autrement dit le contenu visible dans la page. Les lignes de code destinées aux navigateurs ou aux moteurs de recherche seront quant à elles placées dans le bloc d'en-tête <head>...</head> qui précède le corps.

Attributs

<body bgcolor="#FFFFC0"> ... </body>
L'attibut bgcolor peut accompagner la balise <body> pour donner une couleur d'arrière plan à toute la page.
Il est préférable de se servir du style background-color
<body style="background-color: #FFFFC0;"> ... </body>

<body background="images/fond.jpg"> ... </body>
L'attibut background peut accompagner la balise <body> pour mettre une image de fond.
Il est préférable de se servir du style background-image
<body style="background-image: url('images/fond.jpg');"> ... </body>

Voir aussi: Page élémentaire - Index

"" =====Page web élémentaire===== ""

Le plus élémentaire des documents HTML contiendra au moins ceci :

<html>
<head>
<title> Exemple de titre </title>
</head>

<body>
Exemple de document minimum.
</body>
</html>

Pour voir ce que donne ce code minimum cliquez ici

Les balises <html> et </html> indiquent le début et la fin du document HTML.
L'entête <head> ... </head> contient le titre qui apparaîtra dans la barre de titre de l'explorateur.
Les balises <body> et </body> encadrent le corps du document proprement dit.

Voir aussi : Les balises - Exemple.html - Styles - Index

"" =====Les listes===== ""

On dispose de deux types de listes: les listes numérotées et les listes à puces.
Les premières sont définies par la paire de balises <ol>...</ol> (Ordered List )
Les listes à puces sont définies par conteneurs <ul>...</ul> ( Unordered List)
Qu'elles soient ordonnées ou non-ordonnées, ces listes contiennent toujours des éléments que l'on introduit par la balise <li> (List Item). Elles peuvent aussi contenir des entêtes de liste <lh> (List Header)

Exemple

<ol> <lh> Palmarès <li> Valentin Briant <li> Simone Dupont <li> Hugo Peters </ol>	<ul> <lh> A emporter <li> Passeport <li> Appareil photo <li> Chapeau pour le soleil </ul>
Palmarès Valentin Briant Simone Dupont Hugo Peters	A emporter Passeport Appareil photo Chapeau pour le soleil

Les listes ordonnées sont numérotées par défaut avec des chiffres mais il est possible de marquer les articles par une lettre minuscule ou majuscule ou de les numéroter en chiffres romains. On ajoute pour cela l'attribut type="a", "A", "i" ou "I" à la balise d'ouverture <ol>

Le type de puce peut lui aussi être précisé dans la balise <ul> par l'attribut type="disk","circle" ou "square"

disk

circle

square

Voir aussi: Tableaux - Définitions - Format / paragraphe

"" =====Les images===== ""


Formats des images
	Les images sont comprimées pour optimiser leur vitesse de transmission. La compression JPEG convient pour les photos aux couleurs nuancées. Le format GIF est plus efficace pour les images composées d'à-plats de couleurs unies. En GIF, l'une de ces couleurs peut être transparente et ces images peuvent être animées.

Où sont elles?

Les images ne font pas partie de la page. Elles y sont référencées par par la balise <img> toujours accompagnée de l'attribut "source" qui indique l'adresse de l'image.
<img src="url" />

Dimensions

La mise en page est plus rapide si le navigateur est informé des dimensions de l'image avant que celle-ci n'arrive.
<img src="globe.gif" width="64" height="64" />
On peut si nécessaire indiquer une hauteur et une largeur différente pour modifier l'échelle de l'image.

Alignements des images et du texte

L'image est placée

sur une ligne mais on peut modifier cet alignement :

align= "bottom"	est l'alignement par défaut
align= "top"	aligne le texte sur le dessus de l'image
align= "middle"	aligne le texte sur le milieu de l'image
align= "left"	aligne l'image à gauche du texte
align= "right"	aligne l'image à droite du texte

<img src="plume.jpg" align="right" alt="plume blanche" >
Depuis qu'on a spécifié align="right" , tout le texte qui suit reste aligné à gauche de cette image.
Il faut demander un retour à la ligne avec la balise <br /> et un attribut très particulier pour mettre fin à cet alignement.
<br clear="all" />

Après cela l'image n'est plus à droite ou, plus exactement, le texte ne continue plus à gauche de l'image.

L'altenative alt

L'attribut alt="plume blanche" donne à l'image une légende quand elle est survolée par le pointeur de la souris. Cette légende apparaît aussi en attendant que l'image se charge. C'est une "alternative" pour les navigateurs qui ne reproduisent pas les images (s'il en reste) ou lorsque les images tardent à apparaître.

Bords de l'image

Certains préfèrent les images avec un bord ...bof !
<img src="globe.gif" align="left" border="2" hspace="20" />
hspace et vspace définissent l'espace minimum autour de l'image.

Images utilisées comme liens ~~hypertextes~~ hypergraphiques

Voici par exemple le code qui place le bouton au bas de cette page pour faire un lien vers le sommaire.
<a href="Sommaire.htm" ><img src="images/Index.gif" align="right" alt="Sommaire" /></a>

"" =====Les cadres===== ""

Les "cadres" ou "frames" ont pour but de permettre l'affichage simultané de plusieurs documents HTML. Exemple: cette page avec à sa gauche une autre plus étroite qui donne la liste des documents du site.

La disposition de ces zones d'affichages est définie dans la page de cadres à l'aide de <frameset>

<html>
<head>
    <title> Exemple de page de cadres </title>
</head>

<frameset cols="20%,80%" >
      <frame src="plan_du_site" >
      <frame src="page_1" scrolling="yes" >
</frameset>
</html>

Remarquez que la page de cadre ne contient pas la paire de balises <body>...</body>. Ces balises sont exceptionnellement remplacées par <frameset>...</frameset>. On ne peut mettre entre ces dernières que des balises <frame> , <noframe> ou éventuellement d'autres couples <frameset>...</frameset>

Les balises <frame> désignent les documents HTML que le navigateur doit afficher dans chaque zone d'affichage.

Les balises <noframe> sont destinées aux navigateurs qui ne prennent pas les cadres en charge. Il s'agit des navigateurs antérieurs à Netscape 2.0 et à Internet Exploreur 3.0

"" =====Styles et feuilles de style===== ""

Les feuilles de style (style sheet) regroupent des définitions de mises en forme qui peuvent être reprises dans plusieurs pages HTML pour en uniformiser l'aspect visuel. Cette technique vise à séparer autant que possible la présentation de la page de son contenu. Le langage de feuille de style (stylesheet language) à une syntaxe plus structurée que le HTML et plus de "vocabulaire".

Il ne faut pas croire pour autant que les styles ne sont jamais définis que dans des feuilles de styles. On les déclare souvent aussi dans les entêtes (<head>) des documents HTML ou même parfois directement dans le corps du document (le <body>) comme attributs de certaines balises.

Exemple : Imaginez qu'on veuille que tous les titres importants s'affichent en rouge, il y a quatre manières de s'y prendre :

1° Spécifier, en langage HTML conventionnel, qu'il faut utiliser du rouge chaque fois qu'on utilise la balise <h1>
<h1><font color="red" > ... </font></h1>

2° Utiliser l'instruction style en tant qu'attribut de la balise <h1>
<h1 style="color: red" > ... </h1>
La syntaxe est différente mais elle n'apporte jusqu'ici aucun avantage puisqu'il n'y a pas beaucoup moins à écrire.

3° Définir le style dans l'entête du document HTML. Il s'applique alors à l'ensemble du document. On parle alors de style interne. Tous les titres h1 de la page auront ce même style.

<html>
  <head>
    <title> Le temps des cerises</title>

    <style type="text/css">
      h1 { color : red }
</style>
  </head>
    . . .
</html>

4° Définir le style dans un document à part : la feuille de style liée.
Exemple: la feuille de style "MonStyle.css" Cette même feuille peut dès lors être reprise dans toutes les pages d'un même site pour y créer une certaine homogénéité d'aspect.

h1 { font-size: 18; color: red }
h2, h3 { font-family: Comic sans ms; color : green }
p { font-family : verdana; color : blue }

Reste ensuite à indiquer dans l'entête des documents HTML le lien (<link ...>) à cette feuille de style.

<html>
<head>
    <title> La chasse aux papillons </title>
    <link  rel="stylesheet"  type="text/css"  href="MonStyle.css">
</head>
    . . .
</html>

La feuille de style est rédigée avec une syntaxe autre que celle du HTML. Le langage utilisé est le "CSS" (Cascading Style Sheet), en français : "feuille de style en cascade". Cette expression traduit le fait que les styles peuvent être redéfinis et que de nouvelles règles peuvent masquer d'autres qui les précèdent. Des règles définies en ligne peuvent recouvrir d'autres définies dans l'entête qui elles-mêmes en remplaçaient d'autres plus globales encore définies dans une feuille de style.

Formats des images

Alignements des images et du texte