Comment afficher un fichier HTML dans le navigateur avec Visual Studio Code

Comment afficher un fichier HTML dans le navigateur avec Visual Studio Code
Après avoir écrit un code dans le code Visual Studio, il doit être ouvert sur un navigateur Web à coup sûr. En fait, lors de la création d'une page Web, il est nécessaire d'ouvrir et de visualiser les résultats ou la sortie du code fréquemment et après chaque opération effectuée via le code. Ceci est fait pour s'assurer que le code est mis en œuvre correctement ou non.

Dans cet article, il y aura deux façons les plus couramment utilisées pour ouvrir un fichier HTML de code Visual Studio dans le navigateur Web.

Préalable: Configuration du document HTML

Pour afficher un fichier HTML dans le navigateur Web, il doit exister un fichier HTML. Alors, créez d'abord le fichier. Supposons qu'il existe le fichier suivant qui est censé être ouvert dans un navigateur Web:

Bonjour le monde!


Ceci est le contenu de la page Web…

-Dans le code ci-dessus, il y a un simple

En-tête et une sous-tête

après cela.

corps
Texte-aligne: Centre;

H1
la couleur verte;

Dans l'élément de style CSS, il y a deux propriétés ajoutées (i.e., Texte aligne et couleur) se référant au «corps" et "

"En tête.

Méthode 1: Copiez et collez le chemin du fichier dans le navigateur

L'une des méthodes pour ouvrir ou afficher le fichier HTML dans le navigateur est simplement de copier le chemin du fichier et de le coller dans le navigateur. Comprenons cela en détail.

Cliquez avec le bouton droit sur le nom du fichier, puis cliquez sur le "Chemin de copie" option. De cette façon, le fichier sera copié à partir du code Visual Studio:

Ouvrez le navigateur puis collez l'URL copiée dans le navigateur:

Cela affichera les résultats de la page Web du navigateur:

Méthode 2: Ouvrir via le serveur en direct

Une autre façon de visualiser un fichier HTML dans le navigateur est d'activer une extension de serveur en direct dans le code Visual Studio, puis d'utiliser cette extension pour afficher le fichier dans le navigateur.

Tle code visuel du studio "Serveur en direct»L'extension sera utilisée dans cette méthode. Donc, installez d'abord l'extension s'il n'a pas déjà été installé:

Cliquez avec le bouton droit n'importe où dans la zone où le code a été écrit, puis sélectionnez le «Ouvert avec le serveur en direct" option:

Cela chargera automatiquement le lien URL du fichier de code Visual Studio pertinent et affichera les résultats dans le navigateur:

Ce sont les deux méthodes les plus courantes utilisées pour afficher un fichier HTML dans le navigateur.

Conclusion

Un fichier HTML sur le code Visual Studio peut être affiché dans le navigateur de plusieurs manières. L'une des façons est de copier le chemin du fichier à partir du code Visual Studio, puis de le coller dans le navigateur Web. Une autre façon consiste à utiliser l'extension Visual Studio Live Server pour charger l'URL du fichier dans le navigateur Web. Cet article a expliqué les deux méthodes en détail.