HTML & CSS – so einfach sind die Grundlagen

Von • • 34 Kommentare

CSS HTML

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:

Webseite ohne HTML
Ohne HTML sähen Blogs ganz schön doof 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:

Webseite ohne CSS
Ohne CSS: immerhin strukturiert, aber langweilig

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.

Fazit

Also: HTML brauchst du zum Strukturieren, CSS zum anschließenden Stylen.

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
Hinweis für Fortgeschrittene:
Ich schreibe HTML in der Version HTML5, was dem aktuellen Standard entspricht. In der früher üblichen Variante XHTML mussten Standalone-Tags mit einem Slash am Ende versehen werden:

 

<img src="bild.jpg" />

Das ist in HTML5 zwar weiterhin möglich, aber nicht mehr nötig, weswegen ich den Slash weglasse.

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.

Tipp: Hinweis für Fortgeschrittene:
wenn du eine nofollow-Verlinkung setzen willst, schreibst du:

 

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

Auf den Unterschied zwischen dofollow und nofollow bin ich hier ausführlich eingegangen.

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.
Hinweis für Fortgeschrittene:
Du kannst das CSS auch auf mehrere Stylesheets aufteilen und dann entweder mehrere CSS-Dateien im Kopfbereich verlinken oder innerhalb eines Stylesheets andere importieren.

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! 🙂

Verwandte Beiträge

34 Kommentare zu „HTML & CSS – so einfach sind die Grundlagen“

  3. Chèvre Culinaire

    Liebe Anne,
    es ist toll, wie viel Mühe du dir mit diesem Artikel gemacht hast. Für jemanden, der regelmäßig mit HTML und CSS zu tun hat, ist vieles selbstverständlich – obwohl mir das Auffrischen der Grundlagen auch mal wieder gut getan hat 😉 Ich weiß nicht, ob ich es so gut auf den Punkt bringen könnte. Aber du hast es toll geschafft, Licht ins Dunkel zu bringen für all jene, für die das Ganze noch ein Mysterium ist. 🙂
    Alles Liebe,
    Anne von http://chevre-culinaire.blogspot.de/

    Antworten
  4. Ines

    Liebe Anne,

    vielen Dank für die Einstiegserklärung, ich bin da völlig unerfahren bisher und nutze halt die Vorgaben, die mir das Theme bietet, auch wenn es mich nervt, weil es nicht so aussieht wie ich es gerne hätte 🙂
    Vielleicht schaffe ich es ja nach deiner Reihe meinen Blog so anzupassen wie ich ihn gerne hätte… Darf man denn das Theme, das man nutzt, einfach so abändern?

    Liebe Grüße
    Ines

    Antworten
    1. Anne

      Hallo Ines,

      das kommt immer auf das Theme an und die Lizenz, unter der es veröffentlicht wurde. Meistens darfst du es ändern. Oft muss – oder sollte – der Link zum ursprünglichen Autoren aber beispielsweise im Footer stehen bleiben. Guck mal im Ordner deines Themes, ob da eine license.txt liegt, in der du Angaben zur Lizenz findest. Teilweise findest sich auch ganz zu Beginn der style.css ein Hinweis darauf, was du damit anstellen darfst und was nicht.

      Antworten
  5. Dings

    Es ist schon echt Ewigkeiten her, dass ich mich damit intensiver beschäftigt hatte, in den letzten Jahren ist mein Wissen da ganz schön eingerostet. – Umso besser, dass du da jetzt drüber bloggst!

    Antworten
  7. Alexandra

    Auch wenn ich das, was du beschreibst, schon kenne: sehr gut und verständlich erklärt! Ich freue mich schon auf die weiteren Beiträge zu dem Thema 🙂

    Antworten
  9. Sabine Woitelle

    Oh gott ich liebe deinen Blog. Ich hab vor HTML und CSS leider nicht so viel Ahnung. Glaube aber da ich erst vor kurzem begonnen habe, ist das nicht so schlimm. Auch wenn die ganzen Codes noch verwirrend sind, weiß ich jetzt zumindest wofür HTML und CSS eigentlich gebraucht wird. Dankeschön 🙂

    Antworten
    1. Anne

      Hallo Sabine,
      na klar, am Anfang sieht das erstmal nach einem riesigen Wust an komischem Code aus, aber keine Sorge – mit der Zeit bekommt du da einen Überblick. 🙂

      Antworten
  10. Sarah

    Liebe Anne,

    vielen Dank für diesen super Post 🙂
    Mir fällt es immer noch schwer HTML und CSS zu verstehen, geschweige denn anzuwenden, da kommt dein Post gerade recht.
    Ich freue mich schon auf den nächsten um noch mehr Licht ins Dunkel zu kriegen.

    Liebe Grüße
    Sarah

    Antworten
  11. JuliaKnight

    Oh wow, endlich hab auch ich das halbwegs verstanden 😀 Ich musste bisher immer die, die mein Theme designed hat belästigen, wenn ich was geändert haben wollte. Ich hoffe inständig, dass ich das jetzt vielleicht allein hinbekomme (meine Zitate sehen z.B. aus wie ganz normaler Text und das möchte ich jetzt endlich mal allein ändern) – ich denke, hier noch viel lernen zu können =)

    Liebe Grüße
    Julia

    Antworten
  12. Steffi

    Du mutierst immer mehr zu meinem Lieblingsblog. Danke für die tollen Posts zum Bloggen. Jetzt habe ich den Unterschied zwischen Html und Css auch mal verstanden.
    LG Steffi

    Antworten

  13. Pingback: Linksammlung #2 | Chaosmacherin

  15. Pingback: HTML & CSS - Die Grundlagen, Teil 2 | Bloghexe

  17. Kim Peter

    Hallo Anne,

    vielen Dank! Das ist wirklich super erklärt! Ich hatte mit dem Thema erst kürzlich zu kämpfen. Bei meinem Theme war ich bei dem <code> Tag nicht ganz glücklich mit der Schriftgröße. Als ich dann beim Support angefragt habe, ob und wie ich das ändern kann.

    Kam als Antwort „Ja, das geht es erfordert nur elementare Kenntnisse der CSS“. Die habe ich damals allerdings leider noch nicht gehabt.

    Ich kann also aus eigener Erfahrung bestätigen, dass know how in diesem Bereich sehr nützlich ist.

    Viele Grüße
    Kim

    Antworten

  18. Pingback: Schriftgestaltung mit HTML & CSS | Bloghexe

  19. Pingback: JavaScript DOM – Der erste Schritt zur eigenen Web-App | lerne Programmieren

  20. caro

    Mensch gut, dass ich deine Seite gefunden habe. Echt klasse Tipps. Die helfen mir auch echt weiter, habe allerdings auf meinem Blog das Problem, dass ich meine Socialmediabuttons geändert habe und sie einfach nicht mehr in die Waagrechte bekomme. Leider sind sie untereinander angeordnet, was mich nervt. Finde darüber keinen Beitrag im Netz. Kannst du da helfen? Mach weiter so, ich schaue regelmäßig rein, und hoffe so dass mein Blog etwas besser wird.
    LG Caro

    Antworten
    1. Anne

      Hallo Caro,

      wie genau hast du deine Icons denn eingebaut? Einfach als HTML-Gadget? Du müsstest da nämlich etwas am HTML-Code ändern. 🙂

      Wenn du dir deinen Quellcode anguckst (Rechtsklick auf die Icons –> „Element untersuchen“, dann wird dir direkt die entsprechende Stelle angezeigt), siehst du, dass jedes der Icons in einem Div-Container liegt. Die brauchen wir nicht, das geht viel einfacher. 😉
      (Hintergrund zu Divs: Divs sind sogenannte Block-Elemente, die von Natur aus nicht nebeneinander rutschen, sondern sich die ganze zur Verfügung stehende Breite schnappen. Das a-Tag beispielsweise ist ein sogenanntes Inline-Element, das standardmäßig mit anderen Inline-Elementen in eine Zeile wandert. Man kann dieses Verhalten mit CSS ändern, aber das brauchen wir hier gar nicht.)
      Du kannst die Div-Container also alle löschen und gibst dann nur den a-Tags, die für die Verlinkung zuständig sind, ein bisschen Abstand zur Seite, damit die Icons nicht alle nebeneinander kleben:


      <a href="https://www.facebook.com/Kreacaro"><img src="deinbild.jpg" alt="kreacaro auf facebook" style="margin-right: .5em;"></a>
      <a href="https://www.flickr.com/photos/109164433@N05/"><img src="deinbild.jpg" alt="flickr" style="margin-right: .5em;"></a>

      Noch eleganter ist es, wenn du nicht bei jedem a-Tag das style-Attribut verwendest, sondern dort nur eine Klasse setzt und dann in deinem Stylesheet die Formatierung vornimmst:

      Im Gadget…

      <div class="social">
      <a href="https://www.facebook.com/Kreacaro"><img src="deinbild.jpg" alt="kreacaro auf facebook"></a>
      <a href="https://www.flickr.com/photos/109164433@N05/"><img src="deinbild.jpg" alt="flickr"gt;</a>
      </div>

      … und im CSS (Vorlage –> Anpassen –> Erweitert –> CSS hinzufügen) :

      /* alle Icons innerhalb des social-Containers sollen etwas Abstand nach rechts bekommen... */
      .social a {
      margin-right: .5em;
      }

      /* ... nur das letzte Icon braucht ja keinen Abstand nach rechts */
      .social a:last-child {
      margin: 0;
      }

      Leider ist der Bereich in deiner Sidebar sehr schmal, sodass immer nur 3 Icons nebeneinander passen und das vierte in die Zeile darunter verrutscht.
      Das zu ändern, würde ein paar mehr Anpassungen an deinem Layout erfordern.
      Erstmal so weit also.

      Ich hoffe, das war verständlich und hat dir weitergeholfen. 🙂

      Liebe Grüße
      Anne

      Antworten

  21. Pingback: HTML & CSS - so kannst du jetzt loslegen | Bloghexe

  22. Pingback: Blogger ABC: Hilfe für Blogger, hier bekommt ihr Antworten auf eure Fragen - Floral Heart

  23. Kea

    Uiuiuiui, da hast du aber ganz schön viel Licht ins Dunkel gebracht 🙂 Um diese Themen drücke ich mich ja meistens *grins* Ich danke dir, dass du mit diesem informativen Artikel bei meiner April-Link-Party dabei warst! Vielleicht hast du im Mai wieder Lust, mitzumachen und einen Beitrag aus dem letzten Jahr zu zeigen? Die Partys werden in Zukunft immer ab dem 15. zur Monatsmitte stattfinden 🙂 Liebe Grüße! Kea

    Antworten

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen