Com incloure un fitxer HTML en un altre

L'ús d'HTML inclou pot simplificar molt la gestió del vostre lloc

Aneu a qualsevol lloc web i navegueu de pàgina a pàgina i ràpidament s'adonarà que, tot i que cadascuna d'aquestes pàgines pot ser diferent de moltes maneres, també són bastant similars en d'altres. Gairebé tots els llocs web inclouen elements del disseny que es repeteixen a totes les pàgines del lloc. Alguns exemples d'elements del lloc que es trobarien a cada pàgina serien l'àrea de capçalera on resideix el logotip, la navegació i l'àrea del peu de pàgina.

Els elements repetits en un lloc permeten la coherència en l'experiència de l'usuari. Un visitant no necessita localitzar la navegació a totes les pàgines perquè, una vegada que l'han trobat, saben on es trobaran en altres pàgines del lloc que visiten.

Com inclou fer que el disseny web sigui més eficient

Com algú encarregat de gestionar un lloc web, aquestes àrees repetides ofereixen un repte. Què passa si cal fer un canvi en alguna cosa en aquesta àrea? Per exemple, si el vostre peu de pàgina (que es troba a totes les pàgines del lloc) inclou una declaració de drets d'autor amb un any, què passa quan aquest any canvia i necessiteu editar la data? Atès que aquesta secció és a totes les pàgines, ara heu d'editar cada pàgina del vostre lloc de forma individual per fer-ho, o bé?

El contingut inclòs pot eliminar la necessitat d'haver d'editar totes les pàgines del vostre lloc per a aquest contingut repetit. En canvi, simplement editeu un fitxer i el vostre lloc sencer i cada pàgina en què obté l'actualització.

Vegem algunes maneres en què podeu afegir aquesta funcionalitat al vostre lloc i incloure un fitxer HTML en molts altres.

Contingut repetit als sistemes de gestió de continguts

Si el vostre lloc utilitza un CMS , és probable que utilitzi certes plantilles o temes que formen part d'aquest programari. Encara que personalitzeu aquestes plantilles des de zero, el lloc encara aprofita aquest marc per a les pàgines.

Com a tal, aquestes plantilles CMS contindran les àrees del lloc que es repeteixen a cada pàgina. Només heu d'iniciar sessió al backend del CMS i editar les plantilles necessàries. Totes les pàgines del lloc que utilitzen aquesta plantilla s'actualitzaran.

Fins i tot si no teniu un sistema de gestió de contingut per al vostre lloc, encara podeu aprofitar els fitxers inclosos. A HTML, hi ha inclusions que poden ajudar a fer més fàcil la gestió d'aquestes àrees templades del vostre lloc.

Què inclouen HTML?

Una inclusió és una secció d'HTML que no és un document HTML complet per si mateix. En canvi, és una porció d'una altra pàgina que es pot inserir en una programació de pàgines web completa. La majoria dels fitxers inclosos són aquells elements esmentats anteriorment que es repeteixen a diverses pàgines d'un lloc web. Per exemple:

Hi ha un avantatge de tenir aquestes àrees repetides incloses a les pàgines. Malauradament, el procés d'inserció d'un arxiu no és una cosa que només pot passar amb HTML, de manera que necessiteu algun tipus de programa o script que inclogui els vostres fitxers d'inclusió a les vostres pàgines web.

S'utilitza el costat del servidor

Side Side Server, també conegut com SSI, es va desenvolupar per primera vegada perquè els desenvolupadors web puguin "incloure" documents HTML dins d'altres pàgines.

Bàsicament, un fragment que es troba en un document s'inclou en un altre quan la pàgina s'executa al servidor i s'envia al navegador web.

SSI està inclòs en la majoria de servidors web, però és possible que hàgiu d'activar-lo per tal que funcioni. Si no sabeu si el vostre servidor és compatible amb SSI, poseu-vos en contacte amb el vostre proveïdor d'allotjament .

Aquí teniu un exemple de com podeu utilitzar SSI per incloure un fragment de codi HTML a totes les vostres pàgines web:

  1. Deseu el codi HTML per als elements comuns del vostre lloc com a fitxers separats. Per exemple, la vostra secció de navegació es pot desar com a navegació.html o navegació.ssi .
  2. Utilitzeu el codi SSI següent per incloure el codi del document HTML a cada pàgina ( substituint la ruta i el nom del fitxer entre les cometes ). {C}
  1. Afegiu aquest codi a cada pàgina que vulgueu incloure el fitxer.

S'utilitza PHP

PHP és un llenguatge de script de nivell de servidor. Es pot fer una sèrie de coses, però un ús comú és incloure documents HTML dins de les seves pàgines, de la mateixa manera que acabem de cobrir amb un SSI.

Igual que SSI, PHP és una tecnologia de nivell de servidor. Si no esteu segur de si teniu la funcionalitat de PHP al vostre lloc web, poseu-vos en contacte amb el vostre proveïdor d'allotjament.

Aquí teniu un senzill script PHP que podeu utilitzar per incloure un fragment de codi HTML a qualsevol pàgina web amb PHP:

  1. Deseu el codi HTML per als elements comuns del vostre lloc, com ara la navegació, per separar els fitxers. Per exemple, la vostra secció de navegació es pot desar com a navegació.html o navegació.ssi .
  2. Utilitzeu el següent codi PHP per incloure aquest HTML a cada pàgina ( substituint la ruta i el nom del fitxer entre les cometes ). navigation.php ");?>
  3. Afegiu aquest mateix codi a totes les pàgines que vulgueu incloure el fitxer.

Inclou JavaScript

JavaScript és una altra forma d'incloure HTML dins de les pàgines del vostre lloc. Això té l'avantatge de no requerir una programació a nivell del servidor, però és una mica més complicat, i òbviament funciona per a un navegador que permeti Javascript, el que la majoria fan a menys que l'usuari decideixi desactivar-lo.

A continuació, es pot incloure un fragment de codi HTML mitjançant JavaScript :

  1. Deseu el codi HTML dels elements comuns del vostre lloc a un fitxer JavaScript. Qualsevol HTML escrit en aquest fitxer, s'ha d'imprimir a la pantalla amb la funció document.write.
  2. Pengeu aquest fitxer al vostre lloc web.
  3. Utilitzeu un element