189 lines
6.9 KiB
Text
189 lines
6.9 KiB
Text
|
<?xml version="1.0" encoding="ISO-8859-1"?>
|
|||
|
|
<!DOCTYPE html
|
|||
|
|
PUBLIC "-//ENS/Tuteurs//DTD TML 1//EN"
|
|||
|
|
"tuteurs://DTD/tml.dtd">
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>HTML</title>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<h1>Apprendre le HTML</h1>
|
|||
|
|
|
|||
|
|
<p>Si vous <20>tes press<73>, vous pouvez aller directement lire notre <a
|
|||
|
|
href="bases.html">Tutorial HTML</a>. Pour des questions plus avanc<6E>es,
|
|||
|
|
vous pouvez poser vos questions sur forum, dans le groupe
|
|||
|
|
<code>informatique.html</code>. Pour savoir comment lire forum,
|
|||
|
|
cf. nos pages <a href="&url.tuteurs;internet/forum/">Forum</a>.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<h2>Qu'est-ce ?</h2>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
Le HTML (<em>HyperText Mark-up Language</em>) est le langage des pages
|
|||
|
|
Web. Il a <20>t<EFBFBD> cr<63><72> en 1992, et son d<>veloppement a <20>t<EFBFBD> pris en charge
|
|||
|
|
par le <a href="http://www.w3.org">W3C</a> (World Wide Web
|
|||
|
|
Consortium). <20> l'heure actuelle, nous en sommes <20> <a
|
|||
|
|
href="http://www.w3.org/TR/REC-html40/">HTML 4.01</a> qui remonte <20>
|
|||
|
|
fin 1999.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
La structure de base du HTML, ce sont les balises (<em
|
|||
|
|
lang="en">tags</em>) en anglais) qui d<>finissent les <20>l<EFBFBD>ments de la
|
|||
|
|
page Web qu'ils entourent. Voici un exemple de balise :
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<pre><title>Les chevaliers-paysans du lac de Paladru</title></pre>
|
|||
|
|
|
|||
|
|
<p class="continue">
|
|||
|
|
qui d<>finit le titre d'une la page Web. Notez que les balises vont par
|
|||
|
|
paire, avec une ouvrante (<title>) et une fermante, diff<66>renci<63>e
|
|||
|
|
par un / (</title>). Autre exemple :</p>
|
|||
|
|
|
|||
|
|
<pre><strong>Important</strong> : votre tiers provisionnel est d<> pour le <dm>15 mai</em>.</pre>
|
|||
|
|
|
|||
|
|
<p class="continue">
|
|||
|
|
La balise <strong> indique que l'<27>l<EFBFBD>ment qu'elle renferme doit
|
|||
|
|
<EFBFBD>tre renforc<72>. La plupart des navigateurs rendent ceci en mettant
|
|||
|
|
le(s) mot(s) en gras. La balise <em> (pour <em
|
|||
|
|
lang="en">emphasize</em>) indique que l'<27>l<EFBFBD>ment doit <20>tre mis en
|
|||
|
|
valeur, ce qui est g<>n<EFBFBD>ralement traduit par des italiques.</p>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
Le HTML peut <20>tre directement <20>crit avec un simple <20>diteur de texte
|
|||
|
|
(solution de loin pr<70>f<EFBFBD>rable) ou avec des <20>diteurs compliqu<71>s WYSIWYG
|
|||
|
|
(<em lang="en">What You See Is What You Get</em>). C'est un langage
|
|||
|
|
facile <20> apprendre, <20> la port<72>e du premier venu. <20>videmment, plus vous
|
|||
|
|
voulez faire des choses tape-<2D>-l'œil, plus c'est compliqu<71>.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<h2>Fond vs. forme</h2>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
Le principe de base du HTML est qu'il se pr<70>occupe davantage du
|
|||
|
|
<em>contenu</em> que du <em>rendu visuel</em>. Si vous avez fait un
|
|||
|
|
peu de LaTeX, cette mani<6E>re de travailler devrait vous <20>tre
|
|||
|
|
famili<EFBFBD>re. Les <20><>styles<65><73> de MS Word s'en approchent <20>galement. Vous
|
|||
|
|
d<EFBFBD>finissez des titres, des <20>l<EFBFBD>ments importants, des citations, des
|
|||
|
|
liens. Tout le c<>t<EFBFBD> d<>coratif (savoir si la police de caract<63>res fera
|
|||
|
|
telle ou telle taille, si votre texte sera en rouge ou bleu, etc.) est
|
|||
|
|
normalement d<>volu aux <a href="http://www.w3.org/Style/CSS/">feuilles
|
|||
|
|
de style</a>.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
Rappelez-vous bien que, de toute fa<66>on, les diff<66>rents navigateurs (MS
|
|||
|
|
Internet Explorer, Netscape, Mozilla, Opera, lynx...) affichent de
|
|||
|
|
mani<EFBFBD>re <em>diff<66>rente</em> une m<>me page : chacun a sa propre
|
|||
|
|
interpr<EFBFBD>tation des normes, et ce qui marche chez l'un peut ne pas
|
|||
|
|
marcher chez l'autre. V<>rifiez donc que votre site marche bien avec
|
|||
|
|
plusieurs navigateurs. Rappelez-vous aussi que beaucoup de gens
|
|||
|
|
naviguent encore sur le Web avec des machines plus tr<74>s jeunes et des
|
|||
|
|
connexions modem 56k (au bureau, par exemple). Si vous mettez des
|
|||
|
|
choses sur le Web, c'est pour <20>tre lu, alors pensez <20> vos lecteurs qui
|
|||
|
|
ne veulent pas se taper trois plombes d'intro Flash ou trois tonnes
|
|||
|
|
d'applets Java.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
Enfin, selon l'art. 2-3 de la charte d'utilisation des moyens
|
|||
|
|
informatiques de l'ENS (que vous avez sign<67>e en obtenant votre compte
|
|||
|
|
sur clipper)<29>:
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<blockquote>
|
|||
|
|
<p>
|
|||
|
|
L'utilisation des moyens informatiques est limit<69>e <20> des activit<69>s de
|
|||
|
|
recherche et d'enseignement, de d<>veloppements techniques, de
|
|||
|
|
transferts de technologies, de diffusion d'informations scientifiques,
|
|||
|
|
techniques et culturelles, d'exp<78>rimentation de nouveaux services
|
|||
|
|
pr<EFBFBD>sentant un caract<63>re d'innovation technique, mais <20>galement toute
|
|||
|
|
activit<EFBFBD> administrative ou de gestion d<>coulant ou accompagnant ces
|
|||
|
|
activit<EFBFBD>s.
|
|||
|
|
</p>
|
|||
|
|
</blockquote>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
En th<74>orie, votre page Web doit contenir votre m<>moire de ma<6D>trise,
|
|||
|
|
votre rapport de stage long, ce genre de choses. C'est seulement par
|
|||
|
|
tol<EFBFBD>rance que vous pouvez aussi y mettre vos photos de vacances. Vous
|
|||
|
|
n'<27>tes pas cens<6E>s mettre des animations JavaScript, du Flash et des
|
|||
|
|
mp3 en boucle partout<75>!
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<h2>Comment apprendre ?</h2>
|
|||
|
|
|
|||
|
|
<p>Plusieurs solutions existent, et vous pouvez les m<>langer. Dans
|
|||
|
|
l'ordre d'apprentissage, nous vous conseillons de<64>:</p>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li> <strong>lire le <a href="bases.html">tutorial</a> des
|
|||
|
|
tuteurs</strong>. Il vous permettra de faire des pages simples et
|
|||
|
|
sobres. M<>me si vous voulez vous lancer dans quelque chose de
|
|||
|
|
compliqu<EFBFBD>, ou si vous avez d<>cid<69> d'utiliser un <20>diteur WYSIWYG,
|
|||
|
|
lisez-le. Mieux vaut savoir un minimum ce qu'on fait, non<6F>?</li>
|
|||
|
|
|
|||
|
|
<li> <strong>regarder le code source d'autres pages</strong>, en
|
|||
|
|
commen<EFBFBD>ant par des pages simples. Avec Mozilla, vous avez acc<63>s au
|
|||
|
|
code source en tapant <code>Ctrl-U</code>. C'est le plus souvent par
|
|||
|
|
l'imitation d'autres pages qu'on apprend.</li>
|
|||
|
|
|
|||
|
|
<li> <strong>lire les sp<73>cifications du W3C</strong>. <20> lire, celle du
|
|||
|
|
<a href="http://www.w3.org/TR/html4/">HTML 4.01</a>, puis celle de <a
|
|||
|
|
href="http://www.w3.org/TR/REC-CSS2/">CSS2</a>. Elles sont bien plus
|
|||
|
|
lisibles qu'il n'y para<72>t, mais c'est vrai que ce n'est pas le
|
|||
|
|
meilleurs moyen pour d<>buter.</li>
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h2>Liens</h2>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
|
|||
|
|
<li> le <a href="http://www.w3.org/">site Web du W3C</a> sur lequel
|
|||
|
|
plus pr<70>cis<69>ment vous trouverez<65>:
|
|||
|
|
<ul>
|
|||
|
|
|
|||
|
|
<li> la sp<73>cification de HTML 4.01, la version actuelle du HTML
|
|||
|
|
: en <a href="http://www.w3.org/TR/html4/">anglais</a> (seule
|
|||
|
|
version normative), ou la <a
|
|||
|
|
href="http://www.la-grange.net/w3c/html4.01/cover.html">traduction
|
|||
|
|
fran<EFBFBD>aise</a></li>
|
|||
|
|
|
|||
|
|
<li> un <a href="http://validator.w3.org/">validateur HTML</a>,
|
|||
|
|
<strong>indispensable</strong> pour v<>rifier la correction de votre
|
|||
|
|
code</li>
|
|||
|
|
|
|||
|
|
<li> la sp<73>cification de CSS2, le langage des feuilles de style :
|
|||
|
|
en <a href="http://www.w3.org/TR/REC-CSS2/">anglais</a> (seule version
|
|||
|
|
normative) ou <a
|
|||
|
|
href="http://www.yoyodesign.org/doc/w3c/css2/cover.html">traduction
|
|||
|
|
fran<EFBFBD>aise</a>.</li>
|
|||
|
|
|
|||
|
|
<li> un <a
|
|||
|
|
href="http://jigsaw.w3.org/css-validator/validator-uri.html">validateur
|
|||
|
|
CSS</a></li>
|
|||
|
|
<li> un <a href="http://validator.w3.org/checklink">v<>rificateur de liens</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li> la <a
|
|||
|
|
href="http://www.eleves.ens.fr:8080/home/madore/computers/unicode/htmlent.html">liste
|
|||
|
|
des entit<69>s HTML</a> chez David Madore, les entit<69>s sont des
|
|||
|
|
caract<EFBFBD>res sp<73>ciaux pr<70>d<EFBFBD>finis (pour taper le symbole € par
|
|||
|
|
exemple)</li>
|
|||
|
|
<li> la <a href="http://www.unicode.org/">page Web du Standard
|
|||
|
|
Unicode</a>, dont le but est de repr<70>senter tous les langages de la
|
|||
|
|
Terre, de l'anglais au japonais en passant par les hi<68>roglyphes</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<div class="metainformation">Auteur : Marie-Lan Nguyen. Derni<6E>re
|
|||
|
|
modification : 2003-05-14</div>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|
|||
|
|
<!-- LocalWords: title strong em emphasize
|
|||
|
|
-->
|