Multimedia Elements

This type elements is used to insert or embed multimedia files on a webpage for more creativity.

applet:
Inserts a Java applet (mini application) into the document. The applet element’s purpose is to embed mini Java applications (hence the name applets meaning ‘little apps’) into the flow of a page. If any param elements are specified in the applet tag, then they must be placed before all other content.

This element was defined as far back as HTML2 but was removed from the HTML recommendations in HTML 4.01, replaced with the much more flexible and non Java-specific object element in its place.

Example:
A super simple applet element being used to display a stock ticker.
<applet code="ticker.class">
</applet>

area:
Defines a hotspot within a client-side image map.We use the area element to define each hotspot that’s clickable or actionable and will act as a link within a client-side image map . The behavior of a hotspot is similar to a normal link (the a element) in that it can be activated with a mouse click or the keyboard, and it’s used to link to another web page or resource; it’s also similar to the image element because, as it defines a specific area of a larger image, it requires us to set an alt attribute for those using non-visual browsers.

The hit, or actionable, area of the image is defined using a combination of the shape and coords attributes, which create the hit area boundaries as a sequence of x,y coordinate pairings.

Example:

This code identifies one area element within an image map:
<map name="bigthings" id="bigthings">
  <area shape="rect" coords="35,4,205,108"
      href="http://en.wikipedia.org/wiki/Australia's_Big_Things"
      alt="Australia's Big Things (on Wikipedia)"/>
</map>
<p><img src="giant-prawn.jpg" alt="The Giant Prawn at Ballina"
    border="0" usemap="#bigthings"/></p>

bgsound:
Plays a background sound on page load. The bgsound element is used to play an audio file when the page loads and has a handful of attributes to control that audio, including balance, volume, loop and the most important of all, the src attribute which refers to the file required.

Note that this is a non-standard element (it was never defined in any standard), and so there is little point in writing it to be XHTML-compliant, as it will never validate.

Example:
<head>
<bgsound src="titanic.wav"/>
</head>

embed:
Provides a generic (non-standard) container for a media object. Embed is a non-standard but well-supported element that’s used to embed multimedia content, including media types that mightn’t usually be natively supported by the browser. It can also be used for embedding media types that are supported, such as images in .jpg, .gif, or .png format.

Although embed is an empty element, an end tag is still required for the sake of browser compatibility.

Example:
In this example, a super-simple embed element is used to display a video file in .mp4 format:
<embed src="volksworld-video-report.mp4">
</embed>

img:
Specifies an inline image element. The img element provides a means for embedding an image in the document, which can be used for as many different purposes as your imagination allows.

Example:
<img src="sarib.jpg" alt="Certified Webdeveloper">

map:
Defines a client-side image map. The map element is a container for a number of area elements that define specific areas within an image. The map has one required attribute, the name attribute, which is associated with the image’s usemap attribute to create a relationship between the image and the map.

Example:
This code defines an image map named "bigthings":
<map name="bigthings">
  <area shape="rect" coords="35,4,205,108"
      href="http://en.wikipedia.org/wiki/Australia's_Big_Things"
      alt="Australia's Big Things (on Wikipedia)"/>
  <area shape="rect" coords="136,163,255,230"
      href="http://vwkombi.com/" alt="The VW Kombi,
      another Aussie icon"/>
</map>

noembed:
Specifies alternative content for browsers that don’t support embed. The noembed element is used to provide alternative content for browsers that don’t support the embed element.

Example:
This noembed element provides an alternative for video content:
<noembed>
<img src="12345.jpg" alt="Tiger image">
<p>YThis browser is not compatible for showing this pic.</p>
</noembed>

object:
Specifies a generic, multipurpose container for a media object. The object element’s purpose is to embed into a document a variety of different kinds of media files. Historically, it was used primarily for placing ActiveX controls onto a page, but it can also be used to embed images (.gif, .jpg, and so on), movie files and applets, video files, PDF documents, Flash, and even HTML.

Infrastructure:
<object archive="uri" border=" { number | percentage } " classid="class ID" codebase="uri" codetype="MIME type" data="uri" height=" { number | percentage } " type="MIME type" width=" { number | percentage } ">
</object>

Example:
To embed Flash using object, rather than going down the nonstandard embed route, use the following markup:

<object data="movie.swf"
    type="application/x-shockwave-flash"
    width="200" height="100">
  <param name="movie" value="movie.swf">
  <param name="wmode" value="opaque">
</object>

param:
Specifies parameter information to be passed to an object or applet.

No comments:

Post a Comment