Schulung · Workshop · Coaching · Beratung

HTML und CSS für E-Learning: Kursseiten im LMS

HTML und CSS für E-Learning: Kursseiten in der Lernplattform gestalten

Dauer: ab 1 Tag | Preis: ab 900 EUR (Netto) | Termin: Ganztägig + halbtägig

Sie gestalten Kursinhalte in Ihrer Lernplattform (LMS) mit sauberem HTML und gezieltem CSS – gut gegliedert, barrierearm, mit eingebetteten Medien und korrekt gekennzeichneten Lizenzen.

Warum sehen Kursseiten im LMS oft anders aus, als Lehrende sie angelegt haben?

HTML und CSS für E-Learning heißt nicht, Webdesigner:in zu werden. Es heißt, den Editor der Lernplattform (LMS) zu verstehen: Was passiert mit einem aus der Textverarbeitung eingefügten Skript, warum verschwinden Abstände nach dem Speichern, weshalb ist ein eingebettetes Video auf dem Smartphone abgeschnitten? Wer die Quellcodeansicht öffnen und darin sicher arbeiten kann, gestaltet Kursseiten, die auf allen Geräten lesbar sind, mit Screenreader funktionieren und beim nächsten Update der Plattform nicht auseinanderfallen.

Das Seminar folgt dem Weg einer Kursseite: von der Planung und Dateiorganisation über Überschriften, Absätze, Listen und Hervorhebungen bis zu Links auf Seiten, Abschnitte, Dokumente und Sprechstundentermine. Danach geht es um Bilder mit aussagekräftigen Alternativtexten, um Videos, Audio, Karten und interaktive H5P-Inhalte im iFrame und darum, wie diese Einbettungen responsiv und datenschutzfreundlich werden. Im CSS-Teil lernen Sie, mit den Entwicklerwerkzeugen des Browsers vorhandene Stile zu untersuchen, eigene Regeln dort einzusetzen, wo die Plattform es erlaubt, und eine Druckfassung für Arbeitsblätter anzulegen. Ein eigener Block behandelt Lizenzen: Creative Commons, offene Bildungsmaterialien (OER) und die Grenzen der Nutzung fremder Werke im Unterricht.

Auch beim Erstellen von Kursmaterial helfen inzwischen Chat-Assistenten und Coding-Agenten. Sie wandeln ein Vorlesungsskript in gegliedertes HTML um, schlagen Bildbeschreibungen vor oder prüfen eine Kursseite auf leere Linktexte wie „hier“. Wir üben, wie Sie solche Ergebnisse kontrollieren, welche Daten von Lernenden in diesen Werkzeugen nichts zu suchen haben und warum Lizenzangaben nie aus einem Modell stammen dürfen.

Allgemeines Webdesign mit HTML und CSS behandeln die Seminare HTML für Einsteiger und CSS für Einsteiger. Hier arbeiten wir aus Sicht der Autor:innen im LMS, gern direkt in einem Übungskurs Ihrer eigenen Plattform – Vorkenntnisse in HTML sind nicht nötig.

Die meisten Probleme in Kursräumen sind kein Technikproblem, sondern ein Kopierproblem. Ein Skript wird aus der Textverarbeitung eingefügt, und mit ihm kommen fünfzig Zeilen unsichtbarer Formatierung, feste Schriftgrößen und Überschriften, die nur fett gedruckter Text sind. Wer einmal in die Quellcodeansicht schaut, versteht, warum die Seite auf dem Handy zerfällt und warum der Screenreader keine Gliederung findet. Zwanzig Minuten HTML-Grundwissen ersparen Lehrenden mehr Ärger als jede neue Designvorlage.
Themen und Inhalte für Ihre Beratung, Coaching, Workshop, Training, Schulung und Weiterbildung:

HTML und CSS für E-Learning: Kursseiten in der Lernplattform gestalten

Grundlagen für Kursautor:innen
  • Warum HTML-Grundwissen im LMS hilft: Editor, Quellcodeansicht und was beim Speichern passiert
  • Elemente, Attribute und Verschachtelung – HTML lesen und gezielt ändern
  • Werkzeuge: Rich-Text-Editor der Lernplattform, Code-Editor und Browser-Entwicklerwerkzeuge
  • Ganze Seite, Textbereich oder Baustein: was Autor:innen im LMS tatsächlich bearbeiten
  • Wie URLs aufgebaut sind: absolute und relative Adressen, Kurs- und Dateilinks
  • Workflow für eine Kursseite: Gliederung planen, Inhalte erstellen, prüfen, freigeben
  • HTML-Seite, PDF oder Dokumentdatei: welches Format für welchen Kursinhalt
Text semantisch gliedern
  • Überschriftenebenen h2 bis h4 als Gliederung statt fett gesetzter Zeilen
  • Absätze und Zeilenumbrüche sauber trennen, Leerzeilen als Abstand vermeiden
  • Hervorhebungen mit strong und em statt Farbe und Großbuchstaben
  • Aufzählungen und nummerierte Listen für Arbeitsschritte und Lernziele
  • Beschreibungslisten dl für Glossare und Begriffsdefinitionen
  • Aus der Textverarbeitung eingefügte Formatierungen erkennen und bereinigen
Links in Kursmaterialien
  • Links auf Kursseiten und externe Quellen mit aussagekräftigem Linktext statt „hier“
  • Sprungmarken mit id für lange Seiten und Inhaltsverzeichnisse
  • E-Mail-Links mit mailto: und vorbelegtem Betreff für Rückfragen
  • Links zu Social-Media-Kanälen und Teilen-Funktionen datenschutzbewusst einbinden
  • Neues Fenster oder gleiches Fenster: target="_blank" nur mit Hinweis im Linktext
  • Auf PDF-Dateien verlinken: Dateityp und Größe angeben, barrierefreie PDFs bevorzugen
  • Auf geteilte Online-Dokumente aus Cloud-Office verlinken: Freigaben und Datenschutz
Bilder und Grafiken
  • Das img-Element: Alternativtext, Breite, Höhe und Bildformate WebP und SVG
  • Alternativtexte für Diagramme, Fotos und Schmuckbilder unterscheiden
  • Eigene Bilder in die Dateiverwaltung des LMS hochladen, benennen und verkleinern
  • Bilder aus freien Mediendatenbanken und OER-Sammlungen mit Lizenzangabe nutzen
  • Verlinkte Bilder: Linkziel im Alternativtext beschreiben
Medien und interaktive Inhalte einbetten
  • Einbetten mit iframe: Titelattribut, erlaubte Quellen und Filter der Plattform
  • Videos von Videoplattformen einbetten, mit erweitertem Datenschutzmodus oder Zwei-Klick-Lösung bzw. Selbsthosting und Untertiteln
  • Eigene Videos mit dem video-Element, Untertitel als WebVTT über track
  • Audio und Podcasts einbinden: audio-Element oder Player eines Audiodienstes
  • Karten einbetten, z. B. aus OpenStreetMap, mit Textalternative für die Wegbeschreibung
  • H5P-Inhalte wie interaktive Videos und Quizze in Kursseiten einbinden
  • Eingebettete Inhalte responsiv machen mit aspect-ratio statt Hilfs-Containern
Barrierearme Kursseiten
  • Anforderungen nach WCAG 2.2 und BITV 2.0 für Lehrmaterial im Überblick
  • Kontraste, Schriftgrößen und Farbe nicht als einziges Unterscheidungsmerkmal
  • Tabellen nur für Daten, mit Kopfzellen th und Beschriftung caption
  • Kursseite mit Tastatur, Screenreader-Kurztest und automatischem Prüfwerkzeug testen
Eigenes CSS in der Lernplattform
  • Was CSS ist: Selektoren, Eigenschaften und Kaskade im Überblick
  • Vorhandene Stile mit den Entwicklerwerkzeugen des Browsers untersuchen und testen
  • Stile des LMS überschreiben: Inline-Stil, Kursebene oder Theme-Einstellungen
  • Warum der Editor style- und class-Attribute teils entfernt und wie man damit umgeht
  • Eigenes Stylesheet einbinden, wo die Plattform es erlaubt, mit Absprache der Administration
  • Wiederverwendbare Bausteine: Hinweisboxen, Aufgabenkästen und Lernziel-Listen
  • Druckfassung für Arbeitsblätter mit @media print
Lizenzen und Urheberrecht
  • Spektrum von „alle Rechte vorbehalten“ über Creative Commons bis gemeinfrei
  • Creative-Commons-Lizenzen korrekt angeben: Titel, Urheber:in, Quelle, Lizenz
  • Nutzung fremder Werke für Unterricht und Lehre: gesetzliche Erlaubnis und ihre Grenzen
  • Eigene Materialien als OER veröffentlichen und Lizenz im HTML kennzeichnen
  • Mediendateien verwalten: Ordner, Dateinamen, Versionen und Lizenznachweise
Eigene Übungs- und Veröffentlichungsumgebung
  • Welche Infrastruktur Lehrende brauchen: LMS, Dateiablage, ggf. eigene Website
  • Übungskurs oder Testumgebung in der Lernplattform (LMS) nutzen statt am Live-Kurs zu üben
  • Eigene Domain für ein Lehrportfolio: Registrierung, DNS und HTTPS im Überblick
  • Begleitende Kurs- oder Portfolio-Website mit einem CMS oder Baukasten aufsetzen
  • Dateien sicher hochladen: Weboberfläche oder SFTP statt unverschlüsseltem FTP
E-Learning-Material mit KI-Assistenten und Coding-Agenten
  • Vorlesungsskript in gegliedertes HTML für eine E-Learning-Einheit umwandeln und im Quelltext prüfen
  • Kursseite auf Überschriftensprünge, leere Linktexte und fehlende alt-Attribute prüfen lassen
  • Keine Namen, Noten oder Abgaben von Lernenden in externe KI-Werkzeuge kopieren
  • Lizenzangaben und Quellen nie vom Modell erzeugen lassen, sondern aus der Originalquelle übernehmen
  • CSS-Bausteine für Hinweisboxen erzeugen und vorab gegen die Filterregeln der Plattform testen
Praxisprojekt: Lerneinheit „Wasserkreislauf“ für einen Online-Kurs
  • Einstiegsseite mit Lernzielen, Gliederung, Glossar und Sprungmarken anlegen
  • Schaubild mit Alternativtext, Erklärvideo mit Untertiteln und H5P-Quiz einbetten
  • Hinweis- und Aufgabenboxen mit eigenem CSS und eine Druckfassung des Arbeitsblatts
  • Lizenzhinweise für alle fremden Medien und Abschlussprüfung auf Barrierearmut
Lernziele
  • Sie gliedern Kursseiten im LMS-Editor mit Überschriften, Listen und Links und bereinigen eingefügte Formatierungen in der Quellcodeansicht.
  • Sie binden Bilder mit passenden Alternativtexten sowie Videos, Audio, Karten und H5P-Inhalte responsiv ein.
  • Sie untersuchen vorhandene Stile mit den Browser-Entwicklerwerkzeugen und setzen eigenes CSS ein, wo die Lernplattform es erlaubt.
  • Sie prüfen eine Kursseite auf Barrierearmut mit Tastatur und Prüfwerkzeug.
  • Sie kennzeichnen fremde und eigene Materialien mit korrekten Lizenzangaben.
Zielgruppe
  • Lehrende an Hochschulen, Schulen und in der Erwachsenenbildung, die Kurse in einer Lernplattform (LMS) pflegen
  • E-Learning-Autor:innen und Mediendidaktiker:innen
  • Bildungsträger, die Kursvorlagen und Gestaltungsregeln für ihre Lehrenden festlegen

*) Die Inhalte werden individuell abgestimmt und mit Praxisbeispielen abgerundet.

Ein Symbol für einen Kalender.

Offene Termine

Kostenlose Reservierung
Ein Symbol für Angebot erhalten.

Unser Angebot

Sind Sie auf der Suche nach einer Veranstaltung, die genau Ihrem Bedarf entspricht? Einer Veranstaltung, welche nur Inhalte vermittelt, die Sie selbst gewählt haben und speziell auf Ihr Unternehmen zugeschnitten ist? Dann sind Sie bei uns richtig!

Dauer

Ein Symbol für Dauer.
ab 1 Tag (8 UE)

Die Dauer richtet sich nach Ihren Vorstellungen und inhaltlichen Wünschen. Sie bekommen genau das, was Sie brauchen.

Preis

Ein Symbol für Preis.
ab 900 EUR (Nettopreis)
ab 1.071 EUR (Bruttopreis)

Die Preise verstehen sich bei Unternehmern gemäß § 14 BGB zzgl. MwSt. Der dargestellte Ab-Preis gilt für firmeninterne Veranstaltungen und entspricht dem niedrigsten Gesamtpreis für Veranstaltungen mit bis zu drei (3) Teilnehmenden.

Termin

Ein Symbol für einen Kalender.
Ganztägig + halbtägig
nach Vereinbarung

Ihr Wunschtermin wird bei der Planung berücksichtigt. Die Veranstaltung findet ganztägig + halbtägig zu flexiblen Zeiten statt.

Ihre Vorteile

Ein Symbol für ein Vorgespräch durchführen.
Persönliches Vorgespräch
Ein Symbol für die individuelle Vorbereitung.
Individuelle Vorbereitung
Ein Symbol für Experten aus der Praxis.
Experten aus der Praxis
Ein Symbol für ein Zertifikat.
Inklusive Zertifikat

Unsere Garantien

1. Relevanz-Garantie

Wir passen den Inhalt spezifisch an die Bedürfnisse jedes Teilnehmers an. Irrelevante Themen werden ausgespart, um den größtmöglichen Nutzen zu garantieren.

2. Qualitäts-Garantie

Durch regelmäßiges Feedback optimieren wir unsere Schulungen kontinuierlich und garantieren Ihnen ein Lernerlebnis der Extraklasse.

3. Zufriedenheits-Garantie

Unsere Zufriedenheitsgarantie spricht für sich – bei Unzufriedenheit entstehen Ihnen keine Kosten.

Wir helfen gerne weiter!

Rufen Sie uns an, schreiben eine E-Mail oder nutzen das Kontaktformular.

Jetzt anfragen
Einige Unternehmen, für die wir tätig waren

mobilcom-debitel GmbH

meinestadt.de GmbH

SICK Vertriebs-GmbH

Teilnehmer

Feedback

Herr Hecker ist sehr gut auf individuelle Wünsche, Fragen und Anregungen eingegangen. Eine sehr informative, interessante und gelungene Veranstaltung.
Teilnehmer

Feedback

Herr Hecker hat das Thema sehr anschaulich dargestellt und ist auf alle Fragen eingegangen. Ich fühle mich jetzt gut vorbereitet, um durchzustarten.
Teilnehmer

Feedback

Die gelassene, professionelle Art hat mir gut gefallen. Kompetent, engagiert, professionell. Gute Beispiele, sympathisches Auftreten. Eigene Themenideen wurden aufgegriffen.
Unser Angebot für Ihre firmeninterne Beratung, Coaching, Workshop, Training und Weiterbildung

Lösungen für Ihren Bedarf an Coaching, Workshop, Training, Schulung und Weiterbildung

Profitieren Sie von unserer langjährigen Expertise in der beruflichen Weiterbildung, modernen Lernmethoden und einem Portfolio von über 600 IT-, Online- und Digital-Beratungsleistungen.
Selbstverständlich lassen sich die einzelnen Themen kombinieren. So erhalten Sie genau die Weiterbildung, die Sie wünschen und brauchen - als Coaching, Workshop, Training, Schulung und Weiterbildung!

✓
Ein Symbol für eine einzelne Person.

Für eine Person

Training & Coaching für Einzelpersonen

  • Passgenaue Inhalte auf den einzelnen Teilnehmer zugeschnitten
  • Ein sehr effektives Format, das schnell Ergebnisse bringt
  • Individuelles Training und Coaching motivieren und wirken
Jetzt anfragen
✓
Ein Symbol für eine Gruppe von Personen.

Für eine Gruppe

Training & Workshops für Teams und Abteilungen

  • Bedarfsgerechte Inhalte auf die Herausforderung der Praxis zugeschnitten
  • Konsequente Praxisorientierung, modernste Techniken und Tools
  • Neue Fähigkeiten und Kenntnisse nachhaltig in den Arbeitsalltag integrieren
Jetzt anfragen
✓
Ein Symbol für ein Unternehmen.

Für eine Firma

Training-Komplett-Lösungen für Ihr Unternehmen‍

  • Ganzheitliche Konzepte für Ihre Mitarbeiterentwicklung
  • Individueller Skill-Katalog zur Erweiterung Ihres internen Weiterbildungsangebots
  • Nachhaltige Personalentwicklung realisieren
Jetzt anfragen

Anfrage für eine unverbindliche + kostenlose Erstberatung zum Thema

HTML und CSS für E-Learning - Beratung, Coaching, Workshop, Training, Schulung und Weiterbildung

Wir freuen uns über Ihre Anfrage und antworten so schnell es geht!

Ich interessiere mich für den Termin:

Termin anfragen

Das Angebot von "HECKER CONSULTING" richtet sich ausschließlich an Unternehmen und Behörden (iSv § 14 BGB). Verbraucher (§ 13 BGB) sind vom Vertragsschluss ausgeschlossen. Mit Absendung der Anfrage bestätigt der Anfragende, dass er nicht als Verbraucher, sondern in gewerblicher Tätigkeit handelt. § 312i Abs. 1 S. 1 Nr. 1-3 und S. 2 BGB (Pflichten im elektronischen Geschäftsverkehr) finden keine Anwendung.

Vielen Dank, Ihre Nachricht wurde empfangen!
Beim Absenden des Formulars ist etwas schiefgelaufen.
Beratung, Coaching, Workshop, Training, Schulung

Ähnliche Leistungen, die Sie interessieren könnten.

Wir erweitern ständig unser Beratungsportfolio. Über 600 IT-, Online-, Digital-Beratungsleistungen haben wir für Sie im Programm. Selbstverständlich lassen sich die einzelnen Themen kombinieren. So erhalten Sie genau die Beratung, die Sie wünschen und brauchen - als Coaching, Workshop, Training, Schulung und Weiterbildung!

Mehr IT-, Online-, Digital-Beratungsleistungen anzeigen >>
Nach oben