Capacita
HTML: la estructura
Títulos, textos, imágenes y enlaces de una página.
Guía esencial
Explicación
Imagina que estás construyendo una casa. Primero, necesitas el esqueleto: paredes, techos, ventanas y puertas. En la web, el esqueleto es lo que se llama HTML (Lenguaje de Marcado de Hipertexto). HTML es como el esqueleto de una página web. Sin él, no hay estructura, no hay cómo organizar los elementos como títulos, imágenes o enlaces.
Cuando visitas una página web, lo que ves es el resultado de una estructura hecha con HTML. Por ejemplo, un título grande, un párrafo de texto, una imagen, y un enlace a otra página. Todo eso se construye con etiquetas HTML. Estas etiquetas son como las instrucciones que le das al navegador para saber qué es cada cosa.
Por ejemplo, si quieres poner un título en una página, usas la etiqueta `<h1>` (por ejemplo, `<h1>¡Bienvenido a mi página!</h1>`). Si quieres un párrafo, usas `<p>` (como `<p>Este es un párrafo de texto.</p>`). Estas etiquetas ayudan al navegador a entender cómo debe mostrar la información [1].
También puedes agregar imágenes y enlaces. Para una imagen, usamos `<img src="imagen.jpg" alt="Descripción">`, y para un enlace, `<a href="https://www.ejemplo.com">Haz clic aquí</a>`. Todo esto forma parte de la estructura de la página web, y sin HTML, no podrías organizar estos elementos de forma clara [2].
La estructura de HTML no solo es visual, también es lógica. Cada etiqueta tiene un propósito, y juntas crean una página que el navegador puede entender y mostrar correctamente. Por eso, HTML es el fundamento de cualquier sitio web, como la base de una casa.
Ejercicios resueltos
**Ejercicio 1**
Crea una página HTML simple con un título, un párrafo y una imagen. Usa las etiquetas correctas.
**Solución:**
```html
<!DOCTYPE html>
<html>
<head>
<title>Mi Página</title>
</head>
<body>
<h1>Bienvenido a mi página</h1>
<p>Este es un párrafo con información sobre mí.</p>
<img src="mi-foto.jpg" alt="Foto personal">
</body>
</html>
```
Explicación: Aquí usamos `<h1>` para el título, `<p>` para el párrafo, y `<img>` para insertar una imagen. El elemento `<html>` es la raíz de la página, y `<body>` contiene todo lo que se ve en la página [1].
**Ejercicio 2**
Escribe una página HTML que tenga un título, un enlace a la página de Google y un párrafo.
**Solución:**
```html
<!DOCTYPE html>
<html>
<head>
<title>Página con enlace</title>
</head>
<body>
<h1>Visita Google</h1>
<p>Haz clic en el siguiente enlace:</p>
<a href="https://www.google.com">Ir a Google</a>
</body>
</html>
```
Explicación: Usamos `<a href="...">` para crear un enlace. El atributo `href` dice a dónde va el enlace. El texto entre las etiquetas `<a>` es lo que se muestra al usuario [2].
**Ejercicio 3**
Crea una estructura básica de HTML con un título, un párrafo, una imagen y un enlace, todo dentro de una etiqueta `<body>`.
**Solución:**
```html
<!DOCTYPE html>
<html>
<head>
<title>Mi Sitio Web</title>
</head>
<body>
<h1>Mi Sitio</h1>
<p>Este es un ejemplo de página web.</p>
<img src="ejemplo.jpg" alt="Imagen de ejemplo">
<a href="https://www.ejemplo.com">Enlace de ejemplo</a>
</body>
</html>
```
Explicación: Esta estructura sigue los principios básicos de HTML. El título, el párrafo, la imagen y el enlace están todos dentro del cuerpo de la página (`<body>`), que es lo que el usuario ve [1].
Reto para ti
Construye una página web simple con al menos 3 elementos: un título, un párrafo y un enlace a una página de tu elección. Usa las etiquetas HTML correspondientes. Pista: Recuerda que todo debe estar dentro de las etiquetas `<html>`, `<head>` y `<body>`.
Respuesta: Una vez que hayas creado tu página, verifica que tenga un título, un párrafo y un enlace. Asegúrate de usar las etiquetas correctas y que todo esté bien estructurado.
Puntos clave
- HTML es el lenguaje que define la estructura de una página web.
- Las etiquetas como `<h1>`, `<p>`, `<img>` y `<a>` son fundamentales para organizar el contenido.
- El elemento `<body>` contiene todo lo que se muestra en la página.
- Cada etiqueta tiene un propósito específico y ayuda al navegador a mostrar la información correctamente [1].
- HTML es el fundamento de cualquier sitio web, como la base de una casa [2].
Repasa los conceptos clave con tarjetas. Toca cada una para ver la respuesta.
Pon a prueba lo que aprendiste con un examen corto. Super Kiri te explica cada respuesta.