Desarrollo WEB
- Sandra Páramo
- 13 ene
- 5 Min. de lectura
Actualizado: 19 ene
El desarrollo web con HTML se basa en HTML (HyperText Markup Language o Lenguaje de Marcado de Hipertexto), el lenguaje fundamental para estructurar el contenido de cualquier página web mediante etiquetas, como párrafos, títulos, imágenes y enlaces, definiendo la base y el esqueleto de la web que los navegadores interpretan para mostrar la información.
Es el primer paso y el más básico en el desarrollo, permitiendo organizar el contenido (en el <body>) y metadatos (en el <head>), y es la base sobre la que se aplican estilos con CSS y se añade interactividad con JavaScript para crear sitios completos y funcionales.
¿Qué es y para qué sirve?
Lenguaje de Marcado: No es un lenguaje de programación, sino un lenguaje de marcado que usa "etiquetas" (<p>, <img>, <a>) para definir la función y estructura de cada parte del contenido (párrafos, imágenes, encabezados, etc.).
Estructura: Crea el esqueleto de la página, organizando el contenido de forma lógica y jerárquica (por ejemplo, un título <h1> dentro de una sección <section>).
Hipertexto: Permite crear enlaces (<a>) que conectan páginas web entre sí, formando la World Wide Web.
Base de la Web: Es el primer lenguaje que se aprende en desarrollo web, esencial para construir cualquier sitio, ya sean estáticos o dinámicos.
¿Cómo funciona?
Etiquetas: Se usan etiquetas de apertura y cierre (ej. <p>Texto</p>) para envolver el contenido.
Elementos: Una etiqueta y su contenido forman un elemento HTML, como <p>Este es un párrafo</p>.
Navegador: El navegador web lee el código HTML y renderiza (muestra) la página con el contenido estructurado y los enlaces funcionales.
Estructura básica de un documento HTML
Todo documento HTML está compuesto por etiquetas. Las etiquetas tienen una sintaxis característica al estar encerradas en signos de menor y mayor qué. Además generalmente las etiquetas tienen una que indica el comienzo del elemento y otra que indica el fin del elemento. Por ejemplo tenemos las etiquetas p y /p, que expresarían el comienzo de un párrafo y el final de un párrafo.
Además, los documentos HTML tienen una estructura en la que hay siempre una cabecera, con información de control que generalmente no aparecerá al visualizar la página y un cuerpo, que es donde se define qué elementos tendrá la página al verse en el navegador.
Doctype
La declaración doctype define el tipo de documento. Su sintaxis depende de la versión de HTML que estemos usando. Actualmente se define simplemente con !DOCTYPE html
Es importante incluirlo al inicio de cualquier página HTML para asegurar que los navegadores saben la versión del HTML que estamos usando.
Head
La sección head contiene meta-información del documento HTML. Podemos incluir en este bloque diversos asuntos de interés, como el conjunto de caracteres utilizado, enlace a las hojas de estilo en el lenguaje CSS, el título de la página, sus keywords y muchas otras cosas.
Body
El cuerpo del documento se expresa dentro del la etiqueta body. Es donde se sitúa todo el contenido que los navegadores mostrarán al visualizarse la página web. En el cuerpo encontraremos como textos, imágenes y enlaces, entre otras cosas.
Elementos esenciales en HTML
Ahora, dentro del cuerpo podemos encontrar una rica cantidad de etiquetas que usaremos dependiendo de la función que hace el contenido dentro del documento.
Títulos y encabezados (h1-h6)
Las etiquetas h1 a h6 se utilizan para definir los encabezados o titulares. El de mayor importancia es h1 (debería haber un solo encabezamiento principal) y el menos importante es el h6.
Párrafos y saltos de línea
Muy importantes son los elementos p, que define un párrafo en la página y la etiqueta br que se utiliza para insertar un salto de línea.
Aquí es importante mencionar que en el código HTML no importan los saltos de línea. Dicho de otro modo, al navegador le importa que existan saltos de línea en el código, simplemente los ignorará. Si queremos que haya una separación entre líneas tenemos que introducir una etiqueta br, o bien encerrar los elementos dentro de una etiqueta de bloque como div.
También es interesante saber que no todas las etiquetas requieren su correspondiente cierre y br es un ejemplo de esa excepción.
Listas ordenadas y no ordenadas
En HTML podemos generar listas. Existen dos tipos:
Las listas ordenadas (ol)
Las listas no ordenadas (ul)
En las listas tenemos el primer ejemplo de etiqueta que tiene que trabajar en coordinación con otras etiquetas. Así, para iniciar la lista usamos ol o ul y para los ítem tenemos que usar etiquetas li.
Creando hipervínculos en HTML
En el lenguaje HTML y el desarrollo web en general, uno de los elementos más representativos son los hipervínculos, que nos permiten navegar desde una página a otra.
Enlaces a páginas internas y externas
Para los hipervínculos, también llamados simplemente enlaces, se utiliza la etiqueta a. Aquí estamos ante la primera etiqueta que requiere atributos para funcionar. El atributo es como una persinalización del funcionamiento de una etiqueta. En el caso de los enlaces el atributo href nos permite indicar la URL a la que va dirigido el enlace.
Etiqueta img para imágenes
Para insertar imágenes se utiliza la etiqueta img. Esta etiqueta también requiere de atributos, al menos src para indicar la ruta del archivo de la imagen. Adicionalmente es recomendable usar el atributo alt para indicar la descripción de la imagen, para fines de accesibilidad y posicionamiento en buscadores. Asegúrate de indicar la extensión de la imagen así como el tamaño por medio de width y height.
Uso de elementos multimedia: audio y video
Desde la versión 5 de HTML (HTML5) podemos usar las etiquetas
Aquí tenemos un ejemplo, aunque es importante que te documentes un poco más si quieres usarlas porque son etiquetas con bastantes posibilidades.
Organizando datos con tablas
Cuando tenemos que representar información tabulada, en filas y columnas, podemos echar mano de la etiqueta.
Es importante saber que esta etiqueta se debe usar solo cuando tenemos que representar una información tabulada, como el horario de clases en el colegio o una clasificación en un campeonato de equipos. Nunca se deben usar las tablas simplemente por el hecho de que nos proporcionen un posicionamiento en rejilla, para eso existe el CSS Grid Layout.
Las tablas son una de las construcciones más complejas que podemos encontrar en HTML, ya que involucra el uso de varias etiquetas.
Estructura básica de una tabla
Las tablas se crean con <table>, y se estructuran con filas (tr) y celdas, que pueden ser de celda de encabezado (th) o celda de datos generales (td). Estas son las etiquetas básicas y fundamentales. Además tenemos thead y tbody para encerrar la parte de una tabla que hace función de encabezamiento y la parte que hace la función de cuerpo, aunque estas dos etiquetas son meramente opcionales.
Podemos ver un ejemplo a continuación.
El etiquetado de la tabla anterior se visualizará de la siguiente manera:
Creación de formularios interactivos
Los formularios son la principal vía que tenemos para recopilar datos del usuario. En ellos podemos incluir diversos controles de entrada, como campos de texto, casillas de verificación, etc.
Controles de entrada: campos de texto, botones, casillas de verificación, etc.
Dentro de un formulario se pueden incorporar diferentes controles como input, textarea, etc. Podemos ver un ejemplo de formulario para encontrar varios tipos de elementos.
Es relevante mencionar que los formularios tienen atributos necesarios para indicar qué pasa cuando se envían. En este caso se mandarán los datos a una página PHP (ver atributo action) por el método POST (ver atributo method).
El siguiente etiquetado te muestra una simulación de inicio de sesión. Intenta copiar y pegarlo en tu editor preferente.
<form action="/login" method="POST">
<h2>Iniciar Sesión</h2>
<div>
<label for="usuario">Usuario:</label>
<input type="text" id="usuario" name="usuario" required>
</div>
<div>
<label for="contrasena">Contraseña:</label>
<input type="password" id="contrasena" name="contrasena" required>
</div>
<button type="submit">Entrar</button>
</form>
