Html par l'exemple

Enumération et liste

Table

Formulaire

Ancre et lien

Image

Attributs d'écriture et blocs

Polices

Et en plus ...

Références

Dans les tableaux ci-dessous:
le code Html est dans la colonne de gauche,	et son interprétation est dans la colonne de droite.

Définition, énumération et liste DL DT DD OL UL LI
Le code	Le résultat
	Texte écrit après la balise DL; ce texte occupe plus d'une ligne. En particulier la marge gauche. impose un saut de ligne. terme 1 définition du terme 1 terme 2 définition du terme 2 écrite avec un texte occupant plus d'une ligne pour voir les effets de formatage dont s'occuppe le navigateur, en particulierla marge gauche. impose un saut de ligne
	Les listes numérotées (OL) ou non (ul). Attributs de listes numérotées start=2, type="i" Exemple type="a" ou type="A" type="i" ou type="I" type="1" Listes non numérotées: type=disc ou circle ou square

Table des matières

Table

CAPTION,TR,TH,TD

Le code Le résultat

<TABLE border=1 width=340 cellpadding=7> <CAPTION align="TOP"><br> Titre hors encadrement </CAPTION> <TR> <TH COLSPAN=2 bgcolor="#c0c0c0"> Un titre sur deux colonnes </TH> </TR> <TR> <TH> colonne 1 </TH> <TH> colonne 2 </TH> </TR> <TR> <TD> cellule 1.1 (alignement par défaut)</TD> <TD> cellule 1.2 </TD> </TR> <TR align="RIGHT"> <TD> cellule 2.1 (attribut sur la ligne) </TD> <TD bgcolor="white">cel 2.2</TD> </TR> <TR> <TD align="CENTER"> cellule 3.1 (attribut sur la cellule) </TD> <TD> cellule 3.2 </TD> </TR> </TABLE>

Titre hors encadrement
Un titre sur deux colonnes
colonne 1	colonne 2
cellule 1.1 (alignement par défaut)	cellule 1.2
cellule 2.1 (attribut sur la ligne)	cel 2.2
cellule 3.1 (attribut sur la cellule)	cellule 3.2

balise Table
cellpadding=n: espace entre le texte et le bord de la cellule
cellspacing=n: épaisseur du trait ou espace entre cellules
border=n: épaisseur de l'encadrement de la table; si n=0 il n'y a pas de trait de séparation entre les cellules.
balise Caption
align=top|bottom: Emplacement du titre
balise Table, Tr, Td ou Th
align="left | center | right" valign="top | middle | bottom: alignement horizontal ou vertical
bgcolor="#XXXXXX": couleur de fond (aussi white black blue yellow green red ...)
width="%n | n": largeur en pourcentage ou en pixels
balise Td seule
rowspan=n colspan=n: case s'étendant sur plusieurs lignes ou plusieurs colonnes

Table des matières

Formulaire FORM, INPUT, TEXTAREA, SELECT, OPTION
Le code	Le résultat
	Texte sur plusieurs lignes: Texte par défaut Champ texte Nom: Champ texte avec affichage Rang: Boutons à choix unique: 1 2 3 4 ... à choix multiples (case à cocher): A B C Liste à choix unique Liste à choix multiple

Une création et une vérification de formulaire utilisant Javascript sont disponibles.

Table des matières

Définition d'un lien, d'une ancre
balise A

Un lien est défini par la balise A; il permet de passer à la consultation d'un autre document ou d'activer une autre url. C'est la base de la navigation hypertexte.
L'attribut href de la balise A défini cette url; voici plusieurs possibilités de liens:

Lien interne href="#tab_mat"

Lien vers une page du même répertoire href="docHtml.htm"

Lien vers un fichier href="../app_unix/docUnix.txt"

Lien vers un fichier désigné par un chemin absolu href="file:/D:\Perso\Roger\html\u_access.txt"

Lien vers une url sur un autre site href="http:developer.netscape.com/library/documentation/banner.html"

Lien vers une image href="../u/main1.gif"

Courrier href="mailto:roger@127.0.0.1

Lien ftp href="ftp:127.0.0.1/cgi-bin"

Une ancre définit une position dans un document; c'est la même balise A qui est utilisée, ce qui crée une certaine confusion; par exemple:

<A name="repaire"></A>

défini une position qui pourra être référencée dans un lien de la façon suivante:

<A href="doc#repaire">vers le repaire</A>

Remarquez l'utilisation du " devant le nom 'repaire', dans l'attribut href. Si le lien se fait dans le même document, on peut simplement écrire:

<A href="#repaire">vers le repaire</A>

Il est évident que les noms d'ancre doivent être uniques dans une document.

Attributs de la balise A

href
href="url", href="url#etiquette" ou href="#etiquette": c'est la base de la navigation hypertexte
href="javascript:appelFonction(par1,par23,...)": le pseudo-protocole 'javascript:' permet un appel de fonction; o peut en fait mettre une ou plusieurs instructions écrites e, langage Javascript
target
target="nom de cadre": permet d'afficher dans un autre cadre ou une autre fenêtre.
... cf les cadres (FRAME)
name
name="etiquette": permet de définir une ancre; il n'y a pas d'autres attributs dans ce cas

Des exemples d'images sur lesquelles sont définis un ou plusieurs liens hypertexte sont disponibles.

Table des matières

Image: balises IMG, MAP, AREA

Les formats d'image 'gif' et 'jpeg' ou 'jpg' sont reconnus par les navigateurs; ces noms correspondent à l'extension des noms de fichiers image. Ci-après, les attributs de la balise IMG sont présentés; de plus, avec l'attribut usemap on trouve un exemple d'utilisation des balises MAP et AREA.

src

Une image ne fait pas partie du document html; elle est placée dans un fichier à part et ce fichier est, lui référencé dans le document Html, en utilisant l'attribut SRC de la balise IMG, comme par exemple:
<img src="gif1/grappe.gif">

hspace, vspace

L'intervalle entre le texte et l'image est lui précisé par les attributs hspace et vspace . Par exemple, la séparation entre le texte et l'image ci-contre a été précisée par l'attribut hspace, utilisé comme suit:
<src="gif1/lapin.gif" align="right" hspace="45">

align

permet de préciser les positions respectives du texte et de l'image.

Valeurs de l'attribut align: bottom, middle top, left, right
balise et texte	résultat
le <img src="../u/grappe.gif">raisin noir	le raisin noir
le <img src="../u/grappe.gif" align="middle">raisin noir	le raisin noir
le <img src="../u/grappe.gif" align="top">raisin noir	le raisin noir
le <img src="../u/grappe.gif" align="left">raisin noir l'image est à gauche du texte qui suit	le raisin noir l'image est à gauche du texte qui suit
le <img src="../u/grappe.gif" align="right">raisin noir l'image est à droite du texte qui suit	le raisin noir l'image est à droite du texte qui suit

border

épaisseur du trait encadrant l'image; si la valeur est 0, il n'y a pas d'encadrement. Voir un exemple ci dessous.

height, width

permettent de modifier les dimensions de l'image, mais attention à la déformation qui se produit.

Taille d'une image: attributs width height
balise	résultat
<img src="../u/grappe.gif" border="2">
<img src="../u/grappe.gif" width="150" height="64">
<img src="../u/grappe.gif" width="89" height="100">

usemap

permet d'utiliser une image pour définir un ou plusieurs liens hypertexte en cliquant sur l'image, sans utiliser la balise A.
Voici la lettre 'B' codée comme une image:

; en cliquant sur cette image, la page va changer!!!.
Le code Html pour que l'image soit 'sensible' est: <img src="../u/lettres/let_b.gif" name="let_b" usemap="carte_b" border="1"> <map name="carte_b"> <area href="#lien" shape="rect" coords=0,0,30,30 onMouseOver="document.images.let_b.src='../u/lettres/let_b1.gif'" onMouseOut="document.images.let_b.src='../u/lettres/let_b.gif'" > </map> La liaison entre l'image et le lien hypertexte (ici #bal_a) est faite par l'attribut usemap, qui prend la valeur '#carte_b'. Il faut alors donner le nom 'carte_b' à la balise map qui va définir le lien.

Un autre exemple avec deux zones sensibles est disponible.

Table des matières

Attributs d'écritures

Voici différentes possibilités d'écritures d'une portion de texte, puis différentes définitions de blocs.

Balises: B, I, U, BLINK, STRIKE, SUB, SUP SMALL, BIG, STRONG, EM ABBR, CITE, CODE, DFN, KBD, TT, VAR SAMP
Effet	Balises	Exemple
en gras ou italique ou souligner clignote (sur netscape) texte barré en exposant : en indice	<B> ... </B> <I> ... </I> <U> ... </U> <BLINK> ... </BLINK> <STRIKE> ... </STRIKE> <SUP> ...</SUP> <SUB> ...</SUB>	bold italics underline clignote ? ~~exemple~~ texte ^exposant texte _indice
texte agrandi emphatique texte diminué en renforcé	<BIG> ... </BIG> <EM> ... </EM> <SMALL> ... </SMALL> <STRONG> ... </STRONG>	texte plus gros écriture emphatique texte plus petit renforcé
avec abbr! en exergue largeur fixe une définition lu au clavier machine téléscripteur une variable	<ABBR> ... </ABBR> <CITE> ... </CITE> <CODE> ... </CODE> <DFN> ... </DFN> <KBD> ... </KBD> <TT> ... </TT> <VAR> ... </VAR>	balise abbr citation `code` voici une définition lu au `clavier !` `teletype` et une `variable`
style d'une portion de texte	<SAMP> ... </SAMP>	un `exemple`

Des blocs, les balises:
ADDRESS BLOCKQUOTE DIV H1 .. H6 PRE XMP

ADDRESS:
Placé en début ou en fin de document.
Dans un tel paragraphe, il ne faut pas utiliser BLOCKQUOTE FORM ou P.
Cette balise permet de présenter un style de paragraphe dans lequel des effets peuvent être réalisés. Les sauts de lignes sont ignorés.
BLOCKQUOTE
BLOCKQUOTE: Cette balise permet de présenter un ensemble de lignes dans lequel des effets peuvent être réalisés. Les sauts de lignes sont ignorés; cependant un retrait à gauche est créé par le navigateur.
DIV
La balise DIV est utilisée pour délimiter une portion de texte.
Cela délimite des lignes auxquelles on peut appliquer un style spécifique.
La balise SAMP a aussi été introduite avec les styles.
h3 (ou H1 H2 H4 H5 H6):
h3:Ces balises sont utilisées pour placer des titres de chapîtres ou de paragraphes.
( des effets peuvent être réalisés)

PRE:

  Cette balise permet de présenter un style de paragraphe
  dans lequel des effets peuvent être réalisés.
  Mais les sauts de lignes et les espaces sont pris en compte.

XMP:

Table des matières

Police de caractères et balise FONT

color

Cet attribut permet de définir la couleur des caractères; les valeurs sont soit un nom de couleur, soit la définition des composantes RGB de la couleur, comme par exemple:

Balise écrite	Résultat
<font color="aqua"> un texte </font>:	un texte
<font color="blue"> un texte </font>:	un texte
<font color="silver"> un texte </font>:	un texte
<font color="#AA0066"> un texte </font>:	un texte

Voici les noms de couleur utilisables, suivis des composantes RGB:

            aqua   #00FFFF        black   #000000
            blue   #O00OFF        fuchsia #FF00FF
            gray   #888888        green   #008800
            lime   #00FF00        maroon  #880000
            navy   #000088        olive   #888800
            purple #880088        red     #FF0000
            silver #CCCCCC        teal    #008888
            white  #FFFFFF        yellow  #FFFF00

face

Cet attribut permet de choisir le style de police. Voila des exemples avec les polices standards:

Balise écrite	Résultat
<font face="arial" color="blue"> file : bar2.jpg </font>	file : bar2.jpg
<font face="courier" color="blue"> file : bar2.jpg </font>	file : bar2.jpg
<font face="monospace" color="blue"> file : bar2.jpg </font>	file : bar2.jpg
<font face="sans-serif" color="blue"> file : bar2.jpg </font>	file : bar2.jpg
<font face="serif" color="blue"> file : bar2.jpg </font>	file : bar2.jpg
<font face="times" color="blue"> file : bar2.jpg </font>	file : bar2.jpg

On peut indiquer ausssi une liste de noms de police; le navigateur choisit le premier nom qu'il connait. Dans l'exemple ci-dessous le nom "abcd" est certainement inconnu comme nom de police; un des noms qui suivent est alors utilisé.
<font face="abcd,mistral,courier"> file : bar2.jpg </font> file : bar2.jpg

Il faut aussi se rappeler, le changement de police lié aux balises d'attributs de texte, telles que CITE, CODE, DFN, KBD, TT, VAR

size

Cet attribut permet de faire varier la taille des caractères; 6 tailles différentes sont utilisables, désignées par une des valeurs: 1,2,3,4,5,6. On peut auusi, pour cet attribut préciser une augmentation (valeurs +1, +2 ...) ou une diminution (valeurs -1, -2 ...) par rapport à la taille par défaut.
Voila des exemples:

Balise écrite	Résultat
<font size="1" color="blue"> un texte </font>:	un texte
<font size="3" color="blue"> un texte </font>:	un texte
<font size="6" color="blue"> un texte </font>:	un texte

<font size="-1" color="blue"> un texte </font>:	un texte
<font size="+2" color="blue"> un texte </font>:	un texte

Table des matières

Quelques liens ou fichiers

Manuel html www.ccim.be/ccim328/html/
La documentation de l'EISTI www.eisti.fr/res/res/html4/contents.html"
Introduction à Html www.authors.com/tutorial.htm
Html, javascript, styles ... fr.selfhtml.org/
Références netscape: http://devedge.netscape.com/library/manuals/1998/htmlguide/
Recommandations: http://www.w3.org/TR/1999/REC-html401-19991224/#minitoc
Du consortium World Wide Web: Html 4.01 www.w3C.org/TR/html401/
Feuilles de style http://www.w3.org/TR/REC-CSS2/
Documentation: www.utoronto.ca/webdocs/HTMLdocs/NewHTML/htmlindex.html
Lien vers le site IUT

Table des matières

Html par l'exemple

Dans les tableaux ci-dessous:

Définition, énumération et liste

Table

Formulaire

Définition d'un lien, d'une ancrebalise A

Image: balises IMG, MAP, AREA

Attributs d'écritures

Des blocs, les balises: ADDRESS BLOCKQUOTE DIV H1 .. H6 PRE XMP

h3:Ces balises sont utilisées pour placer des titres de chapîtres ou de paragraphes. ( des effets peuvent être réalisés)

Police de caractères et balise FONT

Quelques liens ou fichiers

Définition d'un lien, d'une ancre
balise A

Des blocs, les balises:
ADDRESS BLOCKQUOTE DIV H1 .. H6 PRE XMP

h3:Ces balises sont utilisées pour placer des titres de chapîtres ou de paragraphes.
( des `effets` peuvent être réalisés)