Compilación y vista previa de una aplicación web básica

  • 5 minutos

En la última unidad, se ha creado un archivo HTML simple generado de forma automática llamado index.html. Para retomar donde lo dejó, creará una aplicación web que se pueda ejecutar en un servidor local.

Primera prueba: Hola mundo

Como primera prueba para ver el código mínimo que se puede ejecutar, agregue contenido para mostrar. En la última unidad, el nuevo archivo index.html tenía un aspecto similar al siguiente.

Captura de pantalla que muestra código HTML agregado por Emmet en Visual Studio Code.

Ahora edite este código para que se parezca al de la captura de pantalla siguiente.

Captura de pantalla que muestra código HTML predeterminado más el texto

Observe que IntelliSense para HTML y las extensiones de codificación por colores funcionan automáticamente. Es posible que profundice en las extensiones en futuros módulos, pero no dude en continuar y experimentar por su cuenta. Si lo hace, asegúrese de probar también las características de finalización automática.

Publicación local de la página web

Es el momento de ejecutar el código HTML de forma local. Haga clic en el icono GoLive de la barra de estado de la parte inferior derecha.

Captura de pantalla del icono de GoLive de Visual Studio Code.

Esta acción indica a la extensión Live Server que se instaló anteriormente que se inicie y abra el explorador web predeterminado para servir el contenido del archivo actual. Debería ver Página de prueba de Hola mundo en la barra de título del explorador y Hola mundo en una fuente de título de gran tamaño.

Enhorabuena. Ha servidor la primera página web. Solo puede ver este contenido, ya que se encuentra en un servidor web que se ejecuta localmente. La dirección web es la dirección IP reservada para la máquina local. Si quiere que esta página web esté disponible en línea, tendrá que implementarla en un servidor web conectado a Internet. Si lo desea, puede obtener información sobre él en otros módulos de esta serie.