BlueGriffon | HTML-Editor
Klartexteditor
Sicher kannst du deinen HTML-Quellcode mit einem beliebigen Texteditor erstellen. Dazu solltest du einen Klartexteditor wie etwa Wordpad, Editor, TextEdit verwenden (nicht aber ein Textverarbeitungsprogramm, da dieses unerwünschte Formatierungen mit sich bringt). Um dein Ergebnis als Website zu betrachten, musst du den Editortext als HTML-Datei speichern, die du dann im Browser öffnen kannst.
WYSIWYG BlueGriffon
BlueGriffon ist ein WYSIWYG-Editor (What You See Is What You Get). Das bedeutet, dass du auf einer Benutzeroberfläche arbeiten kannst, die einem Browserfenster ähnelt, während der Editor parallel den HTML-Code darstellt. Das alles läuft so erst einmal offline mit lokalen Speicherpfaden. Wenn du beispielsweise ein Bild per Drag&Drop einfügst, wird im Code natürlich der lokale Pfad zum Bild angegeben (hier: "D:\Homepage cbs\Tipp_Pics\HP-Pics\Standart\newsticker.png"). Dieser Pfad muss natürlich angepasst werden, sollte die Seite online gehen.
Die Abbildung eines ganz einfachen Seitenausschnitts im HTML-Editor zeigt dir rechts den HTML-Code und links das zu erwartende Erscheinungsbild.
Sicher kannst du deinen HTML-Quellcode mit einem beliebigen Texteditor erstellen. Dazu solltest du einen Klartexteditor wie etwa Wordpad, Editor, TextEdit verwenden (nicht aber ein Textverarbeitungsprogramm, da dieses unerwünschte Formatierungen mit sich bringt). Um dein Ergebnis als Website zu betrachten, musst du den Editortext als HTML-Datei speichern, die du dann im Browser öffnen kannst.
WYSIWYG BlueGriffon
BlueGriffon ist ein WYSIWYG-Editor (What You See Is What You Get). Das bedeutet, dass du auf einer Benutzeroberfläche arbeiten kannst, die einem Browserfenster ähnelt, während der Editor parallel den HTML-Code darstellt. Das alles läuft so erst einmal offline mit lokalen Speicherpfaden. Wenn du beispielsweise ein Bild per Drag&Drop einfügst, wird im Code natürlich der lokale Pfad zum Bild angegeben (hier: "D:\Homepage cbs\Tipp_Pics\HP-Pics\Standart\newsticker.png"). Dieser Pfad muss natürlich angepasst werden, sollte die Seite online gehen.
Die Abbildung eines ganz einfachen Seitenausschnitts im HTML-Editor zeigt dir rechts den HTML-Code und links das zu erwartende Erscheinungsbild.
Ein Klick auf das Weltkugelsymbol oder auf das Handysymbol zeigt dir das Werk in der Browseransicht.
Einstellungen vor der Arbeit
Bevor du mit BlueGriffon loslegen kannst, solltest du eine Grundeinstellung, wie in der Abbildung, vornehmen. Extras - Einstellungen – Dokumente.
Bevor du mit BlueGriffon loslegen kannst, solltest du eine Grundeinstellung, wie in der Abbildung, vornehmen. Extras - Einstellungen – Dokumente.
Deine erste HTML-Datei erstellen
1) Klicke auf auf den kleinen Pfeil beim Pluszeichen und wähle dann Weitere Optionen.
1) Klicke auf auf den kleinen Pfeil beim Pluszeichen und wähle dann Weitere Optionen.
2) Definiere den Dokumententyp und klicke auf OK.
3) Im neuen leeren Dokument wählst du nun das Bearbeitungslayout – in der Regel dürfte das die Dual View - Ansicht sein.
4) Nun könntest du mit dem Schreiben von Code beginnen. Ich empfehle dir aber die noch leere Datei, die bereits den Grundcode enthält, korrekt abzuspeichern.
Der Speicherort deines Dokuments sollte ein zuvor erstellter gemeinsamer Ordner für deine BlueGriffon Projekte sein. Bei der Benennung von HTML-Dokumenten musst du folgende Regeln beachten:
4.1 der Dateiname muss auf .html enden
4.2 der Dateiname darf keine Umlaute enthalten (ä,ö,ü…)
4.3 der Dateiname darf keine Sonderzeichen, ausser _ , enthalten (+"*#&/…)
4.4 der Dateiname darf keine Leerschläge enthalten, verwende dazu Bindestrich oder Underline
4.1 der Dateiname muss auf .html enden
4.2 der Dateiname darf keine Umlaute enthalten (ä,ö,ü…)
4.3 der Dateiname darf keine Sonderzeichen, ausser _ , enthalten (+"*#&/…)
4.4 der Dateiname darf keine Leerschläge enthalten, verwende dazu Bindestrich oder Underline
5) Jetzt erstellst du deine komplette Seite und speicherst diese regelmässig mit einem Klick auf das Speichernsymbol.
Ansicht im Webbrowser
Es gehört immer zu einem eindrücklichen Erlebnis, den eigenen HTML-Code zum ersten mal in der Browseransicht zu sehen. Du hast neben der Ansicht in einem Desktop-Webbrowser auch noch die Möglichkeit zu schauen, wie die Darstellung auf dem Mobile aussieht.
Es gehört immer zu einem eindrücklichen Erlebnis, den eigenen HTML-Code zum ersten mal in der Browseransicht zu sehen. Du hast neben der Ansicht in einem Desktop-Webbrowser auch noch die Möglichkeit zu schauen, wie die Darstellung auf dem Mobile aussieht.
Und dann beginnt für dich die Überarbeitung, die von kleinen Korrekturen bis zur nicht-enden-wollendenden Perfektion gehen kann - HTML macht süchtig :)
Links und Adressen
Ganz zu Beginn habe ich erwähnt, dass die Adressierung, beispielsweise eines Bildes, eine entscheidende Rolle spielt, sobald die HTML-Datei online geht. Webseiten besitzen in der Regel viele Verweise zu anderen Inhalten (Hyperlinks). Diese Verweise könne auf zwei Arten referenziert sein.
Links und Adressen
Ganz zu Beginn habe ich erwähnt, dass die Adressierung, beispielsweise eines Bildes, eine entscheidende Rolle spielt, sobald die HTML-Datei online geht. Webseiten besitzen in der Regel viele Verweise zu anderen Inhalten (Hyperlinks). Diese Verweise könne auf zwei Arten referenziert sein.
- Absolute Referenzen
Die absolute Referenz ist eine einmalige Adresse im Internet. Bei unseren NewsFlash-Bild ist dies: https://luck-cbs.ch/uploads/1/3/7/6/137608123/nfmouse-mo_orig.png
Dies ist besonders dann sinnvoll, wenn sich der Inhalt ausserhalb der aktuellen Seite oder auf einer fremden Website befindet. - Relative Referenzen
kommen immer dann zum Zuge, wenn sich der Inhalt innerhalb der eigenen Domain befindet. Der Pfad besteht dann nicht aus der gesamten URL, sondern nur aus dem Dateinamen der Zieldatei, beispielsweise pc-tipps.html
deine Kommentare, Fragen und Kritik zu diesem Beitrag >> hier deponieren.