Schritt für Schritt lernen
die eigene Website zu erstellen

Jetzt das HTML-Seminar als
Video-Tutorial mit über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

Videokurs HTML + CSS + Webdesign erstellen

kurz & gut:
Vorstellung des HTML Editor Phase 5 ursprünglich von Ulli Meybohm.

Bildschirmaufbau, Bedienung und für Fortgeschrittene Shortcuts.

HTML Editor Phase 5

Der Editor unterstützt den Gestaltungsprozess und den Anfänger. Die Adresse, wo Sie die aktuellste Version dieser Freeware für den privaten Gebrauch erhalten, finden im Kapitel Softwareempfehlungen.

Für den Einstieg möchte ich mich auf die wichtigsten Bedienungselemente beschränken. Dazu gehört der grundlegende Aufbau des Programms und die wichtigsten Buttons (bzw., wer mag, die entsprechenden Menüpunkte).

Bildschirmaufbau

Folgende 3 Bereiche sind vorhanden: 3 Bereiche im HTML-Editor Phase 5

  1. Eingabefenster und Vorschau
  2. Dateien
  3. Ordner

Der Bereich "1. Eingabefenster und Vorschau" wird sowohl für die Eingabe des Quelltextes als auch für die Vorschau genutzt. Unterstützt wird der Benutzer durch die farbigen Hervorhebungen des HTML-TAGs.

Im Bereich "2. Dateien" sind alle erzeugten HTML-Dateien und Bilder ersichtlich. Klickt man eine HTML-Datei an, wird diese geladen und der Quellcode angezeigt und kann direkt bearbeitet werden. Per Drag & Drop können geschickt Bilder (aus dem Dateien-Bereich) in HTML-Dokumente gezogen werden. Der benötigte Code wird komplett eingefügt.

Im Bereich "3. Order" wird die Struktur der Festplatte angezeigt. In der Abbildung ist mein Aufbau der Website zu sehen :)

Oberhalb dieser Bereiche sind die Buttons und Menüs zu finden. Als nächstes werden die zum Arbeiten wichtigsten kurz erklärt. Alles Weitere empfiehlt sich zu probieren und damit zu spielen.

Bedienung

Für die Bedienung wird als erstes der Button benötigt, der wie ein weißes Blatt mit umgeknickter Ecke aussieht.

neue HTML-Seite anlegen über Button

Nach Anklicken werden Sie gefragt, ob Sie "Erstellen" oder "Leeres Dokument erstellen" wollen. Der Unterschied ist, dass beim "Erstellen" der Editor das Grundgerüst erzeugt. Dies ist später praktisch, für den Anfang ist zum besseren Verständnis Tipparbeit angesagt. Wählen Sie bitte "Leeres Dokument erstellen" aus. Sie erhalten eine komplett leere Seite.

Der zweite wichtige Punkt ist das Speichern. Klicken Sie dazu auf die einzelne "Diskette" (die erste links). Haben Sie noch nichts geschrieben, ist diese Diskette noch hellgrau und Sie können auch nichts speichern. Nachdem Sie etwas geschrieben haben, speichern Sie dies bitte. Als Dateinamen geben Sie bitte komplett "index.htm" ein. Wird dagegen die Endung weggelassen, ergänzt der Editor die Datei und macht ein .html dazu! Also immer daran denken und zum Dateinamen (dazu später noch mehr) immer ein ".htm" eingeben.

Um in die Vorschau umzuschalten, werden folgende Buttons benötigt...

Vorschau anzeigen

Dabei schaltet das rechte Symbol (Weltkugel mit Blatt) die Vorschau ein. Um wieder zurück zum Quellcode zu schalten, wird die "Zeitung" angeklickt.

Nachdem dies die wichtigste Funktion für ein direktes Feedback des eigenen Tun und Waltens ist, empfiehlt es sich, dies durch die Taste F9 schneller zu machen. Durch einmal Drücken bekommen Sie die Vorschau - beim nächsten Drücken wieder den Quelltext.

Beachten Sie zwei Dinge:

  • Die Vorschau funktioniert nur, wenn der Internet Explorer installiert ist, was wohl so gut wie auf jedem Windows-System der Fall sein dürfte.
  • Bei jedem Ansehen in der Vorschau wird die Datei automatisch gespeichert.

weitergehende Einführung

Als weitergehende Einführung empfehle ich die Anleitung, die beim HTML-Editor dabei ist. Ein paar Feinheiten werden hier später noch erklärt.

Für Fortgeschrittene - Shortcuts zum HTML-Editor

Shortcuts werden Tastenkombinationen genannt, durch die Eingaben schneller gemacht werden können, bzw. die auch Aktionen auslösen.

Viele Shortcuts sind noch effizienter, wenn zuvor der Text markiert wird, auf den sich dies beziehen soll. So wird z. B. der Anfangs-TAG vor den Text und der End-TAG hinter den markierten Text gesetzt, z. B. bei Überschriften.

Anbei sind nur die wichtigsten aufgelistet (das sind die, die ich wohl am häufigsten benötige :-)

Tastenkombination HTML-TAG was es bewirkt
STRG + # <!-- Inhalt --> Inhalt ignorieren
STRG + Leertaste &nbsp; erzwungenes Leerzeichen
STRG + RETURN <p> </p> Absatzmarken setzen
SHIFT + RETURN <br> Break-TAG (Zeilenumbruch)
ALT + RETURN <li></li> für Aufzählungen
STRG + Pfeiltaste hoch/runter   Zum Scrollen des Quelltextes, ohne dass der Mauszeiger sich von der Stelle entfernt.
F9   Vorschau wird gestartet, sofern Internetexplorer installiert ist. Dabei wird automatisch der Quelltext gespeichert! (nochmals F9 und man kehrt zum Quelltext zurück)
STRG + F1
bis
STRG + F6
<h1></h1>
...
<h6></h6>
Überschrift setzen
STRG + l <a href=""></a> Link setzen (Shortcut ist ein kleines L!)
STRG + e <a href="mailto:"></a> E-Mail-Link setzen
STRG + b <b></b> Schrift fett

Facebook und Google+

Sehr geehrte Nutzer/innen dieser Website! Wir würden uns freuen, wenn Sie uns durch Facebook oder Google+ unterstützen würden - sei es durch ein Like/+1 oder das Teilen dieser Seite. Allerdings legen wir Wert auf Datenschutz und möchten nicht, dass diese Netzwerke Daten von Ihnen erhalten, sollten Sie dies nicht wünschen. Deshalb sind die entsprechenden Buttons bei uns standardmäßig deaktiviert.

Durch einen Klick auf einen der unteren Buttons stimmen Sie der Nutzung/Speicherung Ihrer Daten (in uns unbekanntem Ausmaß, uns unbekannten Orten und uns unbekannter Weise) zu und erhalten Zugriff auf die Buttons. Wir bitten um Ihr Verständis und freuen uns über Ihre Unterstützung :)

X

Wenn Sie einen Fehler finden, bitte mitteilen
(egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:

Fehler:

Verbesserung:

Name/E-Mail (damit ich auch Danke sagen kann)

eBook HTML-Seminar.de Videokurs HTML + CSS + Webdesign erstellen

Video-Tutorial: über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

© 2000-2015 Axel Pratzner • www.html-seminar.de • Stand 18.8.2015
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de