nonverbal Lernvideos

Links zu den Youtube Video-Lektionen:

Link zur KOMPLETTEN Webkurs-Playlist

Nur ein Klick für Lektion 1:

Grundlagen der Website-Erstellung:
Einrichten der Arbeitsumgebung,
Download und Installation des Texteditors Notepad++

00:00 Intro
01:30 Einrichten der Arbeitsumgebung
01:50 Download des Editors notepad++
03:20 Installation von notepad++
04:25 Outro und Link zur nächsten Lektion

Dauer: ca. 5 min

Lektion 1

Nur ein Klick für Lektion 2:

Grundlagen der Website-Erstellung:
Eingabe von Quellcode in den Editor,
Datei speichern mit Strg+S,
Datei betrachten im Standard-Browser,
Wechseln zwischen den Fenstern mit Alt+TAB,
<html>, <head>, <body>, Überschriften <h1> bis <h6>,
unterstrichener Text.

00:00 - Intro
00:35 - Erste Texteingabe in notepad++
00:55 - Erster HTML-Tag
01:15 - html Tag
02:20 - body Tag
03:30 - Speichern der Seite
04:38 - Anzeigen der Datei im Browser
05:20 - Anordnen und wechseln der Fenster
06:30 - Ansicht im Browser aktualisieren
07:15 - Überschrift h1 (bis h6) Tag
10:00 - Outro und Link zur nächsten Lektion

Dauer: ca. 10 min

Lektion 2

Nur ein Klick für Lektion 3:

Grundlagen der Website-Erstellung:
Erstellung von Listen, <ol>, <li>
Tastenkombinationen in
notepad++
- Zeile duplizieren
- Zeile(n) verschieben
und Firefox
- Seite aktualisieren

00:00 Intro
00:30 Listen in html, ol-Tag (nummerierte Liste)
01:10 Duplizieren von Zeilen in notepad++
01:54 li-Tag für Listenpunkt / Listenelement
04:00 Speichern, Fenster wechseln, Ansicht aktualisieren
07:25 Outro und Link zur nächsten Lektion

Dauer: ca. 9 min

Lektion 3

Nur ein Klick für Lektion 4:

Grundlagen der Website-Erstellung:
Erstellung eines HEAD-Bereichs, <html>,
Erstellen eines TITLE im HEAD-Bereich, <title>

00:00 Intro
00:30 ul-Tag, unordered list, Liste mit Aufzählungszeichen
01:12 Ganze Abschnitte Duplizieren im notepad++
03:05 Titel im Head Bereich angeben, title-Tag
05:10 Zusammenfassung der Lektion
06:05 Outro und Link zur nächsten Lektion

Dauer: ca. 6 min

Lektion 4

Nur ein Klick für Lektion 5:

Inline- und Block-Elemente
Tags:<p>, <b>, <i>, <sub>, <sup>
Zoom im Browser und Editor

00:00 Intro
00:35 Der p-Tag, Paragraph (Text-Absatz), Unterschied: Block- und Inline-Elemente
04:30 Textauszeichnungen: fett, kursiv, unterstrichen (b, i, und u-Teg)
06:20 Zoom im Browser und im Editor verwenden
07:25 Tief- und hochgestellter Text, sub- und sup-Tag
08:45 Outro und Link zur nächsten Lektion

Dauer: ca. 9 min

Hier der Text zum Kopieren für die Übung mit den Absätzen:

			
Prinzipiell unterscheiden wir in HTML zwischen Blockelementen
und Inlineelementen. Nach Blockelementen wird vom Browser
automatisch eine neue Zeile begonnen. Beim P-Tag zum Beispiel
wird automatisch ein größerer Zeilenabstand zum vorherigen und
nachfolgenden Text eingehalten, als der Abstand zwischen den
Zeilen innerhalb des Absatzes.

Lektion 5

Nur ein Klick für Lektion 6:

Grundlagen der Website-Erstellung
HTML Grundlagen:
Formatierung von Textabsätzen mittels STYLES
Textfarbe und Hintergrundfarbe von Text-Absätzen
Begriff: Cascading Style Sheets, CSS

00:00 Intro
00:40 Erste Verwendung von STYLES
02:30 Eingabe von Style-Eigenschaft für p-Tag
05:25 Schrift-Farbe einstellen
07:25 Outro und Link zur nächsten Lektion

Dauer: ca. 8 min

Lektion 6

Nur ein Klick für Lektion 7:

Grundlagen der Website-Erstellung:
Absatzformatierungen mit css,
Breite in Prozent und rem,
Einheiten in css Eigenschaften für Abstände und Breiten,
Platzierung der css-Anweisungen:
direkt im HTML-Tag oder auch
im HEAD der Seite,
Vorrang der css-Anweisung, wenn sie direkt im HTML-Tag steht.

00:00 Intro
01:10 Einrücken von ganzen markieren Absätzen in notepad++
01:45 Breite von Absätzen verändern, style-Anweisung width
03:10 Schriftbreite rem (root element m)
06:00 Vorrang von STYLE-Angaben direkt beim Tag, vor Angaben im HEAD
08:10 Style Angabe im HEAD, Selektor{ style-Angaben }
10:35 Outro und Link zur nächsten Lektion

Dauer: ca. 11 min

Hier der Text zum Kopieren für die Übung mit den Absätzen:

					
Es gibt drei Orte, wo man style-Anweisungen platzieren kann.
Den ersten Ort haben wir bereits kennengelernt, nämlich gleich
direkt im HTML-Tag. Man gibt dem Browser mit STYLE= eine möglichkeit
seine Formatierungen zu lesen und auf das entsprechende Element 
anzuwenden. Der zweite Ort, wo man style-Anweisungen noch
platzieren kann, ist im HEAD-Bereich der HTML-Seite.
Man fügt dort einen STYLE-Anfang und einen STYLE-Ende Tag ein.
Dazwischen kommen für den jeweiligen HTML-Tag die style-Anweisungen.

Lektion 7

Nur ein Klick für Lektion 8:

Grundlagen der Website-Erstellung
HTML Grundlagen:
Anzeigen von Bildern
Der <img> - Tag ist ein Inline-Element und ein Single-Tag
Pfadangaben der Bilddatei mit ./ oder ../ beginnend

00:00 Intro
00:20 Grafiken (Bilder) einbinden
00:45 Der Image-Tag ( = ein Single-Tag, ohne Close-Tag )
01:30 Urheberrechte, persönliche Rechte an Bildern!
02:15 Download eines Bildes von meiner Homepage
04:00 Ein seperater Ordner für die Fotos ist übersichtlicher
04:45 Image-Tag in die Seite einbauen
08:00 Verhalten des Bildes wie ein Buchstabe in der Zeile
08:15 Kommentare in den Styles, auskommentieren von Anweisungen
10:00 Outro und Link zur nächsten Lektion

Dauer: ca. 11 min

Hier das Foto der alten Donau zum Kopieren für die Übung mit dem Image-Tag:

Bild zum Downloaden

Lektion 8

Nur ein Klick für Lektion 9:

Grundlagen der Website-Erstellung
HTML Grundlagen:
Der Zeilenumbruch mit dem br-Tag,
Wie mache ich aus dem Inline-Element img ein Block-Element
Zentrale Formatierungen im HEAD der Seite für alle Bilder

00:00 Intro
02:05 Zeilenumbrüche im Quellcode
02:35 Break-Row-Tag, br
04:20 Style-Anweisung für Image, display:block
06:30 Anweisung für alle Bilder der Seite im Head
07:30 Rahmen um alle Bilder, border
08:30 Outro und Link zur nächsten Lektion

Dauer: ca. 9 min

Lektion 9

Nur ein Klick für Lektion 10:

Grundlagen der Website-Erstellung
HTML Grundlagen:
Der Zeilenumbruch mit dem br-Tag,
Kommentare im CSS-Code
Kommentare im HTML-Code
Mehrere Selektoren bei CSS Style Anweisung

00:00 Intro
00:38 Kommentare allgemein
02:00 Zwei Selektoren vor CSS Anweisung
02:55 Eingabe Kommentar bei CSS
03:10 Eingabe Kommentar bei HTML
05:00 Outro und Link zur nächsten Lektion

Dauer: ca. 6 min

Lektion 10

nonverbal.bplaced.net

Fragen?

Feedback:

Weitere Videos?