Guía: Creación de Notebooks de Google Colab con navegación interna mediante anclas HTML

Esta guía enseña a los estudiantes a crear índices con enlaces internos en Notebooks de Google Colab, permitiendo navegar entre secciones y volver al contenido principal fácilmente.

1. Estructura básica del Notebook

El Notebook debe contener:

  1. Una tabla de contenido al inicio con enlaces a cada sección.
  2. En cada sección, un ancla de destino y un enlace de retorno al contenido.

Ejemplo general:

<a name="Contenido"></a>
# Contenido
- [1. Introducción](#introducción)
- [2. Fundamento-teórico](#fundamento-teórico)
- [3. Ejemplo-práctico](#ejemplo-práctico)
- [4. Conclusiones](#conclusiones)

Cada sección se define así:

<a name="introducción"></a>
# INTRODUCCIÓN

Texto de la sección.

[Regresar al Contenido](#Contenido)

2. Pasos para implementarlo en Google Colab

Paso 1 – Crear la tabla de contenido

  1. Agregue una celda de texto (tipo Markdown).
  2. Copie el siguiente bloque:
<a name="Contenido"></a>
# Contenido
- [1. Introducción](#introducción)
- [2. Fundamento-teórico](#fundamento-teórico)
- [3. Ejemplo-práctico](#ejemplo-práctico)
- [4. Conclusiones](#conclusiones)
  1. Ejecute la celda (Ctrl + Enter).

Esto genera una lista con hipervínculos a las secciones que se definirán después.

Paso 2 – Crear las secciones con anclas

Para cada sección:

  1. Inserte una nueva celda de texto (Markdown).
  2. Añada el código correspondiente.

Ejemplo — Introducción:

<a name="introducción"></a>
# INTRODUCCIÓN

Aquí va el contenido de la introducción.

[Regresar al Contenido](#Contenido)

Ejemplo — Fundamento teórico:

<a name="fundamento-teórico"></a>
# FUNDAMENTO TEÓRICO

Explicaciones, ecuaciones o referencias.

[Regresar al Contenido](#Contenido)

Repita el formato para las demás secciones.

3. Recomendaciones técnicas

  • Use nombres de ancla sin espacios ni caracteres especiales, solo letras minúsculas y guiones (-).
  • Asegúrese de que los nombres de ancla (<a name="...">) coincidan exactamente con los usados en los enlaces ((#...)).
  • Ejecute todas las celdas para que los enlaces se activen.
  • Esta funcionalidad solo opera dentro del entorno interactivo del Notebook o en su vista HTML exportada (no en modo diapositivas Reveal.js ni PDF).

4. Ejemplo completo funcional

<a name="Contenido"></a>
# Contenido
- [1. Introducción](#introducción)
- [2. Fundamento-teórico](#fundamento-teórico)
- [3. Ejemplo-práctico](#ejemplo-práctico)
- [4. Conclusiones](#conclusiones)

---

<a name="introducción"></a>
# INTRODUCCIÓN
Breve explicación del tema.

[Regresar al Contenido](#Contenido)

---

<a name="fundamento-teórico"></a>
# FUNDAMENTO TEÓRICO
Desarrolle aquí las bases conceptuales.

[Regresar al Contenido](#Contenido)

---

<a name="ejemplo-práctico"></a>
# EJEMPLO PRÁCTICO
Incluya código, gráficos o cálculos.

[Regresar al Contenido](#Contenido)

---

<a name="conclusiones"></a>
# CONCLUSIONES
Síntesis final y observaciones.

[Regresar al Contenido](#Contenido)

5. Exportación recomendada

  • Para conservar los enlaces activos, exporte como:

    • Archivo → Descargar → .ipynb (mantiene la funcionalidad).
    • Archivo → Descargar → . html (los enlaces siguen funcionando en navegador).

  • Los enlaces no funcionan al exportar a PDF o a diapositivas Reveal.js.

5.1. Exportar a HTML con enlaces activos

La exportación a HTML es el método más confiable para conservar los hipervínculos internos (#Contenido, #introducción, etc.) generados con anclas HTML.

Procedimiento paso a paso

  1. En Colab, abra su Notebook terminado.

  2. Vaya al menú: Archivo → Descargar → Descargar .ipynb (Guarde el archivo en su computador).

  3. Abra una terminal o el entorno de Visual Studio Code (VSCode).

  4. Ejecute la conversión a HTML con el siguiente comando:

    jupyter nbconvert --to html "nombre_notebook.ipynb"

    Esto crea un archivo nombre_notebook.html con todos los vínculos internos activos.

  5. Abra el archivo HTML en su navegador: los enlaces [Regresar al Contenido] funcionarán correctamente.