Unidad 2: HTML Básico – Estructura de una Página Web
Introducción al Desarrollo Web con HTML y CSS
¡Es momento de darle más vida a tus páginas web añadiendo enlaces e imágenes! En esta sesión, aprenderás cómo conectar diferentes páginas o sitios mediante enlaces y cómo insertar imágenes para hacer tu sitio más atractivo. Al final, crearás una mini página “Sobre mí” con imágenes y enlaces.
1. Añadir Enlaces para Crear Conexiones entre Diferentes Páginas
¿Qué es un enlace?
Un enlace o «hipervínculo» permite conectar una página web con otra. Cuando haces clic en un enlace, puedes moverte de una página a otra, ya sea dentro de tu sitio o hacia otros sitios en Internet.
Cómo crear un enlace en HTML:
Para crear un enlace en HTML, usamos la etiqueta <a>. Esta etiqueta necesita un atributo llamado href, que especifica la dirección a la que llevará el enlace. Así es como se vería un enlace:
<a href="https://www.example.com">Visita mi sitio favorito</a>
En el ejemplo anterior:
href="https://www.example.com"es la dirección a la que llevará el enlace.- Texto del enlace: Lo que está entre las etiquetas
<a>y</a>se mostrará como el texto del enlace en la página.
Ejemplo de enlaces dentro de tu sitio:
Si tienes varias páginas en tu sitio (por ejemplo, index.html y contacto.html), puedes enlazarlas así:
<a href="contacto.html">Contáctame</a>
Este enlace llevará a los usuarios a la página contacto.html que has creado en tu proyecto.
2. Insertar Imágenes y Ajustarlas en el Sitio
¿Qué es una imagen en HTML?
Las imágenes añaden interés visual a una página y hacen que el contenido sea más atractivo. Para insertar una imagen en HTML, usamos la etiqueta <img>, que necesita el atributo src para especificar la ubicación de la imagen, y el atributo alt para describir la imagen.
Cómo agregar una imagen en HTML:
Aquí tienes un ejemplo:
<img src="imagen.jpg" alt="Descripción de la imagen">
En el ejemplo anterior:
src="imagen.jpg"es la ubicación del archivo de imagen.alt="Descripción de la imagen"es el texto que describe la imagen, útil si la imagen no se carga o para personas que usan lectores de pantalla.
Ajustar el tamaño de la imagen:
Puedes ajustar el tamaño de una imagen con los atributos width y height:
<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200">
Esto establecerá el ancho de la imagen en 300 píxeles y la altura en 200 píxeles.
3. Proyecto: Crear una Mini Página “Sobre mí” con Imágenes y Enlaces
¡Ahora que conoces cómo usar enlaces e imágenes, vamos a crear una página “Sobre mí” para practicar!
Abre tu archivo index.html o crea un nuevo archivo llamado sobre-mi.html en Visual Studio Code.
Escribe el siguiente código para comenzar tu mini página:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sobre mí</title>
</head>
<body>
<h1>¡Hola! Soy [Tu Nombre]</h1>
<p>Bienvenido a mi página. Aquí encontrarás un poco de información sobre mí y mis intereses.</p>
<h2>Mi Foto</h2>
<img src="mi-foto.jpg" alt="Foto de mí" width="200">
<h2>Mis Redes Sociales</h2>
<p>Sígueme en mis redes sociales:</p>
<ul>
<li><a href="https://www.instagram.com" target="_blank">Instagram</a></li>
<li><a href="https://www.twitter.com" target="_blank">Twitter</a></li>
<li><a href="https://www.linkedin.com" target="_blank">LinkedIn</a></li>
</ul>
<h2>Un Poco Más Sobre Mí</h2>
<p>Me gusta aprender sobre desarrollo web, jugar videojuegos, y dibujar.</p>
<p><a href="index.html">Volver a la página principal</a></p>
</body>
</html>
Reemplaza [Tu Nombre] con tu nombre y ajusta el texto para que se adapte a ti.
Asegúrate de tener una imagen llamada mi-foto.jpg en la misma carpeta que tu archivo HTML, o cambia src="mi-foto.jpg" por el nombre de cualquier imagen que desees usar.
Guarda y abre sobre-mi.html en tu navegador para ver el resultado.
¡Felicidades!
Has creado una mini página “Sobre mí” que incluye enlaces a otras páginas y redes sociales, además de una imagen. Esta página te permitirá practicar más sobre cómo construir sitios web básicos. En la próxima sesión, profundizaremos en el diseño y la personalización de tus páginas con CSS para hacerlas aún más interesantes. ¡Sigue adelante!