Zum Inhalt

Inhaltsverzeichnis • Teil 1 - Anfänger • Webpräsenz • Vorbereitungen
⇦ Weitere Tags / Webpräsenz ⇨
30.07.2014 11:01:52

Vorbereitungen

Erschrecken sie nicht – jetzt kommt alles auf einmal. Gehen wir also Schrittweise vor:

Weitere Seiten

Eine Webpräsenz besteht normalerweise aus mehr als einer Webseite (HTML-Datei). Oder anders gesagt, mehrere HTML-Dateien, eine oder mehrere CSS-Dateien und eine oder mehrere JS-Dateien zusammen, bilden einen Auftritt im Internet (Webpräsenz).

Unsere Visitenkarte wäre beispielsweise eine gute Kontaktseite - wir bräuchten allerdings auch noch weitere Seiten wie Willkommens- oder Startseite, Impressum usw. Diese Seiten sind dann normalerweise über ein Menü verlinkt, das heißt auf jeder Seite stehen Links (<a href="index.html">Startseite</a>) zu den anderen Seiten.

Da alle unsere Seiten allerdings einem Grundaufbau folgen sollen, erstellen wir zunächst eine Seitenvorlage, von der wir die anderen Seiten dann ableiten. Gleichzeitig bringen wir ein wenig Struktur (Unter­verzeichnisse) in unser Webprojekt.

Um unsere Webpräsenz etwas einfacher anpassen zu können, überlegen wir uns noch, wie wir den Kopf und das Menü auch nachträglich noch einfach ändern können, ohne jede Seite dann händisch zu ändern.

Übung:

Überlegen sie wie sie Code (CSS und JavaScript) für viele Seiten verfügbar gemacht haben. Wie ist das dann mit HTML-Code?

  • Kann man HTML in eine separate Datei auslagern?
  • Welcher Tag ist dafür zuständig?

Die Lösung wird im folgenden vorgestellt!

Anhang: Tastaturkommandos

Präsenz

Vorlage

Zunächst wählen wir ein Projektverzeichnis und/oder legen dieses an. Dann erstellen wir dort eine Textdatei mit dem Namen Seitenvorlage_zum_Kopieren.html. In diese schreiben wir dann folgendes Grundgerüst:

Editor - Seitenvorlage_zum_Kopieren.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta content="author" name="Fügen sie hier ihren Namen ein" />
  <title>Fügen sie ihren Seitentitel hier ein</title>

  <link rel="stylesheet" type="text/css" href="css/layout.css" />
  <style type="text/css">
    /* Interne CSS-Formatvorlagen */
  </style>
  <script type="text/javascript" src="js/funktionen.js"></script>
</head>

<body>
  <div id="KopfDiv">
    <iframe src="iframes/kopf.html" frameborder="0" scrolling="no" width="100%" height="100%">
      <h1 class="Kopf">Fügen sie ihren Seitentitel hier ein</h1>
    </iframe>
  </div>

  <div id="MenuDiv">
    <iframe src="iframes/menu.html" frameborder="0" scrolling="no" width="100%" height="100%">
      <a class="Menue" href="iframes/menu.html">Sitemap</a>
    </iframe>
  </div>

  <div id="InhaltDiv">
    <!-- Hier fügen sie das ein, was sie bisher innerhalb des <body>-Tags stehen hatten -->
  </div>
</body>
</html>

Klären wir zunächst die neuen Tags:

<div id="KopfDiv">
<div> ist wie <span> ein Element speziell für CSS-Definitionen. Im Gegensatz zu <span> überspannt <div> nicht nur einen Textbereich, sondern einen oder mehrere Absätze (Blockelement). Hier definiert <div> einen Kopfbereich, den wir mit Hilfe von CSS positionieren. Da es nur einen Kopf geben sollte, verwenden wir als Attribut id="KopfDiv"!
<div id="MenuDiv"> und <div id="InhaltDiv">
Entsprechende <div> für die Bereiche Menü und Inhalt (also der eigentliche Seiteninhalt).
<iframe src="iframes/kopf.html" ...> und
<iframe src="iframes/menu.html" ...>
Wie schon oben besprochen bindet <iframe> eine andere Seite in eine HTML-Seite ein. Hier benutzen wir es, um einen Kopf und ein Menü für die Webpräsenz nur einmal zu hinterlegen.
<h1 class="Kopf">
Dieses <h1> steht innerhalb von <iframe>, es wird also nur angezeigt, wenn der Browser keine Inline-Frames unterstützt. Wir weisen allen Tags innerhalb des Kopfes oder des Menüs eine Klasse (hier Kopf) zu, damit wir sie gegebenenfalls im Stylesheet gesondert behandeln können.
<div id="InhaltDiv">
Innerhalb dieses <div> steht der eigentliche Inhalt der Seite, also das, was sie sonst innerhalb von <body> schreiben würden.

Übung:

Schlagen sie alle Tags und Attribute, die sie nicht kennen oder verstehen, in ihrer Referenz nach. Speziell sollten sie das Tag <iframe> [s,a,w] untersuchen und prüfen, ob es mit der XHTML-Strict-Variante verträgt.

Anhang: Tastaturkommandos

Anmerkung: Prüfen sie im Beispiel welche HTML-Version gewählt ist.

Unterverzeichnisse

Jetzt legen wir die Unterverzeichnisse bilder/ , css/ , iframes/ und js/ an. Die Namen der Verzeichnisse sind soweit selbsterklärend:

  • mein_projekt/
    • bilder/
      • logo.png
    • css/
      • layout.css
    • iframes/
      • kopf.html
      • menu.html
    • js/
      • funktionen.js
    • Seitenvorlage_zum_Kopieren.html

Wenn wir zukünftig eine neue Seite in unserer Webpräsenz anlegen wollen, kopieren wir die Seitenvorlage und benennen sie entsprechend um. Sobald die Datei im Explorer markiert ist, geht das am einfachsten mit der Tastenfolge Strg + C (kopieren), Strg + V (einfügen) und dann F2 (umbenennen). Das Umbenennen können sie übrigens mit Esc abbrechen.

Noch einmal der Hinweis: Das Web ist Unix-basiert und deshalb werden Groß- und Kleinschreibung bei Dateien und Verzeichnissen unterschieden. Außerdem ist der Pfadtrenner  / .

Weitere Dateien

Wir haben innerhalb unseres Gerüstes mehrere Verweise auf Dateien. Diese Dateien müssen wir nun noch anlegen. Folgen sie dazu dem jeweiligen Link und kopieren sie den Quelltext aus der Datei. Bei den HTML-Dateien müssen sie zuvor noch den Seitenquelltext öffnen (Strg + U).

css/layout.css
Genauere Angaben zu den verwendeten CSS-Eigenschaften finden sie im folgenden Unterkapitel.
iframes/kopf.html
Passen Sie den Kopf nach ihren Wünschen an!
iframes/menu.html
Passen Sie das Menü nach ihren Wünschen an! Es müssen hier vor allem Links auf alle ihre Seiten stehen.
In <a href=""> findet sich ein neues Attribut target="". Normalerweise wird ein Verweisziel immer im selben Frame (<iframe>) wie der aufrufende Link dargestellt. target="_top" durchbricht dies und schreibt die neue Seite ins gesamte Fenster. Denken sie auch daran, dass sich die Datei menu.html im Unterverzeichnis iframes/ befindet und die aufzurufenden Webseiten im Projektverzeichnis (../index.html).
js/funktionen.js
Diese JavaScript-Funktion kennen wir schon aus Beispiel 13. Es gibt dazu also nichts weiter zu sagen.

Neue Tags und Eigenschaften

<img class="Kopf" src="" alt="..."/>
Hier binden wir ein Bild mit einer URI (src="") und einem Alternativtext (alt="") ein. Außerdem bekommt das Bild seine eigene Klasse, kann also wieder direkt mit CSS selektiert werden.
h1 { font-size:x-large; color:darkblue; }
h2 { font-size:large; color:darkblue; }
Wenn es um die reinen Textformatierungen geht, schlagen sie bitte in der Referenz nach. Die meisten CSS-Anweisungen sind selbsterklärend.
(Anhang: CSS-Eigenschaften)

Wichtige Formatierungen:

body {font-family:"Arial",Helvetica,sans-serif;
Weist dem gesamten Dokument eine Grundschriftart zu. Als Werte stehen durch Kommata getrennt mehrere Schriftarten. Im Beispiel sind das serifenlose („ohne Füßchen“) Schriften für Windows, Linux/Mac und allgemein.
background-color: #88f;
Farbangabe für den Hintergrund eines Tags.
position: absolute;
Das Tag (hier <div>) soll absolut, das heißt immer gleichbleibend zur linken oberen Ecke des Dokumentes, platziert werden.
position: fixed;
Das Tag (hier <div>) soll fixiert, das heißt immer gleichbleibend zur linken oberen des darstellenden Fenster, platziert werden.
border: 0; padding: 2pt;
Das Tag (hier <div>) hat keinen Rahmen und einen Innenabstand von 2 Punkten zwischen Rahmen und Text.
border: .5em ridge #fff; padding: 1em;
Das Tag (hier <div>) hat einen Rahmen von 0,5 Zeichenhöhen, ist vom Typ „ridge“, hat die Farbe #fff (weiß) und einen Abstand von einer Zeichenhöhe zwischen Rahmen und Text.
left: 2%; top: 0px;
Das Tag (hier <div>) hat 2% Abstand vom linken und 0 Pixel vom oberen Dokumentrand (keinen).
height: 100%; width: 95%;
Das Tag (hier <div>) hat eine Höhe von 100% und eine Breite von 95%.
z-index: 1;
Das Tag (hier <div>) liegt auf der Z-Achse (in den Raum hinein) auf Ebene 1 und ist damit das unterste.

Bitte beachten sie den Anhang: CSS-Einheiten und Farben, den Anhang: CSS-Eigenschaften und den Anhang: CSS-Boxmodell an dieser Stelle.

Übung:

Es bleibt noch die Vorlage und die Grafik für den Kopf (Name und Grafik selbst) anzupassen. Öffnen sie die Datei Seitenvorlage_zum_Kopieren.html mit dem Webbrowser, um sie zu überprüfen.

(Beispiel Webpräsenz)

Anhang: Tastaturkommandos

Hauptseite einer Webpräsenz

Die Hauptseite einer Webpräsenz heißt so gut wie immer index.html. Dies ist eine Vorgabe des Webservers, der eine Seite an den Browser ausliefert. Das heißt, wenn keine Webseite im Browser angegeben wird, liefert der Webserver die Seite index.html (beim IIS früher auch default.htm) zurück.

Zusammenfassung

⇦ Weitere Tags / Webpräsenz ⇨
Nach oben