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.htmldentro de la carpetainiciativas_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>
-
<!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>
-
<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>
-
<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>
-
<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>
-
<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>
-
<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>
-
<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>
-
<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). -
widthyheight: 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>© 2024 Mapa de Iniciativas Ecológicas Locales</p>
</footer>
-
<footer>: Representa el pie de página. -
©: Símbolo de copyright.
Paso 11: Guardar y Probar el Documento
-
Guarda el archivo
index.html. - Abre el archivo en un navegador web (utiliza Live Server).
- 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)