Vous trouverez ici une introduction aux différents langages servant à écrire une page Web : le HTML, bien sûr, mais aussi les CSS (feuilles de style).
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.
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 <em>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é.
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 !
CSS (Cascading Style Sheets) est le langage des feuilles de style. Ciel, un autre langage à apprendre ! Rassurez-vous, CSS est complémentaire du HTML. CSS1 est apparu en 1996. CSS2, qui prend le relais, est lui apparu en 1998. À l'heure actuelle, c'est CSS2.1 (septembre 2003) qui fait autorité.
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). Elle vous permet aussi de changer l'esthétique de votre page sans modifier toute la page Web.
Plusieurs solutions existent pour apprendre à écrire une page Web, et vous pouvez les mélanger. Dans l'ordre d'apprentissage, nous vous conseillons de :
Ctrl-U. C'est le plus souvent par
l'imitation d'autres pages qu'on apprend.