Programmierung

HTML und CSS: Die Grundlagen - Teil 1

Dies ist Teil 1 der Serie "HTML und CSS". In diesem und allen folgenden Artikeln beschäftigen wir uns mit den Grundlagen beider Sprachen und lernen gemeinsam alles notwendige um eigene, einfache Seiten mit HTML und CSS zu erstellen.

HTML und CSS: Die Grundlagen - Teil 1
Photo by Ben Griffiths on Unsplash
💡
Hinweis: Aufbauend auf diese Reihe, gibt es hier auch noch eine Serie zu PHP

Fast so alt wie das Internet selbst ist die Sprache HTML (=Hyper Text Markup Language). Ursprünglich entwickelt, um Forschungsergebnisse auszutauschen, bildet sie heute das Fundament, Gerüst und Dach des gesamten World Wide Webs.
Nicht viel später kam auch CSS (=Cascading Style Sheets) hinzu. Diese beiden Sprachen waren über viele Jahre hinweg die einzigen Werkzeuge um Websites zu gestalten und sind auch heute noch unverzichtbar im Alltag eines jeden Webentwicklers.
Diese Serie soll die Grundlagen von HTML und CSS vermitteln. Neben den technischen Hintergründen, werden wir hier gemeinsam alles notwendige erlernen um eigene, einfache Seiten mit HTML und CSS zu erstellen.

Das HTML-Vokabular

Wie in jeder Sprache, gibt es auch in HTML ein paar grundlegende Begriffe und Regeln an die man sich halten muss. Aber keine Angst, so viel ist es nicht!

Tags

HTML-Tags strukturieren Inhalte. Jeder Tag hat einen öffnenden (<tag>) und schließenden Teil (</tag>).

Ausnahme: Es gibt unäre Tags, welche nicht separat geschlossen werden müssen!
Beispiel: 

<img ...>

Der <img>- Tag muss nicht mit einem </img>-Tag geschlossen werden!

Wann ein Tag unär ist und wann er wieder geschlossen werden muss, kann man sich mit einer einfachen Faustregel herleiten:
Kann der Tag für sich stehen - wenn er beispielsweise ein Bild oder Absatz einfügt - muss man ihn nicht wieder schließen. Enthält er Inhalt - zum Beispiel einen Textabsatz - muss man ihn nach diesem wieder schließen.

💡
Hinweis: Hier findest du eine Liste aller HTML-Tags

Attribute

Attribute ergänzen Tags mit zusätzlichen Informationen
Beispiel:

<img src="bild.jpg" alt="Beispielbild">

<img>ist der eigentliche Tag, welcher ein Bild einfügt, jedoch muss dem Browser über src="..." noch der Pfad und über alt="..." ein Alternativtext mitgeteilt werden. Diese ergänzenden Informationen heißen "Attribute".

Aller Anfang ist schwer - das Grundgerüst

Jetzt, wo die grundlegenden Begriffe geklärt sind, können wir auch schon anfangen!
Das Tolle an HTML: Es braucht nicht viel, lediglich einen Browser und einen Editor.
Natürlich kannst du den im Betriebssystem vorinstallierten Texteditor verwenden, ich empfehle jedoch ein Programm mit grundlegenden Funktionen wie Syntax Highlighting und einer Dokumentenverwaltung. Geeignet sind hier beispielsweise Visual Studio Code oder, wer es für den Anfang doch lieber ein wenig simpler mag, Notepad++.
Jetzt wo wir beides auf unserem Rechner installiert und geöffnet haben, kann es auch schon los gehen.

💡
Hinweis: HTML-Dateien enden immer mit der Dateiendung ".html".

Bevor wir uns weiter in der Theorie verirren, schauen wir uns einfach mal ein einfaches Codebeispiel an. So oder so ähnlich ist fast jede HTML-Seite aufgebaut:

<!DOCTYPE html>
<html lang="de">
  <head>
    <title> Seitentitel </title>
    <meta charset="utf-8">
	</head>
	<body>
      <h1> Meine erste Überschrift </h1>
      <p> Dies ist mein erster Absatz! </p>
      <p> Hallo Welt! </p>
    </body>
</html>

Erklärung:

  • <!DOCTYPE html>: Sagt dem Browser, dass es sich um ein HTML-Dokument handelt
  • <html lang="de">...</html>: Zwischen diesen Tags steht HTML-Code, das Attribut lang="de" legt fest, dass der Inhalt der Seite auf Deutsch ist
  • <head>...</head>: Im Kopf, oder "head" stehen Metadaten (=Daten über Daten) über die Seite, diese werden im Normalfall nicht auf der Seite selbst angezeigt.
    Im head steht oft:
    • Der Titel der Seite (<title>...</title>)
    • Die Kodierung (<meta charset="utf-8">)
    • Style (<style>...</style>)
    • Skripte (<script>...</script>)
    • ...
  • <title>...</title>: Definiert den Titel der Seite, dieser wird in den meisten Fällen im Browsertab angezeigt
  • <meta charset="utf-8">: Teilt dem Browser mit, dass die Zeichenkodierung "UTF-8" verwendet wird
  • <body>...</body>: Im Body oder Körper ist der eigentliche Inhalt der Seite zu finden
  • <h1>...</h1>: Dies ist eine Überschrift, mehr dazu in Teil 2
  • <p>...</p>: das <p>-Tag definiert einen Textabsatz, mehr dazu in Teil 2

Praxis

Nach diesem Artikel solltest du das nötige Wissen besitzen um deine erste Website zu erstellen:

📝
Übung 1
1) Erstelle einen Projektordner auf deinem Rechner
2) Erstelle in diesem Ordner einen weiteren Ordner mit dem Namen "Uebung_1"
3) In diesem Ordner erstellst du eine Datei mit dem Namen "index.html"
4) Öffne die "index.html"-Datei im Editor deiner Wahl
5) Tippe das Code-Beispiel von oben ab
Wichtig! Tippe es wirklich ab! Man lernt und versteht etwas am besten, indem man es selbst macht und nicht einfach nur etwas kopiert!
6) Speichere das Dokument
7) Öffne die "index.html"-Datei in deinem Browser
8) Glückwunsch! Gerade hast du deine erste Website erstellt!
HTML und CSS: Erste Inhalte - Teil 2
Im 2. Teil unserer HTML / CSS Serie soll es um die wichtigsten HTML-Elemente wie Überschriften, Absätze und Listen gehen und wie du diese gezielt einsetzen kannst.
Debug Diary - IT-Sicherheit, Datenschutz und ProgrammierungHannes Heindl

Du kannst es kaum erwarten mehr über HTML und CSS zu erfahren? Hier geht es zu Teil 2 unserer Serie!

Read next