Informatikunterricht

am Gymnasium Kirchenfeld

Benutzer-Werkzeuge

Webseiten-Werkzeuge


web:html:multi

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.
main.html
<!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;
}
web/html/multi.txt · Zuletzt geändert: 2020/10/13 14:25 von 127.0.0.1