Previous page

Faire un site internet

PS: J'ai édité l'article, j'hésitais entre être «synthétique et facile à lire» ou bien «complet et complexe» et bien j'ai choisi «synthétique et complet». Grâce au système de spoiler et aux nombreux liens que je vous donne, vous devriez avoir assez de contenu pour développer le sujet par la suite.

Et voilà ! J’ai mon propre site internet ! J’ai déjà écrit plusieurs brouillons pour ces articles mais j’hésite entre être « synthétique et facile à lire » ou bien « complet et complexe », dilemme. Pour un premier article restons simple, je vais vous expliquer comment faire un site internet avec un petit retour d’expérience.
En espérant que la simplicité vous motive à votre tour !

Avant-Propos:
Si vous lisez ce qui suit et que vous êtes réellement intéressé, je ne peux que vous conseiller d’avoir une certaine « culture générale » dans ce domaine, à savoir:
  • Baladez-vous sur des sites web intéressant, observez la structure, soyez critique, regardez le code source, prenez des notes (Qu’est-ce qui vous plait, qu’est-ce que vous changeriez ?).
    Un bon début: Inspiration / Inspiration.
  • Apprenez un minimum le html5/css3. Pas besoin d’être un expert, si vous pouvez lire et comprendre une page html c'est le principal.
    Petit exercice:
    <html>
       <head>
          <link rel="stylesheet" href="assets/css/main.css" />
       </head>
       <body>
          <div id="main">
             <section>
                <h1 style="text-align:center; ; border-bottom: 2px solid #999">
                Text1
                </h1>
                <p> Text2: <br>
                Text3
                </p>
             </section>
          </div>
       </body>
    </html>
    Si vous comprenez qu'il s'agit d'une section avec un titre centré, suivit d'une ligne de 2px grise, puis d'un paragraphe sur deux lignes alors c'est bon !

  1. Tout d’abord, à quoi sert un site internet ?

    • Etre visible et mettre en avant votre côté professionnel sur internet. Préférez-vous qu’un client tombe sur votre site web ou bien sur votre page facebook ?
    • Montrer votre domaine d’activité, vos compétences, votre motivation.
    • Avoir une adresse mail professionnel : contact @votrenom.com et éviter le hotmail, gmail,…
    • Pouvoir être contacté par un éventuel client intéressé.
  2. Il existe selon moi trois niveaux de site web
    • Vous n’y connaissez rien en html/css
      La vcard, autrement dit, la carte d’identité virtuelle.
      C'est une simple page qui va mettre à disposition vos liens: cv, portfolio,...
      - Trouvez un template, téléchargez-le et ouvrez le fichier "index.html" dans un éditeur de texte (dreamweaver, nvu, notepad,...).
      - Cherchez les différentes lignes que je vous ai décrites sur l'image et remplacez-les par vos données personnelles.
      - Pour modifier l'image de fond je vous conseille de simplement trouver l'image dans le dossier téléchargé et de la remplacer à l'identique (nom, taille) par celle que vous souhaitez.

      Astuce: Pour afficher les icones facebook, twitter, linkedin, cv:
      - Cliquer sur ce lien: Font Awesome
      - Choisissez l'icône qui vous plait et cliquer dessus
      - Récupérez le lien ("fa fa-....")
      - Remplacez-le dans le index.html
      ex: fa-facebook, fa-linkedin, fa-at (mail), fa-bookmark (portfolio).

      Durée: entre 30 minutes et 1 semaine.
      Liste de templates.
    • Vous vous y connaissez un minimum en html5/css3
      Vous vous basez sur le template d'un site web/template et codez "à la main" sur un logiciel comme dreamweaver.
      Je vous conseille un site "one page" (scrolling) où la structure est assez simple à comprendre et où le rendu est efficace.

      Vous avez probablement déjà vu ce type de site chez les "jeunes entreprises souriantes": Exemple.
      Vous pouvez commencer par étudier ce lien, il va détailler tout le code html, section par section et vous permettra de voir plus clair lorsque vous travaillerez sur votre template.
      N'hésitez pas à enlever/ajouter des blocs de code, cherchez des tutos sympas pour faire des animations, rendre votre site vivant.
      C'est la méthode que j'ai utilisé, le temps de réalisation dépendra de vos attentes et de votre motivation.
      Pour vous donner une idée j'ai mis 2 à 3 semaines pour faire ce site web.
      Durée: Entre 1 semaine et 1 mois.
      Liste de templates
    • Vous êtes un Web Designer:
      Dans ce cas vous en connaissez plus que moi, votre site web sera unique et vous ressemblera: Top 20 One page websites.
      Une option plus qu'intéressante est de payer un webdesigner pour faire votre site internet, laissons les pro faire ce qu'ils savent faire de mieux.
      Dans ce cas vous pouvez peut-être commencer à faire une maquette sur Photoshop: Lien 1 et 2.
    Pour résumer, si vous vous trouvez dans l'une des deux premières catégories je vous conseille donc de trouver un template. Cela vous évitera de devoir tout écrire et vous fera gagner beaucoup de temps.
    Je peux vous donner quelques conseils:
    - Travaillez sur un bon logiciel d'édition (j'utilise dreamweaver): vous pourrez facilement passer entre les feuilles html et css, écrire du texte automatiquement, bref cela vous simplifiera la tâche.
    - Ouvrez votre fichier html sur dreamweaver et sur internet (Firefox), puis jonglez entre les deux: sauvegardez sur dreamweaver, actualisez la page internet et voyez les modifications que vous avez faites.

    Je vous conseille donc de chercher des tutos, des conseils sur internet:
    Tutoriel complet / Style guide / Balises html / Top Free Template / Responsive?
    Un petit mémo, pas besoin de tout connaitre: En rouge ceux que j'ai déjà utilisé.

    Voilà, vous avez votre site internet de prêt... Et maintenant ?

  3. Maintenant, il va falloir mettre votre site en ligne, grâce à deux outils essentiels:
  4. Voilà, sans être rentré dans les détails, j'espère que vous aurez une meilleure vue d'ensemble pour créer votre propre site.
    Créer un site internet est un sujet très vaste, il existe une multitude de moyens, je ne vous ai présenté que ma méthode. D'autres solutions s'offre à vous cela va du langage (Jquery, php,...) jusqu'à l'utilisation d'un CMS: wordpress, prestashop,...
    N'hésitez pas à me contacter si vous souhaitez plus de renseignements ou si vous bloquez à une étape du processus.

    À bientôt.

Published
07th October 2015
Author
Cedric Fettouche

Vous avez aimé cet article ? Alors partagez-le avec vos amis en cliquant sur les boutons ci-dessous :

Twitter Facebook Google Plus Linkedin email