Llamar JQuery de una hoja externa javascript a mi web

Buenas tengo el siguiente problema, por las buenas practicas no puedo juntar el codigo javascript con el html es asi k decidi llamarlo de una hoja externa pero no me esta saliendo este es el codigo

Código HTML :

<!--Script [AJAX-JQuery]-->
<script type="text/javascript">
   $(function(){
      $("#iniciar-sesion").submit(function(){
           $.ajax({
              type:"POST",
              url:"http://localhost/Web%20Reyes%20Magos%20Oficial%20-%20MVC/_funciones/usuario.php?proc=ingresar",
              dataType:"html",
              data:$(this).serialize(),
              beforeSend:function(){
                 $("#c_is").show();
              },
              success:function(response){
                 $("#m_is").html(response);
                 //Animacion
                 $("#m_is").hide();
                 $("#m_is").fadeIn(1000);
                 //End Animacion
                  $("#c_is").hide();
              }
           })
             return false;
        })
  })
</script>
<!--End Script [AJAX-JQuery]-->
    
<div id="inicio-sesion">
    <p align="right">Si ya pediste a los Reyes Magos | Identificate</p>
    <form name="iniciar-sesion" id="iniciar-sesion" style="margin-top:10px;">
        <p align="right">                                                                                                                                                                       
        DNI:
        <input name="dni" id="dni" type="text" />
        Contraseña:
        <input name="pass" id="pass" type="text" />
        <input name="loguearse" id="loguearse" type="submit" value="Iniciar Sesión" />
        </p>
        <div id="resultado" style="text-align: right;font-size: 10px;">
       <div id="m_is"></div>
       <div id="c_is" style="display:none;"><img alt="cargando" src="img/tools/cargando.png" width="24" align="absmiddle" /> cargando</div>
       </div>
    </form>
    <div style="margin-top:5px; text-align:right;">
    <a href="#">¿Deseas pedir a los reyes magos?</a>
    </div>
</div><!-- End inicio-sesion -->

Es una simple inicio de sesion... como haria para k esa funcion este en una hoja aparte y solo llamarlo

por lo que eh entendido lo que quieres es hacer separar el codigo javascript del html

podes crear un archivo con formato .js

luego lo incluis en tu html entre head asi:

<script src="archivo.js"></script>