Cómo incluir código externo en páginas web

Te has acercado recientemente al mundo de la creación de sitios web y aún no lo sabes cómo incluir código externo en páginas web? Si quieres te puedo dar algunos consejos sobre las formas más sencillas a seguir para familiarizarte con el tema, sobre todo si has creado recientemente tu primer blog y no tienes conocimientos profundos de programación.

Después de leer la publicación, seguramente tendrás ideas más claras sobre cómo agregar código externo en tu sitio web a través de diferentes métodos: usar Javascript para incrustar un documento .js externo, jQuery para incluir una página HTML en otra página HTML e inclusiones del lado del servidor. Luego te mostraré cómo agregar código HTML muy fácilmente directamente a WordPress, usando bloques HTML de Gutenberg o el editor, cargando páginas HTML entre los archivos multimedia del sitio y actuando a través de clientes FTP de terceros. Además, también te mostraré cómo incrustar una página externa dentro de tu sitio, como videos, mapas u otros elementos alojados en un servidor que no te pertenece.

En definitiva, a lo largo de las próximas líneas veremos todos los principales métodos para incorporar objetos externos a las páginas Web de forma rápida y, sobre todo, sencilla. Dicho esto, ¡no me queda más que hacer más que desearte buena suerte y que te diviertas!

Índice

Cómo insertar código HTML en su sitio

En términos generales, sin embargo agregue algo de código HTML a su sitio, solo es necesario abrir el archivo HTML en cuestión usando cualquier editor de texto y realizar los cambios que desees usando los asistentes de código adecuados y útiles para lograr el resultado deseado. Por ejemplo, si desea insertar una imagen específica en su página, simplemente use el código <img src="https://www.aranzulla.it/nomeimmagine.png" alt="testo"/>reemplazando un "nomeimmagine.pgn" el nombre real de la imagen y su extensión ea "testo" un texto alternativo que se muestra en caso de problemas al cargar el archivo. Más información aquí para imágenes y aquí para crear páginas HTML.

Este método, sin embargo, es bastante incómodo porque si se quieren modificar aspectos comunes a todas las páginas hay que proceder uno por uno, lo que lleva mucho tiempo. Precisamente aquí, por tanto, nos ayudan los archivos externos que se pueden recuperar dentro de las páginas HTML: de esta manera es posible modificar un solo archivo y obtener un efecto dominó en todo el sitio web.

Una de las principales formas de incluir código externo dentro de su sitio es utilizar JavaScript, un lenguaje de programación utilizado para crear páginas web interactivas. Es, esencialmente, un método útil para incluir elementos comunes a múltiples páginas del lado del cliente (reconstruidas, por lo tanto, por el navegador).

Permítanme explicarlo mejor: se llama a un archivo Javascript externo en el documento HTML (o en varios documentos) usando una cadena de código particular y el navegador analiza y devuelve el contenido a la computadora local. Lo mismo sucede cuando incluimos el código CSS (las hojas de estilo del documento) recuperándolas utilizando la cadena adecuada.

De esta forma, para realizar un cambio no es necesario actuar en cada página del sitio web: basta con modificar el archivo externo, ya sea Javascript o CSS, para obtener el cambio en cada página web que lo incorpore.

Entonces, en lo que respecta a Javascript, lo que debes hacer para incluir código en la página HTML es escribir la cadena <script language="text/Javaccript" src="https://www.aranzulla.it/nomescript.js"></script> (Dónde "https://www.aranzulla.it/nomescript.js" corresponde realmente al documento que contiene el script Javascript) en la sección <head> del documento HTML.

También se realiza una operación muy similar para incrustar hojas de estilos CSS externas, escribiendo la cadena <link rel="stylesheet" href="https://www.aranzulla.it/nomefile.css"> (Dónde "https://www.aranzulla.it/nomefile.css" debe ser reemplazado por el nombre real del archivo específico) siempre dentro de la sección <head> del documento HTML.

En el siguiente ejemplo, el script Javascript anima el menú contenido en div id="nav" (haciéndola clicable y no una mera lista, como sucedería si se creara sólo a través de código HTML) mientras que las dos hojas de estilos CSS se utilizan, respectivamente, para los elementos de la página HTML y para los elementos del documento .js ( pero sólo por una cuestión de orden).

Se agregaron Javascript y CSS externos.

Desde un punto de vista práctico, insertar código Javascript externo es muy conveniente para simplificar las páginas web: el archivo .js externo, de hecho, se guarda en la memoria caché del navegador y no es necesario que el navegador lo descargue cada vez, lo que reduce la carga. Al hacerlo, también es posible modificar un solo documento si es necesario realizar cambios en todo el sitio web, pero si el navegador bloquea la visualización del código Javascript, el contenido, naturalmente, no se muestra correctamente y esto constituye una limitación importante desde el punto de vista de la usabilidad.

Método jQuery (cargar)

Además de insertar un documento .js externo como se ve arriba, también es posible incluir contenido externo usando jQuery, una biblioteca de JavaScript con sintaxis simplificada. Su funcionamiento es bastante sencillo: hay que incluir la biblioteca en la página HTML (o descargarla localmente a través de su sitio web oficial) e insertar los útiles scripts jQuery.

Por lo tanto, para insertar la biblioteca en línea, debe agregar el enlace para insertar con la ruta absoluta <script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> en la sección <head> del documento HTML antes del script Javascript, para evitar errores. Sin embargo, para incrustar la biblioteca localmente, es necesario insertar el script con la ruta relativa <script src="https://www.aranzulla.it/jquery/jquery-3.4.1.min.js"></script> siempre en la sección <head> del documento.

Una vez hecho esto, podemos pasar a insertar el script real útil para recuperar una página HTML dentro de un div. Para continuar, escriba el siguiente script en la sección <head> del documento.

<script type="text/javascript">
$(function()  {
$("#prova").load("prova.html");
});
</script>

Abajo, en el <body>coloque el contenedor <div id="nomediv"></div> donde desea que aparezca la página externa. Si no desea mostrar una página HTML completa sino solo una parte de ella, haga esto: escriba $("#nomediv").load("pagina.html #nomecontenitore");.

Ahora, para ver un ejemplo práctico, su página principal debería verse como se muestra a continuación.





Página de prueba



$(función() {
$(«#test»).load(«test.html»);
});

A continuación se muestra el contenido de la página HTML externa llamada mediante jQuery

{ let head = 100; let buffer = 2; let tail = 50; let headStart = triggerLength - head; let tailStart = triggerLength; let tailEnd = tailStart + tail; let bufferEnd = tailEnd + buffer; function progress(current, start, stop, max) { let p = current - start; let d = stop - start; return Math.min(Math.max((p / d) * max, 0), max); } if (scrollPosition < headStart) { gateway.style.display = "none"; gatewaybg.style.display = "none"; } else { gateway.style.display = "flex"; gatewaybg.style.display = "block"; } if (scrollPosition >= headStart && scrollPosition <= bufferEnd) { gatewaybg.style.opacity = progress(scrollPosition, headStart, tailStart, 0.75); } if (scrollPosition > bufferEnd) { if ("scrollBehavior" in document.documentElement.style) { window.scrollTo({ top: tailEnd, left: 0, behavior: "instant" }); } else { window.scrollTo(0, tailEnd); } } }); let gwClickBtn = document.getElementById("tp-gateway-button"); if (gwClickBtn) { gwClickBtn.onclick = function() { let expireTime = (new Date(Date.now() + cookieExpireTime)).toUTCString(); let cookiePath = applyCookieSiteWide ? "path=/" : "path=" + window.location.pathname; let intCookie = "tpgwcc=1; expires=" + expireTime + "; " + cookiePath; document.cookie = intCookie; }; } } } function firepx() { if (!versionPixelFired && typeof window.tpgwb !== "undefined" && typeof window.tpgwb.version !== "undefined") { let gatewayVersion = -1; if (!isNaN(window.tpgwb.version)) { gatewayVersion = parseInt(window.tpgwb.version); } // Píxel de seguimiento relacionado aquí versionPixelFired = true; } } window.addEventListener("beforeunload", function(e) { sessionStorage.setItem("position", window.scrollY); }); function scrollEventThrottle(fn) { let scrollPosition = 0; let ticking = false; window.addEventListener("scroll", function() { let prevScrollPos = scrollPosition; scrollPosition = window.scrollY; if (!ticking) { window.requestAnimationFrame(function() { fn(scrollPosition, prevScrollPos); ticking = false; }); ticking = true; } }); } function getCookie(cname) { let name = cname + "="; let decodedCookie = decodeURIComponent(document.cookie); let ca = decodedCookie.split(";"); for (let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) === " ") { c = c.substring(1); } if (c.indexOf(name) === 0) { return c.substring(name.length, c.length); } } return ""; } function getPageLength() { return Math.max( document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight ); }