sh.documentations : html

HTML

SGML ET DERIVES

DTD (DEFINE TYPE DOCUMENT)

EXEMPLE

REGROUPEMENT THEMATIQUE DES PRINCIPALES BALISES HTML

LISTE ALPHABETIQUE DES PRINCIPALES BALISES HTML

AUTRES BALISES

CARACTERES SPECIAUX

SGML ET DERIVES

SGML (Standard Generalized Markup Language) : norme de description de document :

- HTML (Hypertext Markup Language) : langage universel de conception de page Web créé en 1998 par le W3C (Word Wide Web Consortium)

- XHTML (Extensible Hypertext Markup Language ) : une ré-écriture du HML

- XML (Extensible Markup Language) : un langage créé pour faciliter l'échange automatisé de contenus entre systèmes d'informations hétérogènes (interopérabilité).

- CSS (Cascading Style Sheets : feuilles de style en cascade) : un langage qui sert à décrire la présentation des documents HTML et XML.

- XSL (Extensible Stylesheet Language) : un e langage de description de feuilles de style du W3C associé à XML.

- XSLT (Extensible Stylesheet Language Transformations) : un langage défini au sein de la recommandation XSL du W3C, pour transformer XML au niveau fonctionnel.

DTD (DEFINE TYPE DOCUMENT)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

- loose.dtd : déclarartions d'éléments permettant l'indexation de documents sur les serveurs Web (HTML4.0).

- xhtml1-transitional.dtd : déclarartions d'éléments permettant l'indexation de documents sur les serveurs Web (XHTML1.0 TRANSITIONAL).

- xhtml1-frameset.dtd : déclarartions d'éléments permettant l'indexation de documents sur les serveurs Web (XHTML1.0 FRAMESET).

- xhtml1-strict.dtd : déclarartions d'éléments permettant l'indexation de documents sur les serveurs Web (XHTML1.0 STRICT).

EXEMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                          <html xmlns="http://www.w3.org/1999/xhtml">

                          <head>

                          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                          <title>Document sans nom</title>

                          </head>

                          <body>

                            Hello !

                            </body>

                            </html>

REGROUPEMENT THEMATIQUE DES PRINCIPALES BALISES HTML

Mise en forme des caractères :

<B> <FONT color> <FONT size> <FONT face> <Hx> <I> <PRE>

Alignements dans la page :

<BR> <NOBR> <BLOCKQUOTE> <CENTER> <DIV align> <Hx align> <P align>

Listes :

<DL> <DT> <DD> <LI> <OL> <UL>

Hyperliens :

<A HREF> <A NAME> <A HREF TARGET> <A HREF TITLE>

Images :

<IMG src> <IMG width> <IMG border> <IMG alt> <IMG align> <IMG hspace> <IMG vspace> <IMG usemap> <MAP name> <AREA shape> <AREA coords> <AREA href>

Tableaux :

<TABLE> <TABLE width> <TABLE height> <TABLE border> <TABLE cellpadding> <TABLE cellspacing> <TABLE bgcolor> <TABLE background> <TABLE bordercolor> <TABLE align> <TR> <TD> <TD bgcolor> <TD background> <TD width> <TD height> <TD align> <TD valign> <TD colspan> <TD rowspan> <TD nowrap> <TH>

Cadres :

<FRAMESET> <FRAMESET rows> <FRAMESET cols> <FRAMESET frameborder> <FRAMESET border> <FRAMESET bordercolor> <FRAME src> <FRAME name> <FRAMLE scrolling> <FRAME noresize><FRAME marginwidth> <FRAME marginheight><FRAME bordercolor> <NOFRAMES>

Formulaires :

<FORM> <FORM action> <FORM method> <INPUT type> <INPUT type=text> <INPUT type=password> <INPUT type=textearea> <INPUT type=checkbox> <INPUT type=radio> <SELECT name> <SELECT size> <OPTION value> <INPUT type=submit/reset> <INPUT type=button> <INPUT type=file>

Objets multimédias :

<BGSOUND src> <BGSOUND loop> <EMBED src> <EMBED width> <EMBED autostart> <EMBED loop> <EMBED hidden> <NOEMBED>

Balises HTML :

<HTML> <HEAD> <TITLE> <BODY> <BODY bgcolor> <BODY background> <BODY vlink> <BODY alink> <BODY link> <BODY topmargin> <BODY leftmargin> <BODY marginheight> <BODY marginwidth> <HR> <HR size> <HR noshade> <HR color> <HR align>

LISTE ALPHABETIQUE DES PRINCIPALES BALISES HTML

Insère un commentaire dans le code HTML

<a href=adresse du fichier>...</a>

Définit un lien hypertexte sur une sélection vers un fichier du même site Internet

<a href=adresse du fichier#nom de l'ancre>...</a>

Définit un lien hypertexte sur une sélection vers un fichier du même site Internet à un endroit précisé par une ancre

<a href=adresse du site Internet>...</a>

Définit un lien hypertexte sur une sélection vers l'adresse d'un site Internet

<a href=mailto:adresse de messagerie>...</a>

Définit un lien hypertexte sur une sélection vers une adresse de messagerie

<a href target=nom de la cible>...</a>

Affiche le résultat du lien hypertexte dans un cadre spécifique

<a href title=message>...</a>

Affiche un message sous forme d'info bulle au dessus du lien hypertexte survolé

<a name=nom de l'ancre>...</a>

Insère une ancre

<area coords=coordonnées>...</a>

Indique les coordonnées (séparées par une virgule) de la zone réactive en fonction de sa forme et de l'image à laquelle elle se rapporte

<area href=nom du fichier>...</a>

Associe un lien hypertexte à une zone réactive

<area shape=rect/circle/poly>...</a>

Définit la forme de la zone réactive (rectangulaire = rect, ovale = circle, polygonale = poly) à l'intérieur de la balise <AMP>

<b>...</b>

Met en gras la sélection

<bgsound src=adresse du fichier son>

Intègre un arrière plan sonore de type WAV ou MIDI au chargement de la page HTML

<bgsound loop=nombre de fois>

Spécifie le nombre de fois ou le son sera joué

<blockquote>...</blockquote>

Crée une marge à gauche et à droite autour de la sélection

<body>...</body>

Délimite le corps de la page HTML devant s'afficher dans la fenêtre du navigateur

<body alink=#XXXXXX>...<body>

Définit la couleur des liens hypertexte activés de la page HTML

<body background=adresse de l'image>...</body>

Définit une image d'arrière plan pour toute la page HTML

<body bgcolor=#XXXXXX>...</body>

Définit une couleur d'arrière plan pour toute la page

<body leftmargin=marge de gauche>...</body>

Modifie la marge de gauche en pixel ou en pourcentage de la page HTML

<body link=#XXXXXX>...</body>

Définit la couleur des liens hypertexte de la page HTML

<body marginheight=marge du haut>...</body>

Modifie la marge du haut en pixel ou en pourcentage de la page HTML

<body marginwidth=marge de gauche>...</body>

Modifie la marge de gauche en pixel ou en pourcentage de la page HTML

<body topmargin=marge du haut>...</body>

Modifie la marge du haut en pixel ou en pourcentage de la page HTML

<body vlink=#XXXXXX>...</body>

Définit la couleur des liens hypertexte visités de la page HTML

<br>

Insère un retour ligne

<center>...</center>

Positionne la sélection au centre

<dd>...</dd>

Insère l'élément défini dans une liste <DL> à l'intérieur d'un <DT>

<div align=left/center/right/justify>...</div>

Positionne différents éléments sélectionnés à gauche, au centre, à droite ou justifiés

<dl>...</dl>

Définit une liste de définition

<dt>...</dt>

Insère l'élément à définir dans une liste <DL>

<embed autostart=true/false>

Spécifie si l'objet multimédia est joué automatiquement par défaut ou non à l'ouverture de la page HTML

<embed hidden>

Cache le panneau de contrôle de la console dans la page HTML

<embed lopp=nombre de fois>

Spécifie le nombre de fois ou le son sera joué

<embed src=adresse du fichier multimédia>

Insère un fichier multimédia dans la page HTML

<embed width=largeur height=hauteur>

Spécifie la largeur et la hauteur en pixel ou en pourcentage de la fenêtre affichant la console dans la page HTML

<font color=#XXXXXX>...</font>

Modifie la couleur de la police de la sélection

<font face=nom de la police>...</font>

Modifie le style de police pour la selection

<font size=taille>...</font>

Modifie la taille en pixel de la police de la selection

<form>...</form>

Définit un formulaire

<form action=adresse du fichier>...</form>

Indique le fichier devant traiter les données envoyées par le formulaire

<font method=post/get>...</fom>

Indique la méthode utilisée pour l'envoi des données en combinaison avec le type de fichier de l'attribut action

<frame bordercolor=#XXXXXX>...</frameset>

Applique une couleur à la bordure du cadre

<frame marginheight=marge du haut>

Crée une marge en haut en pixel ou en pourcentage à l'intérieur du cadre

<frame marginwidth=marge de gauche>

Crée une marge à gauche en pixel ou en pourcentage à l'intérieur du cadre

<frame name=nom du cadre>

Nomme le cadre

<frame noresize>

Empêche de redimensionner le cadre depuis le navigateur

<frame scrolling=yes/no/auto>

Affiche oui ou non ou par défaut des barres de défilement dans le cadre

<frame src=adresse du fichier>

Insère un cadre dans un jeu de cadres en précisant la source du fichier chargé par défaut dans ce cadre

<frameset>...</frameset>

Définit un jeu de cadres

<frameset border=taille de la bordure>...</frameset>

Modifie la taille de la bordure du jeu de cadres

<frameset bordercolor=couleur de la bordure>...</frameset>

Applique une couleur à la bordure du jeu de cadres

<frameset cols=X,X,...>...</frameset>

Définit le nombre et la taille en pixel ou en pourcentage des colonnes dans le jeu de cadres

<frameset frameborder=yes/no>...</frameset>

Affiche oui ou non les bordures du jeu de cadres

<frameset rows=X,X,...>...</frameset>

Définit le nombre et la taille en pixel ou en pourcentage des lignes dans le jeu de cadres

<head>...</head>

Insère un en-tête contenant des informations sur la page HTML de type méta, titre

<hr>

Insère une barre horizontale dans la page HTML

<hr align=left/center/right>

Aligne la barre horizontale à gauche, au centre ou à droite dans la page HTML

<hr color=#XXXXXX>

Modifie la couleur de la barre horizontale

<hr noshade>

Empêche l'ombrage de la barre horizontale

<hr size=largeur de la barre height=hauteur de la barre>

Définit l'épaisseur et la hauteur de la barre horizontale en pixel ou en pourcentage

<html>...</html>

Définit le début et la fin d'une page HTML

<Hx>...</Hx>

Transforme la selection en titre, soit en gras, de la taille la plus grande (H1) à la taille la plus petite (H6)

<Hx align=left/center/right/justify>...<Hx>

Positionne le titre à gauche, au centre, à droite ou justifié

<l>...</l>

Met en italique la sélection

<img align=bottom>

Aligne le texte saisi vers le bas de l'image

<img align=left>

Aligne le texte saisi vers la gauche de l'image

<img align=middle>

Aligne le texte saisi vers le milieu de l'image

<img align=right>

Aligne le texte saisi vers la droite de l'image

<img align=top>

Aligne le texte saisi vers le haut de l'image

<img alt=message>

Affiche un message sous une forme d'info-bulle au dessus de l'image survolée

<img border=taille de la bordure en pixel>

Place un cadre autour de l'image

<img hspace=taille de la marge>

Crée une marge en pixel à gauche et à droite de l'image conjointement à l'attribut align

<img src=adresse de l'image>

Insère une image GIF, JPEG ,ou PNG

<img usemap=#nom de la zone réactive>

Associe l'image insérée à une zone réactive nommée

<img vspace=taille de la marge>

Crée une marge en pixel en haut et en bas de l'image conjointement à l'attribut align

<img width=largeur height=hauteur>

Modifie la largeur et la hauteur de l'image en pixel ou en pourcentage

<input type=button value=etiquette>

Insère un bouton dans le formulaire

<input type=checkbox checked>

Coche une case comme choix par défaut

<input type=checkbox name=nom de la case à cocher>

Insère une case à cocher (plusieurs choix possibles) dans le formulaire

<input type=checkbox value=valeur de la donnée>

Fixe pour la case à ocher la valeur retournée

<input type=file name=nom du champ>

Insère un champ texte et un bouton parcourir pour permettre à l'utilisateur du formulaire de joindre un fichier à l'envoi des données

<input type=password name=nom du champ>

Insère un champ mot de passe dans le formulaire ; le texte saisi à l'intérieur est remplacé par des astérisques

<input type=radio checked>

Coche un bouton radio comme choix par défaut

<input type=radio name=nom du bouton radio>

Insère un bouton radio (un seul choix possible) dans le formulaire

<input type=radio value=valeur du bouton radio>

Fixe pour le bouton radio la valeur retournée

<input type=reset>

Insère un bouton pour annuler les données renseignées dans le formulaire

<input type=submit>

Insère un bouton pour envoyer les données renseignées dans le formulaire

<input type=submit/reset value=etiquette>

Inscrit une légende sur le bouton

<input type=text maxlength=nombre de caractères>

Définit le nombre maximal de caractère que l'utilisateur peut saisir dans le champ texte

<input type=text name=nom du champ>

Insère un champ texte dans le formulaire

<input type=text size=nombre de caractère>

Définit la taille du champ texte en nombre de caractères

<input type=text value=texte par défaut>

Défini la valeur par défaut à afficher dans le champ texte

<input type=textarea cols=nombre de colonnes>

Fixe le nombre de caractères pouvant être saisis par ligne

<input type=textarea name=nom du champ>

Insère un champ multilignes dans le formulaire

<input type=textarea rows=nombre de lignes>

Fixe le nombre de lignes affichées et donc la hauteur du champ multilignes

<li>...</li>

Insère un élément dans une liste <UL> ou <OL>

<map name=nom de la zone réactive>...</map>

Crée une zone réactive

<nobr>...</nobr>

Empêche le retour à la ligne dans la sélection

<noembed>...</noembed>

Fourni un texte ou une image de remplacement pour les navigateurs ne pouvant interpréter la balise

<noframes>...</noframes>

Affiche le contenu spécifié entre les balises dans le cas ou le jeu de cadres n'est pas reconnu par un navigateur

<ol>...</ol>

Définit une liste numérotée

<option checked>

Sélectionne une option comme choix par défaut

<option value=valeur retournée>

Définit le choix à l'intérieur d'un liste de type <select>

<p>...</p>

Transforme la sélection en paragraphe

<p align=left/center/right/justify>...</p>

Positionne le paragraphe à gauche, au centre, à droite ou justifié

<code>...</code>

Affiche la selection telle en mode "code"

<select multiple>...</select>

Autorise plusieurs choix dans une liste de type menu

<select name=nom de la liste>...</select>

insère une liste dans le formulaire

<select size=1 ou plus>...</select>

Définit une liste de type déroulante (si size = 1, valeur par défaut ou sous forme de menu (si size>1))

<strike>...</strike>

Affiche la sélection barrée

<sub>...</sub>

Met en indice la sélection

<sup>...</sup>

Met en exposant la selection

<table>...</table>

Définit un tableau

<table align=left/right/center>...</table>

Aligne le tableau dans la page

<table background=adresse de l'image>...</table>

Définit une image d'arrière plan

<table bgcolor=#XXXXXX>...</table>

Définit une couleur d'arrière plan

<table border=taille de la bordure>...</table>

Modifie la largeur en pixel de la bordure du tableau

<table bordercolor=#XXXXXX>...</table>

Définit une couleur pour la bordure du tableau

<table cellpadding=taille de la marge>...</table>

Crée une marge interne en pixel à l'intérieur de chaque cellule

<table cellspacing=taille de l'espacement>...</table>

Crée un espacmeent en pixel entre les cellules d'un tableau

<table height=hauteur>...</table>

Définit la hauteur d'un tableau en pixel ou en pourcentage

<table width=largeur>...</table>

Définit la largeur d'un tableau en pixel ou en pourcentage

<td>...</td>

Insère une cellule à l'intérieur d'une ligne

<td align=left/right/center>...</td>

aligne le contenu d'une cellule horizontalement à gauche, à droite, ou au centre

<td background=adresse de l'image>...</td>

Définit une image d'arrière-plan d'une cellule

<td bgcolor=#XXXXXX>...</td>

Définit une couleur d'arrière plan d'une cellule

<td colspan=nombre de cellules>...</td>

Fusionne des cellules horizontalement

<td height=hauteur>...</td>

Définit la hauteur d'une cellule en pixel ou en pourcentage

<td nowrap>...</td>

Désactive le retour à la ligne à l'intérieur d'une cellule

<td rowspan=nombre de lignes>...</td>

Fusionne des cellules verticalement

<td valign=bottom/middle/top>...</td>

Aligne le contenu d'une cellule verticalement vers le haut, le milieu ou le bas de la cellule

<td width=largeur>...</td>

Définit la largeur d'une cellule en pixel ou en pourcentage

<th>...</th>

Définit une cellule d'en-tête d'un tableau

<title>...</title>

Insère un titre entre <head> et </head> pour s'afficher dans la barre de titre du navigateur

<tr>...</tr>

Insère une ligne à l'intérieur d'un tableau

<u>...</u>

Souligne la sélection

<ul>...</ul>

Définit une liste à puce

AUTRES BALISES

<cite>...</cite>

Une citation

<acronym title="titre" >...</acronym>

Un titre sur un texte

<adress title="titre" >...</adress>

Une adresse sur un texte

<bdo dir="rtl" >...</bdo>

Affichage d'un texte en sens inverse

<bgsound src="musique.mid" lopp="infinite" volume="0" balance="+1000">

Lecture d'un fichier audio

<code>texte</code>

Un code informatique

<del>texte</del>

Un texte barré

<dfn>texte</dfn>

Une définition

<hr width="100%" noshade size="5" color="#000000" align="center">

Une barre horizontale

<kbd>texte</kbd>

Texte style caractère literaux

<listing>texte</listing>

affichage d'un programme informatique

<marquee behavior="alternate" bgcolor="#000000" >texte</marquee>

Un texte derroulant

<ruby><rt>texte</ruby>

Un texte en citation toute petite

CARACTERES SPECIAUX

CARACTERES	CODE ISO	CODE HTML 4.0
"	"	"
&	&	&
}	}
{	{
€		€

‚
ƒ
„
…
†
‡
ˆ
‰
Š
‹		<
Œ

Ž


‘
’
“
”
•
–
—
˜
™
š
›		>
œ		&oelig;

ž
Ÿ		&Yuml;
espace
¡	¡	¡
¢	¢	¢
£	£	£
¤	¤	¤
¥	¥	&yen
¦	¦	¦
§	§	§
¨	¨	¨
©	©	©
ª	ª	ª
«	«	«
¬	¬	¬

®	®	®
¯	¯	&masr;
°	°	°
±	±	±
²	²	²
³	³	³
´	´	´
µ	µ	µ
¶	¶	¶
·	·	·
¸	¸	¸
¹	¹	¹
º	º	º
»	»	»
¼	¼	¼
½	½	½
¾	¾	¾
¿	¿	¿
À	À	À
Á	Á	Á
Â	Â	Â
Ã	Ã	Ã
Ä	Ä	Ä
Å	Å	Å
Æ	&#198	&Aelig
Ç	Ç	Ç
È	È	È
É	É	É
Ê	Ê	Ê
Ë	Ë	Ë
Ì	Ì	Ì
Í	Í	Í
Î	Î	Î
Ï	Ï	Ï
Ð	Ð	ð
Ñ	Ñ	Ñ
Ò	Ò	Ò
Ó	Ó	Ó
Ô	Ô	Ô
Õ	Õ	Õ
Ö	Ö	Ö
×	×	×
Ø	Ø	Ø
Ù	Ù	Ù
Ú	Ú	Ú
Û	Û	Û
Ü	Ü	Ü
Ý	Ý	Ý
Þ	Þ	þ
ß	ß	ß
à	à	à
á	á	á
â	â	â
ã	ã	ã
ä	ä	ä
å	å	å
æ	æ	æ
ç	ç	ç
è	è	è
é	é	é
ê	ê	ê
ë	ë	ë
ì	ì	ì
í	í	í
î	î	î
ï	ï	ï
ð	ð	ð
ñ	ñ	ñ
ò	ò	ò
ó	ó	ó
ô	ô	ô
õ	õ	õ
ö	ö	ö
÷	÷	÷
ø	ø	ø
ù	ù	ù
ú	ú	ú
û	û	û
ü	ü	ü
ý	ý	ý
þ	þ	þ
ÿ	ÿ	ÿ