More creations to inspire you
TRUE FALSE GEOGRAPHY
Quizzes
ENGLISH SCHOOL VOCABULARY
Quizzes
PARTS OF SPEECH REVIEW
Quizzes
ANIMALS BY CATEGORY
Quizzes
DRACULA ESL
Quizzes
MODALS 1 BACH MARIO GAME
Quizzes
RECYCLING SORTING GAME
Quizzes
Transcript
Lerne die Welt des Internets kennen
START
Index
Schwerpunkte
HTML Aufgaben
Informatik
HTML Grundkurs
Wissens-Quiz
Ende
Grundbegriffe
Multimedia Beispiele
Die Welt des Internets
Der Prozess
+ info
+ info
+ info
+ info
Step 1
Step 2
Lerne die Multimedia-Welt kennen
Meistere Aufgaben und stell dein gelerntes auf die Pobe
Step 3
Abschluss, sehe was du geschafft hast.
Step 4
Vertiefe dein Können
Hierrunter zählen alle Grundinformationen zu Medium, Multimedia, Multimediasystem, MM Anwendungsgebiete, Internet, WWW, Dokument, Hypertext, HTTP und HTML
Dein erstes Quiz steht hier bevor. Geprüft wird das bisher erlernte im Kurs.
Im vorletzten Schritt erhälst du eine HTML Grundausbildung. Wie wird HTML benutzt und angewendet.
Zum Abschluss werden deine HTML Fähigkeiten getestet. Und danach bist du für deine eigenen Projekte gewappnet.
01 Los gehts...
INFO
Um die passenden Informationen zu klären, müssen wir erst einmal Grundwissen aufbauen.
"In der Informatik geht es genauso wenig um Computer wie in der Astronomie um Teleskope"
INFO
02 Informatik
Denn es geht mehr um die Infomationen z.B. die mittels Software vermittelt werden und weniger um die Hardware.
In unserem Kurs begrenzen wir uns auch nur auf einen sehr kleinen Teil der Informatik.
INFO
02 Information
Information ist in der Informationstheorie das Wissen, das ein Absender einem Empfänger über einen Informationskanal vermittelt. Die Information kann dabei die Form von Signalen oder Code annehmen. Der Informationskanal ist in vielen Fällen ein Medium. Beim Empfänger führt die Information zu einem Zuwachs an Wissen.
1. einen materiellen
2. einen symbolischen
03 Medium
Medienbegriff
...auch das Zeichensystem, der Code, wird als Medium bezeichnet (also z.B. die Sprache, die Gestik, die Musik, die bildliche Darstellung), dieser Aspekt bezeichnet die symbolische Darstellung des Inhalts einer Kommunikation.
als Medium wird einerseits der materielle Träger bzw. Kanal bezeichnet (z.B. Zeitung, Buch, CD, Telefon); dies ist oft mit Technik und Apparaten verbunden.
04 Multimedia
Multimedia was ist das?
Begriff nach Yass:
05 Multimediasystem
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.
(im engeren Sinn)
06 Multimediagebiete
-> Online-Präsentationen im Internet
Anwendungs-gebiete
Das Internet verkörpert einen weltweiten Verbund von Computernetzwerken, die auf der Basis gemeinsamer Protokolle miteinander kommunizieren.
07 Internet
08 WWW
09 Geschichte des WWW
1989
Weltweit erste Webseite info.cern.ch wurde veröffentlicht
1991
Anfangs hieß das Web noch Mesh (Geflecht)
...
1998
Der erste Internet Explorer
1995
Die Suchmaschinene Google ist da.
Ursprüngliches Ziel war die Möglichkeit der Bereitstellung von Dokumenten auf unterschiedlichen Plattformen über verschiedene Nutzerschnittstellen in einem Rechnernetz.
Die Seite ist immer noch aktiv!
Das WWW hat sich zu einem über das ganze Internet verteilten Hypermedia-Informationssystem entwickelt.
WWW-Server halten Dokumente vor, die über WWW-Clients (Browser) abgerufen werden können.
09 Geschichte des WWW
2000er Jahre
Das Internet wird mobil auf Telefonen
2000
Facebook startet und ein Jahr später YouTube
2004 2005
Das Fernsehen wandert ins Internet
2013
IP-Adressen gehen aus.
2011
Es ist das heute am häufigsten genutzte Informationssystem.
Die regionale Internet-Registrierstelle für Asien und Australien, APNIC, gibt bekannt, dass die IPv4-Adressen – die Namen, mit denen Privatrechner, Webserver und andere Geräte sich im Netz bewegen – zur Neige gehen. Im Februar hatte die internationale Vergabestelle für IP-Adressen, IANA, den letzten freien Block von einmal mehr als vier Milliarden IPv4-Adressen an die APNIC vergeben. In Zukunft werden die IP-Adressen auf das neue System IPv6 umgestellt, das rund 340 Sextillionen neue IP-Adressen ermöglicht.
IP-TV heißt Fernsehen übers Web: Höhere Datenübertragungsraten und immer umfangreichere Mediatheken der TV-Sender machen IP-TV attraktiv. Zusätzlich fällt die Bindung an feste Sendezeiten weg. Auch Software und Apps liefern Livestreams etlicher TV-Sender. In den USA hat der IP-TV-Anbieter Netflix im April 2013 erstmals den bisherigen Platzhirschen auf dem TV-Markt, den Pay-TV-Sender HBO, bei den Abonnentenzahlen überholt. Damit verdrängt erstmals ein Web-Video-Anbieter einen "normalen" TV-Sender von der Spitze.
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.
10 Dokument
Hypertext
“Hypertext is text which is not constrained to be linear” Ted Nelson, 1965
INFO
11 Hypertext
Hypertext-Dokumente erlauben über ausreichende Hyperlinks den Verweis auf Stellen im betrachteten Dokument oder in anderen Dokumenten (welche ihrerseits wiederum Hyperlinks enthalten können).
HTTP
Hypertext Tranfer Protocol (HTTP) ist ein Protokoll in der Anwendungsschicht des Internet für die Kommunikation zwischen Browsern und Servern im WWW.
INFO
12 HTTP
Browser fragt Hypertext-Dokument an, Server stellt Dokumente zur Verfügung schematischer Kommunikationsablauf.
Zur Beschreibung von Hypertext-Dokumenten werden Markup Languages (Auszeichnungssprachen) benutzt.
Unter einer Markup Language verstehen wir eine Menge von Regeln zur textlichen Beschreibung von Dokumenten unter Benutzung spezieller technischer Zeichenfolgen (markups, tags). Letzere gruppieren, organisieren und markieren inhaltliche Teile eines Dokuments. Und dann sind wir schon beim HTML.
Zwischenpause.
INFO
Pause
Nimm dir eine kurze Pause, du hast es schon weit geschafft. Trinke etwas oder schnapp dir einen kleinen Snack zur Stärkung, wenn du es braucht. Jetzt wird es noch mal knifflig.
next
Right!
Wissens-Quiz
EIn Hypertext Dokumente sind auch viele Internetwebseiten, aber nicht jede.
next
RIGHT!
Wissens-Quiz
ERROR!
Wissens-Quiz
EMPEZAR
START
QUESTION 1/10
In der Informatik geht es um Hardware.
Nein
Ja
Vielleicht
Wissens-Quiz
QUESTION 2/10
ein materieller Zeichenträger
ein Code des Inhalts einer Kommunikation
symbolische Darstellung
Wissens-Quiz
Ein Medium ist...
QUESTION 3/10
Eine Markup Language
Das Dokument enthält Formatierungsanweisungen und Hyperlinks
Jede Internetwebseite
Wissens-Quiz
QUESTION 4/10
Was heißt HTTP ausgeschrieben?
HyperText Transfer Protocol
Hypertextprotocol
Hypertransfer Textprotocol
Wissens-Quiz
QUESTION 5/10
Information ist Wissen was ein Absender einem Empfänger vermittel.
Manschmal
Wahr
Falsch
Wissens-Quiz
vs
QUESTION 6/10
Falsch
Richtig
Wissens-Quiz
Informatik ist eine Zusammenstellung zwischen Information und Mathematik.
Wissens-Quiz
QUESTION 7/10
Bill Gates
Hedy Lamarr
Tim Berners-Lee
Wissens-Quiz
QUESTION 8/10
Gebiete
Materialien
Medien und Wege
QUESTION 9/10
Klaro
Leider nein
Wissens-Quiz
IP-Adressen halten für immer.
QUESTION 10/10
Wissens-Quiz
Platz 1
Platz 2
Platz 3
Deine Ergebnisse vom Wissens-Quiz
RESULTS
8-10 correct
5-7 correct
2-4 corrects
Erster Platz
Herzlichen Glückwunsch
Du hast super aufgepasst und dir alles gemerkt.
Zweiter Platz
Herzlichen Glückwunsch
Die goldene Mitte, du hast schon super mitgemacht, aber vielleicht erprobst du dein Wissen beim nächsten Mal noch ein wenig mehr.
Dritter Platz
Super du hast es aufs Treppchen geschafft. Aber vielleicht strengst du dich das nächste Mal etwas mehr an um noch mehr Wissen zu sammeln.
INFO
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.
Wie gehts weiter?
Nach dem Kurs wirst du grundlegendes HTML programmieren können. Programmieren ist aber hier das falsche Wort, eher erstellen können, weil programmieren passt hier nicht. HTML ist um genau zu sagen keine Programmiersprache sondern eine Markup Language. Wenn man andere Sachen wie PHP, Java oder CSS machen möchte, muss man HTML aus dem Handgelenkt können. Es ist somit der erste Schritt und die Grundlagen schauen wir uns jetzt an.
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.
Im Grundkurs den du gerade besucht wird es nur um HTML-Basics gehen.
Wie du vielleicht schon weißt, beinhaltet ein Internetdokument HTML als Grundgerüst aller Webseiten.
Allerdings bei den meisten Seiten im Internet gibt es noch css (Cascading Style Sheets) für die Layout-Beschreibung und JavaScript was Interaktionen hinzufügt. Im Kurs testen wir allein die Beschreibung von Dokumentenstruturen/-inhalten aus.
Lektion HTML
+ info
Schon mal einen HTML-Code gesehen?
Lektion HTML
+ info
INFO
Lektion HTML
+ info
Sobald du das nicht vergisst bist du gut dabei;).
Lektion HTML
+ info
+ info
Elemente bestehen aus:
- Start-Tag <...>
- End-Tag </...>
- Elementinhalt ...
- Optionalen-Attributen (Metainformationen)
Die Strukturierungsmöglichkeiten sind:
- Absätze
- Tabellen
- Verweise
- Grafik-Einbindung
- Formulare
- Einbindung von Multimedia-Objekten
Lektion HTML
<body>
<head>
<a
<hi>
<title>
+ info
HTML-Baum und Zugriff über DOM darauf
Das Verständnis des DOM ist sehr wichtig. Daher wird es hier in aller Ausführlichkeit erklärt.
Über dieses Model können wir auf jedes Element einer HTML-Seite und seine Inhalte zugreifen und diese auslesen, ändern, ersetzen und auch setzen. Aber der Reihe nach. Erst den Aufbau verstehen.
Dazu schauen wir uns eine sehr einfache HTML-Datei an.
- Elemente sind Entities, die spezifizieren, wie das HTML-Dokument aufgebaut ist.
- Ein Attribut wird verwendet, um die Eigenschaften eines HTML-Elements zu definieren und ist innerhalb Start-tag des Elements angeordnet.
- HTML-Tags sind, wie wir schon wissen, Anweisungen in spitzen Klammern, auch HTML Markup (Kennzeichnung oder Auszeichnung) genannt.
"Überschrift 1"
"Seitentitel"
href
""Text des Links"
Root Element
Element
Text
Attribut
Text
Element
Lektion HTML
+ info
Übertrage in deine HTML-Datei die Tags im grünen Feld.
+ info
Wenn du damit fertig bist, lade diese Datei wieder neu in deinem Browser. Falls sich keine Tippfehler eingeschlichen haben, siehst du jezt oben im Tab deinen Titel. Aber deine Seite sieht noch ziehmlich leer aus, deswegen weiter gehts.
Hier ein Beispielt wie es aussehen soll:
meine erste Seite
Hallo Welt
0
Wenn du in deinem HTML Dokument Befehle Kommentieren oder Auskommentieren magst geht das ganz einfach.
0
0
0
Ü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
div
span
01
Ein weiterer wichtiger Punkt ist das definieren von Bereichen mit div bzw. span und den Attributen id und class.
02
<div id="Name">BEREICH</div>
03
<div class="Name">BEREICH</div>
04
<span id="Name">BEREICH</span>
05
<span class="Name">BEREICH</span>
+ id
Angesprochen wird der Breich über seinen ID-Namen. ID kann nur für ein Element pro HTML-Seite verwendet werden. ID dient also zur eindeutigen Bestimmung eines Elementes.
+ class
Der DIV-Bereich kann per CSS über seinen Klassen-Namen angesprochen werden. Das besondere an CLASS ist, dass damit mehrere Elemente ausgezeichnet werden.
Lektion HTML
Mit SPAN können Textstellen markiert werden und diese dann üer CSS mit Design versehen werden. Das SPAN-Element ist ein Inline-Element, was den Unterschied zum DIV-Element ausmacht.
Über DIV wird ein Bereich definiert. Diesen Bereich kann man über CSS dann ein Design überstülpen. Bei DIV handelt es sich um ein Blockelement, dass Blockelement nutzt die komplette Bildschirmbreite
INFO
Lektion HTML
Lektion HTML
Die Möglichkeiten einer rein HTML formatierten Seiten
+ info
Falls dich der Ergeitz gepackt hat und es dir in den Fingern gribbelt, probiere dich aus und kreiere deine eigene Seite ganz nach deinen Vorlieben.
Lektion HTML
+ info
Weil wir im Kurs nicht auf alles eingehen können, findest du alle weitere Informationen und nennenswerten Tag / HTML Codes auf der Seite https://wiki.selfhtml.org/.
Vertiefe dein Können in HTML
03
Step 3
Meistere Aufgaben und stelle dein gelerntes auf die Probe
02
Step 2
Step 1
04
Abschlusstest, sehe was du drauf hast.
Step 4
01
Timeline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
Title here
Bevor es los geht noch ein kleines Vorbereitungsvideo
Jetzt gehts los mit dem HTML-Basic Abschlusstest
Dein letzter Test für diesen Kurs, prüfe deine ganzen HTML-Skills
START
Lass dich nicht von den Spielereichen Bildern und Gimmigs ablenken. Die Zeit tickt.
Wrong!
Wrong!
Volltreffer!
Richtig!
Next question
Yeah!
Resultat
Yeah!
Question 1/10
Hyper Text Modul Language
HTML Basic
Question 1/10
<image>
Question 2/10
HTML Basic
Question 1/10
// This is an HTML comment
Question 3/10
HTML Basic
vs
Question 1/10
true
Question 4/10
HTML Basic
Question 1/10
<strong>Some text.</strong>
<italic>Some text.</italic>
Question 5/10
HTML Basic
Question 1/10
Question 6/10
HTML Basic
Question 1/10
neuer Absatz
Wofür steht <br>?
bold / fett
Question 7/10
HTML Basic
Question 1/10
macht das gleiche wie ein ID-Attribut
ordnet ein Element einer oder mehreren Klassen zu
Question 1/10
HTML Basic
Question 1/10
nein
Question 1/10
HTML Basic
Question 1/10
<b>
<bold>
Question 10/10
HTML Basic
Question 1/5
Nein, nur in Ausnahmefällen
Nein, alle Tags müssen geschlossen werden
Ja muss es sogar
HTML Basic
Results
5-7 Correct
0-4 Correct
8-10 Correct
Play again
You should study more (0-4 Correct)
Das war aber keine Glanzleistung, schade nächstes mal wird's bestimmt besser.
Feel like a Genius (8-10 Correct)
Herzlichen Glückwunsch, du bist bist auf dem besten Weg zum Profi.
Not bad (5-7 Correct)
In der Ruhe liegt die Kraft, du bist im guten Mittelfeld.
Congratulations!
sabrina.handge@stud.hs-merseburg.de
Vielleicht sehen wir uns beim nächsten Kurs.