Kennt ihr das? Möchtet ihr eure Posts aufhübschen können, aber deswegen keinen Webdesign-Kurs absolvieren müssen?
In nächster Zeit möchte ich ein paar Häppchen "to go" anbieten, z.B.:
- Codeschnipsel, die ihr 1:1 kopieren und einfügen könnt
- Beispiele, wie ihr einzelne Werte im vorhandenen HTML-Code abändern könnt
- Links zu nützlichen Webseiten
Heute habe ich für die, die bisher mit HTML und CSS überhaupt nichts zu tun hatten, ein paar Basis-Infos dabei.
HTML im WWW, mit CSS? - Ohjemine!
Diese zwei Abkürzungen lassen mich immer an "MfG" von den Fantastischen Vier denken. Was bedeuten diese Buchstaben eigentlich?HTML ist eine maschinenlesbare Sprache, mit der dem Browser gesagt wird, WAS er darstellen soll und WO, z.B. eine Linkliste in der Sidebar. Mit CSS beschreibt man, WIE der Inhalt aussehen soll, z.B. mit farbigem Hintergrund oder mit Rahmen und Schatten.
Einstellungen, die für die gesamte Website gelten sollen, sind in der allgemeinen Vorlage festgelegt, die ihr bei Blogger unter "Vorlage -> HTML bearbeiten" anschauen könnt.
Hier bitte nichts unbedacht verändern, im Zweifelsfalle ohne speichern auf "zurück" (zur Übersicht) klicken und am allerbesten vor allem anderen eine Sicherheitskopie der Vorlage abspeichern. Dazu im Tab "Vorlage" oben rechts auf "Backup/Wiederherstellung" und dann auf "herunterladen" klicken.Alles, was ich heute und in kommenden Beiträgen zeige, bezieht sich nur auf das, was man in der HTML-Ansicht des Post-Editors (und Seiten-Editors) sehen und machen kann.
Der Einfachheit halber bezeichne ich Code-Text als HTML, auch wenn es sich streng genommen um CSS-Anweisungen handelt.
HTML ist wie eine russische Puppe aufgebaut
Die ist innen hohl, so dass man was reintun kann, und besteht aus zwei Teilen. HTML sieht genau so aus wie eine liegende russische Puppe:| Kopfteil | Inhalt | Fußteil |
| Ab hier Code! | weiterer Code oder/und Text | Hier Code-Ende! |
Zwischen die beiden Hälften kann man ganz viel reintun. Bei HTML sind das ja Zeichen und Wörter, die dann unter Umständen mehrere Zeilen Platz brauchen.
Das kann dann so aussehen:
| Ab hier Code! | weiterer Code oder/und Text | |
| weiterer Code oder/und Text | Hier Code-Ende! | |
Ebenso wie die russischen Puppen können auch mehrere Codes ineinander geschachtelt sein.
Schreibweise
Natürlich sieht echter HTML-Text nicht so schön anschaulich aus. Kopf- und Fußteile sind daran erkennbar, dass sie jeweils mit einem "<" beginnen und mit einem ">" aufhören. Das Endteil erhält zusätzlich ein "/". Konkret sieht das dann so aus:| HTML-Text: | bedeutet: | Anzeige im Browser: |
|---|---|---|
| <h2>Beispiel</h2> | Überschrift Ebene 2 | Beispiel |
| <i>Beispiel</i> | Kursivtext | Beispiel |
| <ul> <li>Beispiel</li> </ul> |
Aufzählungsliste mit einem Listenpunkt |
|
Im Post-Editor sind neben den obigen Beispielen auch diese Kürzel häufig:
- a kündigt einen Link an
- img enthält ein Bild bzw. dessen Quelllink
- div wenn ein größerer Abschnitt besonders formatiert wird
- span wenn nur einzelne Wörter oder max. eine Zeile anders formatiert werden
Genauere Angaben über den Inhalt werden alle in das Kopfteil, das "Start-Tag", geschrieben, z.B. Titel, Typ, Quelladresse, Größe, Stilformatierung usw. Das kann locker über mehrere Zeilen gehen, bis das ">" das Start-Tag abschließt. Bilder sind da ein gutes Beispiel (s. Box). Innerhalb des Tags "img" finden wir einige Angaben:
alt : alternativer Text
border : Rahmen
height : Höhe in Pixel
src : Quelladresse
width : Breite in Pixel
Darauf folgt ausnahmsweise gleich das Fußteilzeichen "/>". Diese Schreibweise ist nur bei wenigen Ausnahmen zulässig. Merkt euch lieber die Grundregel: IMMER mit dem "Stopsel" (End-Tag) gut verschließen.
Oh je, oh je, jetzt wird's schon ziemlich kompliziert, gell? Nu reicht's aber auch. Um einzelne Texte aufzuhübschen, braucht es nicht mehr an Grundwissen, denke ich. Das verwirrende Zeichenkauderwelsch wird auch besser lesbar, je mehr Übung euer Auge hat.
Bald geht's weiter mit der Reihe "HTML to go". Ich hoffe, bisher war's laienhaft genug, und mit den kommenden Beiträgen erhaltet ihr ganz konkrete Tipps, Links, Schnipsel usw. Versprochen!