HTML einzelne Bereiche auslagern, da sie sich wiederholen z.b. header

Hallo,

ich bin an einer Seite mit vielen unterseiten. Nun sieht z.B. der Header und der Footer immer gleich aus. Gibt es nicht eine Möglichkeit eine „header.html“ und eine „footer.html“ zu erstellen, und diese auf jeder Seite einzubinden (und das ganze ohne PHP oder Javascript, nur mit reinem HTML + CSS)??

Gruß,

Mit reinen HTML gibt es nur die Möglichkeit Frames zu nutzen.
Frameseiten können auf Mobilen Endgeräten (Smartphones, etc…) unter Umständen nicht darstellbar sein.
Im Normalen Browser ist das aber kein Problem.

Siehe auch:
http://de.selfhtml.org/html/frames/index.htm

Gruß Thomas

Nein. Mit reinem HTML so wie du es dir vorstellst, gibt es da leider keine Möglichkeit.

In solch einem Fall hilft es, dass man sich eine Vorlagen-Seite mach, die man immer wieder unter anderem Namen speichert, und dann dort den Inhalt einfügt.

Du hast oftmals schneller den Header und den Footer per Hand ausgetauscht.

Einige Programme wie der Dreamwawer können auch komplette Abschnitte in einem Rutsch austauschen. Du musst nur dafür sorgen, dass alle Bausteine absolut gleich aufgebaut sind, so dass man sie besser austauschen kann.

Es ist übrigens günstig mit Kommentaren zu arbeiten.

etc.
Dann kannst du recht gut mit Suchen und Ersetzen arbeiten.

Eine andere Möglichkeit ist es mit Frames zu arbeiten. Aber dies macht man kaum noch. Zumal du dich auch erst mal in die Frames einarbeiten musst.
Wenn es jedoch darum geht, verschiedene Dokumente zu präsentieren, da machen Frames durchaus Sinn. Bei einer navigierbaren Homepage verzichtet man meist darauf. Es kommt halt darauf an, welchen Anspruch du an deine Seite stellst. Denn so viel gibt es bei den Frames nicht zu beachten, und diese hat man doch relativ schnell gelernt.

Bei einem geringen Umfang an Seiten ist die Bearbeitung von Hand am einfachsten.

Bei größeren Projekten empfiehlt es sich ein Content-Management-System wie beispielsweise Drupal, TYPO3 oder Joomla einzusetzen.

Einige Internetanbieter liefern solche kompletten Content-Management-Systeme, wo man kaum bis gar keine HTML-Kenntniste benötigt.

Gruß Mjchael

Nein.

Das ginge dann per SSI, falls es der Server unterstützt.
Die Seiten müssten dann in der Regel nicht mehr .html sondern .shtml heißen. Versuchen kann man es aber auch mal mit .html-Dateien. Ich würde mal beim Provider anfragen wie das configuriert ist.

Eine kurze Referenz findest du hier:
http://de.selfhtml.org/servercgi/server/ssi.htm

Uwe

Hallo Bachelor,

mit HTML alleine geht so etwas nicht. Wenn der Server das unterstützt, kann man das mit Server Side Includes machen (http://de.wikipedia.org/wiki/Server_Side_Includes).

Es gibt theoretisch die Möglichkeit, für so etwas Frames zu nutzen, das hat aber zu viele Nachteile und ist hoffnungslos veraltet.

Viele Grüße,

Marc Haunschild
www.mhis.de - web designed for YOU!

Hallo Bachelor,

das ist mir so nicht bekannt.
Du müsstest schon CSS nutzten wenn PHP dir nicht liegt.

Lieben Gruss
Locutus

Hallo Bachelor,

mit reinem HTML kannst Du Dein Vorhaben nur mit einem Frameset und Frames umsetzen, dabei werden ganze HTML-Seiten in bestimmte Bereiche Deiner Konstruktion eingeladen. Dies ist aber nicht nur völlig veraltet, sondern stellt eine immense Hürde für Suchmaschinen dar, da diese die Inhalte nicht zusammen indizieren können. Sofern die SuMas keine Rolle spielen, informiere Dich auf SelfHTML zum Thema „Framesets“, dort findest Du alle nötigen Informationen, um Dein Vorhaben umzusetzen.

HTML selbst bietet keine Technik, mit der man bestimmte Bereiche aus getrennten Dateien in ein Dokument laden kann. Mit PHP ist das nun wieder überhaupt kein Problem, dort gibt es den „include“-Aufruf, der einzelne Elemente aus einer zentralen Quelle in beliebig viele Dokumente einbinden kann - das wäre die richtige Lösung für Deine Pläne. Der nötige Lernaufwand, das umzusetzten beträgt nur ein paar Minuten, sofern auf Deinem Server PHP bereits geparst wird.

Beispiel einer solchen Datei:

Includes
[Dein HTML-Quelltext]

<?PHP include "header.php"; ?>

[Dein HTML-Quelltext]

<?PHP include "footer.php"; ?>

[Dein HTML-Quelltext]

Die Dateien „header.php“ und „footer.php“ beinhalten in diesem Fall lediglich den HTML-Quelltext für diese beiden Bereiche, Du könntest natürlich auch „header.html“ und „footer.html“ in das PHP-Dokument laden, wenn dort keine PHP-Anweisungen drinstehen.

Ich hoffe, Dir weiter geholfen zu haben.
Grüße aus Koblenz,

Oliver

Hallo,

nein es gibt keine Möglichkeit.
Entweder du benutzt eine serverseitige Sprache wie PHP, Python, Perl, …, oder du musst mit Frames arbeiten, die aber schon seit langem aus diversen Gründen nicht mehr verwendet werden soll.

Hallo Bachelor,

wie du richtig erkannt hast, können Header und Footer mit einem PHP-Include in eine Seite geladen um bei großen Websiteprojekten die Übersichtlichkeit im Template zu bewaren. Meist werden diese Templates dann über ein Content Management System (CMS) wie Drupal, Joomla oder Typo3 verwaltet und automatisch verwaltet.

So wie ich verstanden habe, möchtest du allerdings auf Sprachen wie PHP oder JS verzichten und rein statische Seiten produzieren. Das schließt alle CMS Systeme aus.

In diesem Fall fällt mir nur das manuelle, händische Kopieren der Bereiche ein. Allerdings erleichtert ein Template welches den Header und Footer eingebaut hat die arbeite. Sobald du einen neue Seite erstellen möchtest einfach die als z.B. vorlage.html erstellte Datei laden und gleich als die neue Seite mit „Speichern unter…“ mit dem neuem Namen der gewünschten Seite sichern. So erhälst du dir deine Vorlage und musst nicht immer gleich die Bereiche Copy & Pasten.

Natürlich geht diese Verwaltung auch leichter z.B. mit Programmen wie Dreamweaver welches eine Vorlage automatisch als Standardseite laden kann. Die gesammte Website wird im Programm dann als Projekt gesehen und sobald Änderungen am Header/Footer vorgenommen werden, überträgt das Programm die Änderungen automatisch in alle Unterseiten.

Anbei Links mit Infos bzw. Programmen die das können.

* http://www.thesitewizard.com/gettingstarted/dreamwea…

* http://www.adobe.com/de/products/dreamweaver/

* http://www.ultraedit.com/products/uestudio/uestudio_…

Leider gibt es nicht sehr viele freie, kostenlose Programme mit einer solchen automatischen Templateverwaltung da diese meist in den CMS Systeme schon integriert sind. Sonst halt die manuelle Art wie oben beschrieben.

Alternativ ist vielleicht eine Programm mit Macrofunktion interessant. Hier speicherst du Header und Footer im Programm ab und kannst diese dann immer per Tastenkombination/Shortcut einfügen. Vorteil du musst nicht den rechnereigenen Zwischenspeicher nutzen.

Hoffe ich konnte ein wenig helfen.
Alles Gute.

HI Bachelor,
bin eben erst aus dem Urlaub zurückgekommen, deswegen sehe ich eben erst Deine Anfrage. Ganz spontan fällt mir da „Frameset“ zu ein, aber ich vermute die Kollegen werden eine gute Lösung gefunden haben.
G:wink:Karin

Gibt es nicht eine

Möglichkeit eine „header.html“ und eine „footer.html“ zu
erstellen, und diese auf jeder Seite einzubinden (und das
ganze ohne PHP oder Javascript, nur mit reinem HTML + CSS)??

Du kannst es ja mal mit @import url(); probieren, damit kannst du z.B. eine header.css einfügen.

Hallo,

ich würde das mit PHP (wie folgt) umsetzen.

  1. die HTML Seite in .php umbenennen.
  2. eine header.incl.php und eine footer.incl.php erzeugen.
  3. in der ersten PHP-Seite mit <?php include 'header.incl.php'; ?> einfügen.

MfG
Manfred Matscke