Créer son propre site Internet
Pour beaucoup de pratiquants de l'informatique, la création d'un site Internet s'apparente à la quête du Graal : c'est magnifique, mais c'est réservé à quelques passionnés.
Or, il n'est franchement pas difficile de créer un site de quelques pages, avec texte, photos et un minimum de mise en page.
Ce qui va être dit est valable pour les utilisateurs d'ordinateur Macintosh de chez Apple, mais les commandes sont souvent différentes. N'étant pas un pratiquant régulier sur Mac, je ne peux pas faire toutes les transpositions voulues.
Un site Internet est composé de pages comme celle que vous êtes en train de lire. Ces pages sont créées à partir d'un code très simple. Elles sont liées entre elles par des liens faciles à générer, comme ceux du menu en haut à gauche de cette page.
Réservation de l'adresse d'un espace de stockage
La première chose à faire est de réserver une adresse et un espace pour stocker les pages Internet que vos visiteurs pourront voir. En effet, vos visiteurs doivent pouvoir accéder 24 heures sur 24 à votre site, et pour cela, les pages que vous allez créer sur votre propre ordinateur devront être stockées sur un ordinateur spécialement dédié à l'hébergement de pages Internet.Il existe des hébergements payants et des hébergements gratuits.
L'hébergement gratuit est la solution la plus simple et la plus rapide. Elle est idéale pour une première expérience de création web, ce qui est votre cas, si vous lisez cette page. Elle comporte bien sûr certaines limitations.
Les grands fournisseurs d'accès offrent souvent ce type de service. Celui que je vous propose est le mien, Free, qui offre des avantages certains :
- Réservation de l'espace très rapide
- Gratuité totale
- Absence de limitation de durée
- Absence complète de publicité
- 100 Mo d'espace de stockage, largement suffisant pour de nombreuses pages et photos
- Discrétion dans l'adresse : ces adresses sont toutes sur ce modèle : http://(à votre choix).free.fr
Je vous conseille de ne mettre ni point ni tiret, et de trouver le mot le plus court possible, ceci pour favoriser la mémorisation de votre adresse chez vos visiteurs. Ce peut être votre nom de famille, ou bien le thème de votre site. N'oubliez pas que la plupart des mots courants sont utilisés et donc indisponibles depuis déjà bien longtemps.
Une fois votre login choisi, Free vous demande de choisir de recevoir le kit de connexion ou bien seulement les paramètres de connexion sur papier. Le kit de connexion, qui est en fait un simple CD, ne vous servira pas pour la création de votre site web, mais vous pouvez quand même le demander si vous ne l'avez déjà car il contient tout un ensemble de programmes utiles. Ce ne sont que des programmes pour Windows.
Une fois ce choix fait, Free vous explique que tout est bien enregistré, et que vous recevrez votre commande sous peu de jours. Le délai ne dépasse normalement pas quinze jours, voire souvent moins d'une semaine.
Vous ne pourrez pas publier vos pages Internet tant que vous n'aurez pas ces paramètres, mais rien ne vous empêche de commencer à les composer, et aussi installer sur votre ordinateur tous les outils nécessaires à la réalisation et à la mise à jour du site.
Création des pages Internet
Les pages Internet sont des fichiers répondant à des normes propres, et plutôt simples.Voici le moyen de créer votre première page.
Si vous êtes sur PC (Windows), ouvrez le programme appelé "Bloc-notes" (Menu Démarrer, Programmes, Accessoires, Bloc-notes ou Notepad).
Si vous êtes sur Mac (Mac OS Apple), ouvrez l'Editeur de texte (en haut d'une fenêtre du Finder, "Applications", Editeur de texte).
Ce que je dis ci-dessous est, dans le détail, destiné aux utilisateurs de PC. Les utilisateurs de Mac devront faire preuve d'un peu d'intuition pour suivre une procédure analogue.
Dans la fenêtre ainsi ouverte, tapez (ou copiez-collez) le texte suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Ceci est ma page d'index</title>
</head>
<body>
Je suis très heureux de ce premier travail de création de
page Internet.
</body>
</html>
Puis cliquez sur "Fichier", "Enregistrer". Vous pouvez créer un nouveau dossier pour accueillir vos pages Internet. Donnez-lui un nom tel que "Mon site web", ou "site web perso".
Dans la case "Nom", il faut impérativement écrire "index.html".
C'est nécessaire, car c'est la page qui s'ouvrira quand vos visiteurs taperont l'adresse de votre site Internet. La page d'accueil doit toujours être nommée "index". L'extension .html signifie que le fichier que vous créez est une page Internet, codée en langage HTML (Hyper Text Markup Language).
Puis cliquez sur "Enregistrer". Vous venez de créer votre première page web.
Technique : le code HTML
Je vous donne quelques explications sur le code ci-dessus. Le codage
utilisé est fort simple. Les éléments
délimités par les symboles ouvrant < et fermant >
s'appellent des "balises HTML". La page que vous venez de créer
contient déjà cinq balises différentes.
La première ligne est une ligne de déclaration. Elle
explique que la page est codée en langage HTML, version 4.01.
Les balises <html> et </html> forment un couple d'une
balise ouvrante et d'une balise fermante. Elles signifient que tout le
texte qui se trouve entre ces balises est en langage HTML.
Les balises <head> et </head> ("tête" en anglais)
délimite un espace pour des informations qui ne figurent pas
dans la fenêtre principale du navigateur.
La balise <meta> contient une déclaration sur le type de
caractères utilisés, ici les caractères latins.
Elle peut aussi contenir des mots clés destinés aux
moteurs de recherche comme Google.
Les balises <title> et </title> délimitent le titre
qui apparaîtra dans la barre de titre du navigateur.
Les balises <body> et </body> ("corps" en anglais)
délimitent le code destiné à l'affichage dans le
navigateur. Dans notre exemple, le texte "Je suis très heureux
de ce premier travail de création de page Internet." va
s'afficher dans la fenêtre principale du navigateur.
Vous connaissez maintenant les toutes premières bases du code
HTML.
Pour aller plus loin, je vous invite à consulter ce site
Internet, qui est un cours fondamental très facile et rapide sur la
création de pages web.
Maintenant, il est bon de voir ce que donne notre première page web.
Pour visionner le résultat, retrouver ce fichier dans votre nouveau dossier, et double-cliquez dessus. Votre navigateur Internet (Internet Explorer ou Mozilla ou autre) s'ouvre et vous voyez apparaître le texte "Je suis très heureux de ce premier travail de création de page Internet." dans la fenêtre d'affichage du navigateur.
Remarquez que la barre de titre contient l'expression "Ceci est ma page d'index" que nous avons inscrit entre les balises de titre.
Pour modifier votre page, ouvrez le bloc-notes, cliquez sur "Fichier", "Ouvrir", et en bas dans la rubrique "Type", choisissez "Tous (*.*)". Puis dans "Explorer :", sélectionnez votre dossier contenant votre page "index.html". Double-cliquez ensuite sur ce fichier. Modifiez le code à votre guise. Cliquez sur "Fichier", "Enregistrer". Si votre navigateur est déjà ouvert sur cette page, vous pouvez mettre à jour l'affichage en cliquant sur le bouton "Actualiser" (ou touche F5 sur la plupart des navigateurs).
Voilà pour la création de votre première page Internet. Pour créer autres pages, il vous faut d'abord les nommer correctement. Les majuscules, les espaces blancs et les accents sont bannis. Pour éviter toute ambiguïté, il est conseillé de ne rien mettre d'autre que des chiffres et des lettres.
Plus ce nom est court, mieux c'est. Il est d'ailleurs à remarquer que vos visiteurs ne verront pas ce nom, et qu'il a donc uniquement une fonction de repérage. Si vous avez une bonne mémoire, vous pouvez même nommer vos pages (sauf index.html qui doit rester invariable) 1.html, 2.html, ou bien a.html, b.html.
Si vous voulez absolument avoir plusieurs mots dans le nom de vos pages Internet (mais cela alourdira beaucoup votre code), vous pouvez le faire avec les caractères "-", ou "_". Les autres caractères sont déconseillés, surtout le point, car ils peuvent être source d'ambiguïté.
Maintenant, vous n'êtes pas obligé d'écrire toutes vos pages directement en code HTML. Les programmes informatiques qui permettent de créer des pages Internet s'appellent des éditeurs HTML. Il en existe de nombreux. Je vous déconseille d'utiliser les fonctions de Word, Excel et Publisher qui offrent ces possibilités. Le code généré est extrêmement lourd, et ne donne pas un rendu fidèle de ce que vous avez composé à l'écran.
Je vous conseille plutôt de télécharger la suite SeaMonkey qui contient un navigateur Internet et un éditeur HTML très simple, appelé "composeur". Ce composeur permet très facilement de créer des pages web en donnant des mises en forme simple (gras, italique, souligné, couleur de police, choix de la police) et en intégrant liens vers d'autres pages, images et tableaux simples.
L'éditeur HTML de la suite OpenOffice.org génère également un code d'assez bonne qualité pour quelques pages Internet simples.
Activation des pages perso
Selon l'offre d'hébergement, il vous peut-être faire une opération supplémentaire sur Internet pour pouvoir procéder au téléchargement de vos pages Internet sur le serveur distant. C'est ce qu'on appelle l'activation.Vous ne pouvez faire cette opération que lorsque vous disposez de votre login et de votre mot de passe. Chez Free, vous recevez cela par la poste d'une à deux semaines après votre demande. Sur le site Internet de Free, allez à la rubrique "Pages perso", "Activation", et taper votre login et votre mot de passe. L'activation prend un certain temps. Free parle de quelques heures, mais je vous conseille d'attendre 24h avant de passer à l'étape ci-dessous.
Téléchargement des pages créées
Une fois vos pages créées et enregistrées sur le disque dur de votre ordinateur, il faut les transférer sur le disque dur distant du serveur (gros ordinateur tournant 24h sur 24) qui héberge vos pages et les rend accessibles à vos visiteurs.Cette tâche revient à un type de programme informatique précis, appelé "client FTP". FTP, ou "File Transfer Protocol", signifie "Protocole de transfert de fichier". Ils existent de très bons programmes gratuits et téléchargeables de ce type. Le meilleur à mon sens est FileZilla. Vous pouvez aussi chercher CoreFTP (en anglais), très semblable à FileZilla dans son utilisation.
Pour les utilisateurs de Mac, le programme est FetchFTP, mais il est malheureusement payant au bout de quinze jours.
Maintenant, il vous faut donc télécharger et installer FileZilla sur votre PC.
Ceci fait, ouvrez le programme. Vous voyez apparaître une fenêtre un peu complexe. Cliquez sur "Fichier", "Gestionnaire de Sites".
Pour créer un accès pérenne au disque dur distant qui hébergera votre site, il vous faut trois données :
- L'adresse de l'ordinateur distant (nommé
"Hôte" en haut à droite de la boîte de dialogue).
Dans le cas de Free, cette adresse est : ftpperso.free.fr
Tapez-la, et cliquez ensuite sur la case "Normal" sous le titre "Type d'authentification".
- Votre login, que vous devez taper
sous la rubrique "Utilisateur :".
- Votre mot de passe, qui vous parvient par la poste dans le cas de Free, et que vous tapez à la rubrique "Mot de passe :".
Technique : obtenir toujours le bon dossier local au lancement de FileZilla
Une dernière opération pour vous gagner du temps : vous
pouvez spécifier le "Répertoire local par défaut"
qui apparaîtra dans FileZilla à chaque fois que vous
ouvrez le programme. L'intérêt est de visualiser
immédiatement votre dossier contenant vos pages Internet, et de
pouvoir ainsi les télécharger rapidement. Pour que ça marche, je vous conseille de regrouper toutes vos pages Internet et les images qui vont avec dans un même dossier.
Une fois ceci fait, il est temps de passer à l'action, et de procéder effectivement au téléchargement. Cliquez sur "Connexion". Le programme tente alors la connexion au serveur distant. Il faut bien sûr que votre connexion à Internet soit établie.
Il arrive que le serveur distant soit réellement indisponible du fait de la maintenance ou de problèmes techniques. FileZilla vous informe de la progression de la connexion avec des messages en trois couleurs apparaissant dans la barre blanche sous la barre "Adresse :".
Une fois la connexion établie, vous devez voir apparaître un petit dossier vide dans la fenêtre centrale de droite. C'est le dossier qui attend vos pages Internet.
Dans la fenêtre, si ce n'est pas déjà le cas, faites apparaître le dossier qui contient vos pages Internet nouvellement créées.
Le transfert va se faire par "glisser-déplacer" ("drag and drop" en anglais). Vous cliquez sur votre page "index.html" et vous maintenez le bouton de votre souris appuyé. Vous glissez maintenant votre pointeur vers la fenêtre de droite, et vous relâchez. Normalement, la page Internet se télécharge sur le disque dur distant. L'original reste sur votre disque dur, c'est seulement une copie qui est téléchargée. Je précise que les modifications futures de vos pages ne peuvent se faire directement sur le fichier distant. Pour toute modification, il faut agir sur le fichier présent sur votre disque dur, le modifier, l'enregistrer, le vérifier, et seulement après télécharger sur le serveur distant la nouvelle version, qui écrase l'ancienne.
Technique : astuces sur FileZilla
FileZilla est un programme riche qui permet de nombreuses
opérations. N'hésitez pas à le tester sous toutes
les coutures. En particulier, le clic droit (bouton droit de votre
souris) sur un fichier ou dossier local (sur votre disque dur) ou
distant ouvre un menu permettant des opérations
intéressantes. C'est le moyen, en particulier, de supprimer un
fichier précis sur le serveur distant (clic droit, puis
"Supprimer" dans le menu qui s'ouvre).
Dès lors, votre site Internet est opérationnel.
Test et évaluation
Vous pouvez le tester en allant à l'adresse de votre site sur votre navigateur. Cette adresse, chez Free, se présente comme suit : http://monlogin.free.fr, ou l'expression "monlogin" est bien sûr votre propre login. L'adresse doit être exacte au caractère près, car les navigateurs Internet n'ont aucun système de correction sur l'adresse des sites.Si votre adresse est exacte, vous voyez normalement apparaître votre page "index.html". Si vous avez plusieurs pages, il est bon de tester les liens internes (ceux qui pointent vers d'autres pages de votre site) et externes (ceux qui pointent vers d'autres sites).
En effet, la qualité d'un site Internet est mesurée en particulier par la facilité de navigation. Pour d'autres critères d'évaluation, voir ci-dessous.
Technique : critères de qualité d'un site Internet
La qualité d'un site web dépend de plusieurs facteurs :
- le contenu, bien sûr : si votre site n'apporte rien par rapport
à des sites existants, personne ne voudra y venir et encore
moins y revenir. Veillez donc à une vraie originalité, et
bannissez toute tentation de copier le contenu d'un autre site.
- la facilité de navigation : tous les liens doivent bien
sûr être opérationnels (Pour vérifier vos liens,
vous pouvez utiliser le petit programme Xenu) et faciles à
identifier (le visiteur doit savoir à quoi s'attendre avant de
cliquer sur le lien, sinon, il sera déçu et jugera
sévèrement l'auteur du lien). Les menus doivent
permettre, dans l'idéal, d'accéder à tout instant
à toutes les pages du site.
- un aspect engageant : attention aux pages surchargées, ou au
contraire au vide sidéral. L'image ou le dessin de fond doit
être discret et surtout ne nuire en rien à la
lisibilité du texte.
- la vitesse de téléchargement : certains de vos
visiteurs auront des débits très bas. Ils seront
découragés si vous leur infligez des images très
volumineuses. Veillez donc à ce que vos petites images ne
dépasse pas 20 Ko (100 Ko pour les grandes), faute de quoi le
visiteur quittera votre site avant même le
téléchargement complet de l'image.
Il ne vous reste plus maintenant qu'à enrichir votre site. Et ceci, c'est votre seule créativité qui est votre limite…
Technique : trouver de bonnes idées sur d'autres sites
Une bonne méthode pour progresser dans la connaissance du code
HTML sans trop se fatiguer est de regarder le code source des pages
Internet que vous trouvez intéressantes. Cas typique : vous
êtes sur Internet et tombez sur une page que vous trouvez
formidable. Rien ne vous empêche de voir quel est le code
sous-jacent, en faisant un clic droit, et en choisissant dans le menu
"Afficher la source." Un fichier texte s'ouvre, contenant l'ensemble du
code source de la page que vous venez de voir. Vous allez
sûrement découvrir de nouveaux codes, comprendre leur
fonctionnement et vous pouvez les utiliser ensuite dans votre propre
page.
Voici les codes HTML des caractères spéciaux. Il est préférable de les utiliser quand on crée les pages HTML directement en code.
Voici les codes de couleurs qui vous seront utiles si vous voulez définir des arrières-plans où des couleurs de polices de caractères directement en code.
Des sites web pour vous aider à créer et enrichir votre site :
Cotolwet vous apprend pas à pas à créer vos premières pages Internet. Idéal pour ceux qui débutent complètement.
Fraso vous initie à vos premiers codes en HTML, le code qui permet de visualiser les pages Internet.
Un site fantastique : SELFHTML, qui vous donne toutes les clés des codes pour des mises en page très subtiles, avec tous les exemples pour faire très facilement des copier-coller et améliorer votre présentation. C'est un apprentissage très détaillé du code HTML, le mieux fait que je connaisse à ce jour.
L'éditeur que j'utilisais pour créer mes pages sous Windows est HAPedit. Il s'utilise en code pur, mais il est en français, et bien conçu.
Assez vite, vous voudrez plusieurs pages Internet, avec un menu toujours identique pour pouvoir accéder à toutes vos pages. La solution pour cela s'appelle PHP. C'est un langage qui permet l'assemblage de plusieurs fragments de HTML sur une même page, comme un puzzle dont certains éléments sont communs à toutes les pages, et d'autres changeants. Jeunes-Webmasters vous propose de faire vos premiers pas en PHP.
Pour pouvoir voir comment s'afficheront vos pages créées en PHP avant de les publier, vous avez besoin d'un serveur php installé sur votre ordinateur. Le plus connu est EasyPHP, mais vous pouvez aussi utiliser Zamp qui est plus léger et plus rapide.
Pour améliorer l'affichage de votre site web, en particulier avec des menus comme celui de gauche, vous pouvez aller sur L'éditeur Javascript.
Gratissimo vous fournit un ensemble de liens vers des sites consacrés à la création Internet
Pour toutes questions ou précisions, n'hésitez pas
à m'écrire.
