Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Multimedia, Hypertext
Multimedia and Hypertext
Markup Languages
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
History
Hypertext before Computers:
Le diverse et artificiose machine del Capitano Agostino Ramelli
(The Various and Artful Machines of Captain Agostino)
Paris, 1588
Reading Wheel
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Reading Wheel
Reading Wheel,
Puebla, México
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Vannevar Bush (1890-1974)
July 1945:
The Atlantic Monthly"As We May Think"
����Reader
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Vannevar Bush: "As We May Think"
This has not been a scientist's war; it has been a war in which all have had a part. The scientists, burying their old professional competition in the demand of a common cause, have shared greatly and learned much. It has been exhilarating to work in effective partnership. Now, for many, this appears to be approaching an end. What are the scientists to do next?• • •
Consider a future device for individual use, which is a sort of mechanized private file and library. It needs a name, and to coin one at random, "memex'' will do. A memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory.
It consists of a desk, and while it can presumably be operated from a distance, it is primarily the piece of furniture at which he works. On the top are slanting translucent screens, on which material can be projected for convenient reading. There is a keyboard, and sets of buttons and levers. Otherwise it looks like an ordinary desk.
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Vannevar Bush's theoretical Memex machine
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Vannevar Bush's theoretical Memex machine
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Vannevar Bush's theoretical Memex machine
Hypermedia system:Memory Expander (Memex)
"A memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speedand exibility."
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Vannevar Bush's Differential Analyser
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Claude Shannon (1916 - 2001)
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Head Camera
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
History of Multimedia
1945 Vannevar Bush (1890-1974) wrote about Memex
1960s Theodor (Ted) Nelson started Xanadu project
1965 Ted Nelson invents the term "Hypertext"
1967 Nicholas Negroponte
formed the Architecture Machine Group at MIT
1968 Douglas Engelbart demonstrated NLS system at SRI
1969 Nelson & Van Dam hypertext editor at Brown
1976 Architecture Machine Group proposal to DARPA:
Multiple Media
1985 Negroponte, Wiesner: opened MIT Media Lab
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
History of Multimedia
1989 Tim Berners-Lee proposed the World Wide Web to
CERN (European Council for Nuclear Research)
1990 K. Hooper Woolsey, Apple Multimedia Lab
1993 U. Illinois National Center for Supercomputing
Applications: NCSA Mosaic
1994 Jim Clark and Marc Andreesen: Netscape
1995 JAVA for platform-independent application
development.
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Tim Berners-Lee
Proposed the
World Wide Webto CERN(European Council for Nuclear Research)
����Reader
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Tim Berners-Lee: CERN Proposal
This
document"Hypertext"
Linked
information
Hypermedia
CERNDOC
ENQUIRE
Tim
Berners-Lee
section
group
C.E.R.N
wrote
division
Hierarchical
systems
for example
for example
describes
includes
for example
A
Proposal
"Mesh"
Hyper
Card uucp
News
IBM
GroupTalk
VAX/
NOTES
Computer
conferencing
describes
includes
includes
Comms
ACM
describes
refers
to
describes
etc
group
unifies
Information Management: A ProposalTim Berners-Lee, CERN, March 1989, May 1990
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Tim Berners-Lee: CERN Proposal
Information Management:A ProposalTim Berners-Lee, CERN, March 1989, May 1990
Hypertext
Server
Information on
one server reefers to
information on another
Client "browser" program
runs on many platforms
A client/server model for a distributed hypertext system
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Douglas Engelbart
NLS (oN-line System):computer system to cross-reference research papers for sharing among geographically distributed researchers (1968)
First computer-supported meeting
SRI - Stanford Research Institute
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Douglas Engelbart
SRI - Stanford Research Institute
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Theodor Ted Nelson (1937- )
Xanadu
I DON'T BUY INThe Web isn't hypertext, it's DECORATED DIRECTORIES! What we have instead is the vacuous victory of typesetters over authors, and the most trivial form of hypertext that could have been imagined. The original hypertext project, Xanadu®, has always been about pure document structures where authors and readers don't have to think about computerish structures of files and hierarchical directories. ...We fight on. More later.
Started "Xanadu".
Coined term "Hypertext"(1965).
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Hypermedia/Multimedia
Dokument 1
Dokument n
Dokument 2
Hypertext:termed by Ted Nelson (1965):Text that contains links to other texts (non-linear text).
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Hypertext
Ted Nelson (1965):
By "hypertext" I mean nonsequential writing -
text that branches and allows choice to the
reader, best read at an interactive screen.
����Reader
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Multimedia, Hypertext
A simple forking hypertext.
Structure of a hypertext.
The simplest model is that of the tree structure which continuously forks:
Jesper Juul, Thesis 2001
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Multimedia, Hypertext
A more complexhypertext
More complex hypertexts are usually not based on forking at regular intervals, but are better described asany number of nodes connected by any number of links.
Jesper Juul, Thesis 2001
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
linking in Xanadu
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
linking in Xanadu
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Marshall McLuhan
Marshall McLuhan:
"The global Village""The medium is the message"
http://www.mcluhan.utoronto.ca/
����Reader
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
WWW
http-Anfrage
Web-Client Web-Server
Verbindungsaufbau
(PC-Benutzer)
WWW Multimedia-Daten
Web-Client Web-Server
Access to the World Wide Web
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
WWW
Protocol of the World Wide Web:
HTTP: HyperText Transport Protocol
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
• Transmitting data between servers and clients• Simple request/response protocol
(text, hypertext, images, etc.)• Stateless (duration of one operation)
• Anatomy of a Web Connection:– Browser sends URL via HTTP to web server– HTTP daemon retrieves page– HTML page is passed back to browser via HTTP– Browser parses HTML and presents page
• The Web is a simple technology• The Web is stateless• Meta information in HTTP headers, extended MIME
(Multipurpose Internet Mail Extensions)
HTTP: Hypertext Transport Protocol
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
• Simple page description language,
• Control codes are embedded in ordinary text,
• Logical description, not presentation oriented,
• HTML forms,
• Interactive web browsing,
• Common Gateway Interface (CGI) scripts,
• Form structure, interaction, assembled query, directed to CGI script,
• Frames.
HTML: Hypertext Markup Language
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
InformationProviders
User
Pull
Push/Pull Technology
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
InformationProviders
User
Push/PullServerPreferred
Information
Preferences
Push/Pull Technology
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
InformationProviders
Users Push
PreferredInformationbroadcast
Preferences
Push/Pull Technology
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Development of Markup Languages
2000 XHTML
1998 XML
1989 HTML
1986 SGML (ISO 8879)
1978
1969 GML
~1960 generic coding,generic markup
William TunnicliffeStanley Rice
Goldfarb, Ed Mosher, Ray Lorie (IBM)
ANSICGA-GenCode-Committee
Charles Goldfarb
ISO
Tim Berners-Lee(CERN, later W3C)
Tim Bray (Textuality, Netscape)Jean Paoli (Microsoft)
C.M. Sperberg-McQueen (Univ. of Chicago)
Steven Pemberton (CWI)Dave Raggett (W3C/HP)
Charles Goldfarb:Father ofmarkup languages
2008 HTML5Ian Hickson (Google, Inc.)
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Internet, WWW, Markup Languages
XML
WWW HTML
SGML als ISO-Std.
SGML INTERNET ~1970
1986
1992
1998
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
• 1989: Simple language (HTML 1.0),
• 1993: Additional features (HTML 2.0),Tables, ImageMaps
• 1994: Netscape Additions,Font sizes, background/Foreground colors
• 1995: Netscape Additions,Frames, Plug-Ins, Java <APPLET> Tag
• 1997: HTML 3.2 (Wilbur)
• 1998: HTML 4.0
• 2000: XHTML 1.0 (revised 2002)
• 2008: HTML 5
HTML: Hypertext Markup Language
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Markup Languages
SGML: Standardized Generalized
Markup Language (ISO 8879)
HTML: HyperText Markup Language
XML: Extensible Markup Language
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
HTML
Modern Web Design:
Separation of Content from Presentation
• (X)HTML code does not contain "presentation" markup (that describes how it looks)
• all the "look and feel" instructions are part of the CSS.
Content (X)HTML code
Presentation CSS – Cascaded Stylesheets
Traditional approach:markup defined both style and structure.
Specific case of separation of concerns.
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
HTML
HTML: HyperText Markup Language
Character Set: ISO-8859-1Revisions: HTML
HTML 2.0HTML 3.2 (Wilbur)HTML 4.0XHTML 1.0, 1.1HTML 5
Markup Tags:Opening Tag: <x>Closing Tag: </x>
Tags are used to define areas of text and to determine how the text will be displayed to the user.
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
XHTML
http://www.w3.org/TR/xhtml1/
XHTML™ 1.0The Extensible HyperText Markup Language
World Wide Web Consortium
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
HTML 5
http://dev.w3.org/html5/
HTML5A vocabulary and associated APIs for HTML and XHTML
World Wide Web Consortium
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Markup Tags
Classification into three types:
Stylistic Markup (<I>, <B>, <U>, <FONT>)
Structural Markup (<Hn>, <P>, <DIV>)
Semantic Markup (<TITLE>, <CODE>)
Tags: <P>, </P>, <I>
Elements: Tags + Content
Opening Tag Content Closing Tag
<P> Sample Text </P>
Container
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Syntax / Semantik
Syntax:
<griech.> (Lehre von Satzbau, Satzlehre)
Semantik:
<griech.> (Wortbedeutungslehre)
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Markup Tags, Attributes
General markup format:
<tagname attribute = "value"> text </tagname>
The end tag (closing tag) can be optional in some cases.
Attributes:
list of name/value pairs (attribute/value pairs)
p.ex.:
<tagname attrib_1 = "value_1" attrib_2 = "value_2">
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
The Big Picture - 1999 (Ref.: Ken Sall)
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
The Big Picture - 2003 (Ref.: Ken Sall)
http://kensall.com/big-picture/bigpix22.html
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
HTML Document
<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Ueberschrift</TITLE>
</HEAD>
<BODY>
Welcome to HTML!<BR>
Willkommen im World Wide Web!
</BODY>
</HTML>
Format of an HTML document
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
HTML Document
<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>Ueberschrift</title>
</head>
<body>
Welcome to HTML!<br>
Willkommen im World Wide Web!
</body>
</html>
Format of an XHTML / HTML5 document
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
HTML Syntax and Comment
Syntax Rule:
HTML is not case-sensitive.
Example: <HTML> is equivalent to <html>
Add Comment to HTML source code:
<!-- Comment -->
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
HTML Syntax and Comment
Syntax Rule:
XHTML, HTML5 are case-sensitive.
XHTML:Element and attribute names must be in lower case:XHTML documents must use lower case for all HTML element and attribute names.This difference is necessary because XML is case-sensitive e.g. <LI> and <li> are different tags.
HTML5:Attribute and element names of HTML elements in HTML documentsmust be treated as ASCII case-insensitive.
http://www.w3.org
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
HTML - Document Structure (No Frames)
<HTML>
</HTML>
<HEAD>
</HEAD>
<TITLE> Ueberschrift </TITLE>
</BODY>
<BODY>... (Dateirumpf)
<head>: Header section may contain meta-information<title>: Title Text will be displayed as browser title<body>: Body text will be displayed in browser
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
HTML - Document Structure (No Frames)
Physical vs. Logical Markup:
Logical tags:• represent the structure and meaning of a documentPhysical tags:• represent specific visual effects
HTML philosophy:• structural language, not a screen-layout description
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Important Markup Tags
Neinbeginnt eine neue Zeile<br>
Jabeginnt einen neuen Absatz<p>
JaKursivschrift, physisches Tag<i>
JaFettschrift, physisches Tag<b>
JaKursivschrift, logisches Tag<em>
JaFettschrift, logisches Tag<strong>
JaÜberschrift unterschiedlicher Größe<h1>-<h6>
Jaleitet Dokumenten-Rumpf ein<body>
Jadefiniert Dokumenten-Kopf<head>
Jadefiniert Dokumenten-Titel<title>
Jaleitet HTML-Dokument ein<html>
Tag</XX>?
AttributeBedeutungabhängigeTags
Tag<XX>
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
New Philosophy
Important Modification:
HTML 4.01 specification:
W3C* deprecates all tags that control
presentation in favor of style sheet control
(see Cascading Style Sheets - CSS)
* World Wide Web Consortium
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Body Markup
Container:
Headline: <h1> Headline Size 1 </h1>
<h6> Headline Size 6 </h6>
Format: <b> Bold Text </b>
<strong> Bold </strong>
<i> Text in Italics </i>
<u> Underlined Text </u>
Empty Tags:
line Break: <br>
Horizontal Rules: <hr>
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Meta-Information
Header Section
Meta-Information
• Information about the document
name = "description" content = " ... "
name = "author" content = " ... "
name = "keywords" content = " ... "
name = "robots" content = "index"
name = "robots" content = "noindex"
name = "robots" content = "follow"
name = "robots" content = "nofollow"
http-equiv = "expires" content = " ... "
http-equiv = "refresh" content = " ... "
URL = " ... "
http-equiv = "content-type" content = " ... "
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Meta Data
Meta-Information (Applied to Search Engines)
<html>
<head>
<title>Meta-Information</title>
<meta name="keywords" content="Meta, HTML">
<meta name="description"
content="Kiel liegt in Schleswig-Holstein">
<meta name="keywords"
content="Kiel, Fachhochschule, Elektrotechnik">
<meta http-equiv="refresh" content="10; URL=datei.html">
<meta http-equiv="expires"
content="Tue, 01 Apr 2010 20:00:00 GMT">
</head>
<body> ...
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Important Markup Tags
Javorformatierter Text<pre>
JaDefinition des Begriffes<dd>
Jazu definierender Begriff<dt>
JaDefinitionsliste<dl>
Jabeginnt neues listenelement<li>
Jageordnete (numerierte) liste<ol>
Jabeginnt neues listenelement<li>
Jaungeordnete (nicht numerierte) liste<ul>
Jazentriert die Ausgabe<center>
JaCOLOR,
FACE, SIZE
ändert die Fontgröße<font>
Tag</XX>?
AttributeBedeutungabhängigeTags
Tag<XX>
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
lists
<ul><li> list element 1 </li><li> list element 2...<li> list element n
</ul>
Output:
• list element 1• list element 2
...• list element n
Unsorted list
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
lists
<ol><li> list element 1 </li><li> list element 2...<li> list element n
</ol>
Output:
1. list element 12. list element 2...n. list element n
Sorted list
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Important Markup Tags
JaNAME, VALUEParameterübergabe an ein Applet<param>
JaSRC, NAME, WIDTH,
HEIGHT, Einbindung eines Objektes<embed>
JaCODE, CODEBASE,
NAME, ALT, AliGN,
WIDTH, HEIGHT,
HSPACE, VSPACE,
APPLET-Einbindung<applet>
NeinSRC, ALT, AliGN, WIDTH,
HEIGHT, HSPACE,
VSPACE, USEMAP
Grafikeinbindung<img>
JaCOLSPAN, ROWSPAN,
AliGN, VAliGNTabelleneintrag<td>
JaCOLSPAN, ROWSPAN,
AliGN, VAliGNTabellenkopfeintrag (Header)<th>
JaZeilenanfang<tr>
JaTabellenüberschrift<caption>
JaBORDER, CELLSPACING,
WIDTH, CELLPADDINGbeginnt eine Tabelle<table>
Tag</XX>?
AttributeBedeutungabhäng.Tags
Tag<XX>
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Tables
<table>
<tr> <th>Header Cell</th> <th>Header Cell</th> </tr>
<tr> <td> Data Cell </td> <td> Data Cell </td> </tr>
...
<tr> <td> Data Cell </td> <td> Data Cell </td> </tr>
</table>
Header Cell Header Cell
Data Cell Data Cell
Data Cell Data Cell
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Tables
<tr> <th> </th> <th> </th> </tr>
<tr> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> </tr>
Simple Table Structure:
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Tables: Attributes
Borders und General Table Outline:
<table border = "..."> [Pixel]
<table cellpadding = "..."> [Pixel]
<table cellspacing = "..."> [Pixel]
<table width = "..." height = "..."> [Pixel/%]
Width and Height:
<th width = "..."> [Pixel/%]
<td width = "..."> [Pixel/%]
<th height = "..."> [Pixel/%]
<td height = "..."> [Pixel/%]
<th nowrap>
<td nowrap>
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Tables: Attributes
Table Alignment:
<tr align = "..."> horizontal [left/center/right]
<tr valign = "..."> vertical [top/middle/bottom]
<th align = "..."> horizontal [left/center/right]
<th valign = "..."> vertical [top/middle/bottom]
<td align = "..."> horizontal [left/center/right]
<td valign = "..."> vertikal [top/middle/bottom]
Connecting Cells:
<th colspan ="..."> [# of columns]
<th rowspan ="..."> [# of rows]
<td colspan ="..."> [# of columns]
<td rowspan ="..."> [# of rows]
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Tables - Connecting Cells
D11 D12 D13 D14
D21 D22 D23 D24
D31 D32 D33 D34
D41 D42 D43 D44
D51 D52 D53 D54
D61 D62 D63 D64
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Tables - Connecting Cells
D11 D12 D13 D14
D21 D22 D23 D24
D31 D32 D33 D34
D41 D42 D43 D44
D51 D52 D53 D54
D61 D62 D63 D64
<td colspan = "3">
<td rowspan = "3">
<td colspan = "2" rowspan = "2">
<table>
<tr><td>D11</td><td colspan="3">D12</td> </tr>
<tr><td>D21</td><td>D22</td><td>D23</td><td>D24</td></tr>
<tr><td>D31</td><td>D32</td><td rowspan="3">D33</td><td>D34</td></tr>
<tr><td>D41</td><td>D42</td><td>D44</td></tr>
<tr><td colspan ="2" rowspan="2">D51</td><td>D54</td></tr>
<tr><td>D63</td><td>D64</td></tr>
</table>
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Tables - Connecting Cells
Cells connected
with
colspan and rowspan
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Character Entities
Character Entities:
characters not found in the standard alphanumeric character set, e.g.:
ä, Ä, ö, Ö, ü, Ü, ß, ã, Ã, ç , Ç, ©, @
Definition of character entities:• by name &name;• by numeric value &#nnn;
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Character Entities
Examples for common Character Entities:
characters not found in the standard alphanumeric character set, e.g.:
ä ä äÄ Ä Äß ß ßç ç ç© © ©@ @
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
linking Documents
HypertextHypermedia
linking Documents
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Markup Tags, URL
Dokument 1
Dokument n
Dokument 2
URL:Uniform Resource Locator
protocol://machine.name[:port]/directory/document.name
protocol: access method: http, ftp, gopher, telnetmachine.name: hostname (z.B. www.fh-kiel.de)port: port number (optional):
non-standard TCP/IP port number,
standard: 80.
directory: path namedocument.name: file name (optional)
HypertextHypermedia
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
• URLs provide a compact notation for describing resources over the internet
• Multipart Addresses:
– type of resource, server name, full file name
– example: http://www.fh-kiel.de
– example: news://news.uni-kiel.de
– address may contain:
� / for hierarchical space
� # pointing inside a document
� ? separator between addresses and query operation
URL: Uniform Resource Locator
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Markup Tags, URL
links in HTML-Documents:
<a href="URL">link text</a>
HyperText REFerence (HREF) is marked by the browser:
color, underline
Example:http://www.e-technik.fh-kiel.de
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
linking Documents
HypertextHypermedia
Colors, Images
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Attributes: Color, Images
Foreground Color (Text):
<body text = "color" [= "#rrggbb"]link = "color"vlink = "color"alink = "color" >
Background Color:
<body bgcolor = "color" [= "#rrggbb"] >
Background Image:
<body background = "datei.gif" >
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Color Model
Farbe Hex-Wert Farbe Hex-WertAqua #00FFFF Navy #000080
Black #000000 Olive #808000
Blue #0000FF Purple #800080
Fuchsia #FF00FF Red #FF0000
Gray #808080 Teal #008080
Green #008000 Silver #C0C0C0
lime #00FF00 White #FFFFFF
Maroon #800000 Yellow #FFFF00
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Color Model
#00FFFF #000080
#000000 #808000
#0000FF #800080
#FF00FF #FF0000
#808080 #008080
#008000 #C0C0C0
#00FF00 #FFFFFF
#800000 #FFFF00
VGA Color Table (16 colors)
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Color Model
Netscape Colors:
216 (6 x 6 x 6) default colors as used in theNetscape browser palette.
Color Table
interactive Table
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
red
green
blue
black
white
gray valuesRGBCyan
magenta
yellow
RGB representation of color images
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Images
Image Tag:
<img src = "url">
Attributes:align = typealt = text (string of alternative text)border = numberheight = numberwidth = numberismap (image serves as server-side imagemap)usemap = url (specifies client-side imagemap)
ImageText Text
alignment
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Images
Monochrome Image:• Each pixel is stored
in a single bit.
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Images
Gray-scale Image:• Each pixel is stored
as a byte.
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Images
Lenna SjööblomPlayboy centerfold, from November 1972
www.lenna.org
The Lena StoryThe Lenna (or Lena) picture is one of the most widely used standard test images used for compression algorithms.
Lena 1997IS&T conference,Boston 1997(Society forImaging Science and Technology)
http://sipi.usc.edu/services/database/database.cgi?volume=misc
http://www.cs.cmu.edu/~chuck/lennapg/lenna.shtml
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Lena
O dear Lena, your beauty is so vastIt is hard sometimes to describe it fast.
I thought the entire world I would impressIf only your portrait I could compress.
Alas! First when I tried to use VQI found that your cheeks belong to only you.
Your silky hair contains a thousand linesHard to match with sums of discrete cosines.
And for your lips, sensual and tactualThirteen Crays found not the proper fractal.
And while these setbacks are all quite severeI might have fixed them with hacks here or there
But when filters took sparkle from your eyesI said, "Fuck this shit. I'll just digitize."
by Thomas C
Sonnet for Lena
http://www.nofiles.de/roots/lena/lenapoem2.html
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Images
24-bit Color Images:• Each pixel is represented by three bytes (e.g.
RGB);
• Support for 256 x 256 x256 possible colors
(16,777,216);
• optional storage as 32-bit images, extra byte is
used to store alpha value (special effect
information).
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Images
24-bit Color Images:
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Images
8-bit Color Images :• Each pixel is represented by one byte;• Support for 256 out of the 16,777,216 possible
colors ;• Requires a Color Look-Up-Table (LUT).
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Comparison of Images
300.0 kByte8-bit Color
900.0 kByte24-bit Color
300.0 kByte8-bit Gray-Scale
37.5 kByteMonochrome
Storage Requirement
for 640 x 480 imageImage Type
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
• GIF:Graphics Interchange Format (Compuserve) GIF87a, GIF89a� Features:
transparency, animation, lossless compression (low)
• JPEG:Joint Photographic Experts Group� Features:
lossy compression (high), no tranparency, no animation
• PNG:Portable Network Graphics� Features:
transparency, no animation, lossless compression (low)
• MNG:Multiple-Image Network Graphics� Features:
Complex animation, transparent JPEGs
Graphics Formats
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Standard Image Formats
GIF (GIF87a, GIF89a):
Graphic Interchange Format (GIF)(UNISYS, Compuserve)
Algorithm: Lempel-Ziv Welch (Huffman Coding),Coding: 8-bit, 256 colors,Features: Interlacing, animation,
transparent index.
JPEG, JPG:
Joint Photographic Experts Group (JPEG)
Features: High compression (lossy),adjustable level of quality/compression.
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Standard Image Formats
TIFF:
Tagged Image File Format (TIFF) (ALDUS)
Features: Allows for storage of many differenttypes of images(monochrome, grayscale, RGB, etc.);lossless format when used withoutJPEG tag.
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Standard Image Formats
PNG:
Portable network graphic
Features: As an alternative to GIF, PNG promisesto be superior. It supports 24- and even32-bit color depth and preserves allcolor information, using a losslesscompression algorithm (in contrastwith the "lossy" method of JPEG).
MNG:
Multiple-Image Network Graphics
Features: Complex animation,transparent JPEGs.
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Compressed Images
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
MIME
.mpg .mpe.mpegvideo/mpeg
.avi.avivideo/avi
.htm.htmltext/html
.tif.tiffimage/tiff
.jpg .jpe.jpegimage/jpeg
.gif.gifimage/gif
.mid.midisound/midi
.wav.wavsound/wave
.au .snd.au .sndsound/au
.ps .eps .ai.ps .eps .aiapplication/postscript
DOS Ext.UNIX Ext.MIME-Type
Multipurpose Internet Mail Extension - MIME
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Imagemaps
<map name = "WorldMap">
<area shape="rect" coords="50,0,180,100" href="north.html">
<area shape="rect" coords="120,125,200,240" href="south.html">
</map>
<img align="middle" src="world.gif" usemap = "#WorldMap">
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
<MAP>, <AREA>
rect
<area shape = "rect" coords = "20,10,80,60" htref = "fhkiel.html">
circle
<area shape = "circle" coords = "100,200,50" href = "fhkiel.html">
default
<area shape = "default" href = "fhkiel.html">
poly
<area shape = "poly" coords = "200,200,..." href = "fhkiel.html">
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Document Structure
M
D D D D D DM M M M
Flat Structure
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Document Structure
Deep StructureM
D D
M M
M
M M
D D
M M
M
M M
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Document Structure
Balanced StructureM
D D
M M
M
D
D
M
D D
D D
D D
D
D
D D
M M
M
D D
D
D
D
D
M
D
D
D D
M M
M
D D
D D
D
D
D
D D
M M
M
D D
D
D
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Document Structure
Possible Solution to obtain a balanced structure:
Using frame-based structures.
FramesNot supported by HTML5
iframes
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Frames
Document Structure with Frames
Dokument 1
Dokument 2
Dokument 3
Dokument 4
Beispiel
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
HTML - Document Structure with Frames
<HTML>
</HTML>
<HEAD>
</HEAD>
<TITLE> Ueberschrift </TITLE>
</FRAMESET>
<FRAMESET>
<FRAME>
<FRAME>
</BODY>
<BODY>... Alternativer Text für
Browser ohne Frames
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Example: Definition of Frames
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
HTML - Document Structure with Frames
<HTML>
</HTML>
<HEAD>
</HEAD>
<TITLE> Ueberschrift </TITLE>
</FRAMESET>
<FRAMESET>
<FRAME>
<FRAME>
</FRAMESET>
<FRAMESET>
<FRAME>
<FRAME>
<FRAME>
</BODY>
<BODY>... Alternativer Text für
Browser ohne Frames
<FRAMESET>
</FRAMESET>
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Frames: Attributes
<html>
<head> <title>Frames</title> </head>
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="ftest.html">
<frame src="ftest.html">
</frameset>
<frameset rows="33%,33%,33%">
<frame src="ftest.html">
<frame src="ftest.html">
<frame src="ftest.html">
</frameset>
</frameset>
</html>
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
HTML - Document Structure with Frames
90%
10%
150 *
120
*
Example: Structure with Frames
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
HTML - Document Structure with Frames
<HTML>
</HTML>
<HEAD>
</HEAD>
<TITLE> Ueberschrift </TITLE>
</FRAMESET>
<FRAMESET ROWS = "90%,10%">
<FRAME>
<FRAME>
</FRAMESET>
<FRAME>
<FRAME>
<FRAMESET COLS = "150,*">
<FRAMESET ROWS = "120,*">
</FRAMESET>
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Frames: Attributes
Definition of Framesets:
<frameset rows = "..." > Rows [Pixel/%]
<frameset cols = "..." > Columns [Pixel/%]
Definition of Frames:
<frame src = "..." filename ["datei.html"]
name = "..." > name of frame ["name"]
Properties of Frames:
<frame scrolling = "..." > [yes/no/auto]
<frame noresize > fixed window size
<frame marginwidth = "..." > [Pixel]
<frame marginheight = "..." > [Pixel]
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Frames: Attributes
Properties of Frames:
<frameset border = "..." > [Pixel] Nets.
<frameset frameborder = "..." > [yes/no] MS
<frameset framespacing = "..." > [Pixel] MS
<frameset bordercolor = "..." > ["farbe"] MS
Definition of Target Frame (Anchor):
<a href = "..."
target = "Fenstername" Targetfenster
target = "_new" Neues Fenster
target = "_parent" Frameset beenden
target = "_top" > Frameset beenden
... Text ... </a>
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Example: Definition of Frames
<html>
<head> <title>Frames</title> </head>
<frameset rows="90%,10%">
<frameset cols="150,*">
<frameset rows="120,*">
<frame src= "image.html" name="Window1_1">
<frame src="window12.html" name="Window1_2">
</frameset>
<frame src=“content.html" name="Window2">
</frameset>
<frame src="window3.html" name="Window3">
</frameset>
</html>
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Example: file for frame "window12.html"
<html>
<font size="+2">
<li><a href="link1.html" target="Window2">link 1</a></li>
<li><a href="link2.html" target="Window2">link 2</a></li>
<li><a href="link3.html" target="Window2">link 3</a></li>
<li><a href="link4.html" target="Window2">link 4</a></li>
</font>
</body>
</html>
HTML <font> tagdeprecated
in HTML 4.01
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Example: frame based web page
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
XHTML: Frames
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Frames</title> </head>
<frameset rows="90%,10%">
<frameset cols="150,*">
<frameset rows="120,*">
<frame src="image.html" name="Window1_1" />
<frame src="window12.html" name="Window1_2" />
</frameset>
<frame src="content.html" name="Window2" />
</frameset>
<frame src="window3.html" name="Window3" />
</frameset>
</html> XHTML Syntax
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Extending HTML: Frames
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Rules:
• Elements that the user should always see:
– Control bars
– Copyright notices
– Title graphics
– Table of contents
• Improved update performance
– Load information independent of other frames
• Resize dynamically
Extending HTML: Frames
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Embedded Frames
Inline FramesThe <iframe> tagdefines an inline frame that contains another document.
<iframe>
<iframe src="test.html" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
Specifies extra information about an elementtexttitle
Specifies an inline style for an elementstyle_definitionstyle
Specifies a unique id for an elementidid
Specifies a classname for an elementclassnameclass
DescriptionValueAttribute
Example:
Standard Attributes:
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
Inline Frames
<iframe src="welcome.html"
name="window_1" width="300" height="200"
marginheight="10" marginwidth="10" align="right">
<p>Your browser does not support embedded frames</p>
</iframe>
<p>
<a href="welcome.html" target="window_1">First Page</a><br>
<a href="start.html" target="window_1">Second Page</a>
</p>
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
DOCTYPE
DOCTYPE - Document Type Declaration
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
DOCTYPE
DOCTYPE - Document Type DeclarationHTML <!DOCTYPE> tag
Each HTML/XHTML document must begin with a document
type declaration (DTD). The DTD declares which HTML/XHTML-specification the document is using.
HTML 4.01 comes in three versions, each with a different DOCTYPE:
• Strict• Transitional• Frameset
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
DOCTYPE
HTML <!DOCTYPE> versions:
HTML Strict DTDUsed with clean markup, free of presentational markup. Used in connection with Cascading Style Sheets (CSS):
<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML Transitional DTDUsed with documents that include presentation attributes and elements that should be moved to a style sheet. Used with browsers that don't support Cascading Style Sheets (CSS):
<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
continued
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
DOCTYPE
Frameset DTD
The Frameset DTD is used for documents with frames. The FramesetDTD is equal to the Transitional DTD except for the frameset element that replaces the body element:<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE> without URL<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.01 Transitional//EN">
URL for DTD is not necessary in most cases because most browsers implement the standard DTDs.
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
XHTML
XHTML 1.0 Reference
http://www.w3schools.com
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
DOCTYPE
DOCTYPE - Document Type DeclarationXHTML <!DOCTYPE> tag
• Strict• Transitional• Frameset
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
DOCTYPE
XHTML 1.0
Strict<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 - DTD:<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
HTML5
HTML 5 Reference
http://www.w3schools.com
Fachbereich Informatik und Elektrotechnik
Internet Applications, Helmut Dispert
DOCTYPE
HTML5
<!DOCTYPE HTML>
Top Related