Enriqueciendo tu Página Web 🎬🌍

Ahora que ya tienes tu página con estructura HTML y estilos en CSS, es el momento de dar un paso más y convertirla en una web mucho más completa y visual.

A partir del código que has desarrollado en las prácticas anteriores, debes ampliarlo incorporando nuevos contenidos multimedia:

🖼 Imágenes (pueden ser propias o externas).
📍 Un mapa de Google Maps relacionado con la temática (por ejemplo, la localización de un rodaje o un cine famoso).
🎥 Un vídeo, que puede ser propio o incrustado desde YouTube (por ejemplo, un tráiler).

El objetivo no es solo “añadir cosas”, sino integrarlas correctamente en la estructura de la página, manteniendo un diseño claro, organizado y coherente con la temática. Piensa en la experiencia del usuario: que la página sea visualmente atractiva, fácil de leer y que los nuevos elementos aporten valor al contenido.

Estás dejando de hacer una página básica… y empezando a crear una web mucho más real. 🚀

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera web</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #111;
            color: #f2f2f2;
        }

        h1 {
            color: #ffd700;
            text-align: center;
        }

        h2 {
            color: #ffcc66;
        }

        h3 {
            color: #cccccc;
        }

        p {
            font-size: 16px;
        }

        ul, ol {
            background-color: #1c1c1c;
            border: 1px solid #444;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background-color: #1c1c1c;
        }

        th, td {
            border: 1px solid #444;
            padding: 8px;
        }

        th {
            background-color: #222;
            color: #ffd700;
        }

        img {
            width: 400px;
            border: 1px solid #444;
        }

        iframe {
            width: 600px;
            height: 350px;
            border: 1px solid #444;
        }
    </style>
</head>

<body>

    <h1>El Mundo del Cine</h1>
    <p>El cine es una de las formas de entretenimiento más influyentes del mundo. A través de las películas podemos vivir historias increíbles y conocer realidades diferentes.</p>

    <h2>Géneros Cinematográficos</h2>
    <ul>
        <li>Acción</li>
        <li>Comedia</li>
        <li>Drama</li>
        <li>Ciencia ficción</li>
        <li>Terror</li>
    </ul>

    <h2>Películas destacadas</h2>

    <table>
        <tr>
            <th>Película</th>
            <th>Género</th>
            <th>Año</th>
        </tr>
        <tr>
            <td>Avatar</td>
            <td>Ciencia ficción</td>
            <td>2009</td>
        </tr>
        <tr>
            <td>Titanic</td>
            <td>Drama</td>
            <td>1997</td>
        </tr>
    </table>

    <h2>Una Sala de Cine</h2>
    <p>Sala de Cine3 Cinemex PLatino en México</p>

    <img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Cinemex_Platino_Mexico.jpg" alt="Sala de Cine">
    <p>Fuente: <a href="https://es.wikipedia.org/wiki/Sala_de_cine#/media/Archivo:Cinemex_Platino_Mexico.jpg">Wikimedia</a></p>

    <h2>Mapa del cine</h2>
    <p>Cinemex Platino de México</p>

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3763.908121471879!2d-99.1727841!3d19.3731306!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d1ff99fe735b97%3A0x8ae6c4f6389b977b!2sCinemex%20Platino!5e0!3m2!1ses!2ses!4v1770985879171!5m2!1ses!2ses" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

    <h2>Tráiler de Hamnet</h2>
    <p>Ejemplo de vídeo incrustado desde YouTube.</p>

    <iframe width="560" height="315" src="https://www.youtube.com/embed/Ith7z6FzLe0?si=gJQzku6rAAX-oVnL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

</body>
</html>

💻 <h1>Los Constructores de la Web</h1> 🛠️💻

📝 Práctica 2

Enriqueciendo tu Página Web 🎬🌍