Solución Completa para el Examen de Blog de Cocina con HTML y CSS

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.

close up photo of programming of codes
Photo by luis gomes on Pexels.com

Deja un comentario

Información básica sobre protección de datos Ver más

  • Responsable: Tomas Gonzalez.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

error: Content is protected !!

Descubre más desde Tomás González: Formador y Desarrollador Web

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo

Este sitio web utiliza cookies, si necesitas más información puedes visitar nuestra política de privacidad    Ver
Privacidad