Raketenwilli: html-Seite in CSS Grid Container laden

Beitrag lesen

SELF-Forum

html-Seite in CSS Grid Container laden

Raketenwilli (Versionen)
– Informationen zu den Bewertungsregeln

Mein Problem ist konkret, dass ich gerne eine Hauptseite hätte und formatiere und dann über die Navigation die einzelnen Unterseiten in einem Grid-Container aufrufen möchte.

Oh. Offenbar bist Du bei Frames stehen geblieben. Das passt zu ...

als ich zuletzt HTML genutzt habe um eine Website zu bauen dürfte das so um die Jahrtausendwende gewesen sein.

Naja. Damals hatte England noch ein Königin, die selbst mit dem Schwert auf Männer einschlug. Anno 2023 arbeitet man eher mit serverseitiger Logik. Das heißt, die Webseiten werden auf dem Server (oft, aber ńicht immer mit PHP) aus Daten und Templates gebaut und sodann im Browser via CSS formatiert. Ich weiß, dass das zugleich eine gute und schlechte Nachricht ist. Vor allem wird Dir Vieles erst mal neu vorkommen - bis Du merkst, dass etliche alte Prinzipien weiter gelten...

Ich versuche Dich mal mit einem einfachem Beispiel zu „fangen“ - statt mit „Hallo Welt" damit und natürlich PHP.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alles neu lernen</title>
</head>

<body>

  <header>
      <?=file_get_contents( '/site-parts/site-header.part' );?>
      <link rel="stylesheet" href="/style.css">
  </header>

  <nav>
      <?=file_get_contents( '/site-parts/nav.part' );?>  
  </nav>

  <main>
      <?=file_get_contents( '/site-parts/start.part' );?>  
  </main>

  <footer>
      <?=file_get_contents( '/site-parts/footer.part' );?>  
  </footer>

</body>
</html>

Speichere das als /index.php,

dazu die /style.css mit den Formatierungen (eben auch dem Grid…) und einen Ordner /site-parts mit den Dateien

  • header.part (Website Überschrift und Geraffel)
  • nav.part (Navigation als Linkliste)
  • start.part (Überschrift und Inhalt der ersten Seite)
  • footer.part (Enthält oftmals Links zu Impressum, Datenschutzerklärung ...)

(Die muss der Webserserver lesen können.)

Wenn das klappt kannst Du weiter machen und lernen, wie man mit dem selben Skript eine Webseite mit anderem Inhalt (also etwas anderes als die /site-parts/start.part inkludiert) ausliefert...

Beitrag melden
–
Informationen zu den Bewertungsregeln