Aquí tienes una solución paso a paso para crear la página web de un blog de cocina ficticio, siguiendo los requisitos del enunciado. Utilizaremos HTML para estructurar el contenido y CSS para estilizar la página, asegurando que sea responsiva y accesible.
1. Estructura HTML
A continuación, definimos la estructura HTML de la página web. Incluimos todas las secciones necesarias: la cabecera y navegación, la bienvenida, la sección de recetas, y el formulario de contacto.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="Blog de cocina con recetas caseras y consejos culinarios">
<meta name="keywords" content="cocina, recetas, blog de cocina, cocina casera">
<meta name="author" content="Nombre del Estudiante">
<title>Sabores y Sazones</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Cabecera y Navegación -->
<header>
<h1>Sabores y Sazones</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#sobre-mi">Sobre Mí</a></li>
<li><a href="#recetas">Recetas</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<!-- Sección de Presentación -->
<section id="inicio">
<h2>Bienvenidos a Sabores y Sazones</h2>
<p>Un blog para los amantes de la cocina casera, donde comparto mis recetas favoritas y trucos para mejorar tus platillos.</p>
</section>
<!-- Sección de Recetas -->
<section id="recetas">
<h2>Recetas Populares</h2>
<div class="receta">
<img src="tarta.jpg" alt="Tarta de manzana">
<h3>Tarta de Manzana</h3>
<p>Una deliciosa receta casera para los amantes de los postres.</p>
<a href="#">Ver receta completa</a>
</div>
<div class="receta">
<img src="pasta.jpg" alt="Pasta con salsa de tomate">
<h3>Pasta Casera</h3>
<p>Una pasta fácil de hacer con una salsa de tomate deliciosa.</p>
<a href="#">Ver receta completa</a>
</div>
<div class="receta">
<img src="ensalada.jpg" alt="Ensalada fresca">
<h3>Ensalada Fresca</h3>
<p>Ideal para el verano, llena de sabor y nutrientes.</p>
<a href="#">Ver receta completa</a>
</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>2. Diseño CSS
A continuación, creamos el archivo CSS styles.css para darle estilo a la página.
Definir Variables y Estilos Básicos
Definimos variables CSS para colores y fuentes y aplicamos los estilos básicos.
:root {
--color-fondo: #fdf6e3;
--color-texto: #333;
--color-primario: #d35400;
--fuente-principal: 'Merriweather', serif;
--fuente-secundaria: 'Open Sans', sans-serif;
}
body {
font-family: var(--fuente-secundaria);
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
Estilizamos la cabecera para que se destaque y organizamos el menú de navegación.
header {
background-color: var(--color-primario);
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;
}Estilos para las Secciones y las Recetas
Usamos Flexbox y CSS Grid para organizar las secciones y la disposición de las recetas en cuadrícula.
section {
padding: 2em;
text-align: center;
}
.receta {
display: inline-block;
margin: 1em;
width: 30%;
text-align: center;
}
.receta img {
width: 100%;
height: auto;
border-radius: 10px;
}
button {
background-color: var(--color-primario);
color: white;
border: none;
padding: 0.5em 1em;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #e67e22;
}Diseño Responsivo con Media Queries
Agregamos @media queries para que el sitio se adapte bien a pantallas más pequeñas.
@media (max-width: 768px) {
.receta {
width: 100%;
}
nav ul {
display: block;
}
nav ul li {
display: block;
margin: 10px 0;
}
}Explicación Final
Esta solución completa crea un blog de cocina ficticio que es visualmente atractivo y completamente responsivo. Con HTML y CSS hemos implementado una estructura clara, un diseño organizado, y hemos seguido prácticas de accesibilidad y SEO.
Gracias por visitar mi blog de informática, mi nombre es Tomás y soy formador y desarrollador web. Si quiere usted dejarme alguna sugerencia, ayuda o quiere un servicio de formación estoy escuchando ofertas en tomas.gonzalez@infogonzalez.com, en Facebook a https://www.facebook.com/Infogonzalez estoy deseando escucharle. Su duda o sugerencia NO molesta.