Frage von Danison7, 49

Webprogrammierung - Content extern?

Hallo zusammen,

ich lerne derzeit nebenbei die Skriptsprachen HTML, CSS und JavaScript. Nun habe ich erfolgreich eine Beispiel-Seite entworfen, die über 10 Unterseiten hat. In meinem root-Ordner befindet sich nun die index.html, seite2.html, seite3.html, ...

Nun dachte ich mir, ich füge in meine Navigation eine weitere Seite ein, oder ändere etwas in meinem <header>-Bereich, wo muss ich dies bei allen 10 Seiten tun und das ist sehr nervig. Nun möchte ich gerne wissen, wie das in der Praxis ausschaut? Wird bei kleinen Änderungen soviel Aufwand betrieben oder gibt es eine Lösung?

Vielleicht könnte man die wichtigen Sachen, wie header, navigation und footer in der index.html beibehalten und den Content extern abrufen? Wie wäre dies möglich?

Mit PHP habe ich mich noch nicht beschäftigt, wäre dies also auch mit reinen HTML- & CSS-Kenntnissen machbar?

Liebe Grüße und vielen Dank euch! :-)

Antwort
von fluffiknuffi2, 27

Es wurde schon gesagt aber ich möchte es noch mal bekräftigen: Das ist so ziemlich die Standardfrage, die dazu führt, dass man sich im Zuge der Webentwicklung das erste mal mit einer Programmiersprache beschäftigt. Das kann PHP sein. Hauptsache eine serverseitige Programmiersprache. Mit der bindet man dann den Header in Form einer Datei in alle Seiten ein und muss dann eben nur noch die eine Datei ändern, um den Header auf allen Seiten zu ändern.

Antwort
von TN01MS, 34

Ich kenne keine Methode mit der das direkt in HTML geht geht (vielleicht iframe Google das mal)

Sonst geht das in PHP ganz einfach:

Deinen menu Code hierdurch ersetzen und ihn in die menu.html Datei machen. (Musst du erst erstellen)
Du musst allerdings die Endungen deiner Dateien die dieses PHP Script verwenden von .html auf .php ändern, du hast die selben Funktionen wie bei HTML, nur du kannst noch PHP nutzen.

Kommentar von TN01MS ,

ich kann hier keinen PHP Code schreiben, der wird einfach weggemacht. (?php include="menu.php" ?) die ( und ) durch < und > ersetzen

Kommentar von Danison7 ,

Ich danke dir für deine schnelle Antwort. Ich habe mich zwar mit PHP noch nicht befasst, aber dann habe doch nun einen Grund, mich da auch mal reinzulesen :-)

Kommentar von TN01MS ,

gerne ;) so schwer ist das nicht und du hast sehr viele praktische Funktionen. Ohne den oben genannten include Befehl würde ich schon garnicht mehr klarkommen ^^

Antwort
von sekoch, 9

Hallo, eine Möglichkeit für die Navigation wäre jQuery.

Du hast dann auf jeder Seite einen DIV-Bereich mit einer eindeutigen ID.

<div id="navigation"></div>

Weiter unten im Quellcode wird die Navigation aus einer anderen Datei geladen.
<script>
$(function(){
$("#navigation").load("navigation.html");
});</script>
Mit diesem Beispiel, kann es aber auch dazu führen, dass die Navigation, bei größeren Datenmengen auf der Seite erst später lädt. Um das zu umgehen könnte man das JavaScript mit jQuery weiter oben platzen und die Zweite Zeile alleine schreiben also so:
<script>
$("#navigation").load("navigation.html");
</script>

Mit der Funktion load wird die im Parameter angegeben Quelle, der Wert ausgewertet und in die Variable $("#navigation").html() geschrieben. Also in dem Content der DIV mit der ID navigation.

Das ganze ist aber nur eine vorübergehende Lösung, bis Du Dich mit PHP besser auskennst, da diese Möglichkeit für die Performance nicht gerade die beste ist.

Antwort
von RedKungFuMastr, 22

Ein Ansatz wäre PHP, es gibt aber auch einen Anderen.
Zuerst mit PHP:

<html>
  <head>
  </head>
  <body>

  <?php include "content.php"; 
    # content.php ist ein Template.
    # Eine PHP Datei kann auch HTML beinhalten.
    # Mit der Funktion include kannst du jedes
    # Template in deine Webseite laden
    # ohne dein HTML Layout neu zu schreiben.
    #
    # Mit der Variable $_GET kannst du Templates
    # der jeweiligen Route zuordnen.
    #
    # URL: domain.com/?page=home
    # PHP: $_GET['page'] == 'home'; // true
  ?>

  </body>
</html>

Wenn du aber eine App schreiben willst, die zB. auch auf Android Phones laufen soll und das ohne Server, also PHP, dann kannst du es auch mit Javascript machen, viel mehr dem Helfer jQuery.

http://api.jquery.com/load/
jQuery bietet die Methode load() an:

<html>
  <head>
  </head>
  <body>

    <div id="content"></div>

    <script>
    $('#content').load('content.html');
    </script>

  <body>
</html>
Kommentar von sekoch ,

Man sollte erstmal die Kommentare lesen bevor man los schreibt :p Du warst mit 17 Stunden eindeutig schnellerer als ich :D

Kommentar von RedKungFuMastr ,

Das ist doch kein Problem, jeder hat seine individuelle Antwort, ich stelle mich nicht dazwischen ;)

Antwort
von hamza19, 17

Entweder mit PHP oder einer richtigen Software wie Dreamweaver. Da kannst du Bereiche festlegen, die du an einer einzigen Stelle änderst und die in allen Dateien automatisch geändert werden.

Antwort
von perhp, 5

Hallo, in der Praxis verwendet man dafür ein CMS System, wo die Änderungen auch für alle Unterseiten übernommen werden, wenn man die Änderung einmal macht. Als Übung kannst du auch diese Teile mit PHP laden, sodass du die Änderungen in einer gemeinsamen Datei speicherst.

Keine passende Antwort gefunden?

Fragen Sie die Community