Hier finden Redaktion und Autoren des Gates Hinweise, wie sie ihre Artikel und sonstige Pamphlete in die Ersatz-Struktur des provisorischen Gates einbauen können. Nicht, um euch zu ärgern, sondern damit ich nicht alles allein machen muss... ;)

Wer das absolut nicht kann oder will, der wird nicht dazu gezwungen. Sooo viel Arbeit macht es nicht, aber es kostet eben doch alles Zeit, die nicht im Überfluss vorhanden ist.

Also zum Thema: Jedes Dokument (z.B. von Word) wird übersetzt in ein einzelnes HTML-Dokument, anders als im originalen Gate, wo noch eine Menüstruktur und News und so anderer Krams mit dabei sind.

Das provisorische Gate besteht aus Primitiv-HTML. Das heißt, die Seiten können mit einem einfachen Texteditor erstellt und bearbeitet werden. Unter Windows z.B. "notepad.exe". Der Quelltext existierender Seiten kann üblicherweise direkt aus dem Browser heraus angezeigt werden.

HTML besteht aus normalem Text, in den bestimmte "Steuerkommandos" (sog. "Tags") eingebettet sind. Diese sind gekennzeichnet durch spitze Klammern (< bzw. >) und werden vom Browser interpretiert, d.h. sie sind im vom Browser angezeigten Bild nicht sichtbar, sondern der Browser führt ihre jeweilige Funktion aus. Die Tags haben einen Anfang und ein Ende, letzteres wird gekennzeichnet durch einen vorangestellten Schrägstrich ("/") innerhalb des schließenden Tags, z.B. </a>. Schließende Tags kann man oft auch weglassen (die meisten Browser sind da tolerant), dies entspräche aber nicht dem HTML-Standard. Einfachste Beispiele sind jene zur Formatierung, aus dem Forum bekannt sind <b> und <i> für fett und kursiv, mit <a href="..." [target="..."]> macht man einen Link. Bilder werden durch <i src="..." [width="..."] [height="..."] [alt="..."]> integriert.

Die spitzen Klammern und einige andere Sonderzeichen müssen "maskiert" werden, wenn der Browser sie nicht interpretieren, sondern im Original anzeigen soll. Das bedeutet, die Zeichen werden durch einen Code ersetzt, der wiederum von Browser interpretiert wird. Eine Maskierung beginnt mit "&" und endet mit ";". Dazwischen ist ein Unicode-Wert oder eine Trivialabkürzung.

Problemlos verwenden kann man die ASCII-Zeichen 32 bis 126 (das ist im Wesentlichen das Alphabet), mit Ausnahme folgender Symbole:

• Anführungszeichen (") dienen zur Kennzeichnung von Werten von Parametern, Maskierung mit &quot; (quotation mark).
• Das kaufmännische Und (&) leitet Maskierungen ein, Maskierung mit &amp; (ampersand).
• Spitze Klammern (</>) kennzeichnen HTML-Tags, Maskierung mit &lt; bzw. &gt; (lesser than, greater than).

ASCII von 128 bis 255 sind länderspezifisch (sie enthalten u.a. die deutschen Umlaute) und müssten streng genommen eigentlich auch maskiert werden, aber in diesem Fall können wir uns den Aufwand sparen, denke ich. Auch die Maskierung der Anführungszeichen können wir von mir aus bleiben lassen. Allerdings sollten Spezialzeichen wie das Copyright maskiert werden, hier durch &copy; → ©.

Weitere Sonderzeichen finden sich z.B. hier. Man beachte, dass HTML 4.x noch nicht von allen Browsern komplett verstanden wird.

Kommentare (also Bereiche, die der Browser ignorieren soll) beginnen mit "<!--" und enden mit "//-->".

Achtung: Alle im Quelltext aufeinander folgenden Trennzeichen (also z.B. Leerzeichen, Zeilenumbrüche, Tabulatoren) werden vor dem Anzeigen zu EINEM einzigen Leerzeichen zusammengefasst!

Einige Standard-HTML-Tags, deren ausschließliche Verwendung ich empfehle:

• a - für Links (anchor) - externe Links üblicherweise mit target="_blank"
• b - fette Schrift (bold)
• br - Zeilenumbruch (break)
• div - Bereich für Formatierung (division)
• h1 bis h6 - Überschrift 1. bis 6. Ordnung (headline)
• i - kursive Schrift (italic)
• img - Bild (image)
• li - Listenelement (list item; innerhalb von ul oder ol)
• ol - Liste (ordered list)
• p - Absatz (paragraph; kann, muss aber nicht abgeschlossen sein)
• pre - diktengleiche Schrift (preformatted)
• span - Bereich für Formatierung mit Cascading-Style-Sheets (CSS)
• sub - tiefgestellt
• sup - hochgestellt
• table - Tabelle
• td - Tabellenzelle (table data; innerhalb von tr)
• th - Tabellenkopfzelle (table head; innerhalb von tr)
• tr - Tabellenzeile (table row; innerhalb von table)
• ul - Liste (unsorted list)

Damit kommt man schon ganz schön weit, und viel mehr werdet ihr kaum jemals brauchen.

Ich bevorzuge es, den Quelltext so einfach wie möglich zu halten.

Wer "richtig" HTML lernen will, dem empfehle ich SelfHTML. Und natürlich "Learning by doing". ;)

Vorgehensweise:

• Template runterladen
• Template editieren, d.h. Inhalt einfügen
• Ergebnis zum Einpflegen an mich schicken

Ich versuch das Editieren mal anhand des Aufbaus des Templates der Reihe nach zu erläutern...

Die sog. Kopfdaten des Dokumentes sollten normalerweise nicht verändert werden und sehen folgendermaßen aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>DnD · Gate</title>
<meta name="generator" content="notepad.exe">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="../artikel.css">
<script><!--
if( top.frames.length )top.location.href=self.location;
//--></script>
</head><body>

In der hier abgebildeten Form sind sie auch noch nicht endgültig, mittelfristig soll das meiste zentral verwaltet werden.

Es folgt der Hauptteil des Dokumentes:

<h3>TITEL</h3>

<div>

<i>GGF. VORWORT O.Ä.</i>

<h4>ZWISCHENÜBERSCHRIFT</h4>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<br>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
<p>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<br>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

<h4>ZWISCHENÜBERSCHRIFT</h4>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <br>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

Tja, kurz gesagt: Alle Großbuchstaben stellen nur Beispieltext dar und sollen durch Sinn ersetzt werden. In diesem Fließtext können auch die oben gelisteten HTML-Elemente eingesetzt werden, etwa für Fett- oder Kursiv-Schrift oder für Links oder Zeilenumbrüche. Mehr braucht man eigentlich nicht.

Das DIV habe ich so konfiguriert, dass es den Rahmen mit dem hellen Hintergrund erzeugt.

Wahrscheinlich ist es am praktischsten, alles innerhalb des DIV-Bereiches komplett zu löschen und neu zu erzeugen.

• Alles zwischen <div> und </div> markieren, dann löschen.
• Den Text in der Quellanwendung (z.B. Word) markieren, dann in die Zwischenablage kopieren.
• Den Text zwischen den DIVs aus der Zwischenablage einfügen.
• Hierbei geht natürlich die Formatierung verloren, diese muss mit HTML-Tags wieder hergestellt werden.
• Also in paar <a>, <b>, <br>, <h4>, <i> usw. einfügen, umrühren, fertig.

Im nächsten Abschnitt sind dann noch die übliche Kurzübersicht auszufüllen und der Name des Autors einzutragen:

<h4>Kurzübersicht</h4>
<ul>
<li>Verlag: ...
<li>Autor: ...
<li>Artikelnummer: ...
<li>Umfang: ...
<li>Preis: ...
<li>Bewertung: ...
</ul>

<p class="copyright">&copy; AUTOR</p>

</div>

<p class="link_back">[<a href="index.html">zurück zur Übersicht</a>]</p>

<hr>Copyright &copy; 2003, Layout by <a href="http://www.informatik.uni-oldenburg.de/~hoshi/rpg/">Lynax</a>, Content by Team <a href="http://www.dnd-gate.de" target="_blank">DnD-Gate</a> - All rights reserved. - last change: <script><!--
document.write((new Date(document.lastModified)).toGMTString());
//--></script></body></html>

Alles unterhalb vom DIV gehört zum Abspann und kann von euch ignoriert werden.

So, jetzt fällt mir nichts mehr ein... ich wünsch euch viel Spaß und bin gespannt auf die Ergebnisse :)