Den Blog stylen mit HTML & Co

1. Oktober 2011 , Geschrieben von Cebulon Veröffentlicht in #HTML & Co - Tipps zur Blogvgestaltung

Im letzten Beitrag hatte ich geschrieben, dass man durch Eingriff in den HTML-Code eines Bei- trages den Blog noch schöner gestalten kann als es sowieso schon möglich ist. Das ist gar nicht so schwer, und man kann auch nichts kaputt machen. Hauptsächlich macht man das, in- dem man das -Tag und das <img>-Tag durch die Style-Anweisung beeinflusst.

Natürlich kann man mit HTML und CSS noch weit mehr machen, aber wer sich da fortbilden möchte findet im Internet genug Informationen dazu. Ich möchte hier nur Anleitungen geben mit denen jeder Laie, der keine Lust hat HTML-Professor zu werden, seinen Blog verschönern kann.

Schreibt man in einen leeren Beitrag einen beliebigen Text und klickt anschließend auf den HTML- Button in der Icon-Leiste, sieht man das der Text dort einen führendes und ein ab- schließendes hat. Das bedeutet das er ein geschlossener Absatz (Englisch: paragraph) ist. Zu unserem Blog gibt es eine Style-Datei in der steht wie so ein Absatz auszusehen hat. Zeilenhöhe, Abstand vor und hinter dem Absatz und ähnliches ist da definiert.

Allerdings geht es bei den Styles zu wie bei der Bundeswehr: Der letzte Befehl gilt. Und so kann man die dort definierten Anweisungen durch eigene Befehle ersetzen. Und zwar mit der Style-Anweisung. Dazu klickt man in das -Tag hinein, fügt hinter dem p zuerst ein Leerzeichen ein und schreibt dann zum Beispiel:

Style= "margin-left: 100px;"

und klicken dann auf Aktualisieren.

Aus einem Beispieltext....

Bevor ich das Thema ad Acta lege, möchte ich denjenigen die es ausprobieren möchte noch ein paar Ratschläge ans Herz legen. Zuerst noch mal der Vorgang, wie ihn Herr Schilling in seinem Buch beschrieben hat:

...wurde....

...wir haben also den linken Rand definiert.

Wenn wir nun z. B. auch den rechten Rand definieren möchten, müssen wir keine zusätzliche Style-Anweisung eingeben, sondern können die bestehende erweitern. Dazu setzen wir hinter das Semikolon in der Styleanweisung ein Leerzeichen und schreiben dahinter den nächsten Formatierungsbefehl. Aus

Style="margin-left: 100px;"

wird z. B.

Style="margin-left: 100px; margin-right: 100px;"

Nun sieht der Beispieltext so aus:

Wer ihn gerne im Blocksatz haben mächte, erweitert wieder die Style-Anweisung:

Style="margin-left: 100px; margin-right: 100px; text-align: justify;"

heißt sie nun. Und siehe da:

Ein Rahmen wäre schön, oder? Also wird wieder erweitert, um einen Rahmen in der Stärke von 2 Pixeln zu erhalten:

Style="margin-left: 100px; margin-right: 100px; text-align: justify; border: 2px solid;"

Eigentlich ist der Rahmen aber zu nahe am Text. Also, man ahnt es schon, wieder erweitern:

Style="margin-left: 100px; margin-right: 100px; text-align: justify; border: 2px solid; padding: 5px;"

Aber ein wenig farblos ist das Ganze schon. Um Farbe einzufügen, wird dieses mal erweitert und eingefügt. Um den Rahmen z. B. blau zu machen wird hinter solid ein Leerzeichen und der Text blue eingefügt. Um den Hintergrund gelb einzufärben wird um den entsprechenden Befehl erweitert:

Style="margin-left: 100px; margin-right: 100px; text-align: justify; border: 2px solid blue; padding: 5px; background-color: yellow;"

Aus dem schlichten am Anfang unseres Textes wurde nun also:

HTML mit CSS ist hier noch lange nicht am Ende. Man könnte noch einiges mehr machen. Aber ich will es erst mal damit bewenden lassen.

Wer mehr wissen und/oder selbst experimentieren möchte kann sich zum Beispiel hier über weitere Möglichkeiten informieren: http://www.css4you.de/

Formatierungsbefehle die im Beitrag verwendet wurden:

margin-left	Rand links
margin-right	Rand rechts
text-align	Absatzausrichtung
border	Rahmen
background-color	Hintergrundfarbe

Diesen Post teilen

Repost0

Keine Angst vor HTML & Co, Einleitung

Textfluss um Bilder verbessern mit HTML & Co

Zurück zur Home

Kommentiere diesen Post