Folien 02 07 15 PDF

Interaktive Medien
Prof. Dr. Frank Steinicke
Human-Computer Interaction
Fachbereich Informatik
Universitt Hamburg
Interaktive Medien
bung 11
Susanne Schmidt
Human-Computer Interaction, Universitt Hamburg
Interaktive Medien
bung 11
Erstellung von Webseiten
Author
Human-Computer Interaction, University of Hamburg
HTML
HTML (Hypertext Markup Language) ist

Kerntechnologie fr das WWW
HTML ist textbasierte Auszeichnungssprache
zur semantischen Auszeichnung von Inhalten
wie Texten, Bildern und Hyperlinks
HTML erlaubt gerteunabhngige
Mediendateien zu erstellen, die ber
einheitliches Verweissystem (engl. Links)
verbunden werden knnen
4
HTML
Beispiel
Textdokument 1
Textdokument 3
)
k
n
i
L
(
s
i
e
Verw
Textdokument 2
Mediendatei
)
k
n
i
L
(
s
i
e
w
r
e
V
5
HTML
Stetiges Wachstum der Dokumente im

Indexable Web (Teil des Web, der von
Suchmaschinen erfasst wird)
Tatschlich verfgbare Informationsmenge
aufgrund von dynamischen Webseiten ist
viel grer (wird teilweise als Deep Web
bezeichnet)
Geschichte von HTML
Generic Markup Language (GML) war erster

Vorlufer von HTML (1969) (IBM: Goldfarb,
Mosher, Lorie)
Beinhaltet bereits Mglichkeit,
Dokumenttypen zu definieren und zu
verfassen
Auszeichnungen wurden in spitzen Klammern
(< und >) definiert
7
Geschichte von HTML
1978: GML wurde als ISO-Standard

verabschiedet Ergebnis: Standard Generic
Markup Language (SGML)
Berners-Lee und Cailleau entwickelten
darauf basierend HTML
1993: Anzeigeprogramm fr HTML namens
Mosaic (erster Browser)
Stufenweise Weiterentwicklung von HTML
(aktuell Version 5)
8
HTML
Beispiel
Warum HTML lernen?
HTML-Seiten knnen mit Hilfe von

Autorenwerkzeugen automatisch
erzeugt werden
dennoch sorgen HTML-Kenntnisse fr:

grundlegendes Verstndnis von
Mediensystemen im Internet
einfachere Fehlerquellenfindung
Verstndnis des von fortgeschrittenen
Programmen erzeugten HTML-Codes
10
Beispiel: Word2HTML
11
HTML
Markup-Sprache (engl. markup = Auszeichnung)

Auszeichnungen sind Ergnzungen im Text,
die Formatierung und Struktur eines Bereichs
genauer beschreiben
Beispiel:
<p>Hallo</p>
im HTML-Code ergibt Hallo in Ausgabe
12
Grundlagen
Elemente (engl. Tags) werden in spitzen

Klammern und klein geschrieben:
<elementname>
Beispiele:
Elementname br (= break, beginnt neue Zeile)
Elementname b (= bold, Fettdruck)
13
Grundlagen
Unterscheidung alleinstehende und

paarweise auftretende Elemente, die
Beginn und Ende markieren
Alleinstehende Elemente:
<br />
Paarweise auftretende Elemente:
<b>fett gedruckter Text</b>
14
Attribute
Zustzliche Informationen fr Elemente,

z.B. die Definition des Elements als Link mit
a fr anchor
Attributwert in Anfhrungszeichen
Beispiel:
<a href=http://
www.example.de>Link</a>
15
Besonderheiten
Formatierung des HTML-Dokuments hat

keinen Einfluss auf Ausgabe, sondern
Auszeichnungselemente sind entscheidend
Text, der nicht in Ausgabe erscheinen soll,
ist Kommentar

16
Besonderheiten
Sonderzeichen werden nicht ausgeschrieben,

sondern sollten codiert werden
Beispiele:
= ä
= Ä
= ö
= Ö
= ß
Weitere Informationen und Beispiele:
SELFHTML, W3Schools, MDN
17
SELFHTML
www.w3schools.com/html/
18
W3Schools
19
MDN
20
Struktur
Beginnt i.d.R. mit Kopfzeile, dem DOCTYPE,

der HTML-Version festlegt
Fr HTML5:
<!DOCTYPE html>
21
Struktur
Hauptteil wird in HTML-Element

eingeschlossen
Dokument wird in zwei Teile geteilt:
Kopf- und Rumpfbereich
Kopfbereich enthlt immer Titel, der in
Kopfzeile des Browser-Fensters angezeigt
wird:
<title>Der Titel</title>
22
Struktur
<html>
allgemeine Definition
der HTML-Datei
<head>
Kopf der HTML-Datei beinhaltet Titel

sowie Beschreibung des Inhalts
<body>
beinhaltet Inhalt, d.h. Struktur und

Aussehen der HTML-Datei
23
Metainformationen
Metainformation beschreiben Dokument

genauer
z.B. Autor, letztes nderungsdatum,
Suchbegriffe
Metainformation werden im Header
spezifiziert und somit nicht dargestellt, aber
von Suchmaschinen ausgewertet
24
Metainformationen
Allgemeiner Aufbau:
<meta name=Bezeichnung
content=Inhalt>
Beispiel fr Autor:
<meta name=author
content=Frank Steinicke>
Analog fr andere Informationen, z.B.
Inhaltsbeschreibung (description),
Schlsselwrter (keywords)
25
bersicht
DOCTYPE
<!DOCTYPE html>
<html>
HEAD
<head>
<title>Titel</title>
<meta charset=UTF-8 />
<meta name=description content=Homogene Koordinaten />
<meta name=author content=Frank Steinicke />
<meta name=keywords content=Vektorgrafiken,2D />
</head>
BODY
<body>
...
</body>
</html>
26
Rumpfbereich (Body)
Body enthlt eigentlichen Inhalt der Seite

Body bentigt keine besondere Struktur
Unterschiedliche Auszeichnungen:
Logische Auszeichnungen beschreiben
Strukturelemente
Physische Auszeichnungen beschreiben
Formatierung
27
Auszeichnungen
Logische
Logische Auszeichnungen beschreiben
Strukturelemente
Wichtigste logische Auszeichnungen:

Normaler Textabsatz (paragraph):
<p>...</p>
berschrift (heading):
<h1>...</h1> fr die erste Ebene
<h2>...</h2> fr die zweite Ebene
28
Auszeichnungen
Logische
- Unnummerierte Liste (unordered list mit
list items):
<ul>
<li>...</li>
<li>...</li>
</ul>
29
Auszeichnungen
Logische
- Nummerierte Liste (orderer list):
<ol>
<li>...</li>
<li>...</li>
</ol>
30
Auszeichnungen
Physische
Physische Auszeichnungen beschreiben
Formatierung
wichtigste physische Auszeichnungen:

Fett (bold):
<b>...</b>
Kursiv (italic): <i>...</i>

Betonter Text (emphasis): <em>...</em>
Erzwungenes Leerzeichen (no-break space):

31
Hyperlinks
Hyperlinks werden per Auszeichnung <a>

(anchor) definiert, href (hyper reference) gibt
Ziel des Links an
Beispiel (hier ist nur das Wort Link ein
Hyperlink):
<p>Dies ist ein
<a href=www.example.de>Link</a>.
</p>
32
Hyperlinks
Falls Ziel des Hyperlinks sich auf gleichem

Server befindet, gengt Angabe des Pfadund/oder Dateinamens
Hyperlinks auf Stellen innerhalb des
gleichen Dokuments werden mit Zeichen
# gekennzeichnet
33
Hyperlinks
Beispiel
34
Tabellen
Tabellen dienen der tabellarischen

Darstellung von Text und Zahlen, aber auch
Links und Grafiken
universell einsetzbar
(z.B. fr Layout, obwohl nicht empfohlen)
Tabellen werden von Tag <table>
umschlossen und knnen Kopfzeile besitzen
35
Tabellen
Auszeichnungen
Tabelle (table):
<table>...</table>
Tabellenzeilen (table row):
<tr>...</tr>
Tabelleneintrge Kopfzeile (table head):
<th>...</th>
restliche Tabelleneintrge (table data):
<td>...</td>
36
Tabellen
bersicht
<table>
<tr>
<tr>
<tr>
<th>
<th>
<th>
</th>
</th>
</th>
<td>
<td>
<td>
</td>
</td>
</td>
<td>
<td>
<td>
</td>
</td>
</td>
</tr>
</tr>
</tr>
</table>
37
Tabellen
Weitere Formatierungsmglichkeiten:
Tabellenfuzeile (table footer):
<tfoot>...</tfoot>
Spaltenbreite (absolut oder prozentual):

<colgroup>
<col width=...>...<col width=...>
</colgroup>
Mehrspaltige/-reihige Tabelleneintrge:
<th colspan=2>...</th>
<th rowspan=2>...</th>
38
Tabellen
Beispiel
39
Grid-Layout
Beispiel
40
Layout mit div

CSS
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
...
HTML
<div id="header">...</div>
<div id=section">...</div>
<div id="footer">...</div>
41
Layout mit HTML5
Einfhrung neuer semantischer Elemente:

<header>
<nav>
<section>
<aside>
<article>
<footer>
42
Layout mit HTML5

CSS
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
...
HTML
<header>...</header>
<section>...</section>
<footer>...</footer>
43
Interaktive Medien
bung 11
Online-Multimedia
Author
Human-Computer Interaction, University of Hamburg
HTML
Beispiel
Textdokument 1
Textdokument 3
)
k
n
i
L
(
s
i
e
Verw
Textdokument 2
Mediendatei
)
k
n
i
L
(
s
i
e
w
r
e
V
46
HTML
Medieneinbettung
Multimedia-Dokumente bentigen mehr
als nur Text-Elemente, z.B.

Bilder
Audio
Video
Prsentationen
47
HTML
Medieneinbettung
Problematisch in frheren Versionen, da
dies ursprnglich in HTML nicht vorgesehen

war
In HTML5 durch neue Elemente wesentlich
vereinfacht
48
Bilder
Einfache Einbindung:
<img src=Eiffelturm.jpg
width=350 alt=Eiffelturm>
width und height zum Skalieren in Pixeln
oder Prozent
alt gibt textuelle Alternativbeschreibung
an, falls Bild nicht angezeigt wird
49
Bilder
50
SVG
Verschiedene Einbindungsmglichkeiten,
z.B. direkt mit <svg>-Element:
<!DOCTYPE html>
<html>
<body>
<svg>
<rect width="50" height="20"/>
</svg>
</body>
</html>
51
SVG
Durch Angabe des HTML-DOCTYPE werden

Attribute zur Festlegung des Namenraums
berflssig:
<svg xmlns="http://www.w3.org/
2000/svg">
<rect width="50" height="20"/>
</svg>
52
Audio
Eingefhrt in HTML5 (vorher Plug-In ntig):

<audio controls>
<source src="delfingesang.wav"
type=audio/wav">
<source src="delfingesang.mp3"
type=audio/mpeg">
Your browser does not support the
audio element.
</audio>
53
Audio
controls fgt Steuerungselemente wie Play,

Pause oder einen Lautstrkeregler hinzu
Bei mehreren source-Elementen whlt der
Browser das erste erkannte Format
Text zwischen <audio>-Tags wird angezeigt,
wenn Browser audio-Element nicht
untersttzt
54
Video
Eingefhrt in HTML5 (vorher Plug-In ntig):

<video width="320" height="240"
controls>
<source src="movie.mp4"
type=video/mp4">
<source src="movie.ogg"
type="video/ogg">
video element is not supported.
</video>
55
Video
Angabe von width und height empfohlen,

um Browser Gre des Videos mitzuteilen
controls fgt wie bei Audio
Steuerungselemente hinzu
Bei mehreren source-Elementen whlt der
Browser das erste erkannte Format
Text zwischen <video>-Tags wird angezeigt,
wenn Browser video-Element nicht
untersttzt
56
Sonstige Medien
Einbindung anderer Multimedia-Typen, z.B.

Animationen, Prsentationen, :
Durch im Browser integriertes Plug-In
ber allgemeines <object>-Element:
<object width="400" height="400"
data=animation.swf></object>
<object width="400" height="400"
data="fol.pdf#page=2"></object>
57

Folien 02 07 15 PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Folien 02 07 15 PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Interaktive Medien

Prof. Dr. Frank Steinicke

HTML (Hypertext Markup Language) ist

Stetiges Wachstum der Dokumente im

Geschichte von HTML

Generic Markup Language (GML) war erster

Geschichte von HTML

1978: GML wurde als ISO-Standard

Warum HTML lernen?

HTML-Seiten knnen mit Hilfe von

dennoch sorgen HTML-Kenntnisse fr:

Markup-Sprache (engl. markup = Auszeichnung)

Elemente (engl. Tags) werden in spitzen

Unterscheidung alleinstehende und

Zustzliche Informationen fr Elemente,

Formatierung des HTML-Dokuments hat

Sonderzeichen werden nicht ausgeschrieben,

Beginnt i.d.R. mit Kopfzeile, dem DOCTYPE,

Hauptteil wird in HTML-Element

Kopf der HTML-Datei beinhaltet Titel

beinhaltet Inhalt, d.h. Struktur und

Metainformation beschreiben Dokument

Body enthlt eigentlichen Inhalt der Seite

Wichtigste logische Auszeichnungen:

wichtigste physische Auszeichnungen:

Kursiv (italic): <i>...</i>

Hyperlinks werden per Auszeichnung <a>

Falls Ziel des Hyperlinks sich auf gleichem

Tabellen dienen der tabellarischen

Spaltenbreite (absolut oder prozentual):

Layout mit div

Layout mit HTML5

Einfhrung neuer semantischer Elemente:

Layout mit HTML5

als nur Text-Elemente, z.B.

dies ursprnglich in HTML nicht vorgesehen

Durch Angabe des HTML-DOCTYPE werden

Eingefhrt in HTML5 (vorher Plug-In ntig):

controls fgt Steuerungselemente wie Play,

Eingefhrt in HTML5 (vorher Plug-In ntig):

Angabe von width und height empfohlen,

Einbindung anderer Multimedia-Typen, z.B.

Das könnte Ihnen auch gefallen