HTML

Cours HTML
© AIR Nicolas PENSEYRES

Rue du Centre 11-13
CH-1450 Sainte-Croix
Case postale 248
Tél. 024 454 34 46
Fax 024 454 34 00
http://www.planetair.ch
1
Oui - Non - Facultatif
Index des Balises *: signifie que la balise est dite propriétaire
(ne fonctionne qu’avec) d’ I.Explorer ou de
N.Navigator
Balise Fermeture Attribut Description Origine
<!DOCTYPE> N N Version du HTML utilisé HTML 2.0

 N N Commentaire HTML 2.0
<ABBR> O N Abréviation HTML 2.0
<ACRONYM> O N Acronyme HTML 4.0
<ADDRESS> O N URL sous forme textuel HTML 2.0
<A HREF> O O Lien hypertexte HTML 2.0
<APPLET> O O Insertion d’applet Java HTML 3.0
<AREA> N O Zone cliquable N.N 2.0
<B> O N Texte en gras HTML 2.0
<BASE> N O Déf. sup. de l’URL de la page HTML HTML 2.0
<BASEFONT> N O Taille par défaut d’une police N.N 1.0
<BDO> O N Changement de direction impossible HTML 3.0
<BGSOUND> N O Insertion de fichier audio * I.E 3.0
<BIG> O N Police de taille plus importante HTML 3.0
<BLINK> O N Clignotement du texte * N.N 1.0
<BLOCKQUOTE> O N Légère marge à gauche HTML 2.0
<BODY> F O Corps du document HTML 2.0
<BR> N O Saut de ligne HTML 2.0
<BUTTON> O N Bouton dans un formulaire * I.E 4.0
<CAPTION> O O Titre de tableau HTML 3.0
<CENTER> O N Centrage HTML 3.0
<CITE> O N Texte sous forme de citation HTML 2.0
<CODE> O N Texte sous forme de code source HTML 2.0
<COL> N O Déf. d’une colonne d’un tableau * I.E 3.0
<COLGROUP> F N Regroupement de colonnes (tableau) * I.E 3.0
<COMMENT> O N Commentaire * I.E 3.0
<DD> F N Définition d’un terme HTML 2.0
<DEL> O N Fourni des infos sur un document HTML 2.0
<DFN> O N Texte sous forme logique HTML 2.0
<DIR> O N Liste à plusieurs dimensions HTML 2.0
<DIV> O O Structuration d’objets quelconques HTML 3.0
<DL> O O Structure d’un glossaire HTML 2.0
<DT> F N Elément d’un glossaire HTML 2.0
<EM> O N Emphase (italique) HTML 2.0
<EMBED> N O Insertion d’applications multimédia N.N 2.0
<FIELDSET> O N Regroupement de zones dans les formulaires HTML 2.0
<FONT> O O Définition du texte HTML 2.0
<FORM> O O Début du formulaire HTML 2.0
<FRAME> N O Structure d’un cadre (frame) N.N 2.0
<FRAMESET> O O Fichier d’index pour les cadres (frame) N.N 2.0
<H1> O O Titre de niveau 1 HTML 2.0
2
Index des Balises
<HEAD> F N En-tête d’un fichier HTML HTML 2.0
<HR> N O Filet Horizontal (séparation) HTML 2.0
<HTML> F N Structure externe d’une page HTML HTML 2.0
<I> O N Texte en italique HTML 2.0
<IFRAME> O O Définition d’un cadre local * I.E 3.0
<IMG> N O Insertion d’image HTML 2.0
<INPUT> N O Zone de saisie dans un formulaire HTML 2.0
<INS> O N Fourni des infos sur un document HTML 2.0
<ISINDEX> N O Déf. d’un fichier de recherche (script CGI) HTML 2.0
<KBD> O N Texte de type machine à écrire HTML 2.0
<LABEL> O N Extension de la balise FORM * I.E 3.0
<LAYER> O O Définition des couches (layers) sous Netscape * N.N 4.0
<LEGEND> O N Légende de tableau HTML 3.0
<LI> O O Elément d’une liste HTML 2.0
<LINK> N O Lien indépendant du média HTML 2.0
<MAP> O N Structure externe de la zone cliquable N.N 2.0
<MARQUEE> O O Texte défilant * I.E 3.0
<MENU> O O Liste de type menu HTML 2.0
<META> N O Informations sur la page HTML HTML 2.0
<NEXTID> N O Indique le document suivant HTML 2.0
<NOBR> O N Pas de passage à la ligne N.N 1.0
<NOEMBED> O N Contenu alternatif aux applications multimédia N.N 2.0
<NOFRAMES> O N Contenu alternatif aux cadres (frame) N.N 2.0
<NOSCRIPT> O N Contenu alternatif aux scripts N.N 2.0
<OBJECT> O O Insertion d’objet (multimédia, applet, ...) HTML 4.0
<OL> O O Liste ordonnée HTML 2.0
<P> F N Début d’un paragraphe (saut de 2 lignes) HTML 2.0
<PARAM> N O Paramètres d’un objet inséré HTML 2.0
<PRE> O N Texte préformaté HTML 2.0
<Q> O O Citations longues HTML 4.0
<S> O N Texte barré HTML 3.0
<SAMP> O N Texte sous forme d’exemple HTML 2.0
<SCRIPT> O N Insertion de script (JavaScript) N.N 2.0
<SELECT> O N Définition d’une liste de formulaire HTML 2.0
<SMALL> O N Police de taille moins importante HTML 3.0
<SPAN> O N Structuration d’éléments dans une ligne HTML 3.0
<STRIKE> O N Texte barré HTML 2.0
<STRONG> O N Texte en gras HTML 2.0
<STYLE> O O Défini les feuilles de style HTML 3.0
<SUB> O N Texte sous forme d’indice HTML 3.0
<SUP> O N Texte sous forme d’exposant HTML 3.0
<TABLE> O O Structure d’un tableau HTML 3.0
<TBODY> F N Regroupement de tableaux I.E 3.0
<TD> F N Cellule d’un tableau HTML 3.0
<TEXTAREA> O N Zone de saisie à plusieurs lignes HTML 3.0
<TFOOT> F N Regroupement de tableaux I.E 3.0
3
Index des Balises
<TH> F N Cellule d’en-tête d’un tableau HTML 3.0
<THEAD> F N Regroupement de tableaux HTML 3.0
<TITLE> O N Titre de votre page HTML 2.0
<TR> F N Ligne d’un tableau HTML 3.0
<TT> O N Texte de type machine à écrire HTML 2.0
<U> O N Texte souligné HTML 3.0
<UL> O N Liste à puces HTML 2.0
<VAR> O N Texte sous forme de variable HTML 2.0
<WBR> N N Désactive la balise <NOBR> N.N 1.0
<XMP> O O Texte sous forme d’exemple HTML 2.0
4
HTML
ATTRIBUTS
ALIGN Permet de spécifier l’alignement du document (LEFT, CENTER, RIGHT
ou JUSTIFY). Uniquement Internet Explorer.
ALINK Permet de spécifier la couleur des liens actifs.
BACKGROUND Permet de spécifier l’image d’arrière-plan (format gif ou jpeg).
BGCOLOR Permet de spécifier la couleur d’arrière-plan.
BGPROPERTIES Si la valeur est FIXED, le fond reste fixe lors du déroulement du docu-
ment. Uniquement Internet Explorer.
CLASS Nom de la classe donnée à la feuille de style.
LEFTMARGIN Permet de spécifier une marge de gauche pour le document (en pixel).
LINK Permet de spécifier la couleur des liens.
SCROLL Permet de désactiver les barres de défilement du navigateur (valeur: no).

Uniquement Internet Explorer.
STYLE Feuille de style intraligne.
TEXT Permet de spécifier la couleur du texte.
TOPMAGRIN Permet de spécifier une marge supérieure pour le document (en pixel).
VLINK Permet de spécifier la couleur des liens visités.
EVENEMENT Spécifie un événement Javascript (HTML 4.0) (OnClick, OnMouseOver,

...).
5
HTML
Structure de page
Commande Attributs Description
<html>...</html> Entoure toute la page HTML
<head>...</head> Délimite l’en-tête
<body>...</body> Délimite le corps
background="..." Image d’arrière plan
bgcolor="..." Couleur de l’arrière plan
text="..." Couleur du texte
link="..." Couleur de lien non activé
alink="..." Couleur de lien activé
vlink="..." Couleur de lien visité
Commandes de l’en-tête
<title>...</title> Titre du document
<base> Définition d’un renvoi éventuel
href="..." URL de la page de renvoi
target="..." Définition de la cible de tous les liens de la page
<isindex> Définition de la page pour des scripts de recherche
prompt="..." Sortie dans un script de recherche
action="..." Définition des programmes de recherche à bloquer
<link> Lien général vers un autre document
href="..." URL du document lié
name="..." Nom d’une ancre éventuellement sur la page liée
rel="..." Relation entre les deux pages
rev="..." Relation inversée entre les deux pages
urn="..." Définition d’un numéro d’attribution unique autre que
URL
title="..." Titre du document relié
methods="..." Méthode de transmission de document relié
<meta> Information supplémentaire sur le document
http-equiv="..." Crée une nouvelle zone HTTP avec les informations
indiquées
name="..." Nom de l’information META
content="..." Contenu de l’information META
<basefont> Taille de la police par défaut
size="..." Taille de 1 à 7
6
HTML
Titres
<h1>...</h1> Titre de niveau 1
align="..." Alignement (LEFT, CENTER, RIGHT)
Paragraphes et passages de texte

<p>...</p> Paragraphe simple (Balise de fin optionnelle)
align="..." Alignement (LEFT, CENTER, RIGHT, JUSTIFY)
<div>...</div> Définit un passage de texte
Commentaires
 Cache le texte du commentaire
Listes
<ol>...</ol> Liste numérotée
type="..." Type de numérotation (A, a, I, i, 1)
start="..." Première valeur
<ul>...</ul> Liste non numérotée (à puces)
type="..." Type de puces (DISC, CIRCLE, SQUARE)
<li>...</li> Marque un élément de la liste
type="..." Type (A, a, I, i, 1) ou (DISC, CIRCLE, SQUARE)
value="..." Valeur pour cet élément
<dl>...</dl> Liste de définitions
compact Formatage compact des caractères
<dt> Terme défini
<dd> Terme défini
7
HTML
Mise en forme du texte
<address>...</address> Formatage des coordonnées d’un auteur
<em>...</em> Texte de mise en valeur (italique)
<strong>...</strong> Texte renforcé (gras)
<code>...</code> Listings de programme
<kbd>...</kbd> Saisie utilisateur
<var>...</var> Variable
<samp>...</samp> Exemple
<dfn>...</dfn> Définition
<cite>...</cite> Citation
<b>...</b> Caractères gras
<i>...</i> Caractères italiques
<u>...</u> Caractères soulignés
<tt>...</tt> Caractères de machine à écrire
<pre>...</pre> Texte pré-formaté
<big>...</big> Caractères plus grands
<small>...</small> Caractères plus petits
<sub>...</sub> Indice
<sup>...</sup> Exposant
<strike>...</strike> Texte barré
<s>...</s> Texte barré
<q>...</q> Citation étendue
Mise en forme de caractères

<basefont> Taille de la police par défaut (se défini dans l’en-tête)
size="..." Taille de 1 à 7
<font>...</font> Définit la police et sa taille
size="..." Taille de 1 à 10 ou valeur relatives (exemple: -2)
color="..." Couleur des caractères
face="..." Définit la police
8
HTML
Autres éléments de mise en forme
<hr> Ligne horizontale
size="..." Epaisseur de la ligne en pixels
width="..." Longueur de la ligne
noshade Supprime l’effet d’ombrage
color="..." Couleur de la ligne
<br> Retour à la ligne
clear="..." Empêche le texte d’entourer une image
(LEFT, CENTER, RIGHT)
<nobr>...</nobr> Supprime les retours à la ligne automatiques
<wbr> Suggère un endroit ou le texte peut être coupé
<blockquote>...</blockquote> Citations sur plusieurs lignes
<center>...</center> Centre le texte
<blink>...</blink> Texte clignotant (seulement Netscape !)
Images
<img> Insère une image
src="..." Source / Chemin relatif de l’image
width="..." Largeur de l’image
height="..." Hauteur de l’image
alt="..." Texte alternatif à l’image
align="..." Alignement de l’image en fonction de la page ou du
texte (LEFT, RIGHT, TOP, MIDDLE, BOTTOM,
TEXTTOP, ABSMIDDLE, BASELINE, ABSBOTTOM)
vspace="..." Distance verticale avec d’autres éléments
hspace="..." Distance verticale avec d’autres éléments
border="..." Epaisseur du cadre en pixels
lowsrc="..." URL de la première image qui doit se charger
ismap Définition d’une image interactive
usemap="..." Définition de l’image interactive à utiliser
9
HTML
Images interactives (zones cliquables)
<map>...</map> Partie de déclaration pour USEMAP
name="..." Nom de l’image interactive
<area> Début de la déclaration de la zone cliquable
shape="..." Forme de la zone cliquable (CIRCLE, RECT, POLY)
coords="..." Coordonnées de la zone cliquable
href="..." URL du fichier relié
nohref Zone cliquable désactivée
Liens
<a>...</a> Crée un lien si associé à HREF et une ancre si
associé à NAME
href="..." URL du fichier référencé
name="..." Nom de l’ancre
rel="..." Relation entre les fichiers
rev="..." Relation inverse entre les fichiers
urn="..." Définition d’un numéro d’attribution unique autre que
URL
title="..." Titre du fichier relié
methods="..." Méthode de transmission du fichier relié
target="..." Nom du cadre ciblé
10
HTML
Tableaux
<table>...</table> Définit le tableau
border="..." Epaisseur du cadre du tableau en pixels
frame="..." Emplacement du cadre
cellspacing="..." Espace vide entre les cellules
cellpadding="..." Espace vide entre le bord et la cellule
noflow Désactive le flux du texte
width="..." Largeur du tableau
height="..." Hauteur du tableau
align="..." Alignement du tableau (LEFT, CENTER, RIGHT)
bordercolor="..." Couleur de la bordure
bordercolordark="..." Couleur de cadre foncé
bordercolorlight="..." Couleur de cadre clair
bgcolor="..." Couleur de l’arrière plan du tableau
background="..." Définit l’image de fond du tableau
Titres et légendes de tableaux

<caption>...</caption> Titre, légende du tableau

align="..." Alignement horizontal (LEFT, CENTER, RIGHT)
valign="..." Alignement vertical (TOP, BOTTOM)
Lignes de tableaux
<tr>...</tr> Définit une ligne de tableau
align="..." Alignement horizontal du contenu (LEFT, CENTER,
RIGHT)
valign="..." Alignement vertical (TOP, MIDDLE, BOTTOM,
BASELINE)
nowrap Interdit le retour à la ligne
bordercolor="..." Couleur de la bordure de la ligne
bordercolordark="..." Couleur de cadre foncé de la ligne
bordercolorlight="..." Couleur de cadre clair de la ligne
11
HTML
Cellules de tableaux
<th>...</th> Défini une ligne d’en-tête pour le tableau
align="..." Alignement horizontale (LEFT, CENTER, RIGHT)
valign="..." Alignement vertical (TOP, MIDDLE, BOTTOM, BASE-
LINE)
rowspan="..." Nombre de lignes à fusionner
colspan="..." Nombre de colonnes à fusionner
width="..." Largeur de la ligne d’en-tête
height="..." Hauteur de la ligne d’en-tête
bgcolor="..." Couleur d’arrière plan de la ligne d’en-tête
<td>...</td> Définit une cellule de tableau
align="..." Alignement horizontal du contenu (LEFT, CENTER,
RIGHT)
valign="..." Alignement vertical (TOP, MIDDLE, BOTTOM, BASE-
LINE)
rowspan="..." Nombre de lignes à fusionner
colspan="..." Nombre de colonnes à fusionner
width="..." Largeur de la cellule
height="..." Hauteur de la cellule
bgcolor="..." Couleur d’arrière plan de la cellule
background="..." Définit l’image de fond de la cellule
bordercolor="..." Couleur de la bordure de la cellule
bordercolordarck="..." Couleur de cadre foncé de la cellule
bordercolorlight="..." Couleur de cadre clair de la cellule
12
HTML
Les Frames
<frameset>...</frameset> Subdivise une page en plusieurs cadres
rows="..." Nombre de volets horizontaux
cols="..." Nombre de volets verticaux
<noframes>...</noframes> Texte de remplacement
Les Cadres
<frame> Définit un cadre
src="..." URL de la page à charger dans le cadre
name="..." Nom du cadre
marginwidth="..." Marge horizontale entre le contenu de la page et la
bordure
marginheight="..." Marge verticale entre le contenu de la page et la bor-
dure
scrolling="..." Affichage des barres de défilement (NO, YES, AUTO)
noresize Empêche l’utilisateur de modifier les dimensions
frameborder="..." Affichage de la bordure du cadre (YES, NO)
framespacing="..." Espace entre les cadres
<iframe>...</iframe> Cadre flottant (seulement Internet Explorer !)
name="..." Nom du cadre
width="..." Largeur du cadre flottant
height="..." Hauteur du cadre flottant
Liens de cadres
<a>...</a> Crée un lien en association avec l’attribut HREF

target="..." Nom du cadre visé
name="_self" Le nouveau doc. s’affiche dans le cadre du doc d’ori-
gine
name="_parent" Le nouveau doc. s’affiche dans le cadre de niveau
immédiatement supérieur
name="_blank" Le nouveau doc. s’affiche dans une nouvelle fenêtre
de navigateur
<base>...</base> name="_top" Le nouveau document s’affiche par-dessus le framset
13
HTML
Formulaires
<form>...</form> Définit le formulaire
action="..." URL du script à exécuter
method="..." Méthode d’acheminement des données (GET, POST)
name="..." Nom du formulaire
<input> Elément de saisie
type="..." CHECKBOX, HIDDEN, RADIO, RESET, SUBMIT,
TEXT, SEND, FILE, IMAGE, PASSWORD
name="..." Nom de l’élément de saisie
value="..." Valeur
src="..." Source de l’image utilisée
checked Active les CHECKBOX ou RADIO
size="..." Taille en caractère de la zone de saisie
maxlength="..." Nombre de caractère de la zone de saisie
align="..." Alignement de l’image (LEFT, RIGHT, TOP, MIDDLE,
BOTTOM, TEXTTOP, ABSMIDDLE, BASELINE,
ABSBOTTOM)
tabindex="..." Ordre de déplacement avec la touhe TAB
disable Désactive un élément
readonly Protège un élément contre l’écriture
accesskey="..." Indication d’un raccourci
<textarea>...</textarea> Elément de saisie de texte multi-ligne
rows="..." Nombre de lignes de textes affichées
cols="..." Nombre de caractères par ligne affichés
wrap="..." Retour à la ligne (OFF, VIRTUAL, PHYSICAL)
<select>...</select> Menu ou liste déroulant
size="..." Nombre de ligne visibles dans la liste
multiple="..." Permet des sélections multiples
<option>...</option> Elément de liste déroulant
selected Marque l’élément comme sélectionné
value="..." Valeur de l’élément
<fieldset>...</fieldset> Regroupement d’élément de formulaire, encadrement
d’un groupe
<legend>...</legend> Intitulé d’une rubrique contenant plusieurs éléments
align="..." Alignement de l’intitulé (LEFT, RIGHT)
14
HTML
15
Table des caractères
HTML
Caractère Code ISO Entité Caractère Code ISO Entité
&#129 ¡ &#161 ¡

, &#130 ¢ &#162 ¢
ƒ &#131 £ &#163 £
„ &#132 &#164 ¤
… &#133 &#165 ¥
† &#134 &#166 ¦
‡ &#135 § &#167 §
ˆ &#136 ¨ &#168 ¨
‰ &#137 © &#169 ©
&#138 ª &#170 ª
‹ &#139 « &#171 «
Œ &#140 ¬ &#172 ¬
&#141 - &#173
&#142 ® &#174 ®
&#143 ¯ &#175 &masr;
&#144 ° &#176 °
` &#145 ± &#177 ±
´ &#146 &#178 ²
“ &#147 &#179 ³
˜ &#148 ´ &#180 &racute;
• &#149 µ &#181 µ
- &#150 ¶ &#182 ¶
– &#151 · &#183 ·
~ &#152 ¸ &#184 ¸
™ &#153 &#185 &supl;
&#154 º &#186 º
› &#155 » &#187 »
œ &#156 1⁄4 &#188 ¼
&#157 1⁄2 &#189 ½
&#158 3⁄4 &#190 ¾
Ÿ &#159 ¿ &#191 ¿
espace &#160 &nbsp
voir
16
HTML
Caractère Code ISO Entité Caractère Code ISO Entité
À &#192 À à &#224 à

Á &#193 Á á &#225 á
Â &#194 Â â &#226 â
Ã &#195 Ã ã &#227 ã
Ä &#196 Ä ä &#228 ä
Å &#197 Å å &#229 å
Æ &#198 &Aelig; æ &#230 æ
Ç &#199 Ç ç &#231 ç
È &#200 È è &#232 è
É &#201 É é &#233 é
Ê &#202 Ê ê &#234 ê
Ë &#203 Ë ë &#235 ë
Î &#204 Ì ì &#236 ì
Í &#205 Í í &#237 í
Î &#206 Î î &#238 î
Ï &#207 Ï ï &#239 ï
&#208 Ð &#240 ð
Ñ &#209 Ñ ñ &#241 ñ
Ò &#210 Ò ò &#242 ò
Ó &#211 Ó ó &#243 ó
Ô &#212 Ô ô &#244 ô
Õ &#213 Õ õ &#245 õ
Ö &#214 Ö ö &#246 ö
&#215 × ÷ &#247 ÷
Ø &#216 Ø ø &#248 ø
Ù &#217 Ù ù &#249 ù
Ú &#218 Ú ú &#250 ú
Û &#219 Û û &#251 û
Û &#220 Ü ü &#252 ü
Ü &#221 Ý &#253 ý
&#222 Þ &#254 þ
ß &#223 ß ÿ &#255 ÿ
voir
17
Tableau des 16 couleurs reconnues selon
HTML la norme HTML 3.22:
Nom Couleur affichée Nom Couleur affichée

BLACK Noir MAROON Marron ou rouge foncé
GREEN Vert OLIVE Vert olive
NAVY Bleu marine PURPLE Violet
TEAL Cyan foncé GRAY Gris
SILVER Argent RED Rouge
LIME Vert clair YELLOW Jaune
BLUE Bleu FUCHSIA Fuchia
AQUA Bleu clair WHITE Blanc
Tableau des couleurs reconnues unique-

voir ment avec les versions 4 ou 5 des navi-
gateurs
Nom Couleur affichée Nom Couleur affichée
ALICEBLUE bleu clair DARKSLATEBLUE bleu foncé

ANTIQUEWHITE blanc cassé DARKSLATEGRAY bleu-gris foncé
AQUAMARINE bleu-vert DARKTURQUOISE turquoise foncé
AZURE Bleu azur DARKVIOLET violet foncé
BEIGE beige DEEPPINK rose foncé
BISQUE beige foncé DEEPSKYBLUE bleu ciel
BLANCHEDALMOND beige foncé DIMGRAY gris profond
BLUEVIOLET bleu-violet DODGERBLUE bleu clair
BROWN brun FIREBRICK rouge foncé
BURLYWOOD brun-beige FLORALWHITE coquille d’oeuf
CADETBLUE bleu-gris FORESTGREEN vert forêt
CHARTEUSE vert clair GOLD doré
CHOCOLATE brun clair GREENYELLOW vert-jaune
CORAL rose corail INDIGO indigo
CORNFLOWERBLUE bleuet IVORY ivoire
CORNSILK rose clair KHAKI khaki
CRIMSON rouge pourpre LAVENDER lavande
CYAN cyan LINEN lin
DARKBLUE bleu foncé MAGENTA magenta
DARKCYAN cyan foncé OLDACE rose pâle
DARKGOLDENROD doré foncé ORANGE orange
DARKGRAY gros foncé ORCHID orchidée
DARKGREEN vert foncé PINK rose
DARKKHAKI khaki foncé PLUM prune
DARKMAGENTA magenta foncé SALMON saumon
DARKOLIVEGREEN vert olive foncé SNOW blanc neige
DARKORANGE orange foncé TOMATO rouge tomate
DARKORCHID mauve foncé TURQUOISE turquoise
DARKRED rouge foncé VIOLET violet
DARKSALMON saumon foncé WEATH couleur blé
DARKSEAGREEN vert mer YELLOWGREEN jaune-vert
18
Base
HTML
Base
Principe d’affichage d’une page html.
<HTML> Document HyperText Markup Language

<HEAD> Tête
</HEAD> Fin de tête
<BODY> Page (Corp)
</BODY> Fin de page (Fin de corps)
</HTML> Fin de document HyperText Markup Language
Principe d’affichage d’une page html en rouge

<HEAD> Tête
<BODY bgcolor=red> Corps couleur de fond rouge
</BODY> Find de corps
Principe d’affichage d’une page html en rouge avec

un titre de document

<HEAD> Début de Tête
<TITLE> Début de titre
Titre de la page Contenu
</TITLE> Fin de titre
<BODY bgcolor=red> Corps couleur de fond rouge
19
Fond d’écran
HTML
Affichage d’un image jpg nommée bg_eau.jpg comme fond de page. voir
Le motif jpg est reproduit sur toute la surface de l’écran.

<HEAD> Début de tête
Fond d’écran Contenu défini par l’utilisateur
<BODY background=bg_eau.jpg> Corps avec fichier image séparé en fond
Le motif jpg est reproduit sur toute la surface de l’écran.
L’utilisation de l’ascenseur pour le texte ne fait pas bouger le fond de l’écran.

Fond d’écran Contenu défini par l’utilisateur
<BODY background=bg_eau.jpg bgproperties=fixed>
<h1>Arrière-Plan figé</h1> Contenu défini par l’utilisateur
<h1>Cette</h1> Contenu défini par l’utilisateur
<h1>qualité</h1> Contenu défini par l’utilisateur
<h1>ne</h1> Contenu défini par l’utilisateur
<h1>fonctionne</h1> Contenu défini par l’utilisateur
<h1>qu’</h1> Contenu défini par l’utilisateur
<h1>avec</h1> Contenu défini par l’utilisateur
<h1>Microsoft</h1> Contenu défini par l’utilisateur
<h1>Explorer</h1> Contenu défini par l’utilisateur
20
Les styles
HTML
Le motif jpg est reproduit sur toute la surface de l’écran
L’utilisation de l’ascenseur pour le texdte ne fait pas bouger le fond de l’écran.
Pour cette page, des styles on étés utilisés.

Les styles
</TITLE> Début de titre
<style type="text/css"> Définition du style

</style> Fin de style
<BODY background=bg_eau.jpg bgproperties=fixed>
<h1>Arrière-Plan figé</h1> Contenu défini par l’utilisateur
21
Feuilles de styles
HTML
body {
font-size: 10pt;
font-family: Arial, Geneva, Helvetica, sans-serif;
color: white;
}
.copy {
font-size: 7pt;
font-family: Comic sans MS;
color: red;
}
.small {
font-size: 8pt;
color: red;
}
.normal {
font-size: 12pt;
color: green;
}
.normalbold {
font-size: 12pt;
color: green;
font-weight: bold;
}
.big {
font-size: 24pt;
color: yellow;
}
.bigred {
font-size: 36pt;
font-weight: bold;
color: red;
}
.nodeco {
text-decoration: none;
color: black;
}
A:link { color: black }
A:visited { color: black }
A:active { color: red }
Exemple de feuiille de styleenregistré au format TXT. voir
22
Application des styles
HTML
Affichage d’un image jpg nommée bg_eau.jpg comme fond de page.
Le motif jpg est reproduit sur toute la surface de l’écran. L’utilisation de l’ascenseur pour le texte ne fait
pas bouger le fond de l’écran.
Pour cette page, des styles on étés utilisés.
Microsoft Internet Explorer voir
<HTML>
<HEAD>
<TITLE>
Titre de la page
</TITLE>
<link title="link" rel=stylesheet href="stylesheet.txt">
</HEAD>
<BODY bgcolor=black>
<ul type=disc>
<li>Ceci est un texte normal découlant de "Body"
<li class=small>Ceci est un texte de classe "Small" ...
<li class=normal>Ceci est un texte de classe "Normal" ...
<li class=big>Ceci est un texte de classe "Big" ...
</ul>
</BODY>
</HTML>
Netscape voir
<HTML>
<HEAD>
<TITLE>
Titre de la page
</TITLE>
<link title="link" rel=stylesheet href="stylesheet.txt">
</HEAD>
<BODY bgcolor=black>
<ul type=disc>
<li>Ceci est un texte normal découlant de "Body"
<li><font class=small>Ceci est un texte de classe "Small" ...</font>
<li><font class=normal>Ceci est un texte de classe "Normal" ...</font>
<li><font class=big>Ceci est un texte de classe "Big" ...</font>
</ul>
</BODY>
</HTML>
23
Dégradé
HTML
<td width="177px" height="20px" bgcolor='#CC6600'
style="filter:alpha(opacity = 100, finishOpacity = 0, style
= 1, startX = 0, finishX = 177)">
</td>
Exemple de dégradé. voir
24
Rajouter un favori dans Internet Explorer
HTML
<HTML>
<HEAD> </HEAD>
<BODY>
<a href="javascript:window.external.AddFavorite('http://www.plane-
tair.ch', 'AIR Informatiques - Sainte-Croix')">Ajouter
planetair.ch aux Favoris (IE 5.0)</A>
</BODY>
</HTML>
Diaporama SMIL
<SMIL>
<HEAD>
<LAYOUT>
<ROOT-LAYOUT WIDTH="640" HEIGHT="480" BACKROUND-COLOR="black"/>
<REGION ID="fond" LEFT="0" TOP="0" WIDTH="640" HEIGHT="480" Z-
INDEX="1" FIT="fill"/>
<REGION ID="diapo" LEFT="90" TOP="60" WIDTH="460" HEIGHT="360" Z-
INDEX="2" FIT="meet"/>
</LAYOUT>
</HEAD>
<BODY>
<PAR>
<IMG ID="fondrouge" REGION="fond" SRC="media/fonddiaporama.jpg"/>
<SEQ>
<IMG ID="az" REGION="diapo" SRC="media/image1.jpg" DUR="3s"/>
<IMG ID="er" REGION="diapo" SRC="media/image2.jpg" DUR="3s"/>
<IMG ID="ty" REGION="diapo" SRC="media/image3.jpg" DUR="3s"/>
</SEQ>
</BODY>
</SMIL>
25
HTML
Applet java voir

Titre de la page Contenu
<STYLE>
BODY {
scrollbar-face-color: #777777; Surface de l’ascenseur et fond des flêches
scrollbar-shadow-color: #777777; Ombre interne droite et bas
scrollbar-highlight-color: #777777; Ombre interne gauche et haut
scrollbar-3dlight-color: #FFFFFF; Bord gauche et haut
scrollbar-darkshadow-color: #FFFFFF; Bord droite et bas
scrollbar-track-color: #777777; Chemin de l’ascenseur
scrollbar-arrow-color: #FFFFFF; Flêche
}
</STYLE>
</BODY> Fin de corps
</HEAD>
<BODY BGCOLOR="black" STYLE="scrollbar-3dlight-color: black;
scrollbar-arrow-color: #0090ff;
scrollbar-darkshadow-color: black;
scrollbar-face-color: black;
scrollbar-highlight-color: #0090ff;
scrollbar-shadow-color: #0090ff;
scrollbar-track-color: black">
26
HTML
Barre de défilement
Principe d’affichage d’une page html.
27
Les compteurs web
HTML
Comment mettre un compteur en palce ?
<IMG SRC="/count-bin/Count.cgi?df=X.dat&dd=A">
Le CGI Count.cgi peut aussi servir a visualiser des compteurs pour un gestionnaire, il suffit de rajouter
&incr=F dans la ligne IMG précédente:
<IMG SRC="/count-bin/Count.cgi?df=X.dat&dd=A&incr=F">
Explications de certaines commandes
Commande Description
df=X.dat C'est le nom du fichier compteur. Le X doit être rem-

placé par le nom de votre site.
dd=A C'est le style d'affichage du compteur. Pour plus de
details voir plus loin les explications en englais.
incr=F F comme False donc ca n'incremente pas le compteur.
frgb=blue Pour changer la couleur du cadre du compteur.
sh=F Pour incrementer un compteur sans l'afficher
(show=False).
st=nnn Pour commencer un compteur avec une certaine valeur
(nnn).
rotate=T Pour changer la rotation du compteur.
D’autres commandes existent (Anglais)
Parameterr Description
display=X Specifies what to display. A valid string can be

specified with display= parameter to display counter,
clock or date. The valid value for the string parame-
ter X is counter,clock or date For counter, this para-
meter is not need as counter is the default display
type. display=counter
timezone=X Display time/date of the specified timezone. T h e
parameter timezone= is only significant with dis-
play=clock or display=date. Use this parameter if you
want to display time or date of another timezone. The
timezone must be specified with a negative or positi-
ve four digit offset from GMT, for example: timezo-
ne=GMT-0500 or timezone=GMT+0000 or timezone=GMT+0530.
The routine to display time of various timezones are
written in a generic way. Therefore, the unix machines
will not be aware of daylight saving time because of
the way the routine is written. For example, if day-
light saving time is on, to display time of NY, the
timezone will be timezone=GMT-0500 instead of timezo-
ne=GMT-0400.
If the clock displays your local time wrong, specify

your timezone with that parameter in order to display
the correct time. None.
tformat=X Time format in 12 or 24 hour. This parameter can
be used to display time in 12 or 24 hour format. The
valid values for the parameter X is 12 or 24. t f o r-
28
Les compteurs web
HTML
mat=12
dformat=X Specifies date format. This parameter is only
significant with display=date. The valid value for the
string parameter X is any combination of MMDDYY (Month-
Day-Year). For example, dformat=ddmmyy,
dformat=YYMMDD. dformat=MMDDYY
istrip=B Use of image strip On/Off The boolean value of istrip
specifies whether to use image strip or not. If you
specify istrip=F, the program will look for the indi-
vidual digit image files in the digits/style directo-
ry. The valid values for the Boolean parameter istrip
are Y, N, T, F, 1 or 0. istrip=T
ft=X Frame Thickness You can wrap the counter in an
ornamental frame of X pixels thick. Use 0 for no frame.
Values over 5 make a nice 3-D effect. ft=6
frgb=R;G;B Frame Color Specifies the color of the frame in RGB
(red/green/blue) format. Each color component, R, G,
and B is specified as a value between 0 and 256. If
you use ft= without a frgb= param, the default color
is used.
If you specify a frgb= without a ft=, then the frame

thickness defaults to 5. All the examples show ft=5.
The color can be specified as hex string or a name. Do
not use a # before the hex string as Netscape. For
example, if you want to specify white in hex, use
frgb=ffffff. You also can use a color name (e.g.
frgb=blue) if the counter configured to do so (look at
the cfg file). frgb=100;139;216 or frgb=648bd8
tr=B Transparency On/Off You can specify if your counter
image will have a transparent color with the Boolean
B. So tr=Y means there will be a transparent color. It
does not matter if the GIF files used for the digits
are "transparent"; you must specify explicitly which
color to make transparent. If you specify a trgb=, then
you do not need to specify tr=Y. If you specify tr=Y
and do not specify trgb=, then the default color black
will be transparent. The valid values for B are Y, N,
T, F, 1, or 0. tr=F No Transparency
md=X Max Digits Defines maximum number of digits to dis-
play. Any value between 5 and 10 inclusive are per-
mitted. Padding with leading zeros is automatically
done for you; longer counts are truncated to the given
X. md=6 Without padding
pad=B Padding with 0's Turn padding on/off in conjunction
with md= setting. Valid values for the Boolean parame-
ter B are Y, N, T, F, 1, or 0. pad=N Without speci-
fication of a md=value; pad=Y With specification of a
md=value
dd=A Digit Directory Denotes directory of a specific
styles of digits. Four styles of digits are supplied.
They are kept at the directories A,B,C and D respec-
tively. Visit the digit mania page for other styles of
digits. dd=A My green led digits
image=gif_file Display this GIF file You can display any GIF image
29
Les compteurs web
HTML
specified with this parameter. The location of this
file is determined by the dd= parameter. All attributes
of the counter applly to the image. None
comma=B Display comma after every 3rd digit from right.
The boolean value of parameter comma specifies whether
to display comma after every 3rd digit from right. If
you use this parameter as true, the left padding with
zeros will be turned off. comma=F
srgb=R;G;B
prgb=R;G;B Change a color of the image to a target color on the
fly. Any one color of the image can be changed to
a different color on the fly. srgb stands for source
color, that is the color to change. prgb stands for
pen color, that is the target color. The values for
srgb and prgb can be colon separated color components
(e.g, srgb=255;0;0), a hex value (e.g. srgb=ff0000) or
a color name (e.g. srgb=red). The color name can be
used if you configured the counter to do so (look at
the cfg file). srgb=00ff00 (0;255;0 green);
prgb=00ffff (0;255;255 cyan); With chcolor=T
chcolor=B Change a color of the image. This parameter is usual-
ly used to change the default green color to cyan. That
is if you specify chcolor=T, and you want to change
green to cyan, then you do not need to specify srgb
and prgb parameters. 1x1 GIF is displayed. The valid
values for the Boolean parameter B are Y, N, T, F, 1,
or 0 chcolor=F
st=X Start Count This parameter is used to set the ini -
tial value of the counter to some number X. This is
only valid if you decided to allow automatic datafile
creation. It is a bad practice to allow automatic data-
file creation, however it makes site maintaining
easier. The automatic datafile creation option is spe-
cified in configuration file and can be changed at run
time. Note that this parameter has no effect if the
datafile already exists. If you want to change the
counter value in a existing datafile, hand edit the
file. The minimum value for st is 1. st=1; Count
starts at 1
sh=B Show digits Used to turn display of digits on or
off according to the Boolean B. When sh=T, counter will
be displayed and incremented, this is the default beha-
vior.
If sh=F no digits will show, but the counter will still
increment; instead of digits a transparent 1x1 GIF is
displayed. The valid values for the Boolean parameter
B are Y, N, T, F, 1, or 0 sh=Y
df=data_file Datafile to store count Specifies the name of the
file for storing the count in. The file must be allo-
cated to you as was mentioned in the "Authorizations"
section above. You can use df=random to display a ran-
dom number.
One special use of the parameter is df=RANDOM. This
returns a random number using the fractional portion
of the host's time of day clock as a seed for the gene-
30
Les compteurs web
HTML
rator. Unlike all other WWWcounter parameters, the
file name provided is case-sensitive, except for the
value random. Or Random, or rANDOM, etc. df=ran-
dom; if no datafile is specified
incr=B Increment Count Makes it possible to display the
current count without incrementing the count. This can
be used to examine the count for reporting or other
purposes without adding to the count. Valid values for
the Boolean parameter B are Y, N, T, F, 1, or 0.
incr=T; Increment the counter on each invocation
lit=X Display literal Makes it possible to display a
given, predetermined string. The valid values for the
string X are digits, a,p,: and - None
negate=B Negate the color Makes it possible to negate the
color of the counter digits. Note that the Frame is
exempted from negating. Valid values for the Boolean
parameter B are Y, N, T, F, 1, or 0. negate=F; Do
not negate
degrees=X Rotate X degrees Makes it possible to rotate the
counter image X degree. The possible values of X is
90, 180, 270 and 360. Note 360 is meaningless as the
counter will come back to the original 0 degree.
degrees=270; With rotate=Y and without degrees=X;
rotate 270 degrees clockwise
rotate=B Rotate On/Off The Boolean value B turns on or off
rotating. If you use degrees= setting, rotate is not
needed. Valid values for the Boolean parameter B are
Y, N, T, F, 1, or 0. rotate=F; Do not rotate
31
Les compteurs web
HTML
32
Les compteurs web
HTML
33

HTML

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML

Загружено:

Авторское право:

Доступные форматы

Cours HTML

© AIR Nicolas PENSEYRES

Balise Fermeture Attribut Description Origine

<!DOCTYPE> N N Version du HTML utilisé HTML 2.0

ALINK Permet de spécifier la couleur des liens actifs.

BACKGROUND Permet de spécifier l’image d’arrière-plan (format gif ou jpeg).

BGCOLOR Permet de spécifier la couleur d’arrière-plan.

CLASS Nom de la classe donnée à la feuille de style.

LINK Permet de spécifier la couleur des liens.

SCROLL Permet de désactiver les barres de défilement du navigateur (valeur: no).

STYLE Feuille de style intraligne.

TEXT Permet de spécifier la couleur du texte.

VLINK Permet de spécifier la couleur des liens visités.

EVENEMENT Spécifie un événement Javascript (HTML 4.0) (OnClick, OnMouseOver,

Paragraphes et passages de texte

Mise en forme de caractères

Titres et légendes de tableaux

<caption>...</caption> Titre, légende du tableau

<a>...</a> Crée un lien en association avec l’attribut HREF

&#129 ¡ &#161 &iexcl;

À &#192 &Agrave; à &#224 &agrave;

Nom Couleur affichée Nom Couleur affichée

Tableau des couleurs reconnues unique-

Nom Couleur affichée Nom Couleur affichée

ALICEBLUE bleu clair DARKSLATEBLUE bleu foncé

Principe d’affichage d’une page html.

<HTML> Document HyperText Markup Language

<HTML> Document HyperText Markup Language

Principe d’affichage d’une page html en rouge avec

<HTML> Document HyperText Markup Language

<HTML> Document HyperText Markup Language

<HTML> Document HyperText Markup Language

<HTML> Document HyperText Markup Language

Exemple de feuiille de styleenregistré au format TXT. voir

Microsoft Internet Explorer voir

Exemple de dégradé. voir

<HTML> Document HyperText Markup Language

Principe d’affichage d’une page html.

Explications de certaines commandes

df=X.dat C'est le nom du fichier compteur. Le X doit être rem-

D’autres commandes existent (Anglais)

display=X Specifies what to display. A valid string can be

If the clock displays your local time wrong, specify

If you specify a frgb= without a ft=, then the frame

Вам также может понравиться

&#129 ¡ &#161 ¡

À &#192 À à &#224 à