multimedia and hypertext markup...

Fachbereich Informatik und Elektrotechnik

Internet Applications, Helmut Dispert

Multimedia, Hypertext

Multimedia and Hypertext

Markup Languages



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



Reading Wheel

Reading Wheel,

Puebla, México



Vannevar Bush (1890-1974)

July 1945:

The Atlantic Monthly"As We May Think"

��Reader



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.



Vannevar Bush's theoretical Memex machine



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



Vannevar Bush's Differential Analyser



Claude Shannon (1916 - 2001)



Head Camera



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



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.



Tim Berners-Lee

Proposed the

World Wide Webto CERN(European Council for Nuclear Research)

��Reader



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



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



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



Douglas Engelbart

SRI - Stanford Research Institute



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



Hypermedia/Multimedia

Dokument 1

Dokument n

Dokument 2

Hypertext:termed by Ted Nelson (1965):Text that contains links to other texts (non-linear text).



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




A simple forking hypertext.

Structure of a hypertext.

The simplest model is that of the tree structure which continuously forks:

Jesper Juul, Thesis 2001




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



linking in Xanadu



Marshall McLuhan

Marshall McLuhan:

"The global Village""The medium is the message"

http://www.mcluhan.utoronto.ca/

��Reader



WWW

http-Anfrage

Web-Client Web-Server

Verbindungsaufbau

(PC-Benutzer)

WWW Multimedia-Daten

Web-Client Web-Server

Access to the World Wide Web



WWW

Protocol of the World Wide Web:

HTTP: HyperText Transport Protocol



• 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



• 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



InformationProviders

User

Pull

Push/Pull Technology




User

Push/PullServerPreferred

Information

Preferences





Users Push

PreferredInformationbroadcast

Preferences




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



Internet, WWW, Markup Languages

XML

WWW HTML

SGML als ISO-Std.

SGML INTERNET ~1970

1986

1992

1998



• 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



Markup Languages

SGML: Standardized Generalized

Markup Language (ISO 8879)

HTML: HyperText Markup Language

XML: Extensible Markup Language



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.



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.



XHTML

http://www.w3.org/TR/xhtml1/

XHTML™ 1.0The Extensible HyperText Markup Language

World Wide Web Consortium



HTML 5

http://dev.w3.org/html5/

HTML5A vocabulary and associated APIs for HTML and XHTML

World Wide Web Consortium



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



Syntax / Semantik

Syntax:

<griech.> (Lehre von Satzbau, Satzlehre)

Semantik:

<griech.> (Wortbedeutungslehre)



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">



The Big Picture - 1999 (Ref.: Ken Sall)



The Big Picture - 2003 (Ref.: Ken Sall)

http://kensall.com/big-picture/bigpix22.html



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



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

HTML Syntax and Comment

Syntax Rule:

HTML is not case-sensitive.

Example: <HTML> is equivalent to <html>

Add Comment to HTML source code:



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



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



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



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>



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



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>



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 = " ... "



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




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>



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



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




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>



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



Tables

<tr> <th> </th> <th> </th> </tr>

<tr> <td> </td> <td> </td> </tr>

<tr> <td> </td> <td> </td> </tr>

Simple Table Structure:



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>



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]



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




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>




Cells connected

with

colspan and rowspan



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;



Character Entities

Examples for common Character Entities:

characters not found in the standard alphanumeric character set, e.g.:

ä ä äÄ Ä Äß ß ßç ç ç© © ©@ @



linking Documents

HypertextHypermedia

linking Documents



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



• 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



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



linking Documents

HypertextHypermedia

Colors, Images



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" >



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



Color Model

#00FFFF #000080

#000000 #808000

#0000FF #800080

#FF00FF #FF0000

#808080 #008080

#008000 #C0C0C0

#00FF00 #FFFFFF

#800000 #FFFF00

VGA Color Table (16 colors)



Color Model

Netscape Colors:

216 (6 x 6 x 6) default colors as used in theNetscape browser palette.

Color Table

interactive Table



red

green

blue

black

white

gray valuesRGBCyan

magenta

yellow

RGB representation of color images



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



Images

Monochrome Image:• Each pixel is stored

in a single bit.



Images

Gray-scale Image:• Each pixel is stored

as a byte.



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



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



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



Images

24-bit Color Images:



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



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



• 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



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.




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.




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.



Compressed Images



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



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">



<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">



Document Structure

M

D D D D D DM M M M

Flat Structure



Document Structure

Deep StructureM

D D

M M

M

M M

D D

M M

M

M M



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



Document Structure

Possible Solution to obtain a balanced structure:

Using frame-based structures.

FramesNot supported by HTML5

iframes



Frames

Document Structure with Frames

Dokument 1

Dokument 2

Dokument 3

Dokument 4

Beispiel



HTML - Document Structure with Frames

<HTML>

</HTML>

<HEAD>

</HEAD>


</FRAMESET>

<FRAMESET>

<FRAME>

<FRAME>

</BODY>

<BODY>... Alternativer Text für

Browser ohne Frames



Example: Definition of Frames




<HTML>

</HTML>

<HEAD>

</HEAD>


</FRAMESET>

<FRAMESET>

<FRAME>

<FRAME>

</FRAMESET>

<FRAMESET>

<FRAME>

<FRAME>

<FRAME>

</BODY>

<BODY>... Alternativer Text für

Browser ohne Frames

<FRAMESET>

</FRAMESET>



Frames: Attributes

<html>

<head> <title>Frames</title> </head>

<frameset cols="50%,50%">

<frameset rows="50%,50%">

<frame src="ftest.html">


</frameset>

<frameset rows="33%,33%,33%">




</frameset>

</frameset>

</html>




90%

10%

150 *

120

*

Example: Structure with Frames



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]



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>



Example: Definition of Frames

<html>



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



Example: file for frame "window12.html"

<html>

<font size="+2">

<li><a href="link1.html" target="Window2">link 1</a></li>




</font>

</body>

</html>

HTML <font> tagdeprecated

in HTML 4.01



Example: frame based web page



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">



<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



Extending HTML: Frames



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



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:



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>



DOCTYPE

DOCTYPE - Document Type Declaration



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



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



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.



XHTML

XHTML 1.0 Reference

http://www.w3schools.com



DOCTYPE

DOCTYPE - Document Type DeclarationXHTML <!DOCTYPE> tag

• Strict• Transitional• Frameset

http://www.w3.org/QA/2002/04/valid-dtd-list.html



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">



HTML5

HTML 5 Reference

http://www.w3schools.com



DOCTYPE

HTML5

<!DOCTYPE HTML>