Crea tu primera página HTML en WebIDE

Introducción

En este laboratorio, aprenderás cómo crear tu primera página HTML utilizando WebIDE (similar a VS Code), un potente y popular editor de código para desarrollo web.

Este tutorial completo cubre aspectos clave como configurar WebIDE, generar una plantilla HTML5 básica, agregar contenido básico a tu página web y previsualizar el resultado en un navegador web. Siguiendo estas instrucciones paso a paso, adquirirás experiencia práctica en los fundamentos del desarrollo web y establecerás una base sólida para crear páginas web interactivas y estructuradas.

Crea un nuevo archivo HTML

LabEx WebIDE proporciona un entorno de desarrollo moderno, similar a VS Code, para tareas de codificación. WebIDE es muy adecuado para proyectos de desarrollo web, incluyendo HTML, CSS y JavaScript.

Para comenzar, abre WebIDE haciendo clic en la pestaña "WebIDE" en la interfaz de LabEx. WebIDE muestra un explorador de archivos a la izquierda y un editor de código a la derecha. También hay una terminal y otras herramientas en la parte inferior.

Vista general de la interfaz de LabEx WebIDE

Explorador de archivos: Muestra la estructura de directorios del proyecto, donde puedes crear, editar y administrar archivos. El directorio de trabajo predeterminado es ~/project.
Editor de código: Proporciona un editor de texto para escribir y editar código. Puedes crear nuevos archivos, abrir archivos existentes y ver los cambios en el código.
Terminal: Ofrece una interfaz de línea de comandos para ejecutar comandos de shell, instalar paquetes y administrar archivos. Puedes ejecutar comandos directamente en la terminal. El directorio de trabajo predeterminado es ~/project.

En este paso, aprenderás cómo crear un nuevo archivo HTML en WebIDE. HTML (HyperText Markup Language, Lenguaje de Marcado de Hipertexto) es el lenguaje de marcado estándar para crear páginas web. Cada página web comienza con un archivo HTML.

En WebIDE, sigue estos pasos para crear un nuevo archivo HTML:

Haz clic en el menú "File" (Archivo).
Selecciona "New File" (Nuevo archivo).
Guarda el archivo con el nombre index.html.

Creando un nuevo archivo HTML en WebIDE

Como alternativa, puedes usar el atajo de teclado Ctrl+N para crear un nuevo archivo y luego guardarlo como index.html.

Al nombrar archivos HTML, recuerda estas reglas importantes:

Utiliza letras minúsculas.
Utiliza la extensión de archivo .html.
Evita los espacios en los nombres de archivo.
Utiliza nombres descriptivos como index.html, about.html, etc.

Verifiquemos que el archivo se haya creado a través de la terminal:

ls ~/project

Ejemplo de salida:

index.html

El archivo ya está listo para que comiences a agregar contenido HTML en los siguientes pasos. La extensión .html le indica a los navegadores web que este es un documento HTML.

Si estás familiarizado con la terminal, también puedes crear el archivo utilizando el siguiente comando:

touch ~/project/index2.html

Aprende más sobre comandos de Linux para mejorar tus habilidades en la terminal.

Generar plantilla básica de HTML5

En este paso, aprenderás cómo generar una plantilla HTML5 básica estándar en WebIDE. Una plantilla básica es una plantilla estándar que proporciona la estructura básica para un documento HTML.

En WebIDE, puedes generar rápidamente una plantilla HTML5 utilizando un atajo incorporado. Sigue estos pasos:

Abre tu archivo index.html.
Escribe ! (signo de exclamación).
Presiona la tecla Tab.

Esto generará automáticamente una plantilla HTML5 completa con todos los elementos esenciales:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Demo de generación de plantilla HTML5

Consejo: Puedes copiar y pegar el código de la plantilla en tu archivo index.html si el atajo no funciona.

Desglosemos los componentes clave de esta plantilla HTML5:

<!DOCTYPE html> declara que este es un documento HTML5.
<html lang="en"> es el elemento raíz con especificación de idioma.
<head> contiene metadatos sobre el documento.
<meta charset="UTF-8"> especifica la codificación de caracteres.
<meta name="viewport"> asegura una representación adecuada en dispositivos móviles.
<title> establece el título de la página que se muestra en la pestaña del navegador.
<body> es donde se agregará el contenido de tu página.

Puedes modificar la etiqueta <title> para darle a tu página un nombre significativo.

Agregar contenido básico a la página HTML

En este paso, aprenderás cómo agregar contenido básico a tu página HTML utilizando diferentes elementos HTML. HTML utiliza etiquetas para estructurar y mostrar contenido en una página web.

Abre tu archivo index.html en WebIDE y reemplaza la sección <body> vacía con el siguiente contenido:

Consejo: Copia y pega el fragmento de código en tu archivo index.html para agregar contenido. Reemplaza el contenido existente <body></body>. Aprenderemos más sobre los elementos HTML en los próximos laboratorios.

<body>
  <h1>Welcome to My First Web Page</h1>
  <p>
    This is a paragraph of text. HTML allows you to create different types of
    content easily.
  </p>

  <h2>My Favorite Hobbies</h2>
  <ul>
    <li>Coding</li>
    <li>Reading</li>
    <li>Traveling</li>
  </ul>

  <h2>Quick Links</h2>
  <a href="https://www.example.com">Visit Example Website</a>
</body>

Desglosemos los elementos HTML utilizados:

<h1> y <h2> son etiquetas de encabezado (h1 es el encabezado principal, h2 es un subencabezado).
<p> se utiliza para párrafos de texto.
<ul> crea una lista no ordenada (con viñetas).
<li> representa elementos de lista.
<a> crea un hipervínculo a otra página web.

Estos elementos básicos te ayudan a estructurar y presentar contenido en tu página web. Experimenta con diferentes etiquetas para ver cómo cambian la apariencia y el diseño de tu contenido.

Algunos consejos adicionales para principiantes:

Siempre cierra tus etiquetas HTML.
Utiliza contenido significativo y descriptivo.
Sangra tu código para una mejor legibilidad.

Previsualizar y renderizar HTML en el navegador

En este paso, aprenderás cómo previsualizar y renderizar tu página HTML en un navegador web. La máquina virtual (VM) de LabEx ofrece una función de previsualización en el navegador integrada en WebIDE.

Para previsualizar tu archivo HTML:

En WebIDE, haz clic en el botón "Go Live" en la esquina inferior derecha.
Se abrirá una nueva pestaña del navegador con tu página HTML renderizada.
O bien, puedes hacer clic en la pestaña "Web 8080" para abrir la previsualización.

Esto hará automáticamente lo siguiente:

Iniciará un servidor web.
Abrirá tu página HTML en una ventana de previsualización.
Proporcionará actualizaciones en tiempo real a medida que modifiques tu código.

Consejo: La máquina virtual de LabEx hospeda la previsualización en el puerto 8080. Puedes compartir el enlace de previsualización con otros para mostrar tu trabajo. Después de detener la máquina virtual del laboratorio, el enlace de previsualización ya no funcionará.

Cosas importantes a observar:

La página se renderiza con diferentes tamaños de encabezado.
La lista aparece con viñetas.
El enlace es clickeable.
El título de la página aparece en la pestaña del navegador.

Resumen

Este laboratorio guió a los aprendices a través de los pasos iniciales del desarrollo HTML, centrándose en la creación de un nuevo archivo HTML y la comprensión de la estructura fundamental de la creación de páginas web. Al seguir las instrucciones paso a paso, los participantes adquirieron experiencia práctica en el uso de WebIDE como herramienta de desarrollo y aprendieron las habilidades esenciales necesarias para comenzar a construir páginas web con HTML5.