En este curso de HTML, exploraremos todos los aspectos esenciales para comenzar a crear nuestras propias páginas web desde cero.
En este curso no solo se trata solo de escribir código; se trata de escribirlo de la manera correcta. Aprenderemos buenas prácticas y metodologías para asegurarnos de que nuestro código sea limpio, profesional y altamente legible. La calidad del código es fundamental para el mantenimiento a largo plazo y para colaborar con otros desarrolladores en proyectos web.
Juntos, exploraremos cómo crear páginas web con una estructura lógica y semántica, lo que significa que nuestras páginas no solo se verán bien, sino que también estarán diseñadas de manera que los motores de búsqueda y las tecnologías de asistencia, como los lectores de pantalla, puedan interpretarlas de manera efectiva. Esto es esencial para garantizar que nuestros sitios web sean accesibles para una amplia audiencia.
Prepárate para embarcarte en un emocionante viaje de aprendizaje en el mundo del desarrollo web. Comenzaremos desde lo más básico, y a medida que avancemos en el curso, te introduciré a conceptos más avanzados. Al final de este curso, estarás listo para crear tus propias páginas web y comprender los fundamentos necesarios para seguir aprendiendo y creciendo como desarrollador web.
¡Vamos a comenzar a explorar el emocionante mundo de HTML juntos!
- ¿Qué es HTML?
- ¿Qué no es HTML?
- Recomendaciones
- Fundamentos de HTML
- Estructura básica
- Etiquetas comunes
- Tablas
- Formularios
- Buenas prácticas
- Fuentes y apoyo
La World Wide Web, comúnmente conocida como la web, es uno de los avances más significativos en la historia de la tecnología de la información. Se ha convertido en un medio de comunicación global que permite a las personas acceder a una inmensa cantidad de información, interactuar en línea y compartir recursos en todo el mundo. La web es una red de documentos interconectados que se presentan en forma de páginas web y se pueden acceder a través de navegadores web, como Google Chrome, Mozilla Firefox o Microsoft Edge.
La base fundamental de la web es el lenguaje de marcado llamado HTML, siglas que significan "Hypertext Markup Language" en inglés, o "Lenguaje de Marcado de Hipertexto" en español. HTML es el lenguaje estándar utilizado para crear páginas web y definir su estructura y contenido. Fue desarrollado por Tim Berners-Lee en 1990 como parte del proyecto para crear la World Wide Web en el CERN (Organización Europea para la Investigación Nuclear). Desde entonces, ha evolucionado a través de varias versiones, y HTML5 es la versión más reciente, que ofrece una amplia gama de características y capacidades para la creación de contenido web.
Básicamente, con HTML definimos la estructura y el contenido de nuestra página web
Es importante entender las limitaciones y responsabilidades de HTML para trabajar de manera efectiva en el desarrollo web y para saber cuándo utilizar otros lenguajes y tecnologías complementarias, como CSS y JavaScript, para lograr funcionalidad y diseño más avanzados.
Es importante recalcar que HTML no es un lenguaje de programación.
| ✅ Responsabilidades de HTML | ❌ No es responsabilidad de HTML |
|---|---|
| Define la estructura básica de una página web. | No controla el diseño visual o la presentación exacta. De eso se encarga CSS |
| Proporciona la semántica de la página web, como títulos, encabezados y párrafos. | No gestiona la interactividad avanzada de la página. De eso se encarga JavaScript |
| Permite la creación de enlaces y navegación mediante hipervínculos. | No almacena datos o realiza procesamiento de formularios. |
| Facilita la incorporación de contenido multimedia, como imágenes y videos. | No se encarga de la seguridad o la autenticación de usuarios. |
| Permite la creación de formularios para la recopilación de datos. | No maneja la lógica de negocios en aplicaciones web. |
| Es compatible con todos los navegadores y dispositivos. | No controla el diseño de impresión o la generación de documentos PDF. |
| Ayuda en la accesibilidad web al proporcionar etiquetas semánticas para lectores de pantalla. | No realiza cálculos matemáticos ni procesamiento de datos en tiempo real. |
| Define la estructura de datos tabulares utilizando tablas HTML. | No define el estilo visual, que es responsabilidad de CSS. |
| Es un lenguaje estático y no permite la creación de aplicaciones web interactivas por sí mismo. | No almacena ni recupera datos de una base de datos. |
| Es la base para el desarrollo web y se combina con CSS y JavaScript para lograr funcionalidad y diseño avanzados. | No controla la velocidad de carga de una página, que depende de varios factores. |
- HTML es como la estructura de una casa: define las paredes y habitaciones.
- CSS es como la decoración y el diseño de la casa: colores, muebles y estilo.
- JavaScript es como la funcionalidad de la casa: interruptores, calefacción y entretenimiento.
- Editor de código (Visual Studio Code)
- Visualizador de nuestra página (Live Server)
- Extensiones
- Elementos y Etiquetas: En HTML, los elementos son los bloques de construcción básicos de una página web. Cada elemento se define mediante etiquetas, que son palabras clave rodeadas por signos de menor que (
<) y mayor que (>). Por ejemplo,<h1>define un encabezado de nivel 1 y<p>define un párrafo.
<h1>Hola, mundo</h1>En este caso la etiqueta es el h1 (aquí se podría hablar de etiqueta de abertura y etiqueta de cierre) y el elemento es todo el componente general <h1>Hola, mundo</h1>
- Anidación: Los elementos HTML pueden anidarse unos dentro de otros. Esto significa que puedes tener elementos dentro de otros elementos para crear una estructura jerárquica. Por ejemplo:
<div> <h1>Título</h1> <p>Este es un párrafo.</p> </div>
- Atributos: Los elementos HTML pueden tener atributos que proporcionan información adicional sobre el elemento. Los atributos se especifican dentro de la etiqueta de apertura y generalmente tienen un nombre y un valor. Por ejemplo:
<img src="imagen.jpg" alt="Descripción de la imagen" class="imagen" />
- Estructura Básica: Una estructura básica de página HTML incluye las etiquetas
<html>,<head>, y<body>. El contenido principal de la página se coloca en el<body>, mientras que el encabezado y otros metadatos se colocan en el<head>.<!DOCTYPE html> <html> <head> <title>Título de la Página</title> </head> <body> <h1>Mi Primer Página Web</h1> <p>¡Hola, mundo!</p> </body> </html>
Estas son solo algunas de las etiquetas HTML más comunes y ejemplos de cómo se utilizan. HTML proporciona una amplia gama de etiquetas que permiten estructurar y dar formato a las páginas web de diversas maneras.
-
<p>- Párrafo:<p>Este es un párrafo de ejemplo.</p>
-
<h1>,<h2>,<h3>, ...<h6>- Encabezados:<h1>Encabezado de nivel 1</h1> <h2>Encabezado de nivel 2</h2> <h3>Encabezado de nivel 3</h3>
-
<a>- Enlace (hipervínculo):<a href="https://www.ejemplo.com">Visitar el sitio web de ejemplo</a>
-
<ul>- Lista desordenada:<ul> <li>Elemento 1</li> <li>Elemento 2</li> </ul>
-
<ol>- Lista ordenada:<ol> <li>Primer elemento</li> <li>Segundo elemento</li> </ol>
-
<img>- Imagen:<img src="imagen.jpg" alt="Descripción de la imagen" />
-
<table>- Tabla:<table> <tr> <th>Nombre</th> <th>Edad</th> </tr> <tr> <td>Juan</td> <td>25</td> </tr> </table>
-
<form>- Formulario:<form action="/procesar.php" method="post"> <input type="text" name="nombre" placeholder="Nombre" /> <input type="submit" value="Enviar" /> </form>
-
<input>- Elemento de entrada:<input type="text" name="usuario" placeholder="Nombre de usuario" />
-
<textarea>- Área de texto:<textarea name="comentario" rows="4" cols="50"></textarea>
-
<select>- Lista desplegable:<select name="pais"> <option value="usa">Estados Unidos</option> <option value="es">España</option> <option value="mx">México</option> </select>
Las etiquetas que existen para agrupar contenido en nuestra pagina son:
- header (Parte superior)
- nav (Menu de navegación)
- footer (Parte de hasta abajo)
- main (Contenido principal)
- section (Secciones que se pueden usar multples veces)
- article (Noticias, articulos, entrada de blog)
- aside (Barra lateral)
- div (Divisiones)
<header>
<img src="" alt="">
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>Con ayuda de nuestra extención, podemos escribir nuestro header de esta otra forma más rápida (incluye nombres de clases):
header.header>img.header__img+nav.header__nav>ul.header__ul>li.header__li*4>a.header__aEn este tema, aprenderemos a crear tablas en HTML. Las tablas se utilizan para organizar datos en filas y columnas de manera estructurada. Aquí tienes los pasos clave y ejemplos de código:
-
Uso de la etiqueta
<table>:Para iniciar la creación de una tabla, utilizamos la etiqueta
<table>. Esta etiqueta define el contenedor principal de la tabla y su estructura. Aquí tienes un ejemplo simple:<table> <!-- Contenido de la tabla se agrega aquí --> </table>
-
Filas y celdas en una tabla:
Para agregar filas a la tabla, utilizamos la etiqueta
<tr>, que representa una fila. Dentro de las filas, utilizamos las etiquetas<td>(celdas de datos) para mostrar los datos en las columnas. Aquí hay un ejemplo de una tabla con dos filas y tres columnas:<table> <tr> <td>Fila 1, Columna 1</td> <td>Fila 1, Columna 2</td> <td>Fila 1, Columna 3</td> </tr> <tr> <td>Fila 2, Columna 1</td> <td>Fila 2, Columna 2</td> <td>Fila 2, Columna 3</td> </tr> </table>
-
Encabezados de tabla:
Para agregar encabezados a la tabla, podemos usar la etiqueta
<th>en lugar de<td>. Los elementos<th>se utilizan comúnmente para etiquetar las columnas y se pueden colocar en la primera fila o la primera columna de la tabla:<table> <tr> <th>Nombre</th> <th>Edad</th> </tr> <tr> <td>Juan</td> <td>25</td> </tr> <tr> <td>María</td> <td>30</td> </tr> </table>
En este tema, exploraremos cómo crear formularios en HTML para recopilar información de los usuarios. Aquí están los pasos clave y ejemplos de código:
-
Uso de la etiqueta
<form>:Para crear un formulario, utilizamos la etiqueta
<form>. Esta etiqueta envuelve todos los elementos del formulario y define cómo se manejarán los datos ingresados por el usuario. Aquí tienes un ejemplo:<form action="/procesar.php" method="post"> <!-- Elementos de entrada y botones se agregan aquí --> </form>
-
Elementos de entrada (input, textarea, select):
Los elementos de entrada permiten a los usuarios interactuar con el formulario. Algunos ejemplos de elementos de entrada comunes son:
-
Campo de texto (
<input type="text">):<input type="text" name="nombre" placeholder="Nombre" />
-
Área de texto (
<textarea>):<textarea name="comentario" rows="4" cols="50"></textarea>
-
Lista desplegable (
<select>):<select name="pais"> <option value="usa">Estados Unidos</option> <option value="es">España</option> <option value="mx">México</option> </select>
-
-
Botones y envío de formularios:
Los formularios suelen incluir botones como
<input type="submit">para enviar el formulario y<input type="reset">para restablecer los valores. También puedes utilizar JavaScript para realizar validación de datos antes de enviar el formulario al servidor:<input type="submit" value="Enviar" /> <input type="reset" value="Restablecer" />
Existen varios tipos de inputs como pueden ser:
- checkbox
- color
- date
- datetime-local
- file
- hidden
- image
- month
- number
- password
- radio
- reset
- search
- tel
- text
- time
- url
- week
Se pueden complementar con un placeholder para especificar que se espera escribir en ese campo.
La sintaxis es la siguiente:
<input type="text" placeholder="text" />Este es un boton el cual realiza la acción de "enviar".
<button type="submit" value="submit"></button>
Las buenas prácticas en HTML son fundamentales para escribir código limpio, mantenible y accesible.
Principales buenas prácticas en HTML:
-
HTML Semántico: Utiliza etiquetas HTML semánticas para una estructura significativa y accesible.
-
Indentación y organización: Mantén un código bien organizado y con una buena indentación.
-
Uso de etiquetas semánticas: Utiliza etiquetas semánticas para definir la estructura y el significado del contenido.
-
Uso de comentarios: Agrega comentarios para explicar el propósito y la estructura del código.
-
Atributos "alt" en imágenes: Proporciona atributos "alt" en imágenes para mejorar la accesibilidad.
-
Evita estilos en línea: Prefiere hojas de estilo externas en lugar de estilos en línea.
-
Validación de formularios: Valida datos de entrada en el lado del servidor para seguridad.
-
Evita elementos obsoletos: No utilices elementos obsoletos en HTML.
-
Optimización de imágenes: Comprime y optimiza imágenes para una carga más rápida.
-
Pruebas cruzadas de navegadores: Asegúrate de que tu código funcione en varios navegadores.
-
Accesibilidad web: Cumple con las pautas de accesibilidad web como WCAG.
-
Mantenimiento regular: Realiza un mantenimiento periódico del código para correcciones y actualizaciones.