Wie haben Sie diese Seite gefunden?
 Suchmaschine
 Newsgroup
 Schule/Studium
 Internetseite
 Zeitschrift
Details: 
(bei Zeitschriften wenn möglich Ausgabe und Seite)

  Weitere Umfrage: OpenWebSuite.org bewerten
Home | Kontakt | Impressum | english
 

Tutorial 1: Erste Schritte (Projekt- und Dokument-Erstellung) mit dem HTML-Editor: (X)HTML-Format 8

Was Sie hier lernen

Welche Tutorials es noch gibt

Die Tutorials werden derzeit noch erweitert. Aktuell gibt es folgende Tutorials zum HTML-Editor (X)HTML-Format:

Allgemeine Nutzung der Funktionen von (X)HTML-Format

Bevor dieses Tutorial beginnt, ist es notwendig etwas Theorie zum HTML-Editor (X)HTML-Format zu vermitteln. Aber keine Angst, dies hält sich in Grenzen und gleich danach lernen Sie anhand eines Beispiels, so dass Sie parallel nachvollziehen können, wie Sie alltägliche Webdesign-Aufgaben mit HTML-Format erledigen. Mit (X)HTML-Format steht Ihnen ein leistungsstarker HTML-Editor mit vielen Profi-Funktionen zur Seite, der aber trotz seiner Funktionsvielfalt sehr einfach zu bedienen ist und so auch für Einsteiger in Frage kommt und deshalb auch viel in Schulungen und im Schulunterricht eingesetzt wird.

Im Folgenden lernen Sie Grundlagen zu diesem HTML-Editor.

Aufteilung von (X)HTML-Format

(X)HTML-Format ist in vier Bereiche aufgeteilt. Dem Menü, der Buttonleiste, der Projekt und Dateiansicht und dem Editorfenster.

Das Menü und die Button-Leiste
Menü und die Toolbar
Das Menü umfasst alle Funktionen von (X)HTML-Format. Da hier aber auch viele seltener genutzte Funktionen enthalten sind, werden Sie das Menü wahrscheinlich deutlich seltener nutzen als die Button-Leiste.
Die wichtigsten Menü-Befehle sind auch über Tastenkürzel erreichbar, es lohnt sich hier mal zu schauen, ob Sie die eine oder andere häufig genutzte Funktion nicht lieber auf diese Art nutzen.

Über die Button-Leiste können sie die wichtigsten Funktionen gruppiert nach Ihrer Art besonders schnell anwählen. Funktionen wie die Vorschau oder Datei-Funktionen stehen links immer zur Verfügung. HTML-Funktionen und Assistenten stehen gruppiert nach Ihrer Art rechts zur Verfügung.

Die Projekt- und Dateiansicht
Datei- und ProjektansichtLinks neben dem Editor-Fenster können Sie die Projekt und Dateiansicht einblenden. Sollten Sie sie nicht sehen, oder wollen Sie sie nicht mehr sehen, können Sie sie über das Menü "Ansicht" ein- und ausblenden.
Die Projekt- und Dateiansicht dient zur Schnellumschaltung zwischen Dateien. In der Projekt-Ansicht können Sie zwischen allen Dateien des Projekts hin- und her wechseln und in der Ansicht "geöffnet" zwischen allen Dateien, die bereits geöffnet sind. Unter Windows können Sie in die jeweilige Dateiliste auch neue Dateien per Drag&Drop hineinziehen und so dem Projekt hinzufügen oder die Dateien einfach öffnen.
In jedem der beiden Ansichten finden Sie einen "Suchen" () und einen "Ersetzen"-Button (). Hierüber können Sie dateiübergreifend über die Dateien in der jeweiligen Ansicht suchen und ersetzen. Die Suchergebnisse werden in der dritten Ansicht "Suchergebnis" zur Schnellanwahl oder zum Hin- und Herbrowsen eingeblendet.

Hilfe

In HTML-Format ist eine umfassende Hilfe zu allen Funktionen integriert. Sollten Sie ein Problem haben, sollten Sie hier als erstes nachschlagen. Neben der Hilfe zu HTML-Format können Sie aber auch die HTML-Dokumentation SelfHTML in HTML-Format einbinden. Rufen Sie hierzu einfach den Menüpunkt auf und wählen Sie im aufgehenden Datei-Dialog die index.htm von SelfHTML. Abschließend finden Sie im Menü "Hilfe" noch Internetlinks zu den Tutorials und anderen Hilfe-Quellen.

Tag-Vervollständigung

Um Ihnen Tipparbeit zu ersparen, bietet HTML-Format eine Tag-Vervollständigung. Wenn Sie einen Tag eingeben und ihn schließen, wird automatisch der Abschluss-Tag hinzugefügt. In den Optionen können Sie definieren, ob das für alle Tags oder nur für Bestimmte gelten soll. Außerdem können Sie wählen, ob nur vervollständigt werden soll, wenn hinter dem eingegebenen Tag kein Text steht. Dies ist sinnvoll, da man im Nachhinein of HTML-Quelltexte umformatiert. In diesem Fall muss der Tag-Abschluss nicht direkt hinter dem Tag, sondern hinter dem zu formatierenden Text stehen.

Einfügen von Tags

HTML-Format fügt Tags auf zwei verschiedene Arten ein. Entweder selektieren Sie einen bestehenden Text und wählen dann über die Buttonleiste, das Menü oder über Tastenkürzel den Befehl, oder Sie wählen sie erst den Befehl und geben dann den Text ein.

Je nachdem, wie Sie vorgehen, arbeitet HTML-Format anders. Wenn Sie zuerst den Tag einfügen, steht anschließend der Cursor zur Texteingabe zwischen Start- und End-Tag (oder an der Stelle an der es am wahrscheinlichsten ist, Informationen einzugeben). Wenn Sie bestehenden Text selektieren und danach einen Befehl anwählen, steht der Cursor hinterher zum Weitertippen hinter dem End-Tag.
Wenn Sie dies ändern möchten, lernen Sie im Tutorial 3 für Fortgeschrittene wie sie die Editor-Tags incl. Cursor-Positionen und Markierungen ändern können.

Tastenkürzel

Zu den meisten Funktionen bietet HTML-Format Tastenkürzel. Wenn Sie, wie ich, zu den Leuten gehören, die sich die Arbeit gern leichter machen, können Sie dies durch das Merken der wichtigsten Kürzel erreichen. Welche Kürzel es gibt, finden Sie in der Hilfe.

Erstellen einer passenden Verzeichnisstruktur für Ihre Internet-Präsenz

Ich denke, jetzt ist genug über die grundsätzliche Bedienung von (X)HTML-Format gesagt worden. Nun ist es an der Zeit, etwas Praktisches zu tun.

Die Grundlage jeder Internet-Präsenz ist eine passende Verzeichnis-Struktur, in der das Angebot übersichtlich untergebracht ist. Neben einer guten Wartbarkeit bringen sprechende Verzeichnis- und Dateinamen auch Vorteile bei späteren Indizierungen von Suchmaschinen. Wenn Schlüsselworte, nach denen in Suchmaschinen gesucht wird, auch im Dateinamen oder Pfad enthalten sind, erhält die URL eine höhere Relevanz und erscheint so auch weiter oben im Suchergebnis. Bitte kommen Sie aber jetzt nicht auf die Idee alle Schlüsselworte im Pfad zu verarbeiten, da Suchmaschinen auch nicht dumm sind.

Hier ein Beispiel für eine vernünftige Verzeichnisstruktur einer Aquaristik-Seite:

"./" steht für das Wurzelverzeichnis, dem alle Dateien untergeordnet sind und das später auch die Wurzel Ihrer Domain repräsentiert.

Verzeichnissse anlegen

    ./
    ./grafik/welse/
    ./grafik/barsche/
    ./fische/sozialverhalten/
    ./fische/haltung/
    ./fische/krankheiten/
    ./aquarien/
    ./links/

Sie können die Verzeichnisstruktur über Ihr Betriebssystem oder über HTML-Format anlegen. HTML-Format legt automatisch keine Verzeichnisstruktur an, bietet jedoch einen Datei-Dialog über den man auch Verzeichnisse anlegen kann. Der Datei-Dialog wird z.B. geöffnet, wenn Sie ein Projekt anlegen. Wie das geht und warum man das tun sollte wird im nächsten Kapitel erklärt.

Erstellen eines neuen Projektes mit Hilfe des Projekt-Erstellungs-Dialoges

Um Ihre Internet-Präsenz überblicken zu können, können Sie alle enthaltenen HTML-Dateien in einem Projekt zusammenfassen. Über das Projekt können Sie schnell zwischen den enthaltenen Dateien umschalten, sowie über alle Dateien des Projekts suchen und ersetzen, sollten Sie mal etwas Grundlegendes (wie z.B. Ihre eMail-Adresse, oder andere zentrale Inhalte) in allen Dateien ändern müssen.
Außerdem können Sie im Projekt eine zentrale Style-Vorlage als .css-Datei für das gesamte Internet-Angebot hinterlegen. Diese Style-Vorlage wird automatisch in jede neu erstellte Datei als Link eingebunden. Dabei werden die Pfadangaben zur Style-Vorlage automatisch in relative-Pfadangaben umgewandelt.

Projekt anlegen Datei anlegen
Nachdem Sie den Projekt-Erstellungs-Dialog über den Menüpunkt Datei->Neu->Projekt aufgerufen haben, müssen Sie zuerst eine Projektdatei über den Button: "Durchsuchen" anlegen. Über diesen Dialog können Sie auch eine neue Verzeichnis-Struktur anlegen.

Wurzelverzeichnis
Durch die Datei-Auswahl wird automatisch das Wurzelverzeichnis des Projekts vorbelegt. Das Wurzelverzeichnis entspricht dem Verzeichnis, das später auch die Wurzel Ihres Internet-Angebots repräsentieren wird.
Alle Projektdateien sollten im Wurzelverzeichnis selbst, oder in einem Unterverzeichnis davon, liegen.

CSS Dateiname
Hier können Sie den Namen einer CSS-Datei angeben, die als zentrale Style-Vorlage dienen soll. Diese CSS-Datei wird über relative Pfadangaben automatisch in jede neu erstellte Datei des Projekts eingefügt. Hierdurch wird sichergestellt, dass alle Projektdateien über die selbe Style-Vorlage formatiert werden. Wie man Style-Vorlagen definiert, wird im entsprechenden Tutorial erklärt.
Allgemein kann man sagen, dass es in jedem Fall sinnvoll ist, hier eine Datei zu spezifizieren, selbst wenn man sie nicht von Anfang an nutzt.
Man hat aber später immer noch die Möglichkeit, sie mit Leben zu füllen und dann ist sie zumindest schon in allen neu erstellten Dokumenten eingebunden.
Bitte beachten Sie, dass Sie den Pfad der Style-Vorlage nicht absolut angeben, sondern relativ zum Wurzelverzeichnis. Aus diesem Grunde hat die Vorbelegung der Style-Vorlage auch keine absolute Pfadangabe und kann so übernommen werden.

Projektname, URL und Beschreibungstext
Bei mehreren Projekten sollten Sie diese Daten angeben, damit Sie später das Projekt wiedererkennen. Natürlich können Sie hier auch Notizen zum Projekt angeben, allerdings werden die Daten nicht verschlüsselt auf der Festplatte abgespeichert.

Alle Eingaben fertig

Nun brauchen Sie nur noch auf den Button "OK" zu klicken und das Projekt wird angelegt. Wenn Sie, wie empfohlen, eine Style-Vorlage angegeben haben, wird diese als erste Datei im Projekt eingebunden.

Wie Sie die Style-Vorlage mit Leben füllen, erfahren Sie im Tutorial: CSS

Um Dateien dem Projekt hinzuzufügen gibt es zwei Möglichkeiten:

Hinzufügen bestehender Dateien

Hierzu können Sie den Button "+" in der Projekt-Ansicht nutzen oder unter Windows auch Dateien per Drag&Drop in das Projektfenster (weißer Bereich) ziehen.

Hinzufügen neuer Dateien

Hierzu legen Sie entweder über den Datei-Neu-Dialog oder über die Funktion Dokument-Schnell-Hinzufügen (Dokument schnell) in der Buttonleiste ein neues Dokument an (s. nächstes Kapitel). Nachdem Sie die Datei angelegt haben, können Sie sie über den Button "+" der Projekt-Ansicht in das Projekt übernehmen.

Erstellen eines neuen HTML-Dokuments mit dem Dokument-Erstellungs-Dialog

Menü Dokument: Dialog Um ein neues HTML-Dokument zu erstellen nutzt man am besten den Erstellungs-Dialog. Das Ergebnis ist ein HTML-Grundgerüst mit eingebundenem Style-Sheet (wenn man eines im Projekt definiert hat), gültigen Meta-Tags und Farbdefinitionen für Text, Hintergrund, Schrift und Links. Außerdem kann ein Hintergrundsbild gewählt werden.

Um den Dialog zu öffnen, wählen Sie im Menü Datei->Neu->Dokument: Dialog.

Dialog zur Erstellung eines neuen HTML-Dokuments

Der Dokument-Erstellungs-Dialog

Nachdem Sie den Menüpunkt gewählt haben, öffnet sich der Dokument-Erstellungs-Dialog. Sie sehen, dass bereits der Verfasser des Dokuments, der Pfad und auch die Farben der Seite vorbelegt sind. Der Verfasser ist mit dem Namen des Projekt-Verantwortlichen (siehe Projekteinstellungen) vorbelegt. Die Farben sind die Standard-Farben, die HTML-Format nutzt oder Ihre zuletzt angegebenen Farben, falls Sie schon einmal eine Seite erstellt haben. Das Speichern der Farben für Folgeseiten ist besonders sinnvoll, um Ihre gesamte Internetpräsenz in einem gleichbleibendem homogenen Design zu erstellen.

Wahl des Titels

Zuerst müssen Sie einen Titel für die HTML-Seite erstellen. Der Titel wird später im Browser als Titel angezeigt (Ausnahme Frames, siehe selfHTML). Außerdem ist der Titel auch entscheidend für Suchmaschinen. Aussagekräftige Titel fördern eine gute Platzierung. Aber auch hier gilt - nicht übertreiben.

Datei-Auswahl

Um den Dateinamen für die neue Seite zu wählen, klicken Sie auf den Button "Festlegen".
Es wird ein Datei-Auswahl-Dialog im zuletzt genutzten Verzeichnis geöffnet. Hier können Sie den Dateinamen eingeben. Es ist selbstverständlich auch möglich, in dem Dialog das aktuelle Verzeichnis zu wechseln oder neue Verzeichnisse anzulegen. Mit einen Klick auf "Speichern" verlassen Sie den Dialog. Die Datei ist zu diesem Zeitpunkt jedoch noch nicht gespeichert, sondern wird erst einmal vorgemerkt.

Auswahl einer Hintergrundgrafik

Wenn Sie eine Hintergrundgrafik in das Dokument einbinden möchten, können Sie diese über den Button "Durchsuchen" einbinden. Die Datei wird dann mit relativen Pfadangaben in die HTML-Datei eingebunden.

Farbselektion

Farbauswahl

Über die Buttons der Farbauswahl wird jeweils ein Farb-Dialog geöffnet, in dem Sie für den ausgewählten Teil der HTML-Seite (Texte, Hintergrund, etc.) Farben wählen können.
Im Dokument-Erstellungs-Dialog werden die ausgewählten Farben in einer Vorschau angezeigt. So sehen Sie bereits vor Erstellung des HTML-Dokumentes, wie die Farben zusammen wirken.

Hinweis: Die Farben werden nach Erstellung des Dokuments gespeichert und dienen als Vorlage für Folgeseiten. Dies gilt auch für die Funktion "HTML-Dokument schnell erstellen" mit der eine neue Datei ohne Dialog mit Vorgabewerten erstellt wird.

Beschreibung und Schlüsselwörter

In diesen Feldern sollten Sie entsprechende Angaben machen. Die Schlüsselwörter müssen Sie durch Kommas trennen. Die hier getätigten Angaben helfen Suchmaschinen die neue Seite zu bewerten.

Anlegen der Seite

Nach einem Klick auf "OK" wird die neue Seite erstellt und in der Projektansicht unter "Geöffnet" eingetragen. Die Seite ist zu diesem Zeitpunkt weder gespeichert, noch dem Projekt hinzugefügt. Um sie zu speichern, wählen Sie den entsprechenden Button Datei speichern oder den Menüpunkt Datei->Speichern.

Hinzufügen der Datei zum Projekt

Um die neue Datei dem Projekt hinzuzufügen, wechseln Sie in der Projektansicht nach "Projekt" und wählen Sie den Button: "+".

Datei angelegt und zum Projekt hinzugefügt

Ausblick

Herzlichen Glückwunsch, Sie haben dieses Tutorial erfolgreich beendet. Ähnlich komfortabel sind auch die anderen Funktionen von (X)HTML-Format. Lesen Sie hierzu die entsprechenden Tutorials oder probieren Sie einfach ein bisschen herum.

Freundliche Grüße
  Christian Diekmann

Alle Rechte dieser Tutorials liegen bei Christian Diekmann. Sie dürfen nur mit seiner schriftlichen Genehmigung weiter verteilt, oder veröffentlicht werden.

 
Home | Impressum
SourceForge.net Logo