Dienstag, 23. Februar 2016

Copy&Paste-Häppchen

Titelgrafik
Wenn man seine Blogtexte schöner gestalten möchte als mit dem Editor möglich ist, kommt man um HTML (bzw. CSS) nicht herum. Wer damit nicht vertraut ist, freut sich hoffentlich über die heutigen "Copy & Paste"-Häppchen. Das sind kleine Codeschnipsel für Linien, Rahmen, Boxen etc., die ihr nur in eure Texte einzufügen braucht.




   Der Hintergedanke:  

Die "Copy & Paste"-Häppchen sind so konzipiert, dass sie keinerlei individuelle Anpassung brauchen. Auch jemand ohne HTML-Kenntnisse sollte sie problemlos verwenden können. Sie sind flexibel und browserunabhängig:
  • Die Höhe der Rahmen passt sich dem Inhalt an.
  • Rahmen, die über die gesamte Breite des Textbereichs gehen, passen sich von selbst den jeweiligen Maßen des eigenen Blogfensters (main section) an.
  • Der Text in den Rahmen kann wie gewohnt formatiert werden. 
  • Die verwendeten Begriffe sind für alle Browser wie Safari, Firefox, IE, usw. verständlich, außer es benutzt jemand eine Uralt-Version.

Nachfolgend sind alle verfügbaren Gestaltungselemente dargestellt. Danach findet ihr Hinweise und Tipps zum Einfügen und einen Link. Dieser öffnet  - in einem neuen Fenster - eine separate Blogseite mit allen Codeschnipseln.

   LINIEN und BALKEN:  

1


2

3

4

5

6

7

8

9

10


   RAHMEN und BOXEN:  

A
BEISPIELTEXT BEISPIELTEXT BEISPIELTEXT

B
BEISPIELTEXT BEISPIELTEXT BEISPIELTEXT

C
BEISPIELTEXT BEISPIELTEXT BEISPIELTEXT

D
BEISPIELTEXT BEISPIELTEXT BEISPIELTEXT

E
BEISPIELTEXT

F
BEISPIELTEXT BEISPIELTEXT BEISPIELTEXT

G
BEISPIELTEXT BEISPIELTEXT BEISPIELTEXT

H
BEISPIELTEXT BEISPIELTEXT


   SONSTIGES:  

I.
BEISPIELTEXT
BEISPIELTEXT
II.
III.
BEISPIELTEXT
    

IV.
BEISPIELTEXT
    

V. VI. VII.
BEISPIELTEXT BEISPIELTEXT BEISPIELTEXT

VIII. IX.
Bitte drückenKlick
Zu den Codeschnipseln geht's
mit Klick auf irgendeinen der beiden Buttons.


   Hinweise:   

  • Code vollständig markieren, kopieren und an der gewünschten Stelle in die HTML-Ansicht des Post-Editors einfügen. (Bei mir funktioniert es auch, wenn ich den Codeschnipsel in die normale "Verfassen"-Ansicht" einfüge.)
  • Alle "Copy & Paste"-Häppchen wirken sich nur auf den einen Post und nur auf den im Schnipsel eingeschlossenen Text aus.
  • An sich könnt ihr mit dem Einfügen der HTML-Schnipsel nichts kaputt machen. Klappt etwas nicht, dann einfach rückgängig machen, evtl. noch mal neu kopieren und eine andere Einfügestelle wählen. Extrem Ängstliche können ja noch den Vorher-Zustand des betreffenden Posts kopieren (den HTML-Text!) und als Textdatei auf dem Rechner abspeichern.
  • "Beispieltext" ersetzen nicht vergessen ;-)
Jedes "Copy & Paste"-Häppchen kann natürlich den eigenen Bedürfnissen und Wünschen angepasst werden. Wer wissen möchte, wie das geht, sollte bald mal wieder vorbeischauen. Im nächsten Artikel "Swap Drops" aus der Reihe "HTML to-go" gibt's nämlich genau dazu einfache Erklärungen und typische Beispiele.


   Tipps und Troubleshooting:   

  • Soll das Element zwischen bereits vorhandenen Textabschnitten eingefügt werden, dann sollte vorher von den dafür vorgesehenen Zeilen jede Formatierung entfernt werden.
  • Die Abmessungen des Editor-Fensters stimmen normalerweise nicht mit denen des Blogs überein. Elemente, die in der "Verfassen"-Ansicht falsch positioniert oder zu groß erscheinen, werden vom Browser evtl. korrekt angezeigt. Deshalb immer die Vorschau ansehen.
  • Zeigt auch der Browser ein Element an der falschen Stelle an oder überlappen sich Blogteile, dann ist zwischen den Bereichen wahrscheinlich zu wenig Platz. Vor dem unteren Element Leerzeilen einfügen sollte genügend Abstand schaffen.
  • Wird statt der Linie/Box der Code angezeigt, ist ihm entweder ein Zeichen an unpassender Stelle hinzugefügt oder weggezwackt worden. In der HTML-Ansicht sicherstellen, dass der Codeschnipsel mit "<" beginnt und mit "</div>" aufhört. Wenn die Start- und End-"tags" fehlerhaft sind, wird das in einer roten Info-Box mitgeteilt.
  • Unpassende oder fehlende Zeilenumbrüche sind dem Editor egal, überflüssige Leerzeichen oft auch. Sowas korrigiert er von sich aus (außer in dem Inhaltsbereich, also da, wo dein Text ist).
  • Die allererste Linie "hr"="horizontal rule" ist nicht nur als Stilelement gedacht, sondern soll durch den automatischen Abstand zu den Nachbarzeilen Sinnabschnitte trennen.
  • Die beiden Boxen oder Tabs Nr. III. und IV. sind so angelegt, dass sie Text seitlich umfließt. Soll der Platz frei bleiben, entweder den Code abändern oder einfach die benötigte Zahl an Leerzeilen einfügen.


Meldet euch bei mir, wenn ihr trotzdem noch Probleme habt oder - trotz Sorgfalt - ein Codeschnipsel fehlerhaft sein sollte. Ansonsten hoffentlich viel Freude mit den "Copy & Paste"-Häppchen!

A Fiedbäck waar toll!