LE GUIDE RAPIDE DU LANGAGE HTML PAR KEVIN WERBACH

INU 1051 - PETIT GUIDE HTML PAR JEAN-FRANÇOIS GAUVIN

APPRENDRE LE LANGAGE HTML PAR LUC VAN LANCKER

Faite une recherche
par mot clé sur cette page




Faite une recherche par mot clé
sur toutes les pages de mon site

PicoSearch
Recherche effectuée par PicoSearch. Aide


LE GUIDE RAPIDE DU LANGAGE HTML

par Kevin Werbach
Version 3.0f Formattée -- 21 juillet, 1996


La dernière version de ce document est disponible : http://werbach.com/barebones/

Le guide rapide du langage HTML établie la liste de toutes les étiquettes que les versions courantes des navigateurs W3 sont capables de reconnaître. J'y ai inclus toutes les étiquettes de la spécification du langage HTML 3.2, en plus des extensions Netscape inclues dans les versions du navigateur Netscape jusqu'à la version 3.0b5. Ce guide a été conçue pour être le plus concis possible, et par ce fait ne comprend pas de détails disant comment utiliser ces étiquettes. Il existe plusieurs guides HTML sur l'Internet, j'ai plusieurs liens disponibles dans ma page d'aide W3; Les commentaires et suggestions sont toujours le bienvenue.

Table des matières

  1. MATÉRIEL D'INTRODUCTION

  2. ÉTIQUETTES HTML

    Important:

    Pour plus d'informations à propos des différences entre le langage HTML 2.0, HTML 3.0, HTML 3.2, et les extensions Netscape, Je vous suggère de lire la déclaration W3C sur le développement du HTML.

GÉNÉRAL


 

Type de document <HTML></HTML> (a.u début et à la fin du document)
Titre <TITLE></TITLE> (nom du fichier; doit être dans l'en-tête)
En-tête <HEAD></HEAD> (titre de description)
Corps <BODY></BODY> (corps du document)

 
 

DÉFINITION STRUCTURALE


 

En-tête <H?></H? > (6 niveaux d'en-têtes)

 

En-tête alignée <H? ALIGN=LEFT|CENTER|RIGHT></H?> [*]

 

Division <DIV></DIV>

 

Division alignée <DIV ALIGN=LEFT|CENTER|RIGHT|JUSTIFY></DIV>
Bloc en retrait <BLOCKQUOTE></BLOCKQUOTE>[ *]

 

 

Emphase <EM></EM> (habituellement présenté en italique)

 

Forte emphase <STRONG></STRONG> (habituellement présenté en gras)

 

Citation <CITE></CITE> (habituellement en italique)

 

Code <CODE></CODE> (pour l'affichage de fichier de programmation)

 

Échantillon de sortie <SAMP></SAMP>

 

 

Entrée au clavier <KBD></KBD>

 

 

Variable <VAR></VAR>

 

 

Définition <DFN></DFN> (non officiel)
Adresse de l'auteur(e) <ADDRESS></ADDRESS>

 

 

Grande police de caractères <BIG></BIG>

 

 

Petite police de caractères <SMALL></SMALL>

 

 

FORMAT DE PRÉSENTATION


 

Gras <B></B>

 

 

Italique <I></I>

 

N3.0b Souligné <U></U> (non officiel)

 

Rayé <STRIKE></STRIKE> (non officiel)
N3.0b Rayé <S></S> (non officiel)

 

Indice <SUB></SUB>

 

 

Exposant <SUP></SUP>

 

 

Imprimé <TT></TT> (présenté dans une police de caractères à simple espacement)

 

Préformaté <PRE></PRE> (affiche le texte dans son format original)

 

Largeur <PRE WIDTH=?></PRE> (s'applique aux caractères)

 

Centré < CENTER></CENTER> [*] (pour le texte et les images)
N1.0 Clignotement <BLINK>< /BLINK> (étiquette tournée en dérision)

 

Grandeur de la police <FONT SIZE=?></FONT> (entre 1-7)

 

Changement de la grandeur de la police <FONTSIZE=+|-?></FONT>

 

N1.0 Grandeur de la police de base <BASEFONT SIZE=?> (entre 1-7; par défaut 3)

 

Couleur de la police <FONT COLOR="#$$$$$$"></FONT>

 

N3.0b

Sélection de fonte

<FONT FACE="***"></FONT>

 

N3.0b

Texte en multi-colonnes

<MULTICOL COLS=?></MULTICOL>

 

N3.0b

Longueur de la colonne

<MULTICOL GUTTER=?></MULTICOL>

(défaut est 10 pixels)

N3.0b

Largeur de la colonne

<MULTICOL WIDTH=?></MULTICOL>

 

N3.0b

Espaceur

<SPACER>

 

N3.0b

Type d'espaceur

<SPACER TYPE=horizontal| vertical|block>

 

N3.0b

Grandeur d'espaceur

<SPACER SIZE=?>

 

N3.0b

Dimensions de l'espaceur

<SPACER WIDTH=? HEIGHT=?>

 

N3.0b

Alignement de l'espaceur

<SPACER ALIGN=left|right|center>

 

 
 

LIENS ET IMAGES


 

Lier quelque chose <A HREF="URL"></A>

 

 

Lier un pointeur <A HREF="URL#***"></A> (si c'est dans un autre document)

 

 

<A HREF="#***">< /A> (si c'est dans le même document)
N2.0 Fenêtre cible <A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"></A>

 

 

Définition du pointeur <A NAME="***"></A>

 

 

Relation

<A REL="***"></A>

(pas largement implanté)

 

Relation inverse

<A REV="***"></A>

(pas largement implanté)

Afficher une image <IMG SRC="URL">

 

 

Alignement <IMG SRC="URL"ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>

 

N1.0 Alignement <IMG SRC="URL" ALIGN=LEFT|RIGHT|TEXTTOP|
ABSMIDDLE|BASELINE|ABSBOTTOM>

 

 

Alternative <IMG SRC="URL" ALT="***"> (si l'image n'est pas affichée)

 

Carte-image <IMG SRC="URL" ISMAP> (requiert un exécutable)

 

Carte-image client <IMG SRC="URL" USEMAP="URL"> (requiert un exécutable)

 

Nom de la carte <MAP NAME="***"></MAP> (décrit la carte)

 

Sections de la carte <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>

 

 

Dimensions <IMG SRC="URL" WIDTH="?" HEIGHT="?"> (en pixels)

 

Bordure <IMG SRC="URL" BORDER=?> (en pixels)

 

Espace environnant <IMG SRC="URL" HSPACE=? VSPACE=?> (en pixels)
N1.0 Low-Res Proxy <IMG SRC="URL"LOWSRC="URL">

 

N1.1

Appel client

<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">

 

N2.0

Objet encastré

<EMBED SRC="URL">

(insert un objet dans la page)

N2.0

Dimension de l'objet

<EMBED SRC="URL" WIDTH=? HEIGHT=?>

 

 

SÉPARATEURS


  Paragraphe <P></P> [* ] (étiquette de fin souvent pas nécessaire)

 

Alignement du texte <P ALIGN=LEFT|CENTER|RIGHT></P> [*] (double retour)

 

Fin de ligne <BR> (simple retour)

 

Alignement forcé <BR CLEAR=LEFT|RIGHT|ALL>

 

 

Ligne horizontale <HR>

 

 

Alignement <HR ALIGN=LEFT|RIGHT|CENTER>

 

 

Épaisseur <HR SIZE=?> (en pixels)

 

Largeur <HR WIDTH=?> (en pixels)
N1.0 Largeur <HR WIDTH=%> (en tant que pourcentage de la largeur de la page)

 

Ligne pleine <HR NOSHADE> (sans l'effet 3D)
N1.0 Sans-coupure <NOBR></NOBR> (prévient la coupure des lignes)
N1.0 Coupure de mot <WBR> (endroit où couper une ligne si nécessaire)

 

LISTES


 

 

Liste non-ordonnée <UL><LI></UL> (<LI> avant chaque item de la liste)

 

Compacte

<UL COMPACT></UL>

 

N1.0 Type d'indicateur <UL TYPE=DISC|CIRCLE|SQUARE> (pour la liste entière)

 

 

<LI TYPE=DISC|CIRCLE|SQUARE> (celui-ci & subséquent)

 

Liste ordonnée <OL><LI></OL> (<LI> avant chaque item de la liste)

 

Compacte

<OL COMPACT></OL>

 

N1.0 Type de nombres <OL TYPE=A|a|I|i|1> (pour la liste entière)

 

 

<LI TYPE=A|a|I|i|1> (celui-ci & subséquent)
N1.0 Nombre de départ <OL START=?> (pour la liste entière)

 

 

<LI VALUE=?> (celui-ci & subséquent)

 

Liste de définitions <DL><DT><DD></DL> (<DT>=terme, <DD>=définition)

 

Compacte

<DL COMPACT></DL>

 

 

Liste de menus <MENU><LI></MENU> (<LI> avant chaque item de la liste)

 

Compacte

<MENU COMPACT></MENU>

 

 

Liste de répertoires <DIR><LI></DIR> (< LI> avant chaque item de la liste)

 

Compacte

<DIR COMPACT></DIR>

 

 

ARRIÈRE-PLAN ET COULEURS


N1.1 Couleur d'arrière-plan <BODY BGCOLOR="#$$$$$$"> [*] (ordre est rouge/vert/bleu)

 

Texture <BODY BACKGROUND="URL"> [*]

 

N1.1 Couleur du texte <BODY TEXT="#$$$"> [*]

 

N1.1 Couleur des liens <BODY LINK="#$$$"> [*]

 

 

Couleur des liens visités <BODY VLINK="#$$$"> [*]

 

N1.1 Liens actifs <BODY ALINK="#$$$">

 

(plus d'informations à http://werbach.com/web/wwwhelp.html#color)

 

CARACTÈRES SPÉCIAUX


 

code ISO &#?; (où le ? représente le code ISO8859-1)

 

< &lt;

 

 

> &gt;

 

 

& &amp;

 

 

" &quot;

 

 

Registered TM &reg;

 

 

Copyright &copy;

 

 

Espace &nbsp;

 

(Une liste complète est disponible à http://www.uni-passau.de/%7Eramsch/iso8859-1.html)

 

FORMULAIRES


 

Formulaire <FORM ACTION="URL" METHOD=GET|POST></FORM>

 

N2.0 Transfert de fichier <FORM ENCTYPE="multipart/form-data></FORM>

 

 

Champ d'entrée de données <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN| SUBMIT|RESET">

 

Nom du champ <INPUT NAME="***">

 

 

Valeur du champ <INPUT VALUE="***">

 

 

Vérifié? <INPUT CHECKED> (boutons de vérification et boutons radio)

 

Grandeur du champ <INPUT SIZE=?> (en caractères)

 

Longueur maximum <INPUT MAXLENGTH=?> (en caractères)

 

Liste de sélection <SELECT></SELECT>

 

Nom d'une liste <SELECT NAME="***"></SELECT>

 

 

Nombre d'options <SELECT SIZE=?></SELECT>

 

 

Choix multiples <SELECT MULTIPLE> (permet une sélection multiple)

 

Option < OPTION> (items qui peuvent être sélectionnés)

 

Option par défaut <OPTION SELECTED>

 

 

Grandeur de la boîte d'entrée de données <TEXTAREA ROWS=? COLS=?>
</TEXTAREA>

 

 

Nom de la boîte <TEXTAREA NAME="***">
</TEXTARE A>

 

 

"Wrap Text" <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL> < /TEXTAREA>

 

 

TABLEAUX


 

Définition d'un tableau <TABLE></TABLE> [*]

 

 

Bordure du tableau <TABLE BORDER=?></TABLE>

 

 

Espace des cellules <TABLE CELLSPACING=?>

 

 

Espace de la bordure des cellules <TABLE CELLPADDING=?>

 

 

Largeur <TABLE WIDTH=?> (en pixels)

 

Largeur <TABLE WIDTH=%> (pourcentage de la page)

 

Lignes du tableau <TR></TR>

 

 

Alignement <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

 

Cellules du tableau <TD></TD> (doit apparaître à l'intérieur des lignes d'un tableau)

 

Alignement <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

 

Sans-coupure <TD NOWRAP>

 

 

Débordement d'une colonne <TD COLSPAN=?>

 

 

Débordement des lignes <TD ROWSPAN=?>

 

N1.1 Largeur <TD WIDTH=?> (en pixels)
N1.1 Largeur <TD WIDTH=%> (en pourcentage du tableau)

N3.0b

Couleur de cellule

<TD BGCOLOR="#$$$$$$">

 

 

En-tête du tableau <TH></TH> (semblable aux données, centré et gras)

 

Alignement <TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>

 

Sans-retour <TH NOWRAP>

 

 

Débordement de colonnes <TH COLSPAN=?>

 

 

Débordement de lignes <TH ROWSPAN=?>

 

N1.1 Largeur <TH WIDTH=?> (en pixels)
N1.1 Largeur <TH WIDTH=%> (en pourcentage du tableau)

N3.0b

Couleur de cellule

<TH BGCOLOR="#$$$$$$">

 

 

Légende du tableau <CAPTION></CAPTION>

 

 

Alignement <CAPTION ALIGN=TOP|BOTTOM> (sur ou sous le tableau)

 

CADRES


N2.0 Cadre du document <FRAMESET></FRAMESET> (au lieu de <BODY>)
N2.0 Hauteur des lignes <FRAMESET ROWS=,,,></FRAMESET> (en pixels ou pourcentage)
N2.0 Hauteur des lignes <FRAMESET ROWS=*></FRAMESET> (* = grandeur relative)
N2.0 Largeur des colonnes <FRAMESET COLS=,,,></FRAMESET> (en pixels ou pourcentage)
N2.0 Largeur des colonnes <FRAMESET COLS=*></FRAMESET> (* = grandeur relative)

N3.0b

Lageur de la bordure

<FRAMESET BORDER=?>

 

N3.0b

Bordures

<FRAMESET FRAMEBORDER="yes|no">

 

N3.0b

Couleur de la bordure

<FRAMESET BORDERCOLOR="#$$$$$$">

 

N2.0 Définition d'un cadre <FRAME> (items d'un cadre individuel)
N2.0 Afficher le document <FRAME SRC="URL">

 

N2.0 Nom du cadre <FRAME NAME="***"|_blank|_self|_parent|_top>

 

N2.0 Largeur de la marge <FRAME MARGINWIDTH=?> (marges à gauche et à droite)
N2.0 Hauteur de la marge <FRAME MARGINHEIGHT=?> (marges en haut et en bas)
N2.0 Défilement du texte <FRAME SCROLLING="YES|NO|AUTO">

 

N2.0 Défilement du texte <FRAME NORESIZE>

 

N3.0b

Bordures

<FRAME FRAMEBORDER="yes|no">

 

N3.0b

Couleur de la bordure

<FRAME BORDERCOLOR="#$$$$$$">

 

N2.0 Contenu non-encadré <NOFRAMES></NOFRAMES> (pour les lecteurs WWW incapables d'utiliser les cadres)

 

JAVA


 

Applet

<APPLET></APPLET>

 

 

Nom de fichier applet

<APPLET CODE="***">

 

 

Paramètres

<APPLET PARAM NAME="***">

 

 

Position de l'applet

<APPLET CODEBASE="URL">

 

 

Identificateur Applet

<APPLET NAME="***">

(pour faire référence ailleurs dans une page)

 

Alternative en texte

<APPLET ALT="***">

(pour les navigateurs non-java)

 

Alignement

<APPLET ALIGN="LEFT|RIGHT|CENTER">

 

 

Grandeur

<APPLET WIDTH=? HEIGHT=?>

(en pixels)

 

Espacement

<APPLET HSPACE=? VSPACE=?>

(en pixels)

 

DIVERS


 

Commentaires <!--***--> (n'est pas affiché par le lecteur WWW)

 

Prologue HTML 3.2 .<!DOCTYPE HTML PUBLIC "-//W3C//DTD W3 HTML 3.2//EN"> [*]

 

Indicateur de recherche <ISINDEX> (indique un index de recherche)
N1.0 Ligne de commande <ISINDEX PROMPT="***"> (texte pour indiquer l'entrée de données)

 

Envoie de la recherche <A HREF="URL?***"></A> (utiliser un point d'interrogation)

 

URL de ce fichier <BASE HREF="URL"> (doit être dans l'en-tête du document)

 

Nom de base de la fenêtre <BASE TARGET="***"> (doit être dans l'en-tête du document)

 

Relation <LINK REV="***" REL="***" HREF="URL"> (dans l'en-tête du document)

 

Information META <META> (dans l'en-tête du document)

 

Feuilles de styles

<STYLE></STYLE>

(pas supporté largement)

 

Scripts

<SCRIPT></SCRIPT>

(pas supporté largement)

 
 

Copyright ©1995-1997 Kevin Werbach. Toute distribution non-commerciale est permise. Ce guide n'est pas un produit de Bare Bones Software; la similarité des noms est une pure coincidence.

 

Menu | LISTE DES ÉTIQUETTES | Version texte | Page d'acceuil de Kevin






INU 1051 - PETIT GUIDE HTML PAR par JEAN-FRANÇOIS GAUVIN

Ce petit guide est loin d'être exhaustif au niveau de la description des éléments du HTML. Par contre, il peut servir comme point de départ pour la création d'un fichier HTML de base.

Menu :

Structure de base

Résultat à l'écran

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

</body>
</html>

 
Modèle de contenu : html, head, title, meta, body  

< Retour au menu >

Les informations d'en-tête

Résultat à l'écran

<head>
<title>Mettre le titre du document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<!-- les meta suivants sont optionnels -->
<meta name="keywords" content="mot-clé1 mot-clé2 mot-clé3 etc.">
<meta name="description" content="Mettre la description de votre site ici">

</head>

 

 
Modèle de contenu : html, head, title, meta, body  

< Retour au menu >

Le corps du document

Résultat à l'écran

<body>

</body>

 

 
Modèle de contenu : body  

< Retour au menu >

Les niveaux de titre

Résultat à l'écran

<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>

Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5
Titre de niveau 6
Modèle de contenu : h1, h2, h3, h4, h5, h6  

< Retour au menu >

Les paragraphes

Résultat à l'écran

<p align="left">Pour conserver le vin, il faut un cellier bien aménagé ou un meuble qui s'intègre au décor de la maison et cache une technologie avancée. Au sous-sol comme au 18e étage, ces caves permettent au vin de se bonifier.</p>

<p align="center">Tout oenophile amateur rêve d'une cave où il pourrait choisir un vin en fonction du repas qu'il prépare, loger quelques bons crus dont l'offre sur le marché québécois est éphémère, et suivre leur évolution sur 5, 10 ou 15 ans.</p>

<p align="right">S'il est facile de boire un bon vin, il l'est beaucoup moins de lui assurer un vieillissement sécuritaire. «La cave idéale est un luxe rare», fait remarquer le chroniqueur Jacques Benoît.</p>

<p align="justify">Quelle que soit la formule adoptée et les trésors d'ingéniosité dont vous ferez preuve, la cave exigera toujours des qualités d'étanchéité, d'isolation thermique, de sécurité, toutes contrôlables. Il faut l'isoler avec de la laine de verre, poser un climatiseur pour contrôler la température et l'hygrométrie et prévoir un ventilateur si l'aération est insuffisante.</p>

 

Pour conserver le vin, il faut un cellier bien aménagé ou un meuble qui s'intègre au décor de la maison et cache une technologie avancée. Au sous-sol comme au 18e étage, ces caves permettent au vin de se bonifier.

Tout oenophile amateur rêve d'une cave où il pourrait choisir un vin en fonction du repas qu'il prépare, loger quelques bons crus dont l'offre sur le marché québécois est éphémère, et suivre leur évolution sur 5, 10 ou 15 ans.

S'il est facile de boire un bon vin, il l'est beaucoup moins de lui assurer un vieillissement sécuritaire. «La cave idéale est un luxe rare», fait remarquer le chroniqueur Jacques Benoît.

Quelle que soit la formule adoptée et les trésors d'ingéniosité dont vous ferez preuve, la cave exigera toujours des qualités d'étanchéité, d'isolation thermique, de sécurité, toutes contrôlables. Il faut l'isoler avec de la laine de verre, poser un climatiseur pour contrôler la température et l'hygrométrie et prévoir un ventilateur si l'aération est insuffisante.

Modèle de contenu : p  

< Retour au menu >

Une section de document

Résultat à l'écran

<div>
<h1>Introduction</h1>

<p>Pour conserver le vin, il faut un cellier bien aménagé ou un meuble qui s'intègre au décor de la maison et cache une technologie avancée. Au sous-sol comme au 18e étage, ces caves permettent au vin de se bonifier.</p>

<p>Tout oenophile amateur rêve d'une cave où il pourrait choisir un vin en fonction du repas qu'il prépare, loger quelques bons crus dont l'offre sur le marché québécois est éphémère, et suivre leur évolution sur 5, 10 ou 15 ans.</p>

<p>S'il est facile de boire un bon vin, il l'est beaucoup moins de lui assurer un vieillissement sécuritaire. «La cave idéale est un luxe rare», fait remarquer le chroniqueur Jacques Benoît.</p>
</div>

 

Introduction

Pour conserver le vin, il faut un cellier bien aménagé ou un meuble qui s'intègre au décor de la maison et cache une technologie avancée. Au sous-sol comme au 18e étage, ces caves permettent au vin de se bonifier.

Tout oenophile amateur rêve d'une cave où il pourrait choisir un vin en fonction du repas qu'il prépare, loger quelques bons crus dont l'offre sur le marché québécois est éphémère, et suivre leur évolution sur 5, 10 ou 15 ans.

S'il est facile de boire un bon vin, il l'est beaucoup moins de lui assurer un vieillissement sécuritaire. «La cave idéale est un luxe rare», fait remarquer le chroniqueur Jacques Benoît.

Modèle de contenu : div  

< Retour au menu >

Une liste numérotée

Résultat à l'écran

<ol>
<li>pommes</li>
<li>oranges</li>
<li>poires</li>
</ol>

 

  1. pommes
  2. oranges
  3. poires
Modèle de contenu : ol, li  

< Retour au menu >

Une liste non numérotée

Résultat à l'écran

<ul>
<li>pommes</li>
<li>oranges</li>
<li>poires</li>
</ul>

 

  • pommes
  • oranges
  • poires
Modèle de contenu : ul, li  

< Retour au menu >

Une liste de définitions

Résultat à l'écran

<dl>
<dt>EBSI</dt>
<dd>École de Bibliothéconomie et sciences de l'information</dd>
<dt>CRIM</dt>
<dd>Centre de recherche informatique de Montréal</dd>
</dl>

 

EBSI
École de Bibliothéconomie et sciences de l'information
CRIM
Centre de recherche informatique de Montréal
Modèle de contenu : dl, dt, dd  

< Retour au menu >

Une liste imbriquée

Résultat à l'écran

<ul>
   <li>Ontario:
   <ul>
            <li>Toronto</li>
            <li>Ottawa</li>
   </ul>
   </li>
   <li>Québec:
        <ul>
             <li>Montréal</li>
             <li>Laval</li>
        </ul>
         </li>
</ul>

  • Ontario:
    • Toronto
    • Ottawa
  • Québec:
    • Montréal
    • Laval
Modèle de contenu : ul, li  

< Retour au menu >

Du texte préformaté

Résultat à l'écran

<pre>
disquette
     cd-rom
         DVD
</pre>

disquette
   cd-rom
     DVD
Modèle de contenu : pre  

< Retour au menu >

Une longue citation en paragraphe

Résultat à l'écran

<blockquote>
<p>À la Renaissance, notamment, avec Pietro della Francesca et Mantegna, la représentation se sécularise: on passe du symbolisme religieux à l'espace géométrique. Les Saints prennent la figure de personnages connus ou du peintre lui-même. La ressemblance physique fait son apparition.</p>
<p>Louis Art/Ho. Petite dissection de l'art occidental, précis d'art organique, p. 7</ p>
</blockquote>

À la Renaissance, notamment, avec Pietro della Francesca et Mantegna, la représentation se sécularise: on passe du symbolisme religieux à l'espace géométrique. Les Saints prennent la figure de personnages connus ou du peintre lui-même. La ressemblance physique fait son apparition.

Louis Art/Ho. Petite dissection de l'art occidental, précis d'art organique, p. 7

Modèle de contenu : blockquote  

< Retour au menu >

Une adresse

Résultat à l'écran

<address>
Laboratoires Pro-Tech<br>
2925 boul. Industriel<br>
Montréal, Qué.<br>
H3W 7T9
</address>

Laboratoires Pro-Tech
2925 boul. Industriel
Montréal, Qué.
H3W 7T9
Modèle de contenu : address  

< Retour au menu >

Une ligne horizontale

Résultat à l'écran

<hr>

 


Modèle de contenu : br  

< Retour au menu >

Les styles caractères logiques <EM> et <STRONG>

Résultat à l'écran

... le nom latin de cette plante vivace est <em>hosta rubicus</em>.

<strong>Note:</strong> il est interdit de boire et manger dans le laboratoire.

... le nom latin de cette plante vivace est hosta rubicus.

Note: il est interdit de boire et manger dans le laboratoire.

Modèle de contenu : em, strong  

< Retour au menu >

Les styles caractères physiques <I> et <B>

Résultat à l'écran

... le nom latin de cette plante vivace est <i>hosta rubicus</i>.

<b>Note:</b> il est interdit de boire et manger dans le laboratoire.

... le nom latin de cette plante vivace est hosta rubicus.

Note: il est interdit de boire et manger dans le laboratoire.

Modèle de contenu : i, b  

< Retour au menu >

Un hyperlien absolu

Résultat à l'écran

...pour encore plus d'information, veuillez consulter le site du fabricant en cliquant <a href="http://www.ibm.com/">ici</a>

...pour encore plus d'information, veuillez consulter le site du fabricant en cliquant ici

Modèle de contenu : a  

< Retour au menu >

Un hyperlien relatif

Résultat à l'écran

...pour encore plus d'information, veuillez consulter notre section sur les plantes vivaces en cliquant <a href="vivaces.html">ici</a>

...pour encore plus d'information, veuillez consulter notre section sur les plantes vivaces en cliquant ici

Modèle de contenu : a  

< Retour au menu >

Un hyperlien interne à un document

Résultat à l'écran

En cliquant <a href="#conclusion">ici</a> vous irez à la conclusion.

...

<h3><a name="conclusion">Conclusion</a></h3>

En cliquant ici vous irez à la conclusion.

...

Conclusion

Modèle de contenu : a  

< Retour au menu >

Un hyperlien à une adresse de courriel

Résultat à l'écran

Vous pouvez m'écrire un courriel en cliquant <a href="mailto:jean-francois.gauvin@umontreal.ca">ici</a>

Vous pouvez m'écrire un courriel en cliquant ici

Modèle de contenu : a  

< Retour au menu >

Un saut de ligne

Résultat à l'écran

<p>Voici le numéro de téléphone ou vous pouvez nous joindre :<br>
tél. : 514-555-4321</p>

Voici le numéro de téléphone ou vous pouvez nous joindre :
tél. : 514-555-4321

Modèle de contenu : br  

< Retour au menu >

Un image

Résultat à l'écran

<img src="images/photo1.jpg">

Modèle de contenu : img  

< Retour au menu >

Un image alignée à droite avec du texte

Résultat à l'écran

<p><img src="images/photo1.jpg" align="right">Ce sont des armoires isothermes qui ne prennent pas plus de place qu'un frigo et recréent le microclimat d'une cave à vins naturelle. La cave d'appartement a d'ailleurs bien des points communs avec les frigos, notamment l'isolation des parois et un générateur</p>

Ce sont des armoires isothermes qui ne prennent pas plus de place qu'un frigo et recréent le microclimat d'une cave à vins naturelle. La cave d'appartement a d'ailleurs bien des points communs avec les frigos, notamment l'isolation des parois et un générateur

Modèle de contenu : img  

< Retour au menu >

Un image alignée à gauche avec du texte

Résultat à l'écran

<p><img src="images/photo1.jpg" align="left">Ce sont des armoires isothermes qui ne prennent pas plus de place qu'un frigo et recréent le microclimat d'une cave à vins naturelle. La cave d'appartement a d'ailleurs bien des points communs avec les frigos, notamment l'isolation des parois et un générateur</p>

Ce sont des armoires isothermes qui ne prennent pas plus de place qu'un frigo et recréent le microclimat d'une cave à vins naturelle. La cave d'appartement a d'ailleurs bien des points communs avec les frigos, notamment l'isolation des parois et un générateur

Modèle de contenu : img  

< Retour au menu >

Un image centrée sans texte

Résultat à l'écran

<p align="center"><img src="images/photo1.jpg"></p>

Modèle de contenu : img  

< Retour au menu >

Un tableau simple

Résultat à l'écran

<table width="100%" border="1">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>

Cellule 1 Cellule 2
Cellule 3 Cellule 4
Modèle de contenu : table, tr, td  

< Retour au menu >

Un tableau simple avec intitulé

Résultat à l'écran

<table width="100%" border="1">
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
</tr>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>

Colonne 1 Colonne 2
Cellule 1 Cellule 2
Cellule 3 Cellule 4
Modèle de contenu : table, tr, th, td  

< Retour au menu >

Un tableau avec fusion de colonne

Résultat à l'écran

<table width="100%" border="1">
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<tr>
<td rowspan="2">Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
</tr>
</table>

Colonne 1 Colonne 2
Cellule 1 Cellule 2
Cellule 3
Modèle de contenu : table, tr, th, td  

< Retour au menu >

Un tableau avec fusion de ligne

Résultat à l'écran

<table width="100%" border="1">
<tr>
<th colspan="2">Titre du tableau</th>
</tr>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>

Titre du tableau
Cellule 1 Cellule 2
Cellule 3 Cellule 4
Modèle de contenu : table, tr, th, td  

< Retour au menu >



Source :INU 1051 - Petit guide HTML par Jean-François Gauvin







APPRENDRE LE LANGAGE HTML PAR LUC VAN LANCKER

Voici une liste des principales balises Html qu'il vous est loisible d'imprimer.

Mise en forme des caractères
<B>...</B> Texte en gras
<BIG>...</BIG> Agrandissement de la taille des caractères
<BLINK>...</BLINK> Texte clignotant (Netscape seul)
<EM>...</EM> Texte en italique
<FONT color="#XXXXXX">
...</FONT>
Texte en couleur où
XXXXXX est une valeur hexadécimale
<FONT size=X>...</FONT> Taille des caractères où
X est une valeur de 1 à 7
<I>...</I> Texte en italique
<NOBR>...</NOBR> Empêche les ruptures automatiques
de ligne des navigateurs
<PRE>...</PRE> Texte préformaté, soit avec affichage
de tous les espaces et sauts de ligne
<SMALL>...</SMALL> Réduction de la taille des caractères
<STRONG>...</STRONG> Mise en gras du texte
<SUB>...</SUB> Texte en indice
<SUP>...</SUP> Texte en exposant
<U>...</U> Texte souligné
Mise en forme du texte
<!--...--> Commentaire ignoré par le navigateur
<BR> A la ligne
<BLOCKQUOTE>...
</BLOCKQUOTE>
Citation (introduit un retrait du texte)
<CENTER>...</CENTER> Centre tout élément compris dans le tag
<DIV align=center> ...</DIV> Centre l'élément encadré par le tag
<DIV align=left> ...</DIV> Aligne l'élément à gauche
<DIV align=right> ...</DIV> Aligne l'élément à droite
<Hx>...</Hx>
<Hx align=center>...</Hx>
<Hx align=left>...</Hx>
<Hx align=right>...</Hx>
Titre où x a une valeur de 1 à 6
Titre centré
Titre aligné à gauche
Titre aligné à droite
<P>...</P>
<P align=center>...</P>
<P align=left>...</P>
<P align=right>...</P>
Nouveau paragraphe
Paragraphe centré
Paragraphe aligné à gauche
Paragraphe aligné à droite
Listes
<UL>
<LI>
</UL>
Liste non numérotée (dite à puces)
Elément de liste
<OL>
<LI>
</OL>
Liste numérotée
Elément de liste
<DL>
<DT>...</DT>
<DD>...</DD>
</DL>
Liste de glossaire
Terme de glossaire (sans retrait)
Explication du terme (avec retrait)
Ligne de séparation
<HR> Trait horizontal (centré par défaut)
<HR width="x%"> Largeur du trait en %
<HR width=x> Largeur du trait en pixels
<HR size=x> Hauteur du trait en pixels
<HR align=center>
<HR align=left>
<HR align=right>
Trait centré (défaut)
Trait aligné à gauche
Trait aligné à droite
<HR noshade> Trait sans effet d'ombrage
Hyperliens
<A href="http://...">...</A> Lien vers une page Web
<A href="mailto:...">...</A> Lien vers une adresse eMail
<A href="fichier.htm">...</A> Lien vers la page locale fichier.htm
située dans le même répertoire
<A name="xyz">...</A> Définition d'une ancre
<A href="xyz">...</A>
<A href="fichier#xyz">...</A>
Lien vers une ancre
Images
<IMG src="xyz.gif">
<IMG src="xyz.pjg>
Insertion d'une image au format Gif ou Jpg
(voir liens pour l'adressage)
<IMG ... width=x height=y> Mise à l'échelle de l'image en pixels
( a comme effet d'accélérer l'affichage de la page)
<IMG ... border=x> Définition de la bordure d'une image avec lien
<IMG ... alt="votre texte"> Texte alternatif lorsque l'image n'est pas affichée
<IMG ... align=bottom>
<IMG ... align=middle>
<IMG ... align=top>
<IMG ... align=left>
<IMG ... align=right>

Aligne l'image en bas
Aligne l'image au milieu
Aligne l'image en haut
Aligne l'image à gaughe
Aligne l'image à droite
<IMG ... hspace=x>
<IMG ... vspace=y>
Espacement horizontal entre l'image et le texte
Espacement vertical entre l'image et le texte
Tableau
<TABLE>...</TABLE> Définition d'un tableau
<TABLE width="x%"> Largeur du tableau en %
<TABLE width=x> Largeur du tableau en pixels
<TABLE border=x> Largeur de la bordure
<TABLE cellpadding=x> Espace entre la bordure et le texte
<TABLE cellspacing=x> Epaisseur du trait entre les cellules
<TR>...</TR> Ligne du tableau
<TD>...</TD> Cellule du tableau
<TD bgcolor="#XXXXXX"> Couleur d'une cellule de tableau
<TD width="x%">
<TD width=x>
Largeur de colonne en %
Largeur de colonne en pixels
<TD align=center>
<TD align=left>
<TD align=right>
Texte dans la cellule centré
Texte dans la cellule aligné à gauche
Texte dans la cellule aligné à droite
<TD valign=bottom>
<TD valign=middle>
<TD valign=top>
Alignement vers le bas du contenu d'une cellule
Centrage vertical du contenu d'une cellule
Alignement vers le haut du contenu d'une cellule
<TD colspan=x>
<TD rowspan=x>
Nombre de cellules à fusionner horizontalement
Nombre de cellules à fusionner verticalement
Frames
<FRAMESET>...</FRAMESET> Définit une structure de frames
(remplace alors le tag BODY)
<FRAMESET rows="x%,y%,..."> Division horizontale de la fenêtre en %
<FRAMESET cols="x%,y%,..."> Division verticale de la fenêtre en %
<FRAME src="fichier.htm"> Fichier affiché dans une fenêtre de frames
<NOFRAMES>...</NOFRAMES> Contenu pour les browsers non prévus
pour les frames
Fichier Html
<HTML>...</HTML> Début et fin de fichier Html
<HEAD>...</HEAD> Zone d'en-tête d'un fichier Html
<TITLE>...</TITLE> Titre affiché par le browser (élément de HEAD)
<BODY>...</BODY> Début et fin du corps du fichier Html
<BODY bgcolor="#XXXXXX"> Couleur d'arrière-plan (en hexadécimal)
<BODY background="xyz.gif"> Image d'arrière-plan


Source :
Apprendre le langage HTML / Luc Van Lancker