Alle Beiträge zum Thema "HTML"

13. Februar 2024

Kalender mit Monatsübersicht (mit Bootstrap & jQuery und optional mit WordPress)

Bei der Suche nach einem schlichten, schicken Kalender mit Monatsansicht, bin ich auf folgendes Template aufmerksam geworden: https://github.com/ylli2000/bootstrap-4-calendar Der Kalender sieht nicht nur sehr schick aus, er ist auch sehr leicht mit Terminen zu befüllen, zu konfigurieren und anzupassen. Termine können ganz einfach mit einem Array in den Kalender eingetragen werden: Solch ein Array lässt […]

3. Februar 2024

So erstellst du HTML-E-Mail-Signaturen für Outlook, die überall gleich aussehen

Eine E-Mail-Signatur für Outlook zu erstellen ist verrückterweise eine echte Herausforderung. Egal ob in Word oder Outlook, ob auf Mac oder Windows, die Signatur sieht immer überall anders aus. Im schlimmsten Falle sind Logos auch noch verzerrt und Links blau unterstrichen. Mit diesen Tipps sollte es dir gelingen eine Signatur zu erstellen, die in den […]

7. Januar 2024

Platzhalter-Bilder

Platzhalter-Bilder sind sehr praktisch beim Aufbau von Websites. Ein solches Bild lässt sich z.B. vom Dienst „placeholder.com“ erzeugen. Hierfür muss lediglich folgende URL in die img src eingetragen werden. In WordPress kann die URL ganz einfach im Bild-Block eingetragen werden.

14. Dezember 2023

Text-Fade-in-Effekt mit CSS und JavaScript

Mit folgendem Snippet lässt sich ein subtiler, schicker Text-Eingangs-Effekt erzielen, der sich insbesondere für große Headlines eignet. Lorem ipsum dolor sit amet constructor Noch mal

14. Dezember 2023

Wie lernt man Websites zu programmieren? – Tipps für angehende Webentwickler.

Ich werde ja häufiger mal von Azubis und Praktikanten gefragt: „Wie lernt man eigentlich Websites zu programmieren?“ Als überzeugter Autodidakt fällt es mir nicht immer leicht diese Frage zu beantworten. Ich habe damals tatsächlich mit einem WYSIWYG-Editor angefangen. Dadurch, dass ich mir den Code und die Änderungen im Code immer wieder angeschaut habe, habe ich […]

12. November 2023

So kannst du Logos auf einer Website gleichmäßig darstellen

Endlich habe ich die ultimative Lösung gefunden um Logos auf einer Website darzustellen. Viele Jahre habe ich mit „float“, „margin“, Spacern & Background-Images gearbeitet und das Ergebnis war nicht immer zufriedenstellend. Die CSS-Eigenschaften „display: grid“, „gap“ & „aspect-ratio“ sind hier echte Game-Changer. Mit folgendem Code kannst verschiedenste Logo – egal hoch Hoch oder Querformat – […]

4. November 2023

Formular-Daten in WordPress als Post speichern – wp_insert_post()

Mit folgendem Code lassen sich Daten aus einem Formular als (Custom-)Post in WordPress speichern. Mögliche Anwendungsbereiche sind z.B. Erstelle hierfür zunächst einen Custom Post Type, z.B. namens „Anmeldungen“. Das geht z.B. sehr easy mit dem Plug-in CPT UI. Erstelle anschließend ein Formular mit den gewünschten Feldern. Ergänze im JavaScript folgenden Code. Hiermit werden die Formulareingaben […]

24. Oktober 2023

Multilevel-CSS-only-Dropdown-Navigation

Mit folgendem Stylesheet lässt sich eine Navigation mit mehreren Unterebenen darstellen, die sehr gut an das eigene Design adaptierbar ist: Der dazugehörige HTML-Code besteht aus einer einfachen verschachtelten Liste: Hier gehts zur Demo: Multilevel CSS-Navigation Die mobile Darstellung der Navigation stelle ich meistens in einem separatem div dar. Dazu lade ich das Menü mit jQuery […]

15. Oktober 2023

Einfaches Google Maps Opt-in

Mit folgendem Snippet kannst du ein einfaches Google Maps Opt-in umsetzen. Der User muss der Nutzung von Google Maps aktiv zustimmen. Daten werden erst an Google übertragen, wenn er auf den Button geklickt hat. Zum Aktivieren der eingebetteten Karte bitte auf den Button klicken. Durch das Aktivieren werden Daten an Google übermittelt. Karte anzeigen

9. Oktober 2023

Responsive Text

Im responsive Webdesign wird wird die Schriftgröße in der Regel durch Breakpoints und Mediaqueries angepasst. Z.B. auf kleinen Bildschirmen 14px und auf großen Bildschirmen 22px. Das funktioniert in den meisten Layouts auch sehr gut. Manchmal soll eine Headline aber auch stufenlos skaliert werden. Z.B. wenn sie, wie in diesem Beispiel, genau so breit sein soll, […]