Hilfe

Übersicht

Was ist der Guide HTMLizer?

Der Guide htmlizer dient dazu, schnell und ohne grösseren Aufwand einen Guide erstellen und gestalten zu können. Der Autor kann sich dabei voll auf den Inhalt konzentrieren, denn der HTMLizer hat nicht nur alle nötigen Befehle parat, sondern auch jede Menge Icons und Bilder sowie Links zu Items und Kalkulatoren bereit. Auch das einbauen eigener Inhalte wird sehr erleichtert, mit wenigen Klicks kann man Bilder einfügen, Links platzieren, Listen und Tabellen erstellen oder Itembeschreibungen einbauen. Am Ende kann man den kompletten Quelltext einfach aus dem Eingabefenster kopieren.

Natürlich erfordert dies ein gewisses Grundverständnis von html, damit man weiss, was im Eingabefenster so vor sich geht, aber diese Hilfe wird einen kleinen Überblick verschaffen und die Vorschau hilft dabei, das Ergebnis den eigenen Wünschen anpassen zu können. Der HTMLizer kann leider nicht überprüfen, ob alles richtig angewendet worden ist, aber mit der Vorschau kann man feststellen, ob das Ergebnis hinhaut. Bei weiteren Fragen stehen wir im Forum Rede und Antwort und erweitern diese Anleitung dann. Eure Rückmeldungen helfen uns, den HTMLizer stets zu verbessern!

Wie bedient man den HTMLizer?

Um den HTMLizer zu verwenden, muss Javascript aktiviert sein. Eine Bildschirmauflösung von 1024*768 oder höher wird empfohlen, ganz einfach, weil man sonst scrollen muss. In einem normalen Browser (sry IE-User, für den lies sich das nicht anständig einbauen) kann man die Schrift auch beliebig vergrössern und verkleinern (Beim Firefox zB mit Strg/+ und Strg/-, Strg/0 für die Standardgrösse) und den HTMLizer so an die Grösse des Browserfensters anpassen, das Layout skaliert mit der Schriftgrösse.

Der HTMLizer besteht aus vier Werkzeugen:

Das Eingabefenster: Hier entsteht der Guide nach und nach. Man kann selbst Text eingeben und die drei umliegenden Werkzeuge dazu verwenden, alle Ressourcen schnell einzufügen. Der Vorschau-Button öffnet ein Fenster, in dem man sein Werk begutachten kann und der speichern-Button überträgt den Guide in die Datenbank. Man kann seinen Guide auch zwischenspeichern und später vom HTMLizer-Hauptmenü wieder laden, um sein Werk fortzusetzen. Beim ersten Speichervorgang wird dazu ein Account angelegt.

Die Galerie: Diese ist recht einfach zu bedienen, einfach die entsprechende Galerie auswählen und das gewünschte Bild anklicken. Der Befehl, um es anzuzeigen, wird dann ins Eingabefenster kopiert.

Der Itemgenerator: Die Auswahl oben dient dazu, das Layout festzulegen, in dem das Item dann im Guide erscheint. In den weiteren Feldern kann man die Werte des Items eintragen. Klickt man auf übernehmen, wird das Item in einer Tabelle im Eingabefenster abgelegt. Es empfiehlt sich, zur Übung ein paar Items zu erstellen und diese mit der Vorschau zu überprüfen, dann bekommt man schnell ein Gefühl für den Itemgenerator.

Die Befehls-Leiste: Hier sind einige Buttons, die dazu dienen, alle nötigen HTML-befehle schnell zur Hand zu haben. Im normalen Modus öffnet sich ein Popup, das gewünschten Eintrag verlangt, im Expert-Mode werden die Befehle direkt ins Fenster kopiert und man kann sie dort ausfüllen. Der Expert-Modus empfiehlt sich, wenn man die Grundzüge bereits beherrscht und die Befehle schnell verfügbar haben will, im normalen Modus dienen die Abfragen der Sicherheit und Übersicht.
Bei den Links wird zuerst der Name des Items abgefragt, diesen sollte man genau angeben, damit der Verweis dann auch zum Ziel führen wird. Als zweites wird der Name für den Link abgefragt, hier kann man auch eine Kurzbezeichnung verwenden, wenn man davon ausgehen kann, daß der Leser sie auch versteht ;). Die Befehle werden in der HTML-Referenz genauer erläutert.

Was ist HTML eigentlich?

HTMLHyperText Markup Language ist eine Auszeichnungssprache, mit der typische Textelemente wie Überschriften, Absätze, Bilder, Listen oder Tabellen markiert werden. Ein üblicher Web-Browser setzt dies dann entsprechend um. Das Aussehen dieser Elemente wird in einer zweiten Datei, dem cssCascading StyleSheet bestimmt, ansonsten greift der Browser auf die Standard-Darstellung zurück.

Die zweite bezeichnende Eigenschaft ist die Möglichkeit, Verweise zu definieren. Gerade ein Guide lebt davon, auf externe Quellen verlinken zu können, sei es eine Itembeschreibung oder ein Kalkulator.

Ein Element wird ausgezeichnet, indem man es in den Befehl einrahmt. Die Auflösung erfolgt dabei hierarchisch, es ist also auch möglich, Elementen Unterelemente zuzuordnen. Die Befehle werden mit <> markiert, damit man sie eindeutig vom Text unterscheiden kann. Das Ende eines Befehls wird durch die Wiederholung des Befehls mit einem / vorangestellt gekennzeichnet. Beispiel:
<b>fett (bold)</b>

Was sind cascading Stylesheets (css)?

Cascading Stylesheets übernehmen die Gestaltung von Grafik und Layout in einem HTML-Dokument. Hier wird das Aussehen der Textelemente und die Platzierung der Textboxen eingestellt, dazu lassen sich damit viele nützliche Dinge wie beispielsweise Tooltipskleine Boxen mit
zusätzlichen Infos relativ einfach realisieren.

Und was bedeutet das jetzt für mich?

Dadurch, daß die Gestaltung extern geregelt wird, bleibt das HTML-Dokument sehr schlank und übersichtlich. Wir haben bereits viele Dinge vorformatiert wie beispielsweise alle Gegenstände, dazu Listen und Tabellen. Links zu Uniques sind stets golden, solche zu Sets sind grün. Natürlich braucht man jetzt auch das Stylesheet, um den Guide so ansehen zu können, wie er gedacht war, dazu kann man es sich natürlich herunterladen.
Es ist auch möglich, dieses an seine eigenen Bedürftnisse anzupassen oder ein gänzlich alternatives zu verwenden. Bei den Links sind Tutorials und Referenzen dazu zu finden, zum Beispiel darüber, wie man ein eigenes Stylesheet einbaut, weiteres würde hier den Rahmen sprengen.

Kurzreferenz: hier verwendete HTML-Befehle und definierte Klassen

Dies ist eine kurze Referenz, es gibt zusätzlich eine grafische Demonstration, damit man sich das auch bildlich vorstellen kann.

HTML-Befehle
<h1> </h1> bis <h5> </h5>Überschriften erster bis fünfter Ordnung. Hiermit gliedert man seinen Guide in Kapitel und Abschnitte.
<b> </b>Fettschrift
<em> </em>kursiv
<br>Zeilenumbruch innerhalb eines Absatz
<p> </p> Absatz - Innerhalb eines Absatz dürfen (naturgemäss) keine Überschriften, Tabellen und Listen vorkommen, also den Absatz einfach davor beenden und danach einen neuen starten. Nach jedem Absatz ist ein Zeilenumbruch und eine Leerzeile, dies trägt zur Leserlichkeit bei und vermeidet Textwüsten.
<table> </table>Hiermit wird eine Tabelle angelegt. Eine Tabelle besteht aus Reihen (tr) und diese aus mehreren Zellen (td). Jede Reihe sollte die gleiche Anzahl an Zellen haben, diese bilden übereinander die Spalten.
<tr> </tr>Tabellenreihe
<td> </td>Tabellenzelle - nur in solchen Zellen dürfen Inhalte stehen.
<th> </th>Tabellenhauptzelle - wird für Überschriften und dergleichen benutzt.
<img src="">Hiermit werden Bilder eingefügt, src="bild.gif" gibt die Addresse des Bildes an. Wählt man Bilder aus der Galerie, werden diese automatisch passend eingefügt.
<a href="">Damit baut man Verweise (Links) ein, href="www.url.de" gibt das Ziel des Links an. Wählt man im Expert-Mode einen automatischen Link zu einem Item, wird noch onclick(blabla) angefügt, dies dient dazu, alle Verweise zu Items im gleichen neuen Fenster zu öffnen. Einfach nicht weiter beachten, das haben wir zum Komfort der Guideleser eingefügt.
<ul></ul>Beginn und Ende einer Liste werden hiermit markiert.
<li></li>Dies zeichnet die einzelnen Punkte einer Liste aus

css-Klassen
KlasseVorkommenEigenschaften
unique_l, set_l, rw_lLinksMarkiert den Link in der entsprechenden Farbe
grid, nogrid TabellenBestimmt, ob die Tabelle Gitternetzlinien hat oder nicht.
uni, set, rw, cra, rar, mag, sox, pln ItemgeneratorFormatiert die Tabelle, um den entsprechenden Items das passende Layout zu geben.

Mein Guide ist fertig - und jetzt?

Am besten kopiert man den Quelltext und legt ihn erstmal in einer Textdatei auf dem eigenen Rechner ab. Dann kann der Guide schonmal nicht wegkommen, falls was unvorhergesehenes passiert. Der "speichern"-Button legt den Guide zusätzlich in unserer internen Datenbank ab. Weiterhin empfiehlt es sich, diesen ins Forum zu kopieren, um etwas Feedback zu erhalten.

Ansonsten steht der Guide selbstverständlich zur freien Verfügung, die Rechte dafür bleiben in jedem Fall beim Autor. Trotzdem wären wir natürlich froh über ne Kopie, um unsere Seite zu erweitern und ihn unseren Besuchern zur Verfügung zur stellen.

Weitere Literatur zum Thema

Vielleicht hat ja der eine oder andere Lust auf mehr bekommen, dafür mal eine kleine Auswahl an Links. Es gibt noch dutzende weitere ausgezeichnete Seiten zum Thema, aber das sind einige Highlights, dazu führen die jeweils eigene Linklisten. Wer interessiert ist, hat also schnell Zugriff auf weitreichende Ressourcen.

Wir hoffen, ihr habt viel Spass mit dem HTMLizer und ihr macht eifrig Gebrauch davon! ;-)
Balkoth & sucinum