Este ejercicio práctico está diseñado para ayudarte a consolidar tus habilidades en HTML y CSS mediante la creación de una página web moderna y profesional para un restaurante. La estructura del sitio y su estilo te permitirán aplicar conceptos de diseño responsivo, accesibilidad y organización visual.
Objetivo del Ejercicio
El objetivo es desarrollar una página web que represente el sitio oficial de un restaurante ficticio, mostrando su menú, ubicación y una galería de imágenes. El sitio debe ser atractivo, fácil de navegar y adaptarse bien a dispositivos de diferentes tamaños.
Requisitos del Ejercicio
- Estructura HTML La página debe estar organizada en las siguientes secciones principales:
- Cabecera y Navegación: Incluirá el nombre del restaurante y un menú de navegación con enlaces a las secciones «Inicio», «Menú», «Galería» y «Contacto».
- Sección de Bienvenida: Esta sección tendrá una breve descripción del restaurante, destacando su especialidad y ambiente. Puedes usar un encabezado llamativo y un párrafo.
- Menú del Restaurante: Crea una lista de al menos cinco platos con el nombre del plato, una breve descripción y el precio. Puedes estructurarla con una lista o tabla para facilitar la lectura.
- Galería de Imágenes: Una galería de tres o cuatro imágenes que representen la comida o el ambiente del restaurante. Cada imagen debe tener una breve descripción en el atributo
alt. - Ubicación y Contacto: Incluir un formulario de contacto que permita a los usuarios dejar su nombre, correo electrónico y un mensaje. Añade también una dirección y un mapa de ubicación (puede ser un marcador de posición o una imagen de ejemplo).
- Estilos CSS
- Diseño Responsivo: La página debe verse bien en dispositivos móviles, tabletas y pantallas grandes. Para esto, utiliza
@media queriesy ajusta el diseño según el tamaño de la pantalla. - Diseño Flexible con Flexbox o Grid: Emplea Flexbox y/o Grid para organizar la disposición de las secciones y el contenido interno. La galería de imágenes, por ejemplo, debe mostrarse en una cuadrícula.
- Estética y Paleta de Colores:
- Usa una paleta de colores que se ajuste al estilo del restaurante (colores cálidos para un restaurante clásico o tonos oscuros y elegantes para un restaurante moderno).
- Aplica fuentes que refuercen la identidad del restaurante. Puedes usar Google Fonts para encontrar tipografías que complementen el estilo.
- Animaciones y Transiciones: Aplica efectos
hoveren los enlaces y botones. Las imágenes de la galería también deben tener una ligera transición de escala o sombra para darles un toque dinámico. - Variables CSS: Crea variables CSS para colores y fuentes, de modo que puedas aplicar cambios de estilo de forma rápida y eficiente.
- Buenas Prácticas y Accesibilidad
- Etiquetas Semánticas: Usa etiquetas semánticas HTML5 como
<header>,<section>,<footer>, etc., para hacer el código más claro y accesible. - Etiquetas
altylabel: Agrega texto alternativo a las imágenes y etiquetaslabelen el formulario para mejorar la accesibilidad. - SEO y Metadatos: Asegúrate de incluir etiquetas
metaen el<head>con una descripción breve del restaurante y palabras clave relevantes.
Ejemplo de Estructura HTML y CSS
HTML Básico
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="Restaurante con ambiente acogedor y deliciosa comida">
<meta name="keywords" content="Restaurante, Comida, Menú, Galería">
<meta name="author" content="Nombre del Estudiante">
<title>Restaurante Ficticio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Restaurante [Nombre]</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#menu">Menú</a></li>
<li><a href="#galeria">Galería</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<!-- Agregar secciones aquí -->
</body>
</html>CSS Básico
:root {
--color-fondo: #f5f5f5;
--color-texto: #333;
--color-destacado: #c0392b;
--fuente-principal: 'Lora', serif;
--fuente-secundaria: 'Roboto', sans-serif;
}
body {
font-family: var(--fuente-secundaria);
color: var(--color-texto);
background-color: var(--color-fondo);
}
header {
background-color: var(--color-destacado);
color: white;
padding: 1em;
text-align: center;
}
/* Agregar estilos para secciones y media queries */Criterios de Evaluación
- Organización de la Estructura HTML (20%)
- Estilo CSS y Diseño Responsivo (30%)
- Estética Visual y Uso de Colores (20%)
- Accesibilidad y Buenas Prácticas (15%)
- Código Claro y Comentado (15%)
Este ejercicio es una excelente práctica para aplicar tus conocimientos de HTML y CSS en la creación de una página profesional para un restaurante. ¡Buena suerte!
