Diseño de página web temática sobre la ciudad natal usando HTML estático - Proyecto estudiantil con temática Shenyang, Liaoning (11 páginas)

Introducción al proyecto

Este proyecto corresponde a una tarea académica centrada en el desarrollo web frontend, donde se presenta una página web dedicada a la ciudad de Shenyang, capital de la provincia de Liaoning en China. El diseño utiliza tecnologías fundamentales como HTML, CSS y JavaScript para estructurar y dar estilo al contenido.

El código implementa conceptos clave del diseño web moderno, incluyendo el uso de contenedores <div>, propiedades como margin, padding, border, background, y técnicas de posicionamiento mediante flotantes (float). Además, se emplean efectos visuales con pseudo-clases como :hover para mejorar la interacción del usuario. La estructura sigue un esquema principal dividido en tres áreas: encabezado, contenido central y pie de página, sin requerir funcionalidad avanzada de JavaScript, lo que facilita su comprensión por parte de estudiantes principiantes.

Estructura visual y funcionalidades

La interfaz se organiza en bloques principales:

Menú de navegación superior con enlaces a secciones como inicio, historia local, lugares turísticos y datos personales del autor.
Banner principal mostrando imágenes representativas de la región.
Sección de contenido dividida en módulos informativos sobre historia, cultura y sitios de interés.
Galería de imágenes con enlaces a páginas secundarias detalladas.

El diseño responsive no es parte del alcance inicial pero puede integrarse fácilmente mediante ajustes en las hojas de estilo. Los formularios y tablas se utilizan para mostrar información adicional o recopilar datos del visitante.

Código fuente destacado

Estructura básica HTML


<html lang="zh">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/main.css">
  <title>Shenyang - Ciudad Natal</title>
</head>
<body>
  <header class="top-menu">
    <nav>
      <ul>
        <li><a href="home.html">Inicio</a></li>
        <li><a href="about.html">Sobre mí</a></li>
        <li><a href="places.html">Sitios históricos</a></li>
        <li><a href="contact.html">Contacto</a></li>
      </ul>
    </nav>
  </header>

  <section class="hero-banner">
    <img src="assets/banner.jpg" alt="Vista panorámica de Shenyang">
  </section>

  <main class="content-area">
    <article class="intro">
      <h2>Mi ciudad natal</h2>
      <p>Nombre: Juan Pérez<br>
         Universidad: Universidad Tecnológica de Liaoning<br>
         Carrera: Ingeniería Informática</p>
    </article>

    <article class="history">
      <h2>Historia de Shenyang</h2>
      <p>Shenyang es la capital de Liaoning, conocida por su rica herencia cultural...</p>
    </article>

    <section class="gallery">
      <h2>Lugares emblemáticos</h2>
      <div class="image-grid">
        <a href="palace.html"><img src="assets/palacio.jpg" alt="Palacio Imperial"></a>
        <a href="mausoleum.html"><img src="assets/mausoleo.jpg" alt="Mausoleo Qing"></a>
        <a href="mansion.html"><img src="assets/mansion.jpg" alt="Residencia Zhang"></a>
        <a href="tombs.html"><img src="assets/tumbas.jpg" alt="Tumbas Reales"></a>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <p>© 2025 Todos los derechos reservados.</p>
  </footer>
</body>
</html>

Estilos CSS aplicados

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  color: #333;
}

.top-menu ul {
  display: flex;
  justify-content: center;
  background-color: #0d3221;
  padding: 15px 0;
}

.top-menu li {
  list-style: none;
  margin: 0 20px;
}

.top-menu a {
  color: white;
  text-decoration: none;
  font-size: 18px;
}

.top-menu a:hover {
  color: #ccff66;
}

.hero-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.content-area {
  max-width: 1000px;
  margin: 20px auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.image-grid img {
  width: calc(25% - 15px);
  border-radius: 6px;
  transition: transform 0.3s ease;
}

.image-grid img:hover {
  transform: scale(1.05);
}

.site-footer {
  background-color: #9e9292;
  color: white;
  text-align: center;
  padding: 20px;
  margin-top: 30px;
}

Características del proyecto

Páginas interconectadas con navegación clara entre ellas.
Diseño limpio basado en contenedores semánticos.
Incorporación de elementos multimedia como imágenes y texto descriptivo.
Aplicación de transiciones sencillas para mejorar la experiencia del usuario.
Sin dependencias externas ni librerías complejas, ideal para aprender fundamentos del desarrollo web.

Conclusión

Este proyecto representa una excelente oportunidad educativa para estudiantes que comienzan en el mundo del desarrollo web front end. Permite practicar habilidades esenciales como maquetación con CSS, manejo de hipervínculos, orgainzación de directorios y creación de interfaces intuitivas. Aunque no incluye funcionalidades dinámicas avanzadas, proporciona una base sólida sobre la cual se pueden añadir características adicionales según sea necesario.

Etiquetas: HTML css frontend JavaScript diseno-web

Publicado el 8-17 05:36

Friki Work