web - art - tech
web - art - tech
Hier ist ein einfaches JavaScript-Skript, mit dem ein Burger-Button eine responsive Navigation von der rechten Seite hereinschieben lässt. Beim Klick auf einen Link innerhalb der Navigation verschwindet sie wieder. Funktionalität: Styling: Ergebnis: Beim Klick auf einen Navigationslink oder außerhalb der…
Hier ist ein einfaches Skript, das einen „Top-Button“ erstellt, der erscheint, sobald der Benutzer 100px scrollt. Beim Klick auf diesen Button wird der Benutzer zurück zum Seitenanfang gebracht. HTML und CSS: <!DOCTYPE html><html lang=“en“><head> <meta charset=“UTF-8″> <meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>…
Um zwischen einem Dark-Modus und einem Light-Modus umzuschalten, kannst du mit einem Schalter (switch button) und CSS-Variablen arbeiten. Hier ist eine vollständige Lösung mit HTML, CSS und JavaScript: HTML <!DOCTYPE html><html lang=“en“><head> <meta charset=“UTF-8″> <meta name=“viewport“ content=“width=device-width, initial-scale=1.0″> <title>Dark/Light Mode…
Die Bedeutung von Graceful Degradation im barrierefreien Interface-Design Quelle: Smashing Magazine Graceful Degradation ist ein Designansatz, der sicherstellt, dass die Grundlagen einer Website auch dann noch funktionieren, wenn bestimmte einzelne Teile nicht mehr funktionieren. Der Ansatz beseitigt einzelne Fehlerquellen : Nur weil…
Um sicherzustellen, dass immer nur ein <details>-Element geöffnet ist, wenn der Benutzer ein anderes <details>-Element anklickt, kannst du ein JavaScript hinzufügen, das alle anderen <details>-Elemente schließt, sobald eines geöffnet wird. Hier ist ein Beispiel: HTML <!DOCTYPE html><html lang=“en“><head> <meta charset=“UTF-8″>…
In diesem ersten Video zeige ich dir was HTMX genau ist und warum du es für deine Webprojekte benutzten solltest. In dieser Playlist werden noch weitere Videos zum Thema HTMX folgen. Folge gern dem Kanal um kein Video zu…
HTML5 entwickelt sich ständig weiter, und es gibt kontinuierliche Diskussionen und Vorschläge innerhalb der Web-Community und der W3C (World Wide Web Consortium) über die Einführung neuer Tags und Funktionen. Hier sind einige Tags und Konzepte, die in zukünftigen HTML-Versionen eingeführt…
Hier sind einige weitere HTML5-Tags, die in den vorherigen Antworten noch nicht behandelt wurden: 1. <embed> Das <embed>-Tag wird verwendet, um externe Inhalte, wie z.B. Multimedia-Objekte, einzubetten. Es ersetzt weitgehend das ältere <object>-Tag und bietet eine einfachere Möglichkeit, Inhalte wie…
Hier sind noch weitere wichtige HTML5-Tags, die eingeführt wurden, um die Struktur, Semantik und Funktionalität von Webseiten zu verbessern: 1. <main> Das <main>-Tag kennzeichnet den Hauptinhalt der Seite. Es sollte nur einmal pro Seite verwendet werden und enthält den einzigartigen…
Neben den bereits genannten Tags hat HTML5 eine Reihe weiterer neuer Tags eingeführt, die das Schreiben von semantisch sinnvolleren, strukturierteren und funktionaleren Webseiten erleichtern. Hier sind einige weitere wichtige HTML5-Tags: 1. <aside> Das <aside>-Tag wird verwendet, um Inhalte zu kennzeichnen,…
HTML5 hat viele neue Tags, Attribute und APIs eingeführt, die das Webdesign und die Webentwicklung wesentlich verbessert haben. Hier sind einige der wichtigsten neuen HTML5-Befehle (Tags) mit Beispielen: 1. Neue Struktur-Tags HTML5 hat semantische Tags eingeführt, die die Struktur und…
Emmet ist ein quelloffenes Plugin für verschiedene Texteditoren, zur schnellen Erstellung von XML-, HTML- und CSS-Code. Befehle für Emmet werden in einer eigenen Kurzschreibweise verfasst und direkt in der Datei ausgeführt, zum Beispiel durch das Drücken der Tabulatortaste. Unter der…
