Grundlagen-Tutorial HTML, CSS und JavaScript

Herzlich willkommen im Kurs!

Für das Verständnis von HTML hilft es, genauer zu verstehen, was HTML eigentlich ist. Diese Lektion behandelt genau diese Frage.

Die entscheidende Frage, wenn du gerade einsteigst: Wie werden HTML-Dokumente erstellt, angezeigt oder verändert? In diesem Video findest du die Antwort.

Die Basis von HTML-Dokumenten sind die sogenannten Tags. Das Konzept lernst du in dieser Lektion kennen.

HTML-Dokumente bestehen aus einem Kopfbereich mit Informationen über das Dokument und dem sichtbaren Inhalt. In dieser Lektion geht es zunächst um den Kopfbereich (head).

Die eigentlichen Inhalte werden im body-Bereich hinterlegt. Diese grundlegende Unterteilung musst du unbedingt verstanden haben. Diese Lektion ist daher in jedem Fall Pflicht!

Gerade umfangreiche Dokumente profitieren von Kommentaren, die nicht auf der Webseite selbst angezeigt werden. Sie können den Code übersichtlicher machen und dokumentieren. Lerne, sie zu erstellen.

Im Web begegnen dir immer wieder Pfadangaben – und zwar in zwei Varianten: als relative oder als absolute Pfadangabe. Schaue diese Lektion an, um das Konzept zu verstehen.

Verweise innerhalb einer Webseite sind extrem häufig. Die Umsetzung findest du in diesem Beitrag.

Verweise auf andere Webseiten sind ebenso wichtig und gehören ebenfalls zum Alltag im Internet. Zudem gibt es mit dem Target eine Angabe, wie die Links geöffnet werden. Lerne, wie du das umsetzt.

Verweise innerhalb von einem Dokument werden auch Anker genannt. Lerne, sie zu setzen und auf Bereiche auf der aktuellen Seite zu verweisen.

Zu einer hierarchischen Struktur gehören unter anderem Überschriften. Hier lernst du die verfügbaren Elemente kennen.

Leerzeichen und Zeilenumbrüche in HTML-Dokumenten sind begrenzt. Es ist wichtig, dass du dieses Konzept kennst.

In einem Text spielen Absätze eine wichtige Rolle. Hier lernst du sie zu setzen.

Gerade im Web müssen Texte übersichtlich sein. Listen helfen dem Betrachter beim Überfliegen. Daher ist die Lektion über geordnete und ungeordnete Listen absolute Pflicht.

Tabellen sind enorm wichtig, um Daten tabellarisch aufzubereiten. Hier lernst du die Grundlagen kennen.

Ein Web ohne Bilder ist nicht vorstellbar. Du lernst hier, wie du Bilder einbindest.

Lerne Sonderzeichen als HTML-Entitäten in deinen Dokumenten unterzubringen.

Über iframes bettest du andere Webseiten direkt in deiner Webseite ein.

JavaScripts werden in HTML-Dokumente eingebunden. Hier lernst du, wie das geht.

In der ersten HTML-Praxisübung geht es um Textaufbereitung und das Setzen von Überschriften.

Hier erstellst du ein Rezept als HTML-Dokument und verwendest dabei grundlegende HTML-Elemente.

Das Wissen rund um Tabellen wird hier nun in der Praxis angewandt.

Lerne das Konzept der Cascading Style Sheets kennen.

Lerne, CSS-Statements direkt den Elementen zuzuweisen.

Interne Stylesheets sind ein weiterer Weg, direkt im Dokument Anweisungen zu hinterlegen.

Ein sehr häufiger Fall: die Stylesheets werden in externe Dateien ausgelagert und eingebunden.

Für das Styling sind die Attribute „class“ und „id“ extrem wichtig. Lerne sie hier kennen.

Gerade Container spielen eine wichtige Rolle bei der Arbeit mit CSS. Hier lernst du das Konzept am Beispiel vom div-Tag kennen.

Mit dem float-Attribut können Elemente unterschiedlich positioniert werden. Ein zentrales Element beim Design. Pflichtlektion!

Auch das position-Attribut ist extrem wichtig und gehört auf jeden CSS-Lehrplan.

Lerne die verschiedenen Angaben für Abstände („padding“ und „margin“) kennen.

Die Breite und Höhe (height und width) sind Thema in dieser Lektion.

HTML-Elemente können mit einem Rahmen dargestellt werden. Dazu gibt es das border-Attribut, welches du in diesem Video kennenlernst.

Verschiedene Schriftgrößen hat jeder schon einmal genutzt. Nach dieser Lektion kannst du sie mit CSS festlegen.

Schriftarten sind nicht immer auf jedem Rechner verfügbar. Darum werden im Web eher Schriftfamilien definiert. Lerne in diesem Video, wie das geht.

Die Basis der Textgestaltung: fetter, kursiver und unterstrichener Text. In dieser Lektion stelle ich dir die CSS-Anweisungen vor.

Die Ausrichtung von Text ist auch aus der Textverarbeitung bekannt und auch im Web nicht unüblich. Finde heraus, wie das mit CSS funktioniert.

Das Standarddesign von Links kann mittels CSS deutlich verbessert werden. Lerne die verschiedenen Zustände von Links und die entsprechenden CSS-Anweisungen kennen.

Eine kurze Übersicht zur Frage: „Was ist JavaScript eigentlich genau?“

In diesem Crashkurs bindest du JavaScript in ein HTML-Dokument ein. Zunächst lernst du dies direkt im Dokument zu hinterlegen.

Externe JavaScripts sind ebenfalls wichtig und im Web ständig präsent.

Lerne das „Document Object Model“ kennen.

Daten ausgeben musst du in TVML/TVJS auf diesem Weg nicht, aber es ist trotzdem wichtig für die weiteren Beispiele.

Ein wesentliches Feature von JavaScript ist die Steuerung durch Events. Hier lernst du das Konzept am Beispiel von Klick-Events kennen.

Lerne, wie du auf Elemente zugreifst und den Wert ändern kannst.

Variablen – zentrales Konzept jeder Programmiersprache. Hier lernst du, wie sie in JavaScript angelegt werden.

Auch wenn JavaScript keine expliziten Datentypen bei der Deklaration verwendet, solltest du das Konzept dennoch verstehen.

Ein Computer (zu Deutsch „Rechner“) ist ohne einfache Arithmetik nicht in der Lage etwas zu berechnen. JavaScript kann dies natürlich auch.

Auch wenn du sie nicht direkt selbst verwendest, begegnen dir zusammengesetzte/kombinierte Zuweisungen in der Praxis häufiger. Gut, wenn du die Syntax lesen kannst!

Ohne Bedingungen ist die Programmierung nur schwer vorstellbar.

Auch das Konzept der Wiederholung ist enorm wichtig. Hier lernst Du eine Variante in JavaScript kennen.

Auch while-Schleifen haben ihren Einsatzzweck. Gut, wenn du auch sie kennst.

Funktionen wirst du auch in TVJS nutzen. Ein wichtiges Konzept, das es zu verstehen gilt.

Um dich vernünftig im Code zu bewegen, musst du die Gültigkeitsbereiche von JavaScript kennen (Scopes).

Hier geht es noch einmal und etwas mehr im Detail um Events.

Strings begegnen dir vermutlich in jeder App. Auch sie gehören deshalb unbedingt in einen Crashkurs.

Themen wie Zufallszahlen und andere aufwendige Berechnungen sind ebenfalls wichtig.

Auch Arrays werden dir mit Sicherheit im JavaScript- und TVJS-Umfeld begegnen. Gut, wenn du sie kennst.

Auch in TVJS werden Objekte eingesetzt. Du solltest also mindestens die JavaScript-Umsetzung kennen.

Eigenschaften gehören zur Objektorientierung und sollten grundsätzlich verstanden werden.

Auch Methoden sind wichtig und werden dir in den TVJS-Beispielen häufiger begegnen.