Erfahre mehr über die Erstellung von Websites mit HTML und CSS.

Weißt du, wie eine Web-Seite erstellt wird? Um eine Web-Seite anzeigen zu können, liest und interpretiert dein Webbrowser eine Reihe von Anweisungen. Diese Anweisungen werden meist in zwei Sprachen verfasst: HTML und CSS.

Die Standards bzw. Spezifikationen für diese Sprachen werden vom World Wide Web Consortium (W3C) festgelegt. Ein gutes Verständnis dieser Standards ist wichtig, um sicherzustellen, dass deine Web-Seiten von verschiedenen Browsern korrekt dargestellt werden. Dreamweaver bietet Funktionen, mit deren Hilfe du Web-Seiten entsprechend den aktuellen Web-Standards erstellen kannst. Im folgenden Artikel wird erläutert, welche Rollen HTML und CSS bei der Erstellung einer Web-Seite spielen und wie sie miteinander interagieren.

Abstrakte Illustration eines Wireframe-Prototyps mit miteinander verbundener Maschinerie

Was ist HTML?

Web-Seiten zeigen Inhalte an. Ihre Struktur wird in HTML definiert. Inhalte können Text, Bilder, Links oder auch Audio- und Videodateien sein. Die meisten HTML-Elemente werden mit einem öffnenden <element>-Tag und einem schließenden </element>-Tag verfasst, die dem Browser mitteilen, welche Inhaltstypen dargestellt werden sollen. Die Tags werden in einer speziellen Reihenfolge angegeben, die die Struktur der Web-Seite definiert. Im Beispiel unten sind drei häufige HTML-Elemente abgebildet.

  • <h1> beschreibt Überschriften und eignet sich gut für Seitentitel.
  • <p> beschreibt Absätze und eignet sich gut für Fließtext.
  • <img> zeigt ein Bild aus einer bestimmten Quelle (src) an.

Hinweis: Im Beispiel ist der HTML-Code in Großbuchstaben geschrieben, um das Prinzip klarer darzustellen. Üblicherweise wird HTML-Code aber in Kleinbuchstaben geschrieben. 

Darstellung von HTML-Quellcode (links) und gerenderter Web-Seite (rechts) zum Vergleich

Was ist CSS?

Über HTML wird die grundlegende Struktur einer Web-Seite definiert. Die gestalterischen Möglichkeiten sind jedoch begrenzt. Irgendwann möchtest du ja auch Farben hinzufügen, Text und Bilder formatieren oder Elemente auf der Web-Seite neu positionieren. CSS ist eine Sprache, die im Zusammenspiel mit HTML die Anwendung solcher Merkmale möglich macht. Mit CSS lassen sich ein oder mehrere HTML-Elemente mit zusätzlichen Anweisungen zu ihrer Darstellung versehen, z. B. zur Farbe oder Ausrichtung.

Das Beispiel unten zeigt, wie CSS eingesetzt wird, um das Erscheinungsbild der drei HTML-Elemente zu verändern.

  • h1 Die Überschrift ist zentriert.
  • p Der Absatztext ist rot, fett und zentriert.
  • img Das Bild wurde auf 150 x 100 Pixel skaliert.
Abbildung von HTML-Quellcode, CSS-Stilen und Web-Seite im Browser
03/25/2022

Beitrag von: Jonathan Petersen

War diese Seite hilfreich?