🎬 Guía Práctica: Tarjetas de Contenido y Multimedia (Paso 3)

¡Llegó el momento de darle vida a tu sitio! Ya sabes crear la estructura (HTML) y darle color (CSS). Hoy aprenderás a agrupar contenido en Tarjetas (Cards) y a incrustar imágenes y videos reales de YouTube dentro de tu página.

🚀 Las 3 nuevas herramientas de hoy:

📦 <div>: Es un contenedor o "caja invisible" que nos sirve para agrupar varios elementos (título, foto, texto, botón) dentro de una tarjeta con sombra y bordes redondeados.
🖼️ <img>: Sirve para insertar fotos en la página a través del atributo src (dirección URL de la imagen).
🎥 <iframe>: Es una "ventana" que nos permite incrustar contenidos de otros sitios web, como reproductores de YouTube.

1. 📺 ¿Cómo meter un video de YouTube en tu web?

No necesitas descargar el video. YouTube te da el código listo para copiar y pegar:

Entra a YouTube desde tu navegador y abre cualquier video que te guste.
Haz clic en el botón Compartir (debajo del reproductor).
Elige la opción Insertar (tiene el ícono </>).
Copia todo el bloque de código que empieza con <iframe... y pégalo dentro de tu archivo local.

2. 💻 Código Base del Paso 3 (`ejemplomm.html`)

Ver ejemplo

Abre el Bloc de notas, crea un archivo nuevo o modifica el anterior agregando esta estructura dentro del <body>:

<!-- Contenedor principal con forma de tarjeta -->
<div class="tarjeta">

    <!-- Foto de portada -->
    <img src="https://picsum.photos/400/220" alt="Foto de mi tarjeta">

    <!-- Título de la tarjeta -->
    <h2>Mi Canción o Video Favorito</h2>

    <!-- Texto descriptivo -->
    <p>Este es mi video recomendado del día incrustado desde YouTube.</p>

    <!-- Reproductor de YouTube incrustado -->
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>

    <!-- Botón interactivo -->
    <button class="boton-tarjeta">¡Me Gusta!</button>

</div>

3. 🎯 Tu Misión: Crea tu Tarjeta Multimedia Temática

Usa el Bloc de notas para transformar la tarjeta genérica en un perfil sobre algo que te apasione (tu banda favorita, un streamer, un videojuego, un deporte o una película):

1. Cambia la Imagen: Busca una foto en Google Imágenes, haz clic derecho sobre ella, selecciona "Copiar dirección de imagen" y reemplázala dentro del atributo src="..." de la etiqueta <img>.
2. Elige tu Video: Ve a YouTube, busca un video sobre tu tema, copia su código de <iframe> e insértalo en tu tarjeta.
3. Edita los Textos: Personaliza el título <h2>, el párrafo <p> y el texto del botón <button>.
4. Ajusta los Estilos en CSS: En la sección <style>, cambia el color de fondo de la tarjeta (background-color), el color del botón y el grosor de la sombra (box-shadow).

💡 Recordatorio clave: Guarda los cambios en el Bloc de notas con Control + G y recarga tu navegador con la tecla F5 para ver tu tarjeta multimedia en vivo.