Im folgenden sind die wesentlichen Schritte beschrieben, um selbst eine Internetseite zu erstellen, die z.B. eine Gruppe professionell darstellt.
Dies soll lediglich eine Starthilfe sein, die die schlimmsten Fehler am Anfang umschiffen hilft.
Als allererstes sollte man sich überlegen, welche Inhalte man präsentieren möchte. Existieren bereits Texte und Grafiken, die Verwendung finden sollen, gibt es eine Sinnvolle Gliederung der Inhalte?
Mach' eine Skizze auf Papier, wie du dir die Seite vorstellst. Hast du vielleicht eine andere Seite im Netz gesehen, deren Konzept dir gefällt?
Sofern man kein Contentmanagement-System verwendet und verschiedene Rubriken auf der Seite untergebracht verden sollen, zwischen denen man leicht hin- und herspringen können soll, so bietet sich die Verwendung von Frames an.
Wenn es professionell aussehen soll,
Besorge dir als erstes einen Editor, der die Steuerelemente, die so genannten Tags, farblich hervorhebt. Eine gute Wahl sind sicher xemacs (www.xemacs.org) oder arachnophilia (www.arachnoid.com).
Eine sehr ausführliche und gut beschriebene Übersicht über die Möglichkeiten von html und die einzelenen Steuerelemente findet sich bei Selfhtml (selfhtml.teamone.de).
Hier das Wesentliche für den Anfang:
Die Steuerelemente kommen fast immer paarweise vor, so wird die gesammte Seite von <html> </html> eingeschlossen. Jede Seite hat dann zunächst einen Kopf <head> </head>, in dem allgemeine Deklarationen zur Anzeige der Seite stehen und einen Körper <body> </body>, der die Inhalte der Seite enthält.
Für die Strukturierung der Inhalte wichtig sind:
<h1> </h1> Auszeichnung für Überschriften, gewichtet nach ihrer Bedeutung von 1 bis 5,
<p> </p> Auszeichnung für Absätze, ein einzelner Zeilenumbruch geschieht mit <br>
mit <img src="einBild.png"> bindet man Grafiken ein
und mit <a href="http://www.domain.de"> Linkname</a> setzt man Verweise zu anderen Seiten.
(Bei den Dateinamenamen ist es wichtig, auf richtige Schreibweise - insbesondere groß oder kleine Buchstaben - zu achten.)
Eine wesentliche Rolle bei der Anordnung von Elementen in einer html-Seite spielen Tabellen <table> </talbe>, deren Zeilen durch <tr> </tr> und deren Spaltenelemente mit <td> </td> ausgezeichnet werden:
|
<table border="0"> <tr> <td>Dies ist eine</td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td>'blinde' Tabelle</td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td>mit 9 Feldern.</td> </tr> </table> |
|
Damit das Programm, dass die Seite anzeigen soll, weiss, nach welchen Regeln die Befehle zu interpretieren sind, gehört
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
als erste Zeile in die Datei. Dies bedeutet, dass der folgende Code entsprechend dem HTML 4.01 Standart zu interpretieren ist. Das Transitional erlaubt zusätzlich die Verwendung älterer Befehle - Browser sind recht fehlertolerant.
Wenn man zusätzlich
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">
in den Kopf der Seite schreibt, ist auch der Zeichensatz definiert und man kann z.B. ä statt ä schreiben.
Um sicherzustellen, dass man gut gearbeitet hat und auch alle Browser (die dem gängigen Standart entsprechen) die so erstellte Seite anzeigen können, lässt man am besten den Code durch den Validator von W3C (http://validator.w3.org) überprüfen.
Da html als Seitenbeschreibungssprache nur angibt, welche Elemente vorhanden sind, aber nicht, wie sie angezeigt werden sollen, sollte man sich nie darauf verlassen, dass alle Broser die Seiten gleich darstellen.
Dies entspricht der ursprüglichen Philosophie von html, ein portables Format zum Austausch von Informationen zu bieten; es treibt aber Designer, denen die Optik wichtiger als die Inhalte sind, zur Verzweiflung.
Mit Frames lässt sich eine Homepage vertikal oder horizontal unterteilen, so dass man einen Bereich hat, der als Navigationshilfe unverändert bleibt.
Da Browser eine Datei namens index.html automatisch laden, wenn nichts anderes angegeben wird (und sie vorhanden ist), bietet es sich an, die Seite, die das Frameset laden soll, index.html zu nennen. Die Startseite von SMall-Giessen sieht ungefähr so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>SMall - Giessen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset COLS="180,*">
<frame SRC="menu.html" NAME="menu" frameborder="0" SCROLLING="auto" NORESIZE>
<frame SRC="seite1.html" NAME="rechts" frameborder="0" SCROLLING="auto" NORESIZE>
<noframes>
<h1>SMall - Giessen</h1>
<p>Diese Web-Seite verwendet Frames.
Frames werden von Ihrem Browser aber nicht unterstützt.
Klicken Sie zum Fortfahren bitte auf 'Menu'.</p>
</noframes>
</frameset>
</html>
Der <noframes> Bereich ist für uralte Browser wichtig, die keine Frames darstellen können.
Dieses Frameset besteht aus einem linken Frame, der 180 Pixel breit ist und das Menü enthält und einem rechten Frame, der den Rest des Browserfensters einnimmt, in dem die Inhalte dargestellt werden sollen.
Die Seite menu.html sieht dann z.b. so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menue</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel=stylesheet type="text/css" href="layout.css">
</head>
<body>
<table>
<tr>
<td>
<a class="gross" href="http://www.BDSM-HowTo.de" target="rechts">Lehrreiches</a><br>
<a class="klein" href="./lehrreiches/Inhalt.html" target="rechts">Inhaltsverzeichnis</a><br>
</td>
</tr>
<tr>
<td>
<a class="gross" href="./links.html" target="rechts">Weiterleitendes</a><br>
<a class="klein" href="./links.html#bdsm" target="rechts">BDSM</a><br>
</td>
</tr>
</table>
</body>
</html>
erscheint im Browser dann folgendermassen:
|
Lehrreiches Inhaltsverzeichnis |
|
|
Weiterleitendes BDSM |
Hier wurde in den Kopf ein Stylesheet eingebunden, das u.a. die Links unterschiedlich aussehen lässt.
Bei der Verwendung von Frames muss bei allen Links ein target="" angegeben werden, um festzulegen, wo die referenzierte Seite geöffnet werden soll.
Im Frameset wurden die Namen 'menu' und 'rechts' festgelegt, so dass die Inhalte, die im rechten Frame erscheinen sollen, das Target 'rechts' bekommen. Darüber hinaus gibt es target="_top", um fremde Inhalte nicht im eigenen Frameset anzuzeigen und ein unbekanntes Target, wie z.B. 'new' führt zum Öffen noch eines Browserfensters - was der versierte Benutzer auch über die mittlere/rechte Maustaste bei Bedarf selbst steuern kann.
Im Prinzip lassen sich für jedes Zeichen separat die Eigenschaften definieren. (Der Texteditor 'Word' verfährt ungefähr nach diesem Schema.) Benutzt man Stylesheets, legt man einmal zentral das Aussehen der einzelnen Elemente fest. Dadurch muss man sich später nichtmehr um die Formatierung kümmern, es fördert ein einheitliches Layout und sollte man jemals auf die Idee kommen, dass die Seite mit grüner Schrift auf pinkfarbenem Hintergrund doch besser aussähe, editiert man nur das Stylescheet und schon sieht die gesamte Seite anders aus.
Das Stylesheet von SMall-Giessen sieht ungefähr so aus:
body { background-color:#FFFFFF; margin-top:25px; margin-bottom:10px; margin-left:10px; }
h1,h2,h3,p,ol,ul,li,div,td,th,b,i,br,dd,dt { font-family:Arial,Helvetica,sans-serif; }
h1 { font-size:16pt; color:#CC0000; }
h2 { font-size:14pt; color:#CC0000; margin-top:1.2em; margin-bottom:-0em; }
h3 { font-size:12pt; color:#CC0000; margin-top:1.2em; margin-bottom:-0em; }
p,ol,ul,li,div,td,th,b,i,br,dd,dt { font-size:12pt; color:#000000; }
tt { font-size:12pt; color:#006600; }
a:link { font-size:12pt; color:#cc0000; text-decoration:none; }
a:visited { font-size:12pt; color:#CC0000; text-decoration:none; }
a:active { font-size:12pt; color:#006600; text-decoration:none; }
a:hover { font-size:12pt; color:#006600; text-decoration:none; }
a.gross:link { font-weight:bold; font-size:16px; }
a.gross:visited { font-weight:bold; font-size:16px; }
a.gross:active { font-weight:bold; font-size:16px; }
a.gross:hover { font-weight:bold; font-size:16px; }
a.klein:link { font-size:12px; color:#000000; }
a.klein:visited { font-size:12px; color:#000000; }
a.klein:active { font-size:12px; color:#006600; }
a.klein:hover { font-size:12px; color:#006600; }
Für das Menü wurden hier zu den normalen Links noch die Klassen 'gross' und 'klein' definiert.