Gleichen Header und Footer auf jeder Seite

[Alex55]

Diese Frage häuft sich in letzter Zeit ziemlich. Also mach ich mal ein kleines Tutorial.

Um immer den selben Header und Footer auf der Seite zu haben, ohne die jedes mal einzelnd zu ändern, braucht man eine serverseitige Scriptsprache wie php. Dort kann man mit der Funktion include (http://php.net/manual/de/function.include.php) andere Seiten in eine bestehende einbinden.

Beispiel
Wir wollen den gleichen Header und Footer auf jeder Seite haben und müssen diesen nur einmal ändern, um das Ergebnis auf jeder Seite anzuzeigen.

Als erstes nehmen wir den HTML Code vom Header
Beispiel

<header>Das ist der Header</header>

und erstellen einer neue Datei mit der Dateiendung .php und nennen sie z.B. header.php.

Dann nehmen wir den HTML Code vom Footer
Beispiel

<footer>Das ist der Footer</footer>

und erstellen noch eine Datei mit der Dateiendung .php und nennen sie z.B. footer.php.

Dann erstellen wir unsere normale Datei wo der eigentliche Inhalt ist. Diese heißt z.B. aboutme.php. Wichtig ist dass die Dateiendung php ist, ansonsten kann es vom Server nicht verarbeitet werden.

In dieser aboutme.php kommt jetzt die eigentliche Funktion zum Einsatz. Dies ist die include Funktion:

<?php

include 'seite.php';

?>

Auf unser Beispiel würde es so aussehen:

<?php

include 'header.php';

?>
Inhalt der Seite

<?php

include 'footer.php';

?>

So wird nun der Header und Footer eingebunden. Dies auf jeder gewünschten Seite einfügen und es wird immer der gleiche Header und Footer angezeigt. Und man brauch den Inhalt nur an den Hauptdateien (header.php & footer.php) verändern.

P.S: Php ist eine serverseitige Sprache. Es wird also ein Webserver benötigt.

 

[Kaspar_]

Wieso bindet man den Code dafür nicht einfach in HTML/CSS ein?
PHP dafür zu benutzen erscheint mir doch arg umständlich, grade weil es eben eine serverseitige Sprache ist und ein Webserver benötigt wird.
Den Code einfach in HTML bzw CSS zu schreiben ist dochr einfacher, wenn man die Website komplett ohne PHP schreiben will.

 

[scbawik]

Wieso bindet man den Code dafür nicht einfach in HTML/CSS ein?
PHP dafür zu benutzen erscheint mir doch arg umständlich, grade weil es eben eine serverseitige Sprache ist und ein Webserver benötigt wird.
Den Code einfach in HTML bzw CSS zu schreiben ist dochr einfacher, wenn man die Website komplett ohne PHP schreiben will.

Weißt du schon um was es geht?

Kann jetzt zwar nicht beurteilen ob das Tutorial gut ist, da ich es nur überflogen habe, jedoch geht es grundsätzlich darum, wie man eine Website modular aufbaut. Was ja wirklich wichtig und gut ist.
Und das geht derzeit nur per Skriptsprache - vorzugsweise serverseitig.

 

[Chronos]

Weil man Code dann nur an einer Stelle ändern muss und nicht an 100 z. B.? Bitte erst noch mal informieren, der Nutzen steht außer Frage.

 

[B3nnoX]

Es liegt am Vorteil das du nur noch eine Datei anpassen musst wenn du etwas im Header oder Footer ändern willst. Sonst müsstest du in jeder html Datei deine Änderung rein schreiben und das kann schon viel Arbeit sein wenn du ne Webseite mit 12 Seiten hast oder mehr.

Ich hab zwar gelesen das man mit html dateien in html dateien importieren kann. Aber das soll wohl nur der Chrome bisher können. Finde den Artikel dazu gerade nicht

 

[Kaspar_]

Weil man Code dann nur an einer Stelle ändern muss und nicht an 100 z. B.? Bitte erst noch mal informieren, der Nutzen steht außer Frage.

Ich will mich ja informieren, deswegen frag ich^^

Den Code muss man per HTML/CSS auch nur an einer Stelle ändern. Die Positionierung per CSS kann man doch in einem externen Stylesheet in die neue Seite per HTML einbinden. Ist das nicht genau dasselbe nur eben ohne PHP?

-edit-
ok jetzt hab ichs verstanden. Du hattest nur geschrieben, dass du überall den gleichen Header und Footer einsetzen willst, von Änderungen war nicht die Rede...
OKay da wirds schon schwieriger das überall abzuändern...

 

[scbawik]

Ich will mich ja informieren, deswegen frag ich^^

Den Code muss man per HTML/CSS auch nur an einer Stelle ändern. Die Positionierung per CSS kann man doch in einem externen Stylesheet in die neue Seite per HTML einbinden. Ist das nicht genau dasselbe nur eben ohne PHP?

-edit-
ok jetzt hab ichs verstanden. Du hattest nur geschrieben, dass du überall den gleichen Header und Footer einsetzen willst, von Änderungen war nicht die Rede...
OKay da wirds schon schwieriger das überall abzuändern...

(ausgelagertes) CSS ja. Aber es geht hier nicht um CSS.

HTML nein. (Außer man würde mit Frames oder ähnlichem Schwachsinn arbeiten - macht man aber nicht)
Oder zeig doch mal wie du dein HTML "auslagerst".

Man geht einfach immer davon aus dass irgendetwas irgendwann geändert wird wenn man eine Website erstellt. Eine Website ist immer im Wachstum. Das muss nicht extra erwähnt werden.

 

[B3nnoX]

HTML nein. (Außer man würde mit Frames oder ähnlichem Schwachsinn arbeiten - macht man aber nicht)
Oder zeig doch mal wie du dein HTML "auslagerst".

Habe hier ein Blog Eintrag, aber gut ist mit javascript

 

[Chronos]

Habe hier ein Blog Eintrag, aber gut ist mit javascript

Ist auch gar nicht so unüblich, mit Angular.js kann ich mir auch Templates bauen ;) mit Polymer genauso.
Nicht das es nicht geht ;) aber gebräuchlicher und allgemein Bekannter ist es wohl mit PHP jo.

 

[scbawik]

Habe hier ein Blog Eintrag, aber gut ist mit javascript

… mir wird schlecht