HTML und CSS für Einsteiger

Mit diesem Post will ich ganz offiziell meine neue Bloggerwissen-Rubrik eröffnen. Spätestens seit meinen DSGVO-Beiträgen hatte ich den Plan, mehr abseits des sonst üblichen Buch-Contents zu schreiben. Vor etwa zwei Wochen entstand die Idee einer Rubrik für Tipps, Tricks und Tutorials für Blogger egal welchen Genres. Die Posts zur DSGVO und zur perfekten Rezension haben hier bereits Einzug gehalten, weitere sollen folgen.
Den Anfang will ich mit einer Einführung in die absoluten Basics einer Webseite machen: HTML und CSS - Was ist das, wie geht das, wie sieht das eigentlich aus?

---

Hinweise

1. Ihr hattet zuvor noch nie oder kaum mit HTML und CSS zu tun? Dann lasst euch nicht stressen! Das alles zu lesen, kann anfangs sehr verwirrend sein. Nehmt euch Zeit. Wenn ihr etwas nicht versteht, fragt gern nach!

2. Ich bin keine Expertin. HTML und CSS habe ich mir größtenteils selbst beigebracht -  wie genau verrate ich euch in einem anderen Post. Mittlerweile lerne ich es seit fast zehn Jahren, trotzdem kenne ich nicht alles und muss auch selbst hin und wieder was nachschlagen. Was ich hier schreibe, ist nach bestem Wissen und Gewissen. Wer einen Fehler findet, kann mir das sehr gern sagen.

---

Warum sich mit HTML und CSS beschäftigen?

Bevor es an die harten Fakten geht, möchte ich euch zwei gute Gründe nennen, warum ihr euch mMn mit HTML und CSS beschäftigen und euch zumindest Grundlagen aneignen solltet.

1. Ihr versteht, was auf eurer Webseite passiert.

Normalerweise sieht man bei Webseiten nur die grafischen Oberflächen. Ihr habt Texte, Button, Schreibfelder etc., mit denen ihr die Seite bedient. Was ihr bei der grafischen Oberfläche aber nicht seht, ist, was hinter den Kulissen (im Code) passiert. Wenn ihr "nur bloggen" wollt, ist dieses Wissen zwar nicht zwingend notwendig - in manchen Fällen, z.B. bei Fehlern, aber sehr hilfreich.
In dem Fall könnt ihr warten und hoffen, dass der Fehler selbst verschwindet. Ihr könnt andere um Rat fragen oder einen Profi bezahlen, damit der den Fehler löst. Oder ihr geht mit den entsprechenden Kenntnissen selbst auf Fehlersuche.

2. Ihr könnt eure Webseite so gestalten, wie ihr wollt.

Ohne HTML- und CSS-Kenntnisse seid ihr auf vorgefertigte Designs und die meist nicht besonders vielfältigen Einstellungsmöglichkeiten bei diesen Designs angewiesen.
Mit entsprechenden Kenntnissen könnt ihr eure Webseite so gestalten, wie ihr sie euch wünscht. Dabei ist es egal, ob ihr ein vorhandenes Design anpasst oder euch (mit fortgeschrittenen Kenntnissen) ein eigenes Design schreibt oder ob ihr einfach nur eure Posts aufhübschen wollt. Mit HTML- und CSS-Kenntnissen ist das meistens kein Problem!

Hypertext Markup Language (HTML)

Was ist das?

Hypertext Markup Language, kurz HTML, ist eine Auszeichnungssprache, mit der man die Struktur eines digitalen Dokuments gestaltet. Beispielsweise definiert man mit HTML, welche Texte, Bilder und Videos sich in einem solchen Dokument befinden. Obwohl man des Öfteren von "HTML programmieren" liest, ist HTML keine Programmiersprache, denn mit HTML kann man keine Programme schreiben.
HTML-Dateien erkennt man auf dem Computer an der Endung .html oder .htm. Diese Dateien können von Browsern wie Firefox, Opera oder Safari gelesen werden und bilden die Grundlage des World Wide Web. Grundsätzlich ist damit festzuhalten: Jede Webseite, die ihr online aufrufen könnt, ist eine HTML-Seite.

Was kann HTML nicht?

Gestalten.
Mit HTML schreibt man lediglich die Struktur einer Seite. Wie diese Seite dann aussieht, z.B. welche Farben oder welche Schriftarten verwendet werden oder welche Abstände zwischen einzelnen Elementen (Texte, Bilder, Videos etc.) sein sollen, legt HTML nicht fest.
Eine kleine Ausnahme bilden einfache Textgestaltungen wie kursiv, fett und unterstrichen, die mit HTML möglich sind. Wie genau verrate ich euch weiter unten.

Randnotiz
Früher schrieb man auch Farbangaben mit HTML. Heute tendiert man eher zu einer Trennung von Inhalt und Form, weswegen Farben nicht mehr mit HTML geschrieben werden (sollten).

Wie sieht HTML aus?

HTML wird in sogenannten Tags geschrieben. Die Tags sind die Befehle, die einem Browser sagen, wie die Webseite aufgebaut sein soll. Ein solches Tag ist in den meisten Fällen ein Tag-Paar, das aus einem Starttag und einem Endtag besteht.
Das Starttag wird mit einer Klammer < geöffnet, dann folgt der Elementname (z.B. h1 für eine Überschrift) und manchmal weitere Attribute, z.B. class= oder id= , mit denen man einem HTML-Befehl einfach gesagt eine Bezeichnung zuweist. Diese Bezeichnung kann dann später mit CSS angesprochen und besonders gestaltet werden. Geschlossen wird das Starttag mit einer weiteren Klammer >.
Das Endtag besteht aus Klammer mit Schrägstrich </, Elementname und noch einer Klammer >.
Zwischen Start- und Endtag steht der Inhalt, der mit HTML beschrieben werden soll. Beispielsweise rahmt der Tag h1 die Überschrift ein.
Ein vollständiges HTML-Tag sieht damit so aus:

HTML<Elementname>Inhalt</Elementname>

Am Beispiel der h1: 
<h1>Das ist eine Überschrift</h1>

Grundlegender Aufbau einer Webseite

Jede Seite, die mit HTML geschrieben wurde, folgt einer bestimmten Struktur, die immer gleich ist. Die sieht so aus:

HTML<!DOCTYPE html>
<html lang="de">
 <head>
  <title>Titel</title>
 </head>
 <body>

 </body>
</html>

Das Ganze auf Deutsch:
<!DOCTYPE html> definiert den Dokumenttyp. Es sagt dem Browser, dass es sich bei dem Dokument um HTML handelt, das der Browser liest, versteht und darstellt.
<html lang="de"> öffnet die HTML-Seite und sagt dem Browser gleichzeitig, dass es sich um eine deutsche Seite handelt. Alternativ kann bsp. auch "en" statt "de" dort stehen für eine englischsprachige Seite.
Zwischen <head> und </head> stehen die Kopfdaten der HTML-Seite. Das sind Daten, die wichtig für die Seite sind, die aber der Leser der Seite nicht sieht, bsp. Angaben zum Autor der Seite, eine Kurzbeschreibung für Suchmaschinen oder der Seitentitel. Letzterer wird mit dem title-Tag angegeben.
Nach dem head-Tag folgt alles Sichtbare auf der HTML-Seite. Zwischen <body> und </body> werden sämtliche Inhalte eingegeben, z.B. Texte, Bilder, Tabellen, Listen etc.
Zu guter Letzt muss die HTML-Seite natürlich noch geschlossen werden. Das erfolgt mit </html>.

Ausgewählte HTML-Tags

Überschrift:

HTML<h1>Inhalt</h1>

Nachrangige (meist kleinere) Überschriften werden mit h2, h3, h4, h5 und h6 angegeben.

Textabsatz:

HTML<p>Inhalt</p> 

Zeilenumbruch:

HTML<br />
(ohne Starttag)

Link:

HTML<a href="https://...">Linkbezeichnung</a>

Bild:

HTML<img src="Bildlink" alt="Alternativtext/ Bildbeschreibung">
(ohne Endtag)

Vor der schließenden Klammer können weitere sog. Attribute eingefügt werden, z.B.

HTMLBildbreite: width=...px
Bildhöhe: height=...px

Zitat:

HTML<blockquote>Inhalt</blockquote> 

Kursivdruck:

HTML<i>Inhalt</i>

Fettdruck:

HTML<b>Inhalt</b>

Horizontale Linie:

HTML<hr>
(ohne Endtag)

Listen: Eine geordnete Liste (mit Nummerierung) besteht aus den Tags "ol" und "li". Bei einer ungeordneten Liste (mit Aufzählungszeichen) wird statt "ol" das Kürzel "ul" benutzt.

HTML<ol>
  <li>Listenelement 1</li>
  <li>Listenelement 2</li>
  <li>Listenelement 3</li>
</ol>

Tabelle: Eine HTML-Tabelle besteht aus den Tags "table", "tr" für die Tabellenreihe und "td" für die Tabellenzelle.

HTML<table>
  <tr>
    <td>1. Zeile, Spalte 1</td>
    <td>1. Zeile, Spalte 2</td>
    <td>1. Zeile, Spalte 3</td>
  </tr>
  <tr>
    <td>2. Zeile, Spalte 1</td>
    <td>2. Zeile, Spalte 2</td>
    <td>2. Zeile, Spalte 3</td>
  </tr>
</table>

Codeschreibweise anzeigen:

HTML<code>...</code>

Normalerweise werden HTML-Codes direkt in Befehle umgewandelt. Wollt ihr aber die Codeschreibweise anzeigen wie ich hier in diesem Post, dann nutzt dieses Tag.

HTML lernen

Wer HTML lernen möchte, braucht lediglich einen einfachen Texteditor (z.B. Wordpad), mit dem ihr Dateien als .html/ .htm abspeichern könnt, und einen Browser, um diese Dateien anzuzeigen. Schon kann es losgehen.
Am besten, ihr kopiert euch den grundlegenden Aufbau einer Webseite weiter oben und fügt ihn in euer Dokument ein. Zwischen die body-Tags schreibt ihr nun, wonach euch ist. Probiert euch aus, macht, worauf ihr Lust habt und versucht zunächst einmal, ein Gefühl für die HTML-Tags zu bekommen. Fangt mit den einfachen Tags an, die ich euch eben genannt habe. Später könnt ihr euch auch mit HTML-Tag-Listen befassen, die ihr online findet.

Hilfreiche Seiten, um HTML zu lernen, sind z.B. das Wiki von SELFHTML (sehr ausführlich), Mediaevent und planetHTML.

---

Cascading Style Sheets (CSS)

Was ist das?

Cascading Style Sheets, kurz CSS, ist eine Formatierungssprache, d.h. eine Sprache, mit der ihr die Optik eines digitalen Dokuments definiert. Im World Wide Web ist CSS neben HTML eine der Hauptsprachen und beeinflusst maßgeblich, was ihr in der Onlinewelt seht. Dabei ergänzen sich HTML und CSS: Während HTML für Struktur und Inhalte sorgt, definiert CSS, wie genau diese Struktur und Inhalte aussehen. Von Farben und Größen über Schriftarten und Abstände bis hin zu Text- und Objektausrichtungen könnt ihr mit CSS jede Menge machen.
Auf dem Computer erkennt ihr CSS-Dateien an der Endung .css.

Was kann CSS nicht?

Inhalte und Strukturen.
Mit CSS könnt ihr ausschließlich die Optik von bereits vorhandenen Inhalten beeinflussen. Das bedeutet, dass ihr immer ein Dokument in HTML (oder einer anderen Auszeichnungssprache) braucht, auf die sich das CSS bezieht.
Einfach gesagt: CSS ohne HTML funktioniert nicht. HTML ohne CSS funktioniert, sieht aber nicht schön aus.

Wie sieht CSS aus?

CSS-Anweisungen bestehen aus zwei Teilen: Dem Selektor und den Eigenschaften.
Der Selektor gibt an, was gestaltet werden soll, z.B. eine h1-Überschrift aus einem mit dem CSS-Dokument verknüpften HTML-Dokument. Sollen mehrere Selektoren gleichzeitig gestaltet werden, trennt man sie mit einem einfachen Komma.
Die Eigenschaften definieren, wie genau der Selektor aussehen soll. CSS-Eigenschaften werden in geschweiften Klammern geschrieben und durch Semikolons voneinander getrennt. Die Begriffe, mit denen Eigenschaften im CSS beschrieben werden, sind genau so standardisiert wie HTML-Tags. Eine kleine Liste gebe ich euch gleich.

Vorher ein Beispiel wie eine CSS-Anweisung aussehen kann. Wir bleiben bei dem Beispiel der h1-Überschrift. Wir wollen, dass diese Überschrift rot, 20 Pixel groß und unterstrichen ist. In CSS sieht das so aus:

CSSh1 {
  color: #FF0000;
  font-size: 20px;
  text-decoration: underline;
}

Für die Farbangabe nutze ich im CSS sog. Hexcodes, die man über Farbtabellen wie diese hier erfährt. Mir fällt diese Variante am leichtesten. Generell kann man Farben aber auch über RGB- oder HSL-Werte angeben oder z.T. Farbnamen nutzen (Details bei Mediaevent).

Beispiele für CSS-Eigenschaften

Schriftart:

CSSfont-family: 'Schriftart'

Als Schriftart könnt ihr typische Schriften wie Arial, Verdana oder Times New Roman und Webfonts wie Google Fonts nutzen, sofern die Webfonts vorher durch einen HTML-Tag in das Dokument eingebunden wurden.
Schriftgröße:

CSS>font-size: ...px

Schriftfarbe:

CSScolor: #000000

Schriftausrichtung:

CSStext-align: ...

in den Varianten "left" (linksbündig), "right" (rechtsbündig), "center" (zentriert) und "justify" (Blocksatz).

Schriftgestaltung:

CSStext-decoration: ...

in den Varianten "underline" (unterstrichen), "overline" (überstrichen), "line-through" (durchgestrichen) und "blink" (blinkend).

Außenabstand eines Elements:

CSSmargin: ...px

Entweder als einheitlicher Abstand rundherum oder mit margin-left/right/bottom/top.

Innenabstand eines Elements:

CSSpadding: ...px

Auch hier wieder einheitlich oder mit padding-left/right/top/bottom. Das ist z.B. hilfreich, wenn ein Text einen Rahmen hat und ihr mehr Abstand zwischen Text und Rahmen wollt.

Hintergrundfarbe:

CSSbackground: #000000

Rahmenart:

CSSborder-style: ...

in den Varianten "solid" (durchgehend), "dotted" (gepunktet), "dashed" (gestrichelt), "double" (doppelt) und den 3D-Versionen "groove", "ridge", "inset" und "outset".

Rahmendicke:

CSSborder-width: ...px

Rahmenfarbe:

CSSborder-color: #000000

Alternativ können diese 3 Rahmen-Eigenschaften auch in einen Befehl gepackt werden:

CSSborder: 1px solid #000000

CSS lernen

Für CSS gilt das Gleiche wie für HTML: Learning by doing, Schritt für Schritt. Überlegt euch ein Projekt (vielleicht das Gleiche, mit dem ihr HTML geübt habt?), schnappt euch Texteditor und Browser und legt los. Anfangs ist es häufig frustrierend, weil Dinge nicht auf Anhieb klappen. Lasst euch davon nicht entmutigen!
Zudem empfehle ich euch, CSS erst anzufangen, wenn ihr ein gewisses Verständnis von HTML habt. Andernfalls kann es verwirrend und überfordernd sein.

Zum Lernen kann ich euch auch hier das SELFHTML-Wiki, Mediaevent und planetHTML empfehlen.

HTML und CSS verknüpfen

Da sich CSS auf HTML bezieht, müssen die beiden verknüpft werden. Dafür habt ihr drei Möglichkeiten.

1. Externe CSS-Datei

Soll mehr als eine HTML-Datei mit den gleichen CSS-Befehlen gestaltet werden, wird häufig auf eine extra CSS-Datei zurückgegriffen. D.h. ihr habt eine oder mehrere HTML-Dateien und eine CSS-Datei. Um die CSS-Datei mit der/den HTML-Datei(en) zu verknüpfen, benötigt es folgende Zeile innerhalb des head-Tags im HTML-Dokument:

HTML<link href="Dateilink.css" rel="stylesheet" type="text/css">

Statt "Dateilink.css" wird zwischen die Anführungszeichen der Link zur CSS-Datei, die mit der HTML-Datei verknüpft werden soll, geschrieben.
Mit dieser Zeile sagt ihr dem Browser, der die HTML-Datei(en) öffnet, wo er die zugehörige CSS-Datei findet, um die HTML-Datei(en) zu gestalten.

2.Style-Tag im head-Bereich der HTML-Datei

Mit dieser Variante weist ihr einem HTML-Dokument CSS-Befehle zu, die für das gesamte Dokument gelten. Um die CSS-Befehle einzufügen, wird ein style-Tag in den head-Bereich des HTML-Dokuments eingefügt.

HTML<head>
  <style>
    h1 {color: #FF0000; font-size: 20px; text-decoration: underline;}
  </style>
</head>

Dadurch werden alle h1-Überschriften in diesem einen Dokument gestaltet.

3.CSS innerhalb eines HTML-Tags

Wenn ein einzelner (meist kleiner) Bereich in einem HTML-Dokument mit CSS verändert werden soll, können die CSS-Befehle mithilfe eines Style-Attributs direkt in den HTML-Tag geschrieben werden.
Wir bleiben beim Beispiel der Überschrift:

HTML<h1 style="color: #FF0000; font-size: 20px; text-decoration: underline;">Das ist eine Überschrift</h1>

Bei dieser Variante wird nur die eine Überschrift, die ihr mit dem Style-Attribut verseht, gestaltet. Alle anderen h1-Überschriften, die nicht das Style-Attribut haben, bleiben unverändert.

HTML und CSS bei Blogspot und Wordpress

Blogspot

Gesamtes Blogdesign
HTML und CSS befinden sich bei Blogspot in einem Dokument. Um es zu öffnen, geht ihr auf Design > HTML bearbeiten. In dem Fenster, das sich öffnet, seht ihr oben die Tags zur Bestimmung des Dokumenttyps und anschließend den head-Bereich.
Bei Blogspot ist der gesamte CSS-Code im HTML-Code integriert. Ihr findet ihn zwischen den beiden Tags

HTML<b:skin>
und
</b:skin>

Einzelne Gadgets
Unter Layout könnt ihr ein HTML-/Javascript-Gadget einfügen. Dort könnt ihr nach Belieben HTML und CSS einfügen.

Einzelne Posts
Im Post-Editor habt ihr oben links die Wahl zwischen "Verfassen" (Standard) und "HTML". In letzterem könnt ihr HTML und CSS schreiben.

Wordpress

Gesamtes Blogdesign
Im Allgemeinen könnt ihr euer Blog-HTML und -CSS unter Design > Editor anpassen. Habt ihr einen kostenlosen Wordpress-Blog, kann es allerdings sein, dass der Editor für euch gesperrt ist und ihr ihn nur nutzen könnt, wenn ihr ein bestimmtes Extrapaket für euren Blog bucht.

Einzelne Widgets
Unter Design könnt ihr ein Text-Widget hinzufügen. In diesem ist sowohl reiner Text, als auch HTML und CSS möglich.

Einzelne Posts
Im Post-Editor habt ihr oben rechts die Wahl zwischen "Visuell" (Standard) und "Text". Letzteres ist der HTML-Modus, in dem ihr HTML und CSS einfügen könnt.

---

Im Gespräch

Habt ihr schon Erfahrung mit HTML und CSS oder ist es für euch komplettes Neuland?

Sollte es Unklarheiten oder offene Fragen geben, lasst mir gern einen Kommentar da und ich versuche, euch so gut es geht zu helfen!

Außerdem könnt ihr mir gern schreiben, wenn ihr Wünsche für HTML- und/ oder CSS-Tutorials habt.