Descargar el PDF
Descargar el PDF
Visual Studio Code es un editor de código fuente creado por Microsoft. Está disponible para Windows, macOS y Linux. Con él, puedes escribir y editar códigos en una variedad de lenguajes de codificación, incluyendo HTML. No obstante, ¿qué haces cuando quieres ejecutar un código HTML para ver cómo se ve? Por suerte, existe una serie de extensiones para Visual Studio Code que te permiten ejecutar sin problemas un código HTML desde Visual Studio Code. También puedes utilizar la Terminal para ejecutar un archivo HTML. En este wikiHow, aprenderás a ejecutar un archivo HTML en Visual Studio Code.
Pasos
-
Abre Visual Studio Code. Visual Studio Code tiene un ícono que se asemeja a una cinta de color azul. Haz clic en él para abrirlo. Puedes encontrarlo en el menú Inicio de Windows, la carpeta Aplicaciones en Mac o en el menú Aplicaciones en Linux.
- Si aún no lo has hecho, puedes descargar Visual Studio Code de manera gratuita en https://code.visualstudio.com/ . Simplemente haz clic en el botón Download (descargar) en la página web y abre el archivo de instalación desde el navegador web o la carpeta Descargas. Sigue las indicaciones para finalizar la instalación.
-
Abre o crea un nuevo archivo HTML. Utiliza uno de los pasos a continuación para abrir o crear un nuevo archivo:
- Para crear un nuevo archivo, haz clic en File (archivo) en la barra de menú ubicada en la parte superior. A continuación, haz clic en New File (nuevo archivo). Comienza a escribir el código HTML .
- Si quieres abrir un archivo existente, haz clic en File (archivo) en la barra de menú ubicada en la parte superior. A continuación, haz clic en Open File (abrir archivo). Dirígete al archivo HTML que quieres abrir y haz clic en él para seleccionarlo. Ahora haz clic en Open (abrir).
-
Guarda el archivo como archivo HTML. Una vez que estés listo para ejecutar un archivo HTML en Visual Studio Code, primero deberás guardarlo como archivo HTML. Luego de guardarlo, puedes ejecutarlo en cualquier navegador de tu elección. Sigue los pasos a continuación para guardar el archivo HTML en Visual Studio Code:
- Haz clic en File (archivo) en la barra de menú ubicada en la parte superior.
- Haz clic en Save as (guardar como).
- Ingresa un nombre de archivo al lado de "File Name" (nombre de archivo).
- Utiliza el menú desplegable al lado de "Save as type" (guardar según tipo) para seleccionar " HTML ".
- Haz clic en Save (guardar).
Anuncio
-
Abre Visual Studio Code. Visual Studio Code tiene un ícono que se asemeja a una cinta de color azul. Haz clic en él para abrirlo. Puedes encontrarlo en el menú Inicio de Windows, la carpeta Aplicaciones en Mac o en el menú Aplicaciones en Linux.
-
Abre o crea un nuevo archivo HTML. Si aún no lo has hecho, abre un archivo HTML existente, o crea uno nuevo y guárdalo en formato HTML. Si ya tienes abierto un archivo HTML, haz clic en la pestaña que lo contiene ubicada en la parte superior de la pantalla para verlo.
-
Abre una nueva Terminal. Para ello, haz clic en la Terminal ubicada en la parte superior de la pantalla. Luego haz clic en Nueva Terminal . La Terminal es la única forma de ejecutar un archivo HTML en Visual Studio Code sin la necesidad de utilizar una extensión. También es la forma más compleja.
- También puedes hacer clic en Ver en la parte superior y luego en Terminal .
-
Escribe cd seguido de la ruta del archivo HTML y presiona ↵ Enter . Esto te dirigirá a la ubicación del archivo HTML. Por ejemplo, si el archivo HTML se encuentra en la carpeta Documentos, deberás escribir cd \Usuarios\nombredeusuario\Documentos y presionar Enter .
- Si el archivo HTML se guarda en una letra de unidad distinta a la del sistema operativo, deberás cambiar a dicha letra en la Terminal antes de dirigirte a la ruta del archivo HTML. Para ello, simplemente escribe la letra de la unidad (p.ej., D: para una unidad D:) y presiona Enter .
- Si no sabes a ciencia cierta dónde está guardado el archivo HTML, puedes hacer clic derecho en la pestaña de dicho archivo en la parte superior de la pantalla y luego hacer clic en Copiar ruta . Escribe cd en la Terminal y luego pega inmediatamente la ruta. Borra el nombre del archivo al final de la ruta y presiona Enter .
- Si alguna de las carpetas en la ruta al archivo HTML tiene un espacio en el nombre, la Terminal no podrá dirigirse a dicha carpeta. Utiliza el Explorador de archivos en Windows o el Finder en Mac para dirigirte a cualquier carpeta que tenga un espacio en su nombre y cámbiale el nombre eliminando los espacios (es decir, si tienes una carpeta llamada "Archivos HTML", cámbiala a "Archivos_HTML ").
-
Escribe start seguido del nombre del archivo HTML y presiona ↵ Enter . Por ejemplo, si quisieras ejecutar el archivo HTML de índice, escribirías start index.html y presionarías Enter . De esta manera, abrirás el archivo HTML en una ventana aparte que te permitirá previsualizarlo.
- para cerrar la vista previa, simplemente haz clic en el ícono de la “x” en la parte superior de la ventana. [1] X Fuente de investigación
Anuncio
-
Abre Visual Studio Code. Visual Studio Code tiene un ícono que se asemeja a una cinta de color azul. Haz clic en él para abrirlo. Puedes encontrarlo en el menú Inicio de Windows, la carpeta Aplicaciones en Mac o en el menú Aplicaciones en Linux.
-
Haz clic en el botón Extensiones. Es el ícono que se asemeja a cuatro cuadrados y se ubica en la barra de menú izquierda. Al hacer clic en él, aparecerá el menú de búsqueda Extensiones.
-
Escribe HTML Preview en la barra de búsqueda. La barra de búsqueda se ubica en la parte superior izquierda del menú Extensiones. A continuación, aparecerá una lista de extensiones que coincidan con la búsqueda. "HTML Preview" es una extensión para Visual Studio Code que te permite previsualizar archivos HTML desde Visual Studio Code utilizando una pantalla dividida o en modo de ventana completa.
-
Haz clic en la extensión "HTML Preview". Debe ser la primera extensión ubicada en la parte superior de la lista de extensiones. Su creador es Thomas Haakon Townsend. Contiene un ícono similar a un escudo naranja con un "5" en el medio (el logo de HTML 5).
-
Haz clic en Install (instalar). Este botón se ubica debajo del encabezado "HTML Preview" en la página de información ubicada a la derecha del menú de extensiones. Al presionarlo, instalarás la extensión. Espera un par de minutos para que finalice la instalación.
-
Abre o crea un nuevo archivo HTML. Si aún no lo has hecho, abre un archivo HTML existente o crea un nuevo archivo HTML y guárdalo en dicho formato. Si ya tienes un archivo HTML abierto, haz clic en la pestaña que lo contiene ubicada en la parte superior de la pantalla para poder verlo.
-
Haz clic en el botón de previsualización de pantalla dividida. Es el ícono que se asemeja a una pantalla dividida con una lupa a la izquierda. Se ubica en la esquina superior derecha de la pantalla. Al hacer clic en él, se abrirá una vista previa del archivo HTML en una pantalla dividida dentro de Visual Studio Code.
- Mantén presionada la tecla Alt and y haz clic en el botón de previsualización para tener una vista previa en pantalla completa del código HTML.
- Para cerrar la previsualización, simplemente haz clic en el ícono “x” en la pestaña de previsualización ubicada en la parte superior de la pantalla.
Anuncio
-
Abre Visual Studio Code. Visual Studio Code tiene un ícono que se asemeja a una cinta de color azul. Haz clic en él para abrirlo. Puedes encontrarlo en el menú Inicio de Windows, la carpeta Aplicaciones en Mac o en el menú Aplicaciones en Linux.
-
Haz clic en el botón Extensiones. Es el ícono que se asemeja a cuatro cuadrados y se ubica en la barra de menú izquierda. Al hacer clic en él, aparecerá el menú de búsqueda Extensiones.
-
Escribe open in browser en la barra de búsqueda. La barra de búsqueda se ubica en la parte superior izquierda del menú Extensiones. A continuación, aparecerá una lista de extensiones que coincidan con la búsqueda. "Open in browser" es una extensión para Visual Studio Code que te permite abrir un archivo HTML utilizando un navegador web de tu elección desde Visual Studio Code
-
Haz clic en la extensión "open in browser". Debe ser la primera extensión ubicada en la parte superior de la lista. Es la que tiene todas las letras en minúscula y cuyo creador es TechER. Haz clic en ella para seleccionarla.
-
Haz clic en Install (instalar). Este botón se ubica debajo del encabezado "open in browser" en la página de información ubicada a la derecha del menú de extensiones. Al presionarlo, instalarás la extensión. Espera un par de minutos para que finalice la instalación.
-
Abre o crea un nuevo archivo HTML. Si aún no lo has hecho, abre un archivo HTML existente o crea un nuevo archivo HTML y guárdalo en dicho formato. Si ya tienes un archivo HTML abierto, haz clic en la pestaña que lo contiene ubicada en la parte superior de la pantalla para poder verlo.
-
Haz clic derecho en cualquier parte del HTML.code. A continuación, aparecerá un menú contextual.
-
Haz clic en Open in Default Browser (abrir en el navegador predeterminado). Esto abrirá el archivo HTML en el navegador web predeterminado. Esto te permitirá ver el archivo HTML. [2] X Fuente de investigación
- También puedes hacer clic en Open in Other Browser (abrir en otro navegador) y doble clic en el navegador web de tu elección.
- Si se te solicita seleccionar un navegador web predeterminado, haz clic en el navegador en el que quieres abrir el archivo y luego en Ok .
Anuncio
Referencias
Anuncio
¡Suscríbete al boletín gratuito de wikiHow!
Encontrarás instructivos útiles en tu bandeja de entrada cada semana.
¡Suscríbeme!
