Sie sind auf Seite 1von 58

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
<!-- HTML-Kommentar -->

16

Besonderheiten

Sonderzeichen werden nicht ausgeschrieben,


sondern sollten codiert werden

Beispiele:
= &auml;

= &Auml;

= &ouml;

= &Ouml;

= &szlig;
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
Wichtigste logische Auszeichnungen:
- Unnummerierte Liste (unordered list mit
list items):

<ul>
<li>...</li>
<li>...</li>
</ul>

29

Auszeichnungen

Logische
Wichtigste logische Auszeichnungen:
- 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):
&nbsp;
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