Comment créer un site Web HTML

Vous êtes fasciné par l'idée d'avoir votre propre espace sur Internet dans lequel vous exprimer au mieux, vous envisagez donc sérieusement d'apprendre à créer un site HTML qui vous permet de laisser libre cours à votre créativité, de partager vos idées ou, pourquoi pas, votre projet, avec tous ceux qui vous sont chers. Le problème est que vous n'avez aucune idée de la façon dont cela peut être fait, vous cherchez donc un guide pour vous aider à faire vos premiers pas dans le monde des langages Web.

Eh bien, je suis très heureux de vous informer que vous l'avez trouvé! En fait, ci-dessous, j'ai l'intention de vous fournir toutes les instructions nécessaires sur le langage HTML et sur la façon de créer un site Internet. Ne vous inquiétez pas si vous n'êtes pas très familier avec le sujet : les concepts que je vais exposer sont faciles à comprendre et je vous garantis que même ceux qui, comme vous, n'ont jamais rien fait de tel auparavant, sauront créer un petite page Web à partir de laquelle commencer, peut-être, un grand projet.

Alors qu'attendez-vous pour commencer ? Prenez quelques minutes de temps libre pour vous-même, installez-vous confortablement et lisez attentivement tout ce que j'ai à dire : je suis sûr qu'une fois que vous aurez fini de lire ce guide, vous serez surpris du résultat que vous pourrez obtenir. Ceci dit, je n'ai plus qu'à vous souhaiter bonne lecture et amusez-vous bien !

• Informations préliminaires
• Parties d'une page Web HTML
• Créer un site Web HTML de base
• La feuille de style
• Cadre et CMS
• Ressources utiles

Informations préliminaires

Avant même de mettre la main au code et de comprendre en pratique comment créer des sites Web HTML, permettez-moi de vous donner plus d'informations sur le langage et les technologies avec lesquelles vous devrez vous approcher pour atteindre votre objectif.

Pour commencer, le mot HTML est l'acronyme de HyperText Markup Language, ou langage de balisage hypertexte. Comparé à tort à ce que l'on pense communément, le HTML n'est pas du tout un langage de programmation, puisqu'il n'est basé ni sur des flux d'actions enchaînées ni sur des algorithmes : au contraire, le HTML fait partie de ce qu'on appelle langages de balisage déclaratif, c'est-à-dire cette catégorie de langues qui marquent les éléments et précisent leur ordre d'apparition.

En particulier, la tâche du HTML est d'indiquer au programme qu'il va interpréter le code (par exemple le navigateur) Pour typologie des éléments et dispositions relatives à la disposition de ce dernier au sein d'une page : cela se fait en encadrant l'élément en question entre deux Étiquette, c'est-à-dire entre deux marqueurs spéciaux identifiés par des termes de type anglais mis entre crochets (par exemple, est la balise HTML qui identifie une image).

Au moment de la rédaction de ce guide, la version la plus récente du langage HTML est HTML 5: contrairement à ce qui se passait jusqu'à il y a quelques années, HTML 5 est capable, en plus de définir la structure de la page, également de gérer de nombreux types de contenu multimédia de manière absolument autonome (par exemple les flux audio, les flux vidéo et les éléments interactifs) et pour surveiller certains aspects de l'appareil à partir duquel il est affiché (par exemple, le pourcentage de luminosité de l'écran), éliminant ainsi le besoin d'intégrer des composants tels que des éléments Flash ou des applets Java dans la page elle-même.

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 sans prise en charge de ces technologies « supplémentaires ».

En général, une page créée avec HTML uniquement est définie page statique, qui est capable d'afficher toujours le même contenu et, dans la plupart des cas, non modifiable par les conditions actuelles de l'environnement dans lequel il est affiché ou par les actions que l'utilisateur effectue à l'intérieur.

Cependant, comme vous le découvrirez en poursuivant la lecture de ce guide, il existe de nombreux langages qui se croisent avec le HTML afin de construire des sites Web plus ou moins complexes, dynamiques et riches en contenus : 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, et le JavaScript, un véritable langage de programmation qui permet de manipuler dynamiquement la page et de la rendre interactive si besoin.

Lors de la création d'un site "à la main", il est important de vérifier qu'il est conforme à toutes les règles relatives aux cookies et au traitement des données. Si vous n'êtes pas sûr de ce dont nous parlons et que vous voulez éviter des problèmes dans ce sens, vous pouvez compter sur Iubenda, qui, avec son équipe d'avocats, vous permet d'adapter facilement les sites Web et les applications aux réglementations de plusieurs pays et législations.

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 en utilisant ce langage. Avant d'aller plus loin, cependant, il est nécessaire de faire une distinction plus que nécessaire : le code d'une page HTML est écrit par le programmeur à l'intérieur d'un fichier texte brut, qui peut être édité à la fois avec des programmes de manipulation de texte simples (tels que Notepad et WordPad de Windows ou TextEdit de macOS) et via des éditeurs beaucoup plus complexes (tels que Dreamweaver d'Adobe), tandis que le CONTENUTO d'une page HTML est celui affiché par le navigateur (images, textes, formulaires, etc.) lorsque vous « naviguez » sur le site.

Pour cela, il est possible de dire que le navigateur est un vrai Interpréteur HTML, c'est-à-dire un programme capable de suivre les instructions du code HTML pour 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, car, comme déjà mentionné, le navigateur interprète les informations et organise les éléments de la page affichée en fonction de celles-ci.

Après avoir fait cette prémisse nécessaire, il est temps de comprendre de plus près comment une page de code HTML est faite. Comme déjà mentionné ci-dessus, les éléments de la page sont enfermés entre deux Étiquette o Marqueurs, un au début et un à la fin, pouvant accepter ou non des paramètres en fonction du type d'élément qu'ils définissent : le balise de début est composé d'un mot inséré entre deux chevrons (ex. >), tandis que marqueur de fin reporte le symbole sur l'équerre gauche sabrer O "/" (l'art. </p>).

Les paramètres sont spécifiés à l'intérieur de la balise de début, avec une formule similaire au paramètre = "value" : par exemple, pour définir le chemin d'une image à insérer, vous pouvez utiliser le paramètre src = "address" (par exemple . )

Typiquement, une page HTML n'est rien de plus qu'un fichier texte avec rallonge .htmlpar exemple BonjourMonde.html: à l'intérieur, les balises qui définissent les éléments qui le composent sont précisées. En particulier, il y a certaines balises qui doivent obligatoirement être présentes dans un fichier .html et que je vais lister ci-dessous.

• - est absolument la première balise qui apparaît dans un fichier de code : elle permet de préciser que le fichier contient une page HTML. La version HTML utilisée est généralement spécifiée dans ses paramètres.
•  - cette balise englobe la page entière et, généralement, est également utilisée pour définir des aspects structurels tels que le langage et le schéma utilisés par le balisage.
• <head> - c'est la balise qui contient les informations avec lesquelles la page est gérée par le logiciel avec lequel elle est traitée (le navigateur, le moteur de recherche, etc.) : par exemple, à l'intérieur de la balise les titre de la page, leicône caractéristique, leensemble de caractères utilisé et d'autres informations spécifiques sur la structure.
• - c'est la balise qui contient toutes les balises relatives aux éléments de la page qui seront affichés à l'écran : à l'intérieur de la balise body, par exemple, le titres et sous-titres ( , , et ainsi de suite), je paragraphes et leur contenu (), Le images (), Le tabelle (), Et modules () avec les composants associés () et ainsi de suite.

Créer un site Web HTML de base

Est-ce que tout est clair pour l'instant ? Bonne nouvelle, car avec ces notions vous pouvez déjà créer votre premier site HTML ! Avant de continuer, permettez-moi cependant de vous donner quelques informations supplémentaires sur les balises "incontournables" à insérer dans la section .

• , , - ce sont les balises qui définissent titres et sous-titres de la page (par ex. Bienvenu!). Par défaut, la mise en forme du texte qu'ils contiennent est différente en taille et en style des autres éléments de la page.
• Si vous êtes intéressé à travailler avec nous, s'il vous plaît envoyez votre CV à <a href="https://web.archive.org/web/20190225041614/mailto:jobs@comact.com" data-no-instant="">jobs@comact.com</a> et référencer le nom d'affichage. Nous encourageons les diplômés à postuler pour ce poste. Seuls les candidats retenus seront contactés.<p></p> - est la balise qui enferme le contenu d'un paragraphe.
• <br> - c'est la balise qui dénote un saut de ligne : le texte suivant cette balise est imprimé en fin de ligne.
• - est la balise qui vous permet d'inclure une image dans la page. Le chemin de l'image est spécifié, comme déjà mentionné, dans le paramètre src.
• - cette balise permet d'insérer un lien hypertexte au sein d'une page : l'adresse de destination est précisée dans le paramètre href, tandis que le texte du lien est placé entre les balises de début et de fin (par ex. Le site de Salvatore.
• , , - ces balises permettent de définir partiellement le style du texte enfermé entre elles. Respectivement, ils vous permettent de spécifier du texte en gras, en italique et souligné.
• - c'est une balise assez générique, utilisée pour diviser la page en sections physiquement invisibles, mais réunies par des caractéristiques spécifiques. Par exemple, définissez la classe d'un élément de type div (<Div class="nomClasse") permet de définir, via un feuille de style CSS o une définition dans la page des paramètres de formatage spécifiques à appliquer aux éléments qu'il contient. Je vais vous parler de CSS dans la section suivante.

À ce stade, je dirais que le moment est venu de mettre en pratique toutes les connaissances acquises ! Alors, sans hésiter, ouvrez l'éditeur de texte fourni avec votre système d'exploitation (le Bloquer les notes di Windows o TextEdit / MacOS, par exemple) et tapez le code suivant.

Bonjour à tous! J'apprends à créer un site HTML Et je crois que j'ai tout compris ! Bonjour; salut! Je suis Salvatore et j'ai écrit ce guide pour vous apprendre à coder en utilisant cette approche. Ne vous inquiétez pas pour cette div, vous comprendrez bientôt pourquoi je l'ai saisie. Reconnaissez-vous ce monument ? Je parie que oui ! Pour accéder à mon site internet cliquez ici.

Une fois la saisie terminée, enregistrer avec le nom le fichier en prenant soin d'utiliser l'extension .html (Avec l'art. PrimoSito.html). A ce stade, vous n'avez plus qu'à faire Double-cliquez sur sur le fichier que vous venez d'enregistrer pour le visualiser dans le navigateur : félicitations, vous venez de créer votre première page Web HTML ! N'oubliez pas que vous pouvez afficher le code de la page à tout moment en cliquant sur un point aléatoire et en sélectionnant Afficher la source de la page depuis 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 consultées que sur l'ordinateur que vous utilisez : pour rendre votre site accessible depuis Internet, vous devrez plutôt en acheter une. espace d'hébergement pouvant héberger ses pages et, éventuellement, un domaine associé. Je vous ai expliqué le sujet en détail dans mon guide du meilleur hébergement.

La feuille de style

Je parie que vous vous demandez comment affiner davantage le contenu des pages de votre site Web, par exemple en définissant une couleur de fond, un effet sur les liens de survol, une mise en forme spécifique pour chaque type de "conteneur" et ainsi de suite.

Comme je vous l'ai déjà expliqué au début, bien que HTML soit capable de gérer la mise en forme basique des éléments, dans ce cas un second langage Web s'avère utile pour préciser les règles d'agencement, de mise en forme et de décoration des éléments : le CSS. Dans ce cas, il s'agit d'un langage avec une syntaxe profondément différente de celle du HTML, ce qui permet de définir précisément le style éléments sur la page.

Le code CSS peut être déclaré de deux manières différentes : la première, utile lorsque les éléments à définir se limitent à une seule page du site, est de l'enfermer dans la balise , spécifié dans la section <head>. La deuxième méthode pour déclarer le 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 votre HTML en utilisant la balise  (Avec l'art. ) dans la rubrique <head> de la page.

Juste pour vous donner un petit exemple, voici le contenu d'une feuille de style CSS capable de colorer et de formater tous les éléments appartenant à la classe colore: en particulier, le texte sera coloré en rouge et surmonté d'un trait, l'espacement des caractères sera augmenté à 5 pixels et le fond sera gris.

.colore { couleur:rouge; couleur d'arrière-plan : noir ; texte-décoration:surligne; espacement des lettres : 5px ;}

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 style.css dans le même dossier 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 pour l'éditer (en faisant clic-droit avec la souris sur le fichier .html, en sélectionnant l'élément Ouvrir avec dans le menu contextuel proposé et en choisissant le programme Bloc-notes / TextEdit dans la liste affichée à l'écran), saisissez la chaîne de texte juste en dessous de la balise <head> et enregistrez le fichier comme d'habitude.

Une fois cela fait, allez-y Double-cliquez sur sur le fichier html que vous venez d'éditer et… appréciez le résultat ! Pour plus d'informations sur les directives CSS, je vous invite à lire attentivement le guide de base du CSS de HTML.com.

Cadre et CMS

HTML est un langage extrêmement puissant et capable de façonner, avec CSS et JavaScript, même des projets très complexes. De nos jours, les pages Web doivent être conçues en tenant compte de l'affichage à partir de différents appareils, avec des caractéristiques différentes (par exemple une résolution d'écran) et dans des modes de lecture différents : c'est la raison pour laquelle, de plus en plus souvent, les programmeurs Web utilisent une série de "pré- -packagés" des outils pour concevoir le "squelette" de leur site web : ces outils sont appelés cadre.

Dans ce cas, un cadre n'est rien de plus qu'un ensemble de pages HTML, de JavaScript et de feuilles de style "pré-packagées", qui aident le programmeur à structurer en détail la structure de base du site Web qu'il s'apprête à créer : par exemple, un framework peut contenir des fichiers capables de pour "différencier" l'affichage des pages en fonction du navigateur, pour compresser le contenu pour améliorer la vitesse de téléchargement, pour offrir un certain type de graphisme et bien plus encore.

L'un des frameworks les plus utilisés aujourd'hui est Bootstrap: il s'agit d'un cadre extrêmement flexible conçu pour offrir des schémas de démarrage pour des projets de complexité moyenne à élevée, optimisés pour une visualisation à travers différents types d'appareils, d'écrans et de résolutions.

À ce stade, il semble juste de vous présenter le concept de CMS: un système de gestion de contenu ce n'est rien de plus qu'un système, lui-même écrit en langage Web, qui gère la création d'un site Web à travers un système de gestion doté d'une interface graphique. Les CMS sont généralement entièrement basés sur un ou plusieurs frameworks spécifiques.

En d'autres termes, le CMS est un logiciel qui permet de créer la structure d'un site web et de modifier son contenu, sans intervenir manuellement sur les pages et les bases de données, en quelques clics : généralement, les CMS sont mis à disposition de nombreux hébergeurs. sites permettant la création rapide de sites Internet même pour ceux qui n'ont pas de connaissance des langages du Web.Parmi les CMS les plus populaires, WordPress, Drupal, Magento, Joomla et Prestashop méritent d'être mentionnés.

Ressources utiles

Si vous êtes arrivé jusqu'ici, cela signifie que vous avez bien compris comment créer un site HTML et vous avez toutes les bases pour créer un petit site Web de vos propres mains. 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, j'entends vous fournir des ressources supplémentaires utiles à consulter pour affiner davantage vos connaissances.

• HTML.com HTML Guide - c'est très probablement l'un des guides les plus complets et les plus complets disponibles sur le Net : il est divisé en sections thématiques pratiques, regorge d'exemples et, surtout, constamment mis à jour.
• W3Schools.com - promu et publié par le W3C, est un portail Web complet dédié au HTML et à toutes les technologies qui l'entourent. La particularité de W3Schools est la possibilité d'effectuer, après la lecture de chaque leçon, de nombreux exercices d'auto-vérification pour évaluer les compétences acquises.
• Amaya - est un excellent programme d'édition HTML, open source, créé et distribué par le W3C. C'est un éditeur de type wysiwyg (ce que vous voyez est ce que vous obtenez, "ce que vous voyez est ce que vous obtenez), capable de créer des sites HTML entiers, ainsi que des feuilles de style, de petits scripts, etc., en les dessinant avec la souris.
• Adobe Dreamweaver - si vous vous souvenez bien, je vous ai déjà parlé de ce logiciel dans mon guide des programmes HTML. C'est une solution puissante et complète pour la conception et la structure de sites Internet simples et complexes, équipée d'outils de gestion HTML, JavaScript, CSS, de conception graphique et plus encore.
• HTML 5 avec CSS et JavaScript - si vous êtes amateur de références "papier" et que vous comptez les utiliser pour apprendre en profondeur les technologies du Web, vous pouvez donner une chance à ce texte : plus qu'un manuel, c'est une référence complète pour créer des de sites Web, mais aussi d'applications mobiles basées sur le Web, basées sur l'interaction entre HTML5, feuilles de style et JavaScript.

Si vous êtes arrivé jusqu'ici, cela signifie que vous maîtrisez tout ce qu'il y a à savoir sur la programmation HTML de base. Attends, tu me dis que tu trouves encore ça un peu trop difficile et que tu aimerais un système qui puisse te guider au moins dans tes premiers pas ? Alors je vous propose de créer votre premier site internet en utilisant l'un des CMS gratuits, avec son espace d'hébergement associé, disponible sur Internet : deux des plus utilisés de nos jours sont certainement WordPress.com e Blogger, dont je vous ai parlé spécifiquement dans mes insights sur comment créer un site avec WordPress et comment créer un blog gratuit sur Google.