Html par l'exemple

Définition, énumération et liste

DL   DT   DD   OL   UL   LI
Le code Le résultat
<dl> Texte écrit après la balise DL; ce texte occupe plus d'une ligne. En particulier la marge gauche.<br>impose un saut de ligne. <dt> terme 1</dt> <dd> définition du terme 1</dd> <dt> <b>terme 2</b></dt> <dd> 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.<br> impose un saut de ligne. </dd> </dl>
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). <ol> <li>Attributs de listes numérotées <ul type="square"> <li> start=2 </li> <li> type="i" </li> </ul> </li> <li>Exemple <ol type="i" start=2> <li> type="a" ou type="A"</li> <li> type="i" ou type="I"</li> <li> type="1"</li> </ol> </li> <li>Listes non numérotées: <ul> <li> type = disc|circle|square </li> </ul> </li> </ol> Les listes numérotées (OL) ou non (ul).
  1. Attributs de listes numérotées
    • start=2, type="i"
  2. Exemple
    1. type="a" ou type="A"
    2. type="i" ou type="I"
    3. type="1"
  3. 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&eacute;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
<FORM method="POST" action= "http:www.iut-orsay.fr/cgi/test.exe"> <p> Texte sur plusieurs lignes:<br> <textarea name="address" ROWS=4 COLS=40> Texte par d&eacute;faut </textarea> <p> Champ texte<br> Nom: <input type="text" name="nom"> <p> Champ texte avec affichage <br> Rang: <input type="text" name="t" value="38"> <p> Boutons &agrave; choix unique: &nbsp; <input type="radio" name="r" value="1">1 <input type="radio" name="r" value="2">2 <input type="radio" name="r" value="3" checked>3 <input type="radio" name="r" value="4">4 <p> ... &agrave; choix multiples (case &agrave; cocher): <br> <input type="checkbox" name="cac0" value="0">A <input type="checkbox" name="cac1" value="1">B <input type="checkbox" name="cac1" value="2">C <p> Liste &agrave; choix unique <select name="Couleur"> <OPTION value="vert">Vert <OPTION value="rouge" selected>Rouge <OPTION value="bleu">Bleu </select> <p> Liste &agrave; choix multiple <select name="travail" multiple> <OPTION value="lundi">Lundi <OPTION value="mardi">Mardi <OPTION value="jeudi">Jeudi </select> <p> <input type="submit" name="sub" value="Envoi"> <input type="reset" value="Recommencer"> </FORM>

Texte sur plusieurs lignes:

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 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="a_js.htm"
Lien vers un fichier désigné par un chemin relatif
    href="../app_unix/docUnix.txt"
Lien vers un fichier désigné par un chemin absolu
    href="file:///D:/Roger/html/u_access.txt"
      ( n'existe pas forcément chez vous !!! )
Lien vers une url sur un autre site
    href="http://fr.selfhtml.org/navigation/html.htm"
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

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="comic sans ms" 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

 Table des matières