Introducción
HTML, que significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el estándar fundamental para crear páginas web. Es un lenguaje de marcado que se utiliza para estructurar y presentar contenido en la web. A diferencia de los lenguajes de programación, HTML no tiene lógica de programación; en su lugar, define la estructura y el diseño del contenido mediante el uso de etiquetas.
Conceptos Clave
- Lenguaje de Marcado: HTML utiliza "etiquetas" para marcar diferentes partes del contenido. Estas etiquetas indican al navegador cómo debe mostrarse el contenido.
- Hipertexto: HTML permite crear enlaces (hipervínculos) que conectan diferentes páginas web, facilitando la navegación entre ellas.
- Estructura de Documentos: HTML proporciona una estructura jerárquica para los documentos web, lo que facilita la organización y el acceso al contenido.
Historia de HTML
HTML fue creado por Tim Berners-Lee en 1991. Desde entonces, ha evolucionado significativamente, con varias versiones que han añadido nuevas características y mejoras. La versión más reciente es HTML5, que introduce nuevas etiquetas y funcionalidades para mejorar la semántica, la accesibilidad y la interactividad de las páginas web.
¿Por Qué es Importante HTML?
- Base de la Web: HTML es la base sobre la cual se construyen todas las páginas web. Sin HTML, no habría una manera estándar de estructurar y mostrar contenido en la web.
- Compatibilidad: HTML es compatible con todos los navegadores web, lo que garantiza que el contenido se muestre de manera consistente en diferentes dispositivos y plataformas.
- Accesibilidad: HTML proporciona herramientas y etiquetas que ayudan a hacer las páginas web accesibles para personas con discapacidades.
Estructura Básica de un Documento HTML
Un documento HTML típico tiene una estructura básica que incluye las siguientes partes:
<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página HTML</title>
</head>
<body>
<h1>¡Hola, Mundo!</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>Explicación del Código
<!DOCTYPE html>: Esta declaración define el tipo de documento y la versión de HTML que se está utilizando. En este caso, es HTML5.<html>: Esta etiqueta envuelve todo el contenido de la página web.<head>: Contiene metadatos sobre el documento, como el título y enlaces a hojas de estilo.<title>: Define el título de la página, que aparece en la pestaña del navegador.<body>: Contiene el contenido visible de la página web.<h1>: Representa un encabezado de primer nivel.<p>: Representa un párrafo de texto.
Ejercicio Práctico
Ejercicio 1: Creando tu Primera Página HTML
Objetivo: Crear una página HTML básica que muestre un encabezado y un párrafo.
- Abre tu editor de texto favorito (por ejemplo, Visual Studio Code, Sublime Text, Notepad++).
- Crea un nuevo archivo y guárdalo con la extensión
.html(por ejemplo,index.html). - Escribe el siguiente código en tu archivo:
<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página HTML</title>
</head>
<body>
<h1>¡Hola, Mundo!</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>- Guarda el archivo y ábrelo en tu navegador web para ver el resultado.
Solución del Ejercicio
El código proporcionado en el ejercicio es la solución. Al abrir el archivo index.html en un navegador, deberías ver un encabezado que dice "¡Hola, Mundo!" y un párrafo que dice "Esta es mi primera página web."
Conclusión
En esta lección, hemos aprendido qué es HTML, su importancia y su estructura básica. Ahora tienes una comprensión fundamental de cómo se construyen las páginas web y estás listo para profundizar en los conceptos más avanzados de HTML en las siguientes lecciones. ¡Felicidades por dar el primer paso en tu viaje de aprendizaje de HTML!
Curso de HTML
Módulo 1: Introducción a HTML
- ¿Qué es HTML?
- Configurando tu Entorno
- Estructura Básica de HTML
- Etiquetas y Elementos HTML
- Creando tu Primera Página HTML
Módulo 2: Formateo de Texto en HTML
- Encabezados y Párrafos
- Etiquetas de Formateo de Texto
- Listas: Ordenadas y Desordenadas
- Citas en Bloque y Texto Preformateado
Módulo 3: Enlaces y Medios en HTML
Módulo 4: Tablas en HTML
- Estructura Básica de una Tabla
- Encabezados y Pies de Tabla
- Unión de Celdas: Colspan y Rowspan
- Estilizando Tablas
Módulo 5: Formularios en HTML
- Creando un Formulario Básico
- Elementos del Formulario: Input, Textarea y Select
- Atributos y Validación del Formulario
- Enviando Formularios
Módulo 6: Elementos Semánticos de HTML5
Módulo 7: Técnicas Avanzadas de HTML
Módulo 8: Integración de HTML y CSS
- Vinculando CSS a HTML
- CSS en Línea, Interno y Externo
- Selectores Básicos de CSS
- Estilizando Elementos HTML
Módulo 9: Diseño Web Responsivo
- Introducción al Diseño Responsivo
- Etiqueta Meta del Viewport
- Consultas de Medios
- Imágenes y Videos Responsivos
Módulo 10: Mejores Prácticas y Accesibilidad
- Mejores Prácticas de HTML
- Conceptos Básicos de Accesibilidad Web
- Usando Roles ARIA
- Pruebas de Accesibilidad