Démarrez... avec style !

Accueil des débutants

Nous nous adressons ici aux débutants qui souhaitent écrire eux-mêmes le code de leurs pages Internet, et nous leur proposons d'apprendre d'emblée à le faire de la «bonne» manière, «bonne» au sens de cette année 2003.

Expliquons nous un peu...

Toutes les pages web sont écrites en HTML, mais il y a HTML et HTML. En gros, il y a d'abord eu une période de tâtonnements divers qui a culminé par la mise au point du HTML 3.2 (ou «classique»), jusque dans les années 96-97, et c'est ce formalisme classique qui sert encore de support à tous les ouvrages ou sites d'initiation que nous connaissons. En fait, si on laisse faire, on s'en sert toujours dans la prise en main des outils les plus récents de création de page web (Dreamweaver, par exemple) !

Mais à peine ce HTML classique entrait-il dans les mœurs qu'on mettait au point la génération suivante, le HTML 4 et les fameuses feuilles de style (CSS, cascading style sheets). Il y a eu une une phase transitoire pénible où les grands navigateurs à la mode interprétaient très mal ce nouveau langage, mais c'est maintenant sensiblement terminé. Il est donc maintenant grand temps que les débutants apprennent directement dans ce nouveau formalisme. Ce ne sera pas le dernier, mais c'est une autre histoire.

La difficulté pédagogique est que ces CSS s'appuient directement sur des structures héritées du HTML classique. La technique d'apprentissage généralement utilisée consiste donc à faire ses premières pages en HTML classique, à en constater les limitations puis à introduire les styles pour s'en affranchir, la rançon étant qu'il faut alors perdre certaines des habitudes qu'on vient juste d'acquérir. En fait, il n'y a aucune raison de procéder ainsi et les pages qui suivent en feront la démonstration.

Nous attendons donc que les débutants lisent les pages qui suivent et fassent chacun des exercices suggérés. A la fin, il devraient avoir une pratique de base du HTML et des styles leur permettant de démarrer des projets personnels. Evidemment, à ce stade, ils n'auront pas une vue complète de ce qu'il est possible de faire... et des pièges dans lesquels on peut tomber. Il leur faudra encore se perfectionner à de multiples sources, dont, bien sûr, notre tutorial proprement dit sur les styles.


(retour au menu)

Environnement pédagogique

Nous allons convier le lecteur à suivre nos explications en réalisant divers exercices. En gros, nous allons pas à pas construire une vraie page Internet à partir d'une nouvelle des Lettres de mon Moulin (mais rassurez-vous, vous n'aurez pas à resaisir le texte). Pour cela, il faut disposer de nos fichiers de travail, d'un navigateur et d'un éditeur de texte.

(1) Téléchargez le fichier exercice.zip contenant notre matière première, c.à.d. les fichiers de texte brut, d'image et de sons à partir desquels nous allons nous faire la main. Il s'agit d'un fichier d'archive que vous devez décomprimer au moyen d'un programme du genre Winzip (sous Windows) ou Stuffit Expander (sous MacOS). Après décompression, vous devriez vous retrouver avec les répertoires et fichiers suivants :
ExercicesWeb (répertoire)
        textesMac(répertoire) : 
              chevre.txt 
        textesWindows(répertoire) : 
              chevre.txt 
        pages(répertoire) : 
              cucugnan.html  -  mule.html 
        images(répertoire) :
               fond.gif - loup.jpg - moulin.jpg
               paysage.jpg - puce.gif - puce2.gif
        musiques(répertoire) :
               natacha.mid
Placez le répertoire global ExercicesWeb où vous voudrez dans votre disque dur. Vous pouvez aussi le renommer à votre gré, mais nous continuerons à le désigner sous ce nom. Ce sera notre répertoire de travail, celui où nous mettrons tous les fichiers que nous allons créer.

(2) Il faudra ensuite avoir sous la main un navigateur suffisamment moderne, comme Explorer 5.5 ou 6 sous Windows ou Explorer 5 sous MacOS. Mozilla ou Netscape 6 ou 7 (sur toute plateforme) sera encore mieux ; Opera 6 ou 7 devraient aussi faire l'affaire. Par contre, évitez absolument Netscape 4.

(3) Il faudra enfin un éditeur de textes pour écrire le code. Ne confondez pas éditeur de texte et traitement de texte : le premier n'enregistre que le texte brut alors que le second permet d'ajouter divers enrichissements (choix de la police, italiques, gras, etc...) qui vont être autant de parasites dans la page HTML. Sous Windows, l'utilitaire Notepad fera parfaitement l'affaire. Wordpad sera encore plus agréable à utiliser (notamment à cause de sa fonction chercher/remplacer), mais il s'agit en fait d'un petit traitement de texte et il faudra alors prendre garde à toujours enregistrer au format «texte pur». Sous MacOS, SimpleText conviendra également, bien qu'il ait également des capacités de traitement de texte.

Nous invitons cependant vivement le lecteur à se munir d'un vrai éditeur de texte HTML, c.à.d. un éditeur spécialement conçu pour faire des pages web. Ce genre d'éditeur simplifie considérablement le codage. Il permet d'aller beaucoup plus vite, d'éviter de nombreuses erreurs (pas toutes, hélas), et on y trouve aussi de l'information de référence sur le HTML, avec, souvent, divers compléments pour agrémenter les pages.

Le choix sous MacOS est assez restreint : PageSpinner ou Alpha, deux sharewares à 30$, malheureusement tous deux en anglais. Le premier paraîtra sans doute plus accueillant au débutant.
On propose parfois BBedit, mais seule la version complète (180$) offre de réelles capacités d'éditeur HTML, alors que la version gratuite (BBeditLite) ne sera guère plus intéressante que SimpleText pour un débutant, mis à part qu'elle permettra de manipuler des fichiers au delà de la barre des 32 ko.
Le choix sous Windows est plus étendu ; nous avons testé 5 d'entre eux (Web Expert, UltraEdit, CODExpert HTML, First Page 2000, HTML Kit) dans le Coin, les trois premiers étant en français.

(retour au menu)

Premiers essais

Revenez à votre navigateur et ouvrez une nouvelle fenêtre. C'est là que nous contrôlerons l'avancement de nos essais en HTML. Pour le moment, allez au menu Fichiers>Ouvrir, puis :
— ouvrez un des fichiers d'images dans ExercicesWeb/Images/ : l'image correspondante devrait se visualiser dans votre navigateur.
— essayez un des fichiers midi ou wav dans le répertoire Musiques. Si vous avez de la chance, vous devriez voir une petite console de lecture qui vous invitera à lancer cette musique. Sinon... nous en reparlerons.
— enfin, ouvrez l'un des fichiers de textes, dans le répertoire TextesMac ou TextesWindows selon que vous êtes sur MacOS ou sur Windows, et ouvrez le fichier chevre.txt. Vous voyez bien du texte, mais les paragraphes risquent fort d'être sur une seule ligne (ça dépend du navigateur) et, sur MacOS, toutes les lettres accentuées sont remplacées par des signes incompréhensibles. Nous allons commencer par remettre ces textes en forme dans notre première leçon. Pour le moment, retenez qu'un navigateur Internet est susceptible d'afficher plusieurs types de fichiers, et, s'il ne sait pas comment faire, il propose de recopier le fichier sur votre disque dur.


Retour en haut
Accueil des réponses
Page suivante :
premières balises