Tutorial de HTML

Descripción Este repositorio contiene un tutorial estructurado para aprender HTML desde cero, diseñado para principiantes que desean construir una base sólida antes de avanzar a CSS, JavaScript y frameworks como React. El contenido está organizado en carpetas temáticas, cada una con un archivo de teoría (teoria.html) que explica los conceptos clave y ejercicios prácticos en archivos HTML separados para aplicar lo aprendido.

El tutorial cubre desde los fundamentos de HTML hasta conceptos avanzados como elementos semánticos y accesibilidad, siguiendo un enfoque progresivo y práctico. Cada carpeta incluye explicaciones claras y ejemplos que puedes abrir en un navegador para ver los resultados.

Estructura del Repositorio El tutorial está organizado en las siguientes carpetas, cada una enfocada en un tema específico de HTML:

• 01-Introduccion: Introducción a HTML, su historia, rol en el desarrollo web y estructura básica de un archivo HTML.
• 02-Estructura-Basica: Declaración <!DOCTYPE>, etiquetas , , , y metaetiquetas para responsividad.
• 03-Elementos-de-Texto: Encabezados, párrafos, texto enfatizado, subíndices y superíndices.
• 04-Listas: Listas ordenadas, no ordenadas y de definición, con anidamiento y atributos.
• 05-Enlaces-e-Imagenes: Hipervínculos (<a>), imágenes (<img>), y la importancia del atributo alt para accesibilidad.
• 06-Tablas: Estructura de tablas (<table>, <tr>, <th>, <td>), atributos como colspan y rowspan, y uso de <caption>.
• 07-Formularios: Creación de formularios con <input>, <label>, <select>, <textarea>, y validación básica.
• 08-Multimedia-y-Embed: Elementos <audio>,<video>, <iframe> para multimedia y contenido externo, con fallbacks.
• 09-Elementos-Semanticos-HTML5: Uso de <header>, <nav>, <main>, <section>, <article>, <aside>,<footer> para SEO y accesibilidad.
• 10-Atributos-Globales-y-Accesibilidad: Atributos como class, id, data-*, y técnicas de accesibilidad (ARIA, navegación por teclado).
• 11-Proyecto-Final: Proyecto integrador (sitio web de una página) y validación de HTML.

Cada carpeta contiene:

teoria.html: Explicación detallada del tema con ejemplos. Archivos de ejercicios (ej., ejercicio1.html, ejercicio2.html): Prácticas para aplicar los conceptos aprendidos.

Cómo Usar Este Tutorial

1. Clona el repositorio:

git clone https://github.com/tu-usuario/tutorial-html.git

2. Navega por las carpetas: Comienza con 01-Introduccion y avanza secuencialmente para construir conocimientos de forma progresiva.
3. Lee la teoría: Abre los archivos teoria.md en un editor markdown para entender los conceptos.
4. Realiza los ejercicios: Edita los archivos de ejercicios (ejercicio1.html, etc.) y ábrelos en un navegador para ver los resultados.
5. Valida tu trabajo: Usa herramientas como el validador W3C (https://validator.w3.org/) para verificar tu HTML, especialmente en el proyecto final.

Requisitos

• Un navegador web moderno (Chrome, Firefox, Edge, etc.).
• Un editor de texto (como VS Code, Sublime Text o Notepad++).
• Conexión a internet para recursos externos (opcional, para multimedia o validadores).

Recursos Recomendados

• MDN Web Docs - HTML: Documentación oficial y detallada.
• W3C Validator: Herramienta para validar tu código HTML.
• Web Accessibility Initiative (WAI): Guías para mejorar la accesibilidad.

Objetivo

Al completar este tutorial, tendrás una comprensión sólida de HTML, incluyendo:

• Estructura y sintaxis básica.
• Creación de contenido dinámico con formularios y multimedia.
• Uso de elementos semánticos para mejorar SEO y accesibilidad.
• Mejores prácticas para escribir código limpio y accesible.

Este conocimiento te preparará para aprender CSS y JavaScript, sentando las bases para frameworks como React.

Contribuciones

Si encuentras errores o deseas agregar más ejercicios, ¡siéntete libre de contribuir! Crea un pull request con tus cambios o abre un issue para sugerencias.

Licencia

Este tutorial está bajo la Licencia MIT. Puedes usar, modificar y compartir el contenido libremente, siempre que des crédito al autor original.