So fügen Sie eine HTML-Datei in eine andere ein

In diesem Artikel wird erläutert, wie "Includes" funktionieren, und enthält Schritte zur Verwendung von Server Side Includes, PHP-Includes und JavaScript-Includes.

Verwenden von Server-Side-Includes

Server Side Includes wurde ursprünglich entwickelt, um es Webentwicklern zu ermöglichen, HTML-Dokumente in andere Seiten einzubinden. Grundsätzlich wird ein Snippet, das sich in einem Dokument befindet, in ein anderes eingefügt, wenn die Seite auf dem Server ausgeführt und an den Webbrowser gesendet wird.

SSI ist auf den meisten Webservern enthalten, aber Sie müssen es möglicherweise aktivieren, damit es funktioniert. Wenn Sie nicht wissen, ob Ihr Server SSI unterstützt, wenden Sie sich an Ihren Hosting-Anbieter.

Hier ist ein Beispiel dafür, wie Sie mit SSI einen HTML-Schnipsel in alle Ihre Webseiten einfügen können:

1. Speichern Sie den HTML-Code für die gemeinsamen Elemente Ihrer Site als separate Dateien. Ihr Navigationsabschnitt könnte beispielsweise gespeichert werden als navigation.html oder navigation.ssi.

2. Verwenden Sie den folgenden SSI-Code, um den Code dieses HTML-Dokuments in jede Seite einzuschließen.

   
   oder.
   

   Das einschließen Direktive akzeptiert zwei Parameter. Virtuell geht davon aus, dass der Dateiname relativ zum Dokumentenstamm der Website ist, während Datei akzeptiert einen absoluten Dateipfad.

3. Fügen Sie diesen Code auf jeder Seite hinzu, auf der Sie die Datei einschließen möchten.

Verwenden von PHP-Includes

Wie SSI, PHP ist eine Technologie auf Serverebene. Wenn Sie nicht sicher sind, ob Ihre Website über PHP-Funktionalität verfügt, wenden Sie sich an Ihren Hosting-Provider.

Hier ist ein einfaches PHP-Skript, mit dem Sie einen HTML-Schnipsel in jede PHP-fähige Webseite einfügen können:

1. Speichern Sie den HTML-Code für die gemeinsamen Elemente Ihrer Site, z. B. die Navigation, in separaten Dateien. Ihr Navigationsabschnitt könnte beispielsweise gespeichert werden als navigation.html oder navigation.ssi.

2. Verwenden Sie den folgenden PHP-Code, um diesen HTML-Code in jede Seite einzufügen (Ersetzen Sie den Pfad und den Dateinamen Ihrer Datei zwischen den Anführungszeichen).

3. Fügen Sie denselben Code auf jeder Seite hinzu, auf der Sie die Datei einschließen möchten.

JavaScript enthält

JavaScript ist eine weitere Möglichkeit, HTML in die Seiten Ihrer Site einzubinden. Diese Technik erfordert keine Programmierung auf Serverebene, ist aber etwas komplizierter – und es funktioniert offensichtlich für einen Browser, der Javascript zulässt, was die meisten tun, es sei denn, der Benutzer beschließt, dies zu deaktivieren es.

So können Sie Fügen Sie einen HTML-Schnipsel mit JavaScript ein:

Speichern Sie den HTML-Code für die allgemeinen Elemente Ihrer Website in einer JavaScript-Datei. Jeder HTML-Code, der in diese Datei geschrieben wird, muss mit dem auf den Bildschirm gedruckt werden document.write Funktion.

1. Laden Sie diese Datei auf Ihre Website hoch.

2. Verwenden ein 

3. Verwenden Sie denselben Code auf jeder Seite, auf der Sie die Datei einschließen möchten.

Was beinhaltet HTML?

Ein Include ist ein Abschnitt von HTML, der selbst kein vollständiges HTML-Dokument ist. Stattdessen ist es ein Teil einer anderen Seite, der durch Programmierung in eine vollständige Webseite eingefügt werden kann. Die meisten Include-Dateien sind die oben genannten Elemente, die auf mehreren Seiten einer Website wiederholt werden. Beispielsweise:

• Navigation
• Urheberrechtsinformation
• Kopfbereiche
• Fußzeilenbereiche

Wie 'Includes' Webdesign effizienter macht

Fast alle Websites enthalten Designelemente, die sich auf jeder Seite der Website wiederholen, einschließlich des Kopfbereichs, in dem sich das Logo befindet, des Navigationsmenüs und des Fußbereichs.

Wiederholte Elemente auf einer Website ermöglichen eine einheitliche Benutzererfahrung. Ein Besucher muss die Navigation nicht auf jeder Seite suchen, denn sobald er sie gefunden hat, weiß er, wo sie sich auf anderen Seiten der von ihm besuchten Website befindet.

Der enthaltene Inhalt macht es überflüssig, jede Seite Ihrer Website für diesen wiederholten Inhalt zu bearbeiten. Stattdessen bearbeiten Sie eine Datei und dann wird Ihre gesamte Site und jede Seite darin aktualisiert.

Wiederholte Inhalte in Content-Management-Systemen

Wenn Ihre Website ein CMS verwendet, verwendet sie wahrscheinlich bestimmte Vorlagen oder Themen, die Teil dieser Software sind. Auch wenn Sie diese Vorlagen von Grund auf neu erstellen, nutzt die Site dieses Framework für die Seiten. Als solche enthalten diese CMS-Vorlagen die Bereiche der Site, die sich auf jeder Seite wiederholen. Sie loggen sich einfach im Backend des CMS ein und bearbeiten die notwendigen Vorlagen. Alle Seiten der Site, die diese Vorlage verwenden, werden aktualisiert.

Auch wenn Sie kein Content-Management-System für Ihre Site verwenden, können Sie die enthaltenen Dateien trotzdem nutzen. Im HTML-Format beinhaltet erleichtern die Verwaltung dieser Vorlagenbereiche Ihrer Website.

Andere Include-Methoden

Es gibt mehrere andere Möglichkeiten, HTML in Ihre Seiten einzubinden. Einige sind komplizierter als andere, und viele von ihnen sind nach heutigen Maßstäben tatsächlich veraltet.

• CGI beinhaltet: Sie können verwenden Perl oder eine andere Programmiersprache, um Ihre Seiten zu erstellen und dann hinzuzufügen, was Sie wollen, entweder als "erforderliche" Dateien oder durch manuelles Einlesen.
• Blitz beinhaltet: Wenn Sie Ihre Site vollständig in Adobe Flash erstellen, können Sie damit Elemente der Site einschließen. Diese Methode ist veraltet und vollständige Flash-Sites sind heutzutage eine Seltenheit im Web.
• Rahmen enthalten: Anstatt dieselben Elemente immer wieder auf mehreren Seiten zu verwenden, erstellen Sie eine gerahmte Site, bei der die Frames die duplizierten Teile der Site sind. Mit Ausnahme des iframe-Elements Frames sind in HTML5 veraltet.
• Inhaltsverwaltungstools enthalten: Templating ist eines der wichtigsten Verkaufsargumente von CMS und so wird diese Arbeit heutzutage auf den meisten Websites gehandhabt.