Création de pages Web de base

Cette page est destinée à instruire le débutant complet en HTML sur ces sujets :

Qu'est-ce qu'une page Web ?
Comment fonctionne une page Web ?
Comment créer une page Web simple ?
Comment transférer ma page de mon ordinateur vers Internet ?

Au cours de mes nombreuses années d’expérience dans l’enseignement de la conception de pages Web aux débutants, j’ai réalisé que ce sont là les principaux problèmes. Je promets de rendre cela aussi simple et indolore que possible.

? Qu'est-ce qu'une page Web ?

! Une page Web est un fichier informatique en texte brut, lisible par l'homme, qui contient des mots et des instructions spéciales sur la façon dont les mots doivent apparaître. Ces instructions sont appelées « balises ». Une page Web peut également contenir des références à d'autres pages Web, des images graphiques, des sons, etc. Ces références sont appelées « liens ».

? Comment fonctionne une page Web ?

!
Une page Web contient des informations de formatage de texte et d'autres informations dans ses balises. Le texte et les balises de la page Web sont interprétés par un programme appelé « navigateur Web ».
Voici à quoi ressemble une page Web dans un éditeur Web comme Arachnophilia sous forme de texte brut et telle qu'elle apparaît sur un navigateur :
Éditeur Web (texte brut)
<html>
 <head>
 <title>
 Ceci est ma page !
</title>
 </head>
 <body>
 <h2>
 Bienvenue sur ma page Web !
</h2>
 En utilisant des balises HTML, je peux rendre mon texte
<i>
 italique,
</i>
 ou
<b>
 gras,
</b>
 ou
<u>
 souligné.
</u>
 </body>
</html>
Navigateur : Ceci est ma page !

Bienvenue sur ma page Web!
En utilisant des balises HTML, je peux créer mon texte italique, ou audacieux, ou souligné.
Notez les <tags> ci-dessus :

La balise "<b>" signifie "Démarrer l'impression du texte en gras."

La balise "</b>" signifie "D'accord, vous pouvez arrêter de faire ce truc audacieux que j'ai dit auparavant."

Un <tag> de début et un </tag> de fin contrôlent ce qu'il y a entre eux. Comme dans cet exemple, presque toutes les balises sont présentées par paires (mais malheureusement pas toutes).
Un type de balise très important est appelé « lien ». Les liens expliquent pourquoi les pages HTML ne sont pas simplement un autre type de document de traitement de texte, avec du texte stylisé. Entre autres choses, les liens permettent au spectateur de la page de se déplacer :

Vers une autre partie de la page actuelle (comme le font les liens en haut de cette page)

Vers une autre page de votre site

Vers un autre emplacement sur Internet.

Voici à quoi ressemble un lien en texte brut et lorsqu'il est affiché dans un navigateur :
Éditeur Web (texte brut)
<a href="http://www.arachnoid.com/arachnophilia">
Accédez à la page d'accueil de Arachnophilia
</a>
Navigateur

Accéder à la page d'accueil d'Arachnophilia
L'affichage du navigateur à droite contient la version affichée du lien, et si vous cliquez dessus (et si vous êtes connecté à Internet), vous accéderez à la page d'accueil d'Arachnophilia.
Notez qu'un lien comporte deux parties :

L'adresse Internet réelle : "http://www.arachnoid.com/arachnophilia".

Une étiquette lisible par l'homme représentant l'adresse : "Accédez à la page d'accueil d'Arachnophilia".

Pour fonctionner comme prévu et répondre aux attentes des gens, vos liens doivent toujours comporter les deux parties.

? Comment puis-je créer une page Web simple ?

!
C'est vraiment facile, vraiment ! Voici les étapes :

Créer un nouveau document HTML

Tapez du texte dans la page

Enregistrez votre nouvelle page

Prévisualisez la page.

* Tout d'abord, créez un nouveau document HTML. Exécutez Arachnophilia et choisissez Fichier... Nouveau... Fichier HTML. Comme ça:

Il vous sera demandé de fournir un titre pour votre page. Le titre est très important : il apparaît sur la barre de titre du navigateur et est plutôt visible pour vos visiteurs. Vous pourrez toujours modifier le titre ultérieurement.
Maintenant, vous verrez quelque chose comme ceci :
Éditeur Web
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 
  3 
  4 
  5 <html>
  6  <head>
  7  <title>
  8  Ma page !
  9  </title>
 10  <meta name="GÉNÉRATEUR" content="Arachnophilia 5.0"/>
 11  <meta name="FORMATTER" content="Arachnophilia 5.0"/>
 12  </head>
 13 
 14  <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
 15 
 16  |
 17 
 18  </body>
 19 </html>
 20 
La ligne verticale rouge (" | ") est appelé "curseur" ou "caret". Les deux termes sont utilisés de manière interchangeable. Si vous avez déjà appris à utiliser un traitement de texte, vous saurez ce que ce terme signifie. Mais si ce n'est pas le cas, le curseur est le point d'action dans un programme de traitement de texte - c'est là que les choses se produisent. Lorsque vous souhaitez placer des mots à un endroit particulier, vous placez d'abord le curseur à cet endroit, puis vous tapez.
* Maintenant, tapez quelque chose :
Éditeur Web
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 
  3 
  4 
  5 <html>
  6  <head>
  7  <title>
  8  Ma page !
  9  </title>
 10  <meta name="GÉNÉRATEUR" content="Arachnophilia 5.0"/>
 11  <meta name="FORMATTER" content="Arachnophilia 5.0"/>
 12  </head>
 13 
 14  <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
 15 
 16  Ceci est ma page Web personnelle !|
 17 
 18  </body>
 19 </html>
 20 
D'accord, ce n'est pas Shakespeare, mais c'est juste une répétition de la réalité, pas de la réalité elle-même. :)
* Étape suivante : enregistrez votre page.

Une parenthèse : Rien de plus frustrant que de perdre des documents informatiques sur lesquels on a pu passer des heures. Enregistrez toujours vos documents et sachez toujours où vos documents ont été enregistrés. N'appuyez pas simplement sur "Enregistrer" de temps en temps sans penser à l'endroit où le document est stocké. Soyez proactif : choisissez (créez) un répertoire pour votre site Web et placez-y tous les composants.
J'insiste sur ce point parce que j'ai reçu un certain nombre d'e-mails au fil des années de personnes par ailleurs intelligentes qui quittent la pièce, caressent le chat, reviennent, et n'arrivent tout simplement pas à comprendre ce qui est arrivé à leur magnum opus.
Choisissez Fichier... Enregistrer sous. Une boîte de dialogue de l'explorateur de fichiers apparaîtra. Choisissez un répertoire et un nom de fichier appropriés.
* Regardons maintenant votre page sur un navigateur Web.
La plupart des ordinateurs personnels récents sont équipés d'au moins un navigateur. Dans cette étape (et en supposant que vous ne l'ayez pas déjà fait), vous aiderez Arachnophilia à trouver un navigateur.
Pour démarrer le processus, appuyez soit sur ce bouton de la barre d'outils : ou appuyez sur Ctrl-P. Après un message explicatif, vous verrez cette boîte de dialogue :

Tout d'abord, si le chemin de recherche par défaut ne convient pas à votre système, choisissez-en un approprié, soit en le saisissant, soit en utilisant le bouton « Parcourir ». Sur les systèmes Windows, la plupart des navigateurs se trouvent dans un répertoire nommé « /Program Files ». Sur les systèmes Linux récents, ce sera "/usr/bin". Les utilisateurs Macintosh verront probablement "/Applications" par défaut. L'une de ces alternatives apparaîtra très probablement automatiquement en fonction de votre système d'exploitation. Après avoir choisi un chemin de recherche approprié, appuyez sur "Rechercher". Le moteur de recherche du navigateur recherchera l'un des noms de navigateur répertoriés à gauche (et vous pourrez l'ajouter à la liste).
Avec un peu de chance, un ou plusieurs chemins de navigateur apparaîtront dans la liste de droite. Pour transférer les résultats vers la liste de votre navigateur personnel, appuyez sur « Transférer », puis sur « OK ». Ensuite, pour visualiser votre page, appuyez sur le bouton Aperçu ( ) ou Ctrl-P à nouveau.

Si toutes ces fonctionnalités ne parviennent pas à localiser votre navigateur, vous pouvez simplement saisir le nom du navigateur et le chemin d'accès à son exécutable dans la partie inférieure de la boîte de dialogue du navigateur, puis appuyer sur "OK".

? Comment puis-je transférer ma page de mon ordinateur vers Internet ?

! Malheureusement pour les créateurs de pages Web débutants, il s'agit de la partie la plus complexe du démarrage.
Si vous avez un ami avec plus d'expérience sur le Web, vous souhaiterez peut-être demander de l'aide à ce stade.
La manière normale de transférer votre page de votre ordinateur vers Internet consiste à utiliser un protocole de transfert de fichiers nommé (surprise !) File Transfer Protocol (FTP). Arachnophilia dispose d'un service FTP intégré pour vous aider à le faire.
Avant d'utiliser le service FTP, vous devez disposer de certaines informations, informations que votre fournisseur d'accès Internet aurait dû vous fournir :

Le nom du serveur FTP.

Votre nom d'utilisateur de connexion.

Votre mot de passe de connexion.

Chemin de votre répertoire.

Dans un premier temps, localisez ces informations et ayez-les à disposition.
Ensuite, assurez-vous que votre nouvelle page est toujours affichée dans la fenêtre de l'éditeur Web d'Arachnophilia. Choisissez ensuite l'élément de menu HTML ... Exécuter le service FTP ou appuyez sur Alt-F. Vous verrez quelque chose comme ceci :

Voici les étapes à suivre :

Pour "Nom du site", saisissez quelque chose dont vous vous souviendrez facilement. Ce n'est pas un nom spécial, c'est juste une étiquette pratique.

Pour "Nom du serveur", saisissez le nom du serveur FTP fourni par votre service Internet.

Pour "Nom d'utilisateur", saisissez le nom de connexion fourni par votre service.

Pour « Mot de passe », saisissez le mot de passe qui vous a été fourni. Vous avez la possibilité d'enregistrer le mot de passe afin de ne pas avoir à le saisir à chaque fois que vous utilisez le service FTP. Mais cela comporte un petit risque : un informaticien expérimenté, un pirate informatique, pourrait, en principe, acquérir et déchiffrer votre mot de passe s'il accédait à votre ordinateur. C'est vous qui décidez.

Pour "Répertoire distant", saisissez ces informations si elles ont été fournies par votre service.

REMARQUE : La plupart des chemins de répertoire FTP distants doivent commencer par un préfixe, comme "/" ou "~/". Si vous omettez ce préfixe, la transaction FTP risque de ne pas fonctionner comme prévu. Si vous n'êtes pas sûr de ce problème, assurez-vous d'inclure un préfixe, comme celui-ci : "/myPages". Certains services nécessitent "~/", un exemple serait "~/html". Si vous ne savez pas lequel utiliser ou si vous ne savez pas quel chemin de répertoire saisir, veuillez demander à votre FAI.

Pour "Répertoire local", et si votre page Web est toujours chargée dans Arachnophilia, appuyez simplement sur le bouton à droite : "Utiliser l'actuel". C'est un moyen simple d'indiquer au service FTP où se trouve votre page sur l'ordinateur local.

Après avoir renseigné ces informations, vous pouvez tester la connexion :

Assurez-vous que vous êtes connecté à Internet.

Appuyez sur le bouton "Répéter".

Le service FTP contactera votre service Internet, analysera le répertoire local fourni et vous signalera ce qu'il téléchargerait si vous aviez appuyé sur "Exécuter".

Avec un peu de chance, la répétition se déroulera sans encombre. Si des problèmes surviennent, déplacez simplement le curseur « Niveau » vers la droite (pour afficher plus d'informations) et appuyez à nouveau sur « Répéter » pour voir quel est le problème. Vous avez peut-être mal saisi le nom du site, le nom d'utilisateur ou le mot de passe. N'oubliez pas que la casse de ces entrées est importante.
Une fois la répétition réussie, appuyez sur « Exécuter ». Dans la plupart des cas, « Exécuter » téléchargera votre page Web. Utilisez la procédure de dépannage décrite ci-dessus si des problèmes surviennent.
Vous pouvez maintenant utiliser votre navigateur pour afficher la version en ligne de votre page.
Quelques détails supplémentaires sur le service FTP :

Le service FTP utilise un fichier journal local pour suivre les fichiers qui ont été téléchargés.

Lorsque vous modifiez une page et que vous l'enregistrez, sa date de modification change. Si vous exécutez un téléchargement FTP, le programme comparera la date du fichier avec son entrée dans le fichier journal. Si la date d'un fichier est plus récente que son entrée de journal, il sera téléchargé et son entrée de fichier journal sera modifiée.

Pour éviter que tous vos fichiers ne soient à nouveau importés, appuyez simplement sur « SyncLog ». Cela synchronise le fichier journal local avec les dates réelles de modification du fichier, mais sans rien télécharger.

À l'inverse, pour importer tous les fichiers, quelle que soit leur date, choisissez « Télécharger tout », puis « Exécuter ». Cela force un téléchargement complet.

Si vous savez que vous souhaitez importer seulement quelques fichiers ou un seul, mais que vous n'êtes pas sûr de l'état du fichier journal, utilisez cette procédure :

Appuyez sur « SyncLog ». Cela met à jour le fichier journal sans rien télécharger.

Chargez, modifiez et enregistrez uniquement les fichiers que vous souhaitez modifier (cela modifie leurs dates de modification).

Appuyez sur « Exécuter ». Seuls les fichiers modifiés seront téléchargés.

Pour des instructions FTP plus avancées, cliquez ici.

Suggestions générales de sites Web :

À propos de votre page :

Conservez toujours une copie locale de votre page. Ne présumez jamais que, parce qu'il y a une copie sur l'ordinateur de votre fournisseur, vous pouvez supprimer votre copie locale. Les fournisseurs d'accès Internet perdent régulièrement des machines et des données utilisateur.

Si vous rencontrez des problèmes pour télécharger votre page, suivez simplement à nouveau les étapes.

Avez-vous saisi toutes les informations exactement telles qu'elles apparaissent telles que fournies par votre service ?

Étiez-vous connecté à Internet ?

Votre page a-t-elle été chargée dans Arachnophilia pour permettre au bouton « Utiliser le contenu actuel » du service FTP de la localiser ?

Si vous ne parvenez toujours pas à télécharger votre page, demandez de l'aide à un ami ou contactez votre fournisseur de services.

À propos de la conception générale des pages Web :

De nombreux magazines et livres traitent de ce sujet : rendez-vous dans une librairie ou une bibliothèque.

Il existe des ressources en ligne de toutes sortes pour vous aider à apprendre à rédiger des pages Web.

Si vous voyez une page qui fait quelque chose que vous souhaitez qu'elle fasse, regardez simplement la version en texte brut de la page :

Dans Microsoft Internet Explorer, choisissez l'élément de menu "Afficher... Source".

Dans Netscape, choisissez l'élément de menu "Afficher... Source de la page".

Regardez les balises de la page. Vous pouvez apprendre beaucoup de cette façon.

Si vous ne connaissez pas les moteurs de recherche, vous feriez bien de vous renseigner sur ce puissant outil Internet. Accédez à www.google.com pour obtenir un exemple de moteur de recherche. Tapez "Tuteur HTML" pour découvrir à quel point un moteur de recherche peut être utile.