DEV Community

Gabriel Villacis
Gabriel Villacis

Posted on • Updated on

Mapa de Iniciativas Ecológicas: HTML (Parte 1)

#webdev #html #iniciativasecologicas

Tutorial 1: Creación de la Estructura HTML

Introducción

En este tutorial, aprenderás a crear la estructura básica de una página web utilizando HTML. Construiremos una página para un Mapa de Iniciativas Ecológicas Locales, que incluye un encabezado, un menú de navegación, un carrusel de imágenes, información sobre el proyecto, un formulario de registro y un mapa interactivo.

Paso 1: Crear la Carpeta del Proyecto

  • Crea una nueva carpeta en tu computadora para organizar todos los archivos del proyecto. Puedes nombrarla iniciativas_eco.
  • Dentro de esta carpeta, almacenarás todos los archivos necesarios, como documentos HTML, hojas de estilo CSS, imágenes y más.

Paso 2: Crear el Archivo HTML

  • Abre tu editor de texto preferido (por ejemplo, Visual Studio Code, Sublime Text, Notepad++).
  • Crea un nuevo archivo y guárdalo como index.html dentro de la carpeta iniciativas_eco.

Paso 3: Estructura Básica del Documento HTML

Comienza con la estructura básica de un documento HTML5:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mapa de Iniciativas Ecológicas Locales</title>
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • <!DOCTYPE html>: Indica que el documento utiliza la versión HTML5.
  • <html lang="es">: Define el idioma del documento como español.
  • <head>: Contiene información sobre el documento, como el título y metadatos.
  • <body>: Contiene el contenido visible de la página web.

Paso 4: Añadir Metadatos al <head>

Es importante incluir metaetiquetas en el <head> para especificar información adicional sobre la página.

Actualiza el <head> de la siguiente manera:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapa de Iniciativas Ecológicas Locales</title>
    <meta name="description" content="Una plataforma para identificar y promover iniciativas ecológicas locales.">
    <meta name="keywords" content="ecología, sostenibilidad, reciclaje, reforestación, medio ambiente">
    <meta name="author" content="Tu Nombre">
</head>
Enter fullscreen mode Exit fullscreen mode
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Hace que el diseño sea responsivo en dispositivos móviles.
  • <meta name="description">: Proporciona una breve descripción de la página.
  • <meta name="keywords">: Lista de palabras clave relevantes para los motores de búsqueda.
  • <meta name="author">: Indica el autor de la página.

Paso 5: Añadir el Encabezado Principal

Dentro de <body>, agrega el encabezado principal:

<!-- Encabezado Principal -->
<header>
    <h1>Mapa de Iniciativas Ecológicas Locales</h1>
</header>
Enter fullscreen mode Exit fullscreen mode
  • <header>: Representa el encabezado de la página.
  • <h1>: Título principal del sitio web.

Paso 6: Crear el Menú de Navegación

Añade un menú de navegación debajo del encabezado:

<!-- Menú de Navegación -->
<nav>
    <ul>
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#registro">Registrar Iniciativa</a></li>
        <li><a href="#mapa">Mapa</a></li>
        <li><a href="#contacto">Contacto</a></li>
    </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode
  • <nav>: Define una sección de navegación.
  • <ul>: Lista no ordenada.
  • <li>: Elemento de lista.
  • <a href="#seccion">: Enlace que apunta a una sección específica de la página.

Paso 7: Agregar el Carrusel de Imágenes

Incorpora una sección para el carrusel de imágenes:
Puedes descargar las imágenes desde aquí

<!-- Carrusel de Imágenes -->
<section>
    <h2>Iniciativas Destacadas</h2>
    <div>
        <!-- Slides -->
        <div>
            <img src="img/1.jpg" alt="Imagen 1">
            <p>Descripción de la imagen 1</p>
        </div>
        <div>
            <img src="img/2.jpg" alt="Imagen 2">
            <p>Descripción de la imagen 2</p>
        </div>
        <div>
            <img src="img/3.jpg" alt="Imagen 3">
            <p>Descripción de la imagen 3</p>
        </div>
        <!-- Controles del carrusel -->
        <button>«</button>
        <button>»</button>
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode
  • <section>: Define una sección en el documento.
  • <div>: Contenedor genérico para agrupar elementos.
  • <img>: Inserta una imagen.
  • <p>: Párrafo para descripciones.
  • Botones "Anterior" y "Siguiente": Permitirá la navegación entre imágenes (funcionalidad añadida con JavaScript más adelante).

Paso 8: Agregar el Contenido Principal

Incluye una sección informativa y el formulario de registro.

Sección Informativa 

<!-- Contenido Principal -->
<main>
    <section>
        <h2>Sobre Nosotros</h2>
        <p>Esta plataforma tiene como objetivo identificar y promover iniciativas ecológicas en nuestra comunidad, como puntos de reciclaje, tiendas eco-friendly y zonas de reforestación.</p>
        <p>Únete a nosotros para crear un mundo más sostenible y conectado con el medio ambiente.</p>
    </section>
Enter fullscreen mode Exit fullscreen mode
  • <main>: Representa el contenido principal del documento.
  • <h2>: Subtítulo de la sección.
  • <p>: Párrafos de texto.

Formulario de Registro 

    <section>
        <h2>Registrar Nueva Iniciativa</h2>
        <form action="#" method="post">
            <!-- Campos del formulario -->
            <label>Nombre de la Iniciativa:</label>
            <input type="text" required>

            <label>Descripción:</label>
            <textarea rows="4" required></textarea>

            <label>Categoría:</label>
            <select required>
                <option>Reciclaje</option>
                <option>Reforestación</option>
                <option>Tienda Eco-friendly</option>
                <option>Educación Ambiental</option>
                <option>Energía Renovable</option>
            </select>

            <label>Dirección:</label>
            <input type="text" required>

            <label>Ubicación (Latitud, Longitud):</label>
            <input type="text" placeholder="Ejemplo: -12.0464, -77.0428" required>

            <input type="submit" value="Registrar Iniciativa">
        </form>
    </section>
Enter fullscreen mode Exit fullscreen mode
  • <form>: Crea un formulario.
  • <label>: Etiqueta para un campo del formulario.
  • <input>, <textarea>, <select>: Elementos de entrada de datos.
  • Atributo required: Indica que el campo es obligatorio.

Paso 9: Añadir la Sección del Mapa

Incluye un mapa de Google Maps:

    <section>
        <h2>Mapa de Iniciativas</h2>
        <div>
            <!-- Mapa interactivo -->
            <iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="500" allowfullscreen="" loading="lazy"></iframe>
        </div>
    </section>
</main>
Enter fullscreen mode Exit fullscreen mode
  • <iframe>: Inserta un marco que muestra el mapa.
  • Atributos del iframe:
    • src: URL del mapa (debes reemplazar ... con la URL real proporcionada por Google Maps).
    • width y height: Dimensiones del mapa.

Paso 10: Añadir el Pie de Página

Finaliza el documento con un pie de página:

<!-- Pie de Página -->
<footer>
    <p>&copy; 2024 Mapa de Iniciativas Ecológicas Locales</p>
</footer>
Enter fullscreen mode Exit fullscreen mode
  • <footer>: Representa el pie de página.
  • &copy;: Símbolo de copyright.

Paso 11: Guardar y Probar el Documento

  1. Guarda el archivo index.html.
  2. Abre el archivo en un navegador web (utiliza Live Server).
  3. Verifica que el contenido se muestre correctamente.

¡Felicidades! Has creado la estructura HTML básica para el proyecto: Mapa de Iniciativas Ecológicas

Top comments (0)

Read next

paharihacker profile image

A Complete Guide to React useEffect vs useLayoutEffect for Beginners

Rajesh Dhiman -

abhishekjaiswal_4896 profile image

WebSocket: The Backbone of Real-Time Communication in Modern Web Applications

Abhishek Jaiswal -

sandygalabada profile image

Blur page body when hover on Nav Bar

Sandy Galabada -

vjygour profile image

Understanding the Difference Between package.json and package-lock.json

Vijay Kumar -