La création d’un site Web à partir de zéro peut sembler être une tâche intimidante pour la plupart des gens, mais c’est en fait très simple. Une fois que vous aurez pris le coup de main, la création de votre site sera vraiment facile et amusante !
Ce tutoriel part du principe que vous ne connaissez absolument rien à la conception de pages Web et vous guide à travers toutes les étapes de la création d’une page Web d’aspect professionnel en utilisant uniquement des composants de base. Une fois que vous aurez appris à assembler ces éléments, vous pourrez créer un site Web de qualité en un rien de temps !
Nous commencerons par les éléments de base du langage HTML pour arriver à des structures plus complexes comme les tableaux et les formulaires. Nous verrons même comment ajouter des images et des liens avant de terminer. À la fin de ce tutoriel, vous aurez une bonne compréhension de ce qu’il faut pour créer une page Web et vous saurez également comment gérer le contenu de votre site à l’aide des feuilles de style en cascade (CSS). Est-ce suffisant pour une journée ? Vous êtes prêt ? Alors, commençons !
Qu’est-ce que le HTML ?
HTML est l’abréviation de HyperText Markup Language et est le langage utilisé par les navigateurs web pour rendre les pages web. Il indique au navigateur comment une page doit être affichée et ce qui doit être affiché sur la page.
Les documents HTML portent l’extension de fichier .html, mais vous le saviez déjà, n’est-ce pas ? 😉 ..
Qu’est-ce que CSS ?
CSS est l’abréviation de Cascading Style Sheets (feuilles de style en cascade) et spécifie comment les éléments HTML doivent être présentés sur votre site. Le document CSS porte l’extension de fichier .css et contient des règles de style non seulement pour les éléments HTML, mais aussi pour les liens, les tableaux et même les images. Ces styles peuvent être réutilisés dans l’ensemble de votre site, de sorte que vous ne devez définir un style qu’une seule fois !
Comment créer une page Web ?
N’importe quel éditeur de texte fera parfaitement l’affaire, mais les utilisateurs avancés préféreront peut-être utiliser le logiciel dans leur environnement de développement web.
J’utiliserai l’éditeur de fichiers fourni par Windows, mais vous pouvez également télécharger gratuitement Notepad++, qui offre une coloration syntaxique et d’autres fonctions intéressantes qui vous faciliteront grandement la vie. Si vous utilisez OSX ou Linux, TextEdit devrait également faire l’affaire. Mais n’utilisez pas Word 😉 .
Vous devez commencer par créer un nouveau document avec l’extension .html. Vous pouvez le faire soit à partir du menu de votre éditeur de texte, soit en enregistrant simplement un document vide avec cette extension. Enregistrez-le sur votre bureau ou à l’endroit qui vous convient le mieux.
Ouvrez maintenant le fichier dans votre navigateur (double-cliquez simplement dessus). Le fait qu’il affiche quelque chose dépend de la façon dont il est configuré . Si rien ne s’affiche, vous avez probablement fait une erreur de frappe quelque part. Utilisez le menu Affichage > Source du navigateur pour trouver ce qui ne va pas.
Lorsque votre page Web s’affiche correctement dans la fenêtre du navigateur, enregistrez à nouveau votre fichier sous le même nom, mais avec l’extension .htm. Ouvrez-le ensuite dans votre navigateur pour voir à quoi il ressemble maintenant qu’il a été converti au format HTML.
L’étape suivante consiste à ajouter à votre fichier quelques balises HTML de base et des éléments de structure tels que des titres et des paragraphes. Encore une fois, cela fonctionne exactement comme vous en avez l’habitude (et si vous n’êtes pas du tout familier avec le HTML, ce sera totalement nouveau).