Construcción de una Página Web con HTML y CSS
- Agrupamiento:
- En parejas
Objetivo: Crear una página web sobre una temática de interés personal, aplicando conocimientos básicos de HTML y CSS. La práctica se desarrollará en 4 sesiones.
Sesión 1: Estructura Básica de la Página Web
- Cread un documento HTML que incluya la estructura básica de una página web.
- Definid el tema de la página (por ejemplo, deportes, música, cine, etc.) e incluíd el contenido básico: título, párrafos, y encabezados iniciales que presenten la temática.
Ejemplo:
<html>
<head>
<title>Mi Página sobre Cine</title>
</head>
<body>
<h1>El Mundo del Cine</h1>
<p>El cine es una de las formas de arte y entretenimiento más influyentes del mundo. A través de las películas podemos viajar a otros lugares, conocer nuevas historias y vivir emociones intensas.</p>
<h2>Géneros Cinematográficos</h2>
<p>Existen muchos géneros dentro del cine, como la acción, la comedia, el drama o la ciencia ficción. Cada uno ofrece experiencias diferentes y conecta con distintos tipos de público.</p>
<h2>Mi Opinión sobre el Cine</h2>
<p>Personalmente, creo que el cine no solo sirve para entretener, sino también para transmitir valores, hacernos reflexionar y mostrarnos realidades distintas a la nuestra.</p>
</body>
</html>
Sesión 2: Elementos Avanzados
- Añadid elementos avanzados para enriquecer el contenido:
- Tablas para mostrar información organizada.
- Listas (ordenadas o no ordenadas) para resaltar puntos importantes.
- Encabezados de diferentes niveles para estructurar secciones.
- Revisad y organizad el contenido para que esté claro y bien estructurado.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Mi primera web</title>
</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>
<p>Existen muchos géneros dentro del cine, cada uno con características propias.</p>
<h3>Algunos géneros populares</h3>
<ul>
<li>Acción</li>
<li>Comedia</li>
<li>Drama</li>
<li>Ciencia ficción</li>
<li>Terror</li>
</ul>
<h3>¿Cómo elegir una buena película?</h3>
<ol>
<li>Buscar el género que más te guste.</li>
<li>Revisar opiniones o valoraciones.</li>
<li>Ver el tráiler.</li>
<li>Comprobar la duración y el año de estreno.</li>
</ol>
<h2>Películas destacadas</h2>
<p>En la siguiente tabla se muestran algunas películas conocidas y su género:</p>
<table border="1">
<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>
<tr>
<td>El Caballero Oscuro</td>
<td>Acción</td>
<td>2008</td>
</tr>
</table>
</body>
</html>
Sesión 3: Estilos con CSS
- Utilizad CSS para dar estilo a la página:
- Cambiad colores, fuentes y tamaños de texto.
- Aplicad fondos, márgenes, y bordes para una estética visual atractiva y adecuada a la temática.
- Aseguraos de que el diseño sea sencillo, claro y que mejore la experiencia del usuario.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Mi primera web</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #111;
color: #f2f2f2;
margin: 30px;
}
h1 {
color: #ffd700;
text-align: center;
border-bottom: 3px solid #ffd700;
padding-bottom: 10px;
}
h2 {
color: #ffcc66;
margin-top: 30px;
}
h3 {
color: #cccccc;
margin-top: 20px;
}
p {
font-size: 16px;
line-height: 1.5;
}
ul, ol {
background-color: #1c1c1c;
padding: 15px 30px;
border-left: 5px solid #ffd700;
border-radius: 8px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
background-color: #1c1c1c;
}
th, td {
border: 1px solid #444;
padding: 10px;
text-align: left;
}
th {
background-color: #222;
color: #ffd700;
}
td {
color: #f2f2f2;
}
</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>
<p>Existen muchos géneros dentro del cine, cada uno con características propias.</p>
<h3>Algunos géneros populares</h3>
<ul>
<li>Acción</li>
<li>Comedia</li>
<li>Drama</li>
<li>Ciencia ficción</li>
<li>Terror</li>
</ul>
<h3>¿Cómo elegir una buena película?</h3>
<ol>
<li>Buscar el género que más te guste.</li>
<li>Revisar opiniones o valoraciones.</li>
<li>Ver el tráiler.</li>
<li>Comprobar la duración y el año de estreno.</li>
</ol>
<h2>Películas destacadas</h2>
<p>En la siguiente tabla se muestran algunas películas conocidas y su género:</p>
<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>
<tr>
<td>El Caballero Oscuro</td>
<td>Acción</td>
<td>2008</td>
</tr>
</table>
</body>
</html>
Entrega Final:
Al finalizar la práctica, revisad que la página web esté completa y organizada, y que todos los elementos (texto, tablas, listas y estilos) estén bien integrados. Subid los archivos (.html y .css) al porfolio de la unidad.