WMP Sites

HTML-Design: Grundlegendes, fortgeschrittene Techniken und Best Practices

Lukas Fuchs vor 7 Monaten in  Responsive Design 3 Minuten Lesedauer

Grundlegendes HTML: Syntax, Tags und Elemente

HTML (Hypertext Markup Language) ist die Standardsprache für die Erstellung von Webseiten. Es stellt die Struktur und den Inhalt einer Webseite dar und ermöglicht es dir, Text, Bilder, Videos und interaktive Elemente einzubinden.

Syntax

HTML verwendet eine einfache Syntax, die auf Tags basiert. Ein Tag besteht aus einem öffnenden Tag (z. B. <p>), dem eigentlichen Inhalt (z. B. "Hallo Welt!") und einem schließenden Tag (z. B. </p>). Der Schrägstrich im schließenden Tag gibt an, dass der Inhalt des Tags beendet ist.

Tags

Tags werden verwendet, um Elemente in einer Webseite zu definieren. Es gibt zwei Haupttypen von Tags:

  • Strukturelle Tags: Diese Tags definieren die grundlegende Struktur einer Webseite, wie z. B. <head>, <body> und <div>.
  • Inhaltstags: Diese Tags fügen Inhalt zu einer Webseite hinzu, wie z. B. <p> (Absatz), <img> (Bild) und <a> (Link).

Elemente

HTML-Elemente sind die Bausteine einer Webseite. Jedes Element wird durch ein startendes und ein endendes Tag definiert. Der Inhalt zwischen den Tags ist der Inhalt des Elements. Beispielsweise definiert das folgende Element einen Absatz mit dem Text "Hallo Welt!":

<p>Hallo Welt!</p>

Aufbau eines HTML-Dokuments

Um eine gültige HTML-Datei zu erstellen, musst du die grundlegende Struktur kennen. Hier ist ein typisches Layout:

HTML5-Doctype-Deklaration

<!DOCTYPE html>

Diese Deklaration weist den Browser an, dass es sich um ein HTML5-Dokument handelt.

<html> Element

<html>

Dieses Element ist der Stamm aller HTML-Elemente.

<head> Element

<head>

Im <head>-Element enthalten sind Metadaten wie der Titel, die Beschreibung und die Verknüpfungen zu CSS-Dateien.

<title> Element

<title>Titel der Seite</title>

Dieser Titel wird in der Titelleiste des Browsers angezeigt.

<meta> Elemente

<meta name="description" content="Beschreibung der Seite">
<meta name="keywords" content="Schlüsselwörter, der Seite">

Diese Elemente liefern Informationen über die Seite, die von Suchmaschinen und anderen Tools verwendet werden.

Verknüpfungen zu CSS-Dateien

<link rel="stylesheet" href="style.css">

Hiermit werden externe CSS-Dateien verknüpft, um die Darstellung zu steuern.

<body> Element

<body>

Im <body>-Element befindet sich der sichtbare Inhalt der Seite.

Formatierungselemente

Elemente wie Überschriften (<h1>, <h2>, etc.), Absätze (<p>), Listen (<ul>, <ol>), Links (<a>), Bilder (<img>) und Tabellen (<table>) werden im <body>-Element verwendet, um den Inhalt zu formatieren und zu organisieren.

<script> Elemente

<script src="script.js"></script>

Mit diesen Elementen werden externe JavaScript-Dateien geladen, die zusätzliche Funktionen hinzufügen.

Schließende Elemente

</body>
</html>

Diese Elemente schließen das Dokument ab und stellen sicher, dass die Verschachtelung korrekt ist.

Formatierung von Text, Bildern und Tabellen

In diesem Abschnitt erfährst du, wie du Texte, Bilder und Tabellen in deinen HTML-Dokumenten formatierst, um ansprechende und informative Webseiten zu erstellen.

Textformatierung

Verwende die folgenden HTML-Elemente, um Text auf deiner Webseite zu formatieren:

  • <h1> bis <h6>: Überschriften verschiedener Größen
  • <p>: Absatz
  • <strong>: Fettdruck
  • <em>: Kursivschrift
  • <ul> und <ol>: Aufzählungs- bzw. nummerierte Listen
  • <a>: Link

Bildformatierung

Um Bilder in deine Webseite einzubinden, verwende das <img>-Element. Lege die folgenden Attribute fest:

  • src: Pfad zur Bilddatei
  • alt: Alternativtext, der auf dem Bildschirm angezeigt wird, wenn das Bild nicht geladen werden kann
  • width und height: Breite und Höhe des Bildes

Tabellenformatierung

Tabellen werden mit dem <table>-Element erstellt. Zeilen und Spalten werden mit <tr> bzw. <th> definiert. Verwende die folgenden Attribute, um Tabellen zu formatieren:

  • border: Rahmenbreite der Tabelle
  • cellspacing: Abstand zwischen den Zellen
  • cellpadding: Abstand zwischen dem Zelleninhalt und dem Zellenrand

CSS und HTML: Trennung von Inhalt und Darstellung

Die Trennung von Inhalt und Darstellung ist ein Grundprinzip des Webdesigns und ein Eckpfeiler der modernen Webentwicklung. HTML definiert dabei die Struktur und den Inhalt einer Website, während CSS für die visuelle Gestaltung zuständig ist.

Was trennt CSS und HTML?

HTML-Tags beschreiben den Inhalt einer Website, z. B. Überschriften, Absätze, Bilder und Listen. CSS-Regeln definieren, wie dieser Inhalt angezeigt wird, z. B. Schriftart, Farbe, Ausrichtung und Layout.

Vorteile der Trennung

Die Trennung von Inhalt und Darstellung bietet mehrere Vorteile:

  • Flexibilität: Du kannst den Inhalt und das Erscheinungsbild einer Website unabhängig voneinander ändern, ohne die zugrunde liegende Struktur zu beeinträchtigen.
  • Wartbarkeit: Das Trennen von Inhalt und Stil erleichtert die Aktualisierung und Wartung der Website.
  • Barrierefreiheit: Die Trennung ermöglicht es, Websites für verschiedene Geräte und Bildschirmgrößen zugänglich zu machen.
  • Suchmaschinenoptimierung: Suchmaschinen priorisieren Websites, die CSS zur Stilisierung verwenden, da dies die Inhaltserkennung erleichtert.

Verwendung von CSS

Um CSS zu verwenden, fügst du den folgenden Code in den <head>-Abschnitt deines HTML-Dokuments ein:

<link rel="stylesheet" href="style.css">

Dies verknüpft deine HTML-Datei mit einer externen CSS-Datei mit dem Namen "style.css". Anschließend kannst du in dieser CSS-Datei Regeln definieren, um das Erscheinungsbild deiner Website anzupassen.

Best Practices für die Trennung

Um die Trennung von Inhalt und Darstellung effektiv zu nutzen, befolge diese Best Practices:

  • Vermeide die Verwendung von Inline-CSS in HTML-Tags.
  • Verwende keine HTML-Elemente für die Formatierung, z. B. <font> oder <center>.
  • Verwende semantische HTML-Tags zur Strukturierung des Inhalts, z. B. <h1> für Überschriften und <p> für Absätze.
  • Validiere deinen HTML- und CSS-Code mit Tools wie dem W3C Markup Validator und dem CSS Lint.

Responsive HTML-Design: Erstellen von Websites für verschiedene Geräte

Heutzutage greifen Nutzer über eine Vielzahl von Geräten auf das Internet zu, darunter Desktops, Laptops, Tablets und Smartphones. Es ist daher unerlässlich, Websites zu erstellen, die auf allen diesen Geräten optimal dargestellt werden. Responsive HTML-Design ist eine Technik, die es ermöglicht, Websites zu erstellen, die sich automatisch an die Größe des Browserfensters anpassen.

Vorteile des Responsive HTML-Designs

Es gibt zahlreiche Vorteile der Verwendung von responsivem HTML-Design, darunter:

  • Verbesserte Benutzerfreundlichkeit: Websites, die auf allen Geräten gut funktionieren, bieten eine bessere Benutzererfahrung, was zu einer höheren Nutzerzufriedenheit führt.
  • Erhöhte Konversionsraten: Studien haben gezeigt, dass Websites mit responsivem Design höhere Konversionsraten aufweisen.
  • Vereinfachte Verwaltung: Es ist viel einfacher, eine einzige responsive Website zu verwalten, als mehrere Websites für verschiedene Geräte zu pflegen.

Grundlagen des responsiven HTML-Designs

Responsive HTML-Design basiert auf den folgenden Prinzipien:

  • Flexible Layouts: Die Website passt ihre Größe und ihr Layout an die Größe des Browserfensters an.
  • Medienabfragen: Medienabfragen werden verwendet, um Stilregeln für verschiedene Bildschirmgrößen zu definieren.
  • Viewport-Meta-Tag: Das viewport-Meta-Tag weist den Browser an, die Website an die Breite des Geräts anzupassen.

Erstellen einer responsiven HTML-Website

Um eine responsive HTML-Website zu erstellen, musst du:

  • Ein flexibles Layout verwenden: Verwende ein Raster- oder Flexbox-Layout, das sich an die Größe des Browserfensters anpasst.
  • Medienabfragen hinzufügen: Definiere Medienabfragen, um Stilregeln für verschiedene Bildschirmgrößen festzulegen.
  • Das viewport-Meta-Tag verwenden: Füge das viewport-Meta-Tag zum <head>-Abschnitt deines HTML-Dokuments hinzu.

Tools und Ressourcen für responsives HTML-Design

Es gibt eine Reihe von Tools und Ressourcen, die dir bei der Erstellung responsiver HTML-Websites helfen, darunter:

  • Bootstrap: Ein beliebtes CSS-Framework, das responsive Layouts und Komponenten bietet.
  • Foundation: Ein weiteres beliebtes CSS-Framework, das für responsive Design optimiert ist.
  • Skeleton: Ein leichtgewichtiges CSS-Framework, das sich auf responsives Design konzentriert.

Best Practices für responsives HTML-Design

Stelle beim Erstellen einer responsiven HTML-Website sicher, dass du die folgenden Best Practices befolgst:

  • Verwende relative Maßeinheiten: Verwende Prozentwerte oder em-Einheiten anstelle von Pixeln, um die Flexibilität zu gewährleisten.
  • Optimiere für Geschwindigkeit: Stelle sicher, dass deine Website auf allen Geräten schnell lädt.
  • Teste auf verschiedenen Geräten: Teste deine Website auf einer Vielzahl von Geräten, um sicherzustellen, dass sie auf allen Geräten wie erwartet funktioniert.

Semantisches HTML: Strukturierung von Inhalten

Semantisches HTML ist eine bewährte Methode, die dir dabei hilft, Inhalte auf eine logische und aussagekräftige Weise zu strukturieren. Es verwendet HTML-Tags, um die Bedeutung verschiedener Inhaltselemente festzulegen, wodurch es für Browser und Suchmaschinen einfacher wird, den Inhalt deiner Website zu verstehen.

Vorteile des semantischen HTML

  • Verbesserte Zugänglichkeit: Semantisches HTML macht es Menschen mit Behinderungen leichter, deine Website zu nutzen, da sie sich auf die Struktur und Bedeutung des Inhalts konzentriert, nicht nur auf seine Präsentation.
  • Verbesserte Suchmaschinenoptimierung (SEO): Suchmaschinen verwenden semantische Tags, um den Inhalt deiner Website zu kategorisieren und zu verstehen. Dies kann deiner Website helfen, in relevanten Suchergebnissen besser zu ranken.
  • Optimierte Benutzerfreundlichkeit: Semantisches HTML verbessert die Benutzerfreundlichkeit deiner Website, indem es Besuchern die Navigation und das Finden der gesuchten Informationen erleichtert.

So verwendest du semantisches HTML

Um semantisches HTML zu verwenden, musst du die richtigen HTML-Tags für verschiedene Inhaltselemente auswählen. Hier sind einige Beispiele:

  • Überschriften: Verwende die Tags

    bis

    , um Überschriften verschiedener Ebenen zu erstellen.
  • Absätze: Verwende das

    -Tag, um Absätze zu erstellen.

  • Listen: Verwende die

    Beispiele für semantischen HTML-Code

    Betrachte den folgenden Code:

    <h1>Mein Blog</h1>
    <p>Dies ist mein Blog über Webdesign.</p>
    <ul>
      <li>HTML-Grundlagen</li>
      <li>CSS-Techniken</li>
      <li>Responsive Design</li>
    </ul>
    <img src="bild.jpg" alt="Ein Bild von einem Computer">
    

    Dieser Code verwendet semantische Tags, um die Struktur und Bedeutung des Inhalts zu definieren. Die

    -Überschrift zeigt den Titel des Blogs an, während das

    -Tag den Inhalt des Blogs enthält. Die ungeordnete Liste

      zeigt eine Liste von Themen an, während das -Tag ein Bild einfügt.

      Ressourcen

      Barrierefreiheit im HTML-Design: Gebäude zugänglicher Websites

      Im Zeitalter des Internets ist es entscheidend, Websites zu erstellen, die für alle Benutzer zugänglich sind, unabhängig von ihren Beeinträchtigungen. Barrierefreiheit im HTML-Design stellt sicher, dass Menschen mit Behinderungen Websites gleichermaßen nutzen können.

      Vorteile der Barrierefreiheit

      Die Implementierung von Barrierefreiheit hat zahlreiche Vorteile, darunter:

      • Verbesserte Benutzererfahrung für alle Benutzer
      • Erhöhte Reichweite und Inklusion
      • Einhaltung gesetzlicher Vorschriften
      • Stärkung der Marke und des Rufs

      Schlüsselprinzipien der Barrierefreiheit im HTML

      Um barrierefreie Websites zu erstellen, befolge diese Schlüsselprinzipien:

      • Alternativtexte: Stelle für Bilder und andere Nicht-Textinhalte Alternativtexte bereit, die den Inhalt für Benutzer beschreiben, die keinen visuellen Zugriff haben.
      • Strukturierte Überschriften: Verwende Überschriftenelemente (

        bis

        ) korrekt, um die Struktur deines Inhalts zu kommunizieren.
      • Fokussierung und Navigation: Stelle sicher, dass Benutzer mit Tastaturen oder Sprachbefehlen durch deine Website navigieren können.
      • Kontrastverhältnis: Verwende Farben mit ausreichendem Kontrast, um die Lesbarkeit für Benutzer mit eingeschränktem Sehvermögen zu verbessern.
      • Schriftgröße: Verwende Schriftgrößen, die für Benutzer mit Sehbehinderungen leicht lesbar sind.

      Werkzeuge zur Überprüfung der Barrierefreiheit

      Es gibt zahlreiche Tools, die dir helfen können, die Barrierefreiheit deiner Website zu überprüfen, darunter:

      • Wave Evaluation Tool: Ein webbasiertes Tool, das Barrierefreiheitsprobleme identifiziert.
      • Chrome DevTools Accessibility Audit: Ein integriertes Tool im Chrome-Browser, das Barrierefreiheitsprobleme prüft.
      • aXe: Eine Erweiterung für den Chrome- und Firefox-Browser, die Barrierefreiheitsprobleme kennzeichnet.

      Best Practices

      Hier sind einige Best Practices für barrierefreies HTML-Design:

      • Wende die Richtlinien zur Barrierefreiheit gemäß Web Content Accessibility Guidelines (WCAG) an.
      • Teste deine Website mit verschiedenen Hilfstechnologien, wie z. B. Bildschirmlesern und Spracherkennungssoftware.
      • Sammle Feedback von Benutzern mit Behinderungen.
      • Bleibe mit den neuesten Barrierefreiheitsstandards und -techniken auf dem Laufenden.

      Indem du diese Prinzipien und Best Practices befolgst, kannst du Websites erstellen, die für alle Benutzer zugänglich und inklusiv sind.

      HTML5: Neue Funktionen und Verbesserungen

      HTML5 ist die neueste Version von HTML und bietet eine Reihe neuer Funktionen und Verbesserungen, mit denen sich interaktiver und ansprechender websites erstellen lassen. Hier sind einige der wichtigsten Funktionen von HTML5:

      Multimediaunterstützung

      HTML5 bietet native Unterstützung für Multimedia-Elemente wie Audio und Video. Das bedeutet, dass du diese Elemente direkt in deinen HTML-Code einbetten kannst, ohne externe Plugins oder Skripte zu benötigen.

      Canvas und WebGL

      Canvas ist ein HTML5-Element, mit dem du direkt auf der Webseite zeichnen kannst. WebGL ist eine 3D-Grafik-API, mit der du 3D-Inhalte in deinen Websites rendern kannst. Diese Technologien eröffnen neue Möglichkeiten für die Erstellung interaktiver und ansprechender Websites.

      Semantische Elemente

      HTML5 führt eine Reihe semantischer Elemente ein, die dir helfen, den Inhalt deiner Website zu strukturieren und zu organisieren. Diese Elemente umfassen Header, Abschnitte, Artikel und Fußzeilen.

      Lokaler Speicher

      HTML5 bietet zwei Arten von lokalem Speicher: Web Storage und IndexedDB. Web Storage ist ein Schlüssel-Wert-Speicher, der Daten im Browser zwischenspeichert, während IndexedDB eine Datenbank-API ist, die komplexere Datenspeicherung ermöglicht.

      Fehlerbehandlung

      HTML5 bietet eine Reihe neuer Fehlerbehandlungsfunktionen, die die Fehlersuche und -behebung erleichtern. Dazu gehören die try...catch-Anweisung und die Methode console.error().

      Optimierte Leistung

      HTML5 enthält eine Reihe von Optimierungen, die die Leistung von Websites verbessern. So wird beispielsweise der DOM (Document Object Model) für eine schnellere Verarbeitung optimiert.

      HTML5 eröffnet neue Möglichkeiten für die Erstellung von Websites und bietet Funktionen, die zuvor nur mit komplexen JavaScript-Programmierungen möglich waren. Wenn du deine Websites moderner und interaktiver gestalten möchtest, solltest du die Verwendung von HTML5 in Betracht ziehen.

      Fortgeschrittenes HTML-Design: Umfrageformulare, Canvas und WebGL

      Über einfache Text- und Bildformatierung hinaus bietet HTML weitere fortgeschrittene Funktionen für interaktive und immersive Inhalte.

      Umfrageformulare

      HTML bietet integrierte Unterstützung für die Erstellung von Umfrageformularen. Du kannst verschiedene Eingabefelder verwenden, wie z. B. Textfelder, Kontrollkästchen und Optionsfelder, um Daten von Benutzern zu sammeln. Durch die Verwendung von HTML-Validierung kannst du sicherstellen, dass die Eingaben korrekt sind.

      Canvas

      Canvas ist ein HTML5-Element, mit dem du 2D-Grafiken in deinem Webbrowser rendern kannst. Mit JavaScript kannst du Zeichnungen, Formen und Text auf einer Canvas-Zeichenfläche erstellen. Canvas wird häufig für die Erstellung von Spielen, Animationen und interaktiven Grafiken verwendet.

      WebGL

      WebGL (Web Graphics Library) ist eine JavaScript-API, die 3D-Grafiken in Webbrowsern ermöglicht. Mit WebGL kannst du komplexe 3D-Szenen erstellen, die den gleichen visuellen Standards wie in Videospielen entsprechen. WebGL wird häufig für immersive Erlebnisse wie Spiele, Simulationen und virtuelle Touren verwendet.

      Neben diesen Funktionen bietet fortgeschrittenes HTML-Design auch Techniken wie:

      • Zugänglichkeit: Sicherstellen, dass Websites für alle Benutzer zugänglich sind, unabhängig von ihren Fähigkeiten oder Geräten.
      • Performance: Optimieren von Websites für schnelles Laden und reibungslose Leistung.
      • Progressive Web Apps (PWAs): Erstellung von webbasierten Anwendungen, die sich wie native Apps verhalten.

      Best Practices für HTML-Design: Performance, Validierung und Barrierefreiheit

      Als Webentwickler solltest du dich an Best Practices halten, um die Leistung, Validität und Barrierefreiheit deiner HTML-Websites zu gewährleisten. Hier sind einige wichtige Richtlinien:

      Performance

      • Bilder optimieren: Verwende komprimierte Bilder und vermeide es, unnötig große Bilder zu verwenden. Ziehe in Erwägung, Bilder in responsiven Formaten wie WebP oder AVIF bereitzustellen.
      • CSS und JavaScript extern laden: Lade CSS- und JavaScript-Dateien extern, um die anfängliche Ladezeit der Seite zu verkürzen.
      • Minifizierung von Code: Entferne unnötige Leerzeichen, Kommentare und Formatierung aus deinem HTML-, CSS- und JavaScript-Code, um die Dateigröße zu reduzieren.
      • Caching nutzen: Nutze Browser-Caching, um häufig verwendete Dateien wie Bilder und Skripte zu speichern und so zukünftige Ladevorgänge zu beschleunigen.
      • CDN verwenden: Verwende ein Content Delivery Network (CDN), um statische Dateien von Servern näher am Standort deiner Nutzer zu liefern und so die Ladezeiten zu verbessern.

      Validierung

      • HTML validieren: Verwende einen HTML-Validator, um sicherzustellen, dass dein Code den HTML-Standards entspricht. Dies hilft dir, Fehler zu erkennen und die Kompatibilität deines Codes mit verschiedenen Browsern zu gewährleisten.
      • CSS validieren: Verwende einen CSS-Validator, um sicherzustellen, dass dein CSS-Code den CSS-Standards entspricht. Dies hilft dir, Fehler zu erkennen und die Kompatibilität deines Codes mit verschiedenen Browsern zu gewährleisten.
      • Beheben von Fehlern: Behebe alle Fehler und Warnungen, die von Validatoren gemeldet werden. Dies stellt sicher, dass dein Code korrekt und fehlerfrei ist.

      Barrierefreiheit

      • Alternativtexte für Bilder: Füge allen Bildern Alternativtexte hinzu, die eine Beschreibung des Bildinhalts liefern. Dies hilft sehbehinderten Nutzern, den Inhalt deiner Website zu verstehen.
      • Überschriftenstruktur: Verwende Überschriften, um den Inhalt deiner Website zu strukturieren und eine klare Hierarchie zu erstellen. Dies hilft Nutzern mit Screenreadern, deine Website zu navigieren.
      • Farbkontrast: Stelle sicher, dass der Farbkontrast zwischen Text und Hintergrund hoch genug ist, um die Lesbarkeit für alle Nutzer zu gewährleisten.
      • Tastaturzugriff: Gestalte deine Website so, dass sie mit der Tastatur vollständig zugänglich ist. Dies ermöglicht es Nutzern, die keine Maus verwenden können, deine Website zu navigieren und zu interagieren.
      • Sprachattribute: Verwende das lang-Attribut, um die Sprache deiner Website anzugeben. Dies hilft Screenreadern, die richtige Sprache für die Sprachausgabe zu verwenden.

      Fehlerbehebung und Optimierung im HTML-Design

      Um sicherzustellen, dass deine Webseiten fehlerfrei und für Nutzer optimiert sind, ist es wichtig, die folgenden Aspekte zu berücksichtigen:

      Fehlerbehebung

      • Überprüfe deinen Code auf Syntaxfehler: Dies kannst du mit Online-Tools wie dem W3C Validator oder HTML Tidy tun.
      • Überprüfe die Konsole deines Browsers: Hier werden Fehler und Warnungen angezeigt, die dir helfen können, Probleme zu identifizieren.
      • Verwende ein Debugger-Tool: Die meisten Webbrowser verfügen über integrierte Debugger, mit denen du den Ausführungsfluss deines Codes verfolgen kannst.
      • Überprüfe die Netzwerkaktivität: Verwende die Entwicklertools deines Browsers, um zu sehen, welche Ressourcen geladen werden und wie lange es dauert. Dies kann dir helfen, Probleme mit langsamen Seitenladungen zu diagnostizieren.

      Optimierung

      • Minimiere deinen HTML-Code: Entferne unnötige Leerzeichen, Kommentare und andere überflüssige Zeichen.
      • Optimiere deine Bilder: Verwende das richtige Dateiformat (z. B. JPEG für Fotos, PNG für Grafiken) und komprimiere sie ohne Qualitätsverlust.
      • Nutze Caching: Speichere statische Ressourcen (wie Bilder und CSS-Dateien) lokal auf dem Computer des Nutzers, um die Ladezeiten zu verkürzen.
      • Verwende ein Content Delivery Network (CDN): Dies verteilt Ressourcen auf Server auf der ganzen Welt, um die Entfernung zwischen dem Nutzer und den Inhalten zu verringern und die Ladezeiten zu verbessern.
      • Überprüfe die Leistung deiner Website: Verwende Tools wie Google PageSpeed Insights oder GTmetrix, um die Ladezeiten und Leistung deiner Website zu messen und Empfehlungen zur Verbesserung zu erhalten.
      • Erstelle eine Sitemap: Dies hilft Suchmaschinen, deine Website zu indizieren und ihren Inhalt besser zu verstehen.

Folge uns

Neue Posts

Beliebte Posts