Videotraining: »HTML5 für Webdesigner«

HTML5 - Logo

Pünktlich zu Weihnachten ist bei video2brain ein neues Videotraining von mir erschienen: 

Das Videotraining fasst das Wichtigste zu HTML5 zusammen, und zwar für Leute, die nicht in erster Linie programmieren. Das Training besteht aus folgenden Teilen: 

  1. Überblick über HTML5 und das Training 
  2. Layoutbereiche mit den neuen HTML5-Elementen strukturieren
  3. Layoutbereiche auszeichnen und gestalten anhand einer Beispielseite 
  4. Nutzung von HTML5-Elementen für Inhalte 
  5. Formulareingaben mit den Neuerungen in HTML5 optimieren
  6. Multimedia auf Ihren Seiten ohne Plug-in einbauen
  7. Fazit 

Das Gelernte setzen Sie zwischendurch immer wieder praktisch um, indem Sie mit den neuen HTML5-Elementen die Startseite von video2brain nachbauen. CSS spielt dabei in diesem Training zwar eine Nebenrolle, wird aber zur Gestaltung der Beispielseite natürlich eingesetzt.

Teil I: HTML5 im Überblick

Im ersten Teil des Videotrainings gibt es die folgenden Filme: 

  • HTML5 für Webdesigner - eine Einführung 
  • Die Entstehung von HTML5 
  • Die Designprinzipien von HTML5 
  • Der HTML5-Showcase von Apple 
  • HTML5: Anwendungen im Browser 
  • Quellen und Nachschlagewerke zu HTML5 

Damit ist der Grundstein für die praktische Anwendung gelegt, die im nächsten Teil beginnt. 

Teil II: HTML5 und Layoutbereiche

Der praktische Teil des Videotrainings beginnt 

  • Ein Grundgerüst in HTML5 (siehe Beispielfilm) 
  • HTML5: Layoutbereiche im Überblick
  • Der Kopfbereich zwischen <header> und </header>
  • Navigationsbereiche zwischen <nav> und </nav>
  • Der Hauptinhaltsbereich einer Seite: <main>
  • Ergänzenden Inhalt auszeichnen mit <aside>
  • Der Fußbereich: <footer>

Der folgende Beispielfilm zeigt die Erstellung eines Grundgerüstes für eine Webseite mit HTML5 (05:14 min). 

Teil III: HTML5-Layoutbereiche - Beispiel-Skizze

In diesem Teil wenden Sie das bisher Gelernte praktisch an, indem Sie mit den neuen HTML5-Elementen eine Skizze der video2brain-Startseite erstellen und anschließend mit CSS gestalten: 

  1. Der Vorspann im <head>
  2. Der Kopfbereich mit <header> (siehe Beispielfilm) 
  3. Der Navigationsbereich mit <nav>
  4. Basisformatierung mit CSS 
  5. Layoutbereiche per CSS gestalten 
  6. Navigationsbereiche per CSS gestalten 

Am Ende dieses Teils haben Sie den Rohbau der Beispielseite mit allen relevanten Layoutbereichen erstellt und grundlegend gestaltet. Der folgende Film zeigt die Erstellung des Kopfbereiches (03:32 min). 

Teil IV: HTML5 und Inhalte

Im vierten Teil des Trainings geht es um die Gestaltung der Inhalte innerhalb der Layoutbereiche: 

  • HTML5-Elemente für Inhalte im Überblick 
  • Abschnitte erstellen mit <section>
  • Eigenständige inhaltliche Abschnitte mit <article> 
  • Objekte beschriften mit <figure> und <figcaption> 
  • Datum und Zeit mit <time> 
  • Kleinere Änderungen in HTML5  

Danach geht es weiter mit der Komplettierung der Startseite von video2brain: 

  1. Inhaltsbereich in Abschnitte unterteilen 
  2. Abschnitte per CSS gestalten 

Der Nachbau der Startseite von video2brain nimmt damit langsam Formen an. Der folgende Film zeigt die Arbeit mit dem HTML5-Element <time> (05:11 min).

Teil V: HTML5 und Formulare

Im vierten Teil des Trainings geht es um die Gestaltung der Inhalte innerhalb der Layoutbereiche: 

  • Neue Attribute in HTML5
  • Neue Felder für E-Mail-Adressen, Telefonnummern und URLs
  • Formularfelder für Datums- und Zeitangaben (siehe Beispielfilm) 

Danach geht es weiter mit der Komplettierung der Startseite von video2brain: 

  1. Das Suchformular einbauen 
  2. Das Suchformular gestalten 

Der Nachbau der Startseite von video2brain wird langsam komplettiert. 

Teil VI: HTML5 und Multimedia

Im vierten Teil des Trainings geht es um die Gestaltung der Inhalte innerhalb der Layoutbereiche: 

  • Audioformate und Browser im Überblick 
  • Die Einbindung von <audio> im Browser 
  • Videoformate und Browser im Überblick (siehe Beispielfilm) 
  • Videohosting: Videos im Browser einbinden 

Zum Abschluss wird auf der Beispielseite der erste Film dieses Videotrainings eingebunden: 

  1. Video einbinden per HTML5 

Teil VII: HTML5 im Alltag

Im letzten Teil wird ein Fazit gezogen und das Gelernte auf die Alltagstauglichkeit überprüft: 

  • HTML5-Nachhilfe für alte und ganz alte Browser 
  • Fazit: HTML5 für Webdesigner

Und damit sind die drei Stunden auch schon wieder rum. 

Peter Müller - Autor und Dozent

Mein Name ist Peter Müller. Ich bin Autor diverser Fachbücher und Videotrainings, Dozent und Webworker.

Ab und an schreibe ich hier im Blog Beiträge zu den verschiedensten Themen, aber meistens hat es was mit dem Web zu tun.