Frage Header in mehreren HTML-Seiten einbinden

The Pi · 10 Dezember 2016

Hallo Leute,
ich bin noch ziemlich neu im HTML und hätte eine Frage:

Ich baue gerade meine Webseite auf und wollte eine Html Datei extra nur für den Header der Seite erstellen, und ihn dann in meine Html-Seiten einzubinden, damit ich nicht immer, wenn ich eine Änderung bei dem Header machen will, bei jeder einzelnen Seite den Header verändern muss...

Ich hoffe, dass mir jemand helfen kann...

SpiceLab · 10 Dezember 2016

Auf HTML-Basis wäre das grundsätzlich mit einem iFrame umsetzbar, der in alle Unterseiten einzupflegen wäre:

https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/Aktive_Inhalte_einbinden#iframe

Da (i)Frames aber schon lange nicht mehr zeitgemäß sind, solltest Du in Erwägung ziehen, sofern auf dem Webserver PHP läuft, dies mittels include umzusetzen:

The Pi · 10 Dezember 2016

Das heißt also, dass ich in der "Header.php" den ganzen Code hier einfügen soll?

HTML:

<div class="Header">
      <a href="index.html"><img class="Logo" src="Bilder/Logo.png" alt="DC WORLD-Logo" title="DC WORLD" /></a>
      <img src="Bilder/JusticeLeague.png" class="Justice" alt="Bild der Justice League" oncontextmenu="return false;" />
      <nav>
        <ul>
          <li><a style="text-decoration:none;" href="New52/New52.html"> DC New 52</a>
            <ul class="drop-menu menu-1">
              <a style="text-decoration:none;" href="New52/Batman/Batman.html"><li>Batman</li></a>
              <a style="text-decoration:none;" href="New52/DetectiveComics/DetectiveComics.html"><li>Detective Comics</li></a>
              <a style="text-decoration:none;" href="New52/JusticeLeague/JusticeLeague.html"><li>Justice League</li></a>
              <a style="text-decoration:none;" href="New52/TheFlash/TheFlash.html"><li>The Flash</li></a>
              <a style="text-decoration:none;" href="New52/GreenArrow/GreenArrow.html"><li>Green Arrow</li></a>
              <a style="text-decoration:none;" href="New52/Aquaman/Aquaman.html"><li>Aquaman</li></a>
            </ul>
          </li>
          <li><a style="text-decoration:none;" href="Rebirth/Rebirth.html">DC Rebirth</a>
            <ul class="drop-menu menu-2">
              <!-- <a style="text-decoration:none;" href="Rebirth/Batman/Batman.html"><li>Batman</li></a>
              <a style="text-decoration:none;" href="Rebirth/DetectiveComics/DetectiveComics.html"><li>Detective Comics</li></a>
              <a style="text-decoration:none;" href="Rebirth/JusticeLeague/JusticeLeague.html"><li>Justice League</li></a>
              <a style="text-decoration:none;" href="Rebirth/TheFlash/TheFlash.html"><li>The Flash</li></a>
              <a style="text-decoration:none;" href="Rebirth/GreenArrow/GreenArrow.html"><li>Green Arrow</li></a>
              <a style="text-decoration:none;" href="Rebirth/Aquaman/Aquaman.html"><li>Aquaman</li></a> -->
            </ul>
          </li>
          <li><a style="text-decoration:none;" href="Reviews/Reviews.html">Comic Reviews</a>
          <ul class="drop-menu menu-3">
            <a style="text-decoration:none;" href="Reviews/1_BatmanErde1.html"><li>Batman: Erde 1</li></a>
            <!--<a style="text-decoration:none;" href="2_BatmanNoel.html">--><li>Batman: No&euml;l</li><!--</a>-->
          </ul>
          </li>
          <!-- <li>style 4
            <ul class="drop-menu menu-4">
              <li>un</li>
              <li>dos</li>
              <li>tres</li>
              <li>cuatro</li>
              <li>cinco</li>
              <li>seis</li>
            </ul>
          </li> -->
        </ul>
      </nav>
      <hr />
    </div>

SpiceLab · 10 Dezember 2016

The Pi schrieb:
Das heißt also, dass ich in der "Header.php" den ganzen Code hier einfügen soll?

That's right ;)

Und diese nun per include in die einzelnen Seiten laden: https://wiki.selfhtml.org/wiki/PHP/...nclude_einbinden#Einbinden_in_unsere_Webseite

Hab aber noch zwei allgemeine Hinweise / Tipps:

1. HTML5-konform wird <div class="Header"></div> durch <header></header> ersetzt.

Genau für diesen typischen Anwendungsfall zu HTML4-/XHTML-Zeiten, wurden mit HTML5 u.a. neue Elemente eingeführt, die an die Stelle des semantisch allgemeinen (bedeutungsloseren) Blockelement <div> rücken, und der Quellcode die Seitenstruktur semantischer widerspiegelt (Stichwort: Textreader).

https://wiki.selfhtml.org/wiki/HTML/HTML5#Seitenstrukturierung

2. Das Inline-Styling von HTML-Elementen gehört in eine zentrale CSS-Datei ausgelagert.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>...</title>
     <link rel="stylesheet" href="pfad_zu_styles.css">
     ...
  </head>
  <body>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </body>
</html>

styles.css:

CSS:

a, a:visited, a:focus, a:hover, a:active {text-decoration:none;}

Ansonsten ist Dein Plan bzgl. des Headers nur die Hälfte wert, wenn Du das Erscheinungsbild der Seitenelemente im HTML-Code der einzelnen Projektseiten ändern darfst. Der Code für den Seiteninhalt und das Seitenlayout sind strikt voneinander zu trennen.

In der Regel unterscheidet sich ja die Formatierung der Links in der Navigationsleiste von den übrigen "normalen" Links in Textblöcken und im Fußbereich.

Anhand dieser drei Elemente, die die Seite semantisch aufteilen, lassen sich differenzierte Regeln definieren / anwenden:

CSS:

/* Hauptnavigationsmenü im Kopfbereich */
header nav a {...}
header nav ul li a {...}

/* Textlinks im Hauptteil */
main a {...}

/* Links im Fußbereich */
footer a {...}

The Pi · 10 Dezember 2016

Danke dir!

:):)Jetzt funktioniert es genau so, wie ich es mir vorgestellt habe :)

The Pi · 10 Dezember 2016

Danke für die Antwort

Leider funktioniert es nicht wie ich es mir verhofft habe :(
Genau genommen funktioniert es gar nicht... :(

Auf der index.php zeigt es nur den Body und auf der Header.php nur den Header.

Ich habe in der index.php folgenen Code im Body:

PHP:

<?php include ("Header.php"); ?>

Und der Header.php ist so (wegen den inline-Befehlen kümmere ich mich erst später):

PHP:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="design.css">
  </head>
  <body>
    <header>
      <a href="index.php"><img class="Logo" src="Bilder/Logo.png" alt="DC WORLD-Logo" title="DC WORLD" /></a>
      <img src="Bilder/JusticeLeague.png" class="Justice" alt="Bild der Justice League" oncontextmenu="return false;" />
      <nav>
        <ul>
          <li><a style="text-decoration:none;" href="New52/New52.php"> DC New 52</a>
            <ul class="drop-menu menu-1">
              <a style="text-decoration:none;" href="New52/Batman/Batman.php"><li>Batman</li></a>
              <a style="text-decoration:none;" href="New52/DetectiveComics/DetectiveComics.php"><li>Detective Comics</li></a>
              <a style="text-decoration:none;" href="New52/JusticeLeague/JusticeLeague.php"><li>Justice League</li></a>
              <a style="text-decoration:none;" href="New52/TheFlash/TheFlash.php"><li>The Flash</li></a>
              <a style="text-decoration:none;" href="New52/GreenArrow/GreenArrow.php"><li>Green Arrow</li></a>
              <a style="text-decoration:none;" href="New52/Aquaman/Aquaman.php"><li>Aquaman</li></a>
            </ul>
          </li>
          <li><a style="text-decoration:none;" href="Rebirth/Rebirth.php">DC Rebirth</a>
            <ul class="drop-menu menu-2">
              <!-- <a style="text-decoration:none;" href="Rebirth/Batman/Batman.php"><li>Batman</li></a>
              <a style="text-decoration:none;" href="Rebirth/DetectiveComics/DetectiveComics.php"><li>Detective Comics</li></a>
              <a style="text-decoration:none;" href="Rebirth/JusticeLeague/JusticeLeague.php"><li>Justice League</li></a>
              <a style="text-decoration:none;" href="Rebirth/TheFlash/TheFlash.php"><li>The Flash</li></a>
              <a style="text-decoration:none;" href="Rebirth/GreenArrow/GreenArrow.php"><li>Green Arrow</li></a>
              <a style="text-decoration:none;" href="Rebirth/Aquaman/Aquaman.php"><li>Aquaman</li></a> -->
            </ul>
          </li>
          <li><a style="text-decoration:none;" href="Reviews/Reviews.php">Comic Reviews</a>
          <ul class="drop-menu menu-3">
            <a style="text-decoration:none;" href="Reviews/1_BatmanErde1.php"><li>Batman: Erde 1</li></a>
            <!--<a style="text-decoration:none;" href="2_BatmanNoel.php">--><li>Batman: No&euml;l</li><!--</a>-->
          </ul>
          </li>
          <!-- <li>style 4
            <ul class="drop-menu menu-4">
              <li>un</li>
              <li>dos</li>
              <li>tres</li>
              <li>cuatro</li>
              <li>cinco</li>
              <li>seis</li>
            </ul>
          </li> -->
        </ul>
      </nav>
      <hr />
   </header>
  </body>
</html>

MrMurphy · 10 Dezember 2016

Hallo

In die Header.php gehört nur der Inhalt für den header, keine komplette HTML-Datei.

Gruss

MrMurphy

SpiceLab · 10 Dezember 2016

The Pi schrieb:

Leider funktioniert es nicht wie ich es mir verhofft habe :(
Genau genommen funktioniert es gar nicht... :(

Auf der index.php zeigt es nur den Body und auf der Header.php nur den Header.

Ich habe in der index.php folgenen Code im Body:

PHP:

<?php include ("Header.php"); ?>

Und der Header.php ist so (wegen den inline-Befehlen kümmere ich mich erst später):

PHP:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="design.css">
  </head>
  <body>
    <header>
      <a href="index.php"><img class="Logo" src="Bilder/Logo.png" alt="DC WORLD-Logo" title="DC WORLD" /></a>
      <img src="Bilder/JusticeLeague.png" class="Justice" alt="Bild der Justice League" oncontextmenu="return false;" />
      <nav>
        <ul>
          <li><a style="text-decoration:none;" href="New52/New52.php"> DC New 52</a>
            <ul class="drop-menu menu-1">
              <a style="text-decoration:none;" href="New52/Batman/Batman.php"><li>Batman</li></a>
              <a style="text-decoration:none;" href="New52/DetectiveComics/DetectiveComics.php"><li>Detective Comics</li></a>
              <a style="text-decoration:none;" href="New52/JusticeLeague/JusticeLeague.php"><li>Justice League</li></a>
              <a style="text-decoration:none;" href="New52/TheFlash/TheFlash.php"><li>The Flash</li></a>
              <a style="text-decoration:none;" href="New52/GreenArrow/GreenArrow.php"><li>Green Arrow</li></a>
              <a style="text-decoration:none;" href="New52/Aquaman/Aquaman.php"><li>Aquaman</li></a>
            </ul>
          </li>
          <li><a style="text-decoration:none;" href="Rebirth/Rebirth.php">DC Rebirth</a>
            <ul class="drop-menu menu-2">
              <!-- <a style="text-decoration:none;" href="Rebirth/Batman/Batman.php"><li>Batman</li></a>
              <a style="text-decoration:none;" href="Rebirth/DetectiveComics/DetectiveComics.php"><li>Detective Comics</li></a>
              <a style="text-decoration:none;" href="Rebirth/JusticeLeague/JusticeLeague.php"><li>Justice League</li></a>
              <a style="text-decoration:none;" href="Rebirth/TheFlash/TheFlash.php"><li>The Flash</li></a>
              <a style="text-decoration:none;" href="Rebirth/GreenArrow/GreenArrow.php"><li>Green Arrow</li></a>
              <a style="text-decoration:none;" href="Rebirth/Aquaman/Aquaman.php"><li>Aquaman</li></a> -->
            </ul>
          </li>
          <li><a style="text-decoration:none;" href="Reviews/Reviews.php">Comic Reviews</a>
          <ul class="drop-menu menu-3">
            <a style="text-decoration:none;" href="Reviews/1_BatmanErde1.php"><li>Batman: Erde 1</li></a>
            <!--<a style="text-decoration:none;" href="2_BatmanNoel.php">--><li>Batman: No&euml;l</li><!--</a>-->
          </ul>
          </li>
          <!-- <li>style 4
            <ul class="drop-menu menu-4">
              <li>un</li>
              <li>dos</li>
              <li>tres</li>
              <li>cuatro</li>
              <li>cinco</li>
              <li>seis</li>
            </ul>
          </li> -->
        </ul>
      </nav>
      <hr />
   </header>
  </body>
</html>

Dabei hast Du noch zuvor die richtige Variante gezeigt, die ich doch auch abgenickt hatte

Und nun präsentierst Du uns sowas - ohne Worte!

The Pi schrieb:
ich bin noch ziemlich neu im HTML

Grundsätzlich kein Problem. Wir haben schließlich alle mal klein angefangen.

Nur bekommt es ganz schnell ein G'schmäckle, wenn Du als selbstbekennender Anfänger/Neueinsteiger mein, aus genau diesem Grund, empfohlenes Tutorial PHP/Tutorials/Dateien mittels include einbinden links liegen lässt, das Dich "step-by-step" zum Ziel geführt hätte :(

Dabei sind die entscheidenen Kapitel zum Erlangen des ersten Erfolgserlebnisses doch überschaubar.

PHP/Tutorials/Dateien mittels include einbinden – SELFHTML-Wiki schrieb:
Inhaltsverzeichnis

Kann mein Webspace PHP?

Auslagern von Seitenkopf und Navigation

Einbinden in unsere Webseite

...

SpiceLab · 10 Dezember 2016

Post um 20:34 Uhr

The Pi schrieb:
Danke dir!

:):)Jetzt funktioniert es genau so, wie ich es mir vorgestellt habe :)

Post 18 Minuten später um 20:52 Uhr

The Pi schrieb:
Danke für die Antwort

Leider funktioniert es nicht wie ich es mir verhofft habe :(
Genau genommen funktioniert es gar nicht... :(

Wie sich das Blatt in soo kurzer Zeit wenden kann.

Scheinbar hattest Du das Ziel schon erreicht, aber dann hat Dich irgendwas umgetrieben, den Quellcode zu verschlimmbessern müssen.

The Pi · 11 Dezember 2016

Spicelab schrieb:
Post um 20:34 Uhr

Post 18 Minuten später um 20:52 Uhr
Wie sich das Blatt in soo kurzer Zeit wenden kann.

Scheinbar hattest Du das Ziel schon erreicht, aber dann hat Dich irgendwas umgetrieben, den Quellcode zu verschlimmbessern müssen.

Es war so:

Ich habe den include in der index.php eingefügt, aber ich habe vergessen, den Code des Headers noch aus der index zu löschen, deswegen meinte ich, als ich die index im Browser angesehen habe, dass es funktioniert...

SpiceLab · 11 Dezember 2016

The Pi schrieb:
Leider funktioniert es nicht wie ich es mir verhofft habe :(
Genau genommen funktioniert es gar nicht... :(

Das Einbinden des Headers? Oder etwas in anderem Kontext / Zuammenhang?

The Pi schrieb:
Es war so:

Ich habe den include in der index.php eingefügt, aber ich habe vergessen, den Code des Headers noch aus der index zu löschen, deswegen meinte ich, als ich die index im Browser angesehen habe, dass es funktioniert...

Und zwischenzeitlich?

Kapitel 2 + 3 meiner empfohlenen Anleitung durchzugehen, die beide relevanten -und aufgepasst, im Notfall auch "kopierfähigen"- Code-Beispiele in wenigen Sätzen erklären, kostet den Anfänger/Neueinsteiger max. 30 Minuten, wenn's beim ersten Mal nicht direkt funktionieren sollte.

Ich gehe einfach mal davon aus, dass Du die Fragestellung in Kapitel 1 nicht verneinen konntest, und Dich im Zweifelsfall mit

PHP:

<?php
  phpinfo();
?>

davon überzeugt hast, was der Webserver Dir antwortet

Frage Header in mehreren HTML-Seiten einbinden

The Pi

Neues Mitglied

SpiceLab

Mod | ZENmechanic

The Pi

Neues Mitglied

SpiceLab

Mod | ZENmechanic

The Pi

Neues Mitglied

The Pi

Neues Mitglied

MrMurphy

Senior HTML'ler

SpiceLab

Mod | ZENmechanic

SpiceLab

Mod | ZENmechanic

The Pi

Neues Mitglied

SpiceLab

Mod | ZENmechanic

Neueste Beiträge