En este laboratorio, aprenderás cómo crear tu primera página web HTML con una imagen siguiendo un proceso paso a paso. El laboratorio te guía a través de la configuración de un directorio de proyecto estructurado, la descarga de un recurso de imagen, la creación de un documento HTML básico y la inserción de una imagen en la página web. Obtendrás experiencia práctica en la organización de archivos de desarrollo web, el uso de etiquetas de imagen HTML y la comprensión de cómo se muestran las imágenes en las páginas web.
Al final de este laboratorio, habrás creado una página HTML simple pero funcional que demuestre habilidades fundamentales de desarrollo web, incluyendo la gestión de la estructura del proyecto, el manejo de imágenes y la creación de documentos HTML básicos. Este enfoque práctico proporciona una base sólida para los principiantes que buscan comenzar su viaje en el desarrollo web.
Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 97%. Ha recibido una tasa de reseñas positivas del 98% por parte de los estudiantes.
Configurar la estructura del proyecto
En este paso, configurarás la estructura del proyecto para crear tu primera página HTML con una imagen. Una estructura de proyecto bien organizada es esencial para mantener tus archivos de desarrollo web ordenados y manejables.
La estructura del proyecto ya ha sido configurada para ti por la configuración de la máquina virtual (VM). Verifica el directorio my-first-webpage:
ls my-first-webpage
Esta estructura te ayuda a separar diferentes tipos de archivos:
images/ almacenará tus recursos de imagen
css/ se puede utilizar para archivos de estilos (aunque no lo usaremos en este laboratorio)
Vamos a verificar la estructura del directorio:
tree
Ejemplo de salida:
.
├── css
└── images
¡Genial! Ahora has configurado una estructura de proyecto limpia y organizada que facilitará la gestión de tus archivos de desarrollo web.
Descargar y organizar recursos de imágenes
En este paso, descargarás una imagen para usar en tu primera página web HTML. Utilizaremos una imagen simple y de uso gratuito de Internet y la guardaremos en el directorio images que creaste anteriormente.
Primero, navega hasta el directorio de tu proyecto:
cd ~/project/my-first-webpage
Verifiquemos que la imagen se haya descargado correctamente:
ls images
Ejemplo de salida:
landscape.jpg
Si no ves el archivo de imagen, es posible que debas descargarlo siguiendo los comandos a continuación. Omite este paso si ves el archivo de imagen en el directorio images.
images/landscape.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 1170x780, components 3
La imagen ya está lista para ser utilizada en tu página HTML. Hemos descargado una imagen de paisaje que funcionará bien para demostrar la inserción de imágenes en HTML.
Crear un documento HTML básico
En este paso, crearás un documento HTML básico que servirá como base para tu primera página web. HTML (Lenguaje de Marcado de Hipertexto) es el lenguaje de marcado estándar para crear páginas web.
Navega hasta el directorio de tu proyecto:
cd ~/project/my-first-webpage
Abre el WebIDE y crea un nuevo archivo llamado index.html:
touch index.html
Ahora, agreguemos la estructura HTML básica. Abre el archivo index.html en el WebIDE y escribe el siguiente código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My First Webpage</h1>
<p>This is a simple HTML page I'm creating to learn web development.</p>
</body>
</html>
Desglosemos los componentes principales de este documento HTML:
<!DOCTYPE html> declara que se trata de un documento HTML5
<html> es el elemento raíz de la página HTML
<head> contiene información meta sobre el documento
<body> contiene el contenido visible de la página
<h1> es un encabezado principal
<p> es un párrafo
Insertar una imagen en una página HTML
En este paso, aprenderás cómo insertar la imagen de paisaje que descargaste en tu página HTML. La etiqueta <img> se utiliza para incrustar imágenes en HTML.
Abre tu archivo index.html en el WebIDE y modifica el contenido para incluir la imagen:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My First Webpage</h1>
<p>This is a simple HTML page I'm creating to learn web development.</p>
<h2>Beautiful Landscape</h2>
<img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />
</body>
</html>
Desglosemos los atributos de la etiqueta de imagen:
src: Especifica la ruta al archivo de imagen
alt: Proporciona texto alternativo para accesibilidad
width: Establece el ancho de visualización de la imagen (en píxeles)
Previsualizar y comprender la visualización de la imagen
En este paso, aprenderás cómo previsualizar tu página HTML y comprender cómo se muestran las imágenes en los navegadores web. Dado que el entorno de LabEx proporciona un WebIDE con una función de previsualización integrada, podrás ver tu página web de inmediato.
Para previsualizar tu página web, busca el botón "Go Live" en el WebIDE.
Haz clic en la carpeta my-first-webpage en la página, automáticamente se abrirá el archivo index.html en modo de previsualización.
Esto lanzará una vista en vivo de tu archivo index.html, mostrando la imagen de paisaje que agregaste.
Exploremos algunos conceptos clave sobre la visualización de imágenes en HTML:
Ruta de la imagen
El atributo src especifica la ruta relativa a tu imagen:
El atributo style se utiliza para establecer el tamaño de visualización de la imagen. Esta es una propiedad de CSS que te permite controlar el ancho y la altura de la imagen.
max-width: 100%; asegura que la imagen no exceda el ancho del contenedor
height: auto; mantiene la proporción de aspecto de la imagen
No te preocupes por CSS por ahora, lo cubriremos en laboratorios posteriores.
Verifica que tu imagen se esté mostrando correctamente en la previsualización del WebIDE. Debes ver:
La imagen de paisaje
Un ancho de 500 píxeles
Texto alternativo claro y legible
Resumen
En este laboratorio, los participantes aprendieron cómo crear su primera página web HTML configurando un entorno de proyecto estructurado y trabajando con imágenes. El proceso comenzó con la creación de una estructura de directorios limpia utilizando comandos de terminal, creando carpetas dedicadas para imágenes y CSS, lo que ayuda a mantener los archivos de desarrollo web organizados.
El laboratorio guió a los aprendices en la descarga de una imagen de paisaje de muestra de Unsplash utilizando wget, demostrando habilidades prácticas en la gestión de archivos y la adquisición de recursos. Al organizar sistemáticamente los archivos del proyecto y recuperar un recurso de imagen, los participantes adquirieron conocimientos básicos en la preparación de proyectos de desarrollo web y el manejo de activos de imagen para páginas HTML.
