Te presentamos una página web HTML: Mi Colección de Cine. Cine en HTML, que podrás ver como funciona, y también tendrás la posibilidad de copiar el código completo a continuación.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Plataforma de Videos</title>
<style>
body {
font-family: sans-serif;
margin: 0;
background-color: #f0f0f0;
}
.contenedor-principal {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.videos-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.video-contenedor {
width: calc(33.33% - 20px); /* 3 columnas */
margin-bottom: 20px;
border: 1px solid #ddd;
box-sizing: border-box;
position: relative; /* Para el posicionamiento del iframe */
overflow: hidden; /* Evita desbordamientos */
}
.video-titulo {
font-weight: bold;
margin-bottom: 5px;
}
.video-contenedor::before {
content: "";
display: block;
padding-top: 56.25%; /* Aspect ratio 16:9 (9/16 * 100) */
}
.video-contenedor iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Media Queries para Responsive Design */
@media (max-width: 768px) {
.video-contenedor {
width: calc(50% - 20px); /* 2 columnas en tablets */
}
}
@media (max-width: 500px) {
.video-contenedor {
width: 100%; /* 1 columna en móviles */
}
}
</style>
</head>
<body>
<div class="contenedor-principal">
<h1>Mi Colección de Cine</h1>
<div class="videos-grid">
<div class="video-contenedor">
<h2 class="video-titulo">Video 1: Rick Astley</h2>
<iframe src="https://www.youtube.com/embed/Q0eLHwYjFUE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Nunca te rindas, nunca te abandones, nunca corras y te desampares.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 2: Ejemplo 2</h2>
<iframe src="https://www.youtube.com/embed/6HYyVlZh_ho" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Una breve descripción.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 3: Ejemplo 3</h2>
<iframe src="https://www.youtube.com/embed/mOy-v9LlERI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Descripción más larga para probar el ajuste.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 4: Rick Astley</h2>
<iframe src="https://www.youtube.com/embed/Om1jS2ZSnCU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Nunca te rindas, nunca te abandones, nunca corras y te desampares.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 5: Rick Astley</h2>
<iframe src="https://www.youtube.com/embed/zddu2dFOdJg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Nunca te rindas, nunca te abandones, nunca corras y te desampares.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 6: Ejemplo 3</h2>
<iframe src="https://www.youtube.com/embed/OhiHyNIpPGk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Descripción más larga para probar el ajuste.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 7: Rick Astley</h2>
<iframe src="https://www.youtube.com/embed/1QyNaF5O_a4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Nunca te rindas, nunca te abandones, nunca corras y te desampares.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 8: Rick Astley</h2>
<iframe src="https://www.youtube.com/embed/vyU0Tj3TpQk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Nunca te rindas, nunca te abandones, nunca corras y te desampares.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 9: Ejemplo 3</h2>
<iframe src="https://www.youtube.com/embed/qcWOl3uw8os" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Descripción más larga para probar el ajuste.</p>
</div>
</div>
</div>
</body>
</html>Este código define una página web que muestra una colección de videos. Vamos a analizarlo sección por sección:
Declaración DOCTYPE:
<!DOCTYPE html>: Esta línea le dice al navegador web que este documento está escrito en HTML5.
Elemento HTML:
<html lang="es">: Este es el elemento raíz del documento HTML. Define el idioma del documento como español («es»).
Sección Head (Cabeza):
<head>: Esta sección contiene metainformación sobre la página web que no se muestra directamente en la página.<meta charset="UTF-8">: Esta línea especifica la codificación de caracteres utilizada por la página web, que en este caso es UTF-8. Esto permite que la página web muestre correctamente caracteres de diferentes idiomas.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Esta línea ayuda a que la página web ajuste su diseño a diferentes tamaños de pantalla. Asegura que la página web sea responsive y se vea bien en computadoras de escritorio, tablets y dispositivos móviles.<title>Mi Plataforma de Videos</title>: Esta línea define el título de la página web, que se mostrará en la pestaña del navegador.
CSS Style (Estilo):
<style>: Esta sección contiene código CSS que define los estilos aplicados a los elementos HTML.- Los estilos definen varios aspectos de la apariencia de la página web, incluyendo:
- La familia de fuentes para el texto del cuerpo.
- Los márgenes y el color de fondo para el cuerpo.
- Estilos para el contenedor principal (
contenedor-principal) incluyendo su ancho máximo, márgenes, padding, color de fondo y un sutil efecto de sombra. - Estilos para la cuadrícula de videos (
videos-grid) incluyendo cómo se muestran los videos en un diseño de cuadrícula con espacio entre ellos. - Estilos para los contenedores de video individuales (
video-contenedor) incluyendo su ancho (calculado para crear un diseño de 3 columnas en pantallas más grandes), márgenes, bordes y posicionamiento. - Estilos para los títulos de los videos (
video-titulo) para que aparezcan en negrita y añadir algo de espacio debajo. - Un estilo especial usando el pseudo-elemento
::beforepara crear una relación de aspecto fija (16:9) para los contenedores de video. Esto asegura que los videos mantengan sus proporciones incluso si las descripciones de abajo tienen diferentes longitudes. - Estilos para los iframes que contienen los videos de YouTube, asegurando que llenen todo el contenedor de video.
- Las media queries (@media) se utilizan para definir ajustes de diseño responsive para pantallas más pequeñas:
- En pantallas más pequeñas de 768px (tablets), los contenedores de video se ajustan a un diseño de 2 columnas.
- En pantallas más pequeñas de 500px (móviles), los contenedores de video se vuelven de ancho completo (1 columna).
- Los estilos definen varios aspectos de la apariencia de la página web, incluyendo:
Sección Body (Cuerpo):
<body>: Esta sección contiene el contenido que se mostrará en la página web.<div class="contenedor-principal">: Este es el contenedor principal para el contenido de la página web. Tiene estilos aplicados basados en la clase «contenedor-principal» definida en la sección CSS.<h1>Mi Colección de Cine</h1>: Esta línea define un encabezado («h1») con el texto «Mi Colección de Cine».<div class="videos-grid">: Este es otro contenedor con la clase «videos-grid» que define cómo se muestran los elementos de video en un diseño de cuadrícula.- Dentro del contenedor de la cuadrícula, hay múltiples elementos
<div>con la clase «video-contenedor». Cada uno de estos representa un video individual. - Cada contenedor de video incluye:
- Un elemento
<h2>con la clase «video-titulo» para mostrar el título del video. - Un elemento
<iframe>para incrustar el video de YouTube. La fuente del iframe es una URL de video de YouTube. - Un elemento
<p>para mostrar una descripción del video.
- Un elemento
- Dentro del contenedor de la cuadrícula, hay múltiples elementos
En general, este código crea una página web con un diseño responsive que muestra una colección de videos de YouTube. Los videos están organizados en un diseño de cuadrícula con títulos y descripciones.
Haz clic en Ver Demo, o en el logotipo EE3.ES
