Nachdem ich letzte Woche mit HTML 5 eher zufällig ein wenig auf- und zugeklappt habe, erhielt ich eine überraschende Menge Feedback zum Thema „Textformatierung“ auf Websites.
Jedes Content-Management-System bietet ja die Möglichkeit in einem Bereich oder Feld Text einzugeben und mittels HTML zu formatieren. Oft wird in solchen Feldern ein WYSIWYG-Editor zur einfachen Textformatierung angeboten. In diesem Editor schreibt man wie in einer klassischen Textverarbeitung und der Editor erzeugt im Hintergrund die gewünschten HTML-Befehle.
Ein Beitrag hier im Blog (WordPress) besteht aus einem Beitragsbild, der Überschrift und einem grossen „Klumpen“ HTML.
Dieser Klumpen HTML kann, je nach Beitrag, ziemlich gross werden. Hier im Blog lade ich beispielsweise Bilder hoch, erstelle Spalten, binde Tweets oder Videos ein, formatiere Überschriften und verlinke andere Websites.
Bei der Bearbeitung kann ich wählen, ob ich in einem visuellem oder einem Code-Editor arbeiten möchte. Ich kann sogar während der Bearbeitung die Ansicht wechseln.
In der überwiegenden Zeit nutzt man vermutlich beim Schreiben den visuellen Editor. Hier bei WordPress ist das Gutenberg.
Aber manchmal, wenn es mit einem so wenig durchgeht, da möchte man vielleicht etwas ganz Spezielles haben. Ein bisschen mehr Abstand zwischen einem Bild und einem Text, einen dicken, fetten Button, eine Grafik, einen Hingucker … du weisst vermutlich schon, was ich meine …
😜
Ich bin kleiner 😜
Naja … und für solche „Spielerchen“ benötigst du etwas mehr Wissen über HTML und CSS. Die Grenze zwischen Textformatierung und Programmierung verläuft dabei ein wenig unscharf.
Die Smiley Emojis und der Text da oben werden beispielsweise mit diesem Befehl eingefügt:
<p style="font-size:80px">😜</p>
<p style="writing-mode: vertical-lr">Ich bin kleiner 😜</p>
Quelle: Smiley Emojis For Web, Textausrichtung mit CSS: Text von oben nach unten bzw. von rechts nach links schreiben
Es ist eine Mischung aus HTML (Paragraphs-Tag), CSS (font-size) und dem Emoji (😜).
Das Verblüffende an solchen „Kleinigkeiten“ ist, dass man das „einfach so“ machen kann! HTML und CSS benötigen keinen Compiler und keine Entwicklungsumgebungen. Die Befehle können einfach benutzt werden und der jeweilige Browser führt das dann aus.
Und nun kommen wir zum Titel dieses Blog-Beitrags!
Woher erfährt man denn nur, wie so etwas funktioniert und was man eingeben muss, damit erscheint, was man will?
W3Schools (w3schools.com) ist die vermutlich verbreitetste und internationalste e-Learning Website. Sie existiert seit 1998 und behandelt ausser HTML, CSS, Bootstrap und JavaScript auch viele andere Bereiche der Webentwicklung. Es gibt kostenlose und kostenpflichtige Tutorials. Mit den kostenlosen Tutorials kommt man allerdings schon sehr weit 🙂
Die sicherlich bekannteste Site im deutschsprachigen Raum zum gleichen Thema ist selfhtml (wiki.selfhtml.org). Sie wird mittlerweile von einem gemeinnützigen Verein betrieben. Die Vereinssatzung beginnt mit dieser Präambel.
Die Informationsgesellschaft unserer Tage ist ohne Internet nicht mehr denkbar. Das World Wide Web und andere Dienste ermöglichen den Menschen weltweite Kommunikation und Information. Das geschieht nicht nur auf dem Weg des Konsumierens, wie dies bei den konservativen Medien der Fall ist, sondern auch auf dem Weg des Verbreitens von Information – dem Publizieren. Menschen, die im Internet publizieren möchten, benötigen demnach die Fähigkeit, Informationen mediengerecht aufzubereiten und zu präsentieren.
Stefan Münz schuf mit seiner Dokumentation SELFHTML und dem dazugehörigen Internetangebot SELFHTML aktuell einen leicht verständlichen Zugang zum Publizieren im Internet und den dafür notwendigen Techniken. SELFHTML möchte einerseits dazu ermutigen, die komplexe Materie von Webdesign und Webprogrammierung ohne weitere fremde Hilfe selbst zu verstehen, andererseits auch zur Selbstständigkeit beim Erwerb von Wissen um diese Materie erziehen. Die erforderlichen Kenntnisse kann sowohl der Anfänger als auch der Fortgeschrittene mit SELFHTML erwerben, da die Dokumentation genauso als autodidaktisches Lehrmittel dient wie als Nachschlagewerk. Es vermittelt immer anschaulich, aber nie oberflächlich das Wissen, das mit Originalspezifikationen oder einem trockenen Fachbuch deutlich schwieriger zu erschließen wäre.
https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Vereinssatzung
Ganz im Sinne dieser Präambel geht es mir in diesem Beitrag gar nicht darum, die tollste „Wie lerne ich was“-Site vorzustellen, sondern aufzuzeigen wie „einfach“ und vor allem wie notwendig das alles ist.
Du kannst alles selbst ausprobieren und ganz nebenbei erwirbst du Kenntnisse über Zusammenhänge und Strukturen, die in der heutigen Arbeitswelt nun wirklich sehr nützlich sind.
Beim Ausprobieren wirst du feststellen, was dir gefällt, und ob es dir Spass macht. Deiner Kreativität sind tatsächlich kaum Grenzen gesetzt.
Noch ein Beispiel: Diese Linie wird über das HTMLS5-Canvas Element erzeugt.
Wie das mit der Linie geht, wird hier erklärt:
- https://www.w3schools.com/html/html5_canvas.asp
- https://wiki.selfhtml.org/wiki/HTML/Elemente/canvas
- und vermutlich an tausenden anderen Orten im Web
Achtung – Verantwortung!
In den professionellen Website-Umgebungen vieler Firmen sind die Möglichkeiten der Eingabe von HTML-Befehlen oft bewusst begrenzt. Das CMS Drupal benutzt beispielsweise unterschiedliche Textformate mit Zugriffsberechtigungen, bei denen der Gebrauch bestimmter HTML-Tags an die Zugehörigkeit einer Benutzerrolle gebunden ist. Das ist kein böser Wille der IT-Abteilung, sondern dient oft der Schadensbegrenzung und einem einheitlichen Look and Feel (Corporate Identity). Oft wollen angestellte Personen auch gar keine Wahlmöglichkeiten haben, sondern einen ganz konkret vorgegebenen Weg gehen, für den sie dann hoffentlich auch eine Schulung erhalten.
Für alle anderen beginnt an dieser Stelle die grosse Herausforderung im Web zu publizieren.
Es ist fast überall möglich sehr individuelle Texte zu formatieren und die Gefahr ist gross, dass man mit dem eigenen Geschmack ein wenig daneben liegt … ich sage nur …
Fazit
Textformatierung mit HTML und CSS ist ein interessantes Feld. Es ist heute ein wenig, wie einen Text mit Papier und Bleistift zu schreiben und dann darin zu zeichnen und zu strukturieren. Im Web ist buchstäblich alles möglich. Nicht alles ist allerdings notwendig und manches ist auch einfach zuviel. Trotzdem ist es beruhigend zu wissen, was man tun könnte, wenn man nur wollte …
Links
- https://gutenberg-fibel.de
- https://github.com/timqian/chart.xkcd
- https://wiki.selfhtml.org/wiki/Startseite
- https://www.w3schools.com
tl;dr: Versuch macht klug!
Schreibe einen Kommentar