Die Grundlagen von HTML und CSS einfach erklärt

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:

Eine 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 vom Landleben nämlich in etwa so aus:

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

34 Kommentare

  1. Endlich erklärt das mal jemand auf einfache, verständliche Weise – danke!

  2. dörky sagt:

    Einfach und verständlich für Einsteiger erklärt. Wenn ich noch daran denke wie ich mit HTML anfing und selfhtml als einzigen HILFEPUNKT hatte.
    Super!!!

  3. 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/

  4. Ines sagt:

    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

    • Anne sagt:

      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.

  5. Dings sagt:

    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!

  6. Heike sagt:

    Supercool – Dankeschön 🙂

  7. Alexandra sagt:

    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 🙂

  8. Carolin sagt:

    Super informativ, danke dafür! 🙂 Ich kann zwar ein bisschen HTML & CSS, muss aber immer noch viel lernen und ständig googlen. 😀

  9. Sabine Woitelle sagt:

    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 🙂

    • Anne sagt:

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

  10. Sarah sagt:

    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

  11. 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

  12. Steffi sagt:

    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

  13. Linksammlung #2 | Chaosmacherin sagt:

    […] “HTML & CSS – die Grundlagen” Anne startet eine großartige Artikelreihe namens “Coding Love” auf ihrem Blog. […]

  14. Gwen sagt:

    Super Artikel! sehr anschaulich erklärt – ich freue mich schon sehr auf die anderen Themen!

  15. […] ersten Teil meiner Einführung in das Thema HTML & CSS hast du ja schon erfahren, wofür du die beiden […]

  16. Lisa sagt:

    Schön einfach und gut erklärt!
    Großes Lob dafür!

    Liebe Grüße,
    Lisa

  17. Kim Peter sagt:

    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

  18. […] Grundlagen von HTML & CSS hast du ja bereits in Teil 1 und Teil 2 kennengelernt. Heute wird es konkreter – du erfährst, wie du Texte mit […]

  19. […] jetzt näher für den Zusammenhang zwischen CSS und HTML interessierst, dann lege ich dir diesen Artikel sehr ans […]

  20. caro sagt:

    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

    • Anne sagt:

      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

  21. […] ersten Teil meiner Einführung in das Thema HTML & CSS hast du ja schon erfahren, wofür du die beiden […]

  22. […] Absoluten Basics lernt ihr in der Blogreihe zum Thema HTML und CSS Grundlagen bei Neontrauma. Aber auch neben HTML findet ihr bei Anne jede Menge interessante Beiträge mit […]

  23. Kea sagt:

    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

Schreibe einen Kommentar

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

Ich freue mich über jeden ehrlichen Kommentar und gebe mein Bestes, alle Kommentare zeitnah zu beantworten!

Ein Hinweis an die Spam-Fraktion: Ich überprüfe die Kommentare vor dem Freischalten. Wer etwa scheinheilig fragt, ob wir einen Malerbetrieb empfehlen können, nur um selber einen ebensolchen als Link anzugeben - der kann sich seine Mühe sparen.