- Resumen -

Se exploró el desarrollo web utilizando GitHub como plataforma para alojar y visualizar páginas web. Se aprendió a crear un archivo index.html, que sirve como punto de inicio para un sitio web, y a estructurar contenido con HTML.

La página incluye elementos básicos como títulos, texto, hipervinculos e imagenes.

- Introducción -

Se exploró el desarrollo y la publicación de páginas web mediante GitHub. Se explicó que una página web es un documento digital accesible a través de un navegador y que su estructura se define utilizando HTML (HyperText Markup Language), el lenguaje estándar para la creación de sitios web.

Esta práctica sentó las bases para integrar interfaces web en futuros proyectos, facilitando la presentación y manipulación de información en entornos digitales.

- Materiales -

Ordenador personal.

Cuenta de "GitHub".

- Desarrollo -

Primero, se creó un nuevo archivo HTML llamado "index.html", en el cual se implementó la estructura básica de un documento web. Para ello, se incluyeron etiquetas fundamentales como !DOCTYPE html, "html", "head" y "body", asegurando así el correcto funcionamiento y visualización de la página en un navegador.

Dentro de la sección "body", se agregaron distintos elementos para estructurar el contenido, tales como títulos ("h1", "h2", "h3"), párrafos ("p") y una imagen ("img"). Posteriormente, se creó un segundo archivo HTML llamado "pagina2.html", con una estructura similar a la del archivo principal.

En esta segunda página, se añadieron dos hipervínculos que permiten la navegación entre diferentes sitios. El primero dirige al usuario a Friv, una plataforma en línea que ofrece una variedad de minijuegos, mientras que el segundo enlaza de regreso a la página principal del proyecto. Esto se logró mediante la etiqueta "a", la cual permite crear enlaces que facilitan la interacción y navegación dentro del sitio web.

Simulación

A diferencia de una simulación, en esta práctica la página web se creó directamente desde un editor de texto, escribiendo el código manualmente. Posteriormente, el archivo index.html se abrió en un navegador, permitiendo visualizar los cambios en tiempo real sin necesidad de emuladores o simulaciones.

Diseño

El diseño de la página web se mantuvo sencillo, priorizando la estructura básica y la funcionalidad del sitio. Para su construcción, se utilizaron distintos elementos de HTML que permitieron organizar el contenido de manera clara y comprensible.

La estructura incluyó párrafos ("p") para el desarrollo del texto, títulos principales ("h1") y subtítulos ("h2", "h3") para jerarquizar la información. Además, se incorporaron imágenes ("img") para complementar el contenido visualmente y hipervínculos ("a") que facilitaron la navegación entre páginas.

Construcción

La construcción de la página web se llevó a cabo escribiendo el código HTML directamente en un editor de texto, sin el uso de simuladores o generadores automáticos. Para estructurar el contenido, se emplearon las siguientes etiquetas principales:

"h1", "h2", "h3" y "h4" para los títulos, organizando la jerarquía de la información. "p" para los párrafos de texto. "img" para insertar imágenes en la página. "a" para crear un hipervínculo que permite la navegación hacia la segunda página y viceversa.

- Resultados -

Se logró desarrollar con éxito una página web básica, conformada por una página principal ("index.html") con títulos, texto e imágenes, y una página secundaria ("pagina2.html"), accesible a través de un hipervínculo en la primera página.

Ambas páginas se mostraron correctamente en el navegador y fueron publicadas exitosamente en GitHub Pages, permitiendo su acceso en línea sin inconvenientes.

- Conclusiones -

Esta práctica brindó una introducción fundamental al desarrollo web, permitiendo a los estudiantes comprender la estructura básica de un documento "HTML". Se aprendió a incorporar diversos elementos en una página web y a establecer enlaces entre diferentes páginas para facilitar la navegación.

- Referencias -

Mozilla Developer Network. (2023). HTML basics. https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics

GitHub Docs. (2023). GitHub Pages. https://docs.github.com/en/pages

W3Schools. (2023). HTML Tutorial. https://www.w3schools.com/html/

- Descargables -

Enlace página web: Index