CODIGO DE ESTA PAGINA 
      
<!DOCTYPE html>
<html lang="es-MX">
  <head>
    <meta charset="UTF-8">    
    <!-- 
      Establece el conjunto de caracteres (encoding) para la página web.
      UTF-8 es un estándar que admite la mayoría de los caracteres utilizados en diferentes idiomas.
      Esto asegura que el texto se muestre correctamente en la página.    
    -->    
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 
      Controla la visualización de la página en dispositivos móviles.
      width=device-width: ajusta el ancho de la página al ancho del dispositivo.
      initial-scale=1: establece el zoom inicial en 1 (sin zoom).
      maximum-scale=1: fija el zoom máximo en 1 (evita que el usuario haga zoom).
      user-scalable=no: deshabilita el zoom manual por parte del usuario.    
    -->
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" >       
    <!-- 
      Establece directivas para el almacenamiento en caché del navegador.
      no-cache: indica que el navegador debe revalidar la página en el servidor antes de mostrarla desde la caché.
      no-store: prohíbe que el navegador almacene la página en la caché.
      must-revalidate: obliga al navegador a revalidar la página en el servidor en cada solicitud.    
    -->

    <!-- ******************************************************************************************************* -->
    <!-- 
        Estas etiquetas meta son fundamentales para:
        Garantizar la compatibilidad con diferentes idiomas y caracteres.
        Mejorar la experiencia del usuario en dispositivos móviles.
        Controlar el almacenamiento en caché para asegurar que los usuarios vean la versión más actualizada de la página.    
    -->

    <!-- ******************************************************************************************************* -->
    <!-- ******************************************************************************************************* -->     

    <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">       
    <!-- 
      CSS Iconos Hoja de estilos del conjunto de iconos de Bootstrap.
      Proporciona iconos vectoriales para utilizar en la página.      
    -->
    
    <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- CSS   Hojas de estilos  de Bootstrap.
      Proporciona estilos predefinidos para layouts, componentes y elementos HTML.
      El atributo integrity especifica la huella digital (hash) del archivo para verificar su integridad.
      El atributo crossorigin permite que el navegador solicite el recurso desde un origen diferente.     
     -->         
    
    <link rel="stylesheet"  href="https://bootswatch.com/3/darkly/bootstrap.min.css">
    <!-- CSS Hoja de estilos de una variante de Bootstrap llamada Darkly, que ofrece un tema oscuro.
          Sobrescribe algunos estilos de Bootstrap para adaptarlos al tema Darkly.     
    -->    

    <!-- ******************************************************************************************************* -->
    <!-- ******************************************************************************************************* -->     
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <!-- SCRIPT Libreria JavaScript JQuery 3.7.1 , 
          Proporciona funcionalidades para manipular el DOM, eventos y AJAX.     
    -->    
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>    
    <!-- SCRIPT Libreria JavaScript Bootstrap 3.4.1, 
      Requiere JQuery   
      Proporciona funcionalidades para componentes interactivos como acordeones, modales y menús desplegables.
      El atributo integrity y crossorigin tienen el mismo propósito de confirmar que el contenido del archivo es correcto.
    -->


    <title>Ejemplo 001</title>
  </head>
  <body>
    <div align="center">
      <button 
        class="btn btn-success btn-block" 
        onclick="location.href='index.php#Seccion_APP';">
        REGRESAR AL MENU
      </button>
      <!--        
      El atributo class puede una lista de las clases asignadas a elemento 
      separada por espacios. Las clases permiten mediante  CSS cambiar el
      aspecto del elemento : color, ancho, tipo de fuente , etc.
      Atravez de Javascript/ Jquery se seleccionar los elementos y cambiar
      sus valores.

      class  ="btn btn-block btn-success"
      Clase  
        btn         = aspecto tipo boton de esquinas redondeadas.
        btn-success = color verde.
        btn-block   = establece el ancho del boton a todo lo disponible.

        Resultado = boton redondeado de color verde que abarca todo el archo 
      -->
    </div>
    <hr>
    
    <ul>
    <!-- 
    El elemento <ul> de "unordered list" -lista no ordenada. 
    Crea una lista no ordenada.
    Sus etiquetas son: <ul> y </ul> (ambas obligatorias).      
    Puede contener: Uno o más elementos li
    -->
      <li>Hoja de estilos para iconos Boostrap <span style="color:blueviolet" class="bi bi-bootstrap-fill" ></span> </li>
      <!-- 
      El elemento <li> del ingles item list o elemento de lista declara 
      cada uno de los elementos de una lista.
      Sus etiquetas son: <li> y </li> (la de cierre es opcional).      
      -->

      <!-- 
      El elemento  <span> Es un contenedor en línea. Sirve para 
      aplicar estilo al texto o agrupar elementos en línea.
      Sus etiquetas son: <span> y </span> (ambas obligatorias).
      Puede contener: Texto, y/o elementos .        

      style="color:blueviolet"
      Estilo
        color:blueviolet  = color violeta

      class =" bi bi-bootstrap-fill"  
      Clase
        bi                = acceder iconos Bootstrap
        bi-bootstrap-fill = icono del logotipo de Bootstrap con relleno

      Resultado = Icono de Bootstrap con relleno color violeta
      -->      
      <ul>
        <li>bootstrap-icons.min.css <span class="text-success bi bi-check-lg" ></span> </li>
        <!--- <span>
        class =" text-success bi bi-check-lg"  
        Clase
          text-success  = texto con color verde
          bi            = acceder iconos Bootstrap
          bi-check-lg   = presentar icono marca de verificacion "paloma"
        -->
      </ul>
      <li>Hoja de estilos para Bootstrap [botones, contenedores, tablas ] <span style="color:white" class="bi bi-bootstrap" ></span></li>
      <!-- <span>
      style="color:white"
      Estilo
        color:white  = color blanco

      class =" bi bi-bootstrap"  
      Clase
        bi                = acceder iconos Bootstrap
        bi-bootstrap-fill = icono del logotipo de Bootstrap solo contorno

      Resultado = Icono de Bootstrap de contorno color blanco
      -->
      <ul>
        <li>bootstrap.min.css <span class="text-success bi bi-check-lg" ></span> </li>
      </ul>        
      <li>Hoja de estilos para colores oscuros  "Darkly" </li>
      <ul>
        <li>darkly/bootstrap.min.css <span class="text-success bi bi-check-lg" ></span> </li>
      </ul>        
    </ul>

    
  </body>
</html>