logo Un site Wiki pour les …tudiants de l'Universitť de Poitiers logo
Vous êtes ici -> MementoHtml
PagePrincipale :: DerniersChangements :: DerniersCommentaires :: ParametresUtilisateur :: Vous êtes 34.236.190.216
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.

Valid XHTML 1.0 Transitional


Format des caractères



<b>...</b> Bold = caractères en gras
<i>...</i> Italique
<s>...</s> Strike = barré
<sub>...</sub> H2O    Subscript Indice
<sup> ...</sup> E = mc2    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



<p>...</p>  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"
<blockquote>...</blockquote> 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.
<div>...</div>

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. 

<pre>...</pre>
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%" > &nbsp; </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


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
F G
  <table border="1" width="75%" >
  <tr>
   <td
width="66%" colspan="2" > A </td>
   <td
width="34%" > B </td> 
</tr>
  <tr>
   <td
width="33%" rowspan="2" > C </td>
    <td
width="33%" > D </td>
    <td
width="34%" > E </td>
 </tr>
 <tr>
   <td
width="33%" > F </td>
   <td
width="34%" > G </td>
 </tr>
</table>

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>

Sommaire

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

Valid XHTML 1.0 Transitional

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

Valid XHTML 1.0 Transitional

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
  1. Valentin Briant
  2. Simone Dupont
  3. 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"

Sommaire 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

plume blanche <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.

IMP :: RSS :: HTML :: TXT :: Clone :: Historique :: Propriétaire : BaBel :: mentions légales