HTML/Tutorials

Während der Einstieg in HTML eine Schritt-für-Schritt-Anleitung zum Bau einer Webseite ist,
führt dieser Kurs durch den Aufbau und Regeln von HTML und stellt die dafür passenden
Elemente vor.

1. Entstehung und Entwicklung
   • HTML als Auszeichnungssprache
   • Semantik
   • HTML5
2. Element, Tag und Attribut
   • Unterschied Tag und Element
   • optionale Tags
   • Attribute
3. Grundgerüst
4. Seitenstrukturierung
   • header, footer & nav
   • main
   • article, section & aside
5. Textstrukturierung
   • Absätze
   • Inhalt gruppieren mit
     • blockquote
     • figure
     • div
6. Textauszeichnung
   • Hervorhebungen
   • Abkürzungen
7. Neu und obsolet in HTML5
   • neue Formular-Elemente in HTML5
   • Multimedia
   • obsolete Attribute
   • Kategorien

weitere Tutorials

* Single-Page Webseite

• • One-Pager
  • Scroll Snap
  • interactive Storytelling

Einstieg in …

• Formulare
  • Was ist ein Webformular?
  • browsereigene Validierung
  • Radio-Buttons und Checkboxen
  • Suchformulare
• Links
  • Referenzieren in HTML
  • Links -Gestaltung mit CSS
• Listen
  • Gestaltung mit CSS
  • Hybride Nummerierung
  • Fußnoten mit CSS
• Navigation
  • Dropdown-Menüs
  • Flyout-Menü
• Tabellen

Inhalte einbinden:

• Dateien mit include() nachladen
• Google-Fonts selbst hosten
• einen Kartenausschnitt mit Geolocation einbinden

Grafik + Multimedia

• Farbkonzept
  • Beispiele für Paletten
  • Farben und Kontraste
  • Licht und Schatten
• Bilder im Internet
  • Formate und Größen
  • responsive Bilder
• Favicon - Bild in Tab / Favoriten
• Lightbox-Galerie einbinden
• Multimedia
  • audio
  • video
  • Playlisten zusammenstellen
• Adventskalender
• Aktive Inhalte einbinden (SVG, PDF …)
• Code in HTML darstellen
• details - aufklappbare UI-Elemente
• dialog
• Quelltext verstecken
• responsive E-Mail-Newsletter

• Tooltips mit CSS
• Webseitenvorschau in Messenger Apps

HTML-Einstieg: der Kurs für die ersten Schritte in HTML und CSS.

Layoutkonzepte

• Trennung von Inhalt, Präsentation und Verhalten
• Barrierefreiheit
  • Webseiten zugänglich gestalten
  • Benutzereingaben zugänglich gestalten
  • Grafiken und Multimedia zugänglich gestalten
  • zugängliche Emoticons
• Benutzerfreundlichkeit
  • Content Usability (Benutzbarkeit des Inhalts)
• responsive Webdesign
  • Layoutkonzepte
  • bestehende Webseiten umbauen
  • neuere HTML- und CSS-Features