Vous êtes fasciné par l'idée d'avoir votre propre espace sur Internet où vous pouvez vous exprimer au mieux, alors vous envisagez sérieusement d'apprendre à créer un site web HTML qui vous permette de libérer votre créativité, de partager vos idées ou, pourquoi pas, votre projet, avec tous ceux qui vous sont chers. Le problème, c'est que vous n'avez pas la moindre idée de la façon de procéder. Vous cherchez donc un guide pour vous aider à faire vos premiers pas dans le monde des langages Web.
Dans ce guide, vous allez découvrir toutes les instructions nécessaires sur le langage HTML et sur la façon de
créer un site Web. Ne vous inquiétez pas si vous n'êtes pas très familier avec le sujet : les concepts exposés sont faciles à comprendre.
Informations préliminaires
Avant de passer au code et de découvrir comment créer des sites Web en HTML, ci-dessous quelques informations sur le langage et les technologies que vous devrez aborder pour atteindre votre objectif.
Pour commencer, le mot HTML est l'abréviation de HyperText Markup Language. À tort, le HTML n'est pas du tout un langage de programmation, puisqu'il n'est pas basé sur des flux d'actions concaténées ni sur des algorithmes : au contraire, le HTML fait partie des langages de balisage dits déclaratifs, c'est-à-dire de la catégorie des langages qui balisent les éléments et spécifient l'ordre dans lequel ils apparaissent.
En particulier, la tâche de HTML est d'indiquer au programme qui va interpréter le code (par exemple le navigateur) le type d'éléments et le mode de disposition de ces derniers à l'intérieur d'une page : ceci est fait en enfermant l'élément en question entre deux balises, c'est-à-dire entre deux marqueurs spéciaux identifiés par des termes similaires-anglophones inclus entre des crochets angulaires (par exemple, est la balise HTML qui identifie une image).
Au moment où j'écris ce guide, la version la plus récente du langage HTML est le HTML 5 : contrairement à ce qui se passait il y a quelques années encore, le HTML 5 est capable non seulement de définir la structure de la page, mais aussi de gérer de manière absolument autonome de nombreux types de contenus multimédias (par exemple, des flux audio, des flux vidéo et des éléments interactifs) et de contrôler certains aspects du dispositif depuis lequel vous la visualisez (par exemple, le pourcentage de luminosité de l'écran), éliminant ainsi la nécessité d'intégrer dans la page elle-même des composants tels que des éléments Flash ou des applets Java.
Pour cette raison, HTML 5 est également largement utilisé dans le développement d'applications dédiées aux smartphones, tablettes et autres appareils connectés, généralement dépourvus de support pour ces technologies "additionnelles".
En général, une page créée uniquement avec du code HTML est définie comme une page statique, c'est-à-dire capable de présenter toujours le même contenu et, dans la plupart des cas, non modifiable par les conditions actuelles de l'environnement dans lequel elle est affichée ni par les actions que l'utilisateur y effectue.
Cependant, comme vous le découvrirez en lisant ce guide, il existe de nombreux langages qui se croisent avec le HTML pour construire des sites web plus ou moins complexes, dynamiques et riches en contenu : deux des langages qui méritent d'être mentionnés sont le CSS, qui définit le style des éléments qui composent les pages du site web, et le JavaScript, véritable langage de programmation qui permet de manipuler dynamiquement la page et de la rendre interactive, si nécessaire.
Parties d'une page Web HTML
Maintenant que vous comprenez la nature du HTML, il est temps d'étudier la composition d'une page écrite à l'aide de ce langage. Avant d'aller plus loin, il est toutefois obligatoire de faire une distinction plus que nécessaire : le code d'une page HTML est écrit par le programmeur à l'intérieur d'un simple fichier texte, qui peut être édité aussi bien avec de simples programmes de manipulation de texte (tels que Notepad et WordPad Windows ou TextEdit macOS) qu'à travers des éditeurs beaucoup plus complexes (tels que Adobe Dreamweaver), tandis que le contenu d'une page HTML est ce qui est affiché par le navigateur (images, texte, formulaires, etc.) lorsque vous "naviguez" sur le site Internet.
Pour cette raison, il est possible de dire que le navigateur est un véritable interprète HTML, c'est-à-dire un programme capable de suivre les instructions du code HTML afin d'afficher à l'écran le contenu de la page qu'il va structurer. Dans des conditions normales, le code HTML n'est pas visible pendant la navigation, puisque, comme nous l'avons déjà mentionné, le navigateur interprète les informations et dispose les éléments de la page affichée en fonction de celles-ci.
Cela dit, il est temps d'examiner de plus près à quoi ressemble une page de code HTML. Comme déjà mentionné ci-dessus, les éléments de la page sont enfermés entre deux balises ou marqueurs, une balise de début et une balise de fin, pouvant accepter ou non des paramètres selon le type d'élément qu'ils définissent : la balise de début est composée d'un mot placé entre deux crochets, tandis que le marqueur de fin place la barre oblique ou le symbole "/" dans le crochet gauche (par exemple, "/").
Les paramètres sont spécifiés à l'intérieur de la balise start avec une formule similaire à parameter="value" : par exemple, pour définir le chemin d'accès à une image à insérer, vous pouvez utiliser le paramètre src="address" (par exemple )
En général, une page HTML n'est rien d'autre qu'un fichier texte portant l'extension .html, par exemple CiaoMondo.html : à l'intérieur, des balises sont spécifiées pour définir les éléments qui la composent. En particulier, il y a certaines balises qui doivent être présentes dans un fichier .html.
Créer un site web HTML de base
Tout est clair jusqu'à présent ? Bonne nouvelle, car avec ces connaissances, vous pouvez déjà créer votre premier site web en HTML ! Mais avant de poursuivre, voici quelques informations supplémentaires sur les balises "essentielles" à insérer dans les fichiers .
A ce stade, il est temps de mettre en pratique toutes les connaissances acquises ! Donc, sans plus attendre, ouvrez l'éditeur de texte inclus dans votre système d'exploitation (le Bloc-notes de Windows ou TextEdit pour macOS, par exemple) et tapez le code suivant.
Une fois l'insertion terminée, enregistrez le fichier en utilisant l'extension .html (par exemple PrimoSito.html). À ce stade, il ne vous reste plus qu'à double-cliquer sur le fichier que vous venez d'enregistrer pour l'afficher dans votre navigateur : félicitations, vous venez de créer votre première page web HTML ! N'oubliez pas que vous pouvez à tout moment visualiser le code de la page en cliquant sur un point quelconque de celle-ci et en sélectionnant Afficher la source de la page dans le menu contextuel proposé par le navigateur.
Grâce à cette technique, vous pourrez créer une série de pages HTML qui ne pourront être visualisées que sur l'ordinateur que vous utilisez : pour que votre site soit accessible depuis Internet, vous devrez acheter un espace d'hébergement qui pourra accueillir ses pages et, éventuellement, un domaine associé.
La feuille de style
Vous vous demandez sûrement sur comment vous pouvez affiner le contenu des pages de votre site web, par exemple en définissant une couleur d'arrière-plan, un effet sur les liens au passage de la souris, un formatage spécifique pour chaque type de "conteneur", etc.
Comme déjà expliqué au début, même si le HTML est capable de gérer le formatage de base des éléments, dans ce cas un deuxième langage Web vient à l'aide : le CSS, qui sert à spécifier les règles de disposition, de formatage et de décoration des éléments. Dans ce cas, il s'agit d'un langage à la syntaxe très différente de celle du HTML, qui nous permet de définir spécifiquement le style des éléments de la page.
Le code CSS peut être déclaré de deux façons différentes : la première, utile lorsque les éléments à définir sont limités à une seule page du site, consiste à l'enfermer dans la balise spécifié dans la section.
La deuxième méthode de déclaration du code CSS, extrêmement pratique lorsqu'il doit être partagé par plusieurs pages d'un même site, consiste à le spécifier dans un fichier texte avec l'extension .css, que vous pouvez importer dans le code HTML à l'aide de la balise (par exemple) dans la section de la page.
Pour vous donner un bref exemple, voici le contenu d'une feuille de style CSS qui permet de colorer et de formater tous les éléments appartenant à la classe de couleur : en particulier, le texte sera coloré en rouge et recouvert d'un trait, l'espacement des caractères sera porté à 5 pixels et le fond sera gris.
Pour vérifier immédiatement que la feuille de style fonctionne, collez le code ci-dessus dans un fichier texte brut et enregistrez-le sous le nom de style.css dans le même dossier que celui où vous avez enregistré la page HTML que vous avez créée précédemment. À ce stade, pour intégrer la feuille, il suffit d'ouvrir la page susmentionnée en mode édition (en cliquant avec le bouton droit de la souris sur le fichier .html, en sélectionnant Ouvrir avec dans le menu contextuel et en choisissant Notepad/TextEdit dans la liste affichée à l'écran), d'insérer la chaîne de texte juste en dessous de la balise et enregistrez le fichier comme d'habitude.
Une fois cette opération terminée, double-cliquez sur le fichier html que vous venez de modifier et... appréciez le résultat !
Cadre e CMS
Le HTML est un langage extrêmement puissant qui peut donner forme, avec CSS et JavaScript, même à des projets très complexes. Aujourd'hui, les pages Web doivent être conçues en tenant compte de différents appareils, avec des caractéristiques différentes (par exemple, la résolution de l'écran) et dans différents modes de lecture : c'est la raison pour laquelle, de plus en plus souvent, les programmeurs Web ont recours à un ensemble d'outils "préemballés" pour concevoir le "squelette" de leur site Web : ces outils sont appelés "frameworks".
Dans ce cas, un framework n'est rien d'autre qu'un ensemble de pages HTML, de JavaScript et de feuilles de style "préemballées", qui aident le programmeur à structurer en détail la structure de base du site Web que vous allez créer : par exemple, un framework peut contenir des fichiers permettant de "différencier" l'affichage des pages en fonction du navigateur, de compresser le contenu pour améliorer la vitesse de téléchargement, d'offrir un certain type de graphiques et bien plus encore.
L'un des frameworks les plus utilisés actuellement est Bootstrap : il s'agit d'un framework extrêmement flexible conçu pour offrir des schémas de départ pour des projets de complexité moyenne à élevée, optimisés pour être visualisés sur différents types de dispositifs, d'écrans et de résolutions.
À ce stade, il est important de vous présenter également le concept de CMS : un système de gestion de contenu n'est rien d'autre qu'un système, écrit en langage Web, qui gère la création d'un site Web à travers un système de gestion avec une interface graphique. Les CMS, en général, sont entièrement basés sur un ou plusieurs cadres spécifiques.
En d'autres termes, le CMS est un logiciel qui permet de créer la structure d'un site web et d'en éditer le contenu, sans intervenir manuellement sur les pages et toute base de données, en quelques clics : généralement, les CMS sont mis à disposition par de nombreux sites d'hébergement pour permettre la création rapide de sites web même à ceux qui n'ont aucune expertise en matière de langages web. Parmi les CMS les plus populaires, il convient de mentionner WordPress, Drupal, Magento, Joomla et Prestashop.
Ressources utiles
Si vous êtes arrivé jusqu'ici, vous avez bien compris comment créer un site Web en HTML et vous avez toutes les bases pour créer vous-même un petit site Web. Cependant, vous vous rendrez vite compte que la puissance du HTML va bien au-delà des sujets abordés dans ce guide. C'est pourquoi, dans les lignes qui suivent, vous allez découvrir d'autres ressources utiles à consulter pour affiner vos connaissances.
HTML Guide by HTML.it : il s'agit, selon toute vraisemblance, de l'un des guides les plus complets et les plus exhaustifs disponibles sur le Net : il est divisé en sections thématiques pratiques, regorge d'exemples et, surtout, est constamment mis à jour.
W3Schools.com - promu et publié par le W3C, est un portail Web entièrement consacré au langage HTML et à toutes les technologies qui gravitent autour. La particularité de W3Schools est la possibilité d'effectuer, après la lecture de chaque leçon, plusieurs exercices d'autocontrôle pour évaluer les compétences acquises.
Amaya - est un excellent programme d'édition HTML, open source, créé et distribué par le W3C. Il s'agit d'un éditeur wysiwyg (what you see is what you get), capable de créer des sites HTML entiers, ainsi que des feuilles de style, des petits scripts et tout le reste, en les dessinant avec la souris.
Adobe Dreamweaver : il s'agit d'une solution puissante et complète pour la conception et la structure de sites Web simples ou complexes, avec des outils pour gérer le HTML, le JavaScript, le CSS, la conception graphique, etc.
HTML 5 avec CSS et JavaScript - si vous êtes un amateur de références "papier" et que vous avez l'intention de les utiliser pour apprendre les technologies Web en profondeur, vous pouvez donner une chance à ce texte : plus qu'un manuel, il s'agit d'une référence complète pour créer des sites Web complets, mais aussi des applications mobiles basées sur l'interaction entre HTML5, les feuilles de style et JavaScript.
Si vous êtes arrivé jusqu'ici, vous avez appris tout ce qu'il y a à savoir sur la programmation HTML de base. Si vous vous êtes en train dire que c'est un peu trop difficile et que vous aimeriez un système qui puisse vous guider au moins dans vos premiers pas ? Dans ce cas, créez votre premier site web en utilisant l'un des CMS gratuits, avec son espace d'hébergement associé, disponibles sur Internet : deux des plus utilisés aujourd'hui sont certainement WordPress.com et Blogger.