http://www.tiptom.ch/homepage/
- Homepage-Tips von Thomas Lüthi
Sie sind hier: tiptom.ch > Homepage-Tips > Homepage erstellen > Tips & Tricks > Includes
Hier erfahren Sie, was "Includes" sind und wie Sie sie in Ihren HTML-Seiten einsetzen können.
Grundkenntnisse in HTML werden vorausgesetzt.
Die Erklärungen und Quellcode-Beispiele auf dieser Seite sind bewusst einfach gehalten und zeigen oft nur eine von mehreren Möglichkeiten. Zur Vertiefung verweise ich auf die Dokumentationen der jeweiligen Programmiersprachen beziehungsweise Programme.
Inhalt:
"Includes" sind HTML-Bausteine, die an einer einzigen Stelle gespeichert sind, aber an mehreren Orten verwendet werden können.
Bei Änderungen muss man also nur eine einzige Datei ("das Include") bearbeiten, und alle Dateien, in denen dieser Baustein vorkommt, werden danach automatisch aktualisiert.
Includes sind besonders geeignet bei Elementen, die auf jeder Seite genau gleich vorkommen, z.B. Navigations-Leisten, Logo, Kontaktangaben, Fusszeilen u.s.w.
Das, was der Webserver an den Browser ausliefert, ist in jedem Fall eine fertige, vollständige HTML-Datei. Der Browser "merkt" nichts davon, dass die Seite Includes enthält.
Wichtig: Includes dürfen nicht vollständige HTML-Seiten sein,
sondern nur Bausteine.
Es wäre völlig falsch, eine vollständige HTML-Datei
als Include in eine andere vollständige Datei einzubetten.
Denn somit hätte man im endgültigen Quelltext die Elemente
<html>
, <head>
und <body>
doppelt.
Ziel: Eine einheitliche Fusszeile soll in alle Dateien eingefügt werden.
Folgender Quellcode wird also als "Include" in einer separaten Datei gespeichert, nennen wir sie mal fusszeile.inc:
<p class="fusszeile">
Autorin: Melanie Muster,
<a href="mailto:melanie@example.org">melanie@example.org</a>
| <a href="kontakt.html">Kontaktformular</a>
| <a href="impressum.html">Impressum</a>
| <a href="index.html">Home</a>
</p>
Wie das Einbauen in die einzelnen Seiten geschieht, hängt von der verwendeten Technologie ab. Details siehe unten.
Meistens schreibt man an der Stelle, wo später der HTML-Baustein eingefügt werden soll, im HTML-Code einen "Platzhalter" oder "Befehl" hin.
In den drei Dateien, welche die Fusszeile enthalten sollen (seite1.html, seite2.html, seite3.html), sieht der Quelltext etwa so aus:
<!-- Ende des Inhalts -->
*** Platzhalter/Befehl für fusszeile.inc ***
</body>
</html>
Durch den Include-Mechanismus wird später an der Stelle des Platzhalters/Befehls der HTML-Baustein aus der entsprechenden Datei (fusszeile.inc) eingefügt.
Dieser Prozess kann entweder noch auf dem Rechner des Autors geschehen (siehe Abschnitt "Lösungen mit HTML-Editoren") oder aber auf dem Webserver (siehe Abschnitt "serverseitige Lösungen").
Im Quelltext, den der Webserver schlussendlich an den Browser ausliefert, sieht man nichts mehr davon. Es handelt sich um ganz normalen HTML-Code:
<!-- Ende des Inhalts -->
<p class="fusszeile">
Autorin: Melanie Muster,
<a href="mailto:melanie@example.org">melanie@example.org</a>
| <a href="kontakt.html">Kontaktformular</a>
| <a href="impressum.html">Impressum</a>
| <a href="index.html">Home</a>
</p>
</body>
</html>
Weitere und ausführlichere Beispiele...
Prinzip: Der Webserver baut den endgültigen HTML-Quelltext
in dem Moment zusammen, wo der Browser die Datei anfordert.
Dies bezeichnet man oft als "dynamische Webseiten"
- im Gegensatz zu "statischen Webseiten", bei denen der Webserver
den HTML-Quelltext unverändert ausgibt, so wie er in der Datei steht.
(Etwas völlig anderes ist der Begriff
Dynamisches HTML - "DHTML".
Darunter versteht man die Kombination von HTML,
JavaScript und
oft auch CSS.
"Dynamisch" bedeutet hier: Mit JavaScript werden im Browser
gewisse Inhalte der Seite verändert oder ausgetauscht,
nachdem der Webserver die Seite an den Browser ausgeliefert hat.
Diese Effekte setzen aber voraus, dass der Browser den JavaScript-Code
versteht und ausführt.)
Wichtig: Diese Lösungen funktionieren nur, wenn der Webserver entsprechend konfiguriert ist.
In der Leistungsbeschreibung Ihres Webspace-Providers (Webhosts) sehen Sie, ob Ihnen SSI, PHP oder andere serverseitige Technologien/ Programmiersprachen zur Verfügung stehen.
Wenn man mehrere Möglichkeiten zur Verfügung hat, muss man sich meist für eine davon entscheiden.
Für das reine Einbetten von statischen Includes reichen SSI eigentlich völlig aus. Wenn man aber komplexere Dinge vorhat (vielleicht auch erst in Zukunft einmal), wie z.B. Formularverarbeitung oder Datenbankabfragen, dann kann es besser sein, gleich von Anfang an eine serverseitige Programmiersprache zu verwenden, die mehr Möglichkeiten bietet.
Die Kombination von PHP und SSI in einer Datei ist normalerweise nicht möglich und auch nicht sinnvoll. Ob man mit einer SSI-Seite ein PHP-Skript einbinden kann (oder umgekehrt), hängt von den (Sicherheits-)Einstellungen des Servers ab.
Die Technologie SSI ist alt, bewährt und einfach. SSI stehen auf vielen Apache-Webservern zur Verfügung.
Meist funktionieren sie automatisch in Dateien mit der Endigung .shtml, bei manchen Server-Konfigurationen auch bei Dateien auf .html.
Mit der folgenden Zeile in der Datei .htaccess
erreicht man, dass SSI auch in Dateien mit der Endigung
.html funktionieren:
Apache 1.3:
AddHandler server-parsed .html
Apache 2.0 und 2.2:
AddOutputFilter INCLUDES .html
Hinweis: Wenn der Webserver jede .html-Datei
abarbeiten ("parsen") muss, selbst wenn diese gar
keine SSI-Befehle
enthält, ergibt das eine gewisse Mehrbelastung für den Webserver.
Gewisse Leute empfehlen darum, anhand der Dateiendigung
zu unterscheiden, ob eine Datei
SSI enthält
(.shtml) oder nicht (.html).
Ich persönlich teile diese Einschätzung nicht. Ich empfehle,
für sämtliche HTML-Ressourcen, egal, wie sie erzeugt werden,
die Dateiendigung .html zu verwenden, zumindest in der
gegen aussen sichtbaren
URL.
Und diese entspricht normalerweise
den "richtigen" Dateinamen, auch wenn es auf gewissen Servern
möglich ist, URLs
zu "verschleiern" (auf dem Apache z.B. mit dem Modul mod_rewrite).
Syntax: Um die Datei fusszeile.inc im gleichen Verzeichnis
einzubinden, schreibt man in die HTML-Datei:
<!--#include file="fusszeile.inc" -->
(Der Pfad muss relativ zur einbettenden Datei sein.)
Es gibt eine zweite Schreibweise mit virtual
.
Dabei kann der Pfad relativ zur einbettenden Datei oder "absolut" vom
Document Root aus angegeben werden, z.B.
<!--#include virtual="fusszeile.inc" -->
oder
<!--#include virtual="/verzeichnis/fusszeile.inc" -->
Verschachtelung von Includes ist möglich, d.h. ein Include kann weitere Includes einbetten. Ebenfalls kann (abhängig von der Server-Konfiguration) die Ausgabe von Skripten, insbesondere von CGI/Perl-Skripten und PHP-Skripten, mit SSI eingebunden werden.
Weitere Angaben
im SelfHTML-Artikel zu SSI - https://wiki.selfhtml.org/wiki/Webserver/SSI
und natürlich im Handbuch (Manual) zum Apache-Webserver:
Apache 1.3:
Tutorial: Introduction to Server Side Includes - http://httpd.apache.org/docs/1.3/howto/ssi.html
Apache Module mod_include
- http://httpd.apache.org/docs/1.3/mod/mod_include.html
Apache 2.0:
Tutorial: Introduction to Server Side Includes - http://httpd.apache.org/docs/2.0/howto/ssi.html
Apache Module mod_include - http://httpd.apache.org/docs/2.0/mod/mod_include.html
Apache 2.2:
Tutorial: Introduction to Server Side Includes - http://httpd.apache.org/docs/2.0/howto/ssi.html
Apache Module mod_include - http://httpd.apache.org/docs/2.0/mod/mod_include.html
PHP (http://www.php.net) ist eine Programmiersprache mit sehr vielen Möglichkeiten.
Meist funktioniert PHP
automatisch in Dateien mit der Endigung
.php
(Bei manchen Server-Konfigurationen funktioniert es auch in Dateien
mit der Endigung .php3, .php4, .phtml u.s.w.)
Mit folgender Zeile in der Datei .htaccess
erreicht man, dass PHP
auch in Dateien mit der Endigung .html funktioniert:
Apache 1.3: (und auch 2.0/2.2)
AddType application/x-httpd-php .html
Apache 2.0 und 2.2: (alternative Möglichkeit)
AddHandler application/x-httpd-php .html
Es gibt in PHP mehrere Varianten, um andere Dateien einzubetten.
Wenn reine HTML-Bausteine unverändert eingebettet werden sollen,
reicht die Funktion readfile()
:
<?php readfile("fusszeile.inc"); ?>
Um Bausteine, die selbst PHP-Befehle enthalten,
einzubetten, nimmt man include()
oder require()
:
<?php require "fusszeile.inc"; ?>
Der Unterschied: Wenn include()
nicht funktioniert,
gibt PHP eine Fehlermeldung aus, aber der Rest der Datei wird angezeigt.
Wenn require()
nicht funktioniert,
wird das Skript abgebrochen.
Verschachtelung von Includes ist bei Verwendung von
include()
oder require()
möglich, d.h. ein Include kann mit PHP-Befehlen seinerseits
weitere Includes einbetten. Mit virtual()
kann man auch die Ausgabe eines CGI-Skripts einbetten.
Wenn man Quelltext von fremden Webseiten einbinden möchte
(und wenn deren Autor damit einverstanden ist), sollte man aus
Sicherheitsgründen nie den fremden Quelltext ausführen lassen,
ihn also nicht mit include()
,
require()
oder
virtual()
einbinden, sondern
entweder den Quelltext mit readfile()
direkt ausgeben lassen
oder (ab PHP 4.3.0) mit file_get_contents()
den Quelltext in eine Stringvariable einlesen, ggf. überprüfen/säubern und dann ausgeben.
Weitere Angaben im PHP-Manual:
readfile(),
include(),
require(),
virtual() und
file_get_contents()
URLs:
http://www.php.net/manual/de/function.readfile.php
http://www.php.net/manual/de/function.include.php
http://www.php.net/manual/de/function.require.php
http://www.php.net/manual/de/function.virtual.php
http://www.php.net/manual/de/function.file-get-contents.php
Diese Technologie steht nur auf speziell eingerichteten Webservern zur Verfügung (z.B. Apache-Server mit Modul mod_perl).
Man kann auch gewisse Dinge auf dem eigenen Rechner installieren und dann Embperl "offline" verwenden, um damit vollständige HTML-Seiten zu erstellen, die man nachher auf den Webserver hochlädt.
Syntax:
[- Execute ('fusszeile.inc') -]
Embperl - Infoseite des Entwicklers (ecos GmbH)
http://www.ecos.de/embperl/de/
Embperl-Einführung - "Modular Files"
http://www.ecos.de/embperl/de/pod/intro/IntroEmbperlObject.-page-5-.htm
Diese Technologie steht auf u.a. auf dem Apache Tomcat Server zur Verfügung.
Includes bindet man z.B. mit folgender Syntax ein:
<jsp:include page="fusszeile.inc" flush="true" />
Der Internet Information Server (IIS) von Microsoft ermöglicht das Einbinden von Includes in Dateien mit der Active Server Pages (ASP) und ASP.NET Technologie (Dateiendigung .asp und .aspx) sowie in Dateien mit der Endigung .stm, .shtm und .shtml.
Die Syntax gleicht der von
SSI
auf dem Apache-Webserver:
<!--#include file="fusszeile.inc"-->
(Pfad relativ zur einbettenden Datei)
<!--#include virtual="/verzeichnis/fusszeile.inc"-->
(Pfad mit "virtuellem Verzeichnis" auf dem Server)
Cold Fusion Markup Language (CFML) ist
eine Technologie von Macromedia, die auf speziell ausgerüsteten
Webservern läuft. Für Includes gilt folgende Syntax:
<cfinclude template = "fusszeile.inc">
CFML 6.1 Reference: cfinclude
http://livedocs.adobe.com/coldfusion/6.1/htmldocs/tags-p63.htm
Ich bin dankbar für Ergänzungen, Hinweise zur Syntax und Links zu (möglichst offiziellen) Tutorials u.s.w. per Mail oder Kontaktformular.
Es ist schwer, die serverseitigen Technologien und Programmiersprachen miteinander zu vergleichen, weil sie - abgesehen von der Include-Technologie - sehr unterschiedliche Möglichkeiten bieten.
Bei der Entscheidung für eine Methode sollte man sich nicht unbedingt davon leiten lassen, was im aktuellen Webspace-Paket gerade enthalten ist, sondern vielmehr davon, was man durch den Einsatz der Includes und der Programmiersprache erreichen will.
Kommentar:
Aus eigener Erfahrung kenne ich vor allem PHP
gut und schätze die leichte Lernbarkeit,
die hervorragende Dokumentation und die (fast unbeschränkten)
Möglichkeiten dieser Programmiersprache.
Über SSI weiss ich relativ gut Bescheid,
und sie sind auch sehr gut dokumentiert.
Die übrigen Technologien (Embperl, JSP und ASP)
kenne ich fast gar nicht. Zu JSP und ASP gibt
es (soweit ich sehen kann) keine zentrale,
einheitliche Dokumentation mit klar erkenntlichem
Aufbau, sondern nur zahlreiche weit verstreute
Artikel und Tutorials.
Versuch einer tabellarischen Gegenüberstellung - bitte senden Sie mir Ihre Ergänzungen und Kommentare!
SSI | PHP | Embperl | JSP | ASP | |
---|---|---|---|---|---|
Leicht zu lernen | +++ | ++ | + | - | |
Online-Dokumentation | +++ | +++ | ++ | - | - |
Möglichkeiten | + | +++ | ++ | ++ | ++ |
Wartbarkeit, Übersichtlichkeit | ++ | ++ | |||
Verfügbarkeit und Verbreitung | +++ | ++ | - | - | + |
Geringe Serverbelastung | ++ | ||||
Sicherheit | |||||
Lizenzmodell/Kosten | OS, KL | OS, KL | OS, KL | OS, KL | $$$ |
Legende: +++ sehr gut, ++ gut, + befriedigend, - schlecht.
OS = Open Source, KL kostenlos, $$$ = teuer
Technologie | Syntax |
---|---|
SSI | <!--#include file="fusszeile.inc" -->
|
PHP | Direkte Ausgabe von statischem HTML-Code:<?php readfile("fusszeile.inc"); ?> Einbetten von Includes, die selbst auch PHP-Code enthalten: <?php include("fusszeile.inc"); ?> <?php require("fusszeile.inc"); ?> |
Embperl | [- Execute ('fusszeile.inc') -] |
JSP | <jsp:include page="fusszeile.inc" flush="true" /> |
ASP | <!--#include file="fusszeile.inc"--> <!--#include virtual="/verzeichnis/fusszeile.inc"--> |
CFML | <cfinclude template = "fusszeile.inc"> |
Prinzip: Der Quelltext, der in allen Seiten gleich sein soll, ist an einer zentralen Stelle (Vorlage-Dateien oder einzelne Quelltext-Bausteine) gespeichert. Man bearbeitet den Quelltext an dieser zentralen Stelle und lässt danach den HTML-Editor sämtliche Dateien, in denen dieser vorkommt, aktualisieren. Dann muss man alle aktualisierten Dateien auf den Webserver hochladen.
Nachteil: Der Aufwand ist also etwas grösser, als wenn der Webserver die Includes einfügt.
Vorteile: Man ist nicht darauf angewiesen,
dass auf dem Webserver bestimmte Technologien vorhanden sind.
Man ist also unabhängig vom Webserver und kann jederzeit
zu einem anderen Webhoster wechseln.
Die fertigen HTML-Seiten kann man gleich so, wie sie sind,
auf eine CD brennen.
Der Freeware-Quelltext-Editor "Phase 5" (http://www.phase5.info) für Windows hat ein eigenes "Includes"-System.
Wie man es anwendet, steht in der Hilfe zu Phase 5 http://www.phase5.info/Hilfe/includetechnik.html, in Clairettes Tutorial http://www.schuletriengen.ch/e-learning/html/meybohm/phase5_tut_0203/lektionen/include.html sowie in den Tips zu Phase 5 von Amethyst-EDV http://www.amethyst-edv.de/tipps/html.php#includes.
Dreamweaver bietet im wesentlichen zwei Möglichkeiten, mehrfach verwendete Dinge zentral zu aktualisieren:
Man sollte sich für eines der beiden Systeme entscheiden - Macromedia rät ausdrücklich davon ab, Vorlagen und Bibliotheken zu mischen.
Daneben zeigt Dreamweaver in der Entwurfsansicht auch Includes an, die mit SSI-Syntax eingebunden werden.
GoLive bietet folgende Möglichkeiten, um mehrfach verwendete Dinge zentral zu aktualisieren:
Hinweis: Daneben gibt es in GoLive offenbar noch sogenannte "Vorlagen" (für ganze HTML-Seiten) und "benutzerdefinierten Auszüge" (englisch "Snippets", für HTML-Bausteine). Wenn man ausgehend von einer "Vorlage" eine oder mehrere Seiten erstellt und zu einem späteren Zeitpunkt die "Vorlage" selbst bearbeitet, lassen sich die Änderungen nicht auf die Seiten übertragen, die von der "Vorlage" abstammen. Ebenso wirken sich Änderungen an "Auszügen" nicht auf die Seiten aus, in welche die "Auszüge" früher eingesetzt wurden.
(Besten Dank an Judith Bihlmaier für die Hinweise!)
Siehe auch: Kapitel 6.1.9: "Globale" Aktualisierungen und Site-Verwaltung" im GoLive Kurs von Reinhold Leinfelder. http://www.palaeo.de/multimediakurs/6_block/6_1_gl_tut_standard/6_1_9_gl_verwaltung.html
Links zu weiteren Tutorials nehme ich gerne entgegen via Mail oder Kontaktformular.
In Frontpage gibt es die sogenannten "gemeinsamen Randbereiche", die etwas ähnliches wie Includes oder Vorlagen ermöglichen.
Google-Suche: Gemeinsame Randbereiche Frontpage
Da ich Frontpage nicht benutze, bin ich dankbar für Adressen von guten Tutorials oder für genauere Hinweise per Mail oder Kontaktformular.
Die zahlreichen Nachteile von Frames sind hinlänglich bekannt;
die wichtigsten finden Sie im Artikel von Michael Nahrath:
Warum Frames out sind ...
http://www.subotnik.net/html/frames.html
Einer der meistgenannten Gründe, warum so viele Seitenbastler überhaupt Frames verwenden, ist Bequemlichkeit.
"Ich will doch nicht 100 Dateien ändern müssen, bloss weil eine neue Seite dazugekommen ist! Da ist es doch viel praktischer, Frames zu verwenden - ich muss nur die Datei mit der Navigation ändern ..."
Diese Ausrede gilt ab sofort nicht mehr. Mit Includes muss man auch nur "die Datei mit der Navigation" ändern, der Rest geschieht auch hier "von selbst".
Bei Frames steht normalerweise die Navigation in einer vollständigen
HTML-Seite (mit <html>
, <head>
,
<body>
u.s.w., und diese Seite wird als
eigenständiges Dokument an den Browser ausgeliefert. Sie ergibt jedoch nur
im Kontext des gesamten Framesets Sinn.
Bei Includes schreibt man nur gerade den
"HTML-Baustein" für die Navigation in eine eigene Datei,
also z.B. nur die <ul>
-Liste
mit allen Links. Über den Include-Mechanismus wird dieser HTML-Baustein
dann in alle betroffenen HTML-Seiten eingebaut. Es werden also
stets vollständige Dokumente ausgeliefert, die sowohl die Inhalte
als auch Navigationselemente enthalten.
In den einzelnen HTML-Seiten steht an der Stelle,
wo später die Navigation sein soll, der Platzhalter/Befehl,
um den Baustein einzubinden.
Dabei spielt es keine Rolle, ob die Navigation "einfach so" als
HTML-Block im normalen Fluss des Dokuments vorkommt
(wie z.B. die Fusszeile im obigen Beispiel),
oder ob sie in einem <DIV>
-Element
oder in einer Zelle einer Layout-Tabelle plaziert ist.
Als Ergänzung gibt es die ausführlichen Beispiele mit Logo, Navigation und Fusszeile, die als Include in eine HTML-Seiten mit CSS-Layout und eine andere HTML-Seite mit Layout-Tabelle eingebettet werden.
Häufige Missverständnisse und Fragen in bezug auf Includes:
<iframe>
sowie einige JavaScript-Konstrukte.)X-Powered-By: PHP/4.3.4
,
aber vernünftige Suchmaschinen, darunter Google, indizieren die
Seiten trotzdem.)<html>
, <head>
und <body>
Element.
Somit hätte man diese Elemente zweimal im eigenen Quelltext.
Das wäre völlig falsch.<iframe>
-Element
einbinden. Das hat allerdings nichts mehr mit Includes zu tun,
sondern ist HTML und funktioniert nur in gewissen Browsern.Alle Rechte beim Autor: Thomas Lüthi. E-Mail: info@tomogramm.ch
Zuletzt bearbeitet am 10.01.2020
URL dieser Seite: http://www.tiptom.ch/homepage/includes.html