Depuis peu, j'ai également mis en ligne un site qui vous permettra de créer un blog gratuit qui fonctionne très très bien !
Cette page est une initiation à la création de sites
internet !
Introduction
Vous avez un projet de création de site internet, mais vous ne savez pas comment vous y prendre...
Suivez les indications de cette page et vous trouverez les réponses à vos quetions ;)
Si en plus vous souhaitez gagner quelques Euros, laissez-vous guider par www.affiliation-o-affiliation.com
lorsque votre site sera terminé.
Je vais essayer de vous décrire toutes les étapes une par une, dans l'ordre.
Je ne suis pas professionnel et je n'en ai pas la prétention,
mais je pense pouvoir vous guider dans vos débuts de webmasters (ou webmestres en français) car j'ai un peu plus de 20 créations à mon actif.
La suite, vous l'apprendrez par vous même (comme moi), en approfondissant certains domaines
qui vous semblent plus interessants.
Pour info:
Ces pages seront souvent remises à jour étant donné l'ampleur du sujet traité.
Pour cela, ajoutez dès maintenant ce site à vos favoris
Toutes les étapes
! Important !
Lisez tout une première fois avant de
commencer "la procédure", vous pourrez ainsi avoir
une meilleure approche du sujet avant de vous lancer.
Dans tout les cas, c'est un travail long et fastidieux !!
Alors soyez certain de votre motivation avant de vous lancer !
Si vous prenez goût à faire passer vos idées, n'hésitez plus, le net est votre solution !
1ère étape: Créer un compte chez un hébergeur
Inscrivez-vous afin d'obtenir un compte sur un serveur (pour votre site, et votre e-mail).
Le nom que vous choisirez, pour des raisons "pratiques", sera LE mot clé principal
de votre site qui guidera les internautes vers votre site.
Voici ma sélection d'hébergeurs:
Hébergement gratuit:
Nota: 1 semaine après votre inscription, vous recevrez toutes
les informations indispensables (vos codes d'accès FTP) par courrier.
A savoir: si à l'avenir vous utilisez des scripts PHP, la fonction d'envoi de mail depuis le serveur
est désactivée chez cet hébergeur...
Hébergement payant:
!! Conservez bien les données communiquées par les hébergeurs
2ème étape: Télécharger gratuitement et installer le logiciel de transfert FTP
3ème étape: Télécharger gratuitement et installer un éditeur html
4ème étape: Organiser vos idées pour imaginer votre trame
!! Prenez le temps
de bien réfléchir à la structure de votre site !!
Cela vous évitera de perdre du temps par la suite.
Astuce: En général, je commence toujours un
site en le mettant d'abord en forme sur papier.
Voici le schéma d'une trame de base d'un site web:
| Sommaire |
vers:
| Rubrique 1 | Rubrique 2 | Rubrique 3 | Rubrique 4 | Contact |
vers:
| Sous rub1 | Sous rub1 | Sous rub2 | Sous rub2 | Sous rub3 | Sous rub3 | Sous rub4 | Sous rub4 | Sous rub4 | Sous rub4 |
5ème étape: Créer votre trame en pratique :
Dès lors ou vous entrez l'adresse internet d'un site web dans votre navigateur
(internet explorer ou netscape et autres...)
vous arrivez toujours sur une page nommée "index.quelque chose..." qui sera la page de départ du site
(le sommaire dans l'exemple ci-dessus).
Dans votre cas, votre page d'entrée se nommera "index.html"
(vu que nous ne traiterons que la programmation dans le format html)
Remarque: Vous pouvez également faire en sorte que l'index.html soit votre page d'entrée et pas forcément votre sommaire...
Exemple: Cliquez ici !
Les noms de pages de vos rubriques correspondront aux mots clés principaux de chaque rubrique.
Exemple: rubrique photos => "photos.html", etc.
!! Ne jamais laissé
un espace vide dans le nom d'un fichier html, et ne jamais mettre d'accent !!
Sinon la page ne s'ouvrira pas :(
Astuces: pour obtenir des noms de pages composés de plusieurs mots, utilisez: - ou _ en remplacement de l'espace...
Tout cela sera très utile à votre futur référencement dans les moteurs de recherche !!
5ème étape: Créer une page (type) en html
Voici les notions principales pour créer une page web en programmation html
(Pour info, il existe des milliers de sites qui vous donnerons de plus amples informations (tutoriels) au sujet de la programmation html)
- lancez votre éditeur html
Voici ce qu'il y a marqué sur la page par défaut de votre éditeur
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Quelques explications:
<HTML> </HTML> signifie que la page est en format html
<HEAD>
<TITLE></TITLE>
</HEAD>
Dans le <HEAD> </HEAD> se trouve toutes les informations telles que le titre
<TITLE>Mettez votre tire de page ici</TITLE>
Les Métas tags:
<META
NAME="GENERATOR" CONTENT="Sothink HTML Editor">
(signifie que le logiciel utilisé pour créer
la page se nomme: Sothink HTML Editor)
(Vous pourrez effacer les métas par défaut et mettre à la place les métas que vous aurez
créés grâce au générateur de métas que vous trouverez ici)
En général, je fais ça à la fin, lorsque mes pages sont créées, pour avoir une meilleure idée
du contenu global du site et donc des mots clés à mettre en avant...
<BODY></BODY> est le corps (visible) de votre page !
Vous pourrez définir ici la couleur de fond, la couleur des liens et celle des liens déja visités.
Exemple:
<body background="mettez ici l'url de votre image de fond" bgcolor="#FFFFFF" text="#000000" link="#00FF00" vlink="#008000" alink="#00FF00">
Ce code signifie que la page aura une image de fond à vous de la définir si jamais... sinon, enlevez le code:
background="mettez ici l'url de votre image de fond"
Votre couleur de fond est définie par le code bgcolor="#FFFFFF"
Votre couleur de texte est définie par le code text="#000000"
Votre couleur de liens est définie par le code link="#00FF00"
Votre couleur des liens visités est définie par le code vlink="#008000"
Votre couleur de liens actifs est définie par le code alink="#00FF00"
Cliquez ici pour découvrir les codes des 114 couleurs de base
Note importante: Vous l'aurez peut-être remarqué, tout ce qui commence par < > finit par </ >
et dès lors ou vous trouverez un " dans un code, il faudra également qu'il soit refermé...
Votre éditeur html est ouvert, vous allez faire un essai:
Créez votre page:
Pour recopier les codes suivants:
-Sélectionnez le texte
-Appuyez sur la touche Ctrl+c pour copier le code html ci dessous
-Appuyez sur la touche Ctrl+v pour le coller dans votre éditeur.
Copiez ce code:
<HTML>
<HEAD>
<TITLE>Futur titre de mon site</TITLE>
</HEAD>
<BODY>
ESSAI INDEX pour comprendre...
</BODY>
</HTML>
=> Enregistrez la page sous: votre répertoire; nom de la page => index.html
Ca devrait vous donner la page suivante : Cliquez ici !
Pour visualiser vos essai cliquez sur l'icon avec la planète passée à la loupe,
il vous permet d'ouvrir votre page courante dans le navigateur internet de votre choix.
Ajoutez un lien, une image :
Recopiez le code suivant et modifiez le à souhait avant de l'insérer dans le body:
<body>
ICI
<body>
Voici le code de base pour insérer un lien:
<a href="http://sites.estvideo.net/mattcreators/">Site Mattcreators</a>
Ce code pointe vers mon site perso et donnera le lien suivant:
Le lien s'ouvrira alors dans la page courante
Pour que le lien s'ouvre dans une nouvelle fenêtre, copiez le code suivant:
<a href="http://sites.estvideo.net/mattcreators/" target="_blank">Site Mattcreators</a>
Ce qui donnera: Site Mattcreators
Voici le code de base pour insérer une image:
<img src="http://sites.estvideo.net/mattcreators/pics/design.gif" width=88 height=31 border=0 alt="Le web au service de l'Art !">
Ce code donnera: 
Explications:
img src="mettez ici l'adresse url de votre image (une fois envoyée sur votre serveur cf. la suite des explications)"
=> donne la source de l'image
width= 88 height= 31
=> donne la largeur (88) et la hauteur (31) en pixels
border=0
=> l'image n'a pas de bordure, pour mettre une bordure remplacez le 0 par 1
alt="Le web au service de l'Art !"
=> quand on passe sur l'image avec la souris, le texte: Le web au service de l'Art !
s'affiche à droite du curseur
=>
Maintenant, combinez les deux et servez-vous de ces applications pour obtenir
une image qui renverra vers un lien, dans une nouvelle fenêtre:
Code html à recopier:
<a href="http://sites.estvideo.net/mattcreators/" target="_blank"><img src="http://sites.estvideo.net/mattcreators/pics/design.gif" width=88 height=31 border=0 alt="Le web au service de l'Art !"></a>
=> remplacez le texte par le code html d'insertion d'une image
=>
Passons aux codes de base servant à la mise en page:
<br>signifie un retour à la ligne
<p align="center">votre texte / photo, tableau</p>signifie que votre texte / photo, tableau sera centré sur votre page
(Remplacez "center" par "right" ou "left" afin d'obtenir votre texte / photo, tableau sur la droite ou la gauche de votre page (idem dans les tableaux...) )
Les tableaux:
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
=> Représente le code pour un tableau à 1 colonne, 1ligne.
| 1 |
-
<TABLE>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
=> Représente le code pour un tableau à 2 colonnes, 1ligne.
| 1 | 2 |
-
<TABLE>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
</TABLE>
=> Représente le code pour un tableau à 1 colonne, 2 lignes.
| 1 |
| 2 |
Pareil que pour les images, si vous voulez mettre une bordure il faut intégrer le code: border="1" dans <table>
=> <table border="1">
De même que pour les images, vous dimensionnerez vos tableaux sur mesure ex: <table width="750" height="800">
Vous pouvez aussi intégrer des tableaux dans les tableaux, ...
Mais aussi des couleurs de fond: ex: <table bgcolor="red">
| 1 | 2 |
Des images ou des fonds: <table background="l'adresse url de votre image / fond, sur votre serveur">
A vous d'agencer tout ça à votre guise ;-)
Pour insérer un lien qui ouvrira la messagerie de vos surfers vers un E-mail précis,
recopiez le code suivant:
<A href="mailto:mettez ici votre e-mail">E-mail</a>
Maintenant, vous avez les bases minimum en html pour créer un site.
6ème étape: Mise en ligne de vos pages
Vous avez eu la confirmation de votre hébergement qu'un compte est ouvert pour vous sur leur serveur.
au nom de: votrenomdesite
Si vous n'avez pas acheté de nom de domaine en .com, net ou .fr etc.
l'adresse de votre site (votre url) sera alors de la forme:
http://www.votrehébergeur.com/votrenomdesite
ou directement: www.votrenomdesite.com ou .net ou .fr ...
Et comme je vous l'ai expliqué précédement, c'est l'index qui apparaîtra
lorsque vous pointerez le navigateur vers votre url (adresse internet de votre site).
(un index est déja en place sur votre compte, par défaut, mis en ligne par votre hébergeur... il faudra le remplacer par le votre)
Dans votre mail / courrier de l'hébergeur se trouve
Le nom (login): celui que vous aurez choisi
L'adresse FTP de l'hôte, du type: ftp.votrehébergeur.com
Le mot de passe: en général c'est vous qui choisissez.
Vous démarrez votre logiciel de transfert FTP
et vous rentrez les données précédentes lorsque vous créez une nouvelle connexion
Vous seront demandés par le logiciel:
Le nom (login), l'adresse FTP de l'hôte, le port (laissez 21), votre mot de passe.
Vous avez en face de vous, un tableau avec 3 colonnes, dont 2 principales !
Celle de gauche est l'explorateur de votre disque dur, celle de droite,
l'explorateur de votre hébergement sur le serveur.
Vous avez tout compris, il suffit donc d'envoyer ce que contient votre répertoire principal issu de votre disque dur, sur le serveur, en l'ouvrant avec l'explorateur sélectionnant tous les fichiers et répertoires qu'il comprend, et en cliquant sur "transférer" ou "envoyer les fichiers".
Et voila !!
Vos pages sont en ligne.
Leurs adresses sont simplement du type:
http://www.votrehébergement.com/votrenomdesite/photos.html
ou
www.votrenomdesite.com/photos.html
Vérifiez que les adresses (sources) des images soient bonnes et que les images s'affichent bien.
(Idem pour les liens !!)
N'oubliez pas que l'adresse source de votre image ou de vos pages sont à présent:
http://www.votrehébergement.com/votrenomdesite/images/photoquelconque.jpg
ou
www.votrenomdesite.com/images/photoquelconque.jpg
Testez vos pages et mettez-les en lien depuis votre sommaire.
Féllicitations, maintenant vous pouvez vous sentir concerné par les rubriques "webmasters" sur les sites !! ;-)
7ème étape: Mise en place des statistiques
Allez sur www.xiti.com pour ouvrir un compte gratuit qui vous permettra
de connaitre les statistiques de votre site.
(Données interessantes qui permettent de voir l'évolution d'un site web à travers le nombre de visiteurs, le nombre
de pages vues, les recherches effectuées pour arriver sur vos pages, le chemin de vos visiteurs, leur age, le sexe, leur provenance géographique...)
Un bon conseil: Faites-le, c'est pratique !
8ème étape: Ajoutez des services gratuits sur votre site:
Livre d'or gratuit, recosite gratuit, compteurs gratuit, kits
graphiques gratuits, gestion de newsletter,
module news gratuit,gestionnaire de bannières, générateur
de boutons gratuit,top site gratuit, award gratuit !!
9ème étape: Référencer votre site,
gratuitement ou en payant
Votre site est fini.
Les "métas tags" sont bien définies pour chacune de vos pages.
Tout est ok avec les statistiques !
Maintenant, il ne vous manque plus que du trafic.
Pour cela il faut référencer votre site.
Vous trouverez sur cette page, un outil qui vous permettra de référencer gratuitement votre site sur de
nombreux moteurs de recherches et de nombreux annuaires.
10ème étape: M'envoyer un petit mail
Si vous avez conçu un site grâce à cette page, veuillez me contacter pour me faire voir le résultat,
je vous conseillerai et créerai un échange de liens avec vous via mon annuaire http://www.a-annuaire.com.
J'ai fais cette page dans un but éducatif, afin de permettre à n'importe qui d'avoir la possibilité de créer son site.
Alors soyez sympa, faites parler du site des Studios Mattcreators http://sites.estvideo.net/mattcreators.
De http://www.telecharger-kits-graphiques.com, et de mon annuaire http://www.a-annuaire.com ainsi que de
11ème étape AFFILIATION : ou comment
gagner de l'argent avec votre site
=> La cerise sur le gâteau !!
L'inscription à des systèmes d'affiliations vous permet d'être rémunéré et de rentabiliser votre site internet !
L'inscription à des plateformes d'affiliations est une chose délicate.
Votre site doit générer assez de trafic pour pouvoir envoyer des visiteurs sur les sites des sponsors.
Si votre traffic est ciblé, veillez à ce que vos sponsors le soient aussi !
Le choix des bons sponsors, le placement des bannières et le fait que ces bannières soient ciblées
sont des choses primordiales.
Le principe est simple:
Vous vous inscrivez à un ou plusieurs systèmes d'affiliation après en avoir lu les conditions...
Ce système vous donnera des codes html contenant votre n° de compte affilié
que vous mettrez en place sur vos pages.
Ce code permettra à l'affilieur de comptabiliser les clicks et ventes issus de votre site
et ainsi, de vous rémunérer en fonction...
Pour info: Les moyens de paiement sont assez variés:
Paiement par click, paiement par formulaire rempli et confirmé,
paiement par pourcentage des ventes réalisées...
Pour tout savoir sur les meilleures affiliations du marché et pour approfondir vos connaissances dans la création de sites, veuillez visiter un des autres sites de ma création :
http://www.affiliation-o-affiliation.com
Avant d'utiliser le moteur de recherche Google pour approfondir vos connaissances,
qui est un moteur très complet qui vous permettra de chercher des mots ou associations de mots,
mais aussi des images, je vous conseil tout de même d'aller consulter la page de ressources pour webmasters que j'ai mis en place sur le site: http://www.affiliation-o-affiliation.com
Au fait, quand vous cherchez quelque chose sur les moteurs de recherches, pensez à ce que le webmaster à pu écrire...
C'est souvent plus rapide pour une recherche ciblée.
Prévenez-moi par e-mail en cas de soucis (liens cassés ou problème avec ma méthode)
