HTML & CSS – so einfach sind die Grundlagen

Vor Code hast du einen Riesenrespekt, weil das alles so kompliziert aussieht?
Du würdest eigentlich gern wissen, wie du das Aussehen deines Blogs verändern kannst – traust dich aber nicht so recht und blickst bei dem ganzen Kram eh nicht wirklich durch?

Dann ist dieser Beitrag genau richtig für dich!
Denn hier lernst du die Basics von HTML und CSS kennen und erfährst, wie diese ganze Magie funktioniert. 🙂

HTML und CSS? Gehört hast du von diesen beiden Sprachen bestimmt schon mal. Auch wenn du „einfach nur bloggst“ und nicht vorhast, eine steile Karriere als Webdesigner hinzulegen, ist es verdammt hilfreich, wenn du dich mit ihren Grundlagen auskennst. Das gehört einfach zum Handwerkszeug eines Bloggers dazu.

In diesem Artikel erfährst du, was genau HTML und CSS eigentlich sind, wofür du sie brauchst und wie diese beiden Sprachen funktionieren.
Als Einsteiger bekommst du dadurch eine gute Orientierung, und als alter Hase kannst du die Basics nochmal auffrischen.

Allons-y! 🙂

Was macht HTML?

Stell dir mal die ganzen Inhalte deines Blogs als einen einzigen, langen Fließtext vor: alle Artikel, alle Navigationslinks, alles aus der Sidebar und so weiter. Einfach nur langweilige schwarze Schrift auf weißem Grund und das war’s. Nicht sonderlich ansprechend, was? 😉

Ohne HTML sähe vom Landleben ungefähr so aus:

Was wir brauchen, ist also eine Struktur – und da kommt HTML ins Spiel. Damit definierst du nämlich, was was sein soll: das hier ist die Überschrift, von da bis dort reicht eine Aufzählung, das Bild dort soll verlinkt sein, hier kommt eine Sidebar hin und da vorne ein Button.
HTML ist also eine Auszeichnungssprache.

Für diese Auszeichnungen werden bestimmte Tags verwendet, die du an den spitzen Klammern < > erkennst.

Und wofür brauche ich CSS?

CSS lässt das Ganze gut aussehen. 🙂 Hier legst du Farben für den Text und den Hintergrund fest, definierst Breiten und Abstände, die Schriftarten und Schriftgröße und so weiter.
CSS ist demzufolge eine Gestaltungssprache.

Ohne CSS sähe mein anderer Blog vom Landleben, den ich hier mal als Beispiel verwende, nämlich in etwa so aus:

Du kannst die Inhalte einigermaßen gut lesen, weil sie durch das HTML strukturiert sind.  Solange du keine eigenen CSS-Anweisungen hinterlegst, greift der Browserstandard: Überschriften werden größer dargestellt als Fließtext, Links sind blau bzw. lila und unterstrichen und so weiter. Schön ist aber natürlich etwas anderes.

Wie sieht HTML aus?

Es gibt 2 verschiedene Sorten von Tags: umschließende Tags und Standalone-Tags.

Umschließende Tags, nun ja, umschließen etwas. Hier werden beispielsweise Anfang und Ende einer Überschrift (<h1>) und eines Absatzes (<p>) definiert:

<h1>Hallo Welt</h1>
<p>HTML ist toll und gar nicht so kompliziert.</p>

Das schließende Tag hat immer einen Slash /.

Daneben gibt es einige Standalone-Tags, bei denen es keinen Sinn ergeben würde, irgendetwas zu umschließen. Bilder beispielsweise…

<img src="bild.jpg" alt="Ein schönes Bild">

… oder Zeilenumbrüche:

blah blah blah<br>
blah blah blah

<img src="bild.jpg" />

Attribute

Vielen HTML-Tags kannst du zusätzliche Angaben mit auf den Weg geben, die sogenannten Attribute.

In dem Beispiel mit dem Bild oben haben wir zwei Attribute – src für die Adresse des Bilds und alt für den Beschreibungstext.

Klassen und IDs

Besonders wichtige Attribute sind class und id.
Die brauchst du, um bestimmte HTML-Tags im CSS oder JavaScript anzusprechen.

Mit a { font-size: 16px; } legst du für alle Links eine Schriftgröße von 16px fest, mit a.social { font-size: 16px; } nur für diejenigen Links mit der Klasse „social“.

Jedes Element kann sowohl eine ID, als auch mehrere Klassen haben. Klassen darfst du beliebig oft verwenden, jede ID darf aber nur einmal pro Seite auftauchen.

<div class="sidebarBox widget" id="letzteKommentare">

HTML to go: die wichtigsten Tags für die Handtasche

Insgesamt gibt es etwas mehr als 100 verschiedene Tags (hier findest du die komplette Liste). Einige braucht man eher selten, ein paar davon solltest du aber kennen und quasi immer dabei haben. 🙂

Überschriften:

<h1>Hallo Welt!</h1>

<h1>, <h2>, ... bis <h6>

Die wichtigste Überschrift ist die h1, Zwischenüberschriften bekommen je nach Level h2 bis h6.

Links:

<a href="https://supertollesblog.de" title="Das tollste Blog der Welt">Linktext</a>

Das href-Attribut gibt das Linkziel an. Der title ist der kleine Text, der erschient, wenn du mit dem Mauszeiger über einen Link fährst.

<a href="https://supertollesblog.de" title="Das tollste Blog der Welt" rel="nofollow">Linktext</a>

Bilder

<img src="deinbild.jpg" alt="Dein Bild">

Mit src gibst du die Bildquelle an, d.h. den Pfad zu deinem hochgeladenen Bild.
Sofern das Bild nicht geladen werden kann, wird stattdessen der alt-Text angezeigt (alt für alternative).

Auflistungen

<ul>
   <li>...</li>
   <li>...</li>
</ul>

Jedes li steht für einen Listenpunkt.
Mit ul erzeugst du eine unsortierte Liste – mit Punkten – und mit ol eine ordered List, d.h. eine durchnummerierte Aufzählungsliste.

Absätze und Zeilenumbrüche

<p>Ich bin ein Absatz<br>
mit einem Zeilenumbruch.</p>

Absätze umschließt du mit dem p-Tag.
Ein br erzeugt einen einfachen Zeilenumbruch.

Container und spans

<div id="content">...</div>

Geschrieben von <span class="autor">neontrauma</span>.

All die bislang genannten Elemente haben eine semantische Funktion, d.h. sie sagen gleich etwas über den Inhalt aus. Darüber hinaus gibt es aber noch ein paar Tags, die keinerlei inhaltliche Relevanz haben: div und span.

Mit divs kennzeichnest du Blöcke, mit spans üblicherweise einzelne Wörter.

Wie ist so eine HTML-Datei aufgebaut?

Unabhängig von deinem Inhalt – ob du beispielsweise eine Sidebar haben willst oder nicht – gibt es einige Bereiche im HTML, die für jede Seite gleich sind.

So sieht das Gerüst immer aus:

<!doctype html>
<html>
<head>
   Meta-Angaben
</head>
<body>
   Der eigentliche Seiteninhalt
</body>
</html>

In der ersten Zeile legst du den Typ des Dokuments fest – „jetzt kommt HTML!“.

Dann notierst du das umschließende html-Tag, in dem sich der head und der body befinden.

Im head stehen die sogenannten Meta-Anweisungen, die so direkt nicht auf der Seite auftauchen: der Titel der Seite, verlinkte Ressourcen wie Stylesheets oder JavaScript-Dateien, und so weiter.

Der body enthält schließlich den eigentlichen Inhalt.

Und wie sieht CSS aus?

Mit CSS verhält es sich so ähnlich wie mit den HTML-Tags – du kannst verdammt abgefahrene Dinge damit anstellen, aber es ist vollkommen okay, wenn du den Code dafür im Einzelfall googelst.
Die Basics solltest du aber auswendig können, weil du die ziemlich oft brauchen wirst. 🙂

CSS schreibst du so, dass du das Element ansprichst – mit seinem Elementnamen, als Klasse oder ID – und dann die Formatierungsanweisungen in geschweifte Klammern { } packst.

p {
   font-size: 16px;
   text-align: justify;
}

Hier sagen wir, dass alle Absätze eine Schriftgröße von 16px haben sollen und der Text als Blocksatz gesetzt sein soll.

Klassen sprichst du über einen vorangestellten Punkt an…

<ul class="zutaten">

ul.zutaten {
   list-style: none;
}

… und IDs über eine Raute:

<div id="kommentare">

#kommentare {
   margin-top: 20px;
}

Das Who’s who der CSS-Anweisungen

Wie gesagt, es gibt eine riesige Menge von CSS-Definitionen. In nächster Zeit werde ich einige Artikel zu speziellen Themen wie etwa Schriftgestaltung veröffentlichen, wo ich näher auf die entsprechenden CSS-Anweisungen eingehe.
Die folgende Liste soll dir nur mal schon einen ganz groben Überblick verschaffen, was was ist:

• background & color: Farbe
• alles, was mit text- oder font- beginnt – Schriftgestaltung
• border: Linien
• margin & padding: Abstände
• width, height: Dimensionen
• position, display, float & clear: Anzeige und Ausrichtung von Elementen

Da wir jetzt schon die 1.000-Wörter-Grenze gesprengt haben, vertiefe ich das an dieser Stelle mal nicht weiter. 😉

Wohin mit dem CSS?

Es gibt verschiedene Wege, um dein HTML mit dem CSS zu verknüpfen:

1. Inline: du gibst dem HTML-Tag ein Attribut namens style mit auf den Weg und schreibst dort die Anweisungen hinein.
   <p style="color: #333;">blah blah</p>
   Unpraktisch, weil das tatsächlich nur für dieses eine Element gilt – und üblicherweise sollen ja alle Absätze gleich aussehen.
2. Im head-Bereich des HTMLs: im Kopfbereich deiner HTML-Datei notierst du die Anweisungen innerhalb eines style-Bereichs.
   <style> p { color: #333; }</style>
   Auch nicht gerade elegant, weil der head-Bereich dadurch sehr lang und unübersichtlich wird.
3. In einem separaten Stylesheet: du legst eine eigene Datei mit der Endung .css an, die du anschließend im Kopfbereich verlinkst.
   <link href="style.css" rel="stylehsheet">
   Das ist die sauberste Lösung.

Jetzt hast du (hoffentlich 🙂 ) ein grundlegendes Verständnis davon, wie HTML und CSS aussehen und wofür du sie benötigst.

Stehen bei dir gerade irgendwo Fragezeichen über dem Kopf? Hast du Ideen oder Fragen zu etwas? Lass es mich in den Kommentaren wissen! 🙂