Crashkurs

Internet -> leicht gemacht

START

Lerne die Welt des Internets kennen

Multimedia- / HTML Crashkurs

Der Prozess

Die Welt des Internets

Multimedia Beispiele

Grundbegriffe

Ende

Wissens-Quiz

HTML Grundkurs

Informatik

HTML Aufgaben

Schwerpunkte

Index

Vertiefe dein Können

Step 4

Abschluss, sehe was du geschafft hast.

Step 3

Meistere Aufgaben und stell dein gelerntes auf die Pobe

Lerne die Multimedia-Welt kennen

Step 2

Step 1

00 Was soll erreicht werden? Dein Ziel

+ info

+ info

+ info

+ info

Internet = Informatik? HTTP = Multimedia? WWW = HTML? HTML = Informatik?

INFO

Los gehts? Aber womit haben wir es zu tun?

01 Los gehts...

02 Informatik

INFO

Edsger Wybe Dijkstra

"In der Informatik geht es genauso wenig um Computer wie in der Astronomie um Teleskope"

Informatik setzt sich aus Infomation und Automatik zusammen. Aber was ist eigentlich Information?

02 Information

INFO

Ein Medium ist ein materieller Zeichenträger, der Begriff umfasst immer zwei Aspekte:

Medienbegriff

03 Medium

2. einen symbolischen

1. einen materiellen

Begriff nach Yass:

Multimedia (MM) ist eine Technologie, die verschiedene Medien und Wege verwendet, um bei der Vermittlung von Informationen mehrere Sinnesorgane gleichzeitig anzusprechen. Charakterisierend für eine Multimediaanwendung ist, dass sie mehrere Medien zu einem integralen Gesamtwerk kombiniert. Dabei werden offene, netzwerkartig verknüpfte, nichtlineare Strukturen verwendet.

Multimedia was ist das?

04 Multimedia

(im engeren Sinn)

Nach Steinmetz ist ein Multimediasystem durch die rechnergesteuerte, integrierte Erzeugung, Manipulation, Darstellung, Speicherung und Kommunikation von unabhängigen Informationen gekennzeichnet, die in mindestens einem kontinuierlichen (zeitabhängigen) und einem diskreten (zeitunabhängigen) Medium kodiert sind.

Multimediasystem

05 Multimediasystem

Anwendungs-gebiete

MM-Anwendungen können für den Desktop-Einsatz, den Online-Bereich (Internet) oder für beides konzipiert werden. -> Ausbildung -> Kommunikation-> Online-Präsentationen im Internet -> Deskop-Präsenation und -Dokumenation -> Spiele und Entertaiment -> Interaktives Fernsehen -> Virtual Reality / Augmented Reality-> Electronic Publishing-> Kiosksysteme

06 Multimediagebiete

07 Internet

Das Internet verkörpert einen weltweiten Verbund von Computernetzwerken, die auf der Basis gemeinsamer Protokolle miteinander kommunizieren.

World Wide Web Multimedia orientiertes und hyperlink basiertes Informationssystem, das auch Schnittstellen zu anderen Internetdiensten bietet (Dienst mit wohl größtem Anteil an der Entwicklung der Popularität des Internets)

08 WWW

Die Suchmaschinene Google ist da.

1995

Der erste Internet Explorer

1998

...

Anfangs hieß das Web noch Mesh (Geflecht)

1991

Weltweit erste Webseite info.cern.ch wurde veröffentlicht

1989

Begründet durch T. Berners-Lee und R. Cailleau am Genfer Cern

09 Geschichte des WWW

2011

IP-Adressen gehen aus.

2013

Das Fernsehen wandert ins Internet

2004 2005

Facebook startet und ein Jahr später YouTube

2000

Das Internet wird mobil auf Telefonen

2000er Jahre

Mit dem sogenannten Web 2.0 wurden Webseiten populär

09 Geschichte des WWW

10 Dokument

Wir wollen unter einem Dokument eine Sammlung von Medienobjekten zusammen mit einer Menge von strukturellen Beziehungen zwischen diesen Objekten verstehen. Ergänzend können Präsentations- und Interaktionsregeln gegeben sein.

Arbeitsdefinition Dokument

11 Hypertext

INFO

“Hypertext is text which is not constrained to be linear” Ted Nelson, 1965

Hypertext

12 HTTP

INFO

Hypertext Tranfer Protocol (HTTP) ist ein Protokoll in der Anwendungsschicht des Internet für die Kommunikation zwischen Browsern und Servern im WWW.

HTTP

Pause

INFO

Bevor wir mit dem spannenden Thema HTML weiter machen wird dein Wissen zum vergangenen Stoff/Input geprüft. Ab hier gibt es kein Zurück!

Zwischenpause.

EIn Hypertext Dokumente sind auch viele Internetwebseiten, aber nicht jede.

Wissens-Quiz

Right!

next

Explanation: Du hast es richtig erfasst. Es wurde erst von IPv4 auf IPv6 aufgestockt, ob diese jemals verbraucht werden, können wir zu diesem Zeitpunkt noch nicht sagen.

Wissens-Quiz

RIGHT!

next

Wissens-Quiz

TRY AGAIN

ERROR!

Wrong! Die Antwort war leider falsch.

START

Teste dich auf dein Können. Zähle deine richtigen Antworten.

Quiz Was hast du gelernt? Wie gut ist dein Wissen?

EMPEZAR

Wissens-Quiz

Vielleicht

Ja

Nein

In der Informatik geht es um Hardware.

QUESTION 1/10

Ein Medium ist...

Wissens-Quiz

symbolische Darstellung

ein Code des Inhalts einer Kommunikation

ein materieller Zeichenträger

QUESTION 2/10

Was versteht man unter Hypertext Dokument?

Wissens-Quiz

Jede Internetwebseite

Das Dokument enthält Formatierungsanweisungen und Hyperlinks

Eine Markup Language

QUESTION 3/10

Wissens-Quiz

Hypertransfer Textprotocol

Hypertextprotocol

HyperText Transfer Protocol

Was heißt HTTP ausgeschrieben?

QUESTION 4/10

Wissens-Quiz

Falsch

Wahr

Manschmal

Information ist Wissen was ein Absender einem Empfänger vermittel.

QUESTION 5/10

Informatik ist eine Zusammenstellung zwischen Information und Mathematik.

Wissens-Quiz

Richtig

Falsch

QUESTION 6/10

vs

Tim Berners-Lee

Hedy Lamarr

Bill Gates

Wer hat HTML und das WWW erfunden?

QUESTION 7/10

Wissens-Quiz

Medien und Wege

Materialien

Gebiete

Multimedia ist eine Technologie die verschiedene ... verwendet.

QUESTION 8/10

Wissens-Quiz

IP-Adressen halten für immer.

Wissens-Quiz

Leider nein

Klaro

QUESTION 9/10

Das Internet verkörpert einen weltweiten Verbund von 1. Die Basis dafür bieten 2.

Wissens-Quiz

1. Protokolle 2. Computer

1. Netzwerke 2. Protokolle

1. Netzwerke2. Computer

QUESTION 10/10

2-4 corrects

5-7 correct

8-10 correct

RESULTS

Deine Ergebnisse vom Wissens-Quiz

Platz 3

Platz 2

Platz 1

Wie gehts weiter?

Hier lernst du alle Basics um ein HTML-Dokument zu erstellen und den Abschlusstest zu bewältigen.

Gleich geht es mit der Vertiefung deiner HTML-Kentnisse weiter.

Dein erstes Abzeichen hast du erhalten.

INFO

ist als Format für WWW-Dokumente anzusehen. Mittels HTML können Dokumente schnell und einfach erstellt und einem großen Publikumskreis im WWW zugänglich gemacht werden.Entwicklung geht wie beim HTTP auf T. Berners-Lee zurück. Strukturierungsmöglichkeiten sind:Absätze, Tabellen, Verweise, Grafik-Einbindung, Formulare, Einbindung von Multimedia-Objekten.

HTML (Hypertext Markup Languages)

Lektion 13 HTML

INFO

Wenn wir jetzt selbst etwas mit HTML machen wollen, brauchen wir einen Webbrowser und einen Editor. Ich benutzte gerne Firefox als Benutzeroberfläche und Atom oder Notepad++ als Editor. Entscheide selbst was zu dir passt. Jede belieblige Oberfläche die einen Zugang zum Internet bietet ist geeignet.

Schon mal einen HTML-Code gesehen?Wie wir wissen hat jede Webseite ein HTML-Gerüst, wenn du z.B. in einem neuen Tab eine beliebige Webseite aufrufst und auf F12 tipps, öffnet sich der Quellcode der jeweiligen Seite. Abhänig von Windows und Apple IOS kannst du auch mit der rechten Maustaste dir den Seitenquelltest anzeigen lassen.

+ info

Lektion HTML

Erste Schritte: Öffne dafür den Editor deiner Wahl und erstelle ein leeres html Dokument mit dem Namen index.html Dieses kannst du jetzt in deinen Webbrowser öffnen, mit Datei öffnen oder einfach mit der Maus reinziehen. Wenn du eine weiße Seite siehst hast du alles richtig gemacht. Wir wollen diese Seite jetzt mit Leben füllen. Dafür kehre zurück in deinen Editor. Zunächste wollen wir uns anschauen wie funktionieren einzelne Codes.

+ info

Lektion HTML

Was ist was? Jedes HTML-Dokument hat ein Kopf, Titel und Körper. Die HTML-Codes lassen sich gut aus dem Englischen ableiten. Kopf heißt head, Titel title, Körper body. Die Schreibweise der einzelnen Codes sind in spitzen Klammern geschrieben. Ein anfangs Tag (so werden die einzelnen Codes genannt) sieht so aus <...> und am Ende wird die Klammer mit einem Slash geschlossen </...>. Da haben wir schonmal die allerwichtigste Regel gelernt.

+ info

Lektion HTML

INFO

+ info

Wie funktionierts? Du kannst dir das Codesystem wie ein Baum vorstellen. Jedes Jahr wächst der Baum und bekommt Ringe die geschichtet sind. Der HTML-Code hat auch ein System was in einander greift. Auf dem Bild siehst du ein Beispielt wie es korrekt und falsch dargestellt ist.

+ info

Lektion HTML

Element

Text

Attribut

Text

Element

Root Element

""Text des Links"

href

"Seitentitel"

"Überschrift 1"

+ info

<title>

<hi>

<a

<head>

<body>

DOM-Elementbaum <html>

Document Object Model

Lektion HTML

Hallo Welt

meine erste Seite

+ info

Übertrage in deine HTML-Datei die Tags im grünen Feld.

+ info

Lektion HTML

Lektion HTML

Probiere es doch gleich mal aus und schau was passiert (oder auch nicht passiert).

Über diese Anweisung können Kommentare im HTML-Code gemacht werden bzw. Teile des auskommentiert werden. Somit sind diese Teile für einen Browser nicht existent. Das ist z.B. gut zum Testen von HTML-Befehlen.

HTML Befehl (HTML-Tag) Beschreibung <!-- KOMMENTAR --> In diesem Fall ist der <!--QUELLCODE ohne Wirkung-->

Wenn du in deinem HTML Dokument Befehle Kommentieren oder Auskommentieren magst geht das ganz einfach.

Lektion HTML

+ class

+ id

<span class="Name">BEREICH</span>

05

<span id="Name">BEREICH</span>

04

<div class="Name">BEREICH</div>

03

<div id="Name">BEREICH</div>

02

Ein weiterer wichtiger Punkt ist das definieren von Bereichen mit div bzw. span und den Attributen id und class.

01

span

div

Lektion HTML

Schau sie dir in Ruhe an.

Bevor wir zum Test starten hier noch die wichtigsten Tags zur Verwendung im HTML.

INFO

HTML Formulare

HTML Tabellen

+ info

Die Möglichkeiten einer rein HTML formatierten Seiten

Lektion HTML

+ info

Literaturempfehlung http://wiki.selfhtml.org

Lektion HTML

Timeline

Ein kurzer Blick auf die Timeline. Wir befinden uns kurz vor der Ziellinie. Noch ein Schritt und du hast es geschafft.

01

+ info

Step 4

Abschlusstest, sehe was du drauf hast.

04

Step 1

Lerne die Multimedia-Welt mit ihren verschiedenen Grundbegriffen kennen

Step 2

02

Meistere Aufgaben und stelle dein gelerntes auf die Probe

Step 3

03

Vertiefe dein Können in HTML

START

Dein letzter Test für diesen Kurs, prüfe deine ganzen HTML-Skills

Jetzt gehts los mit dem HTML-Basic Abschlusstest

Wrong!

Wrong!

Volltreffer!

Richtig!

Yeah!

Next question

Yeah!

Resultat

HTML Basic

HTML steht für...

Hyper Text Markup Language

Hyperlink Markup Language

Hyper Text Modul Language

Question 1/10

HTML Basic

Question 2/10

Was ist der richtige HTML-Code bei der Verwendung eines Bildes.

<img>

<picture>

<image>

Question 1/10

HTML Basic

Question 3/10

Wie schreibt man ein HTML Kommentar?

<!-- This is an HTML comment -->

/* This is an HTML comment */

// This is an HTML comment

Question 1/10

HTML Basic

Question 4/10

<h3> is the biggest heading tag.

false

true

Question 1/10

vs

HTML Basic

Question 5/10

<italic>Some text.</italic>

Wie schreibt man einen Text kursiv?

<i>Some text.</i>

<strong>Some text.</strong>

Question 1/10

HTML Basic

Question 6/10

1. <a href> 2. </a>

Jede HTML Verlinkung hat ein 1. am Anfang und 2. am ende eines Tags

1. <a> 2. </a>

1. <a href> 2. </a href>

Question 1/10

HTML Basic

Question 7/10

bold / fett

Wofür steht <br>?

Brücke

neuer Absatz

Question 1/10

HTML Basic

Question 1/10

ordnet ein Element einer oder mehreren Klassen zu

Welche Rolle spielt das class-Attribut in html?

weist einem Tag einen Namen zu

macht das gleiche wie ein ID-Attribut

Question 1/10

HTML Basic

Question 1/10

nein

Ist es möglich eine Tabelle in einer anderen Tabelle zu nutzen/zu erstellen?

ja

Question 1/10

HTML Basic

Question 10/10

<bold>

Welcher Tag steht für fett?

<b>

Question 1/10

HTML Basic

Ja muss es sogar

Nein, alle Tags müssen geschlossen werden

Nein, nur in Ausnahmefällen

Zusatzfrage Kann <br> ohne </br> stehen?

Question 1/5

Play again

8-10 Correct

0-4 Correct

5-7 Correct

Results

Du hast alle deine Tests gemeistert wuhu einmal Konfetti bitte!!!

Congratulations!

Teile mir gern mit einem Feedback mit wie es für dich war, dass wäre super und ich würde mich sehr freuen :)

Ich hoffe du fühlst dich jetzt nicht erschlagen von dem ganzen Input und bist mit deinen Resultaten zu frieden.

Content create by S. Handge Bilderhost by genial.ly

Du glaubst, dass hier ist das Ende? Jedes Ende hat auch einen Anfang. Vielleicht sehen wir uns beim nächsten Kurs. Bis bald.