From c8c63c8368bd45a33752689bc8b89be3abfa673c Mon Sep 17 00:00:00 2001 From: mlnguyen Date: Thu, 15 May 2003 10:41:40 +0000 Subject: [PATCH] =?UTF-8?q?Ajout=20du=20tutorial=20HTML=20et=20un=20index?= =?UTF-8?q?=20g=C3=A9n=C3=A9ral.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- internet/web/html/bases.tml | 817 ++++++++++++++++++++++++++++++++++++ internet/web/html/index.tml | 188 +++++++++ 2 files changed, 1005 insertions(+) create mode 100644 internet/web/html/bases.tml create mode 100644 internet/web/html/index.tml diff --git a/internet/web/html/bases.tml b/internet/web/html/bases.tml new file mode 100644 index 0000000..ec383be --- /dev/null +++ b/internet/web/html/bases.tml @@ -0,0 +1,817 @@ + + + + + Bases + + + +

Tutorial HTML : les bases

+ + +

Principes généraux

+ +

+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 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 à HTML 4. +

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

L'élément de base d'un site est la page. C'est un fichier dont +l'extension est normalement .html (ou .htm +si votre système d'exploitation vous impose cette limitation) et qui +contient du code HTML. +

+ +

Vocabulaire : éléments, attributs

+ +

+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, TYPE l'attribut, et +« plouf » la valeur de l'attribut. +

+ +

Casse

+ +

+Les balises HTML peuvent s'écrire aussi bien en majuscules qu'en +minuscules. Pour des raisons de lisibilité, certains préfèrent les +majuscules. C'est ce que nous utiliserons 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. +

+ +

Commentaires

+ +

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

+ +

Syntaxe générale

+ +
Sauf rares exceptions, toute balise ouverte +doit être refermée. Toute partie de la page doit être contenue dans +une balise.
+ +

Les balises doivent être ouvertes et refermées dans l'ordre. Faites +spécialement attention dans le cadre de balises imbriquées. Ainsi, +

+ +
+<p>Je vous préviens tout de suite, c'est <em>non.</p></em>
+
+ +

n'est pas syntaxiquement correct. Il faut refermer +<em> avant <p>.

+ + +

Entités HTML et Unicode

+ +

+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 entités, 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 +liste +chez David Madore), vous disposez des entités Unicode. Unicode est une convention dont le +but est de représenter tous les langages du monde. Ainsi, vous écrirez +correctement le nom du compositeur Antonín Dvořák en utilisant +l'entité Unicode du r caron, à savoir &#345; (ř). +

+ +

Le squelette d'une page

+ +

Toute page HTML est contenue entre deux balises <HTML>.

+ +

Le DTD

+ +

+Toute page HTML doit commencer par la déclaration du DTD (Document Type Definition), qui précise au navigateur +quelle version de HTML vous utilisez. +

+ +

+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) : +

+ +
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+            "http://www.w3.org/TR/html4/loose.dtd">
+
+ +

Il existe d'autres DTD, tel que celui pour les +pages utilisant des frames (alias « cadres ») :

+ +
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
+            "http://www.w3.org/TR/html4/frameset.dtd">
+
+ +

+Pour l'instant, notre page-squelette ressemble donc à ceci : +

+ +
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+            "http://www.w3.org/TR/html4/loose.dtd">
+
+<HTML>
+
+<!-- Ce sont des commentaires. Ils sont complètement ignorés par
+<!-- les navigateurs. Sinon, ici se trouve normalement le corps de 
+<!-- votre page. -->
+
+</HTML>
+
+ + +

Les en-têtes

+ +

Le rôle des en-têtes dans une page HTML (comme dans un courrier +électronique) est de donner des méta-informations plus ou moins +importantes. Par exemple, l'identité de l'auteur, le titre de la page, +l'encodage, la langue utilisée, etc. Les en-têtes sont déclarées à +l'intérieur de l'élément <HEAD> (logique, non  ?). +

+ +

Le titre

+ +

La plus importante des en-têtes est... le titre de la page. Dans un +navigateur graphique (Internet Explorer, Mozilla, etc.) il est affiché +dans la barre de titre. Il est également utilisé par les moteurs de +recherche. Un bon titre est informatif (évitez les jeux de mots nazes) +tout en restant relativement court. Il se déclare dans l'élément +<TITLE> qui est obligatoire. Ainsi, Jean-Paul Sartre +pourra utiliser comme titre de sa page d'accueil : +

+ +
+<TITLE>Page Web de Jean-Paul Sartre</TITLE>
+
+ +

Les balises META

+ +

+Elles sont facultatives, mais importantes à la fois pour le navigateur +qui a des renseignements sur la manière dont afficher la page, et pour +les moteurs de recherche, qui s'en servent pour indexer vos +pages. Nous vous en présentons quelques-unes. +

+ +
Les balises META sont parmi les +rares balises qui peuvent ne pas être refermées.
+ +
Auteur de la page
+ +
+<META NAME="author" CONTENT="Jean-Paul Sartre">
+
+ +

Vous pouvez déclarer plusieurs auteurs en séparant +les noms par des virgules.

+ +
Encodage de la page
+ +
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
+ +

Ceci déclare que votre page est du HTML et que +l'encodage est l'iso-8859-1 (alias iso-latin-1), l'encodage standard +pour l'Europe occidentale. La déclaration de l'encodage est importante +pour le navigateur.

+ +
Langue de la page
+ +
<META HTTP-EQUIV="Content-Language" CONTENT="fr">
+ +

Quelques codes utiles : fr pour +le français, en pour l'anglais, de pour +l'allemand, es pour l'espagnol, it pour +l'italien, ru pour le russe. Déclarer la langue utilisée +est utile pour les synthétiseurs vocaux des navigateurs pour aveugles +(qui en déduisent comment prononcer) comme pour les navigateurs +standards qui peuvent en déduire, par exemple, s'il faut utiliser des +guillemets anglo-saxons ("") ou français (« »).

+ +
Mots clefs
+ +
+<META NAME="keywords" LANG="fr" CONTENT="Philosophie, existentialisme, 
+littérature engagée">
+
+ +

Cette balise META est utilisée par certains moteurs de +recherche pour indexer les pages. Ne mettez que les mots-clefs les +plus significatifs, les moteurs n'aiment pas les listes trop +longues. Notez au passage que vous pouvez tout à fait passer à la +ligne.

+ +

Le corps de la page

+ +

+Voilà, on en a fini avec les en-têtes (on n'oublie pas le +</HEAD> à la fin). On passe au cœur de votre page : ce que +le lecteur va voir via son navigateur. +

+ +

Le corps de la page est contenu entre balises <BODY>. Comment +le remplir ? Vous le verrez dans les lignes suivantes.

+ +
Pour tous les éléments de <BODY> il y a une +distinction importante entre les balises dites « block +level » et les balises « inline level ». Les block +level sont par exemple des paragraphes, des titres, etc. Ils +forment des blocs, quoi. Les éléments inline 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 citation inline et bloc. +
+ +

Squelette entier

+ +

+Vous pouvez le copier-coller pour servir de modèle à vos pages Web.

+ +
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+            "http://www.w3.org/TR/html4/loose.dtd">
+
+<HTML>
+<HEAD>
+<TITLE><!-- insérer le titre --></TITLE>
+<META NAME="author" CONTENT="<!-- Insérer votre nom -->">
+<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
+<META HTTP-EQUIV="Content-Language" CONTENT="fr">
+<META NAME="keywords" LANG="fr" CONTENT="<!-- Insérer les mots-clefs de votre page-->">
+</HEAD> 
+
+<BODY>
+
+<!-- Ici c'est le corps de la page -->
+
+</BODY>
+</HTML>
+
+ +

Hiérarchiser

+ +

Maintenant, il s'agit de remplir un peu votre page. Pour cela, il +faut réfléchir un peu avant et la structurer au moyen de titres +hiérarchisés. En effet, dès que la page dépasse les « vous êtes bien +sur la page de Toto », les informations ont besoin d'être +hiérarchisées pour être lisibles. Imaginez cette page sans le moindre +titre ! +

+ +

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 +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). +

+ +

Mettre en forme

+ +

+On en arrive au cœur du problème : mettre en forme le +texte. +

+ +

Paragraphes et sauts de ligne

+ +

+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 +généralement un espace entre deux paragraphes. +

+ +

+Pour simplement aller à la ligne, utilisez l'élément <BR>, l'un +des rares à ne pas devoir être refermé. +

+ +

Citations

+ +

+Vous pouvez citer au niveau inline, soit en utilisant +directement des guillemets, soit en utilisant l'élément <Q> +(pour quote) : +

+ +
+<Q>Delenda Carthago</Q>, comme disait le grand Caton...
+
+ + +

Au passage, Internet Explorer ignore purement et +simplement l'élément <Q>, donc mieux vaut utiliser directement +les guillemets. +

+ +

Au niveau bloc, c'est l'élément <BLOCKQUOTE> qu'il vous +faut : +

+ +
+<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>
+
+<BLOCKQUOTE>
+<P>
+La Condamine est aujourd'hui<BR>
+Reçu dans la troupe immortelle<BR>
+Il est bien sourd, tant mieux pour lui,<BR>
+Mais non muet, tant pis pour elle.<BR>
+</P>
+</BLOCKQUOTE>
+
+ +

+<BLOCKQUOTE> est généralement rendu par un bloc indenté à droite +et à gauche : +

+ +
+

+La Condamine est aujourd'hui
+Reçu dans la troupe immortelle
+Il est bien sourd, tant mieux pour lui,
+Mais non muet, tant pis pour elle. +

+
+ +

Styles de texte

+ +

Gras et italique

+ +

+Le HTML ne se soucie pas du rendu visuel. Pour lui, le gras et +l'italique n'existent pas à proprement parler. Mais il sait mettre en +valeur du texte. <STRONG> est utilisé pour renforcer un membre +de phrase, insister sur son importance. Il est donc souvent rendu par +du gras par les navigateurs. <EM> (pour +emphasize) sert également à mettre en relief un membre de +phrase. Il est plus faible que <STRONG>. Il est généralement +rendu par de l'italique.

+ +

Autres styles

+ +

+Le HTML vous permet de structurer encore davantage vos documents, +essentiellement les documents techniques. Il existe par exemple les +éléments DFN (pour define) pour les définitions, CITE +pour les citations de titres de livres, de films, etc. CODE (que vous +verrez dans la section du texte préformaté est +également un style de texte. +

+ +

Listes

+ +

+Il y a 3 sortes de listes possibles en HTML. Les listes numérotées, +les listes non numérotées et les listes de définitions +(lexiques). Toutes les listes sont des éléments blocs. +

+ +

Listes non numérotées

+ +

Elles sont aussi dites « listes à puces » car souvent les +navigateurs affichent des puces devant chaque entrée de +liste. <UL> et </UL> (pour Unordered +Lists) 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  

+ +
+<UL> 
+<LI> mégavolts</LI>
+<LI> cornofulgure</LI>
+<LI> astéro-hache</LI>
+</UL>
+
+ +

Ce qui donne :

+ + + +

Listes numérotées

+ +

Même principe, avec <OL> (Ordered Lists) à +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 : +

+ +
+<OL TYPE="i">
+<LI> mégavolts</LI>
+<LI> cornofulgure</LI>
+<LI> astéro-hache</LI>
+</OL>
+
+ +

Ce qui donne :

+ +
    +
  1. mégavolts
    2. +
  2. cornofulgure
    3. +
  3. astéro-hache
    4. +
+ +

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.

+ +

Lexiques

+ +

+On utilise l'élément DL (Definition list). À +l'intérieur de l'élément DL, DT (pour definition +term) est une entrée du lexique, et DD (pour definition definition...) la définition associée à cette +entrée. Admettons que vous fassiez un lexique du folklore normalien. +

+ +
+<DL>
+
+     <DT>Amazon</DT>
+          <DD>Flipper mythique de la K-fêt, arrivé à l'École en 1990.</DD>
+
+     <DT>Fun machine</DT>
+          <DD>L'autre flipper, qui ne sert comme son nom l'indique qu'à se dérouiller les 
+	  doigts ou à tuer le temps en attendant de jouer à l'Amazon.</DD>
+
+</DL>
+
+ +

Ce qui donne :

+ +
+
Amazon
+
Flipper mythique de la K-fêt, arrivé à l'École en 1990.
+
Fun machine
+
L'autre flipper, qui ne sert comme son nom l'indique qu'à se +dérouiller les doigts ou à tuer le temps en attendant de jouer à +l'Amazon.
+
+ +

Texte préformaté

+ +

On utilise l'élément <PRE> pour du texte préformaté au niveau +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 verbatim de LaTeX : le code HTML +y est interprété. Dans cette documentation, par exemple, on a recours +aux entités pour représenter <, > et +&. +

+ +

Prenons un exemple bien connu de ceux qui +connaissent (pour les littéraires, recopiez ça dans un fichier +hello.c, faites gcc hello.c puis +./a.out et regardez) :

+ +
+<PRE>
+main()
+    {
+      printf("Hello, world!\n");
+    }
+</PRE>
+
+ +

sera rendu par :

+ +
+main()
+    {
+      printf("Hello, world!\n");
+    }
+
+ +

Pour citer du code en inline, utilisez la bien-nommée +balise <CODE> +

+ +

Images

+ +

+On se sert de l'élément <IMG> (pour image, bien sûr) et +de ses attributs. Cet élément n'a pas besoin d'être refermé. Le plus +important est SRC : il permet de spécifier l'adresse où aller chercher +l'image. Ainsi, quand on écrit son fichier +~/www/index.html pour inclure une image située dans son +répertoire ~/www/images/, on écrira :

+ +
+<IMG SRC="images/monimage.jpg">
+
+ +

On peut aussi indiquer une adresse +absolue quand l'image n'est pas sur votre compte, par +exemple :

+ +
+<IMG SRC="http://www.eleves.ens.fr/tuteurs/icones/note.png">
+
+ +

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

+ +
+<IMG SRC="images/pouf.jpg" ALT="Photo de moi et mon chien Pouf en vacances">
+
+ +

Si l'image ne joue aucun rôle sémantique (elle est +là uniquement pour décorer, on indique ALT="".

+ +

Les formats les plus couramment utilisés pour le Web sont le JPEG, +en .jpg et le GIF, en .gif +— 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. +

+ + +

Tableaux

+ +

+Les tableaux sont décrits par l'élément <TABLE>. C'est l'un des chapitres +les plus complexes du HTML : les possibilités sont très nombreuses. +

+ +

Un tableau simple

+ +

<TABLE> définit l'ensemble du tableau. À l'intérieur, il faut décrire +les lignes du tableau et ses cellules. L'élément <TH> décrit les lignes, +et <TD> les cellules. On déclare dans l'ordre <TABLE>, puis +<TH> et enfin <TD>. +

+ +
+<TABLE>
+<TR><TD> Cellule 1 </TD><TD> Cellule 2 </TD></TR>
+<TR><TD> Cellule 3 </TD><TD> Cellule 4 </TD></TR>
+<TR><TD> Cellule 5 </TD><TD> Cellule 6 </TD></TR>
+</TABLE>
+
+ +

Ce qui donne :

+ + + + + +
Cellule 1 Cellule 2
Cellule 3 Cellule 4
Cellule 5 Cellule 6
+ +

Pas très croquignolet, hein ?

+ +

Un tableau plus évolué

+ +

+On peut déjà commencer par donner un titre à ce tableau, grâce à l'élément +CAPTION. Le titre du tableau se place soit au début du tableau, avant la +première ligne (avant le premier <TR>) mais dans le tableau tout de même +(donc après la déclaration de <TABLE>). +

+ +

+On veut également différencier des méta-cellules, qui donnent des +informations sur le contenu des cellules de données, des cellules de +données à proprement parler. Les cellules de données, c'est bien sûr +<TD>, et les méta-cellules, c'est l'élément <TH> (le H +étant pour header, en-tête) qui s'en charge. +

+ +

+On peut aussi, pour rendre le tableau un peu plus esthétique, et plus lisible (6 +cellules ça va, mais quand vous en aurez 42...), lui donner une bordure. On +utilise pour cela l'attribut BORDER à qui on spécifie une épaisseur en nombre de +pixels. Généralement, BORDER=1 suffit amplement à ce que vous voulez faire +(délimiter mieux les cellules). +

+ +
+<TABLE BORDER=1>
+<CAPTION>Ceci est un tableau</CAPTION>
+<TR><TD> Colonne 1 </TD><TD> Colonne 2</TD></TR>
+<TR><TD> Cellule 1 </TD><TD> Cellule 2</TD></TR>
+<TR><TD> Cellule 3 </TD><TD> Cellule 4</TD></TR>
+<TR><TD> Cellule 5 </TD><TD> Cellule 6</TD></TR>
+</TABLE>
+
+ +

Donc :

+ + + + + + + +
Ceci est un tableau
Colonne gauche Colonne droite
Cellule 1 Cellule 2
Cellule 3 Cellule 4
Cellule 5 Cellule 6
+ + +

Liens

+ +

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, +inline), suivi d'attributs. +

+ +

Lien simple

+ +

Le lien de base utilise l'attribut HREF :

+ +
+Retourner au <A HREF="http://www.eleves.ens.fr/">serveur des élèves</A>.
+
+ +

donne ainsi :

+ +
+Retourner au serveur des élèves.
+
+ +

On peut utiliser des liens absolus, comme celui ci-dessus, qui +donne l'ensemble de l'URL, mais aussi des liens relatifs, qui sont +relatifs à l'arborescence de votre site. Admettons que vous ayez dans +voter répertoire ~/www/ un répertoire stage +qui contient, entre autres, le fichier rapport.html. Pour +faire un lien dessus, depuis la page d'accueil, ça donnera : +

+ +
+Mon <A HREF="stage/rapport.html">rapport de stage</A> parle du lien 
+entre les nombres p-adiques et les phases de la lune.
+
+ +

Ancres

+ +

Une ancre sert à faire un lien local, c'est-à-dire vers un +endroit précis du document. C'est particulièrement utile pour faire +une table des matières avec des liens qui pointent vers les titres, ou +encore pour faire des cross-références dans un document. +

+ +

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

+ +
+Les <A NAME="olm">Olmèques</A> ont véritablement existé. C'est la première 
+des grandes civilisations précolombiennes...
+
+ +

Quand vous lisez le document avec un navigateur, +l'ancre est invisible. Pour choisir le nom de l'ancre, vous avez à +votre disposition tous les caractères alphanumériques, et mêmes les +caractères accentués. Veuillez seulement à ne pas utiliser deux fois +la même ancre au sein du document.

+ +

Pour faire le lien vers cette ancre, on utilise toujours l'attribut +HREF, mais en modifiant la syntaxe avec un # :

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

Vous pouvez positionner un lien vers cette ancre +même depuis un autre fichier :

+ +
+Voir <A HREF="citesdor.html#olm">l'histoire des Olmèques</A>.
+
+ +

Liens spéciaux

+ +

+Vous pouvez créer un lien de telle sorte que, lorsqu'on suit ce lien, +on vous envoie un courrier électronique. On utilise toujours l'élément +A et son attribut HREF. Seulement, le protocole du lien +change. Auparavant c'étaient des liens HTTP (Web). Mais vous pouvez +aussi utiliser le protocole mailto, qui est le protocole des courriers +électroniques. +

+ +
+Écrivez-moi : <A HREF="mailto:mon.adresse@ens.fr">mon.adresse@ens.fr</A>
+
+ +

Quand un lecteur suivra ce lien, son navigateur +lui proposera de vous envoyer un mail.

+ +
Donner une adresse « en clair » sur son site +est une excellente manière de recevoir du spam. Mieux vaut utiliser un +encodage très simple, à base d'entités, qui vous permettra de damer le +pion aux robots collecteurs d'adresses. +
+ +

+Les entités dont vous avez besoin en l'espèce +sont &#64; pour une arobase (@) ou encore +&#46; pour un point (.) et &#45; +pour un tiret (-). Ce qui donne : +

+ +
+Mon adresse : <a href="mailto:jean&#45;paul&#46;sartre@ens.fr">jean&#45;paul&#46;sartre&#64;ens&#46;fr</a>
+
+ +

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

+ +
+Mon adresse :  <a href="mailto:jean-paul.sartre@ens.fr">jean-paul.sartre@ens.fr</a>
+
+ +

Vous pouvez utiliser ce système avec d'autres protocoles, celui des +news (news) pour que le navigateur affiche (s'il en est +capable) le message dont vous avez donné le message-ID, ou le FTP... +

+ +

Et pour la fin

+ +

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

+ +

+Il vous suffit d'aller dire coucou au validateur du W3C et de lui +indiquer l'URL de votre page HTML, ou encore de lui indiquer le chemin +du fichier sur votre disque dur. Vous saurez tout de suite si votre +code est bon ou s'il reste quelques corrections à faire... +

+ +
Auteur : Marie-Lan Nguyen. Dernière +modification : 2003-05-15.
+ + + \ No newline at end of file diff --git a/internet/web/html/index.tml b/internet/web/html/index.tml new file mode 100644 index 0000000..8039420 --- /dev/null +++ b/internet/web/html/index.tml @@ -0,0 +1,188 @@ + + + + + HTML + + + + +

Apprendre le HTML

+ +

Si vous êtes pressé, vous pouvez aller directement lire notre Tutorial HTML. Pour des questions plus avancées, +vous pouvez poser vos questions sur forum, dans le groupe +informatique.html. Pour savoir comment lire forum, +cf. nos pages Forum. +

+ +

Qu'est-ce ?

+ +

+Le HTML (HyperText Mark-up Language) est le langage des pages +Web. Il a été créé en 1992, et son développement a été pris en charge +par le W3C (World Wide Web +Consortium). À l'heure actuelle, nous en sommes à HTML 4.01 qui remonte à +fin 1999. +

+ +

+La structure de base du HTML, ce sont les balises (tags) en anglais) qui définissent les éléments de la +page Web qu'ils entourent. Voici un exemple de balise : +

+ +
<title>Les chevaliers-paysans du lac de Paladru</title>
+ +

+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érenciée +par un / (</title>). Autre exemple :

+ +
<strong>Important</strong> : votre tiers provisionnel est dû pour le <dm>15 mai</em>.
+ +

+La balise <strong> indique que l'élément qu'elle renferme doit +être renforcé. La plupart des navigateurs rendent ceci en mettant +le(s) mot(s) en gras. La balise <em> (pour emphasize) indique que l'élément doit être mis en +valeur, ce qui est généralement traduit par des italiques.

+ +

+Le HTML peut être directement écrit avec un simple éditeur de texte +(solution de loin préférable) ou avec des éditeurs compliqués WYSIWYG +(What You See Is What You Get). C'est un langage +facile à apprendre, à la portée du premier venu. Évidemment, plus vous +voulez faire des choses tape-à-l'œil, plus c'est compliqué. +

+ +

Fond vs. forme

+ +

+Le principe de base du HTML est qu'il se préoccupe davantage du +contenu que du rendu visuel. Si vous avez fait un +peu de LaTeX, cette manière de travailler devrait vous être +familière. Les « styles » de MS Word s'en approchent également. Vous +définissez des titres, des éléments importants, des citations, des +liens. Tout le côté décoratif (savoir si la police de caractères fera +telle ou telle taille, si votre texte sera en rouge ou bleu, etc.) est +normalement dévolu aux feuilles +de style. +

+ +

+Rappelez-vous bien que, de toute façon, les différents navigateurs (MS +Internet Explorer, Netscape, Mozilla, Opera, lynx...) affichent de +manière différente une même page : chacun a sa propre +interpré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ès jeunes et des +connexions modem 56k (au bureau, par exemple). Si vous mettez des +choses sur le Web, c'est pour être lu, alors pensez à vos lecteurs qui +ne veulent pas se taper trois plombes d'intro Flash ou trois tonnes +d'applets Java. +

+ +

+Enfin, selon l'art. 2-3 de la charte d'utilisation des moyens +informatiques de l'ENS (que vous avez signée en obtenant votre compte +sur clipper) : +

+ +
+

+L'utilisation des moyens informatiques est limitée à des activités de +recherche et d'enseignement, de développements techniques, de +transferts de technologies, de diffusion d'informations scientifiques, +techniques et culturelles, d'expérimentation de nouveaux services +présentant un caractère d'innovation technique, mais également toute +activité administrative ou de gestion découlant ou accompagnant ces +activités. +

+
+ +

+En théorie, votre page Web doit contenir votre mémoire de maîtrise, +votre rapport de stage long, ce genre de choses. C'est seulement par +tolérance que vous pouvez aussi y mettre vos photos de vacances. Vous +n'êtes pas censés mettre des animations JavaScript, du Flash et des +mp3 en boucle partout ! +

+ +

Comment apprendre ?

+ +

Plusieurs solutions existent, et vous pouvez les mélanger. Dans +l'ordre d'apprentissage, nous vous conseillons de :

+ + + +

Liens

+ + + +
Auteur : Marie-Lan Nguyen. Dernière +modification : 2003-05-14
+ + + + +