sans rien dépenser de plus que l'abonnement à un FAI (c'est obligatoire) en utilisant la fonctionnalité
"pages perso".A ce niveau nous avons 3 possibilités:
Autant le dire tout de suite chez free les "pages perso "c'est pas trop leur truc; j'ai galéré un peu pour
arriver à mettre en place ce site; le service assistance par mail est totalement nul.Personne ne vous répond
dans la semaine qui suit ,quand vous demandez de l'aide ...J'ai bien obtenu une réponse mais pratiquement deux mois après;
quand à l'assistance téléphonique , elle est aussi nulle ,car les
interlocuteurs ne sont pas formés pour répondre à vos questions dans ce domaine bien précis ...A un moment donné , j'ai même pensé quitter Free pour un autre opérateur, lorsque je me suis rendu compte que tout est expliqué de A à Z sur leur site; suffit de lire, de bien lire.
A partir de là ce fut presque un jeu d'enfant. Aussi pour vous éviter "cette inaptitude à ne pas savoir lire ce qui est écrit noir sur blanc ", l'auteur se propose de vous guider de telle manière à gagner du temps ,car si il est vrai que tout est expliqué , il faut cependant "fouiller un peu" pour obtenir la bonne information.
Cerise sur le gâteau ,Free a même prévu une petite interface qui vous permet de télécharger vos fichiers sur votre hébergeur chéri, sans vous tracasser à installer un logiciel capable d'assurer cette fonctionnalité. Certes c'est très basique , mais personnellement je trouve que c'est largement suffisant , après avec l'expérience , vous pourrez passer de la "2cv à la Ferrari" , mais là c'est vous qui voyez.(j'aime bien placer cette formule , vous le remarquerez très vite) .Pour ma part j'ai comme navigateur par défaut FirefoxMozilla que je trouve très très bien , mon IE ayant rendu l'âme depuis longtemps et j'utilise aussi comme logiciel de transfert "FileZilla" qui est associé à firefox en module complémentaire à télécharger , simple et efficace.
Tout d'abord un lien à suivre absolument avant toute chose, très utile très clair , consignes à lire presque jusque la fin ...suivi d'un autre tout aussi utile. Quand vous serez arrivé à ce stade (voir image de droite) , je vous propose de ne pas aller plus loin et de vous consacrer à ce qui sera votre travail principal à savoir construire votre site (en attendant que votre page perso soit activée).
Construction du site à partir de l'OS Windows (de XP jusque Windows 10)
Dès ce moment il faut que vous ayez dans la tête que vous aller "programmer" en utilisant un "langage" que l'on appelle html et css ce qui se traduira par l'élaboration de fichiers html et css qui seront obligatoirement placer dans un dossier que l'on peut appeler "monsiteperso" par exemple. Ce dossier peut être situé sur votre bureau ou ailleurs , c'est vous qui voyez . Quand tout sera terminé ce dossier devra être transféré chez votre hébergeur chéri qui vous a réservé un espace perso de 1Gb.Mais chaque chose en son temps.Pour programmer en html et css , il vous suffit d'utiliser tout simplement le bloc note de Windows , de taper des lignes de codes que votre navigateur préféré interprétera et mettra en page . Cependant pour faciliter la saisie de ces lignes de code , je vous conseille vivement d'utiliser un petit logiciel que l'on appelle "Notepad ++" que vous pouvez télécharger sur le site;il est totalement gratuit. ici Pour mieux visualiser la démarche , voir le tableau de gauche qui résume le processus de création de votre site.
Pour résumer, vous créez sur votre disque dur un dossier portant le nom que vous voulez.Dedans vous placez des fichiers correspondant aux titres de vos pages de votre site ayant comme suffixe .html et .css --> On aura ainsi aaaaaaa.html et bbbbbbb .css.étroitement lié. Ces fichiers sont donc enregistrés sur votre disqe dur. Ensuite vous utilisez FileZilla pour transférer vos fichiers ainsi créés de votre DD vers votre hébergeur FREE.(Voir l'installation et l'utilisation de FileZilla sur le Net). Le détail de la démarche se trouve ci-dessous.
1° Programmation html et css : préalable.
La première chose à faire ,
le dossier sur votre bureau ( ou ailleurs , c'est vous qui ...) Clique droit sur le bureau , nouveau dossier que vous renommez en "monsiteperso"
Deuxième étape installer Notepad++ et créer 2 fichiers
Exécuter le logiciel.
Une page blanche se présente à vous ; cliquer sur fichier en haut
à gauche,puis sur nouveau ,dans le menu déroulant; un onglet " new1" apparait avec sa page blanche;allez de
nouveau sur
fichier et choisissez Enregister Sous," new1" apparait ; remplacer le par "accueil.html" par exemple et
enregistrer le dans le
dossier "monsitepeso" qui se trouve sur le votre bureau de votre ordi. Sur votre site, ce fichier
sera votre page d'accueil que vous renommerez plus tard
obligatoirement index.html.Répétez la même opération pour créer un autre fichier " new2"
que vous renommerez "accueil.css" .Vous avez ainsi sur votre
écran la page de Notepad++ avec deux onglets placés côte à côte ayant pour nom respectif : accueil.html et
accueil.css enregistrer dans votre dossier
"monsiteperso".A l'intérieur de celui-ci, profitez en pour placer un autre dossier appelé "images"( en minuscule)
(clique droit ; nouveau ...) qui vous servira à
placer toutes vos images que vous ne manquerez pas d'exposer sur vote site pour illustrer vos pages.
Faites également un
dossier" videos "(minuscule et sans accent) de la même manière. Si tout s'est bien passé vous devriez avoir sur votre écran quelquechose qui
ressemble à ça .Maintenant tout est prêt pour PROGRAMMER en html et CSS.NB Les deux fichiers "images"et "videos" peuvent être écrits en MAJUSCULE mais certains navigateurs ne tolèrent pas les majuscules dans les noms de fichiers.
2°Création et sauvegarde des fichiers
Revenons maintenant à Notepad ++. Si vous avez fermé entretemps toutes les fenêtres, pas de panique ouvrez
le logiciel et cliquez sur ouvrir , choisissez accueil.html et accueil.css et vous obtenez vos deux fichiers
côte à côte comme ceci.Lorsque vous programmez en html5 ( c'est certainement la dernière version qu'utilse votre navigateur préféré), vous allez taper du code sous forme de mots , de phrase et de paragraphes etc ...agencés de telle manière à constituer la charpente, l'ossature ,le squelette de votre page html; le langage css ,un peu plus concis constituera la forme à donner à ce que vous avez écrit ,à habiller ce squelette, d'où deux fichiers distincts mais étroitement liés.
Pour cela nous allons utiliser ce que l'on appelle des balises;elles sont très nombreuses et utilisent une syntaxe très précises que nous allons voir maintenant, sans avoir préalablement défini la structure d'une page html comme le montre la figure ci-contre.
Head est l'entête de votre page; Nav la barre de navigation pour accéder à d'autres pages , Body , le corps de votre page et éventuellement Foot , pied de page et Aside. Je dis éventuellement car avec les balises Head, Nave et Body , vous avez là dèjà de quoi donner une fière allure à votre site.
Une balise se détermine par l'écriture suivante < head > on ouvre la balise head , < / head > on ferme la balise head et entre deux on y met d'autres balises,par exemple la balise < nav >< / nav > peut se situer à l'intérieur de la balise body. Bien comprendre que les balises ne peuvent pas se chevaucher l'une ,l'autre mais s'imbriquées l'une dans l'autre < body> ..... < nav > ......< / nav >.....< / body > un peu comme les poupées gigognes
Ci dessous une liste de balises indispensables ( avec leurs fonctionnalités )pour construire un site digne de ce nom .Par la suite pour l'enrichir vous en utiliserez certainement d'autres que vous trouverez facilement sur le net. Dans l'entête HEAD vous devrez placer obligatoirement ces deux lignes:
META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"
link rel="stylesheet" href="accueil.css" (accueil.css étant le nom du fichier que vous avez créé précédemment qui est ainsi lié au fichier html)