Blogue | developpement

Créer un site web en 5 minutes, impossible?

Écrit par Maxime Nadeau

07 sept. 2016
5 min.

Contrairement à ce qu’on pourrait croire, il est très possible de créer un site web et 5 minutes. C’est même plutôt facile quand on a les bons outils pour le faire. Et par bons outils, je parle ici d’un « prof » qui vous guidera de manière efficace (moi !) et d’un logiciel tout simple que vous possédez sans le savoir. Aucune autre connaissance préalable n’est requise à ce stade. Et pour vous prouver à quel point c’est facile, je vous montre comment créer une page web pour une recette de cigares au chou en 5 petites étapes.

Commencer par la base

Débutez la programmation de votre site web en ouvrant un éditeur de texte de base comme notepad (si vous êtes sur PC) ou textEdit (si vous travaillez sur mac).

Créez un nouveau dossier sur votre bureau intitulé « Mon site web ». Dans ce dossier, créez un nouveau fichier au nom de : « index.html ».

Les fichiers HTML sont la base de tout site web, ils permettent de structurer votre information et d’afficher vos images et vos textes.

Créer un document HTML

Pour que votre navigateur comprenne qu’il s’agit d’un fichier html, vous devez indiquer qu’il s’agit bien d’un document de ce type. Saisissez donc, sur la première ligne, la balise suivante :

< ! DOCTYPE html>

Indiquez ensuite le début et la fin du document html avec la balise ouvrante et fermante html :

< ! DOCTYPE html>

<html>

</html>

Ajouter un titre et une description au site

Lorsque vous faites une recherche sur Google, les résultats affichent un titre (en bleu) et une description (en noir). Pour que ces données apparaissent, vos documents html doivent indiquer aux navigateurs le nom et la description de votre site web. Ces données seront également lues par les moteurs de recherche comme Google, qui s’en serviront pour indexer votre page web.

Pour le faire, définissez le « head » de votre document html et créez vos balises titre et description en inscrivant les balises suivantes dans votre document :

< ! DOCTYPE html>

<html>

<head>

<title>Ma recette de cigares au chou</title>

        <meta name= » description » content= » La meilleure recette de cigares au chou du monde, c’est celle de ma grand-mère. »/>

</head>

</html>

Attention ! La balise « meta » est autofermante. Vous n’avez donc pas à créer un </meta> puisque toute l’information nécessaire au fonctionnement est contenue dans la balise.

Finaliser le contenu

Votre première page web possède maintenant un titre et une description ! Il ne reste qu’à lui donner un peu corps et de contenu avec la balise body, qui contient tout le contenu textuel et visuel que l’utilisateur verra et consultera dans son navigateur. Voilà donc comment faire :

< ! DOCTYPE html>

<html>

<head>

<title>Ma recette de cigares au chou</title>

        <meta name= » description » content= » La meilleure recette de cigares au chou du monde, c’est celle de ma grand-mère. »/>

</head>

<body>

</body>

</html>

Vous voulez mettre un titre ou un sous-titre dans votre contenu pour mieux le diviser ? Facile ! Vous n’avez qu’à ajouter la balise h1, qui signifie « heading size 1 ». Il existe en fait 6 différentes tailles de base pour les titres et sous-titres (de h1 à h6), mais il est recommandé de n’avoir qu’un seul h1 par page.

Consulter le site web dans un navigateur

Vous pouvez maintenant ouvrir votre index.html en utilisant votre navigateur, en glissant simplement le fichier sur l’icône de ce dernier. Vous devriez voir une page semblable à celle-ci :

Voilà ! Il ne reste qu’à ajouter du contenu à votre recette (les ingrédients, les étapes et des images !) pour que celle-ci soit complète.

À vos fourneaux !

Écrit par

Maxime Nadeau

« Designer graphique de formation, je possède 6 ans d’expérience en direction artistique et en développement de site web. Fini les maquettes graphiques dans Photoshop, la phase de design se fait directement en programmation, ce qui permet de réduire le temps de développement d’un projet et d’améliorer la qualité du design. »

Associé - Création web | SUDO— agence numérique

Vous n'avez encore rien lu