Página Web Personal HTML: Crea tu Web

Introducción

¡Bienvenido al Proyecto de Página Web Personal en HTML! En este laboratorio, construirás un sitio web completo de una sola página desde cero utilizando los bloques de construcción fundamentales de la web: HTML. Este proyecto práctico está diseñado para principiantes y te guiará a través de las etiquetas y conceptos esenciales necesarios para crear una página web estructurada y rica en contenido.

Aprenderás a:

Definir la estructura básica de un documento HTML.
Usar encabezados y párrafos para formatear texto.
Organizar información con listas.
Incrustar imágenes y crear hipervínculos.
Estructurar datos con tablas y crear un formulario de contacto simple.

Se te ha preconfigurado un servidor web y estilos básicos (CSS). Tu enfoque principal será escribir HTML limpio y semántico. Puedes previsualizar tu trabajo en tiempo real cambiando a la pestaña Web 8080 en el entorno del laboratorio. ¡Empecemos!

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 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Configurar la estructura del documento con head y body

En este paso, configurarás la estructura básica de tu documento HTML. Cada página HTML tiene una estructura estándar que incluye las etiquetas <!DOCTYPE>, <html>, <head> y <body>.

<!DOCTYPE html>: Esta declaración define el tipo de documento como HTML5.
<html>: Este es el elemento raíz de una página HTML.
<head>: Este elemento contiene metainformación sobre el documento, como su título y enlaces a hojas de estilo. El contenido dentro de <head> no se muestra en la página en sí.
<title>: Esto establece el título de la pestaña del navegador.
<body>: Este elemento contiene el contenido visible de la página que se muestra en el navegador.

Primero, abre el archivo index.html ubicado en el directorio ~/project usando el explorador de archivos a la izquierda. El archivo está actualmente vacío. Copia y pega el siguiente código en index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Personal Webpage</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <!-- Content will go here in the next steps -->
    </div>
  </body>
</html>

Después de pegar el código, guarda el archivo (Ctrl+S o Cmd+S). Ahora, haz clic en la pestaña Web 8080 en la parte superior de la interfaz del laboratorio. Deberías ver una página en blanco, pero nota que el título de la pestaña del navegador ahora es "My Personal Webpage".

Añadir texto formateado usando encabezados y párrafos

En este paso, añadirás las primeras piezas de contenido visible a tu página web utilizando encabezados y párrafos. Estas son etiquetas fundamentales para estructurar texto.

<h1>: Esta es una etiqueta de encabezado de nivel superior, utilizada típicamente para el título principal de una página. Los motores de búsqueda utilizan los encabezados para indexar la estructura y el contenido de tus páginas web.
<p>: Esta es la etiqueta de párrafo, utilizada para bloques de texto.

Añadamos tu nombre como encabezado principal y una breve biografía. En tu archivo index.html, busca el comentario  dentro de <div class="container"> y reemplázalo con el siguiente código:

<h1>John Doe</h1>
<p>
  Welcome to my personal webpage! I am a passionate web developer learning the
  fundamentals of HTML. I enjoy creating clean and efficient code to build
  beautiful and functional websites.
</p>

Tu archivo index.html completo debería verse ahora así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Personal Webpage</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <h1>John Doe</h1>
      <p>
        Welcome to my personal webpage! I am a passionate web developer learning
        the fundamentals of HTML. I enjoy creating clean and efficient code to
        build beautiful and functional websites.
      </p>
    </div>
  </body>
</html>

Guarda el archivo y actualiza la pestaña Web 8080. Ahora verás tu nombre y biografía mostrados en la página.

Insertar listas para habilidades o intereses

En este paso, utilizarás listas para organizar información, como tus habilidades o intereses. HTML proporciona dos tipos principales de listas: listas desordenadas (<ul>) para elementos sin un orden específico, y listas ordenadas (<ol>) para elementos numerados. Cada elemento en una lista se define con una etiqueta <li> (list item).

Añadamos una sección para tus habilidades utilizando una lista desordenada. Añade el siguiente código debajo de la etiqueta de párrafo (<p>) que añadiste en el paso anterior.

<h2>My Skills</h2>
<ul>
  <li>HTML & CSS</li>
  <li>JavaScript</li>
  <li>Python</li>
  <li>Problem Solving</li>
</ul>

Este código añade un encabezado de segundo nivel (<h2>) para titular la sección y una lista desordenada (<ul>) con cuatro elementos de lista (<li>).

Después de añadir el código, el <body> de tu archivo index.html debería verse así:

<body>
  <div class="container">
    <h1>John Doe</h1>
    <p>
      Welcome to my personal webpage! I am a passionate web developer learning
      the fundamentals of HTML. I enjoy creating clean and efficient code to
      build beautiful and functional websites.
    </p>

    <h2>My Skills</h2>
    <ul>
      <li>HTML & CSS</li>
      <li>JavaScript</li>
      <li>Python</li>
      <li>Problem Solving</li>
    </ul>
  </div>
</body>

Guarda el archivo y revisa la pestaña Web 8080 para ver tu nueva sección de habilidades con una lista de viñetas.

Añadir enlaces e imágenes con atributos

En este paso, harás tu página más dinámica añadiendo una imagen y un hipervínculo.

<img>: La etiqueta de imagen se utiliza para incrustar una imagen. Es una etiqueta de cierre automático y requiere dos atributos esenciales:
- src: Especifica la ruta al archivo de imagen.
- alt: Proporciona texto alternativo para la imagen, lo cual es importante para la accesibilidad y para cuando la imagen no se puede mostrar.
<a>: La etiqueta de ancla se utiliza para crear hipervínculos. El atributo href especifica la URL a la que va el enlace.

Primero, añadamos una foto de perfil. El script de configuración ya ha colocado una imagen de marcador de posición en images/profile.png. Añade la etiqueta <img> justo debajo de la etiqueta <h1>.

A continuación, añadamos un enlace a un sitio externo, como un perfil de GitHub. Colocaremos esto en una nueva sección "Encuéntrame en línea". Añade el siguiente código debajo de tu lista de habilidades:

<!-- Add this img tag below the h1 tag -->
<img src="images/profile.png" alt="A placeholder profile picture" />

<!-- Add this new section below the skills list -->
<h2>Find Me Online</h2>
<p>
  You can find my work on
  <a href="https://github.com/labex-labs" target="_blank">GitHub</a>.
</p>

El atributo target="_blank" en el enlace indica al navegador que abra el enlace en una nueva pestaña.

El <body> de tu archivo index.html debería estar estructurado ahora de la siguiente manera:

<body>
  <div class="container">
    <h1>John Doe</h1>
    <img src="images/profile.png" alt="A placeholder profile picture" />
    <p>
      Welcome to my personal webpage! I am a passionate web developer learning
      the fundamentals of HTML. I enjoy creating clean and efficient code to
      build beautiful and functional websites.
    </p>

    <h2>My Skills</h2>
    <ul>
      <li>HTML & CSS</li>
      <li>JavaScript</li>
      <li>Python</li>
      <li>Problem Solving</li>
    </ul>

    <h2>Find Me Online</h2>
    <p>
      You can find my work on
      <a href="https://github.com/labex-labs" target="_blank">GitHub</a>.
    </p>
  </div>
</body>

Guarda el archivo y actualiza la pestaña Web 8080. Verás la imagen de perfil y un enlace en el que se puede hacer clic.

Crear tabla para horario y formulario para contacto

En este último paso de contenido, añadirás dos estructuras más complejas: una tabla para mostrar un horario y un formulario para permitir que los visitantes se pongan en contacto contigo.

<table>: Define una tabla.
- <tr>: Define una fila en la tabla.
- <th>: Define una celda de encabezado (en negrita y centrada por defecto).
- <td>: Define una celda de datos.
<form>: Define un formulario HTML para la entrada del usuario.
- <label>: Define una etiqueta para un elemento <input>.
- <input>: Define un campo de entrada. El atributo type puede ser text, email, password, etc.
- <textarea>: Define un área de entrada de texto multilínea.
- <button>: Define un botón clicable.

Primero, añade una tabla para un horario semanal. Añade este código debajo de la sección "Find Me Online":

<h2>My Schedule</h2>
<table>
  <tr>
    <th>Day</th>
    <th>Activity</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>Web Development Practice</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>Project Building</td>
  </tr>
  <tr>
    <td>Friday</td>
    <td>Review and Refactor</td>
  </tr>
</table>

A continuación, añade un formulario de contacto. Añade este código debajo de la tabla que acabas de crear:

<h2>Contact Me</h2>
<form action="#" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <button type="submit">Send Message</button>
</form>

Guarda el archivo y visualiza la pestaña Web 8080. ¡Tu página web personal ahora está completa con un horario y un formulario de contacto!

Resumen

¡Felicitaciones! Has construido con éxito una página web personal completa utilizando HTML.

En este laboratorio, has practicado el uso de los elementos HTML más fundamentales para estructurar un documento y presentar contenido. Has aprendido a:

Crear el esqueleto básico de una página HTML con <html>, <head> y <body>.
Formatear texto con encabezados (<h1>, <h2>) y párrafos (<p>).
Organizar elementos en una lista desordenada (<ul>, <li>).
Incrustar una imagen (<img>) y crear un hipervínculo (<a>).
Estructurar datos en una <table> y recopilar información del usuario con un <form>.

Ahora tienes una base sólida en HTML. Siéntete libre de experimentar más cambiando el contenido, añadiendo más páginas o explorando etiquetas HTML más avanzadas. ¡Sigue con el gran trabajo en tu viaje de desarrollo web!