Crashkurs

Internet -> leicht gemacht

Multimedia- / HTML Crashkurs

Lerne die Welt des Internets kennen

START

Der Prozess

Grundbegriffe

Die Welt des Internets

Informatik

Index

Schwerpunkte

Ende

HTML Grundkurs

Wissens-Quiz

HTML Aufgaben

Multimedia Beispiele

00 Was soll erreicht werden? Dein Ziel

Step 4

Step 2

Step 3

Step 1

Meistere Aufgaben und stell dein gelerntes auf die Pobe

Abschluss, sehe was du geschafft hast.

Vertiefe dein Können

Lerne die Multimedia-Welt kennen

+ info

+ info

+ info

+ info

01 Los gehts...

Los gehts? Aber womit haben wir es zu tun?

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

INFO

02 Informatik

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

Edsger Wybe Dijkstra

INFO

02 Information

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

INFO

03 Medium

Medienbegriff

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

1. einen materiellen

2. einen symbolischen

04 Multimedia

Multimedia was ist das?

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.

05 Multimediasystem

Multimediasystem

(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.

06 Multimediagebiete

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

07 Internet

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

08 WWW

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)

09 Geschichte des WWW

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

1989

1991

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

Anfangs hieß das Web noch Mesh (Geflecht)

...

1995

Der erste Internet Explorer

Die Suchmaschinene Google ist da.

1998

09 Geschichte des WWW

2000er Jahre

Mit dem sogenannten Web 2.0 wurden Webseiten populär

Das Internet wird mobil auf Telefonen

2000

2004 2005

Facebook startet und ein Jahr später YouTube

IP-Adressen gehen aus.

2011

2013

Das Fernsehen wandert ins Internet

10 Dokument

Arbeitsdefinition 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.

11 Hypertext

Hypertext

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

INFO

12 HTTP

HTTP

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

INFO

Pause

Zwischenpause.

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!

INFO

Wissens-Quiz

Right!

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

next

Wissens-Quiz

RIGHT!

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.

next

Wissens-Quiz

ERROR!

Wrong! Die Antwort war leider falsch.

TRY AGAIN

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

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

START

EMPEZAR

Wissens-Quiz

QUESTION 1/10

In der Informatik geht es um Hardware.

Ja

Nein

Vielleicht

Wissens-Quiz

QUESTION 2/10

Ein Medium ist...

ein materieller Zeichenträger

symbolische Darstellung

ein Code des Inhalts einer Kommunikation

Wissens-Quiz

QUESTION 3/10

Was versteht man unter Hypertext Dokument?

Das Dokument enthält Formatierungsanweisungen und Hyperlinks

Jede Internetwebseite

Eine Markup Language

Wissens-Quiz

QUESTION 4/10

Was heißt HTTP ausgeschrieben?

HyperText Transfer Protocol

Hypertransfer Textprotocol

Hypertextprotocol

Wissens-Quiz

QUESTION 5/10

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

Wahr

Manschmal

Falsch

Wissens-Quiz

QUESTION 6/10

Informatik ist eine Zusammenstellung zwischen Information und Mathematik.

vs

Richtig

Falsch

Wissens-Quiz

QUESTION 7/10

Wer hat HTML und das WWW erfunden?

Tim Berners-Lee

Bill Gates

Hedy Lamarr

Wissens-Quiz

QUESTION 8/10

Multimedia ist eine Technologie die verschiedene ... verwendet.

Gebiete

Materialien

Medien und Wege

Wissens-Quiz

QUESTION 9/10

IP-Adressen halten für immer.

Klaro

Leider nein

Wissens-Quiz

QUESTION 10/10

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

1. Netzwerke 2. Protokolle

1. Protokolle 2. Computer

1. Netzwerke2. Computer

Deine Ergebnisse vom Wissens-Quiz

RESULTS

Platz 2

Platz 3

Platz 1

8-10 correct

2-4 corrects

5-7 correct

Wie gehts weiter?

Dein erstes Abzeichen hast du erhalten.

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

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

INFO

Lektion 13 HTML

HTML (Hypertext Markup Languages)

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.

INFO

Lektion HTML

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.

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.

+ 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

INFO

Lektion HTML

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

+ info

Lektion HTML

DOM-Elementbaum <html>

Document Object Model

Root Element

+ info

Element

<body>

<head>

Element

<hi>

<a

<title>

"Überschrift 1"

href

""Text des Links"

"Seitentitel"

Attribut

Text

Text

Lektion HTML

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

meine erste Seite

Hallo Welt

+ info

+ info

Lektion HTML

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

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

Ü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.

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

Lektion HTML

01

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

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

02

div

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

+ class

03

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

04

+ id

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

05

span

Lektion HTML

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

Schau sie dir in Ruhe an.

INFO

Lektion HTML

Die Möglichkeiten einer rein HTML formatierten Seiten

HTML Tabellen

HTML Formulare

+ info

Lektion HTML

Literaturempfehlung http://wiki.selfhtml.org

+ info

Step 1

01

Lerne die Multimedia-Welt mit ihren verschiedenen Grundbegriffen kennen

Timeline

Step 2

02

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

Meistere Aufgaben und stelle dein gelerntes auf die Probe

Step 3

03

Vertiefe dein Können in HTML

+ info

Step 4

04

Abschlusstest, sehe was du drauf hast.

Jetzt gehts los mit dem HTML-Basic Abschlusstest

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

START

Wrong!

Wrong!

Volltreffer!

Richtig!

Yeah!

Next question

Yeah!

Resultat

Question 1/10

HTML Basic

HTML steht für...

Hyperlink Markup Language

Hyper Text Markup Language

Hyper Text Modul Language

Question 2/10

Question 1/10

HTML Basic

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

<picture>

<img>

<image>

Question 3/10

Question 1/10

HTML Basic

Wie schreibt man ein HTML Kommentar?

/* This is an HTML comment */

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

// This is an HTML comment

Question 4/10

Question 1/10

HTML Basic

<h3> is the biggest heading tag.

vs

false

true

Question 5/10

Question 1/10

HTML Basic

Wie schreibt man einen Text kursiv?

<italic>Some text.</italic>

<i>Some text.</i>

<strong>Some text.</strong>

Question 6/10

Question 1/10

HTML Basic

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

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

1. <a> 2. </a>

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

Question 7/10

Question 1/10

HTML Basic

Wofür steht <br>?

bold / fett

Brücke

neuer Absatz

Question 1/10

Question 1/10

HTML Basic

Welche Rolle spielt das class-Attribut in html?

ordnet ein Element einer oder mehreren Klassen zu

weist einem Tag einen Namen zu

macht das gleiche wie ein ID-Attribut

Question 1/10

Question 1/10

HTML Basic

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

nein

ja

Question 10/10

Question 1/10

HTML Basic

Welcher Tag steht für fett?

<bold>

<b>

Question 1/5

HTML Basic

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

Nein, alle Tags müssen geschlossen werden

Nein, nur in Ausnahmefällen

Ja muss es sogar

Results

0-4 Correct

5-7 Correct

8-10 Correct

Play again

Congratulations!

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

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

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

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

Content create by S. Handge Bilderhost by genial.ly