Quelltexte

Hier nun die wichtigsten Quelltexte wie die Index-Datei und die css.Datei, die ja so nicht per Quelltext im Kontextmenü angezeigt werden.
Die Texte sollen zeigen, wie die Seite funktioniert. Die Kommentare erläutern kurz die verwendeten Befehle.
Die Kommentare ersetzen keine html-Referenz ! Wer sich ausführlich mit html, css und Java-script beschäftigen will, sollte unbedingt zusätzliche Literatur und Online-Kurse wie http://www.selfhtml.teamone.de genau studieren.

index.html:
<!Doctype HTML PUBLIC "-//W3C//DTD HTML 3.2 Transitional//EN">
<meta name="keywords" content="Schlewi, Schlewinski, FernUni Hagen, Briefmarken, private homepage">
<meta name="description" content="Willkommen auf Schlewi´s Website. Hier geht´s unter anderem um die FernUni Hagen und Briefmarken">
<html>
<head>
</head>
<frameset cols="*,100,999,100,*" frameborder=0 border=0>
  <frame src="rest.html" name="rest1" "noresize" scrolling="no" marginwidth=0 marginheight=0>
  <frame src="links.html" name="links" "noresize" scrolling="no" marginwidth=0 marginheight=0>
   <frameset rows="99,*" frameborder=0 border=0>
    <frameset cols="700,299" frameborder=0 border=0>
     <frame src="menue.html" name="menue" "noresize" scrolling="no" marginwidth=0 marginheight=0>
     <frame src="logo.html" name="logo" "noresize" scrolling="no" marginwidth=0 marginheight=0>
    </frameset>
    <frame src="start.html" name="website" "noresize" marginwidth=0 marginheight=0>
   </frameset>
  <frame src="rechts.html" name="rechts" "noresize" scrolling="no" marginwidth=0 marginheight=0>
  <frame src="rest.html" name="rest2" "noresize" scrolling="no" marginwidth=0 marginheight=0>
</frameset>
</html>

Kommentare:
Der DOCTYPE-Befehl sagt, dass Ihr eine öffentlich zugängliche Dokumententypdeklaration verwendet. Sie wurde vom W3C-Konsortium herausgegeben. Die Sprache, in der die Seite erstellt wurde, ist wie oben gesagt HTML 3.2.
Mit META NAME = "keywords" content="..." bestimmt ihr Begriffe für ein Suchprogramm.
Mit META NAME = "description" content="..." bestimmt ihr den Text, der bei einer Suchmaschine erscheint.
Der Befehl frameset cols erzeugt neue frames, also Rahmen. Nun ist die frame-Programmierung nicht mehr so uptodate. Allerdings weiß ich (noch) nicht wie ich dass mit <div>-Containern und Layern umsetzen kann.
Mit cols legt ihr fest, wieviele senkrechte Abschnitte,also Spalten, es geben soll, und wie breit diese sind. Hier werden fünf Spalten festgelegt, wobei die erste Spalte restliche Pixel, die zweite 100 Pixel, die dritte 999 Pixel (Menü und Inhalt) breit ist. Die vierte ist wieder 100 Pixel breit (Hintergrund), die fünfte füllt den Rest. Jede Zahl erzeugt eine neue Spalte in entsprechender Breite.
Mit border bzw. frameborder legt Ihr fest, ob ein Rand angezeigt werden soll. 0=kein Rand, Zahl = Rand in dieser Breite.
Die ersten beiden Spalten sind nur Rand. Die dritte Spalte wird in zwei Abschnitte zerlegt, oben eine Navigation, darunter der Rest mit dem eigentlichen Inhalt.
Der obere Abschnitt der dritten Spalte wird nochmal mit frameset cols="700,299" in zwei Teile zerlegt. Der linke Teil nimmt das Menü auf, der rechte Teil das Logo.

Seitenanfang

inhalt.css.:
table {font-family:arial, sans serif; color:#000001; font-size:10pt;}
body {background-image: url(hginhalt.png);}
hr {color:#008800;}
td.h1 {color:#008800; font-size:12pt; font-weight:bold;}
td.h2 {color:#000001; font-size:12pt;}
td.d {font-size:8pt;}
td.l {font-size:8pt;}
td.q {font-style:italic; font-size:10pt;}
a {font-family:arial; font-size:10pt; text-decoration:none; font-weight:bold; color:#000001}
a:link {color:#000001}
a: visited {color:#008800;}
a:hover {color:#008800;}
a.l {font-size: 8pt;}
a.l:hover {font-size:8pt;}

Mit einer solchen .css-datei wird die Darstellung von Layout, Schrift und Elementen für das jeweilige Dokument festgelegt.
Das alles etwas ausführlicher.

Als erstes werden die Anweisungen in einer .css-Datei NICHT in Tags, also die spitzen Klammern, gesetzt. Und: es gibt wie in html keine "="-Zeichen. Eher wird wie in "C" mit Doppelpunkten definiert.

table legt fest, welche Schrfitart (font-family), in welcher Farbe (color), hier schwarz, und welcher Größe (font-size) angezeigt wird. Das macht hier Sinn, weil ich ALLES in Tabellen gepackt habe, um es besser ausrichten zu können. Wenn Ihr normalen Text so formatieren wollt, dann nehmt das Tag <p>.

Wichtig: wenn Ihr die .css-Datei in eine Website einbindet, gilt die Formatierung für ALLE Elemente dieser Seite.
Vorteil: bei einer einheitlichen Gestaltung einer Website macht das weniger Arbeit. Nachteil: Ausnahmen machen dann mehr Arbeit.
Der body-Befehl legt den Hintergrund fest. Er ersetzt den html-Befehl <body background="irgendwas.bild">. Der Sinn: in html müsstet Ihr bei JEDER Seite <body background=... eingeben. Mit der .css-Datei nur EINMAL.
Mit hr legt Ihr die Formatierung für die waagerechten Linien fest, die standardmäßig jeder Browser kennt.
Die nächsten vier Befehle sind Beispiele für Klassen.
Mit table wurde ja die allgemein dargestellte Schrift festgelegt. Das gilt natürlich auch für alle Zellen einer Tabelle.
td.h1 und td.h2 legen jetzt Formate für die Schrift fest, die sich von der allgemeinen Darstellung unterscheiden sollen.
Zum Beispiel wird der Font (hier Verdana) nicht verändert, aber dessen Größe, Farbe und Eigenschaften (bold=fett, italic=kursiv). Der td-Tag WEISS aus dem table-Befehl, dass er Verdana als Schriftart verwenden soll.
Die neuen Klasse heissen jetzt "h1" und "h2". Mit <td class="h1"> erzwinge ich die festgelegte Darstellung. In diesem Fall sind das die verschiedenen Überschriften. Die Klassen ersetzen Befehle wie <td font face="..." font size="..." usw. >.
Mit td.q habe ich für Zitate aus Quelltexten festgelegt. Deswegen sind die Quelltexte auf dieser Seite kursiv. Wenn ich jetzt wollte, dass dieser Text auch noch rot erscheint, würde ich einfach color:#ff0000 einfügen (Reihenfolge der Befehle ist übrigens egal, auch in einem Tag).
Mit td.l habe ich die Formatierung für den Link "Links kein Menü ..." festgelegt. Er ist nämlich auf jeder Seite zu sehen. Wie oben gesagt: in einer .css-Datei legt Ihr das EINMAL fest. In html müsstet Ihr JEDE Tabelle, Zeile oder Zelle neu festlegen.

Die nächsten a-Befehle sind ein Beispiel für die Cascading Style Sheets.
a {...}: bestimmt zunächst ALLE Texteigenschaften für alle anchor-Befehle (Anker).
Auch wenn es redundant ist:
Im ersten a-Befehl werden alle Eigenschaften der Schrift für Links festgelegt:
- font-family ruft einen Zeichensatz auf. Die geläufigsten sind "Arial" und "Verdana", die auch auf dieser Website verwendet werden
- color weisst der Schrift eine Farbe zu. Die Farbe muss mit "'xxxxxx" abgegeben werden. Die Farbe "#000001" ist schwarz, aber NS (oder zukünftige Browser) interpretiert color:#0 nicht.
- font-size bestimmt die Größe der Schrift. Als Style-Tag im HEAD-Teil wird die Schriftgrösse von allen Browsern gleich gelesen, die Grösse in pt ist am praktischsten. Die Schriftgrösse mit font size=... in der Tabelle oder im Text zu bestimmen, kann je nach Browser zu völlig unterschiedlichen Ergebnissen führen !
- font-weight bestimmt den Stil einer Schrift, unter anderem fett (bold) und kursiv (italic)
- text-decoration dient hier im wesentlichen dazu, die lästigen Unterstreichungen bei Links zu unterdrücken (deswegen none)
Beim a.l {...}-Tag werden
- eine neue Unterklasseklasse "l" eingerichtet, die über a href="..." class="l" aufgerufen wird
- alle Eigenschaften der Schrift übernommen, die vorher mit a {...} festgelegt und nicht verändert wurden
- der Schrift eine neue Größe zugewiesen.
(Die Klasse "l" legt übrigens die Texteigenschaften für den Startseitenaufruf "Links kein Menü zu sehen? Hier klicken !" fest.)

Man kann sogar folgendes machen:
Stellt Euch vor, Ihr schreibt eine Site mit drei Themen. Jedes Thema soll eine eigene Grundfarbe haben.
Kein Problem. Die Themen seien Hund, Urlaub und Familie. Dann legt Ihr zum Beispiel fest:
Hund = gelb, Urlaub = blau, Familie = grün.
Dann programmiert Ihr zum Beispiel:
a {font-family:arial; font-size:10pt; text-decoration:none; font-weight:bold; color:#000001}

Jetzt die Klassen:

a.h:hover {color:#ffff00}
a.u:hover {color:#0000ff}
a.f:hover {color:#00ff00}

Das war es schon. Wenn Ihr mit der Maus über den Link fahrt, ändert sich die Farbe, und zwar je nach Thema. OHNE JavaScript !
Den Link setzt Ihr dann mit <a href="hund.html" class="h">. Alle Links, auch im Menü, werden gelb, wenn Ihr mit der Maus darüber fahrt.
Genauso die Linien:
hr {color:#ffff00} usw.
und eventuelle Überschriften.

Seitenanfang