Produire du code HTML

3
Produire du
code HTML
Même si l’on ne sait pas encore écrire du code HTML, il est important de savoir
comment on pourra produire celui-ci. Nous allons voir trois méthodes pour taper du
code HTML.
Avec un simple éditeur de texte
La façon la plus simple, c’est d’utiliser le Bloc-notes aussi appelé Notepad (sous
Windows), ou un éditeur de texte le plus simple possible sous un autre système.
Par exemple sous Windows, ouvrons le Bloc-notes (menu Démarrer / Programmes /
Accessoires / Bloc-notes). On est alors prêt à taper du code HTML. Pour l’instant, on tape
juste Bonjour !. Même si pour vous ceci n’est pas du HTML, cela sera interprété par le
navigateur comme du texte à afficher à l’écran.
Sauvegardez le fichier sur votre disque dur (menu Fichier / Enregistrer sous) en choisissant un répertoire et un nom de fichier pour cette première page HTML. Le fichier doit
avoir comme extension .htm ou .html, sinon il ne sera pas interprété comme étant du
HTML. Ceci est très important.
Supposons qu’on ait sauvegardé ce fichier sous le nom test1.html dans le répertoire
D:\Mes Documents\Exemples\HTML, un double clic sur le nom du fichier dans l’explorateur Windows provoque l’ouverture du navigateur Internet et l’affichage de la page
HTML dans celui-ci :
Figure 3.1. Affichage de Bonjour ! dans un navigateur
10
Chapitre 3 — Produire du code HTML
Avec un éditeur de texte spécialisé
On peut se demander l’utilité d’un éditeur de texte spécialisé, alors que le simple
éditeur Bloc-notes utilisé précédemment faisait l’affaire.
Pour en comprendre l’utilité, il faut se reporter à la section précédente (Aperçu rapide
du langage HTML, page 3). Dans cette section, nous avons montré l’affichage de la page
HTML correspondant au site www.yahoo.fr, dans IE et dans Firefox.
Sous Firefox, on voit que celui-ci a mis des couleurs pour montrer les mots-clés du
langage HTML, alors que IE utilise le Bloc-notes et affiche tout de façon uniforme.
Un éditeur de texte spécialisé permet de taper le texte, mais les mots-clés seront
reconnus par celui-ci, ce qui vous permettra de voir où vous avez commis des erreurs de
syntaxe. C’est un peu comme dans un traitement de texte (Word par exemple) où les
fautes d’orthographe sont soulignées, ce qui aide à la création de votre page.
Beaucoup d’éditeurs spécialisés en HTML existent sur le marché (gratuits ou non). Nous
avons choisi comme exemple celui appelé RapidCSS, qui permet d’éditer du HTML, des
feuilles de styles CSS (que l’on verra dans la prochaine partie), ainsi que du code JavaScript (que l’on verra aussi dans une autre partie). On peut le télécharger gratuitement
pour 50 utilisations, ensuite il coûte moins de 20 dollars (http://www.blumentals.net/rapidcss).
L’utilisation d’un tel logiciel est identique à celle vue précédemment avec le Bloc-notes.
On tape le texte dans l’éditeur, puis on sauvegarde le fichier sur le disque dur et ensuite
on visualise le résultat dans un navigateur. Toutefois RapidCSS permet en plus de
pouvoir visualiser le résultat directement dans le logiciel, dans un onglet Preview
(Aperçu), ce qui procure un gain de temps appréciable.
Avec un éditeur HTML professionnel
C’est le niveau au-dessus par rapport au précédent éditeur. Parmi eux citons par
exemple Frontpage et DreamWeaver.
Ces éditeurs contiennent beaucoup de fonctionnalités qui permettent de « faire du
HTML sans le savoir ». On entend par là que ces logiciels sont si sophistiqués qu’ils
peuvent produire beaucoup de code HTML sans que nous ayons écrit la moindre ligne
HTML !
Prenons par exemple DreamWeaver (http://www.macromedia.com/fr/downloads). Tapons
dans celui-ci Bonjour ! et sauvegardons le texte au format HTML (par exemple sous le
fichier D:\Mes Documents\Exemples\HTML\test2.html).
La visualisation du fichier dans un navigateur produit l’affichage attendu, tel qu’illustré
à la figure 3.2.
Avec un éditeur HTML professionnel
11
Figure 3.2. Affichage de Bonjour ! dans un navigateur,
avec du texte tapé dans Dreamweaver.
Il est très intéressant de visualiser le code HTML réellement utilisé pour afficher cette
page. Pour cela, on procède comme on l’a vu à la section Aperçu rapide du langage HTML,
page 3. Par exemple, sous IE, on affiche le code source de la page en cliquant sur le
menu Affichage / Source.
Le code source s’affiche alors dans une nouvelle fenêtre :
Figure 3.3. Code HTML utilisé par DreamWeaver pour écrire Bonjour !
On constate que la simple écriture de Bonjour ! dans un tel logiciel engendre la création
de beaucoup de lignes de code HTML !, parmi lesquelles figure notre Bonjour !. Alors
que la même écriture dans le Bloc-notes ne produit aucun code HTML en plus.
Est-ce qu’utiliser un tel logiciel présente un avantage ? Oui si l’on considère qu’il écrit
du code à notre place, non si l’on considère qu’il est préférable de l’écrire nous-même !
En effet, le code écrit par le logiciel n’est pas toujours très simple à comprendre et la
maintenance d’un tel code peut s’avérer ardue, surtout pour des débutants en HTML.
Aussi on proscrira, au moins au début, l’utilisation de tels logiciels, de façon à ce que
nous maîtrisions complètement le code HTML que l’on désire produire.
Dans la suite de notre ouvrage, nous utiliserons l’outil intermédiaire RapidCSS évoqué
dans la section précédente, de façon que les mots-clés du langage HTML soient mis en
évidence. Mais le Bloc-notes fait aussi parfaitement l’affaire.
12
Chapitre 3 — Produire du code HTML
Publier son site web
Une fois que l’on a vu comment créer ses pages HTML (voir pages 27 et suivantes), il
reste à publier notre site sur Internet.
Publier notre site sur Internet signifie mettre toutes les pages HTML et leur contenu
(images entre autres) sur un serveur accessible par Internet, donc accessible par le protocole http.
Deux solutions s’offrent à nous :
Utiliser son propre ordinateur comme serveur (ou un autre ordinateur dédié à cette tâche).
À partir du moment où cet ordinateur accède à Internet, il peut tout à fait être
accessible lui aussi depuis d’autres ordinateurs dans le monde ! Bien sûr, il faut
installer quelques logiciels (gratuits) qui permettront de le configurer comme un
serveur web (par exemple le logiciel Apache, voir http://httpd.apache.org/).
Utiliser les services d’un hébergeur de pages.
Il en existe des centaines de par le monde (dont beaucoup en France). Certains font
payer le service, d’autres sont gratuits (par exemple free, voila…). L’avantage d’un
hébergeur est qu’il garantit que votre site sera accessible 24h/24, ce qui n’est pas
forcément le cas si on utilise son propre PC ! (il peut arriver qu’on l’éteigne ou
qu’on réinstalle le système d’exploitation…).
L’utilisation des services d’un hébergeur de pages est en général décrite sur le site de
l’hébergeur. Il faudra presque toujours utiliser un petit logiciel permettant de transférer les fichiers composant votre site, de votre propre ordinateur vers le site
d’hébergement. Ce genre de logiciels s’appelle un logiciel de transfert de fichiers, qui
utilise le protocole de transfert ftp (File Transfert Protocol). Un logiciel de ce type très
connu est CuteFtp (http://www.cuteftp.com/cuteftp), mais il en existe de nombreux
autres comme FileZilla par exemple (http://sourceforge.net/projects/filezilla).
Pour utiliser ces logiciels de transfert de fichiers, il faut que vous connaissiez l’adresse ftp
du site sur lequel vous transférez vos fichiers et que vous ayez un nom d’utilisateur ainsi
qu’un mot de passe pour y accéder. Ces renseignements sont obtenus sur le site de
l’hébergeur de pages lorsque vous créez votre compte utilisateur.
Une fois que vous avez renseigné ces éléments dans le logiciel de transfert de fichiers et
que vous avez établi la connexion avec le serveur ftp, le transfert de fichiers se fait par de
simples glisser / déposer entre votre ordinateur et le serveur distant, comme si vous étiez
sur votre propre ordinateur.
Nous vous montrons à la figure 3.4 la fenêtre du logiciel FileZilla, qui affiche les deux
fenêtres correspondant au site local (votre ordinateur) et au site distant (l’ordinateur de
l’hébergeur de pages), ainsi que les champs de saisie de l’adresse ftp du site distant
(champ Adresse), de votre nom d’utilisateur (champ Utilisateur) et du mot de passe
(champ Mot de passe) :
Publier son site web
Figure 3.4. Fenêtre du logiciel FileZilla permettant
de copier les fichiers sur le site distant.
13