logo xgarreau.org Quoi ma tête ?
xavier@xgarreau.org
Le langage HTML
Version imprimable

Vous trouverez ici de quoi faire une page tout à fait correcte. C'est à dire une page contenant du texte mis en forme, des images, des liens et pour le petit plus des cadres (frames), tableaux et lignes...Il n'est pas abordé ici le sujet des cgi, pour cela vous devez regarder à Exécutables CGI dans la liste Internet..., vous pouvez aussi trouver des explications sur les Applets dans la liste Premiers Pas Avec... et sur les JavaScripts dans la liste Internet...

Par ailleurs, je ne vous fournis pour chaque tag (balise) que les attributs obligatoires ou couramment utilisés. Ainsi, vous ne serez pas perdu dans une masse d'informations souvent inutiles. De plus, je ne mentionne ici que les tags les plus utilisés, il en existe d'autres ; toutefois, le but ici n'est pas de construire une référence HTML mais de vous donner les principaux outils.

Généralités :

Un fichier HTML n'est qu'un fichier texte simple utilisant des tags ou balises (codes entourés de < et >). Pour vous donnez une idée, prenez un éditeur de texte quelconque et placez ces quelques lignes dedans :

<HTML>
<HEAD>
   <TITLE>Ceci est le titre de la page</Title>
</HEAD>
<BODY>
   Ceci est le contenu de la page.
</BODY>
</HTML>

Ensuite enregistrez ce fichier avec l'extension .htm ou .html (par exemple essai.htm) puis ouvrez le fichier ainsi créé. Vous obtiendrez votre premier fichier html. Ce n'est pas plus compliqué que ça.

Vous pouvez ensuite ajouter dans BODY tous les tags présentés ci-après...
Mais il faut tout de même savoir que généralement, les balises vont par deux, une balise d'ouverture et une balise de fermeture(<BALISE> et </BALISE>). Mais ce n'est pas toujours le cas. Par exemple pour mettre du texte en gras, vous devez préciser à partir d'où et jusqu'où. Par contre pour faire un passage à la ligne il n'y a qu'une balise d'ouverture.
Lorsque la balise d'ouverture est nécessaire, elle est explicitée dans l'exemple fourni.




A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
<!-- --> Evènements



A

<A
   Style="éléments de style"
   HRef="URL"
   Name="nom_de_signet"
   Target=cible>
   lien</A>

Définit un lien hypertexte externe ou interne à la page.

Style permet de spécifier des éléments de style localement. Celà est très utilsé actuellement, notamment pour créer des liens non soulignés ou clignotants (non reconnu par MS-IExplorer) ou pour différencier les paragraphes en utilisant des couleurs différentes.
Pour plus d'informations sur les styles, visitez donc le chapitre 32 de l'UNGI. Vous pouvez utiliser les attributs donnés dans le tableau récapitulatif compatibles avec votre balise.

HRef est l'adresse de destination. L'adresse peut être absolue (http://etc...), relative (../truc.htm) ou être une ancre (#nom_de_signet).

Name est le nom de l'ancre ou tout simplement le nom du lien, utilisé lors de traitement par srcipts.

cible est le nom d'un cadre (cf. FrameSet) ou un des quatre mots réservés :

_blank
Ouvre le lien dans une nouvelle fenêtre.
_parent
Ouvre le lien dans le frame père du frame appelant.
_top
Ouvre le lien dans la fenêtre courante mais en en supprimant les frames.
_self
Ouvre le lien dans le frame appelant. (Par défaut, target=_self)

<Applet
   Code=Adresse Relative
   Height=nombre
   Width=nombre>
</Applet>

Déclare la présence d'une applet, application écrite en Java, exécutée chez le lecteur de la page.

Code est l'adresse, en notation relative, du fichier .class de l'applet.

Height est la hauteur en pixels à réserver pour l'applet.

Width est la largeur en pixels à réserver pour l'applet.


<Area
   Coords=coordonnées
   HRef=url
   Name=nom
   NoHRef
   Shape=Circ|Poly|Rect
   Target=cible>

Permet de définir une forme géométrique servant à la séparation d'une image en différentes zones. cf. Balise <Map> et attribut useMap de la balise <Img>.

Coords : de la forme x1,y1,x2,y2. Correspond aux coins supérieur gauche et inférieur droit.

HRef : l'adresse à afficher lors d'un click sur la zone.

Name : identificateur de la forme, pour manipulation dans les scripts.

NoHRef : si on ajoute cet attribut, la zone est insensible aux clicks.

Shape : pour définir la forme de la zone.

Target : spécifie le cadre de destination pour le lien.


Remonter
B

<B>
   mot
</B>

Le mot placé entre les balises sera écrit en gras.

Exemple :

   Ecrit en <B>gras</B>
donnera :
Ecrit en gras

<BlockQuote>
   Citation
</BlockQuote>

Décale la citation par rapport au reste du texte.

Exemple :

   Un auteur célèbre a dit :<BlockQuote>Quelque chose !</BlockQuote>
donnera :

Un auteur célèbre a dit :
Quelque chose !

<Body
   Backgroung=image
   BgColor=couleur
   Link=couleur
   Style="éléments de style"
   Text=couleur
   VLink=couleur
   événements=script>
   Tout le corps de la page à afficher.
</Body>

Tout ce qui se trouve entre les balise <BODY> et </BODY> forme le corps de la page HTML.

Background spécifie le chemin relatif ou absolu vers un fichier .jpg ou .gif servant au fond de la page.

BgColor spécifie la couleur de fond de page, s'il n'y a pas d'image ou si elle est transparente.

Link spécifie la couleur des liens.

Style Se reporter à la balise A

Text spécifie la couleur du texte.

VLink spécifie la couleur des liens visités.

évènements souvent onLoad=..., permet de faire une action au chargement de la page. Mais il existe d'autres évènements tel que : onBlur, onFocus, onClick, onMouseOver...


<BR>

Force un passage à la ligne.

Exemple :

   Une ligne est suivie par <BR>une autre ligne.
donnera :

Une ligne est suivie par
une autre ligne.


Remonter
C

<Center>
   texte
</Center>

Le texte placé entre les balises sera centré.

Exemple :

   Texte 1<CENTER>Texte 2</CENTER>Texte 3
donnera :
Texte 1
Texte 2
Texte 3

<Code>
   texte
</Code>

Pratique pour mettre en valeur des lignes de code.

Exemple :

   Ouvrir une fenêtre s'obtient par l'instruction:<BR>
   <Code>maFenetre = open ("","",'');</Code><BR>
   tout simplement.
donnera :
Ouvrir une fenêtre s'obtient par l'instruction:
maFenetre = open ("","",'');
tout simplement.

Remonter
D

<DL>
   <DT>Terme1<DD>Définition de terme1...
   <DT>Terme2<DD>Définition de terme2...
   <DT>Terme3<DD>Définition de terme3...
   etc...
</DL>

Permet d'afficher une liste de mots avec leurs définitions.

Exemple :

   <DL>
      <DT>Jean<DD>Un garçon.
      <DT>Grand Jean<DD>Le papa de Jean.
      <DT>Grande Jeanne<DD>La maman de Jean et la femme de Grand Jean.
   </DL>
donnera :

Jean
Un garçon.
Grand Jean
Le papa de Jean.
Grande Jeanne
La maman de Jean et la femme de Grand Jean.

Remonter
E

<Embed
   AutoPlay=True ou False
   AutoStart=True ou False
   Loop=nombre ou True ou False
   src=url
   Width=nombre
   Height=nombre
   Border=nombre>

Permet de placer une séquence audio ou vidéo dans la page (.mov,.avi,.viv,.mid,.wav,.au) ou tout autre contenu pouvant être lu par un plug-in approprié par exemple (WHIP ! Viewer d'AutoDesk pour consulter des plans vectoriels avec les fonctionnalités de zoom, panoramique, etc...).

AutoPlay : pour les vidéos, lance la lecture dès que c'est possible.

AutoStart : pour les audios, lance la lecture dès que c'est possible.

Loop spécifie le nombre de répétitions, ou true (boucle jusqu'à quitter la page) ou false (1 fois seulement).

src : url de la séquence.

Width et Height spécifie les dimensions réservées à la séquence.

Border spécifie l'épaisseur autour de la séquence.



Remonter
F

<Font
   Color=couleur
   Face=nom_de_Police
   Size=nombre>
   texte
</Font>

Cette balise est pratique pour écrire certaine partie de la page en d'autres couleurs, tailles, polices.

couleur est une couleur notée de la même manière que pour les attributs de Body.

Face est le nom d'une police type Arial, Verdana. A utiliser avec méfiance car le lecteur de la page doit posséder sur son système les dites polices.

Size est un entier spécifiant la hauteur du texte. (3 par défaut)

Exemple :

   Texte 1<Font Size=5 Color="#0245FF">Texte 2</Font>Texte 3
donnera :
Texte 1 Texte 2 Texte 3

<Form
   Action=addresse
   Method=GET|POST
   Name=nom>
   Contenu du formulaire
</Form>

Cette balise permet de réaliser des formulaires pour des buts plus ou moins évolués.

Action est l'action à mener avec les résultats du formulaire, c'est une option. le paramètre est l'URL de la fonction de traitement. Souvent, les données des formulaires sont traités par des javascripts au sein même de la page, auquel cas il n'y a à préciser ni action ni method. Une troisième solution, utile pour les collectes d'informations sans traitement est d'écrire :

   <Form
      Name="MonFormulaire"
      action="mailto:monNom@monDomaine.monSuffixe" 
         <!-- truc@id-net.fr par exemple -->
      method="Post"> <!-- Facultatif -->
      Corps du formulaire
   </Form>
On reçoit ainsi les résultats dans ses mails... (Les nouveaux navigateurs acceptent le rajout de l'attribut ENCTYPE="text/plain", qui permet de recevoir les données dans un format plus facile à lire. Sinon par défaut, les espaces sont remplacés par des '+', les séparations de champs deviennent des '&' et tous les caractères accentués sont remplacés par leurs codes.

Method Avec POST, la totalité des infos est envoyée à l'URL donnée. GET est plutôt utilisé quand on essaie d'obtenir des infos se trouvant sur le serveur (Notion de requête).

Name est le nom du formulaire utilisé pour les manipulations.


<FrameSet
   BorderColor=couleur
   Border=nombre
   Rows ou Cols="nombres"
   FrameBorder=yes|no>
   <Frame
      Border=nombre
      BorderColor=couleur
      FrameBorder=yes|no
      Name=nom
      NoResize=NORESIZE|RESIZE
      Scrolling=auto|yes|no
      src=url>
   <Frame...> ou <FrameSet...>
   <NoFrames>
      <Body>
         Corps de la page si le navigateur ne supporte pas les frames.
      </Body>
   </NoFrames>
</FrameSet>

Cette balise permet de réaliser des fenêtres pouvant être subdivisées, de façon à pouvoir afficher plusieurs documents dans la même. On aborde ici les trois balises FrameSet, Frame et NoFrames, qui sont intimement liées. Tous les attributs communs à FrameSet et Frame suivent une règle logique : Un attribut de la balise FrameSet est valable dans tous les frames sauf si la balise d'un de ceux ci le modifie.

Attributs Communs

BorderColor pour spécifier la couleur des séparations entre frames.

Border pour spécifier la largeur des séparations entre frames. (Non reconnu par les vieilles versions de MicroSoft IExplorer)

FrameBorder pour séparer les frames ou non par des bordures.

FRAMESET définit un groupe de cadres.

Rows ou Cols spécifie la taille de chaque frame. L'emploi de rows signifie que l'on sépare la fenêtre dans le sens horizontal et cols dans le sens vertical. On peut utiliser différentes notations :

  • Rows="500,100" : valeur en pixels ou relatives. Si on a une fenêtre de 600 pixels de hauteur, on aura bien une zone de 500 et une de 100, sinon, on prend le ratio. C'est à dire que "500,100" est équivalent à "5,1"
  • Rows="150,*" : une astérisque signifie prendre la place restante. Ici un cadre de 150 pixels de haut et l'autre du reste de la place.
  • Rows="2*,*" : ici, on aura deux zones mais la première remplira deux fois plus de place que la seconde.
  • Rows="80%,20%" : ça me semble clair. (on aurait pu mettre une astérisque à la place du 20%)

FRAME définit un cadre.

name : c'est ce nom qu'il faut placer dans l'attribut target de la balise <A ...> pour ne mettre à jour que ce cadre.

NoResize : pour spécifier si ce cadre est ou non de taille variable. (Ajustable par le lecteur...)

Scrolling : pour spécifier si ce cadre possède des barres de défilement

  • Quand elles sont nécessaires (AUTO)
  • Toujours visibles (YES)
  • Jamais (NO)

src indique l'adresse de la page que contiendra ce cadre.

NOFRAMES : Entre ces deux balises doit être saisi le corps du document qui sera visionné par un navigateur ne supportant pas les cadres. Ce contenu ne sera pas visible pour les navigateurs acceptant la navigation avec cadres.

Exemple : Cliquez sur le bouton pour afficher la page résultat...

   <HTML>
   <HEAD>
   </HEAD>
   <FRAMESET COLS="33%,*">
      <FRAME NAME="Cadre1" SRC="cad1.htm" NORESIZE>
      <FRAMESET ROWS="33%,*">
         <FRAME NAME="Cadre2" SRC="cad2.htm" SCROLLING="yes">
         <FRAME NAME="Cadre3" SRC="cad3.htm" SCROLLING="no">
      </FRAMESET>
      <NOFRAMES>
         <BODY>
            Contenu pour les navigateurs sans cadres.
         </BODY>
      </NOFRAMES>
   </FRAMESET>
   </HTML>

Remonter
G

Pas d'instructions.


Remonter
H

<H1à6
   Align=Center|Left|Right>
   Titre
</H1à6>

Le mot placé entre les balises sera écrit en titre de niveau 1 à 6.

Align : spécifie si le titre doit être aligné au centre, à gauche (Par défaut) ou à droite.

Exemple :

	<H1>Titre de niveau 1</H1>
	<H2>Titre de niveau 2</H2>
	<H3>Titre de niveau 3</H3>
	<H4>Titre de niveau 4</H4>
	<H5>Titre de niveau 5</H5>
	<H6>Titre de niveau 6</H6>
donnera :

Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5
Titre de niveau 6

<HR
   Align=Center|Left|Right
   Size=nombre
   NoShade
   Width=nombre%>

Trace un trait dans la page.

Align : spécifie si le trait doit être aligné au centre (Par défaut), à gauche ou à droite.

Size : Hauteur du trait.

NoShade : à ajouter si on désire enlever l'effet 3D actif par défaut.

Width : largeur du trait en pourcentage de la page.

Exemple :

   <HR>
   <HR Size=5>
   <HR Size=3 Width=30%>
   <HR width=40% NoShade>
   <HR Size=4 width=60% NoShade align=Right>
donnera :






Remonter
I

<I>
   mot
</I>

Le mot placé entre les balises sera écrit en italique.

Exemple :

   Ecrit en <I>italique</I>
donnera :
Ecrit en italique

<Img
   ALIGN=ABSBOTTOM|ABSMIDDLE|BASELINE|BOTTOM|LEFT|MIDDLE|RIGHT|TEXTTOP|TOP
   ALT=nom
   BORDER=nombre
   SRC=URL
   LOWSRC=URL
   NAME=nom
   HEIGHT=nombre
   WIDTH=nombre
   UseMap=nomDeMap>

Place une image (.gif ou .jpg exclusivement) dans la page.

Align : spécifie l'alignement de l'image.

Alt : le texte à afficher en attendant le chargement de l'image. Une fois l'image chargée, le texte apparaît à coté du pointeur de souris lorsqu'il passe au dessus.

Border : bordure autour de l'image.

src et lowsrc : adresses des images normale et basse qualité affichée pendant que la normale se charge.

Name : Nom de l'image pour les scripts.

Height : hauteur de l'image.

Width : largeur de l'image.

UseMap : permet de spécifier le plan de zones sensibles de l'image (cf.Map).

Exemple :

   <Img
      Alt="Image"
      Align=absmiddle
      lowsrc="../../images/fondferm.jpg"
      src="../../images/entree.jpg"
      Width=100
      Height=75>
donnera : Image

<Input
   Type=type
   Name=nom>

Permet de définir le corps des formulaires.

Pour les explications et exemples, cliquez sur le bouton ci-dessous.


Remonter
J

Pas d'instructions.


Remonter
K

Pas d'instructions.


Remonter
L

<Layer 
   BackGround=image
   BgColor=couleur
   Left=nombre
   Name=nom
   Top=nombre
   Visibility=show|hide
   Z-Index=nombre>
   Contenu de la couche, comme entre les balises <Body> et </Body>
</Layer>

Le navigateur Netscape 4.0 permet de définir des couches (layers en anglais) de contenu superposées dans votre page Web. Ces couches peuvent être positionnées de façon précise dans votre document. Tout le contenu entre la balise de début et celle de fin peut être traité comme un élément de votre page et pourra être déplacé et modifié de différentes façons. En utilisant des JavaScripts, il est possible d'apporter plusieurs options à vos couches, telles que les déplacer, les cacher et changer leur ordre de superposition.

BackGround : Détermine l'image d'arrière-plan d'une couche. La valeur représente l'URL de l'image. Cet attribut est optionnel. Par défaut les couches sont transparentes, donc elles ne possèdent pas d'image d'arrière-plan.

BgColor : Détermine la couleur d'arrière-plan d'une couche. Cet attribut est optionnel. Par défaut les couches sont transparentes, donc elles ne possèdent pas de couleur d'arrière-plan.

Name : Permet d'identifier la couche. Ce nom doit commencer par une lettre alphabétique. Cet attribut est optionnel.

Left : Spécifie la position horizontale du côté gauche de la couche. Cet attribut est optionnel. La valeur est en pixel. La valeur par défaut est la position de la balise dans le document HTML.

Top : Spécifie la position verticale de la partie supérieure de la couche. Cet attribut est optionnel. La valeur est en pixel. La valeur par défaut est la position de la balise dans le document HTML.

Visibility : Détermine si la couche est visible ou non. Si la valeur est HIDE, la couche ne sera pas visible. Si la valeur est SHOW, la couche sera visible. Cet attribut est optionnel.

Z-Index : Permet d'attribuer un ordre de superposition des couches.

<LI>
   Texte

Le texte suivant cette balise est considéré comme un élément de liste. Voir <UL> et <OL>.


Remonter
M

<Map 
   Name=monMap>
   <Area...>
   <Area...>
</Map>

Cette balise permet d'assembler différentes zones définies à l'aide de <Area> et de superposer de façon transparente le plan ainsi obtenu à une image. Le but est de définir des actions différentes selon la partie de l'image sur laquelle agit le visiteur.

Name : Permet d'identifier le plan.

<Meta 
   CONTENT=nom
   HTTP-EQUIV=directive
   NAME=nom>

La balise META permet de donner des renseignements divers sur la page (auteur,description, mots-clés...) et/ou des directives. Cette balise peut être présente plusieurs fois dans un document. Toutefois, les balises Meta doivent se trouver entre les balises <Head> et </Head>.

Content : contenu de l'info.

Name : nom de l'info.

HTTP-Equiv : Directive. On peut ainsi donner au serveur la date d'expiration des fichiers à mettre à jour ou bien indiquer des temporisations permettant de changer de page après un certain laps de temps.

Exemple :

   <HTML>
   <HEAD>
      <META
         HTTP-EQUIV="Expires"
         CONTENT="31-03-99">
         <!-- indique la date d'expiration des fichiers -->
      <META
         NAME="Author"
         CONTENT="Xavier GARREAU">
         <!-- indique le nom de l'auteur. -->
      <META
         NAME="Description"
         CONTENT="Cette page traite des abus de Quake2 en réseau">
         <!-- donne une brève description du contenu de la page. -->
      <META
         NAME="Keywords"
         CONTENT="Blaise,réseaux,boucherie,tirer,armes,violence,jouer">
         <!-- fournit les mots clés de la page.
              Utile pour les moteurs de recherche. -->
      <META
         HTTP-EQUIV="Refresh"
         CONTENT="12; URL=http://www.visic.com/home.html">
         <!-- Pour une mise à jour, la directive HTTP-EQUIV est "Refresh"
              et le Content indique le temps en secondes et 
              l'url à charger après que ce temps soit écoulé -->
   </HEAD>
   <BODY>
      ...
   </BODY>
   </HTML>

Remonter
N

<NoBR>
   Un texte sans retour chariot.
</NoBR>

Pour information : un texte placé entre les balises <NoBR> et </NoBR> ne sera pas découpé par un retour à la ligne.


Remonter
O

<OL
   Type=1|a|A|i|I>
   <LI>
   <LI>
   ...
</OL>

Cette balise permet de faire des listes ordonnées.

Type : spécifie le type de numérotation 1,2,3,4,... ou i,ii,iii,iv,... ou a,b,c,d,....


Remonter
P

<P
   Align=Left|Center|Right
   Style="éléments de style">

Cette balise commence un paragraphe. La balise de fermeture n'est pas obligatoire mais elle est conseillée, notamment si vous appliquez des styles à vos paragraphes.

Align permet de fixer l'alignement horizontal du paragraphe dans la page.

Style Se reporter à la balise A

Exemple :

   Un paragraphe est suivi par <P align=Right>un autre paragraphe.
donnera :

Un paragraphe est suivi par

un autre paragraphe.

<Param
   Name=nom du paramètre
   Value=valeur du paramètre>

Cette balise permet de passer des paramètres à une applet java présente dans la page.

Name : Le nom du paramètre dans le code Java.

Value : La valeur prise par le paramètre pour cet appel de l'applet.

Exemple : Le code suivant :

   <Applet Code="appletex.class" WIDTH=400 HEIGHT=100>
      <PARAM NAME="message" VALUE="Hi !">
   </APPLET>

permettra à l'applet appélée appletex de posséder un paramètre fixé lors du lancement de l'applet dans la page. Ici le paramètre récupéré est nommé message dans le corps du programme et sa valeur sera Hi ! L'applet se sert ainsi comme d'une constante interne de ce paramètre. La récupération de paramètres dans une applet Java se fait par la méthode getParameter. cf.Introduction à Java.

<Pre>
   Texte
</Pre>

Le texte entre les balises apparaît comme dans un éditeur de texte. Les espaces, retour chariot et tabulations traités comme tel par le navigateur. De plus, la police est à taille fixe.
! Attention : la balise <Pre> créée un nouveau paragraphe.

Exemple :

   Sans Pre : Ici il y a     4 espaces.<BR>
   Avec Pre : <Pre>Ici il y a     4 espaces.</Pre>
donnera :

Sans Pre : Ici il y a 4 espaces.
Avec Pre :
Ici il y a     4 espaces.

Remonter
Q

Pas d'instructions.


Remonter
R

Pas d'instructions.


Remonter
S

<S>
   mot
</S>

Le mot placé entre les balises sera barré.

Exemple :

   Ecrit <S>barré</S>
donnera :
Ecrit barré

<Script
   Langage=javaScript|VBScript>
   Corps du script
</Script>

Ces balises permettent de placer un script dans la page HTML.

Langage : spécifie le type de script employé. Le plus couramment rencontré est le javaScript. Le bon coté du VBScript est son etroite intéraction avec les OLE. Mais il reste des problèmes de compatibilités quelque soit le langage employé... Cela est surtout dû à la bataille régnant entre Netscape et Microsoft, qui cherchent chacun à imposer leur modèle de navigateur, leur variantes de langage... et tout cela ne rend pas la tâche aisée aux commissions de normalisation. cf. Comparatif Navigateurs dans la page Sélection d'utilitaires. et évènements

Exemple :

   Et maintenant,
   <Script Language=javaScript>
      document.write("voici un exemple de JavaScript !");
   </Script>
donnera :
Et maintenant,

<Select
   Name=nom>

Permet de définir le corps des formulaires, les listes.

Pour les explications et exemples, cliquez sur le bouton ci-dessous.

<Sub>
   mot
</Sub>

Le mot placé entre les balises sera écrit en indice.

Exemple :

   Ecrit en <Sub>indice</Sub>
donnera :
Ecrit en indice

<Sup>
   mot
</Sup>

Le mot placé entre les balises sera écrit en exposant.

Exemple :

   Ecrit en <Sup>exposant</Sup>
donnera :
Ecrit en exposant

Remonter
T

<Table
   BackGround=image
   BgColor=couleur
   Border=nombre
   BorderColor=couleur
   Width=nombre|nombre%>
   <TR
      Align=Center|Left|Right
      VAlign=BaseLine|Bottom|Center|Top
      BgColor=couleur
      BorderColor=couleur>
      <TD
         Align=Center|Left|Right
         VAlign=BaseLine|Bottom|Center|Top
         BgColor=couleur
         BorderColor=couleur
         RowSpan=nombre
         ColSpan=nombre>
         Contenu de la cellule
      </TD>
      <TD...>
      </TD>
   </TR>
   <TR...>
      <TD...>
      </TD>
   </TR>
      <TD...>
      </TD>
   <TR...>
   </TR>
   ...
</Table>

Cette balise permet de réaliser des tableaux. On aborde ici les trois balises Table, TR, TD et TH, qui sont intimement liées. Tous les attributs communs à plusieurs balises suivent une règle logique : Un attribut d'une balise écrite plus haut est valable dans toutes les cellules en dépendant sauf si la balise d'une ou de plusieurs de celles-ci le modifie.
Nota : Les balises de fermetures </TR>, </TD> et </TH> sont optionnelles !

Attributs Communs

BgColor pour spécifier la couleur de fond des cellules.

BorderColor pour spécifier la couleur du pourtour des cellules.

Align permet de fixer l'alignement horizontal du contenu des cellules.

VAlign permet de fixer l'alignement vertical du contenu des cellules.

Table définit un tableau.

BackGround utilise une image comme fond pour le tableau.

Width spécifie la largeur, en pixels ou en pourcentage de page, du tableau.

TR définit une ligne. Il y a autant de couples de balises que de lignes dans le tableau.

TD ou TH définit une Cellule. Il y a autant de couples de balises que de cellules dans le tableau. <TH> et <TD> sauf que lors de l'utilisation de <TH>, le contenu est automatiquement centré et en gras.

RowSpan : permet de fusionner des cellules de la même colonne. On fournit le nombre de cellules à fusionner.

ColSpan : permet de fusionner des cellules de la même ligne. On fournit le nombre de cellules à fusionner.

Contenu des cellules : le contenu des cellules est saisi entre les balises de cellules.

<TextArea
   Name=nom>

Permet de définir le corps des formulaires, les zones de saisies.

Pour les explications et exemples, cliquez sur le bouton ci-dessous.


Remonter
U

<U>
   mot
</U>

Le mot placé entre les balises sera souligné.

Exemple :

   Ce texte est <U>souligné</U>
donnera :
Ce texte est souligné

<UL
   Type=Square|Disc|Circle>
   <LI>
   <LI>
   ...
</UL>

Cette balise permet de faire des listes non ordonnées (à puces).

Type : spécifie le type de puce.


Remonter
V

Pas d'instructions.


Remonter
W

<WBR>

Permet d'indiquer entre les balises <NoBR> et </NoBR>, où il est permis d'insérer un retour chariot.


Remonter
X

Pas d'instructions.


Remonter
Y

Pas d'instructions.


Remonter
Z

Pas d'instructions.


Remonter
<!-- -->

<!-- Commentaires -->

Permet de placer des commentaires dans le code HTML.

Exemple :

   Ceci est un <!-- Commentaire -->Texte Normal
donnera :
Ceci est un Texte Normal

Remonter
Evènements

Les évènements servent habituellement à déclencher des exécutions de scripts dans les pages web.
La syntaxe générale pour exécuter un script lorsqu'un évènement survient est :
<NomBalise évènement="fonction;">, par exemple,
<Body onLoad="Alert('Chargement en cours !');">

Les évènements peuvent être rajoutés à de nombreuses balises. Vous trouverez ci-dessous une liste des évènements courants. Toutefois, faites attention : testez vos pages pour connaître les problèmes de compatibilité pouvant exister sur votre site en fonction du navigateur. Le mieux est de faire des essais, en effet, les problèmes vont et viennent et la conception de pages se voyant toujours offrir plus d'outils, on ne peut être sûr de rien... Visitez ce site en entier avec deux navigateurs différents pour vous faire une idée des problèmes qui subsistent au moment où vous lirez ces pages.

Evènements Utiles avec...
Clic Souris : onClick A, Input, Img, ...
Double Clic Souris : onDbClick Input, Img, ...
Changement de contenu : onChange Select, Input(type=text), TextArea, ...
Souris au dessus : onMouseOver Img, A, Area, ...
Souris quittant la zone : onMouseOut Img, A, Area, ...
Arrivée sur l'élément : onFocus Frame, Body, Input, Select, TextArea, ...
Après un focus, focus sur un autre élément : onBlur Frame, Body, Input, Select, TextArea, ...
Chargement : onLoad Body, FrameSet, ...
Quitter : onUnload Body, FrameSet, ...
Erreur : onError Img, ...
Annulation par 'esc' ou bouton stop : onAbort Img, ...

Remonter

Reportez vous aux codes sources des pages pour apprendre le plus de choses possibles sur les scripts et l'HTML. Les pages languages de Yahoo conduisent à de véritables mines d'or. Pour des références plus agréables, (format aide Windows...) reportez vous par exemple chez Visicom Media et téléchargez la version d'essai de webexpert une fois chez eux.

Auteur : Xavier GARREAU
Modifié le 19.10.1999

Votre avis dans le forum.

Zazou Projets

Développement

Utilisation et culture

Ailleurs

Vieilleries

Bonne parole

Partenaire



Ce site existe depuis le 01/02/2003
Pour rapporter un bug : xavier@xgarreau.org.
Hébergement : Maneya.
Essayez ZazouMiniWebServer !
Votre avis dans le forum.