Post on 04-Jun-2018
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 1/35
To understand hypermedia structures
To understand the working of world wide web
To understand how to put multimedia on to the web
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 2/35
A multimedia document is a document which is comprised of information coded in at least one
continuous (time-dependent) medium and in one discrete (time-independent) medium.
A document architecture describes the connections among
the individual elements represented as models:
The manipulation model describes all operations
allowed on the document.
The presentation model defines how the document
could be presented, e.g., as a web page, or an interactive
story book.
The representation model defines the protocol for
exchanging the information among different computers
and the format for these data.
Content
Structure
Presentation Manipulation
modelmodel
Representation model
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 3/35
Document structure is the logical organisation of the information, i.e., the contents. Traditional
documents, such as a book, may contain only text and still images. They can be organised linearly.
The logical structure will be, for example, chapters, sections, subsections, paragraphs.
When documents are exchanged, everything about the document have to be transfered. Theseinclude:
the contents
the structure
the presentation
Therefore, it requires some way of describing the structure and the presentation of the documentalong with the contents.
In contrast to traditional document, hypertext and hypermedia have as their major property, a
non-linear information link .
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 4/35
A hypertext structure is a graph, consisting of
nodes and edges.
The nodes are the actual information units.
The edges provide links to other information
units.
One can follow the edges (arrows or links) to
navigate through the document. The root of thearrows are known as anchors.
Hypermedia
HypertextMultimedia
Hypertext refers to a document containing purely
text, or sometime some images but no continuous
media, with non-linear links, while Hypermediarefers to multimedia systems that include non-
linear structure of information units.
There have been a number of hypertext systems before the recent bloom of World Wide Web, e.g.,Apple’s Hypercard.
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 5/35
When exchanging the document, we need to transfer the contents as well as the structure and the
presentation of the document. To specify the document structure and how it is presented, we need
to put in commands into the document. These are known as markups. There are in general two
kinds of markups: a) logical and b) visual.The logical markups marks the document
elements according to their functions and
relations with other elements, e.g., chapter,
section, paragraph. It does not tell how the
elements looks.
The advantages of logical markups are:
The document structure is explicit, thus theorganisation of information is clear.
It is easy to maintain the consistent look of
the document.
It requires a more powerful process to render
the document.
The visual markups defines how the elements
are rendered, for example, a chapter title is
formatted in Helvetica Bold 24 point, while a
section heading is formatted in Times Roman
Bold 20 point.
With visual markup, the logical structure is lost.
The visual effects of the elements are explicit.
It is easier to keep the fidelity.
It is easier to render the document.
It is hard to maintain the consistent look of
the document.
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 6/35
Examples of logical and visual markups
Logical Markup
\chapter{Interlockings and state machines}
\begin{chapsum}
This chapter describes the dynamic states of
track networks and a method of modellinginterlockings using deterministic finite
state machines.
\end{chapsum}
\section{States of a network}
Recall from Chapter˜\ref{chap-comp}, the type
\htype{:Tcir} representing track circuits,
the type \htype{:Point} representing
points and the type \htype{:Signal}
representing compound signals contain functions
returning the states of the components.
\begin{figure}[htbp]
\includegraphics{stat.eps}
\caption{The network state}
\end{figure}
Visual Markup
\font{Helvetica}{b}{24pt}
{Interlockings and state machines}
\indent{1in}{1in}
This chapter describes the dynamic states oftrack networks and a method of modelling
interlockings using deterministic finite
state machines.
\endindent
\font{Helvetica}{b}{18pt}{States of a network}
\indentline
Recall from Chapter˜\ref{chap-comp}, the type
\texttt{:Tcir} representing track circuits,
the type \texttt{:Point} representing
points and the type \texttt{:Signal} representing
compound signals contain functions returning the
states of the components.
\center
\includegraphics{stat.eps}
\font{Roman}{b}{14pt}{The network state}
\endcenter
The two kinds of markups are often used together, mixed inside a single document.
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 7/35
A document can be viewedin these two aspects at the
same time. In the diagram on
the right, if we start from the
top, we will see the logicalstructure of a document. If we
start from the bottom, we will
see the presentation aspect of
the document.
Chater
chaptertitle
sections
section1 section2
chapter
front
section3
book
page1 page2 page3
block block block
contents
Logical structure
Presentation structure
chapterover-
view
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 8/35
Since the beginning of 1980, the need of making publication in electronic form has be growing
rapidly. In order to facilitate document exchange, ANSI and then ISO developed standards for
document markups. The ISO standard (ISO:8879, 1986) specifies a Standard Generalised Markup
language (SGML).
Since there are numerous kinds of documents, SGML does not specifies a single markup language,
instead, it specifies how to define markup languages, therefore, SGML is a meta-language. Thus,
SGML is very complex language.
SGML source
document
document
formatted
style
information
program
Presentation
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 9/35
Probably, the most popular document markup language nowadays is HyperText Markup
Language(HTML). It it the primary language of the World Wide Web (WWW). HTML is an
application of SGML.
Tim Berners-Lee and Robert Caillau both worked at CERN, an international high energy physics
research centre near Geneva. In 1989 they collaborated on ideas for a linked information system that would
be accessible across the wide range of different computer systems in use at CERN. At that time many people
were using TeX and Postscript for their documents. A few were using SGML. Tim realized that something
simpler was needed that would cope with dumb terminals through high end graphical X Windowsworkstations. HTML was conceived as a very simple solution, and matched with a very simple network
protocol HTTP.
CERN launched the Web in 1991 along with a mailing list called www-talk. Other people thinking
along the same lines soon joined and helped to grow the web by setting up Web sites and implementing
browsers, such as, Cello, Viola, and MidasWWW. The break through came when the National Centre for
Supercomputer Applications (NCSA) at Urbana-Champaign encouraged Marc Andreessen and Eric Bina to
develop the X Windows Mosaic browser. It was later ported to PCs and Macs and became a run-away sucess
story. The Web grew exponentially, eclipsing other Internet based information systems such as WAIS,
Hytelnet, Gopher, and UseNet.
EXCERPT FROM http://www.w3c.org/MarkUp/#historical
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 10/35
The Timeline of HTML
- HTML 1992 The start of the WEB and HTML- HTML+ A set of modular extensions to HTML
- HTML 2.0 Nov. 1995 An IETF Standard (RFC1866)
- HTML 3.0. 1995 Submitted as an Internet Draft. Much richer than 2.0.
Backward compatible with HTML 2.0. Features added
include tables, simple formatting style
- HTML 3.2 Jan. 1997 Even more features are added. These include tables,
applets, text-flow around images, superscripts and
subscripts, and so on
- HTML 4.0 18 Dec. 1997 Supports more multimedia options, richer tables, frames,
embedded objects, scripting languages, style sheets, better
printing facilities and internationalisation of documents
- HTML 4.01 24 Dec. 1999 Fixed a number of bugs in HTML 4.0
- XHTML1.0 26 Jan. 2000 The Extensible HyperText Markup Language - AReformulation of HTML 4 in XML 1.0
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 11/35
A HTML document is actually a text file. This has a big advantage over any binary format. Itis much easier to transmit, to process and to debug.
There are now many tools for preparing HTML documents, e.g., Netscape Composer,
Macromedia Dreamweaver, Adobe Pagemill, MS Frontpage, . . .
It is possible (in theory and in some practical situations) to edit a HTML document using a
text editor.
To edit the HTML directly, you may use some special text editors, such as HomeSite,
HoTMetaL, emacs with HTML-mode, . . .
There are now many converters and filters to convert files in other formats into HTML, such as
converters for LATEX, MS Word, WordPerfect, FrameMaker, . . .
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 12/35
A HTML document is enclosed by a pair of tags <HTML> and </HTML>. It should contain at
least two parts: the head and the body.
<HTML>
<HEAD>
<META NAME="Author"
CONTENT="Wai Wong">
<TITLE>simple document</TITLE>
</HEAD>
<BODY>
<H1>A sample HTML document</H1>
<HR WIDTH="100%">
<P>Some text.
</P>
<HR WIDTH="50%">
<ADDRESS>
Copyright 2000 by Wai Wong</ADDRESS>
</BODY>
</HTML>
The elements in the <HEAD> part are used for
defining informations about the document.
They will not be displayed on a browser.
They may be used by the server to search
for information, such as keywords anddescriptions.
The elements in the <BODY> part will be
shown by a browser. The elements are markedby tags, <XXXX>. There are two kinds of tags:
opening tags required a matching closing
tag, e.g., <H1> and </H1>.
tags without matching closing tags, <BR>.
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 13/35
4.1.1 Elements in the <HEAD> part
<TITLE> Specify the title of the document. Will be displayed at thetitle bar of the browser window
<BASE> Specify a document’s base URI explicitly
<SCRIPT> Place a script within a document
<STYLE> Allow authors to put style sheet rules in the head of thedocument
<META> Used to identify properties of a document, e.g., author,
expiration date, a list of keywords, etc. and to assign values
to those properties
<LINK> Define a link in the head section to convey relationship
information
<OBJECT> allow the author to control whether data should be rendered
externally or by some program
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 14/35
4.1.2 Elements in the <BODY> part
There are many elements that can appear in the <BODY> section of a HTML document. The DTDof HTML4.01 defines the BODY element as follows:
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL)>
<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!ENTITY % list "UL | OL">
<!ENTITY % preformatted "PRE">
The above fragment of DTD defines the elements that can appear directly in the <BODY> part, i.e.,they are not enclosed by other elements. A brief description of these elements are listed in the
table on next page.
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 15/35
<P> Paragraph. Although the end tag is optional, the standard encourage authors to use
proper end tag.
<H1> heading. There are 6 levels, i.e., <H1> to <H6>.
<UL> Un-ordered list. A list of item starting with a dot ( ). Each item is marked by
<LI>. . . </LI>
<OL> Ordered list. A list of numbered items. each list must have one or more items.
<DL> Definition list. Each item of a definition list consists of two parts: a term which is
marked by <DT>, and a description which is marked by <DD>
<PRE> Pre-formatted text. In handling pre-formatted text, visual user agent may leave
white space intact, may render text with fixed-pitch font, and may disable automatic
word-wrap.
<DIV> Grouping element. For marking the text as a block level element without any
formatting information defined. It is expected that this element is used with the id
and class attributes, and together with style sheet to defined formatting information.This provides a means of extending the HTML language by authors.
<BLOCKQUOTE> Block quotation. Usually, visual user agent will format this element as an indented
block.
<FORM> Form. It acts as a container for form controls. In addition to form controls, it can
contain other text and markups.<HR> Horizontal rule.
<TABLE> Table. Tables are divided into rows of data cells. Each row is marked by <TR> and
each data cell is marked by TD.
<ADDRESS> Address. For authors to supply contact information for a document.
<SCRIPT> Script. To place a piece of script in a document.<NOSCRIPT> This element allows authors to prove alternate content when a script is not executed.
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 16/35
Other elements that can appear within a block are listed in table below.
Font style <TT> <I> <B> Change the font style to typewriter, italic and bold.Font size <BIG> <SMALL> Change the font size large or small.
There are more elements that are allowed in the <BODY> of a HTML document. See the HTML
4.01 specification document for more details.
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 17/35
How web pages arrive to your desktop? The browsers and the servers communicate using the
HTTP protocol.
1. The browser initiates a connection
by sending a GET command,optionally with some header
information telling the server how
information should be returned.
2. The server processes the request
and sends back the required
document.
3. The browser processes thedocument and displays it on
the screen.
4. It will send out more requests,
probably to a different server if thereceived document includes linked
elements.
server
HTTP
HTML documents
server
HTTP
HTML documents
Network
Browser
Hyper links
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 18/35
HTTP is the basis for the World Wide Web. It is a very simple protocol. There are two types of
messages in HTTP:
Requests the client (user agent) sends out this
type of messages to the server. The formatof the request messages is:
request-line
headers (0 or more)
blank line
body (only for a POST request)
The request-line has three parts: request,
request-URI and HTTP-version. There are
only three different requests: GET, HEAD
and POST. For example, a simple request
is:
GET / HTTP/1.0
Responses the server responses to the client’s
request by sending back this type of messages. The format of the response
messages is :
status-line
headers (0 or more) blank line
body
The status-line also has three parts:HTTP-version, response code and response
phrase. This tells whether the request was
successful. The body contains the data
requested. A sample status line is:
HTTP/1.0 200 OK
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 19/35
Why does the World Wide Web grow so quickly?
It provides a uniform, graphical user interface to many Internet services, such as mail, news,
ftp, archie, and so on.
It provides a universal way of finding information.
It provides a flexible way to organise and link information.
The Universal Resources Locator (URL) is the common address for finding information on the
Internat. It is specified in RFC1738, Dec. 1994.
http://www.comp.hkbu.edu.hk/˜comp3600/index.html
scheme host path/data name
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 20/35
The general form of a URL is:
scheme
:
scheme-specific-part
Commonly used schemes are:
Scheme Data type Sample URLfile data files file:/user/home/doc/myfile.txt
http HTML file http://www.hkbu.edu.hk/index.html
news News group news:comp.multimedia
gopher Gopher server gopher://gopher.toolbox.orgtelnet telnet connection telnet://faith.comp.hkbu.edu.hk
mailto email address mailto:user@some.company.com
Links are defined as anchors in HTML documents:
<A HREF="http://www.comp.hkbu.edu.hk/index.html"> Home page of my
department</A>
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 21/35
URLs only specify the location of a resources. Since they may often be moved and changed, a
name can be associated to a resource. This name is known as Uniform Resource Names (URNs)
which are intended to serve as persistent, location-independent, resource identifiers. All URNs
have the following syntax:
URN urn: NID : NSS
where NID
is the Namespace Identifier, and NSS is the Namespace Specific String. The
leading “urn:” sequence is case-insensitive. The Namespace ID determines the syntactic
interpretation of the Namespace Specific String.
URLs and URNs are collectively known as Uniform Resource Identifiers (URIs). Therefore, in the
specification of HTML, the links and anchors are called URIs.
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 22/35
A HTML document may include or link to many different kinds of informations, e.g., images,
sounds, animations, . . . Browsers recognise them using a scheme called MIME types. MIME
stands for Multipurpose Internet Mail Extension.
How does this scheme work?
1. Each document may belong to a type specified by the MIME types scheme.
2. The type is recognised by the browser based on the file name extension.
3. The types are specified in a file .mime.type (in UNIX and similar systems).
An example of .mime.type file
#mime types added by Netscape Helper
type=image/gif desc="gif image" exts="gif"
type=audio/x-pn-realaudio desc="RealAudio" exts="ra,ram"
type=audio/midi desc="midi" exts=".mid,.midi"
type=audio/x-wav desc="WAV Audio" exts="wav"type=application/postscript desc="Postscript Document" exts="ai,eps,ps"
type=application/pdf desc="Portable Document Format" exts="pdf"
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 23/35
Of the numerous types of media, popular browsers can handle internally a small number of them,
for example, usually, only GIF and JPEG images can be handled by browsers.
<IMG SRC="images/pattern.gif"
ALT="COMP3600 home" HSPACE="10" VSPACE="10"
HEIGHT="400" WIDTH="600">
The SRC attribute tells where the image file is.
The ALT attribute gives the text to be displayed if a browser cannot handle this image.
The HSPACE and VSPACE attributes specify the space between the image and the
surrounding elements.
The HEIGHT and WIDTH attributes specify the size of the image.
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 24/35
What will happen when the browser processes this tag?
It sees the image file name images/pattern.gif
It request the file from the server
It looks at the .mime.type file and finds that the suffix .gif corresponds to the type
image/gif
Since this is a type of media that the browser can handle, it renders the image on the page
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 25/35
For other types of media, there are basically two means of handling them:
Plug-ins are extensions of the browsers. The media handled by the plug-in will be shown withinthe browser window. When a document whose type is handled by a plug-in is received, the
plug-in is automatically started by the browser.
Helper applications are separation programs and executed as a separate process. A helper
application usually creates and displays the media on a separate window. But some candisplay the media within the browser window. The browser uses a file .mailcap to
configure which helper handles which type of media.
An example of .mailcap file
#mailcap entry added by Netscape Helper
audio/x-pn-realaudio;raplayer %s
#mailcap entry added by Netscape Helper
audio/midi;playmidi %s
#mailcap entry added by Netscape Helper
application/postscript;ghostview %s
#mailcap entry added by Netscape Helper
application/pdf;acroread %s
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 26/35
Since the web is becoming more and more popular, more and more hypermeia documents are
delivered on the web. Because many hypermedia documents are very large in size, to download the
whole document before playing it takes a long time.
Streaming is a method of showing multimedia elements on the web without a long initial delay.
The browser requests the document
After receiving and buffering the initial part of the document, it starts showing the document
without waiting for the completion of the transfer
Many continuous media can be handled in this way:
Sound — RealAudio (RealPlayer)
Music (MIDI) — LiveUpdate’s Crescedo, Yamaha’s MidiPlug
Video — RealVideo (RealPlayer)
Animation — Macromedia’s Shockwave
Virtual reality — VRML player
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 27/35
This technology requires
either a plug-in or a helper application to handle the media
an application program to prepare the media
the server is configured to recognise and to serve the media
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 28/35
There are three favours: Shockwave for Authorware, Shockwave for Director, and Shockwave for
Flash.
The procedure for creating the pieces:
1. Using the applications, e.g., Authorware, to create the pieces, pay special attention to the
requirements of the Web. (Refer to the Multimedia Applications Handbook for more details on
creating shocked pieces.)
2. Using the tool provided by the application, e.g., Authorware Afterburner, to create the
‘shocked’ piece.
3. Embed the piece into a HTML document using the following tag (in Netscape).
<EMBED SRC="myfile.aam" WIDTH=640 HEIGHT=480
TYPE="application/x-authorware-map"
PULGINPAGE="http://www.macromedia.com/shockwave/download/altern
WINDOW=onTop PALETTE=Background>
4. Upload all required files to the server and configure the server to recognise the media type.
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 29/35
XML stands for Extensible Markup Language. It is the universal format for structured documents
and data on the Web. XML 1.0 became the recommendation by W3C in February 1998. It is still
in active development. Since the release of XML 1.0, a number of related specifications have been
released and more are being developed.
XML is a SGML application. The major goal of XML is to allow authors to put the structured
information into a document. The visual information for rendering the document are usually
specified in a separate object. Cascade Style Sheets (CSS) or Extensible Style Language (XSL) are
often used for this purpose.
XML is more powerful because it is extensible. It defines very small number of tags, but it allows
the authors or developers to define their own tags. However, when defining new tags, one has to
follow certain rules. A document following these rules is known as a well-formed document. The
rules are:
1. The XML declaration must begin the document.
<?xml version="1.0" standalone="yes"?>
2. Elements that contain data must have both start and end tags, for example, a paragraph must
be enclosed in the tags <P> and </P>.
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 30/35
3. Elements that do not contain data and use only a single tag must end with />, for example, a
tag to draw a horizontal rule should be <hr width="50%"/>.
4. The document must contain exactly one element that completely contains all other elements,i.e., the root element.
5. Elements may nest but may not overlap.
Correct nesting<B><BIG>Large bold</BIG></B> Incorrect overlapping<BIG><B>Large bold</BIG></B>
6. Attribute values must be quoted, for example, it is wrong to write <hr width=50%/>.
7. The characters < and & may only be used to start tags and entity references, respectively.8. The only entity references which appear are &, <, >, ' and ".
The way in which one extends XML is to create a Document Type Definition (DTD). The DTD
defines a list of elements, attributes, notations and entities that are allowed in an XML document.
The DTD can be internal, which means it is embedded within the XML document, or external,
which means it is in a separate file.
An XML document is valid if it satisfies all the constraints specified by the DTD.
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 31/35
SMIL stands for Synchronised Multimedia Integration Language. It is a new markup language that
became a W3C recommendation on 15 June 1998.
There are a few player that can play SMIL documents. RealPlayer G2 is one of the best players.
Features of SMIL include:
Capable of handling many types of media, such as sound, image, video, text, and so on.
The author can specify where the elements are presented on the SMIL presentation pane.
The author can specify when the elements are presented.
It allows choice from alternative elements to be made according to runtime system status.
A new version of SMIL, known as SMIL-Boston, is in W3C working draft as on 20 February
2000. It adopts a better defined Document Object Model (DOM) and more in favour to XML
syntax convention. It is divided into modules. Each module can be re-used in other XML
applications, such as XHTML.
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 32/35
Like HTML file, a SMIL file starts witha <smil> tag, and it is divided into two
parts: a <head> part and a <body>
part. The <head> part contains some
information about the whole SMIL file.The <body> contains the instructions
of how to present the multimedia
elements.
<smil><head>
<!-- the head part -->
</head>
<body><!-- the body part -->
</body>
</smil>
The <layout> element is the only mandatary element in the <head> part. It determines how
the elements in the document’s body are positioned on an abstract rendering surface. It may
contain the <root-layout> and the <region> elements.
The <root-layout> element specifies the root visual presentation space for the entire SMIL
file. The <region> element specifies an abstract presentation space that may have a name and
become the target of some media elements, i.e., you can specify that a certain element to be
displayed in a certain regain.
A l f SMIL l
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 33/35
An example of SMIL layout
<layout><root-layout height="425" width="450" background-color="black"/>
<region id="title" left="50" top="150" width="350" height="200"/>
<region id="full" left="0" top="0" height="425" width="450"
background-color="#602030"/>
<region id="video" left="200" top="200" height="180" width="240"
z-index="1"/>
</layout>
Root
titel
video
full
Th b d t t i i f ti th t i l t d t th t l d li ki b h i f th
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 34/35
The <body> part contains information that is related to the temporal and linking behaviour of the
document. Two most important elements that can appear in the <body> part are:
<seq> The children of this element form a temporal sequence, i.e., they will be presented
one-by-one.
<seq>
<video src="slide_narration_video1.rm" region="video"/>
<audio src="slide_narration_audio1.ra"/>
<video src="slide_narration_video2.rm" region="video"/>
</seq>
<par> The children of this element can overlap in time. The textual order of appearance of
children in a par has no significance for the timing of their presentation.
<par>
<audio src="map_narration.ra"/>
<img src="map.rp" region="full" fill="freeze" dur="20s"/>
</par>
The other elements that are allowed in the <body> part are the media object elements. They allowthe inclusion of media objects into a SMIL presentation. Media objects are included by reference
(using a URI).
8/13/2019 Ch02_Hypertext Hypermedia
http://slidepdf.com/reader/full/ch02hypertext-hypermedia 35/35
Document model, document structure
Hypertext and hypermedia
Document markups
HTML documents
Multimedia on the World Wide Web
New markup languages: XML, SMIL