Sitopolis      La cité des sites 

Créer un site Internet facilement et gratuitement, comment faire ?

[RUBRIQUE NON MISE À JOUR DEPUIS 2008]

¤ Choisissez un nom de domaine
¤ Construire votre site :
¤¤¤ Avec le Bloc-Notes :
¤¤¤¤¤¤ Un document HTML
¤¤¤¤¤¤ Le texte
¤¤¤¤¤¤ Le saut de ligne
¤¤¤¤¤¤ Le lien
¤¤¤¤¤¤ L'image
¤¤¤¤¤¤ La ligne
¤¤¤¤¤¤ Le bouton
¤¤¤¤¤¤ Le tableau
¤¤¤¤¤¤ La zone de texte
¤¤¤¤¤¤ Le formulaire
¤¤¤¤¤¤ Les balises <select> et <option>
¤¤¤¤¤¤ La balise <textarea>
¤¤¤¤¤¤ Comment s'organise une page html ?
¤¤¤ Avec un logiciel :
¤ Placer les pages de votre site sur le serveur
¤ Créer une bannière
¤ Faire connaître votre site

Tout d'abord, pour créer un site internet, vous devez avoir une idée et vous poser les bonnes questions : sur quel thème mon futur site traitera-t-il ? Est-ce que ce thèmeintèressera-t-il les internautes ?

Si vous avez juste besoin de mettre des photos et un texte, les blogs peuvent suffire. Un blog est un site web constitué d'un ensemble de billets par ordre chronologique. Chaque billet ( appelé aussi note ou article) est, à l'image d'un journal de bord ou d'un journal intime. Le blogueur (tenant du blog) y porte un texte, souvent enrichi d'hyperliens et d'éléments multimédias (photos, vidéos, musique) et sur lequel chaque lecteur peut généralement apporter des commentaires. Voici quelques sites permettant de créer un blog : http://www.skyblog.com - http://www.over-blog.com - http://www.centerblog.net - http://www.bloguez.com

Pour faire un site très facilement et gratuitement, vous pouvez utiliser le service Wifeo.com. Votre site sera de la forme : http://******.wifeo.com

Maintenant, si vous désirez créer votre propre site, voici comment faire :

¤ Choisissez un nom de domaine :

Deux solutions : une solution qui coûte quelques euros mais dans laquelle vous aurez votre propre site (.com, .org, .net, .fr) et peu de risques que l'accès ne fonctionne pas... ou une solution totalement gratuite (exemple : "free" qui me paraît la meilleure solution concernant les hébergements gratuits). Cependant, vous serez prisonnier de ce fournisseur qui vous fournira une adresse spécifique (http://nom.free.fr). Contrairement à la plupart des hébergements gratuits, free n'impose pas de la publicité, il ne fonctionne pas toujours mais c'est rare !

En revanche, si vous réservez un nom de domaine de type ".com" ou ".net" ou ".org" ou ".fr", vous pourrez changer d'hébergeur librement, et vous ne perdrez pas tout votre travail de promotion.
* Voici le fournisseur de nom de domaine que je conseille : OVH

Après avoir réfléchi sur votre thème, vous devez regarder sur un whois (sur la page d'accueil d'ovh), si un nom de domaine que vous aimeriez avoir est disponible ou pas. Un site que j'aime bien pour savoir si les noms de domaines recherchés sont libres ou pas est : https://domize.com
Aujourd'hui, beaucoup de noms de domaines sont pris, donc ne vous inquiétez pas si vous n'en trouvez pas à vos premiers essais. Si un nom de domaine vous satisfait et s'il est disponible, vous pouvez l'acheter.
Les prix varient selon ce que vous souhaitez en hébergement. Si vous pensez que votre site contiendra des milliers de pages, prenez un hébergement supérieur à 60gp sinon, 60gp suffit entièrement.
Pour un nom de domaine et un hébergement, vous payez à l'année et généralement, les prix tournent autour de 20 euros par an.

* Concernant l'hébergement sur free, c'est gratuit et illimité partout en France. Free propose 10Go d'espace disque pour votre site web, c'est largement suffisant.
Pour vous inscrire, il faut vous rendre sur http://subscribe.free.fr/accesgratuit/subscribe/formuser.html, remplir le formulaire avec vos coordonnées. A l'étape 2, vous devrez chercher un nom de site. Par exemple, taper "votrenom" et vous verrez s'il est disponible ou pas. Ceci vous créera également un e-mail de la forme votrenom@free.fr. S'il est disponible, passez à l'étape 3 : laissez cocher la case "Informations de configuration uniquement" et passez à l'étape 4. A l'étape 4, vous devrez confirmer tout ce que vous avez saisi. Cliquez sur "Inscription" et vous n'aurez plus qu'à attendre... En général, free envoie par courrier postal votre login et votre mot de passe 15 jours après avoir saisi ce formulaire donc patience...

¤ Construire votre site :

Il faut savoir qu'il existe différents langages de programmation pour créer un site web. Les plus utilisés sont le HTML et le PHP. Voilà pourquoi les pages vers lesquelles vous surfez finissent par .html ou .php
Ici, nous développerons le html.

Pour construire un site, ce n'est pas difficile. Si vous savez vous servir de Microsoft Word, vous réussirez à en créer un.
Tout d'abord, il vous faut un éditeur. Une question que vous devez certainement vous être déjà posée, c'est : "De quel logiciel je vais avoir besoin pour créer mon site web ?"

En fait, des logiciels qui permettent de créer un site web, il y en a des tonnes. Mais pourquoi aller chercher un logiciel payant et compliqué, alors que vous avez déjà tout ce qu'il faut chez vous ?
Eh oui, accrochez-vous bien parce que... il s'agit de Bloc-Notes !

Construire votre site avec le Bloc-Notes :

Un document HTML de base ressemble à ceci :

<html>
<head>
<title>Le titre de la page se place ici</title>
</head>
<body>

---Tout ce qui apparaît dans votre page : texte, images ou autres se placent ici---

</body>
</html>

Faites un copier-coller (Ctrl-C / Ctrl-V) de ce code sur le bloc-Notes et enregistrez-le (avec le nom de fichier suivant : "index.html") dans un dossier que vous aurez nommé "monsite" sur votre disque dur (par exemple : sur C:/monsite). Maintenant, allez chercher votre fichier sur C:/monsite/ - Double-cliquez sur "index.html" et ouvrez-le avec Internet Explorer ou Firefox Mozilla, vous verrez que le navigateur affichera ce que vous avez écrit au centre, c'est-à-dire : ---Tout ce qui apparaît dans votre page : texte, images ou autres se placent ici---

Concentrons-nous sur le centre, là ou apparaîssent votre texte et vos images entre <body> et </body>

Nous allons faire un exemple :

Ouvrez votre Bloc-Notes et écrivez "Je fais un test". Enregistrez votre page (avec le nom de fichier suivant : essai.html) dans votre dossier nommé "monsite" sur C:/monsite). Maintenant, allez chercher votre fichier sur C:/monsite/ - Double-cliquez sur essai.html et ouvrez-le avec Internet Explorer ou Firefox Mozilla, vous verrez que le navigateur affichera ce que vous avez écrit, c'est-à-dire : Je fais un test

Ouvrez à nouveau votre fichier index.html avec le Bloc-Notes et écrivez <b>Je fais un test</b>. Enregistrez et vous verrez en l'ouvrant avec un navigateur que "Je fais un test" sera en gras. Eh oui, car <b></b> affiche du gras. Vous pouvez faire l'essai avec d'autres codes tels que :

LE TEXTE :

¤ Comment mettre du texte sur ma page ? Pour ajouter le texte, vous devez commencer un paragraphe avec des marques de paragraphe. Le texte sera automatiquement aligné vers la gauche :
<p>Mettez votre texte ici </p>

¤ Pour centrer votre texte vous faites ceci : <p align=center>Ceci centrera votre texte</p>

¤ Pour aligner votre texte du côté droit, vous faites ceci : <p align=right>Ceci alignera le texte vers la droite</p>

¤ Pour que votre texte soit en gras, faites ceci : <p><b>Ceci mettra votre texte en gras</b></p>

¤ Pour écrire votre texte en italique, vous faites ceci : <p><i>ceci écrira votre texte en italique</i></p>

¤ Pour souligner votre texte, vous faites ceci : <p><u>Ceci soulignera votre texte</u></p>

¤ Pour mettre une couleur à votre texte, faites ceci : <font color="#006699">Votre texte se place ici</font>
#006699, c'est du bleu...

¤ Pour changer la taille de police, ajoutez ce code de taille à votre marqueur : <font face="arial" COLOR="#006699" SIZE="3">
Vous pouvez donner à la taille le nombre que vous voulez. Plus le nombre est grand, plus la police est grande. Ici, "face" caractérise le type d'écrit (les plus connus sont : arial, verdana, times new roman, comic sans ms...)

LE SAUT DE LIGNE :

¤ Pour couper une ligne, il vous faut ajouter cette balise chaque fois que vous voulez aller à la ligne : <Br>. Vous pouvez employer ce marqueur pour faire les espaces verticaux entre les images, et cela fonctionne comme la touche "entrée" sur votre clavier.

LE LIEN :

¤ Comment faire un lien texte ? Pour faire un lien "texte", il suffit d'ajouter ce code à votre page : <a href="http://URL à joindre">mettez le texte ici</a>
¤ Comment ajouter un commentaire dans une infobulle lorsque l'on passe sur le lien ? Utiliser title. Exemple : <a href="http://URL à joindre" title="Votre commentaire">mettez le texte ici</a>
¤ Pour ouvrir votre lien sur une autre page, il faut utiliser target="_blank". Par exemple : <a href="http://URL à joindre" target="_blank" title="Votre commentaire">mettez le texte ici</a>


LE LIEN E-MAIL :

¤ Comment créer un lien d'e-mail' ? Cela s'appelle un "mailto" et voici comment faire (placez vos propres informations là où le texte est en gras) : <a href="mailto:votre adresse">votre nom</a>
Par exemple : <a href="mailto:sandy.moreau@hotmail.fr">Sandy</a> donnera Sandy et vous pourre m'écrire...
¤ Pour mettre un lien "mailto" (centré) avec une image voici la méthode : <center><a href="mailto:votre adresse"><img src="votre fichier.gif" width="000" height="000" alt="E-Mail" border="0"></a></center>
¤ Si vous souhaitez qu'un sujet soit automatiquement entré dans la ligne "sujet" il vous faut ajouter ce code dans votre éditeur : <a href="mailto:votre adresse e-mail?subject=votre sujet">Ecrivez-moi</a>

L'IMAGE :

¤ Pour afficher une image, elle doit se trouver dans le dossier que vous avez créer pour votre site, dans un dossier images, par exemple dans C:/monsite/images/, faites ceci : <img src="lenomdevotreimage.jpg (ou .gif)">
¤ Pour afficher un commentaire lorsque qu'un passe sa souris au-dessus de votre image, il faut utiliser "alt". Exemple : <img src="lenomdevotreimage.jpg (ou .gif)" alt="Voici le commentaire qui s'affichera au-dessus de l'image" >
¤ Pour faire un lien sur votre image, faites ceci : <a href="votrelien.html"><img src="lenomdevotreimage.jpg (ou .gif)"></a>
¤ Pour la taille de l'image, faites ceci : <img src="lenomdevotreimage.jpg (ou .gif)" width="sa largeur" height="sa hauteur" alt="le nom de l'image">
¤ Pour l'alignement, vous pouvez utiliser align="left" pour la gauche ; align="center" pour le milieu ; align="right" pour la droite. Exemple : <img src="lenomdevotreimage.jpg (ou .gif)" align="center"> sera une image centrée.

LA LIGNE :

¤ Pour afficher une ligne horizontale, vous faites ceci : <hr>
¤ Pour que cette ligne soit plus ou moins grande, redimensionnez en faisant ceci : <hr width=50%>
=> 50% est un exemple...
¤ Pour aligner cette ligne au centre, faites ceci : <hr width=50% align=center>
¤ Pour aligner cette ligne à gauche, faites ceci : <hr width=50% align=left>
¤ Pour aligner cette ligne à droite, faites ceci : <hr width=50% align=right> ce qui donnera :

LE BOUTON :

¤ Comment faire un lien de type "bouton" ? Ajoutez ce code à votre page et remplacez le texte en gras par vos informations :
<form method="link" action="http://adresse du lien"> <input type="submit" value="Cliquez ici"></form>

Voici à quoi cela ressemble :

<form method="link" action="http://adresse du lien"><input type="submit" value="Cliquez ici" rows=6 COLS=26 style="font-family:arial" style="border style:solid" style="background:#003399" style="color:yellow"></form>

Ça ressemble maintenant à ceci :

LE TABLEAU :

¤ Pour faire un tableau, faites ceci : <table></table>

Que met-on à l'intérieur du tableau ?
<tr> </tr> : indique le début et la fin d'une ligne du tableau.
<td> </td> : indique le début et la fin du contenu d'une cellule.

On a une balise de ligne (<tr>) qui "entoure" chacune des cellules (<td>)
Par exemple, si je veux faire un tableau à deux lignes, avec 3 cellules par lignes (donc 3 colonnes) et à bordure 1 (noire), je devrai taper ceci :

<table border=1 bordercolor=black>
<tr>
<td>Première ligne, première colonne</td>
<td>Première ligne, deuxième colonne</td>
<td>Première ligne, troisième colonne</td>
</tr>
<tr>
<td>Deuxième ligne, première colonne</td>
<td>Deuxième ligne, deuxième colonne</td>
<td>Deuxième ligne, troisième colonne</td>
</tr>
</table>

ce qui donnera :

Pour que la bordure du tableau soit d'une couleur, c'est le code "bordercolor" qui s'en occupe. Vous pouvez mettre toutes les couleurs qui existent (red, blue, yellow, orange, violet, green...) ex : <table bordercolor=green>
Pour centrer le tableau, il faudra simplement ajouter "align=center" dans <table>
Avec l'exemple du dessus, ça sera <table border=1 align=center> et cela devrait normalement centrer le tableau.
En faisant <td align=center>, cela centrera le texte à l'intérieur de la cellule... Faites des essais et vous verrez bien...

LA ZONE DE TEXTE

¤ Comment créer une zone de texte ? Dans une zone de texte, vous pouvez taper une grande quantité de texte sans que cela prenne beaupoup de place sur la page. Votre visiteur peut faire défiler tout le texte dans la boite. Placez la balise suivante dans le body de votre html, à chaque endroit où vous voulez qu'une boîte apparaisse, vous pouvez changer les attributs "rows" et "cols" pour donner la taille que vous désirez : <form><textarea rows="5" cols="20" >Placez votre texte ici</textarea></form>

Ce qui donnera :

LE FORMULAIRE :

La balise <FORM>

ACTION (URL)

METHOD (Méthode de transmission des données)

• post les données sont transmises selon le standard établi par le serveur. Si l'attribut action renforme une URL du type mailto:, ce sera l'unique valeur valide.
• get les données sont transmises à la suite de l'URL définit par l'attribut action. Vous avez certainement déjà été confronté à cette méthode lors de vos nombreux surfs.

NAME (Identification du formulaire)

La balise <INPUT>

• type pour définir le type d'élément à créer. La valeur à utiliser doit&eacirc;tre :
  • text : zone de texte
  • password : zone de texte. Les caractères apparaissent sous formes d'étoiles à l'écran.
  • checkbox : case à cocher.
  • radio : bouton radio ou bouton d'option. L'attribut value doit obligatoirement&eacirc;tre utilisés.
  • submit : bouton de commande. Le formulaire est transmis lors de son appui.
  • image : idem à submit, mais une image peut illustrer le bouton.
  • reset : bouton de commande. Toutes les données du formulaire sont remises à l'état initial lors de son action.
  • hidden : élément masqué, mais existant bien. C'est à dire que les attributs name et value sont pris en compte lors du traitement du formulaire.
  • file : création d'une zone de texte et d'un bouton parcourir. En cliquant sur le bouton, une boite de dialogue d'ouverture de fichier s'ouvre. La sélection d'un fichier entraîne l'inscription de son nom dans la zone de texte.
• name pour donner le nom à l'élément, de façon à identifier la donnnée renvoyée par le formulaire lors du traitement.
• value définit l'état inital de l'élément. Sa présence est obligatoire pour les boutons d'option.
• checked permet, lors de l'utilisation de case à cocher ou de boutons d'option, de les cocher initialement. C'est un attribut booléan (il se suffit à lui même).
• disabled désactive un élément. Attention! L'élément est toujours affiché, mais il est désactivé, ce qui empêche son utilisation. C'est un attribut booléan.
• readonly peut &eacirc;tre uniquement associé à une zone de texte. Il empêche la modification de la valeur.
• size définit la largeur de l'élément, en pixels, sauf pour les zone de texte oû la valeur représente le nombre de caractères.
• maxlength ne concerne que les zones de texte. Il précise le nombre de caractères pris en compte.

<tr>
<td valign="top">
<pre>
Vos impressions sur ce site :
<input type="radio" name="Impression" value="Très bien" checked>Très bien
<input type="radio" name="Impression" value="Moyen">Moyen
<input type="radio" name="Impression" value="Nul" disabled>Nul
</pre>
</td>
</tr>
</table>

<pre>
Vos rubriques préférées sur Sitopolis :
<input type="checkbox" name="Rubrique" value="Webmasters">La rubrique Webmasters
<input type="checkbox" name="Rubrique" value="L'annuaire">L'annuaire
<input type="checkbox" name="Rubrique" value="Les partenaires">Les partenaires
<input type="checkbox" name="Rubrique" value="Les derniers sites">Les derniers sites
<input type="checkbox" name="Rubrique" value="Aucune...">Aucune...

<input type="submit" value="envoyer"><input type="reset" value="Remise à zéro">
</pre>
</form>

Login        : 
E-Mail       : 
Mot de passe : 

Fichier        : 

Vos impressions sur ce site :
     Très bien
     Moyen
     Nul

Vos rubriques préférées sur Sitopolis :
   La rubrique Webmasters
   L'annuaire
   Les partenaires
   Les derniers sites
   Aucune...

LES BALISES <SELECT> ET <OPTION> (liste déroulante)

• name
• size
• disabled

La balise <TEXTAREA> (Zone de texte)

• name
• disabled
• readonly

• rows spécifie le nombre de lignes de la zone de texte.
• cols définie le nombre de colonnes.

Un exemple de page peut vous aider sur Sitopolis. Téléchargez le kit et ouvrez index.htm avec le Bloc-Notes... Vous verrez comment une page s'organise. De plus, vous pourrez vous inspirer de ce kit car il est gratuit ;o)

Voyons plus en détail ce que doit comporter une page html :

Comment s'organise une page html ?

<html>
<head>
<!--Ici se trouveront toutes les metas à mettre pour faire connaître votre site (le titre, la description, les mots clés...). Rendez-vous sur Sitopolis pour bien les remplir et faites un copier coller vers vos pages.
Voici un exemple de méta-tags à mettre entre <head> et </head> : -->
<title>Votre nom de site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="fr">
<meta name="Description" content="Ici se trouve la description de votre site">
<meta name="Keywords" content="les mots clés de votre site, monsite, mon site, mes sites">
<meta name="Author" content="votre nom">
<meta name="Identifier-URL" content="http://votresite.com">
<meta name="Revisit-after" content="7">
<meta name="Robots" content="all">
</head>

<body>
<!--Comment changer la couleur d'un lien texte ? Vous pouvez changer la couleur de vos liens, habituellement le bleu et le violet, en n'importe quelle autre couleur. Vous pouvez changer la couleur du lien, la couleur du #lien actif (alink) et la couleur du lien visité (vlink) dans le body... c'est-à-dire mettre à la place du <body> ci-dessus :
<body bgcolor="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000">
Ceci affichera le fond de page tout noir (bgcolor="#000000"), la couleur du texte noire et les liens noirs aussi...

Ici se trouvera le corps de votre page. Tout ce qui apparaîtra sur votre site apparaîtra ici = tout ce qui est entre <body> et </body>.-->
</body>
</html>

NB : Quand vous ouvrez une balise, par exemple "<head>", il faut toujours la refermer un peu plus bas "</head>" et toujours dans l'ordre...

Construire votre site avec un logiciel :

L'idéal et le meilleur selon moi est Macromédia DreamWeaver mais il est payant... FrontPage est aussi un bon logiciel pour créer un site internet. Si vous avez un des deux, travaillez dessus et chercher sur Google des explications pour pouvoir créer un site internet dessus.

Vous pouvez aussi vous servir d'un logiciel comme Nvu. Le logiciel Nvu est GRATUIT, en français, et très facile d'utilisation. Vous pouvez le trouver sur le site Telecharger.com en tapant simplement dans la zone de recherche à gauche "Nvu". Après installation du programme, faire votre 1ere page dans la grande zone blanche. écrivez votre texte, placez des images, et des liens. Puis enregistrez votre page, et faites-en d'autres.
Autre logiciel de création de site : Netlor Studio. Il est gratuit dans sa version de base, et vous pouvez le télécharger ICI.

Quelques conseils de base pour votre site :
1) Faites simple.
2) Ne mettez pas des images de taille trop importante.
3) évitez la musique qui se lance quand on arrive sur votre site.
4) Limitez tous les gadgets en Javascript qui ne servent à rien et qui alourdissent la page.
5) Nommez vos pages, quand vous les enregistrez, avec un nom de fichier le plus simple possible, et sans espace dans les noms de fichier (valable également pour les images). Généralement, il est nécessaire que votre page d'accueil soit enregistrée sous le nom "index.html". C'est généralement imposé pour permettre au serveur de savoir quelle page ouvrir en premier.