TUTORIAL-ARTIKEL

Anfänger

5 Min.

Anatomie einer Website.

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.

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 -Tag und einem schließenden -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.

  • beschreibt Überschriften und eignet sich gut für Seitentitel.

  • beschreibt Absätze und eignet sich gut für Fließtext.

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

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.


Beitrag Von

Jonathan Petersen

25. August 2022

Probiere diese Tutorials mit Dreamweaver aus

Moderne, responsive Web-Seiten gestalten