Tobis Tutorial #4: Markdown Styling Guide Teil 2; Textgestaltung
Hallo liebe steemians,
in meinem letzten Beitrag (siehe hier)habe ich ein Markdown-Tutorial angefangen, dass ich heute mit einem weiteren Beitrag erweitern möchte. In dem gestrigen Beitrag ging es um Überschriften. Heute möchte ich auf die Textausrichtung und Tabellen eingehen.<
Bei Textausrichtung geht es darum den Text möglichst zu ordnen und für das Auge, gut aussehen zu lassen. Das trifft nicht nur auf den Text zu, sondern auch beispielsweise auf Bilder. Wenn ich ein Bild in meinen Beitrag einfüge, möchte ich es meistens in der Mitte haben (eigenständiges Bild).
Ich mag es nicht, wenn ein Bild einfach auf der Rechten oder Linken Seite anfängt. Wenn ein Bild in den Text eingebunden wird, sieht das natürlich anders aus. Allein stehend finde ich es aber am schönsten, wenn es mittig ist.Um ein Bild oder einen Text zu zentrieren, wird unter Markdown der center Tag angewendet.
Markdown-Code
<p><center> Dieser Text wird zentriert angezeigt </center></p>
Textausgabe
Neben dem Zentrieren von Text gibt es noch andere Gestaltungsmöglichkeiten. Diejenigen unter euch die gerne im deutschen und englischem einen Beitrag veröffentlichen wollen haben mehrere Möglichkeiten. Ihr könnt zwei Beiträge erstellen (einer deutsch, einer englisch), den deutschen und englischen Text untereinander schreiben oder ihr schreibt ihn nebeneinander. Um zwei Texte nebeneinander darzustellen wird auf den div Tag zurück gegriffen.
Markdown-Code
<div class="pull-left">Dieser Text wird in der linken Spalte ausgegeben.</div>
<div class="pull-right">Dieser Text wird in der rechten Spalte ausgegeben.</div>
Textausgabe
Dieser Text wird in der linken Spalte ausgegeben.
Dieser Text wird in der rechten Spalte ausgegeben.
Textgestaltung mit Tabellen
Wenn ihr mehr als zwei Spalten haben wollt, müsst ihr auf eine Tabelle zurückgreifen. Damit sind dann noch mehr Spalten für Text oder Bilder möglich.
Markdown-Code
<table><tr>
<td> Dies ist ein Text </td>
<td> Dies ist ein Text </td>
<td> Dies ist ein Text </td>
</tr></table>
Textausgabe
| Dies ist ein Text | Dies ist ein Text | Dies ist ein Text |
Zugegeben eine Tabelle ist nicht wirklich zu erkennen. Man sieht nur das der Text in drei Spalten angezeigt wird. Wer eine Sichtbare und schöne Tabelle haben möchte, muss auf folgenden Code zurückgreifen:
Markdown-Code
Überschrift links | Überschrift rechts --- | --- Text links | Text rechts
Textausgabe
| Überschrift links | Überschrift rechts |
|---|---|
| Text links | Text rechts |
Wer auch hier mehr spalten haben möchte, muss den Code wie folgt erweitern:
Markdown-Code
Überschrift links | Überschrift mitte | Überschrift rechts --- | --- | --- Text links | Text mitte | Text rechts
Textausgabe
| Überschrift links | Überschrift mitte | Überschrift rechts |
|---|---|---|
| Text links | Text mitte | Text rechts |
Wer immer noch nicht genug von Tabellen hat, kann den Text innerhalb der Datenzeile linksbündig oder rechtsbündig anpassen. Soll der Text rechtsbündig angezeigt werden wird einfach ein Doppelpunkt eingefügt. Möchte man den Text jedoch linksbündig haben, lässt man den Doppelpunkt einfach weg.
Markdown-Code
Überschrift links | Überschrift mitte | Überschrift rechts
---:| ---: | ---:
Text links | Text mitte | Text rechts
Textausgabe
| Überschrift links | Überschrift mitte | Überschrift rechts |
|---|---|---|
| Text links | Text mitte | Text rechts |
Wer möchte kann jetzt auch noch die Überschrift unter Anwendung des center Tag ändern.
Markdown-Code
<center>Überschrift links</center> | <center>Überschrift mitte</center> | <center>Überschrift rechts</center>
---:| ---: | ---:
Text links | Text mitte | Text rechts
Textausgabe
| Text links | Text mitte | Text rechts |
Ich hoffe dir hat dieser Beitrag geholfen. Falls du Fragen hast, hinterlasse einfach einen Kommentar.
Wie geht es weiter?
Du hast noch nicht genug? Wunderbar, denn es werden noch mindestens zwei weitere Beiträge zum Markdown Styling Guide folgen. In dem nächsten Beitrag wird es um Bilder gehen und um links, sowie eine Verschachtelung von Bildern und links in einer Tabelle (Bilder-Matrix, die auf eure Beiträge verweist)
Ich hab zu danken.
Bisher hatte ich noch keinen Anwendungsfall für Tabellen, aber was nicht ist, kann ja noch werden. Danke für deine Mühen :)
Ich habe mal noch eine Frage, Text rechts und links bekomme ich hin, dann möchte ich das Bild darunter haben, also links beginnend bis rechts rübergehend, auch kein Problem. Wenn ich dann aber wieder Text rechts und links machen möchte, komme ich nicht klar, weil mir dann das Bild auf rechts rutscht und ach das alles nicht klappt, ich stelle mich zu blöde an :(
Meinst du folgende Darstellung?
Wenn ja, dann nutzt du am besten den div Tag dafür. In dem Kommentaren wird das ganze zwar nicht über die gesamte Breite der Seite angezeigt, als Beitrag wird es aber korrekt angezeigt. Habe es eben bei mir mal in einem veröffentlichten Beitrag getestet.
Die Antwort hab ich ja ganz übersehen! Das hatte soweit geklappt, wenn ich dann aber darunter wieder normal links beginnen wollte und dann über die ganze Breite, hat das nicht geklappt, sondern blieb dann rechts. Ich muss einfach mehr machen und üben. Ich danke Dir! :)
Nach dem letzten div Tag musst du ungefähr 3-4 Zeilen frei lassen, bevor du mit dem nächsten Text beginnst.
Ah super, ich danke :)
Und es bring was 😎 👍
Hallo cervisia,
ja die Arbeit lohnt sich einen Beitrag zu schreiben.
bringt wirklich etwas :-)
Merkt man auch an deinen posts, macht sie viel attraktiver und leichter zu lesen.
Das ist suuper hilfreich, ich meine Markdown bringt schon einige hilfreiche Sachen mit, aber ich habe auch schon mit einigen html codes ausprobiert, da hat man ja schon, wie man in deinem Beitrag sieht, noch deutlich mehr Möglichkeiten.
Ich freue mich mehr hilfreiche Tipps zu bekommen auch html mitzubenutzen. Dankeschön! :)
Wenn ich mit Markdown fertig bin können wir uns gerne der Sache mit html und css annehmen, wobei ich noch nicht weiß mit was Markdown alles umgehen kann.
Du hast doch einige Dinge von html mit reingenommen, wie das mit center und table, markdown nimmt das halt einfach auch mit.
Markdown ist, soweit ich das richtig verstanden habe ja eigentlich nur eine Vereinfachung, die die Befehle im Endeffekt nur in html übersetzt. Deshalb glaube ich sollte man auch einfach html darin nutzen können.
Ja richtig Markdown ist so gesehen eine Vereinfachung die wirklich nur das nötigste von dem Funktionsumfang von html mit bringt.
sehr cool :) Danke Dir :)
Sehr hilfreich! :)
Leider gab es einen Fehler, den ich jetzt erst gefunden habe. Jetzt sollte alles stimmen.
meep
Meep meep
Super Tutorial!
Danke, so kann man seine posts viel attraktiver darstellen :-)
Sie sind dann angenehmer zu lesen.