Ajout d'un nouveau lien dans index.html
Toilettage de bases.tml + renommage ("Bases" -> "Tutoriel") + ajout de
nouvelles balises (acronym, abbr, code, i). Si quelqu'un veut
rectifier mon exemple de "hello world" en C, il paraît que ce n'est
pas du C ANSI...
This commit is contained in:
mlnguyen
parent
2d1d22ea12
commit
12584d4a2d
2 changed files with 292 additions and 157 deletions
|
|
@ -4,39 +4,46 @@
|
|||
"tuteurs://DTD/tml.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Bases</title>
|
||||
<title>Tutoriel</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Tutorial HTML : les bases</h1>
|
||||
<h1>Tutoriel HTML : les bases</h1>
|
||||
|
||||
|
||||
<h2>Principes généraux</h2>
|
||||
|
||||
<p>
|
||||
Le HTML est le langage des pages Web. Ce n'est pas un langage de
|
||||
programmation, mais plutôt un langage de mise en forme de données. Une
|
||||
page Web décrit une structure statique, tandis qu'un programme est un
|
||||
processus dynamique. « HTML » se prononce H-T-M-L, mais vous pouvez
|
||||
aussi dire « chteumeuleu » :-)
|
||||
Le <abbr title="HyperText Mark-Up Language">HTML</abbr> est le langage
|
||||
des pages Web. Ce n'est pas un langage de programmation, mais un
|
||||
langage de mise en forme de données : une page Web décrit une
|
||||
structure statique, tandis qu'un programme est un processus
|
||||
dynamique. Vous n'avez aucunement besoin d'avoir des bases de
|
||||
programmation pour écrire du HTML ! « HTML » se prononce H-T-M-L, mais
|
||||
vous pouvez aussi dire « chteumeuleu » :-)
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Le HTML sert à définir la structure logique d'un document, permettant
|
||||
ensuite à un navigateur (Internet Explorer, Netscape, Mozilla, Opera,
|
||||
etc.) de rendre visuellement le document. Pour des raisons évidentes
|
||||
de compatibilité, le HTML possède une norme, rédigée par le World Wide
|
||||
Web Consortium. Nous en sommes actuellement à <a
|
||||
href="http://www.w3.org/TR/html4/">HTML 4</a>.
|
||||
Le HTML sert à définir la <strong>structure logique</strong> d'un
|
||||
document, permettant ensuite à un navigateur (Internet Explorer,
|
||||
Netscape, Mozilla, Opera, etc.) de rendre visuellement le
|
||||
document. Pour des raisons évidentes d'interopérabilité, le HTML
|
||||
possède une norme, rédigée par le World Wide Web Consortium
|
||||
(<abbr>W3C</abbr>), qui regroupe des acteurs majeurs du Web comme
|
||||
Microsoft, MacroMedia (qui produit Flash), Apple, AOL, etc. Nous en
|
||||
sommes actuellement à <a href="http://www.w3.org/TR/html4/">HTML
|
||||
4.1</a>.
|
||||
</p>
|
||||
|
||||
<div class="attention">Le HTML normalement ne s'occupe que de définir
|
||||
la structure logique de votre document. Pour le reste (aspect visuel
|
||||
agréable : couleurs, tailles des fontes, etc.), c'est le domaine des
|
||||
feuilles de style, dont le tutorial va venir.
|
||||
<div class="attention"><strong>Attention</strong> : le HTML ne
|
||||
s'occupe que de définir la structure logique de votre document. Pour
|
||||
l'aspect visuel (mise en page, couleurs, fontes, etc.), c'est le
|
||||
domaine des feuilles de style, dont le <a href="css.tml">tutoriel</a>
|
||||
est en cours de rédaction.
|
||||
</div>
|
||||
|
||||
<p>L'élément de base d'un site est la page. C'est un fichier dont
|
||||
<p>
|
||||
L'élément de base d'un site est la page. C'est un fichier dont
|
||||
l'extension est normalement <code>.html</code> (ou <code>.htm</code>
|
||||
si votre système d'exploitation vous impose cette limitation) et qui
|
||||
contient du code HTML.
|
||||
|
|
@ -45,13 +52,14 @@ contient du code HTML.
|
|||
<h3><a name="voc">Vocabulaire : éléments, attributs</a></h3>
|
||||
|
||||
<p>
|
||||
Le HTML utilise des balises (aussi appelées « éléments ») pour
|
||||
distinguer les éléments logiques de la page. Toute balise est de forme
|
||||
<TAGADA>, avec un < et un >. Les balises se referment avec
|
||||
</TAGADA>, / étant l'élément fermant. Les balises acceptent
|
||||
parfois des options, qu'on appelle des « attributs » : dans
|
||||
<TAGADA type="plouf">, TAGADA est l'élément, <code>type</code>
|
||||
l'attribut, et « plouf » la valeur de l'attribut.
|
||||
Le HTML utilise des <strong>balises</strong> (aussi appelées
|
||||
« éléments ») pour distinguer les éléments logiques de la page. Toute
|
||||
balise est de forme <TAGADA>, avec un < et un >. Les
|
||||
balises se referment avec </TAGADA>, / étant l'élément
|
||||
fermant. Les balises acceptent parfois des options, qu'on appelle des
|
||||
<strong>attributs</strong> : dans <TAGADA type="plouf">,
|
||||
TAGADA est l'élément, <code>type</code> l'attribut, et « plouf » la
|
||||
valeur de l'attribut.
|
||||
</p>
|
||||
|
||||
<h3>Casse</h3>
|
||||
|
|
@ -60,47 +68,61 @@ l'attribut, et
|
|||
Les balises HTML peuvent s'écrire aussi bien en majuscules qu'en
|
||||
minuscules. Pour des questions de lisibilité, le W3C conseille
|
||||
d'écrire les éléments en majuscule, les attributs en minuscule. C'est
|
||||
ce que nous ferons ici. Attention néanmoins, le XHTML, une forme
|
||||
avancée de langage de description, n'utilise que les
|
||||
minuscules. Peut-être préférerez-vous en prendre dès aujourd'hui
|
||||
l'habitude.
|
||||
ce que nous ferons ici.
|
||||
</p>
|
||||
|
||||
<div class="encadre">
|
||||
<strong>À noter</strong> : le <abbr title="eXtended HyperText
|
||||
Mark-Up Language">XHTML</abbr>, une forme avancée de langage de
|
||||
description qui est l'avenir du HTML, n'utilise que les
|
||||
<em>minuscules</em>. Peut-être préférerez-vous en prendre dès
|
||||
aujourd'hui l'habitude.
|
||||
</div>
|
||||
|
||||
<h3>Commentaires</h3>
|
||||
|
||||
<p>Les commentaires s'insèrent entre <!-- et -->. Attention, à
|
||||
l'intérieur de commentaires, il vaut mieux ne pas utiliser de doubles
|
||||
tirets (--). On ne peut pas placer de commentaires à l'intérieur d'un
|
||||
élément.
|
||||
tirets (--). On ne peut pas placer de commentaires à l'intérieur d'un
|
||||
élément.
|
||||
</p>
|
||||
|
||||
<h3>Syntaxe générale</h3>
|
||||
|
||||
<div class="attention">Sauf rares exceptions, toute balise ouverte
|
||||
doit être refermée. Toute partie de la page doit être contenue dans
|
||||
une balise.</div>
|
||||
<div class="encadre">
|
||||
<strong>À noter</strong> : sauf rares exceptions, toute balise
|
||||
ouverte doit être refermée. Toute partie de la page doit être contenue
|
||||
dans une balise. En XHTML, <strong>toutes</strong> les balises doivent
|
||||
être refermées, peut-être préférez-vous dès maintenant prendre de
|
||||
bonnes habitudes.
|
||||
</div>
|
||||
|
||||
<p>Les balises doivent être ouvertes et refermées dans l'ordre. Faites
|
||||
spécialement attention dans le cadre de balises imbriquées. Ainsi,
|
||||
<p>Les balises doivent être ouvertes et refermées <em>dans
|
||||
l'ordre</em>. Faites spécialement attention dans le cadre de balises
|
||||
imbriquées.
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<P>Je vous préviens tout de suite, c'est <EM>non.</P></EM>
|
||||
</pre>
|
||||
|
||||
<p class="continue">n'est pas syntaxiquement correct. Il faut refermer
|
||||
<em> avant <p>.</p>
|
||||
<p class="continue">Ceci n'est pas syntaxiquement correct. Il faut
|
||||
refermer <em> avant <p>.</p>
|
||||
|
||||
|
||||
<h3><a name="entities">Entités HTML et Unicode</a></h3>
|
||||
<h3><a name="entities">Caractères spéciaux : entités HTML et Unicode</a></h3>
|
||||
|
||||
<p>
|
||||
Vous avez parfois besoin de cracatères spéciaux, qui ne peuvent pas
|
||||
être (du moins facilement) saisis directement au clavier. Pour cela,
|
||||
le HTML a défini des <em>entités</em>, qui par convention représentent
|
||||
ces caractères. Par exemple, le symbole euro (€) est
|
||||
&euro;. En plus de ces entités HTML (dont vous pouvez trouver la
|
||||
<a
|
||||
le HTML a défini des <dfn>entités</dfn>, qui par convention
|
||||
représentent ces caractères. Par exemple, le symbole euro (€) est
|
||||
<code>&euro;</code>, le e dans l'o (œ) s'écrit
|
||||
<code>&oelig;</code>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
En plus de ces entités HTML (dont vous pouvez trouver la <a
|
||||
href="http://www.eleves.ens.fr:8080/home/madore/computers/unicode/htmlent.html">liste</a>
|
||||
chez David Madore), vous disposez des entités Unicode. <a
|
||||
href="http://www.unicode.org/">Unicode</a> est une convention dont le
|
||||
|
|
@ -116,38 +138,48 @@ l'entit
|
|||
<h3>Le DTD</h3>
|
||||
|
||||
<p>
|
||||
Toute page HTML doit commencer par la déclaration du DTD (<em
|
||||
lang="en">Document Type Definition</em>), qui précise au navigateur
|
||||
quelle version de HTML vous utilisez.
|
||||
Toute page HTML doit commencer par la déclaration du <i
|
||||
lang="en">Document Type Definition</i> (<abbr>DTD</abbr>), qui précise
|
||||
au navigateur quelle version de HTML vous utilisez.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Le DTD le plus fréquent à l'heure actuelle est celui du HTML 4
|
||||
transitionnel (le « transitionnel » veut dire que vous utiliserez des
|
||||
éléments considérés comme obsolètes mais qui sont encore
|
||||
supportés) :
|
||||
</p>
|
||||
<ul>
|
||||
|
||||
<li> <strong>HTML 4 strict</strong>, qui respecte parfaitement la
|
||||
distinction fond (HTML) / forme (CSS) :
|
||||
|
||||
<pre>
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
</pre>
|
||||
</li>
|
||||
|
||||
<li> <strong>HTML 4 transitionnel</strong>, qui supporte encore des
|
||||
attributs ou éléments obsolètes :
|
||||
|
||||
<pre>
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
</pre>
|
||||
|
||||
<p class="continue">Il existe d'autres DTD, tel que celui pour les
|
||||
pages utilisant des <em lang="en">frames</em> (alias « cadres ») :</p>
|
||||
|
||||
<pre>
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
|
||||
"http://www.w3.org/TR/html4/frameset.dtd">
|
||||
</pre>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p class="continue">
|
||||
Pour l'instant, notre page-squelette ressemble donc à ceci :
|
||||
Il existe d'autres DTD, par exemple celui pour les <i
|
||||
lang="en">frames</i> (cadres), mais souvenez-vous qu'utiliser les
|
||||
frames n'est pas une bonne idée, cf. l'excellent article « <a
|
||||
href="http://openweb.eu.org/articles/finir_cadres/">Pour en finir avec
|
||||
les cadres</a> » sur le site de l'<a
|
||||
href="http://openweb.eu.org/">OpenWeb Group</a>.
|
||||
</p>
|
||||
|
||||
<p class="continue">
|
||||
Pour l'instant, notre page-squelette ressemble donc à ceci :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
|
||||
<HTML>
|
||||
|
||||
|
|
@ -192,8 +224,9 @@ les moteurs de recherche, qui s'en servent pour indexer vos
|
|||
pages. Nous vous en présentons quelques-unes.
|
||||
</p>
|
||||
|
||||
<div class="attention">Les balises <code>META</code> sont parmi les
|
||||
rares balises qui peuvent ne pas être refermées.</div>
|
||||
<div class="encadre">
|
||||
<strong>À noter</strong> : les balises <code>META</code> sont parmi
|
||||
les rares balises qui peuvent ne pas être refermées.</div>
|
||||
|
||||
<h5>Auteur de la page</h5>
|
||||
|
||||
|
|
@ -217,7 +250,7 @@ pour le navigateur.</p>
|
|||
|
||||
<pre><META http-equiv="Content-Language" content="fr"></pre>
|
||||
|
||||
<p class="continue">Quelques codes utiles : <code>fr</code> pour
|
||||
<p class="continue">Quelques codes utiles : <code>fr</code> pour
|
||||
le français, <code>en</code> pour l'anglais, <code>de</code> pour
|
||||
l'allemand, <code>es</code> pour l'espagnol, <code>it</code> pour
|
||||
l'italien, <code>ru</code> pour le russe. Déclarer la langue utilisée
|
||||
|
|
@ -250,16 +283,18 @@ le lecteur va voir <em>via</em> son navigateur.
|
|||
<p>Le corps de la page est contenu entre balises <BODY>. Comment
|
||||
le remplir ? Vous le verrez dans les lignes suivantes.</p>
|
||||
|
||||
<div class="encadre">Pour tous les éléments de <BODY> il y a une
|
||||
distinction importante entre les balises dites « <em>block
|
||||
level</em> » et les balises « <em>inline level</em> ». Les <em>block
|
||||
level</em> sont par exemple des paragraphes, des titres, etc. Ils
|
||||
forment des blocs, quoi. Les éléments <em>inline</em> sont plutôt de
|
||||
la mise en forme, ils s'appliquent à l'intérieur des blocs. C'est le
|
||||
cas des balises qui mettent en valeur le texte, qui le renforcent. La
|
||||
distinction peut vous paraître confuse mais vous comprendrez mieux
|
||||
ensuite. Vous pouvez regarder par exemple la différence entre <a
|
||||
href="#quote">citation <em>inline</em> et bloc</a>.
|
||||
<div class="encadre">
|
||||
<strong>Important</strong> : pour tous les éléments de <BODY> il
|
||||
y a une distinction importante entre les balises dites « <i
|
||||
lang="en">block level</i> » et les balises « <i lang="en">inline
|
||||
level</i> ». Les <i lang="en">block level</i> sont par exemple des
|
||||
paragraphes, des titres, etc. Ils forment des blocs, quoi. Les
|
||||
éléments <i lang="en">inline</i> sont plutôt de la mise en forme, ils
|
||||
s'appliquent à l'intérieur des blocs. C'est le cas des balises qui
|
||||
mettent en valeur le texte, qui le renforcent. La distinction peut
|
||||
vous paraître confuse mais vous comprendrez mieux ensuite. Vous pouvez
|
||||
regarder par exemple la différence entre <a href="#quote">citation <i
|
||||
lang="en">inline</i> et bloc</a>.
|
||||
</div>
|
||||
|
||||
<h3>Squelette entier</h3>
|
||||
|
|
@ -268,8 +303,8 @@ href="#quote">citation <em>inline</em> et bloc</a>.
|
|||
Vous pouvez le copier-coller pour servir de modèle à vos pages Web.</p>
|
||||
|
||||
<pre>
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
|
||||
<HTML>
|
||||
<HEAD>
|
||||
|
|
@ -298,11 +333,13 @@ hi
|
|||
titre !
|
||||
</p>
|
||||
|
||||
<p>Si vous avez fait du LaTeX, vous connaissez ce genre de chose
|
||||
(\chapter{}, \section{}, \subsection{}...). Idem pour MS Word avec son
|
||||
système de Titre 1, Titre 2, etc. En HTML, c'est aussi simple :
|
||||
<H1>, <H2>, <H3>... Ça va comme ça jusqu'à
|
||||
<H6>, ce qui vous laisse pas mal de marge pour structurer votre
|
||||
<p>Si vous avez fait du <a
|
||||
href="&url.tuteurs;logiciels/latex/">LaTeX</a>, vous connaissez ce
|
||||
genre de chose (<code>\chapter{}</code>, <code>\section{}</code>,
|
||||
<code>\subsection{}</code>...). Idem pour Word avec son système de
|
||||
Titre 1, Titre 2, etc. En HTML, c'est aussi simple : <H1>,
|
||||
<H2>, <H3>... Ça va comme ça jusqu'à <H6>, ce qui
|
||||
vous laisse pas mal de marge pour structurer votre
|
||||
document. Traditionnellement, <h1> est réservé au titre de la
|
||||
page (qui peut être, ou pas, le même que le <TITLE>, à vous de
|
||||
voir).
|
||||
|
|
@ -311,7 +348,7 @@ voir).
|
|||
<h2>Mettre en forme</h2>
|
||||
|
||||
<p>
|
||||
On en arrive au cœur du problème : mettre en forme le
|
||||
On en arrive au cœur du problème : mettre en forme le
|
||||
texte.
|
||||
</p>
|
||||
|
||||
|
|
@ -322,7 +359,7 @@ La plus grande partie d'un texte, habituellement, c'est... du
|
|||
texte. Des paragraphes de texte. En HTML, les paragraphes sont
|
||||
délimités par des <P> (et </P>, évidemment). Avec la
|
||||
plupart des navigateurs, les paragraphes sont rendus à la manière
|
||||
anglo-saxonne : alignement sur la gauche, pas d'alinéa. Il y a
|
||||
anglo-saxonne : alignement sur la gauche, pas d'alinéa. Il y a
|
||||
généralement un espace entre deux paragraphes.
|
||||
</p>
|
||||
|
||||
|
|
@ -334,9 +371,9 @@ des rares
|
|||
<h3><a name="quote">Citations</a></h3>
|
||||
|
||||
<p>
|
||||
Vous pouvez citer au niveau <em>inline</em>, soit en utilisant
|
||||
Vous pouvez citer au niveau <i lang="en">inline</i>, soit en utilisant
|
||||
directement des guillemets, soit en utilisant l'élément <Q>
|
||||
(pour <em>quote</em>) :
|
||||
(pour <i lang="en">quote</i>) :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
|
|
@ -350,13 +387,13 @@ les guillemets.
|
|||
</p>
|
||||
|
||||
<p>Au niveau bloc, c'est l'élément <BLOCKQUOTE> qu'il vous
|
||||
faut :
|
||||
faut :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<P>Charles-Marie de La Condamine est un savant et explorateur
|
||||
français, né à Paris en 1701. Il est admis à à l'Académie française en
|
||||
1760. Il écrit à ce sujet :</P>
|
||||
1760. Il écrit à ce sujet :</P>
|
||||
|
||||
<BLOCKQUOTE>
|
||||
<P>
|
||||
|
|
@ -370,7 +407,7 @@ Mais non muet, tant pis pour elle.<BR>
|
|||
|
||||
<p class="continue">
|
||||
<BLOCKQUOTE> est généralement rendu par un bloc indenté à droite
|
||||
et à gauche :
|
||||
et à gauche :
|
||||
</p>
|
||||
|
||||
<blockquote>
|
||||
|
|
@ -392,17 +429,38 @@ l'italique n'existent pas
|
|||
valeur du texte. <STRONG> est utilisé pour renforcer un membre
|
||||
de phrase, insister sur son importance. Il est donc souvent rendu par
|
||||
du <strong>gras</strong> par les navigateurs. <EM> (pour
|
||||
<em>emphasize</em>) sert également à mettre en relief un membre de
|
||||
<i lang="en">emphasize</i>) sert également à mettre en relief un membre de
|
||||
phrase. Il est plus faible que <STRONG>. Il est généralement
|
||||
rendu par de l'<em>italique</em>.</p>
|
||||
rendu par de l'<i lang="en">italique</i>.</p>
|
||||
|
||||
<h4>Autres styles</h4>
|
||||
<p>
|
||||
Selon les règles typographiques habituelles, un mot, une citation en
|
||||
langue étrangère non francisée doit être mis en italique. Il ne s'agit
|
||||
pas ici de mettre en valeur, mais d'une convention typographique. Dans
|
||||
ce cas, vous devez utiliser l'élément <I>. Vous pouvez indiquer
|
||||
de quelle langue il s'agit en utilisant l'attribut
|
||||
<code>lang</code>. Exemple :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
Selon le goût italien, les pâtes doivent être cuites <I lang="it">al dente</I>.
|
||||
</pre>
|
||||
|
||||
<p class="continue">
|
||||
Ce qui donne :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
Selon le goût italien, les pâtes doivent être cuites <i lang="it">al dente</i>.
|
||||
</pre>
|
||||
|
||||
<h4>Définitions</h4>
|
||||
|
||||
<p>
|
||||
Le HTML vous permet de structurer encore davantage vos documents,
|
||||
essentiellement les documents techniques. DFN (pour <i
|
||||
lang="en">define</i>) sert à indiquer un mot dont on va donner la
|
||||
définition, une fois pour le reste du document. Exemple :
|
||||
définition, une fois pour le reste du document. Exemple :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
|
|
@ -410,12 +468,64 @@ d
|
|||
lorsqu'il est à la fois lisse et non ramifié. En fait, il suffit pour cela
|
||||
qu'il soit à la fois <EM>plat</EM> et non ramifié.</p> </pre>
|
||||
|
||||
<h4>Titres (films, livres, etc.)</h4>
|
||||
|
||||
<p>
|
||||
C'est CITE qu'il faut utiliser pour les citations de titres de
|
||||
livres, de films, etc. CODE (que vous verrez dans la section du <a
|
||||
href="#pre">texte préformaté</a>) est également un style de texte.
|
||||
C'est CITE qu'il faut utiliser pour les citations de titres de livres,
|
||||
de films, etc. L'élément CITE est usuellement rendu par de
|
||||
l'italique. Exemple :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
Le film <I lang="it">Morte a Venezia</i> de Luchino Visconti est une
|
||||
adaptation de la nouvelle <I lang="de">Der Tod in Venedig</I> de
|
||||
Thomas Mann.
|
||||
</pre>
|
||||
|
||||
<h4>Code informatique</h4>
|
||||
|
||||
<p>
|
||||
CODE (que vous reverrez dans la section du <a href="#pre">texte
|
||||
préformaté</a>) est également un style de texte qui sert à démarquer
|
||||
un extrait de code informatique du texte normal. Exemple :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
La ligne <CODE>#include &lt;stdio.h&gt;</CODE> demande au compilateur
|
||||
d'inclure dans le programme certaines informations sur la bibliothèque standard
|
||||
d'entrées-sorties.
|
||||
</pre>
|
||||
|
||||
<h4>Sigles et acronymes</h4>
|
||||
|
||||
<p>
|
||||
Les sigles peuvent être indiqués par un élément ABBR, et les acronymes (sigles
|
||||
prononçables, comme ONU, OTAN, etc.) par l'élément... ACRONYM. Ces éléments sont
|
||||
intéressants surtout si on utilise leur attribut <code>title</code> : certains
|
||||
navigateurs peuvent alors afficher le contenu de <code>title</code> dans une bulle
|
||||
d'aide. Démonstration :
|
||||
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
L'<ACRONYM lang="en" title="United Nations Special
|
||||
Commission">UNSCOM</ACRONYM> a été créée pour assister l'<ABBR lang="en"
|
||||
title="International Atomic Energy Agency">IAEA</ABBR> en Iraq.
|
||||
</pre>
|
||||
|
||||
<p class="continue">
|
||||
Les bons navigateurs (<a href="http://www.mozilla.org/">Mozilla</a> ou <a
|
||||
href="http://www.mozilla.org/products/firefox/">FireFox</a> par exemple) affichent le
|
||||
contenu du <code>title</code> sous la forme d'une bulle d'aide (<i
|
||||
lang="en">tooltip</i> en anglais) quand vous laissez le curseur dessus. Faites le
|
||||
test :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
L'<acronym lang="en" title="United Nations Special Commission">UNSCOM</acronym> a été créée pour assister l'<abbr lang="en" title="International Atomic Energy Agency">IAEA</abbr> en Iraq.
|
||||
</pre>
|
||||
|
||||
|
||||
<h3>Listes</h3>
|
||||
|
||||
<p>
|
||||
|
|
@ -431,7 +541,7 @@ navigateurs affichent des puces devant chaque entr
|
|||
liste. <UL> et </UL> (pour <i lang="en">Unordered
|
||||
Lists</i>) marquent le début et la fin d'une liste, <LI> et
|
||||
</LI> le début et la fin d'une entrée de liste. Exemple,
|
||||
quelques armes de Goldorak </p>
|
||||
quelques armes de Goldorak </p>
|
||||
|
||||
<pre>
|
||||
<UL>
|
||||
|
|
@ -441,7 +551,7 @@ quelques armes de Goldorak </p>
|
|||
</UL>
|
||||
</pre>
|
||||
|
||||
<p class="continue">Ce qui donne :</p>
|
||||
<p class="continue">Ce qui donne :</p>
|
||||
|
||||
<ul>
|
||||
<li> mégavolts</li>
|
||||
|
|
@ -455,7 +565,7 @@ quelques armes de Goldorak </p>
|
|||
la place de <UL>. La numérotation se fera par défaut en chiffres
|
||||
arabes (1, 2, 3...). Vous pouvez changer le type de numérotation, en
|
||||
chiffres romains ou en caractères alphabétiques (a, b, c...) grâce à
|
||||
l'attribut TYPE :
|
||||
l'attribut TYPE :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
|
|
@ -466,7 +576,7 @@ l'attribut TYPE :
|
|||
</OL>
|
||||
</pre>
|
||||
|
||||
<p class="continue">Ce qui donne :</p>
|
||||
<p class="continue">Ce qui donne :</p>
|
||||
|
||||
<ol style="list-style-type: lower-roman;">
|
||||
<li> mégavolts</li>
|
||||
|
|
@ -474,7 +584,7 @@ l'attribut TYPE :
|
|||
<li> astéro-hache</li>
|
||||
</ol>
|
||||
|
||||
<p>Pour changer de numérotations, changez la valeur de TYPE : I
|
||||
<p>Pour changer de numérotations, changez la valeur de TYPE : I
|
||||
pour les chiffres romains majuscules, a pour les caractères
|
||||
alphabétiques minuscules, A pour les majuscules.</p>
|
||||
|
||||
|
|
@ -501,7 +611,7 @@ entr
|
|||
</DL>
|
||||
</pre>
|
||||
|
||||
<p class="continue">Ce qui donne :</p>
|
||||
<p class="continue">Ce qui donne :</p>
|
||||
|
||||
<dl>
|
||||
<dt>Amazon</dt>
|
||||
|
|
@ -515,48 +625,52 @@ l'Amazon.</dd>
|
|||
<h3><a name="pre">Texte préformaté</a></h3>
|
||||
|
||||
<p>On utilise l'élément <PRE> pour du texte préformaté au niveau
|
||||
bloc. Différences avec du texte normal : les navigateurs
|
||||
bloc. Différences avec du texte normal : les navigateurs
|
||||
respectent toutes les espaces que vous avez indiqués et ils utilisent
|
||||
généralement une fonte à espacement fixe. Le texte préformaté peut
|
||||
être utilisé pour mettre en page un poème, par exemple, ou plus
|
||||
prosaïquement, du code informatique. Attention toutefois, PRE n'est
|
||||
pas l'environnement <code>verbatim</code> de LaTeX : le code HTML
|
||||
pas l'environnement <code>verbatim</code> de LaTeX : le code HTML
|
||||
y est interprété. Dans cette documentation, par exemple, on a recours
|
||||
aux <a href="#entities">entités</a> pour représenter <, > et
|
||||
&.
|
||||
</p>
|
||||
|
||||
<p class="continue">Prenons un exemple bien connu de ceux qui
|
||||
connaissent (pour les littéraires, recopiez ça dans un fichier
|
||||
<p class="continue">Prenons un exemple, un programme très simple en
|
||||
langage C (pour les littéraires, recopiez ça dans un fichier
|
||||
<code>hello.c</code>, faites <code>gcc hello.c</code> puis
|
||||
<code>./a.out</code> et regardez) :</p>
|
||||
<code>./a.out</code> et regardez) :</p>
|
||||
|
||||
<pre>
|
||||
<PRE>
|
||||
#include &lt;stdio.h&gt;
|
||||
|
||||
main()
|
||||
{
|
||||
printf("Hello, world!\n");
|
||||
}
|
||||
{
|
||||
printf("Hello, world!\n");
|
||||
}
|
||||
</PRE>
|
||||
</pre>
|
||||
|
||||
<p class="continue">sera rendu par :</p>
|
||||
<p class="continue">sera rendu par :</p>
|
||||
|
||||
<pre>
|
||||
#include <stdio.h>
|
||||
|
||||
main()
|
||||
{
|
||||
printf("Hello, world!\n");
|
||||
}
|
||||
{
|
||||
printf("Hello, world!\n");
|
||||
}
|
||||
</pre>
|
||||
|
||||
<p>Pour citer du code en <em>inline</em>, utilisez la bien-nommée
|
||||
<p>Pour citer du code en <i lang="en">inline</i>, utilisez la bien-nommée
|
||||
balise <CODE>
|
||||
</p>
|
||||
|
||||
<h2>Images</h2>
|
||||
|
||||
<p>
|
||||
On se sert de l'élément <IMG> (pour <em>image</em>, bien sûr) et
|
||||
On se sert de l'élément <IMG> (pour <i lang="en">image</i>, bien sûr) et
|
||||
de ses attributs. Cet élément n'a pas besoin d'être
|
||||
refermé. L'attribut plus important est <code>src</code> : il permet de
|
||||
spécifier l'adresse où aller chercher l'image. Ainsi, quand on écrit
|
||||
|
|
@ -569,7 +683,7 @@ situ
|
|||
|
||||
<p class="continue">On peut aussi indiquer une adresse
|
||||
<em>absolue</em> quand l'image n'est pas sur votre compte, par
|
||||
exemple :</p>
|
||||
exemple :</p>
|
||||
|
||||
<pre>
|
||||
<IMG src="http://www.eleves.ens.fr/tuteurs/icones/note.png">
|
||||
|
|
@ -578,7 +692,7 @@ exemple :</p>
|
|||
<p>Il est obligatoire d'indiquer une description de votre image, en
|
||||
guise de texte alternatif pour les navigateurs texte, ou si pour une
|
||||
raison quelconque l'image ne peut pas être téléchargée. Ce texte doit
|
||||
être court et informatif. On l'indique avec l'attribut ALT :
|
||||
être court et informatif. On l'indique avec l'attribut ALT :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
|
|
@ -586,11 +700,11 @@ raison quelconque l'image ne peut pas
|
|||
</pre>
|
||||
|
||||
<p class="continue">Si l'image ne joue aucun rôle sémantique (elle est
|
||||
là uniquement pour décorer, on indique <code>alt=""</code>.</p>
|
||||
là uniquement pour décorer, on indique <code>alt=""</code>).</p>
|
||||
|
||||
<p>Les formats les plus couramment utilisés pour le Web sont le JPEG,
|
||||
en <code>.jpg</code> et le GIF, en <code>.gif</code>
|
||||
— utiliser de préférence le format PNG, GIF n'étant pas
|
||||
— utiliser de préférence le format PNG, GIF n'étant pas
|
||||
libre, et moins bon techniquement. JPEG est un format qui est plus
|
||||
adapté aux photos, GIF ou PNG sont plus adaptés aux logos et de
|
||||
manière générale aux images ayant peu de couleurs.
|
||||
|
|
@ -620,7 +734,7 @@ et <TD> les cellules. On d
|
|||
</TABLE>
|
||||
</pre>
|
||||
|
||||
<p class="continue">Ce qui donne :</p>
|
||||
<p class="continue">Ce qui donne :</p>
|
||||
|
||||
<table>
|
||||
<tr><td> Cellule 1 </td><td> Cellule 2 </td></tr>
|
||||
|
|
@ -665,7 +779,7 @@ pixels. G
|
|||
</TABLE>
|
||||
</pre>
|
||||
|
||||
<p class="continue">Donc :</p>
|
||||
<p class="continue">Donc :</p>
|
||||
|
||||
<table border="1px">
|
||||
<caption>Ceci est un tableau</caption>
|
||||
|
|
@ -678,15 +792,15 @@ pixels. G
|
|||
|
||||
<h2><a name="liens">Liens</a></h2>
|
||||
|
||||
<p>Le meilleur pour la fin, les liens ! Ce qui fait d'une page
|
||||
<p>Le meilleur pour la fin, les liens ! Ce qui fait d'une page
|
||||
Web une vraie page hypertexte (le H de HTML) et pas d'un bête
|
||||
document. Les liens se décrivent avec l'élément A (qui est, bien sûr,
|
||||
<em>inline</em>), suivi d'attributs.
|
||||
<i lang="en">inline</i>), suivi d'attributs.
|
||||
</p>
|
||||
|
||||
<h3>Lien simple</h3>
|
||||
|
||||
<p>Le lien de base utilise l'attribut href :</p>
|
||||
<p>Le lien de base utilise l'attribut href :</p>
|
||||
|
||||
<pre>
|
||||
Retourner au <A href="http://www.eleves.ens.fr/">serveur des élèves</A>.
|
||||
|
|
@ -722,7 +836,7 @@ encore pour faire des cross-r
|
|||
<p>
|
||||
On commence par définir les ancres, c'est-à-dire les endroits vers
|
||||
lesquels on veut pointer. On utilise l'attribut NAME de l'élément
|
||||
A :
|
||||
A :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
|
|
@ -737,15 +851,16 @@ caract
|
|||
la même ancre au sein du document.</p>
|
||||
|
||||
<p>Pour faire le lien vers cette ancre, on utilise toujours l'attribut
|
||||
HREF, mais en modifiant la syntaxe avec un <code>#</code> :</p>
|
||||
HREF, mais en modifiant la syntaxe avec un <code>#</code> :</p>
|
||||
|
||||
<pre>
|
||||
Esteban, Zia et Tao rencontrent alors les Olmèques, une peuplade
|
||||
extra-terrestre (voir ici la <A href="#olm">véritable histoire
|
||||
du peuple olmèque</A>. </pre>
|
||||
du peuple olmèque</A>.
|
||||
</pre>
|
||||
|
||||
<p class="continue">Vous pouvez positionner un lien vers cette ancre
|
||||
même depuis un autre fichier :</p>
|
||||
même depuis un autre fichier :</p>
|
||||
|
||||
<pre>
|
||||
Voir <A href="citesdor.html#olm">l'histoire des Olmèques</A>.
|
||||
|
|
@ -763,7 +878,7 @@ aussi utiliser le protocole mailto, qui est le protocole des courriers
|
|||
</p>
|
||||
|
||||
<pre>
|
||||
Écrivez-moi : <a href="mailto:mon.adresse@ens.fr">mon.adresse@ens.fr</a>
|
||||
Écrivez-moi : <a href="mailto:mon.adresse@ens.fr">mon.adresse@ens.fr</a>
|
||||
</pre>
|
||||
|
||||
<p class="continue">Quand un lecteur suivra ce lien, son navigateur
|
||||
|
|
@ -779,7 +894,7 @@ pion aux robots collecteurs d'adresses.
|
|||
Les <a href="#entities">entités</a> dont vous avez besoin en l'espèce
|
||||
sont <code>&#64;</code> pour une arobase (@) ou encore
|
||||
<code>&#46;</code> pour un point (.) et <code>&#45;</code>
|
||||
pour un tiret (-). Ce qui donne :
|
||||
pour un tiret (-). Ce qui donne :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
|
|
@ -788,7 +903,7 @@ Mon adresse
|
|||
|
||||
<p>Complètement illisible, on est bien d'accord ? C'est ce que verra
|
||||
le robot collecteur d'adresses. En revanche, un lecteur normal passant
|
||||
par un navigateur verra ceci :
|
||||
par un navigateur verra ceci :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
|
|
@ -796,7 +911,7 @@ Mon adresse
|
|||
</pre>
|
||||
|
||||
<p>Vous pouvez utiliser ce système avec d'autres protocoles, celui des
|
||||
news (<code>news</code>) pour que le navigateur affiche (s'il en est
|
||||
news (<code>news:</code>) pour que le navigateur affiche (s'il en est
|
||||
capable) le message dont vous avez donné le message-ID, ou le FTP...
|
||||
</p>
|
||||
|
||||
|
|
@ -804,11 +919,9 @@ capable) le message dont vous avez donn
|
|||
|
||||
<p>
|
||||
Vous avez fini de taper votre première page HTML. Vous vous êtes bien
|
||||
6~relus. Il vous reste une dernière étape : passer cette page au
|
||||
relu. Il vous reste une dernière étape : passer cette page au
|
||||
validateur HTML. Il vous permettra de voir si vous avez bien refermé
|
||||
toutes vos balises dans l'ordre qu'il faut, par exemple. Il vous
|
||||
donnera aussi une garantie sur le fait que votre HTML sera lisible par
|
||||
tous les navigateurs.
|
||||
toutes vos balises dans l'ordre qu'il faut, par exemple.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
|
@ -819,8 +932,15 @@ du fichier sur votre disque dur. Vous saurez tout de suite si votre
|
|||
code est bon ou s'il reste quelques corrections à faire...
|
||||
</p>
|
||||
|
||||
<div class="metainformation">Auteur : Marie-Lan Nguyen. Dernière
|
||||
modification : <date value="$Date: 2004-02-01 01:26:55 $" />.</div>
|
||||
<div class="attention">
|
||||
<strong>Attention</strong> : le validateur ne vérifie que la
|
||||
correction <em>formelle</em> de votre code. En clair, il peut vous
|
||||
dire que votre fichier est <em>syntaxiquement</em> correct, mais pas
|
||||
s'il est <em>sémantiquement</em> correct.
|
||||
</div>
|
||||
|
||||
<div class="metainformation">Auteur : Marie-Lan Nguyen. Dernière
|
||||
modification : <date value="$Date: 2004-02-20 13:26:19 $" />.</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -123,17 +123,18 @@ fait autorit
|
|||
</p>
|
||||
|
||||
<p>
|
||||
Les feuilles de style sont une manière simple de prendre en charge le
|
||||
côté esthétique d'une page Web. Tandis que le HTML ne s'occupe que de
|
||||
la structure syntaxique de la page, CSS ajoute à votre gré couleurs,
|
||||
fontes exotiques, effets de texte. Cette dissociation des rôles permet
|
||||
de ne pas pénaliser les vieux navigateurs, ou les navigateurs en mode
|
||||
texte (comme Lynx ou W3M), ou encore ceux qui utilisent des médias
|
||||
différents (assistant personnel, téléphone portable, ordinateur avec
|
||||
synthétiseur vocal). Elle vous permet aussi de changer radicalement
|
||||
l'esthétique de votre page en modifiant un seul fichier. Consultez par
|
||||
exemple le <a href="http://www.csszengarden.com/">CSS Zen Garden</a>
|
||||
pour voir ce qu'on peut faire.
|
||||
Les <dfn>feuilles de style</dfn> sont une manière simple de prendre en
|
||||
charge le côté esthétique d'une page Web. Tandis que le HTML ne
|
||||
s'occupe que de la structure syntaxique de la page, CSS ajoute à votre
|
||||
gré couleurs, fontes exotiques, effets de texte. Cette dissociation
|
||||
des rôles permet de ne pas pénaliser les vieux navigateurs, ou les
|
||||
navigateurs en mode texte (comme Lynx ou W3M), ou encore ceux qui
|
||||
utilisent des médias différents (assistant personnel, téléphone
|
||||
portable, ordinateur avec synthétiseur vocal). Elle vous permet aussi
|
||||
de changer radicalement l'esthétique de votre page en modifiant un
|
||||
seul fichier. Consultez par exemple le <a
|
||||
href="http://www.csszengarden.com/">CSS Zen Garden</a> pour voir ce
|
||||
qu'on peut faire.
|
||||
</p>
|
||||
|
||||
<h2>Comment apprendre ?</h2>
|
||||
|
|
@ -143,11 +144,15 @@ et vous pouvez les m
|
|||
conseillons de :</p>
|
||||
|
||||
<ul>
|
||||
<li> <strong>lire notre <a href="bases.html">tutoriel</a></strong>. Il
|
||||
vous permettra de faire des pages simples et sobres. Même si vous
|
||||
voulez vous lancer dans quelque chose de compliqué, ou si vous avez
|
||||
décidé d'utiliser un éditeur WYSIWYG, lisez-le. Mieux vaut savoir un
|
||||
minimum ce qu'on fait, non ?</li>
|
||||
<li> <strong>lire notre <a href="bases.html">tutoriel
|
||||
HTML</a></strong>. Il vous permettra de faire des pages simples et
|
||||
sobres. Même si vous voulez vous lancer dans quelque chose de
|
||||
compliqué, ou si vous avez décidé d'utiliser un éditeur WYSIWYG,
|
||||
lisez-le. Mieux vaut savoir un minimum ce qu'on fait, non ?</li>
|
||||
|
||||
<li> <strong>lire notre <a href="css.html">tutoriel
|
||||
CSS</a></strong>. Attention : il est encore en cours de
|
||||
rédaction.</li>
|
||||
|
||||
<li> <strong>regarder le code source d'autres pages</strong>, en
|
||||
commençant par des pages simples. Avec Mozilla, vous avez accès au
|
||||
|
|
@ -237,10 +242,20 @@ d'int
|
|||
href="http://www.upsdell.com/BrowserNews/res_fontsamp.htm">principales
|
||||
fontes disponibles</a> pour Windows, Mac OS et Unix/Linux.</li>
|
||||
|
||||
<li> <a href="http://www.pescadoo.net/html/">Pescadoo.Lab</a> :
|
||||
manipuler les couleurs pour le Web, choisir les bonnes couleurs et les
|
||||
bonnes palettes graphiques. Dans le même genre, il y a aussi <a
|
||||
href="http://www.smartpixel.net/chromoweb/fr/">ChromoWeb</a>.</li>
|
||||
|
||||
<li> enfin, ce n'est pas un site Web mais un groupe de <a
|
||||
href="&url.tuteurs;internet/usenet-fr.html">Usenet-fr</a> :
|
||||
<code>fr.comp.infosystemes.www.auteurs</code>, très utile notamment si
|
||||
vous pataugez un peu avec les feuilles de style.</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="metainformation">Auteur : Marie-Lan Nguyen.
|
||||
Dernière modification le <date value="$Date: 2004-02-19 20:07:06 $"/>
|
||||
Dernière modification le <date value="$Date: 2004-02-20 13:26:20 $"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue