En este artículo, vamos a resolver el ejercicio propuesto para crear una página web de una agencia de viajes ficticia. Usaremos HTML para estructurar el contenido y CSS para dar estilo a la página, asegurándonos de que sea accesible y responsiva, adaptándose a diferentes dispositivos.
Paso 1: Estructura HTML
Comenzamos definiendo la estructura HTML de nuestra página. Crearemos varias secciones, como la cabecera, la bienvenida, los destinos, las ofertas especiales y el formulario de contacto. Usaremos etiquetas semánticas para hacer que el código sea claro y fácil de entender.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="Agencia de viajes con las mejores ofertas">
<meta name="keywords" content="viajes, destinos, ofertas de viaje, agencia de viajes">
<meta name="author" content="Nombre del Estudiante">
<title>Agencia de Viajes</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Cabecera y Navegación -->
<header>
<h1>Agencia de Viajes Wanderlust</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#destinos">Destinos</a></li>
<li><a href="#ofertas">Ofertas</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<!-- Sección de Bienvenida -->
<section id="inicio">
<h2>Bienvenidos a Wanderlust</h2>
<p>Explora el mundo con nosotros y descubre destinos increíbles a precios inigualables. Tu aventura comienza aquí.</p>
</section>
<!-- Sección de Destinos -->
<section id="destinos">
<h2>Destinos Populares</h2>
<div class="destino">
<img src="paris.jpg" alt="Torre Eiffel en París">
<h3>París</h3>
<p>Descubre la ciudad del amor, su historia y su arte.</p>
</div>
<div class="destino">
<img src="tokio.jpg" alt="Paisaje urbano de Tokio">
<h3>Tokio</h3>
<p>Vive la experiencia de la cultura japonesa en una ciudad vibrante.</p>
</div>
<div class="destino">
<img src="newyork.jpg" alt="Vista del skyline de Nueva York">
<h3>Nueva York</h3>
<p>Explora la ciudad que nunca duerme y sus famosos monumentos.</p>
</div>
</section>
<!-- Sección de Ofertas -->
<section id="ofertas">
<h2>Ofertas Especiales</h2>
<div class="oferta">
<h3>París desde 499€</h3>
<p>Incluye vuelo y hotel. ¡Reserva ahora!</p>
<button>Reservar</button>
</div>
<div class="oferta">
<h3>Tokio desde 899€</h3>
<p>Vuelos de ida y vuelta. ¡No te lo pierdas!</p>
<button>Reservar</button>
</div>
</section>
<!-- Formulario de Contacto -->
<section id="contacto">
<h2>Contacto</h2>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" required>
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" required>
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje"></textarea>
<button type="submit">Enviar</button>
</form>
</section>
</body>
</html>Paso 2: Diseño CSS
Con la estructura HTML completa, ahora pasamos al CSS para estilizar la página y asegurarnos de que se vea moderna y profesional.
Definir Variables y Estilos Básicos
Primero, definimos variables CSS para colores y fuentes, lo que facilita realizar cambios en el diseño.
:root {
--color-primario: #2ecc71;
--color-secundario: #3498db;
--color-fondo: #f5f5f5;
--color-texto: #333;
--fuente-principal: 'Roboto', sans-serif;
}
body {
font-family: var(--fuente-principal);
color: var(--color-texto);
background-color: var(--color-fondo);
margin: 0;
padding: 0;
}
h1, h2, h3 {
color: var(--color-primario);
}Estilos para la Cabecera y Navegación
header {
background-color: var(--color-secundario);
color: white;
padding: 1em;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}Diseño de Secciones con Flexbox y Grid
Usamos Flexbox para organizar las secciones y Grid para la galería de destinos.
section {
padding: 2em;
text-align: center;
}
.destino {
display: inline-block;
margin: 1em;
width: 30
text-align: center;
}
.destino img {
width: 100
height: auto;
border-radius: 10px;
}
.oferta {
background-color: var(--color-primario);
color: white;
padding: 1em;
margin: 1em;
border-radius: 5px;
}
button {
background-color: var(--color-secundario);
color: white;
border: none;
padding: 0.5em 1em;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #1abc9c;
}Diseño Responsivo con Media Queries
Finalmente, añadimos @media queries para que el sitio se adapte a dispositivos móviles.
@media (max-width: 768px) {
.destino {
width: 100
}
nav ul {
display: block;
}
nav ul li {
display: block;
margin: 10px 0;
}
}Resultado Final
Al combinar el HTML y el CSS, hemos creado una página web para una agencia de viajes ficticia que es accesible, visualmente atractiva y fácil de navegar. Esta estructura y estilo pueden adaptarse para otros proyectos similares, proporcionando una base sólida en HTML y CSS.
