Etiqueta Esenciales: Enlaces, Imágenes y Saltos de Línea

Etiqueta esenciales: enlaces, imágenes y saltos de línea

Seguimos avanzando en nuestro curso de HTML5, y hoy vamos a charlar sobre tres etiquetas geniales que le dan vida a tus páginas web: <a> para enlaces, <img> para imágenes y <br> para saltos de línea.

Enlaces: Conectando el Mundo

La etiqueta <a> (de «anchor» o ancla) es la que te permite crear enlaces o hipervínculos. Con ella, puedes llevar a los usuarios a otras páginas, sitios web o incluso a puntos específicos dentro de la misma página. Es como el puente que une tu web con el resto del internet.

¿Cómo se usa?

Apertura: <a>
Contenido: El texto o elemento que será clicable.
Cierre: </a>
Atributo clave: href (Hypertext Reference), que dice a dónde lleva el enlace.

Ejemplo básico:

<a href="https://www.google.com">Ir a Google</a>

href="https://www.google.com": La dirección a la que va el enlace.
«Ir a Google»: El texto que se ve y en el que haces clic.
Resultado: Un texto azul subrayado que te lleva a Google al hacer clic.

Atributos útiles

target: Controla dónde se abre el enlace.

target="_blank": Abre en una pestaña nueva.

   <a href="https://www.youtube.com" target="_blank">Ver YouTube</a>

Sin target, se abre en la misma pestaña.

title: Muestra un tooltip (texto emergente) al pasar el ratón.

   <a href="https://www.wikipedia.org" title="Enciclopedia libre">Wikipedia</a>

id: Para enlazar a un punto dentro de la misma página.

<a href="#seccion1">Ir a Sección 1</a>
   <!-- Más abajo en la página -->
   <h2 id="seccion1">Sección 1</h2>

Ejemplo práctico:

<p>Visita <a href="https://www.github.com" target="_blank" title="Código y más">GitHub</a> para proyectos geniales.</p>

Incorporación de Imágenes: Dale Vida Visual

La etiqueta <img> te permite añadir imágenes a tu página. Es como pegar fotos en un álbum digital. A diferencia de otras etiquetas, <img> es un elemento vacío: no tiene contenido ni cierre (no necesitas </img>), pero usa atributos para funcionar.

¿Cómo se usa?

Solo apertura: <img>
Atributos clave:
src: La ruta o URL de la imagen.
alt: Texto alternativo si la imagen no carga o para accesibilidad.

Ejemplo básico:

<img src="perrito.jpg" alt="Un perrito feliz">

src="perrito.jpg": La imagen debe estar en la misma carpeta que tu HTML (o usa una URL completa como https://...).
alt="Un perrito feliz": Si la imagen no carga, se muestra este texto; también lo leen los lectores de pantalla.

Los Atributos – el Tamaño de las Imágene

Los atributos width (ancho) y height (alto) te permiten decidir cómo de grande o pequeña se ve una imagen en tu página. Por defecto, si no los pones, la imagen se muestra en su tamaño original, pero ajustarlos es clave para que tu web se vea como quieres.

Usando píxeles (valores absolutos)

La forma más común de usar width y height es con píxeles (px), que es una medida fija. Es como decirle al navegador: «Quiero que esta imagen tenga exactamente este tamaño».

<img src="perrito.jpg" alt="Un perrito feliz">
<img src="perrito.jpg" alt="Un perrito feliz" width="200" height="150">

ejemplo codigo dos perrito de distinto tamaño

width="200": La imagen será 200 píxeles de ancho.
height="150": 150 píxeles de alto.
Resultado: Una imagen rectangular de 200×150 píxeles.

Consejo:

Si solo pones uno (digamos width="200"), el navegador ajusta el otro proporcionalmente para no deformar la imagen. Pero es mejor poner ambos para tener control total.

Usando porcentajes (valores relativos)

También puedes usar porcentajes (%) en width y height, lo que hace que el tamaño sea relativo al contenedor donde está la imagen (como un <div> o el <body>). Esto es genial para que tu web se adapte a diferentes pantallas, como en celulares o tablets.

Ejemplo con porcentajes:

<div style="width: 500px;">
    <img src="perrito.jpg" alt="perrito feliz" width="50%" height="50%">
</div>

El <div> tiene 500 píxeles de ancho.
width="50%": La imagen ocupa el 50% del ancho del <div>, o sea, 250 píxeles.
height="50%": Aquí hay un truco: el porcentaje del alto suele basarse en el ancho del contenedor si no se define un alto explícito, pero puede no comportarse como esperas sin CSS adicional. Normalmente, usa píxeles para height si buscas precisión.

Ejemplo más realista:

<body>
    <img src="flor.jpg" alt="Una flor" width="100%">
</body>

width="100%": La imagen se estira para ocupar el 100% del ancho de la página (el <body>).
Sin height, se ajusta proporcionalmente.

Combinando píxeles y porcentajes

Puedes mezclarlos según lo que necesites:

<img src="perrito.jpg" alt="Un perro" width="50%" height="200">

Ancho: 50% del contenedor.
Alto: 200 píxeles fijos.

Advertencia:

Proporciones: Si cambias solo width o height con porcentajes o píxeles sin cuidar la proporción original, la imagen puede verse estirada o aplastada. Usa ambos o deja que el navegador calcule uno automáticamente.
CSS es mejor para esto: Aunque width y height funcionan, en proyectos reales se usa CSS para más control (lo veremos más adelante).

Ejemplo deformado (¡evita esto!):

<img src="perrito.jpg" alt="perrito feliz" width="300" height="50">

Resultado: Un perro aplastado porque el alto es muy pequeño comparado con el ancho.

Rutas Relativas – Encontrando tus Imágenes

El atributo src (source) le dice al navegador dónde está la imagen. Puede ser una URL completa (como https://...) o una ruta relativa, que depende de dónde está tu archivo HTML. Las rutas relativas son súper comunes porque te permiten usar imágenes locales sin depender de internet, pero pueden confundir al principio. Vamos a desglosarlo como si fuera un mapa.

¿Qué es una ruta relativa?

Es la dirección de la imagen en relación a la ubicación de tu archivo HTML. Imagina que tu HTML es una persona parada en un lugar, y la imagen es algo que tiene que encontrar cerca.

Caso 1: Misma carpeta

Si la imagen está en la misma carpeta que tu documento HTML:

<img src="perrito.jpg" alt="Perro">

src="perrito.jpg": Solo pones el nombre del archivo (y su extensión: .jpg, .png, etc.).
Ejemplo: Si tienes index.html y perrito.jpg en C:/MiWeb/, funciona directo.

Caso 2: Subcarpeta

Si la imagen está en una carpeta dentro de la misma ubicación que tu HTML (digamos, una carpeta llamada «imágenes»):

<img src="imágenes/perrito.png" alt="Perrito">

src="imágenes/perrito.png": Le dices «entra a la carpeta ‘imágenes’ y busca ‘perrito.png'».
Ejemplo: C:/MiWeb/index.html y C:/MiWeb/imágenes/perrito.png.

Caso 3: Carpeta superior

Si tu HTML está dentro de una subcarpeta y la imagen está afuera, en la carpeta principal:

<img src="../perrito.jpg" alt="Perrito">

../: Significa «sube un nivel» (sal de la carpeta actual).
Ejemplo: C:/MiWeb/html/index.html y C:/MiWeb/perrito.jpg.

Caso 4: Más niveles

Si necesitas subir varios niveles o entrar a otras carpetas:

<img src="../../fotos/perrito.jpg" alt="perrito">

../../: Sube dos niveles, luego entra a «fotos».
Ejemplo: C:/MiWeb/html/paginas/index.html y C:/MiWeb/fotos/perrito.jpg.

Ejemplo práctico con estructura de carpetas

Imagina esta estructura:

MiWeb/
├── index.html
├── imágenes/
│   ├── gato.jpg
│   └── perro.png
└── páginas/
    └── about.html

En index.html (raíz):

<img src="imágenes/gato.jpg" alt="Gato" width="50%">

Busca en la subcarpeta «imágenes».

En about.html (dentro de «páginas»):

<img src="../imágenes/perro.png" alt="Perro" width="200" height="150">

../ sube a «MiWeb», luego entra a «imágenes».

Consejo:

Organiza tus archivos: Guarda las imágenes en una carpeta como «imágenes» o «assets» para no perderte.
Prueba en tu computadora: Crea un HTML y una carpeta con una imagen, y juega con rutas como imágenes/foto.jpg o ../foto.jpg.
Errores comunes: Si ves un ícono roto, revisa que el nombre y la ruta sean correctos (¡cuidado con mayúsculas o espacios!).

Ejemplo Completo Ampliado

Vamos a combinar tamaños y rutas relativas en una página:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Álbum</title>
</head>
<body>
    <!-- Título -->
    <h1>Mi Álbum de Viajes</h1>

    <!-- Imagen en la misma carpeta -->
    <p>Una foto local:<br>
    <img src="perrito.jpg" alt="Perrito" width="300" height="200"></p>

    <!-- Imagen en subcarpeta con porcentaje -->
    <p>Desde una carpeta:<br>
    <img src="foto/montaña.png" alt="Montaña nevada" width="50%"></p>

    <!-- Imagen con enlace -->
    <p>Más detalles:<br>
    <a href="https://es.wikipedia.org/wiki/Monta%C3%B1a#/media/Archivo:Mount_Logan.jpg">
        <img src="foto/montaña.jpg" alt="Río tranquilo" width="100%" height="150">
    </a></p>
</body>
</html>

¿Qué ves?

Una imagen de 300×200 píxeles desde la misma carpeta.
Una imagen que ocupa el 50% del ancho desde «fotos».
Una imagen clicable al 100% del ancho con alto fijo.

Consejos

Píxeles vs. Porcentajes: Usa píxeles para tamaños exactos y porcentajes para adaptarse a la pantalla.
Prueba tamaños: Cambia width y height en tu HTML y recarga el navegador para ver cómo queda.
Rutas relativas: Dibuja un mapa mental de tus carpetas si te pierdes (HTML -> sube -> entra).
Guarda proporciones: Si usas porcentajes, prueba CSS después para más control.
width y height: Ajusta el tamaño con píxeles (fijo) o porcentajes (relativo al contenedor). Combínalos con cuidado para no deformar.
Rutas relativas: Usa src para encontrar imágenes según dónde está tu HTML (foto.jpg, imágenes/foto.jpg, ../foto.jpg).

Saltos de Línea: Espacio a Tu Medida

La etiqueta <br> (de «break») fuerza un salto de línea dentro de un elemento, como <p>. Es un elemento de línea y vacío (sin cierre), ideal para separar texto sin crear un nuevo párrafo.

¿Cómo se usa?

Solo: <br>
No lleva contenido ni atributos obligatorios.

Ejemplo básico:

<p>Hola, soy Juan<br>¿Y tú?</p>

Sin <br>, todo estaría en una sola línea.

¿Cuándo usarlo?

Para separar líneas dentro del mismo bloque (como direcciones o poemas).
Si quieres un espacio mayor, usa varios: <br><br>.

Ejemplo práctico:

<p>Dirección:<br>Calle Falsa 123<br>Ciudad, País</p>

Combinándolas: Ejemplo Completo

Vamos a armar una página que use <a>, <img> y <br> juntas, como si fuera un mini proyecto:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Galería</title>
</head>
<body>
    <!-- Título y bienvenida -->
    <h1>Mi Galería de Fotos</h1>
    <p>Bienvenidos a mi colección:</p>

    <!-- Imagen con enlace -->
    <p>Mira esta foto:<br>
    <a href="https://www.nationalgeographic.com" target="_blank">
        <img src="https://wallpapers.com/images/featured-full/hermosa-montana-ws98i8hty7cg93pw.jpg" alt="Naturaleza" width="200" height="200">
    </a><br>
    Haz clic en la imagen para ver más.</p>

    <!-- Lista de enlaces -->
    <h2>Otros sitios interesantes</h2>
    <ul>
        <li><a href="https://www.wikipedia.org">Wikipedia</a></li>
        <li><a href="https://www.github.com" target="_blank">GitHub</a></li>
    </ul>
</body>
</html>

¿Qué ves?

Un título «Mi Galería de Fotos».
Un párrafo con una imagen clicable que lleva a National Geographic (en pestaña nueva).
<br> separa el texto y la imagen para que no se amontonen.
Una lista de enlaces a otros sitios.

Consejos

<a>: Prueba enlaces a tus sitios favoritos y juega con target="_blank".
<img>: Usa imágenes pequeñas al principio (descarga una o usa URLs como https://via.placeholder.com/100). No olvides alt.
<br>: Úsalo cuando quieras un salto rápido, pero si necesitas más espacio, considera <p> para párrafos separados.
Combina: Haz que una imagen sea un enlace wrappeándola con <a>.

En Resumen

<a>: Crea enlaces para navegar, con href como estrella y extras como target o title.
<img>: Añade imágenes con src y alt, ajustando tamaño si quieres.
<br>: Da saltos de línea simples dentro de un bloque.

Estas etiquetas son como pinceles para tu lienzo web: te conectan, decoran y organizan. ¿Te animas a hacer una página con tus propias imágenes y enlaces? Si quieres más ejemplos o tienes dudas, ¡déjame un comentario.

Etiquetas de contenido

Creación de secciones