Come includere codice esterno nelle pagine Web

di Salvatore Aranzulla

Ti sei avvicinato da poco al mondo della creazione di siti Internet e non sai ancora come includere codice esterno nelle pagine Web? Se vuoi, posso darti qualche dritta sulle strade più semplici da percorrere per acquisire dimestichezza con l’argomento, soprattutto se hai da poco realizzato il tuo primo blog e non hai conoscenze approfondite di programmazione.

Dopo aver letto il post avrai sicuramente le idee più chiare su come aggiungere del codice esterno sul tuo sito Web tramite diversi metodi: utilizzando Javascript per incorporare un documento .js esterno, jQuery per includere una pagina HTML in un’altra pagina HTML e le inclusioni lato server. Poi ti mostrerò come aggiungere codice HTML in maniera molto semplice direttamente su WordPress, utilizzando i blocchi HTML di Gutenberg o l’editor, caricando pagine HTML tra i file multimediali del sito e agendo tramite i client FTP di terze parti. In più, ti mostrerò anche come incorporare una pagina esterna all’interno del tuo sito, come nel caso dei video, delle mappe o di altri elementi ospitati su un server che non ti appartiene.

Insomma, nel corso delle prossime righe vedremo tutti i principali metodi per incorporare degli oggetti esterni nelle pagine Web in maniera rapida e, soprattutto, semplice. Detto questo, non mi resta altro da fare se non augurarti buona fortuna e buon divertimento!

Indice

Come inserire un codice HTML nel proprio sito
Come inserire codice HTML in Wordpress
Come inserire una pagina Web esterna al proprio sito

Come inserire un codice HTML nel proprio sito

Inserire Javascript

In linea generale, per aggiungere del codice HTML al proprio sito, è necessario unicamente aprire il file HTML in questione mediante un qualsiasi editor di testo e apportare le modifiche che si desiderano tramite le apposite streghe di codice utili per raggiungere il risultato voluto. Per esempio, se si vuole inserire una specifica immagine nella propria pagina, basterà utilizzare il codice <img src="nomeimmagine.png" alt="testo"/>, sostituendo a "nomeimmagine.pgn" il reale nome dell’immagine e la sua estensione e a "testo" un testo alternativo che viene visualizzato in caso di problemi di caricamento del file. Maggiori info qui per le immagini e qui per la creazione di pagine HTML.

Questo metodo, tuttavia, è piuttosto scomodo perché se si vogliono modificare aspetti comuni a tutte le pagine bisogna procedere a una a una impiegando moltissimo tempo. É proprio qui, quindi, che vengono in nostro aiuto i file esterni che possono essere richiamati all’interno delle pagine HTML: in questo modo è possibile modificare solo un file e ottenere un effetto a catena su tutto il sito Web.

Uno dei principali metodi per includere del codice esterno all’interno del proprio sito consiste nell’utilizzo di Javascript, un linguaggio di programmazione usato per creare pagine Web interattive. Si tratta, in sostanza, di un metodo utile per includere elementi comuni a più pagine lato client (ricostruiti, quindi, dal browser).

Mi spiego meglio: un file Javascript esterno viene richiamato nel documento HTML (o in più documenti) mediante una particolare stringa di codice e il browser analizza e restituisce il contenuto sul computer locale. Lo stesso accade quando includiamo il codice CSS (i fogli di stile del documento) richiamandoli mediante l’apposita stringa.

In questo modo, per effettuare una modifica, non è necessario andare ad agire su ogni singola pagina del sito Web: basta modificare il file esterno, Javascript o CSS che sia, per ottenere il cambiamento in ogni pagina Web che lo incorpora.

Quindi, per quanto riguarda Javascript, quello che bisogna fare per includere del codice nella pagina HTML è digitare la stringa <script language="text/Javaccript" src="nomescript.js"></script> (dove "nomescript.js" corrisponde effettivamente al documento contenente lo script Javascript) nella sezione <head> del documento HTML.

Un’operazione molto simile viene eseguita anche per incorporare i fogli di stile CSS esterni, digitando la stringa <link rel="stylesheet" href="nomefile.css"> (dove "nomefile.css" deve essere sostituito con il reale nome del file specifico) sempre all’interno della sezione <head> del documento HTML.

Nell’esempio riportato qui di seguito lo script Javascript anima il menu contenuto nel div id="nav" (rendendolo cliccabile e non un mero elenco, come accadrebbe se fosse realizzato solo tramite codice HTML) mentre i due fogli di stile CSS sono utilizzati, rispettivamente, per gli elementi della pagina HTML e per gli elementi del documento .js (ma solo per una questione di ordine).

Aggiunta Javascript e CSS esterni

Da un punto di vista pratico inserire codice Javascript esterno è piuttosto comodo per alleggerire le pagine Web: il file .js esterno, infatti, viene salvato nella memoria cache del browser e non è necessario che il browser lo scarichi ogni volta, diminuendo i tempi di caricamento. Così facendo è anche possibile modificare solo un documento se sono necessari dei cambiamenti su tutto il sito Web. Di contro, però, se il browser blocca la visualizzazione del codice Javascript il contenuto – naturalmente – non viene visualizzato correttamente e questo costituisce un grande limite dal punto di vista dell’usabilità.

jQuery (load) Method

Oltre all’inserimento di un documento esterno .js come visto in precedenza è possibile anche includere contenuti esterni utilizzando jQuery, una libreria JavaScript con sintassi semplificata. Il suo funzionamento è piuttosto semplice: bisogna includere la libreria nella pagina HTML (oppure scaricarla in locale mediante il suo sito Web ufficiale) e inserire gli script di jQuery utili.

Per incorporare la libreria online, quindi, è necessario aggiungere il link di inclusione con percorso assoluto <script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> nella sezione <head> del documento HTML prima dello script di Javascript, onde evitare errori. Per incorporare la libreria in locale, invece, è necessario inserire lo script con percorso relativo <script src="/jquery/jquery-3.4.1.min.js"></script> sempre nella sezione <head> del documento.

Fatto ciò, possiamo passare all’inserimento dello script vero e proprio utile per richiamare una pagina HTML all’interno di un div. Per procedere digita lo script seguente sempre nella sezione <head> del documento.

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

Al di sotto, nel <body>, colloca il contenitore <div id="nomediv"></div> nel punto in cui vuoi che la pagina esterna appaia. Se non vuoi far comparire un’intera pagina HTML ma solo una sua parte fa’ così: digita $("#nomediv").load("pagina.html #nomecontenitore");.

Ora, per vedere un esempio pratico, la tua pagina principale dovrebbe figurare come indicato qui sotto.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Pagina di prova</title>
<meta name="description" content="articolo Aranzulla">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#prova").load("prova.html");
});
</script>
</head>
<body>
<h1>Qui sotto c’è il contenuto della pagina HTML esterna richiamata tramite jQuery</h1>
<div id="prova" style=’border: 2px solid #000000′></div>
</body>
</html>

Mentre la pagina incorporata, invece, dovrebbe avere questo aspetto.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<p id="p1">La pagina HTML è stata raggiunta grazie a jQuery</p>
<p id="p2">Complimenti, ci sei riuscito! :) </p>
</body>
</html>

Queste, naturalmente, sono solo le basi per aggiungere il codice esterno e ce ne sono moltissime altre, come quelle lato server dove non è il browser a "riordinare" gli elementi ma il server prima di restituire la pagina Web.

In questo caso, però, molto dipende dalla macchina che si sta utilizzando. Con le piattaforme che sfruttano il sistema operativo Windows NT o Windows 2000 e come Web server IIS è possibile usare la sintassi  o  per includere file esterni nel punto preciso in cui li si vuole inserire. Per le piattaforme Unix e Apache, invece, è possibile inserire i file esterni con le sintassi  oppure .

Come inserire codice HTML in WordPress

Hai messo su il tuo sito Web con WordPress e ti piacerebbe sapere come fare, a questo punto, per inserire delle modifiche al codice HTML del tuo spazio online? Non c’è problema, è un’operazione che può, naturalmente, essere eseguita – a patto che tu proceda con cautela e utilizzi qualche precauzione utile al fine di evitare che si possano generare danni.

Ci sono molti motivi per i quali potresti voler inserire del codice HTML su WordPress: aggiungere un codice di verifica (come richiesto da numerosi servizi per dimostrare la proprietà del sito, Google Analytics tra tutti), modificare qualche aspetto grafico di una pagina, aggiungere un file HTML scaricabile tramite link, ecc.

In qualsiasi caso, per riuscirci, come ti accennavo in apertura di questa guida, si possono utilizzare diversi metodi: inserire un blocco HTML direttamente nel post di WordPress, caricare l’HTML come file multimediale o agire tramite un client FTP cioè un programma che collega i file locali del computer a quelli ospitati sul server. Nei prossimi paragrafi trovi descritto come procedere per ognuno di questi metodi.

Blocco HTML

Aggiunta codice su Gutenberg

Se desideri aggiungere qualche piccolo elemento grafico in una pagina o in un articolo su WordPress, puoi servirti della funzione HTML, uno dei blocchi che WordPress ha inserito nella sua variante Gutenberg.

Servirsene è molto semplice: apri una pagina o un articolo sul tuo sito WordPress, quindi recati nel punto in cui inserire il tuo elemento HTML e premi sul pulsante Add Block. Dal pannello che vedi aprirsi, nella barra di ricerca denominata Search, digita "HTML" e premi sul risultato comparso.

Ora, nel blocco generato, copia-incolla oppure digita il tuo codice HTML per aggiungere l’elemento che desideri, come un box o un banner. Una volta fatto, per vederne l’anteprima, premi sul tasto Preview e controlla quanto aggiunto tramite il codice. Semplice, no?

Se non utilizzi Gutenberg ma la versione classica di WordPress, invece, puoi inserire il codice HTML direttamente dentro l’editor della pagina o dell’articolo, premendo prima sulla scheda Testo. Per vederne l’anteprima, in questo caso, clicca sulla scheda Visuale.

Caricamento come file multimediale

Wordpress Gutenberg

Se il tuo desiderio è di aggiungere un file HTML che gli utenti del tuo sito possano scaricare oppure utilizzare WordPress per archiviare file, allora puoi servirti della libreria multimediale di WordPress.

Nel primo caso, per generare un link collegato a un file scaricabile presente nella tua libreria, procedi come segue: recati sulla pagina o sull’articolo nel quale inserire il link, quindi premi sul pulsante Add Block nel punto in cui desideri che compaia l’elemento. Ora, nel pannello che si apre, nella barra di ricerca Search, digita "File" e premi sul risultato omonimo.

Nel blocco che si è generato sulla pagina o sull’articolo pigia poi il tasto Upload e sfrutta l’Esplora file di Windows o il Finder di macOS per individuare e caricare il file HTML che ti interessa. In questo modo verrà generato un link.

Versione classica WordPress

Se utilizzi la versione classica dell’editor, invece, premi sul tasto Aggiungi media, quindi spostati sulla scheda Carica file presente nella pagina successiva e clicca sul tasto Seleziona i file. Ora sfrutta l’Esplora File o il Finder per individuare il documento HTML da caricare. Una volta fatto, nella pagina successiva, controlla che accanto alla voce Link a sia impostata l’opzione File media e clicca sul tasto Inserisci nell’articolo. In questo modo verrà generato un link che riconduce alla risorsa HTML scaricabile.

Nel caso in cui, invece, volessi solo caricare dei file HTML per archiviarli puoi procedere come indicato in precedenza ed eliminare il link dalla pagina o dall’articolo, per far sì che rimanga salvato solamente nella libreria multimediale. In alternativa, invece, puoi caricarlo direttamente nella libreria, saltando il passaggio del link nella pagina WordPress.

Per farlo, nel menu laterale di WordPress, premi sulla voce Media, quindi clicca sul tasto Aggiungi nuovo file media collocato in alto nella pagina apertasi. Dopodiché, nella pagina successiva, trascina il tuo file HTML nel riquadro oppure premi il tasto Seleziona i file e sfrutta l’Esplora File o il Finder per caricarli. Una volta concluso, se lo desideri, premi sul tasto Copia l’URL negli appunti per condividerlo con altre persone senza che il file sia collocato, però, in una specifica pagina Web.

Client FTP

FileZilla accesso

Come ti accennavo precedentemente, un ottimo metodo per caricare file locali su WordPress è agire tramite un client FTP, cioè un programma capace di mettere in comunicazione il computer con il server che ospita il sito. Farlo, tutto sommato, non è molto complicato.

Come client FTP ti consiglio di utilizzare FileZilla, uno dei più noti e affidabili attualmente in piazza. Come prima cosa, quindi, scaricalo sul tuo computer collegandoti a questa pagina Web, premendo sul tasto Download FileZilla Client per due volte consecutive (controllando, la seconda volta, che il sistema operativo del computer sia stato rilevato correttamente) e cliccando sul il tasto Download relativo a FileZilla, per scaricarne la versione gratuita.

Ora, se utilizzi Windows, esegui un doppio clic sull’eseguibile ottenuto e premi i tasti Sì e I Agree, quindi apponi il segno di spunta su Decline e premi il tasto Next per quattro volte consecutive. In ultimo, pigia sul tasto Install e attendi l’installazione del programma, per poi premere il pulsante Finish e aspettare che si apra.

Su macOS, invece, pigia sulla voce Consenti, quindi esegui un doppio clic sul file .bz2 ottenuto e attendi che il pacchetto venga estratto da Utility compressione. Ora esegui un doppio clic sull’icona di FileZilla nella cartella Download (che vedrai aprirsi automaticamente) e premi i tasti Apri e Consenti nei messaggi comparsi a schermo. Ora il programma è pronto per essere utilizzato.

A questo punto, prima di procedere e di fare qualsiasi altra cosa, ti conviene creare un file di backup del tuo sito WordPress, onde evitare che – se durante il caricamento di file si verificano dei problemi – il sito venga irrimediabilmente danneggiato. Questa eventualità è rara, ma la prudenza non è mai troppa. Per eseguire un backup del tuo intero sito Web puoi procedere in diversi modi. Personalmente ti consiglio di utilizzare il pannello di amministrazione fornito dal tuo hosting, come Aruba. In questo caso, trovi descritto come procedere in questo approfondimento. Nel caso in cui il tuo hosting fosse un altro, ti basta eseguire una semplice ricerca su Google, digitando keyword come "Come fare backup sito WordPress" + "nome del provider" (es. Come fare backup sito WordPress Serverplan).

FileZilla

Una volta messi al sicuro tutti i tuoi dati (che possono quindi essere ripristinati in caso di errori dal pannello di gestione dell’hosting) puoi procedere con l’utilizzo di FileZilla provvedendo innanzitutto ad accedere mediante le credenziali FTP/SFTP dell’host, normalmente presenti nel pannello di gestione. Nel mio caso il servizio di hosting è Serverplan e i dati da inserire sono i seguenti.

Host – il nome a dominio o l’IP del server
Nome utente – l’username del cPanel
Password – password del cPanel
Porta – 21

Una volta individuati i dati digitali, all’interno di FileZilla, nei campi collocati in alto sotto alle icone e premi il tasto Connessione rapida. Nel messaggio che compare a schermo scegli se salvare o meno la password per gli accessi futuri e premi il tasto OK. Ora nell’ulteriore messaggio a schermo (Certificato sconosciuto) apponi il segno di spunta alla voce Accetta sempre questo certificato nelle future sessioni e pigia il tasto OK, per accedere definitivamente.

In questo modo, sulla destra del pannello vedrai tutte le cartelle e i file presenti nel tuo sito Web, mentre nella parte a sinistra potrai spostarti tra i file salvati in locale sul computer, tutti con gerarchia ad albero. A questo punto non devi far altro che trascinare i file dal lato locale al lato server, inserendoli nelle cartelle corrette (ricordandoti che quella principale è normalmente chiamata public).

Come inserire una pagina Web esterna al proprio sito

Incorporazione YouTube

Come includere codice esterno nelle pagine Web per far comparire un video o un contenuto non ospitato sul server? Quando tale codice – definito codice embed – è fornito direttamente da servizi come YouTube (per l’incorporamento di video), Google Drive (per l’incorporamento di documenti), Google Maps (per le mappe) o Facebook basta copiarlo nel sito/blog e incollarlo dove si desidera usando, ovviamente, il blocco HTML o l’editor HTML di WordPress. Facciamo un esempio pratico.

Se vuoi incorporare un video di YouTube sul tuo blog, non devi far altro che collegarti alla pagina del video, cliccare sul pulsante Condividi e selezionare il tasto Incorpora dal riquadro che si apre. Nel pannello successivo copia il codice riportato, selezionandolo, premendo il tasto destro del mouse e cliccando sulla voce Copia dal menu comparso oppure premendo semplicemente sul tasto Copia presente nel riquadro visualizzato.

Apri quindi l’articolo o la pagina dove inserire il video, aggiungi un blocco HTML e copia al suo interno il codice. In alternativa, apri l’editor HTML del tuo blog e incolla nella parte del post che desideri il codice per la riproduzione del video, se utilizzi la versione Classic di WordPress. In questo modo si genererà automaticamente un blocco utile per l’incorporazione dei codici e non dovrai far altro che premere il tasto per l’incorporazione. Più facile di così?

In alternativa, se il sito Web che vuoi incorporare non prevede una funzione utile per farlo, puoi utilizzare un blocco HTML (come descritto in precedenza, se utilizzi WordPress Gutenberg) e/o digitare uno specifico codice, del tutto simile a quello che viene generato automaticamente da siti Web come YouTube.

<iframe src="https://nomeurl.it"></iframe>

iFrame, infatti, è l’attributo utile per incorporare codice esterno sul proprio sito Web, visualizzando una pagina di un sito in un articolo o in una pagina del tuo blog. Tieni però in considerazione il fatto che iFrame presenta delle limitazioni: non tutti i siti permettono agli altri utenti di incorporare i propri contenuti; se visualizzi un errore relativo alla connessione negata probabilmente si tratta di quello. In più, se il tuo sito Web usa il protocollo HTTPS, può incorporare solo altre pagina che sfruttano lo stesso protocollo (e non, ad esempio, le pagine HTTP).

Per ottenere una migliore resa grafica si possono anche specificare i parametri di iFrame, come nel codice riportato qui sotto, dovewidth e height rappresentano, rispettivamente, la larghezza e l’altezza dell’elemento.

<iframe src="sito.it" width="300" height="400"></iframe>

L’utilizzo degli iFrame, tuttavia, potrebbe rappresentare un rischio per la sicurezza: ad esempio, potrebbero essere mostrati dati sensibili al loro interno oppure si potrebbero mostrare i contenuti di un sito Web hackerato, esponendo gli utenti a dei pericoli. Tienine conto!

Salvatore Aranzulla è il blogger e divulgatore informatico più letto in Italia. Noto per aver scoperto delle vulnerabilità nei siti di Google e Microsoft. Collabora con riviste di informatica e cura la rubrica tecnologica del quotidiano Il Messaggero. È il fondatore di Aranzulla.it, uno dei trenta siti più visitati d'Italia, nel quale risponde con semplicità a migliaia di dubbi di tipo informatico. Ha pubblicato per Mondadori e Mondadori Informatica.