Hypertext and

Hypermedia

Rawesak Tanawongsuwan
ccrtw@mahidol.ac.th
 12 384

Hypertext
• Text augmented with links

• Link: pointer to another piece of text in

same or different document

• Navigational metaphor

• User follows a link from its source to its

destination, usually by clicking on source
with the mouse

• Use browser to view and navigate hypertext

 12 385–386

Cursory History
• Memex – V Bush, 1945
• Concept of linked documents; photo-
mechanical realization never implemented
• Xanadu – Ted Nelson, late 1960s/early 1970s
• Intended as global system
• Hypercard – Apple, 1987
• Shipped with every Mac; popularized
concept
• World Wide Web – 1992
 12

Memex
• President Roosevelt's science advisor during
World War II, Dr. Vannevar Bush, proposes
Memex in an article titled As We May Think
published in The Atlantic Monthly.

• In the article, Bush outlines the ideas for a

machine that would have the capacity to store
textual and graphical information in such a way
that any piece of information could be
arbitrarily linked to any other piece.
 12 386–388

Non-linearity
• Hypertext not usually read linearly (from start
to finish)

• Links encourage branching off

• History and back button permit backtracking

• Not an innovation, but the immediacy of

following links by clicking creates a different
experience from traditional non-linearity (e.g.
cross-references in encyclopedia)
 12 389

Links
• Simple unidirectional links
• Connect single point on one page with a point on
another page (e.g. WWW)
• Extended links
• Regional links (ends may be regions within a
page)
• Bidirectional links (may be followed in both
directions)
• Multilinks (may have more than two ends)
 12

Lost in Hyperspace
• Possibility of disorientation

• Nodes & links become a confusing issue

Internet World Stats, www.internetworldstats.com

 12 390–391

Browsing & Searching

• Browsing – retrieve information by association

• Follow links, backtrack

• Maintain history, bookmarks

• Searching – retrieve information by content

• Construct indexes of URLs

• Search by keyword/description of page

 12

How search engine works

Excerpted the animation clip from http://www.learnthenet.com/

Excerpted the animation clip from http://www.learnthenet.com/

 12 392–393

Web Indexes
• Manual (Yahoo!, Open Directory Project,…)

• Classify sites on basis of human evaluation of

their content

• Navigate hierarchy, or search entries by

keyword

• Automatic (Google, AltaVista,…)

• Spider/robot 'crawls' Web, collecting URLs and

keywords extracted from pages

• Highly efficient search engine processes queries

 12 393–394

Automatic Indexing
• Must extract keywords automatically from pages

• Apply heuristics to identify meaningful words within text

• Use metadata (data about data) added by page's author

• <meta name="keywords" content="…">

• <meta name="description" content="…">

• Google applies weighting based on number of links pointing

to a page

• Pages which are referred to by links in many other sites,

or in sites that are considered to be significant, should
appear higher in the listing than sites which have no
incoming links
 12 395

URLs
• Uniform Resource Locators

• Resource is something that can be accessed by a higher

level Internet protocol – HTTP, FTP, SMTP

• Often a file, but may be dynamically generated data

• The way in which data can be accessed is constrained by

the protocol used

• e.g. a mailto resource identifies a user’s mailbox

• An ftp resource identifies a file

• A resource is like an abstract data type, identifying

some data and providing a set of operations that can be
performed on it
 12 395–396

URL Syntax
• Protocol :// domain name / path

• N.B. This is a slight simplification, covering

the most common usage

• e.g. http://www.digitalmultimedia.org/Materials/keypoints.html

• Domain name identifies a host within a

hierarchical naming scheme

• Path is like Unix pathname: segments separated

by /s, identify resource in a hierarchy (e.g. file
system)
 12 397

URL Paths
• Complete specification of the location of a file
containing HTML
• e.g. /Materials/index.html

• Implicit specification of a standard file within a

directory
• e.g. /Materials/

• Specification of a program that generates

HTML dynamically
• In special place (cgi-bin) or identified by
extension (e.g. .php)
 12 398

Partial URLs
• URL with some of the leading components missing

• Missing components filled in from the base URL of

the document in which the partial URL occurs

• Usually, base URL is the URL used to retrieve the

document, but it can be set explicitly with <base>
tag

• <base href=http://digital_multimedia.org/>

• links/index.html

• http://digital_multimedia.org/links/index.html
 12 399

Fragment Identifiers
• Links can point to a location within a page

• URL identifies the entire page

• Append a fragment identifier to a URL

• #name

• e.g.
http://www.digitalmultimedia.org/index.html#top

• Use a named anchor to identify the

corresponding location in the page
 12 403–405

HTML & Hypermedia

• href of an a element might not point to an HTML file
• Server response will include an indication of what sort of
data it will return (MIME type) when resource is retrieved
(deduced from extension)
• Browser will either
• Deal with data itself
• Call on a helper application to display the retrieved
resource externally
• Application/pdf (PDF documents) needs Adobe Reader
• Use a plug-in to display it in browser window
• Macromedia’s Flash Player
 12 405–408

Hypermedia Markup
• If non-textual data is rendered within the
browser, can integrate images, video, etc within
Web page

• img element is established way of embedding

bitmapped images (GIF, JPEG, PNG)

• object element can be used for any type of

embedded data

• embed element not standard, but widely

supported for embedding video, audio and applets
 12 408–410

Links and Images

• An image may appear in the content of an a
element, to serve as a clickable link

• e.g. thumbnail image linked to bigger

version

• An image map can contain several hot spots,

each linked to a URL

• usemap attribute of img designates map

element, which contains area elements
specifying shape and position of hot spots and
their associated URLs
Flash text

Traditionally, an alternative way to using
CSS to deal with fonts is to use a GIF
image for text
 However a GIF image is much larger in size

Another way is to use a SWF file
 Text in SWF files is in vector form  much
smaller
 Use the Flash text icon under “media” menu


Flash text

Flash text
Inserting image
Types of multimedia

Image: Jpeg, gif, png

Audio: mp3, RealAudio, WAV, MIDI, WMA,
QT

Movie: WMV, AVI, MOV, MPEG, RM, SWF
The Common and Media Tabs of the
Insert bar
Inserting Audio Files

Inserting a hyperlink to an audio file
 Select part of the page, then add a link to an audio file

Embedding the audio file on the page
 Click the plugin icon in the Media menu to insert an audio
object, then expand the audio icon

Embedding the audio file as background
 Do pretty much the same as embedding an audio file, then
make the icon very small and set some parameters to
make it invisible and autostart and loop
Inserting video files

Linking to video files

 Similar to linking to audio files

Embedding video files
 Similar to embedding audio files also
Inserting Flash movies

Similar to audios and videos

Select a flash icon in the Media menu
Image maps

Adding links to an image meaning that clicking
anywhere on the image causes the links to be
followed (hot spots)

Graphics programs such as Fireworks, ImageReady,
Illustrator allow us to create maps easily (sometimes
it is more convenient to do so using feature in
graphics applications at the time of creating the
image)

However, we can use Dreamweaver to do this too