Für ein kostenloses Beratungsgespräch: 0221 298 012 63 info@njoy‑online‑marketing.de
  • Kostenlose Webinar-Teilnahme
  • Renommierte & ausgezeichnete Agentur
  • Umfangreiches Fachwissen & Experten-Tipps
Für ein kostenloses Beratungsgespräch: 0221 298 012 63 info@njoy‑online‑marketing.de
  • Kostenlose Webinar-Teilnahme
  • Renommierte & ausgezeichnete Agentur
  • Umfangreiches Fachwissen & Experten-Tipps

HTML5 und CSS3 für Einsteiger: Die Grundlagen des Webdesigns

Lesezeit 8 Min | njoy | njoy online marketingAutor njoy online marketing

Möchtest du das Webdesign kennenlernen und wissen, wie du deine eigenen Webseiten gestalten kannst? Dann bist du hier genau richtig! In diesem umfassenden Blogbeitrag werden wir die Grundlagen von HTML5 und CSS3 für Einsteiger ausführlich erkunden. Es sind keine Vorkenntnisse erforderlich – wir beginnen von Grund auf.

HTML5: Die Struktur des Webs

HTML ist die Abkürzung für „Hypertext Markup Language“ und bildet das unverzichtbare Grundgerüst des World Wide Web. Es ist die Sprache, die Webentwickler verwenden, um die Struktur und den Inhalt von Webseiten zu definieren. Mit der Einführung von HTML5 hat sich das Webdesign grundlegend gewandelt und es sind viele aufregende Verbesserungen und Funktionen hinzugekommen, die die Art und Weise, wie wir Webinhalte erstellen, revolutioniert haben.

HTML5 geht über seine Vorgängerversionen hinaus, indem es eine breite Palette von neuen Elementen und Funktionen einführt, die das Erstellen von Webseiten effizienter und leistungsfähiger machen. Diese neuen Möglichkeiten reichen von Multimedia-Integration bis zur Verbesserung der semantischen Strukturierung von Inhalten.

Gehen wir nun genauer auf die Grundlagen von HTML5 ein und finden heraus, wie du diese Markup-Sprache nutzen kannst, um beeindruckende Webseiten zu erstellen.

Die Grundstruktur

Lass uns zuerst einen Blick auf die grundlegende Struktur einer HTML5-Seite werfen. Diese besteht aus verschiedenen Elementen, die zusammenarbeiten, um eine voll funktionsfähige Webseite zu erstellen:

Du vermisst einen KPI in deiner Statistik? Klicke auf den Button „Spalten“. Dort kannst du Spalten hinzufügen, entfernen oder die Reihenfolge der angezeigten Spalten verändern.

SEA KPIs sind nur dann aussagekräftig, wenn deine Kampagne bereits aktiv war und dadurch Daten gesammelt hat. Ansonsten werden in einigen Feldern eine 0 oder ein Minus angezeigt.

HTML Grundgerüst Screenshot

<!DOCTYPE html>: Dies ist die erste Zeile deiner HTML5-Seite und definiert die HTML-Version, die du verwendest. Mit signalisierst du dem Browser, dass es sich um HTML5 handelt, die neueste Version der Sprache.

<html>: Das <html>-Element ist das Wurzelelement deiner Seite und enthält den gesamten Inhalt. Alle anderen Elemente werden in diesem Element verschachtelt.

<head>: Das <head>-Element enthält Meta-Informationen über deine Seite, die für den Browser und Suchmaschinen wichtig sind. Hier befindet sich auch der Titel deiner Webseite, der im Browser-Tab angezeigt wird und eine Verlinkung zu einem oder mehreren Stylesheets.

<title>: Das <title>-Element innerhalb des <head>-Elements enthält den Titel deiner Webseite. Dieser Titel wird im Browser-Tab angezeigt und ist wichtig für die Identifikation deiner Seite.

<link>: Das <link>-Element innerhalb des <head>-Elements wird verwendet, um externe CSS-Dateien in deine HTML-Seite zu integrieren.

    • rel=“stylesheet“: Dieses Attribut gibt an, dass die verlinkte Datei eine Stylesheet-Datei ist, die das Aussehen der Seite definiert.
    • type=“text/css“: Hiermit wird der Dateityp des verlinkten Dokuments angegeben, was in diesem Fall eine CSS-Datei ist.
    • href=“styles.css“: Dies ist der Pfad zur externen CSS-Datei. Du solltest den Pfad entsprechend anpassen, um auf deine eigene CSS-Datei zu verweisen.
 

<body>: Das-Element enthält Meta-Informationen über deine Seite, die für den Browser und Suchmaschinen wichtig sind. Hier befindet sich auch der Titel deiner Webseite, der im Browser-Tab angezeigt wird und eine Verlinkung zu einem oder mehreren Stylesheets.

Mit dieser klaren Struktur legst du den Rahmen für deine Webseite fest und sorgst dafür, dass sie korrekt gerendert und interpretiert wird. Die Elemente innerhalb des <head> sind zwar für Besucher unsichtbar, spielen aber eine entscheidende Rolle für Suchmaschinenoptimierung und die korrekte Anzeige deiner Webseite. Vor allem die Verknüpfung von CSS-Dateien (auch Stylesheets genannt) hilft dir dabei, die Inhalte der Seite von der Darstellung zu trennen. Das optimiert die Ladezeit und macht das Ganze auch deutlich übersichtlicher.

Jetzt kostenlosen Usability- & Conversion Check sichern!
Einfach Ansprechpartner und URL hier einsenden

Aufbau von HTML-Elementen

HTML verwendet Tags, um den Inhalt einer Webseite zu strukturieren und zu kennzeichnen. Jedes HTML-Element besteht aus folgenden Teilen:

Öffnungs-Tag (<tag>)

Der Anfang eines HTML-Elements wird durch den Öffnungs-Tag definiert. Er gibt an, um welche Art von Element es sich handelt.

Inhalt

Der Inhalt eines HTML-Elements enthält den eigentlichen Text oder die Informationen, die auf der Webseite angezeigt werden sollen. Dieser Text oder Inhalt wird zwischen dem Öffnungs-Tag und dem schließenden Tag platziert.

Schließender Tag (</tag>)

Der schließende Tag markiert das Ende des HTML-Elements und gibt an, dass der Inhalt abgeschlossen ist. Der schließende Tag enthält denselben Tag-Namen wie der Öffnungs-Tag, jedoch mit einem zusätzlichen Schrägstrich („/“) vor dem Tag-Namen, um anzuzeigen, dass es sich um einen schließenden Tag handelt.

Self-Closing-Tags

Einige HTML-Elemente benötigen keine schließenden Tags, da sie entweder keinen Inhalt haben oder der Inhalt implizit geschlossen wird.

Beispiele dafür sind <img>, <br> oder auch <link>.

Kommentare

Kommentare ermöglichen es, Text innerhalb des HTML-Codes zu hinterlassen, der vom Browser ignoriert wird. Kommentare sind nützlich, um Notizen für Entwickler zu hinterlassen oder bestimmte Teile des Codes vorübergehend auszublenden.

Überschriften und Absätze

In HTML5 sind Überschriften und Absätze fundamentale Elemente, die dir helfen, deinen Text inhaltlich zu strukturieren und zu formatieren. Diese Elemente tragen zur Lesbarkeit deiner Webseite bei und sind entscheidend für Suchmaschinenoptimierung (SEO) und die Benutzererfahrung.

Überschriften (<h1>-<h6>)

Überschriften werden verwendet, um Textabschnitte in deinem Dokument hervorzuheben und ihre Hierarchie darzustellen. HTML5 bietet verschiedene Überschriften-Tags, die von <h1> (die höchste Hierarchie) bis <h6> (die niedrigste Hierarchie) reichen. Hier ein Beispiel dazu:

Überschriften sind nicht nur visuell hervorgehoben, sondern tragen auch dazu bei, den Inhalt für Suchmaschinen zu strukturieren. Suchmaschinen erkennen, dass <h1> eine wichtigere Überschrift ist als <h2> usw. Verwende Überschriften sorgfältig, um die Hierarchie deiner Informationen deutlich zu machen und die Lesbarkeit zu verbessern. Du solltest auch darauf achten, dass eine <h1> nur einmal pro Seite vorkommt. Das ist wichtig für die Suchmaschinenoptimierung und die Semantik der Seite. Auch um die Barrierefreiheit zu gewährleisten, sollte nur eine <h1> existieren. Sonst könnte es für Screenreader zu Navigations- und Verständnisproblemen kommen. <h2>- bis <h6>-Überschriften können übrigens beliebig oft verwendet werden. Achte nur darauf, dass du auch hier auf die Reihenfolge achtest.

Absätze (<p>)

Absätze ermöglichen es dir, Textabschnitte klar voneinander zu trennen und zu formatieren. Du kannst das <p>-Element verwenden, um Textpassagen zu erstellen:

HTML Absätze Screenshot

Absätze fügen automatisch einen vertikalen Abstand zwischen den Textabschnitten hinzu, um die Lesbarkeit zu verbessern. Wenn du mehrere Absätze verwendest, wird der Text auf deiner Webseite übersichtlicher und benutzerfreundlicher.

Überschriften und Absätze sind grundlegende Elemente in HTML, die dazu beitragen, den Inhalt deiner Webseite zu organisieren und für deine Besucher sowie Suchmaschinen verständlicher zu gestalten. Wenn du sie richtig einsetzt, trägst du erheblich zur Qualität deiner Webseite bei.

Listenelemente

In HTML gibt es zwei Hauptarten von Listen: ungeordnete (bulleted) und geordnete (numbered) Listen. Beide Arten von Listen ermöglichen es dir, Informationen auf strukturierte und leicht verständliche Weise darzustellen. Lass uns genauer darauf eingehen:

Ungeordnete Listen (<ul>)

Ungeordnete Listen werden verwendet, um eine Sammlung von Elementen oder Punkten darzustellen, die keine spezifische Reihenfolge besitzen. Jeder Punkt in einer ungeordneten Liste wird normalerweise mit einem Aufzählungszeichen, wie einem kleinen Punkt oder einem Kreis, gekennzeichnet.

Beispiel einer ungeordneten Liste Screenshot

In diesem Beispiel wird eine <ul>-Liste erstellt, die drei Punkte enthält. Jeder Punkt wird mit <li> (List-Item) gekennzeichnet. Die Darstellung der Aufzählungszeichen (zum Beispiel Punkte oder Kreise) erfolgt automatisch durch den Browser.

Geordnete Listen (<ol>)

Geordnete Listen werden verwendet, wenn die Reihenfolge der Elemente oder Punkte wichtig ist. Anders als bei ungeordneten Listen wird in einer geordneten Liste jeder Punkt normalerweise mit einer aufsteigenden Nummer gekennzeichnet.

In diesem Beispiel wird eine <ol>-Liste erstellt, die ebenfalls drei Punkte enthält. Jeder Punkt wird erneut mit <li> gekennzeichnet. Die Nummerierung erfolgt automatisch und in aufsteigender Reihenfolge.

Screenshot geordnete Liste HTML

Verschachtelte Listen

Du kannst auch verschachtelte Listen erstellen, indem du eine Liste innerhalb einer anderen Liste platzierst. Das ist besonders nützlich, wenn du Unterpunkte oder Unterebenen in deiner Liste darstellen möchtest.

In diesem Beispiel ist eine ungeordnete Liste mit einem Unterpunkt unter dem zweiten Punkt verschachtelt.

Listen sind ein leistungsstarkes Mittel, um Informationen strukturiert darzustellen. Sie werden häufig für Navigationselemente, Schritt-für-Schritt-Anleitungen, Produktmerkmale und vieles mehr verwendet. Du kannst Listen auch mit CSS gestalten, um das Aussehen und die Anordnung deiner Listenpunkte weiter anzupassen.

Insgesamt bieten HTML-Listen eine effektive Möglichkeit, Inhalte auf deiner Webseite zu organisieren und zu präsentieren, indem sie eine klare und gut lesbare Struktur schaffen.

CSS3: Das Aussehen der Webseite gestalten

HTML definiert die Struktur und den Inhalt einer Webseite, aber CSS (Cascading Style Sheets) ist das Werkzeug, mit dem du das Aussehen und die Formatierung deiner Webseite steuern kannst. CSS3, die neueste Version von CSS, bietet eine Vielzahl von Möglichkeiten, um das Design deiner Webseite zu verbessern und an deine gestalterischen Vorstellungen anzupassen. Lernen wir zunächst die Grundfaktoren von CSS kennen:

Selektoren und Deklarationen

In CSS3 definierst du Stilregeln mithilfe von Selektoren und Deklarationen. Ein Selektor wählt das HTML-Element aus, auf das die Stilregel angewendet werden soll, und die Deklarationen legen die gewünschten Stileigenschaften fest. Die dem Selektor zugehörigen Deklarationen werden durch geschweifte Klammern eröffnet („{“) und geschlossen („}“).

Selektoren

Wie bereits erwähnt, definieren Selektoren, auf welche HTML-Elemente die Stilregeln angewendet werden sollen. Es gibt verschiedene Arten von Selektoren, die unterschiedliche Teile der HTML-Struktur ansprechen können. Listen wir die gängigsten Selektoren in CSS3 auf:

Elementselektoren

Elementselektoren wählen alle Instanzen eines bestimmten HTML-Elements aus. Zum Beispiel wählt der Selektor „p“ alle Absätze auf einer Seite aus.

Das kann zum einen sinnvoll sein, wenn du beispielsweise eine globale Schriftart oder Schriftgröße definieren möchtest.

Klassenselektoren

Klassenselektoren wählen HTML-Elemente aus, die ein bestimmtes „class“-Attribut besitzen.

„class“-Attribute nutzt man, um fest zu definieren, welche HTML-Elemente angesprochen werden sollen. Im Gegensatz zum Elementselektor wirkt sich der Klassenselektor wirklich nur auf alle Elemente aus, die das definierte „class“-Attribut besitzen.

Im Stylesheet sprichst du Klassenselektoren mit „.“ an.

Beispiel: Die HTML-Klasse „highlight“ wird mit „.highlight“ angesprochen.

ID-Selektoren

ID-Selektoren wählen ein einziges HTML-Element aus, das ein bestimmtes „id“-Attribut besitzt.

Achte bei ID-Selektoren darauf, dass diese wirklich nur ein einziges Mal vergeben werden können. Das ist auch der Haupt-Unterschied zu Klassenselektoren.

Im Stylesheet sprichst du ID-Selektoren mit „#“ an.

Beispiel: Die HTML-ID „header“ wird mit „#header“ angesprochen.

Nachbarschafts- und Kindselektoren

Mit Nachbarschafts- und Kindselektoren kannst du spezifische Beziehungen zwischen Elementen auswählen.

Zum Beispiel wählt der Selektor „ul li“ alle „li“-Elemente innerhalb eines „ul“-Elementes aus.

Deklarationen

Deklarationen in CSS3 legen die gewünschten Stileigenschaften für ausgewählte HTML-Elemente fest. Jede Deklaration besteht aus einer Eigenschaft und einem Wert, die durch einen Doppelpunkt getrennt sind. Mehrere Deklarationen werden durch Semikolons voneinander getrennt.

In diesem Beispiel gibt es drei Deklarationen:

1. color: red; ändert die Textfarbe auf Rot.
2. background-color: yellow; ändert die Hintergrundfarbe auf Gelb.
3. font-size: 18px; ändert die Schriftgröße auf 18 Pixel.

Die Kombination von Selektoren und Deklarationen ermöglicht es dir, spezifische Stilregeln für verschiedene Teile deiner Webseite festzulegen. Du kannst auch mehrere Stilregeln in einer CSS-Datei zusammenfassen, um das Styling deiner gesamten Webseite zu organisieren.

Keine wichtigen News mehr verpassen
Dank aktuellen Infos der Konkurrenz voraus: Abonniere noch heute unseren kostenlosen Newsletter zum Fachexpertenblog und bleib immer up to date

Fazit:

HTML5 und CSS3 sind die Grundlagen des Webdesigns. Mit diesen einfachen Konzepten kannst du bereits eine grundlegende Webseite erstellen und gestalten. Wenn du mehr über Webentwicklung erfahren möchtest, gibt es viele Ressourcen und Tutorials online.

Nicht vergessen, im oberen Drittel dieses Beitrags bieten wir dir einen kostenlosen Check für deine Webseite an. Im unteren Drittel kannst du dich für unseren Newsletter anmelden, um weitere Tipps und Informationen zu erhalten. So bleibst du – fast wie von Zauberhand – stetig auf dem neuesten Stand.

Wir hoffen, dieser Einsteigerleitfaden war hilfreich für dich! Wenn du Fragen hast oder weitere Informationen benötigst, helfen wir dir gerne in einem individuellen Beratungsgespräch weiter. Wir bieten dir sowohl Website Pakete als auch Website Optimierung. Sprich uns einfach an.

Mach jetzt den ersten Schritt

Nutze unser Kontaktformular

…oder kontaktiere uns direkt!

Kontaktaufnahme Angela Selbert

Deine Ansprechpartnerin

Angela Selbert

Tel.: 0221 298 012 63

Mail.: info@njoy-online-marketing.de

Wir sind für dich da

Montag – Freitag

von 9:00 bis 18:00 Uhr

Anschrift

Hohenstaufenring 62

50674 Köln

njoy online marketing GmbH hat 4,90 von 5 Sternen 134 Bewertungen auf ProvenExpert.com