Creando una aplicación sencilla en html

Clase 6 de 13 • Taller de Creación de Router para Single Page App con JavaScript

Clase anteriorSiguiente clase

Resumen

¿Cómo comenzar a construir tu sitio web con HTML?

En el increíble mundo del desarrollo web, empezar desde cero puede sonar abrumador. Sin embargo, construir tu propio sitio web no tiene que ser una tarea titánica, incluso si solo estás jugando con HTML simple. En este artículo, te llevaremos paso a paso a través de la creación de tu primer archivo HTML, un elemento básico en el front-end. Preparemos el terreno para que puedas empezar a desarrollar tus propias soluciones web.

¿Qué estructura de archivos necesitamos?

Iniciar un proyecto de desarrollo web requiere cierta organización de archivos. Por eso, lo primero será crear un nuevo folder en tu escritorio. En este proyecto específico, lo llamaremos cursoSPA. Usaremos este directorio para almacenar todos nuestros archivos HTML. Trabajar con un editor de código comprensible y eficiente, como Visual Studio Code, es muy recomendable, aunque puedes elegir el que más te guste.

Para comenzar, sigue estos sencillos pasos:

  1. Crea un nuevo folder: Ponle un nombre significativo como cursoSPA.
  2. Abre Visual Studio Code y selecciona tu nuevo folder accediendo a Abrir carpeta.
  3. Crea un nuevo archivo: Nombralo como index.html, ya que este será el punto de entrada de nuestro servicio web.

¿Cómo estructurar un archivo HTML básico?

El siguiente paso es poblar nuestro index.html con la estructura básica HTML. Vamos a definir el esqueleto mínimo necesario para que tu navegador pueda leer y mostrar tu contenido correctamente.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cliente de nuestro SPA router</title>
</head>
<body>
    <header>
        <ul>
            <li><button>Inicio</button></li>
            <li><button>Contacto</button></li>
            <li><button>Añadir usuario</button></li>
        </ul>
    </header>
    <main>
        <h1>Hola estudiante, estás en el lugar correcto</h1>
    </main>
</body>
</html>

¿Cuáles son los elementos importantes en este HTML?

Analicemos cada parte esencial del código. El primer bloque es el head, que incluye el título de la página: Cliente de nuestro SPA router. Este nombre aparecerá en la pestaña del navegador.

  1. Header y Botones de Navegación: Aquí hemos creado un header con una lista HTML (ul) que contiene botones (button) dentro de elementos de lista (li). Estos botones nos permitirán hipotéticamente navegar entre diferentes páginas del sitio:

    • Inicio
    • Contacto
    • Añadir usuario

  2. Main Content: Dentro del main, creamos un encabezado (h1) que saluda al usuario con un mensaje acogedor.

¿Por qué es importante empezar con un template sencillo?

Utilizar una plantilla sencilla te permitirá centrarte en la funcionalidad y navegación de tu sitio web antes de aventurarte en un diseño complejo. Además, te ahorrará tiempo y te motivará al ver resultados rápidos.

Este es solo el comienzo. Aunque el diseño inicial es simple, representa una base solida con la que podrás experimentar y expandir tus conocimientos en tecnologías web. Recuerda revisar estos bloques de código en la sección de archivos, descargarlos o utilizarlos como referencia para construir tu portafolio personal. ¡Sigue explorando y experimentando!