Mehrseitige Website

Eine mehrseitige Website kann folgendermassen strukturiert werden:

In der Datei main.html befindet das Menu für die Website und ein iframe als Platzhalter für die einzelnen Seiten.
In der Datei style.css befinden sich die CSS-Regeln, welche das Layout festlegen.
In den Dateien seiteXY.html befinden sich die Inhalte der jeweiligen Seiten.

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="mystyle.css">
    <meta charset="UTF-8">
    <title>Titel der Webseite</title>
  </head>
  <body>
    <header>
      <a href="seite1.html" target="content">Seite 1</a>
      <a href="seite2.html" target="content">Seite 2</a>
    </header>
    <main>
    <iframe name="content" src="seite1.html"></iframe>
  </body>
</html>

seite1.html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="mystyle.css">
    <meta charset="UTF-8">
    <title>Titel der Webseite</title>
  </head>
  <body>
    Inhalte der Seite 1.
  </body>
</html>

seite2.html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="mystyle.css">
    <meta charset="UTF-8">
    <title>Titel der Webseite</title>
  </head>
  <body>
    Inhalte der Seite 2.
  </body>
</html>

style.css

body {
    background-color: blue;
    color: white;
}