Come includere un file HTML in un altro

click fraud protection

Cosa sapere

  • Contenuto incluso elimina la necessità di modificare ogni pagina del tuo sito per contenuti ripetuti.
  • Server Side, PHP e JavaScript Include consentono di aggiungere codici specifici a qualsiasi pagina in cui si desidera includere un file.
  • I siti CMS utilizzano modelli o temi per contenuti ripetuti.

Questo articolo spiega come funziona "Include" e fornisce i passaggi per l'utilizzo delle inclusioni lato server, delle inclusioni PHP e delle inclusioni JavaScript.

Utilizzo delle inclusioni lato server

Server Side Include è stato inizialmente sviluppato per consentire agli sviluppatori Web di "includere" documenti HTML all'interno di altre pagine. Fondamentalmente, uno snippet che si trova in un documento viene incluso in un altro quando la pagina viene eseguita sul server e inviata al browser web.

SSI è incluso nella maggior parte dei server Web, ma potrebbe essere necessario abilitarlo per farlo funzionare. Se non sai se il tuo server supporta SSI, contatta il tuo fornitore di hosting.

instagram viewer

Ecco un esempio di come puoi utilizzare SSI per includere uno snippet di HTML in tutte le tue pagine web:

  1. Salva l'HTML per gli elementi comuni del tuo sito come file separati. Ad esempio, la tua sezione di navigazione potrebbe essere salvata come navigazione.html o navigazione.ssi.

  2. Utilizzare il seguente codice SSI per includere il codice del documento HTML in ogni pagina.


    o.

    Il includere La direttiva accetta due parametri. Virtuale presuppone che il nome del file sia relativo alla radice del documento del sito Web, mentre file accetta un percorso di file assoluto.

  3. Aggiungi questo codice in ogni pagina in cui desideri includere il file.

Utilizzo di PHP include

Come SSI, PHP è una tecnologia a livello di server. Se non sei sicuro di avere la funzionalità PHP sul tuo sito web, contatta il tuo provider di hosting.

Ecco un semplice script PHP che puoi utilizzare per includere uno snippet di HTML su qualsiasi pagina web abilitata per PHP:

  1. Salva l'HTML per gli elementi comuni del tuo sito, come la navigazione, in file separati. Ad esempio, la tua sezione di navigazione potrebbe essere salvata come navigazione.html o navigazione.ssi.

  2. Usa il seguente codice PHP per includere quell'HTML in ogni pagina (sostituendo il percorso e il nome del file tra le virgolette).

  3. Aggiungi questo stesso codice su ogni pagina in cui desideri includere il file.

JavaScript include

JavaScript è un altro modo per includere HTML all'interno delle pagine del tuo sito. Questa tecnica non richiede la programmazione a livello di server, ma è un po' più complicata e... ovviamente funziona per un browser che consente Javascript, cosa che la maggior parte fa a meno che l'utente non decida di disabilitare esso.

Ecco come puoi includi un frammento di HTML usando JavaScript:

Salva l'HTML per gli elementi comuni del tuo sito in un file JavaScript. Qualsiasi HTML scritto in questo file deve essere stampato sullo schermo con il document.write funzione.

  1. Carica quel file sul tuo sito web.

  2. Usare un 

  3. Usa lo stesso codice su ogni pagina in cui desideri includere il file.

Cosa sono gli include HTML?

Un'inclusione è una sezione di HTML che di per sé non è un documento HTML completo. Invece, è una parte di un'altra pagina che può essere inserita in una pagina Web completa tramite la programmazione. La maggior parte dei file include sono quegli elementi di cui sopra che vengono ripetuti su più pagine di un sito web. Per esempio:

  • Navigazione
  • Informazioni sul copyright
  • Aree di intestazione
  • Aree piè di pagina

In che modo "include" rende il web design più efficiente

Quasi tutti i siti Web includono elementi del design che vengono ripetuti in ogni pagina del sito, inclusa l'area dell'intestazione in cui risiede il logo, il menu di navigazione e l'area del piè di pagina.

Gli elementi ripetuti su un sito consentono la coerenza nell'esperienza dell'utente. Un visitatore non ha bisogno di localizzare la navigazione su ogni pagina perché una volta trovata, sa dove sarà nelle altre pagine del sito che visita.

Il contenuto incluso elimina la necessità di modificare ogni pagina del tuo sito per questo contenuto ripetuto. Invece, modifichi un file e quindi l'intero sito e ogni pagina in esso contenuti ricevono l'aggiornamento.

File HTML

Contenuti ripetuti nei sistemi di gestione dei contenuti

Se il tuo sito utilizza un CMS, probabilmente utilizza determinati modelli o temi che fanno parte di quel software. Anche se crei questi modelli personalizzati da zero, il sito sfrutta ancora questo framework per le pagine. Pertanto, quei modelli CMS contengono le aree del sito che vengono ripetute in ogni pagina. È sufficiente accedere al backend del CMS e modificare i modelli necessari. Tutte le pagine del sito che utilizzano quel template verranno aggiornate.

Anche se non utilizzi un sistema di gestione dei contenuti per il tuo sito, puoi comunque sfruttare i file inclusi. Nell'HTML, include contribuiscono a semplificare la gestione di queste aree del sito basate su modelli.

Altri metodi di inclusione

Ci sono molti altri modi per includere HTML nelle tue pagine. Alcuni sono più complicati di altri e molti di loro sono in realtà obsoleti per gli standard odierni.

  • CGI include: Puoi usare Perla o un altro linguaggio di programmazione per creare le tue pagine e quindi includere ciò che desideri, sia come file "richiesti" che leggendoli manualmente.
  • Flash include: se crei il tuo sito interamente in Adobe Flash, puoi utilizzarlo per includere elementi del sito. Questo metodo è obsoleto e di questi tempi i siti Flash completi sono una rarità sul Web.
  • Le cornici includono: invece di utilizzare gli stessi elementi più e più volte su più pagine, crea un sito con frame in cui i frame sono le parti duplicate del sito. Tuttavia, ad eccezione dell'elemento iframe, i frame sono obsoleti in HTML5.
  • Gli strumenti di gestione dei contenuti includono: La creazione di modelli è uno dei principali punti di forza del CMS ed è proprio il modo in cui questo lavoro viene gestito oggi nella maggior parte dei siti.
instagram story viewer