Dienstag, 16. Februar 2016

HTML/CSS für Laien

Der Blogger-Posteditor ist bequem, allerdings sind die Gestaltungsmöglichkeiten eingeschränkt. Will man mehr, als der Editor bietet, kommt man nicht um diese komische HTML-Sprache herum, die unverständlich und bedeutungsvoll aussieht. Und man hat Angst, da etwas zu verändern, denn man könnte ja aus Versehen den ganzen Blog in die Ewigen Jagdgründe schicken.

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
Und das alles in Laiensprache, denn ich bin auch ein 0815-User und mir ist Anschaulichkeit wichtiger als die korrekte Verwendung der Fachbegriffe. Hinweise zur Seitenverwaltung oder Editornutzung beziehen sich übrigens immer auf das Vorgehen bei blogger.

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 InhaltFußteil
Ab hier Code! weiterer Code oder/und TextHier Code-Ende!
Sowohl bei der Puppe als auch bei Computersprache fällt der Inhalt raus, wenn ein Behälterteil fehlt. Klar, oder?
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
  • Beispiel
Zwischen dem "kleiner als"- und dem "größer als"-Zeichen ist in Kürzeln angegeben, als was der Inhalt des Codeabschnitts behandelt werden soll.
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!

A jeda konn HaTeEmEl-len, des kinnt's glaum!

0 Kommentare:

Kommentar veröffentlichen

Dankeschön für deine Nachricht :-)
Ich freu mich auch über E-Mails (papierpotpourri@outlook.de) und über Nachrichten auf der facebook-Seite https://www.facebook.com/papierpotpourri