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.

Debug Diary - IT-Sicherheit, Datenschutz und ProgrammierungHannes Heindl

Im ersten Teil dieser Reihe haben wir uns bereits mit der grundlegenden Struktur einer HTML-Seite auseinandergesetzt. In der darauffolgenden Übung hast du sogar schon eine erste eigene Website erstellt - zugegeben, kein Meisterstück des Webdesigns, aber jede und jeder fängt mal klein an.

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.

Überschriften

Genau wie in Textverarbeitungsprogrammen, gibt es auch in HTML verschiedene Überschriften. Diese können als Titel oder Untertitel fungieren.
Überschriften werden in HTML durch das <h[x]>...</h[x]>-Tag markiert, wobei [x]für eine Zahl zwischen 1 und 6 steht. Wie auch beispielsweise in Word, werden die Überschriften kleiner, je höher die Zahl wird.

Beispiel:

<h1>Ich bin ein h1 </h1>  
<h2>Ich bin ein h2 </h2>  
<h3>Ich bin ein h3 </h3>  
<h4>Ich bin ein h4 </h4>  
<h5>Ich bin ein h5 </h5>  
<h6>Ich bin ein h6 </h6>

Diese Überschriften werden (je nach Browser) wie folgt dargestellt:

Ich bin ein h1

Ich bin ein h2

Ich bin ein h3

Ich bin ein h4

Ich bin ein h5

Ich bin ein h6

Absätze

In HTML werden Absätze mit dem <p>-Tag gekennzeichnet. Absätze beginnen immer in einer neuen Zeile, Browser fügen vor und nach diesen automatisch etwas Leerraum (Rand) ein.

Beispiel:

<p>Das hier ist ein Absatz.</p>  
<p>Ich bin ein weiterer Absatz.</p>

Wie HTML im Browser angezeigt wird

Auch wenn es verlockend scheint, kann man die Darstellung des eingegebenen Textes in Absätzen nicht ohne weiteres durch das Einfügen zusätzlicher Leerzeichen oder Zeilen im HTML-Code verändern.
Der Browser entfernt beim Anzeigen der Seite automatisch alle überflüssigen Leerzeichen und Zeilen.

Beispiel:

<p>  
Hier stehen  
viele Zeilen  
im Quelltext,  
die der Browser
ignoriert!
</p>  
  
<p>  
Hier   
stehen                ein Haufen Leerzeichen,  
welche        auch      ignoriert
werden!
</p>

Dieser Code wird wie folgt angezeigt:

Hier stehen viele Zeilen im Quelltext, die der Browser ignoriert!

Hier stehen ein Haufen Leerzeichen, welche auch ignoriert werden!

Zeilenumbrüche

Die Lösung für das oben genannte Problem? Zeilenumbrüche!
Mit dem HTML-Tag <br> fügt man einen Zeilenumbruch ein, ohne einen neuen Absatz beginnen zu müssen.

Beispiel:

<p> Ab hier folgt eine neue Zeile:<br> Und ich bin auch schon die neue Zeile! </p>

Eine Alternative: Das <pre>-Element

Möchte man alternativ vorformatierten Text einfügen, kann man auch den <pre>-Tag verwenden. Text innerhalb dieses Tags behält sowohl Leerzeichen als auch Zeilenumbrüche bei.
Besonders praktisch ist dies beispielsweise bei Code-Blöcken oder Gedichten.

Beispiel:

<pre>
Ich bin ein Gedicht
Hier kommt ein Absatz
Sonst verstehst du mich nicht!
</pre>

Dieser Code wird vom Browser wie folgt wiedergegeben:

Ich bin ein Gedicht
Hier kommt ein Absatz
Sonst verstehst du mich nicht!

Listen

Daten lassen sich geordnet mithilfe von HTML am besten auf zwei verschiedene Arten darstellen: Tabellen und Listen.
Tabellen sind leider weder barrierefrei, noch sind sie besonders Benutzerfreundlich im Sinne des modernen Webdesigns, weshalb sie hier nicht weiter behandelt werden. (Möchtest du trotzdem mehr über Tabellen erfahren, unter gewissen Umständen können sie nämlich dennoch nützlich oder sogar notwendig sein, findest du hier einen ausgezeichneten Artikel.)

In HTML gibt es primär zwei, beziehungsweise 3 Arten von Listen:

• Die geordnete Liste
• Die ungeordnete Liste
• Sonderfall: Die Definitionsliste

Die ungeordnete Liste

Ungeordnete Listen werden nicht nummeriert, werden also (je nach Browser) mit einem Punkt oder einem Strich dargestellt. Sie werden mit einem <ul>-Tag definiert.
Einzelne Listenelemente stehen dann zwischen <li>...</li>-Tags.

Beispiel:

<p>Einkaufsliste</p>
<ul>
  <li>Kaffee</li>
  <li>Hafermilch</li>
  <li>Cornflakes</li>
  <li>Snacks</li>
</ul>

Die oben genannte Liste wird im Browser wie folgt dargestellt:

Einkaufsliste

• Kaffee
• Hafermilch
• Cornflakes
• Snacks

Die geordnete Liste

Im Gegensatz zur ungeordneten Liste, wird die geordnete Liste durchnummeriert. Sie wird mit einem <ol>-Tag gekennzeichnet. Wie bereits bei der ungeordneten Liste stehen die einzelnen Einträge zwischen den <li>...</li>-Tags.

Beispiel:

<p>Einkaufsliste</p>
<ol>
  <li>Kaffe</li>
  <li>Hafermilch</li>
  <li>Cornflakes</li>
  <li>Snacks</li>
</ol>

Die oben genannte Liste wird im Browser wie folgt dargestellt:

Einkaufsliste

1. Kaffe
2. Hafermilch
3. Cornflakes
4. Snacks

Die Definitionsliste

Die Definitionsliste (engl. "description list", früher auch "definition list") ist ähnlich aufgebaut wie die geordnete und ungeordnete Liste, ermöglicht es allerdings, jedem Listeneintrag eine kurze Erklärung oder Definition anzufügen.

Gekennzeichnet wird die Definitionsliste mit dem <dl>-Tag. Ein Eintrag steht zwischen <dt>...</dt>- (definition term), dessen Beschreibung zwischen <dd>...</dd>-Tags (definition description).

Beispiel:

<dl>
  <dt>Tags </dt>
  <dd>Strukturieren Inhalt</dd>
  <dd>Werden geöffnet und geschlossen</dd>
</dl>

Diese Definitionsliste wird im Browser wie folgt dargestellt:

Tags

Strukturieren Inhalt

Werden geöffnet und geschlossen

Bilder

Eine Website ohne Bilder sieht meistens ziemlich traurig aus. Möchtest du also ein Bild in deine Website einbinden, kannst du dies mit dem <img>-Tag.

Um dem Browser den Pfad zum Bild mitzuteilen, wird der <img>-Tag dann noch um das Attribut src="..." ergänzt.
Um die Seite weiterhin barrierefrei zu halten und im Falle von Ladeproblemen eine Alternative zum Bild anzeigen zu können, ist es sinnvoll, außerdem noch ein alt="..."-Attribut mit einem Alternativtext zu ergänzen.

Beispiel:

<img src="Pfad" alt="Alternatetext">

Pfade in HTML

Um den Pfad hinter src= korrekt anzugeben, sind in HTML ein paar Kleinigkeiten zu beachten.
Das wichtigste zuerst: Während unter beispielsweise Windows in Pfaden ein Backslash (\) verwendet wird, verwendet man in HTML bei der Angabe von Pfaden einen Schrägstrich bzw. Slash (/).

Absolute- und relative Pfade

Absolute Pfade

• Geben immer den gesamten Pfad an
• Beginnen entweder mit einem Protokoll (meist http:// oder https://) oder, wenn der Link auf eine Datei auf dem Server verweist, mit einem / für Root.

Beispiel:

<img src="https://blog.debugdiary.de/content/images/2025/01/image-Edited.png" alt="Debug Diary Logo">

Relative Pfade

• Beziehen sich auf einen Speicherort im Verzeichnis (auf dem Server oder Rechner selbst)

Beispiel:

<img src="/content/images/2025/01/image-Edited.png" alt="Debug Diary Logo">

• Möchte man in einem relativen Pfad nicht auf eine Datei im eigenen Verzeichnis oder einen Unterordner, sondern auf einen Ordner eine Ebene höher verweisen, kann man mit ../ aus dem aktuellen Ordner, in dem sich die Datei befindet "heraus gehen".

Beispiel:

<img src="../../image-Edite.png" alt="Debug Diary Logo">

Mehr Informationen über die Ordnerstruktur und Pfade in HTML findest du hier.

Links

Links ermöglichen es auf ein anderes Dokument zu springen. Dies kann entweder eine eigene (Unter-)Seite, oder eine andere Website sein.

Ein Hyperlink wird mit dem <a>-Tag definiert. Das href-Attribut gibt das Ziel des Links an. Der anzuzeigende Text, bzw. das anzuzeigende HTML-Element steht dann zwischen dem öffnenden (<a>) und schließenden (</a>) Tag.

Beispiele:

Ein Link in Textform:

<a href="https://blog.debugdiary.de/"> Hallo, ich bin ein Link </a>

Anzeige:

Ein Link in Bildform

<a href="https://blog.debugdiary.de/"> 
  <img src="https://blog.debugdiary.de/content/images/2025/01/image-Edited.png" alt="Debug Diary Logo">
</a>

Anzeige:

Praxis

Das war jetzt ein Haufen auf einmal, aber mit ein bisschen Übung, hat man dieses Wissen schnell verinnerlicht.
Mit dieser Übung, sollte das kein Problem sein:

Beispiel für eine mögliche Lösung

<!DOCTYPE html>
<html lang="de">
  <head>
    <title> Nudeln </title>
    <meta charset="utf-8">
	</head>
	<body>
      <h1> Nudeln </h1>
      <h2> Einführung </h2>
      <p> Nudeln sind sehr toll!<br> Sie sind billig, man kann sie in jeder erdenklichen Form essen und sie schmecken einfach immer gut! <br> Ich mag Nudeln.</p>
      <h2>Ein Gedicht über Nudeln</h2>
      <pre>
        Nudeln kannst du essen warm.
        Nudeln kannst du essen kalt.
      </pre>
      <h2>Fakten über Nudeln</h2>
      <ul>
        <li>Nudeln bestehen meist aus Hartweizen und Wasser</li>
        <li>Die längste Nudel der Welt war über 3 km lang</li>
        <li>Nudeln gibt es frisch oder getrocknet</li>
        <li>Italiener essen durchschnittlich 23 kg Nudeln pro Jahr</li>
      </ul>
      <h2>Mehr über Nudeln</h2>
      <a href="https://de.wikipedia.org/wiki/Nudel_(Lebensmittel)">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/63/Nudeln_trocken_makro.jpg" alt="Bild mit Nudeln">
      </a>
    </body>
</html>

Fazit

In diesem Teil unserer HTML/CSS-Serie hast du die wichtigsten HTML-Elemente kennengelernt. Du bist mittlerweile in der Lage einfache Websites mit HTML zu erstellen, Bilder, Links und verschiedenste Listen einzufügen und Text grundlegend zu formatieren.

Im nächsten Teil werden wir uns gemeinsam mit komplexeren HTML-Elementen wie Formularen auseinandersetzen und anschließend in das Design von Websites mit CSS eintauchen.

Teil 1 - PHP Made Simple: Grundwissen

PHP, seit 1995 eine führende Websprache, punktet mit einfacher Syntax und starker Datenbankintegration. Ideal für Anfänger und kleinere Projekte, bleibt es trotz moderner Konkurrenz wie Node.js durch Updates in PHP 7 und 8 leistungsfähig und relevant.

Debug Diary - IT-Sicherheit, Datenschutz und ProgrammierungBerkay Can