LOS! Werkzeuge

Inhaltsverzeichnis |    HTML Schule |    Inhalt&Layout |    Werkzeuge |    über LOS!web

Hier wird der leistungsfähige, kostenlose Quelltexteditor namens 'HtmlKit' der englischen Firma chami.com beschrieben

Setup | First Run | Hauptfenster | HTML-Prüfung | Browservorschau | Fenster anpassen | Menü- und Werkzeugleisten

Wir brauchen: Computerraum

Du hast bereits ein paar Programme namentlich kennengelernt, mit denen man Webseiten erstellen kann. Hier lernst du, wie du HtmlKit auf deinem Computer installierst, die drei Hauptfenster des Programms sinnvoll nutzt, und was es mit den vielen Werkzeugleisten auf sich hat.

Für ganz Eilige: Hier der Link zu den Tipps ganz unten, wie du sofort zu Programmieren anfangen kannst und mit dem Programm Bilder und Links in deine Seiten einfügst...

 

Setup

Wir beginnen mit der Installation (leider gibt es die nur auf Englisch. Das German-Plugin hat bei mir den Dienst versagt).

Das Installationsprogramm fragt nach dem Speicherort

Das Programmen fragt nach den zu installierenden Komponenten. Es sind bereits alle ausgewählt. Wir bestätigen mit Next>

Als nächstes möchte HTML-Kit ein Shortcut-Icon im Startmenü erstellen. Dann können wir mit Finish den Setup beenden.

 

First Run

Wir können das Einstellen des Optionen Menüs (Edit Preferences) übergehen, denn es ist jederzeit später ebenso möglich. Wenn nicht, fragt das Programm, ob du es zum bevorzugten Quelltexteditor machen willst. Achtung: Wenn du ja sagst, startet jedesmal HtmlKit anstelle von Editor, sobald du im Internetexplorer auf Quelltext anzeigen gehst. Um den Text nur mal so anzugucken ist der schneller geladene Editor sicher das bessere, weil kleinere Programm. HtmlKit fragt dich auch, für welche Dateitypen es sich in der Registry von Windows eintragen darf. Sicherheitshalber hier nichts ankreuzen. Doch auf die Frage, ob beim rechten Mausklick auf Html-Dateien die Option Edit with HTML-Kit angeboten werden soll, kannst du getrost mit yes antworten.

Das automatische Aufspüren von Browsern und anderen Quelltexteditoren wollen wir gerne erlauben. Yes>!

Achtung: Ein Yes> auf die Frage "Download Weblinks" bringt uns gleich online ins Internet, ebenso ein Yes> auf die Frage "Check for Updates".

Das Gleiche gilt für die Webtour, zu der wir eingeladen werden.

Es startet der Open file wizard mit der Standardeinstellung: Create a new file.

 

Das Hauptfenster

Der Aufbau setzt sich zusammen aus:

1. Ganz oben siehst du drei Menüleisten: [mehr darüber...]
   Hauptmenüleiste (main menu) [mehr darüber...]
   Werkzeugpaletten (tool bars) [mehr darüber...]
   Aktionenpalette (action bar) [mehr darüber...]
2. Darunter zwei Fenster:
   In der Standardeinstellung befindet sich
   links das Dateifenster[mehr darüber...] und rechts das Dateivorschaufenster[mehr darüber...] (workspace window)
3. Zwei weitere Leisten:
   Die abreissbare, dreigeteilte Statusleiste (status bar)[mehr darüber...]
   die Aufgabenleiste (task bar)[mehr darüber...]
4. Zuunterst befindet sich das Meldungsfenster (message window)[mehr darüber...].

Und so sieht das Hauptfenster von HTML-Kit aus, wenn du diese Seite öffnest.

 

HTML Prüfung mit HTML-Tidy

Bei einem Klick auf den markierten Knopf startet die integrierte HTML-Prüfung HTML-Tidy von Dave Raggett. Sie korrigiert die gängigsten Fehler, vergessene Abschlusstags, Verstöße gegen Verschachtelungsregeln etc. und macht den Code für Browser besser lesbar.

So sieht das Fenster nach der Prüfung aus:

Im Meldungsfenster (message window) wird ein Prüfbericht ausgegeben. Das Dateifenster wird geteilt, rechts die von HTML-Tidy korrigierte Fassung. In dieses Fenster mit der Maus rechts klicken und wählen "Copy Output to Editor". Mit einem Klick auf das Diskettensymbol (oben 4. von links) oder [Strg+S] wird die korrigierte Fassung abgespeichert.

Browservorschau

So wird das Dateifenster auf Vorschau (Preview) umgeschaltet.

 

Vor dem Preview noch das Fenster anpassen

Ein Klick auf dieses unscheinbare "Symbölchen" macht mehr Platz. Das message window wird ausgeblendet.

So sieht dann der Preview aus:

 

Menüs und Werkzeugleisten

Im oberen Bereich des Hauptfensters befinden sich drei Menüleisten:
Man kann sie einzeln an der gestrichelten Linie links anfassen, abreissen und verschieben oder an beliebigem Rand des Hauptfensters "andocken".
Die drei Menüleisten heissen:

1. Die Hauptmenüleiste (main menu) mit allen neun Hauptmenüs:
   File Edit View Tools Tags Actions Workspace Window Help
   Dieses Menü verschafft mittels ausklappbarer Submenüs den Zugriff auf sämtliche Befehle des Programms.
2. Die Werkzeugpaletten (tool bars) mit 4 verschiebbaren Auswahlen aus den neun Hauptmenüs in der Darstellung als Icons stellen die wichtigsten Befehle zur Verfügung
   

   File		Neues Dokument, Lokale Datei öffnen, Webdatei öffnen, Speichern, Drucken, Programmeinstellungen
   Edit		Cursor-Auswahl, Aussschneiden, Kopieren, Einsetzen, Löschen, Widerrufen, Wiederherstellen, Suchen(Ersetzen)
   Window		Fenster vertikal aufteilen, HTML-Kit-online, Hilfe
   Tools		Browservorschau, Externes Programm öffnen, HTML-Tidy, Datei durch korrigierte Fassung ersetzen.

3. Die Aktionenpalette (actions bar), umschaltbar, mit neun Standard-Aktionenpaletten, enthält die nach Gruppen sortierten Spezialwerkzeuge, mit denen z.B. Stellen im Text bequem formatiert oder Bilder und Links eingefügt werden können: Tools, Batch Actions, Objects, Document, Style, Text, Tables, Forms, Navigate, Online, [Favorites]
   
   Diese Aktionen lassen sich durch zahlreiche HTML-Kit-Plugins beliebig ausbauen. Du kannst sie von der HTML-Kit Homepage herunterladen.
   Z.B empfehlenswert: Tabellen erstellen mit Vorschau,