Guia 2- Resumen de mis Proyectos HTML - INFOTEP 2025

 

Proyecto 1: Ejemplo Básico con Índice e Imágenes

Descripción: Este fue mi primer ejercicio práctico con HTML. Aprendí a crear una página simple con un índice de navegación interna usando enlaces con anclas (#). La página incluye tres secciones principales: Introducción, Contenido y Conclusión. También incorporé mi primera imagen usando la etiqueta <img> con sus atributos básicos.

Conceptos aprendidos:

• Enlaces internos con anclas (#id)
• Estructura básica de documento HTML
• Inserción de imágenes con alt, width y height
• Uso de listas desordenadas <ul> para menús

---

Proyecto 2: Tabla de Calificaciones de Estudiantes

Descripción: En este proyecto aprendí a trabajar con tablas HTML. Creé una tabla completa con encabezado (<thead>), cuerpo (<tbody>) y pie (<tfoot>). La tabla muestra las calificaciones de 5 estudiantes en tres materias diferentes, con un cálculo de promedios al final. Utilicé atributos como border, cellpadding, bgcolor para dar estilo básico.

Conceptos aprendidos:

• Estructura completa de tablas: <table>, <tr>, <th>, <td>
• Uso de <caption> para título de tabla
• Secciones semánticas: <thead>, <tbody>, <tfoot>
• Atributos de estilo básicos en tablas

Proyecto 3: Enlaces Internos - Países de Centroamérica

Descripción: Este proyecto fue más complejo. Creé una página web informativa sobre los 6 países de Centroamérica (Guatemala, El Salvador, Honduras, Nicaragua, Costa Rica y Panamá). Cada país tiene su propia sección con información sobre población, extensión territorial, y enlaces externos a sus sitios gubernamentales. Implementé un menú de navegación con enlaces internos que llevan a cada país específico.

Conceptos aprendidos:

• Estructura semántica completa: <header>, <nav>, <section>, <article>, <aside>, <footer>
• Enlaces internos con anclas múltiples
• Enlaces externos con target="_blank"
• Organización de contenido extenso
• Uso de superíndices con <sup> para km²
  

Proyecto 4: La Familia y su Importancia en la Sociedad

Descripción: En este proyecto trabajé con colores y formatos de texto. Creé una página educativa sobre la familia usando atributos antiguos de HTML como bgcolor, text, link, y la etiqueta <font>. Incluí listas ordenadas y desordenadas para organizar información sobre funciones y tipos de familia.

Conceptos aprendidos:

• Atributos de color del body (bgcolor, text, link, vlink, alink)
• Etiqueta <font> con atributo color y size
• Listas ordenadas <ol> y desordenadas <ul>
• Formato de texto con <b> para negritas
• Atributos de alineación con align


Proyecto 5: Historia y Curiosidades de Internet

Descripción: Uno de mis proyectos más completos. Creé una página educativa sobre la evolución de Internet, desde ARPANET en 1969 hasta la pandemia en 2020. Incluí una línea de tiempo detallada, biografías de inventores importantes (Tim Berners-Lee, Vint Cerf, Larry Page), curiosidades fascinantes y recursos educativos. Usé estilos en línea para dar formato visual.

Conceptos aprendidos:

• 
  Estilos en línea con atributo style
• Navegación interna completa
• Estructura de contenido extenso y organizado
• Tablas comparativas (navegadores)
• Enlaces externos a recursos educativos
• Secciones semánticas: <section>, <article>, <aside>
• Atributo title en enlaces para tooltips
  

Proyecto 6: Mundo Bicicleta 🚴‍♂️

Descripción: Mi proyecto más reciente y completo. Creé un sitio web educativo sobre bicicletas con navegación interna, múltiples secciones temáticas y diseño en tonos verdes. Incluí historia de la bicicleta, tipos de bicicletas con galería de imágenes, lugares para montar en RD y el mundo, recursos descargables (PDFs) y enlaces a tiendas locales. Apliqué estilos en línea avanzados con gradientes y sombras.

Conceptos aprendidos:

• Estilos avanzados en línea (gradientes, sombras, border-radius)
• Navegación interna completa y funcional
• Múltiples imágenes con atributos completos
• Enlaces de descarga con atributo download
• Enlaces externos con rel="noopener noreferrer" para seguridad
• Listas ordenadas y desordenadas combinadas
• Estructura semántica completa y bien organizada
• Diseño con paleta de colores consistente (verdes)

📊 Progresión de Aprendizaje

A través de estos 6 proyectos, mi evolución ha sido clara:

1. Proyecto 1: HTML básico, estructura simple
2. Proyecto 2: Tablas y organización de datos
3. Proyecto 3: Navegación interna y contenido extenso
4. Proyecto 4: Estilos y colores básicos
5. Proyecto 5: Proyecto educativo completo con recursos
6. Proyecto 6: Diseño avanzado con estilos, multimedia y funcionalidad completa

Cada proyecto me ha enseñado algo nuevo y me ha preparado para el siguiente nivel de complejidad.

---

🎯 Reflexión Personal

Estos proyectos representan mi viaje de aprendizaje en HTML desde cero hasta poder crear páginas web funcionales y bien estructuradas. He aprendido no solo el código, sino también a pensar como un desarrollador web: organizando información, pensando en la experiencia del usuario y aplicando buenas prácticas.

Como docente del MINERD, veo el enorme potencial de estas habilidades para crear recursos educativos digitales para mis estudiantes en el Liceo Francisco del Rosario Sánchez.

---

🎓 Curso: Programación Web I - HTML
📍 Institución: INFOTEP
👨‍🏫 Docente: Prof. Ramón Morillo
👨‍💻 Estudiante: Miguel Ángel Luciano
📅 Año: 2025