17-03-2020

Internet Basics

WWW and HTML, and XML

Multimedia Web

3D Worlds

Text for Web

Images for the web
Source Acknowledgement
Sound and Animation on the Web
Ch12-14,Vaughon(2007): Multimedia – Making it Work, Tata McGraw Hill
Villamil et al(2001): Multimedia – An Introduction, PHI

Miscellaneous topics and supplements.

1 2

Several LANs can be interconnected using

The Internet began as a research network funded
gateways and routers to form a wide area
by the Advanced Research Projects Agency
network (WAN).
(ARPA) of the U.S. Defense Department in 1969.

LANs and WANs can be connected to the

In 1989, the National Science Foundation (NSF)
Internet through a server that provides Internet
took over the management of the ARPANET.
software and physical data connection.

Internet -A network is a cluster of computers.

The Domain Naming System (DNS) assigns

In a network, the server computer provides names and addresses to computers linked to the
network services to the client computers on that Internet.
network.

Top-level domains (TLDs) were established as
categories to accommodate Internet users.
3 4

The two-letter US domain is based on political
A stream of data that is sent over the Internet is
boundaries. first broken down into packets by the TCP.

The IP address or Internet address is made up
Data packets include the receiving computer's
of four numbers separated by periods. address, a sequence number, error correction

Transmission Control Protocol (TCP) and information, and a small piece of data.
Internet Protocol (IP) are the protocols for
IP is responsible for sending the packet to its
communication on the Internet. destination along a route.

5 6

1
 17-03-2020

A telephone dial-up account and modem, a
The amount of data expressed in terms of bits
cable modem, or a Digital Subscriber Line per second (bps) is referred to as bandwidth.
(DSL) is required for network connection.
The greater the bandwidth, the lesser will be

An ISP (Internet Service Provider) offers one or the time taken to upload or download data.
more Points of Presence (POPs) to connect to
Low-bandwidth modem connections are a
the ISP's server. bottleneck for sending multimedia across the

The PPP (Point-to-Point Protocol) and the Internet.
TCP/IP software are required to connect to the
Internet through an ISP.

7 8

Bandwidth bottlenecks can be avoided using the

Each Internet service is implemented on an
following options:

Compress data before transmitting.
Internet server by dedicated software known as

Oblige users to download data only once, and then store that a daemon.
data on the system's hard disk.
Daemons are agent programs that run in the

Design multimedia elements to be efficiently compact.
background and wait to act on requests.

Bandwidth bottlenecks can be avoided using the
following options (continued):

Design alternate low-bandwidth and high-bandwidth
navigation paths to accommodate all users.

Implement incremental streaming methods.

9 10

Recognizable documents and formats are required
The World Wide Web was designed by Tim
to work with multimedia on the Internet. Berners-Lee.

MIME (Multipurpose Internet Mail Extensions) type
It is a protocol for linking multiple documents
is a standard list of file name extensions. located on computers anywhere within the

It identifies the nature and purpose of the Internet.
transmitted data. It supports services such as
The Hypertext Transfer Protocol (HTTP)
Hypertext Transfer Protocol (HTTP) and Post Office provides rules for a simple transaction between
Protocol (POP). two computers on the Internet.

The other services provided by the Internet include
Hypertext Markup Language (HTML) is a
https, ftp, gopher, usenet, telnet, Internet Relay Chat document format for presenting structured text
(IRC), Simple Mail Transport Protocol (SMTP), and
mixed with inline images.
mud.
11 12

2
 17-03-2020

The Internet connects private companies, organizations,

Dynamic Web pages can be created using Cold universities, and individuals.
Fusion, PHP, JavaScript, and programs written
The Internet is a cluster of computers.
in Java.
ISPs provide network connections through a dial-up
account, a cable modem, or a Digital Subscriber Line

XML (eXtensible Markup Language) is used to
(DSL).
format and delivery Web pages using styles.

The Domain Name System (DNS) manages the identities

Designing effective multimedia for the Web of computers connected to the Internet.
includes:
HTTP provides rules for contacting, requesting, and
 Presenting text, images, audio, and animation in a user-friendly sending documents encoded with the Hypertext Markup
interface that balances bandwidth deficits. Language (HTML).
 Understanding how to deliver multimedia content for HTML
browsers and plug-in/player vehicles.

JavaScript, Cold Fusion, and XML can be used to
generate dynamic Web pages.
13 14

Web servers.
The functioning of the Web involves

Web browsers. communication between a server computer

Web page makers and site builders. and a client computer.

Plug-ins and delivery vehicles.
A Web server is a computer that delivers a file
when a client computer sends a request.

Beyond HTML.

Web servers vary in strength and capacity for a
variety of platforms meeting the HTTP
requirements.

15 16

Web browsers are applications that run on the
Web browsers differ in features, performance,
client side (user’s PC) on the Internet. and cost.

They provide an interactive graphical interface.
Mozilla Firefox and Microsoft Internet Explorer

This interface is used for searching, finding, are two of the most popular Web browsers.
and viewing text documents, sounds, and
multimedia resources on the Web.

17 18

3
 17-03-2020

HTML documents are simple ASCII text files
HTML translators export a word-processed
without any formatting. document with its text styles and layout

Active Server Pages, ColdFusion, or PHP are converted into HTML tags.
the programming environments needed for
Many HTML editors and Web page-making
building dynamic sites. applications offer to shortcut HTML learning

HTML translators are built into many word curves and working effort.
processing programs.

19 20

Dedicated editors are usually WYSIWYG
Adobe GoLive and Macromedia Dreamweaver
(What You See Is What You Get) word MX are WYSIWYG HTML editors.
processors.
GoLive allows a user to create and edit text
pages, import images, and link to other
documents.

21 22

Plug-ins allow end users to view and interact
Text.

with new types of documents and images.
Images.

Helper applications (or players) display or run
Sound.
files downloaded from the Internet.
Animation, video, and presentation.

23 24

4
 17-03-2020

Text and document plug-ins overcome the
Most browsers read only bitmapped JPEG, GIF,
display limitations of HTML and Web and PNG image files.
browsers.
Plug-ins that enable the viewing of vector

Adobe Acrobat provides special fonts and formats (such as Flash) are useful.
graphic images embedded as data into the file.
Vector graphics are device-independent. An
image is displayed at the correct size and with
colors supported by the computer.

25 26

Digitized sound files in MP3, WAV, AIF, or AU
Speech files can be encoded into a token
formats may be sent and played on a user’s language that is a shorthand description of the
computer from Internet. speech components.

MIDI sound files are more compact, but they
Sound elements may also be embedded into
depend upon the computer’s MIDI setup for projects made with various authoring tools.
quality.
Some sounds can be multicast to allow
multiple users to listen to the same data
streams without duplication.

27 28

The most data-intense multimedia elements are
CGI (Common Gateway Interface) is a
video streams containing images and standard for interfacing external applications
synchronized sound. with information servers.

Video streams are commonly packaged as
Web-enabled 3-D environments promise
Apple’s QuickTime, Microsoft’s Video for compelling and interactive multimedia
Windows (AVI), and as MPEG files. experiences.

The trade-off between bandwidth and quality
is ever present when designing, developing,
and delivering animations or motion video for
the Web.

29 30

5
 17-03-2020

A Web server delivers a file when a client
Introducing multimedia on the Web.
requests for it.
Designing text for the Web.

Browsers are applications that run on a user’s
Creating images for the Web.
PC to provide an interface for downloading
and viewing documents and multimedia.
Adding sounds to Web pages.

Many HTML editors and Web page-making
Creating animation for the Web.
applications require less HTML skills and
working effort.

Plug-ins allow users to view and interact with
new types of documents and images.

31 32

Launched in 1989, the WWW was not originally
It is a markup language.

It uses tags to perform functions such as formatting text
designed for integrating multimedia.
and embedding media.

It was designed as a method of delivering
HTML tags are enclosed by angular brackets.
simple text documents formatted in HTML.
The tags can be written either in upper case or in lower
case. They can be bounding or stand-alone tags.

Workspace:

It provides tags for inserting media into HTML
 The most widely preferred monitor resolution is 800x600.
 The usable area of the screen is always smaller than the monitor’s
documents. These are:

The <IMG> tag for inserting inline images.
display area.

The <EMBED> and <OBJECT> tags for embedding compound

Nibbling: documents.

The <APPLET> tags for code.
 Nibbling is an important design principle.
 While nibbling, the user has to seek a balance between quality and
available bandwidth.

33 34

User preference in the browser may alter the way text

in a document looks and flows.
The <FONT> tag:

Ideally, documents must be designed using Times New  To specify a font, use the FACE attribute of the <FONT> tag.
Roman as a proportional font and Courier as the mono-  To specify the font color, use the COLOR attribute.
spaced font.  To set the size of the text, use the SIZE attribute.

OpenType and TrueType are standard methods for
The <TABLE> tag is used for organizing text into
displaying typefaces on the Web. columns.

Cascading style sheet (CSS) available in dynamic
The ALIGN attribute of the <IMG> tag enables text to
HTML (DHTML) makes font management flexible. It flow around an image.
sets text styles across Web pages.
The HSPACE and VSPACE attributes of the <IMG> tag
add space between an image and the surrounding text.

The <BR> tag causes text to begin on a new line.

35 36

6
 17-03-2020

All browsers recognize three image formats,
GIF versus JPEG.

GIF, PNG, and JPEG.
Adobe Photoshop.

Graphical Interchange File (GIF) images are
Backgrounds.
limited to 8 bits of color depth (256 colors). It is
a commercial image format.

PNG is an open format supported by most image
creation programs.

Joint Photographic Experts Group (JPEG) uses lossy
compression to produce files of size smaller than GIF.

37 38

GIF files are used for line art and images that
It is the most preferred tool for graphic artists.
contain large areas of the same color.
The native Photoshop format is PSD.

GIF compresses drawings and cartoons that
PSD files are in RGB mode that is they use
have only a few colors in them much better maximum color depths.
than JPEG.

JPEG can be used for photo-realistic images.
These files are larger in size and contain layers.

JPEG can compress images at a ratio of even
75:1, but they compress very slowly.

39 40

When creating images bound for the Web, use
To save an image as a JPEG file, flatten and
a resolution of 72 pixels per inch. merge all layers into a single bitmap.

Save the original image in a 24-bit loss-less
To save an image as a GIF file, set the mode of
image format. the image to Indexed Color.

After image manipulation in the RGB mode,
To make an image transparent, allow it to float
save the source image as a PSD file. on the document background. GIF89a formats

Changing the mode from RGB Color to allow transparency, while JPEGs do not.
Indexed Color changes the color depths of the
image.

41 42

7
 17-03-2020

The <BODY> tag.
The BGCOLOR attribute sets the background

Clickable buttons. color for a document.

Image maps.
The TEXT attribute controls the color of the
normal text.

The LINK attribute controls the color of an
unvisited link.

The VLINK attribute controls the color of a
visited link.

The ALINK attribute controls the color of an
active link.
43 44

A graphic image can be made ‘clickable’ to link
Image maps are pictures with defined hot spots
to another document. This is done by including that link to other documents when a user clicks
the image tag inside the bounding tags of an on them.
HTML anchor that points to that document’s
Web sites display image files using Common
URL. Gateway Interface (CGI) programs.

The BORDER attribute of the <IMG> tag
In client-side image maps, mouse coordinates
should be set to zero. and their associated document URLs are
included in the client’s HTML document.

45 46

Plug-ins allows embedding of sounds into
The <BLINK> and the <MARQUEE> tags
HTML documents. provide very limited dynamism to HTML.

Internet Explorer offers the <BGSOUND> tag
The GIF89a format specification creates simple
to play an AU, WAV, or MIDI sound track in a animations. It integrates multiple images, or
document background. frames, into a single GIF89a file and displays

Netscape and Internet Explorer offer the them with programmable delays between
QuickTime plug-in for playing AIFF, MIDI, them.
WAV, and AU formats.

Streaming audio is more useful for the Web,
where a sound file can start playing as soon as
data begins to download.
47 48

8
 17-03-2020

The <IMG> tag is used to embed a GIF89a

multiframe image. Plug-ins and players:

Limit animated GIFs to small images.  Full animation capability became available to Web developers with the

Macromedia Shockwave, Director, Flash, and introduction of Macromedia's Shockwave.

QuickTime are a few plug-ins used for  Macromedia Flash uses Shockwave to create a .swf (Shockwave Flash)
animation.
version of the native .fla file. This enables images to be displayed on

the Web.

 While embedding plug-in or player-supported animation files into a

Web page, cross-platform issues should be taken into consideration.

49 50

HTML provides tags for performing varied

functions.

The three primary image formats used on the
Web are GIF, PNG, and JPEG.

Images, sounds, and animation can be
embedded in an HTML file.

51