Docstoc

Chapter-7(HTML5)

Document Sample
Chapter-7(HTML5) Powered By Docstoc
					7. EMBEDDED CONTENT
        7.1. The img element

This element represents an image to the document.

Attributes support:

alt:- This attribute defines the alternative text describing the image. The value of this
attribute will be any and it replaces the image in the document, in case if the image is wrong
or not displayed properly or unsupported type.

src:- This attribute must be present and contain a valid non empty url.

width and height:- Represent the width and height of the image respectively.

ismap:- This Boolean attribute indicates that the image is part of a server-side map. If so, the
precise coordinates of a click are sent to the server. This attribute is allowed only if the <img>
element is a descendent of an <a> element with a valid href attribute.

usemap:- The partial URL (starting with #) of an image map associated with the element. You
cannot use this attribute if the <img> element is a descendent of an <a> or <button>
element.

Supported img format:

   •    JPEG , GIF (including animated GIF), PNG, APNG, SVG only (removed XBM)

Example:

In this example, a user is asked to pick his preferred color from a list of three. Each color is
given by an image, but for users who have configured their user agent not to display images,
the color names are used instead:

<h1>Pick a color</h1>

<ul>

<li><a href=”green.html”><img src=”green.jpeg” alt=”Green”></a></li>

<li><a href=”red.html”><img src=”red.jpeg” alt=”red”></a></li>

<li><a href=”blue.html”><img src=”blue.jpeg” alt=”blue”></a></li>

</ul>



        7.2. The iframe element
This element represents a nested browsing context, effectively embedding another HTML
page into the current page. Each browsing context has its own session history and active
document. The browsing context that contains the embedded content is called
the parent browsing context. The top-level browsing context (which has no parent) is
typically the browser window.

Attributes support:

height:- Indicates the height of the frame.

src:- The url of the page to embed.

width:- Indicates the width of the frame.

srcdoc:- The content of the page that the embedded content is to contain.

seamless:- This Boolean attribute indicates that the browser should render the inline frame in
a way that makes it appear to be part of the containing document, for example by applying
CSS styles that apply to the <iframe> to the contained document before styles specified in
that document, and by opening links in the contained documents in the parent browsing
context (unless another setting prevents this).

sandbox:- This attribute, when specified enables a set of extra restrictions on any content
hosted by the <iframe>. Its value must be a space-separated list of tokens that lift particular
restrictions. Valid tokens are:

allow-same-origin, allow-top-navigation, allow-forms, and allow-scripts.

When the attribute is set, the content is treated as being from a unique origin, forms and
scripts are disabled, links are prevented from targeting other browsing context and plugins
are disabled.

The allow-same-origin keywords allow the content to be treated as being from the same
origin instead of forcing it into a unique origin, the allow-top-navigation allow the context to
navigate its top-level browsing context and allow-forms and allow-scripts re-enable the forms
and scripts respectively.

Warning:

Setting both the allow-scripts and allow-same-origin keywords together when the embedded
page has the same origin as the page containing the iframe allows the embedded page to
simply remove the sandbox attribute.

Sandboxing hostile content is of minimal help if an attacker can convince the user to just visit
the hostile content directly, rather than in the iframe. To limit the damage that can be caused
by hostile HTML content, it should be served using the text/html-sandboxed MIME type.
Example:

Here a blog uses the srcdoc attribute in conjunction with the sandbox and seamless attributes
described below to provide users of user agents that support this feature with an extra layer
of protection from script injection in the blog post comments:

<article>

<h1>I got my own magazine!</h1>

<p>After much effort, I've finally found a publisher, and so now I

have my own magazine! Isn't that awesome?! The first issue will come

out in September, and we have articles about getting food, and about

getting in boxes, it's going to be great!</p>

<footer>

 <p>Written by <a href="/users/cap">cap</a>.

 <time pubdate>2009-08-21T23:32Z</time></p>

</footer>

<article>

 <footer> At <time pubdate>2009-08-21T23:35Z</time>, <a href="/users/ch">ch</a> writes:
</footer>

 <iframe seamless sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>

</article>

<article>

 <footer> At <time pubdate>2009-08-21T23:44Z</time>, <a href="/users/cap">cap</a>
writes: </footer>

 <iframe seamless sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?
mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>

</article>

<article>

 <footer> At <time pubdate>2009-08-21T23:58Z</time>, <a href="/users/ch">ch</a> writes:
</footer>

</article>
       7.3. The embed element (empty)

This element represents an integration point (typically non-HTML) for an external application
or interactive content. ( in other words, a plugin)

Attributes support:

width and height:- Represents width and height.

type:- Represents MIME type.

src:- Gives the address of the resource being embedded.

Example:

<embed type=”video/quicktime” src=”movie.mov” width=”640” height=”480”>

To pass the plugin a parameter “quality” with the value “high” an attribute can be specified:

<embed src=”movie.mov” type=”video/quicktime” quality=”high”>

This would be equivalent to the following, when using an <object> element instead.

<object data=”movie.mov”>

<param name=”quality” value=”high”>

</object>

NOTE:- The <embed> element is unaffected by CSS display property.



       7.4. The object element

This element represents an external resource, which can be treated as an image, a nested
browsing context, or a resource to be handled by a plugin.

Attributes support:

data:- Specifies the address of the resource.

type:- Specifies the valid MIME type. Atleast one of the data and type attribute must be
present.

height and width:- Specifies the height and width. (in pixels)

name:- Name of valid browsing context.

usemap:- A hash-name reference to a <map> element; i.e. a ‘#’ followed by the value of a
name of a map element.
Example:

In the following example, a Java applet is embedded in a page using the object element.
(Generally speaking, it is better to avoid using applets like these and instead use native JavaScript and HTML to
provide the functionality, since that way the application will work on all Web browsers without requiring a
third-party plugin. Many devices, especially embedded devices, do not support third-party technologies like
Java.)

<figure>

<object type=”application/x-java-applet”>

<param name=”code” value=”myjavaclass”>

<p>You do not have Java available, or it is disabled.</p>

</object>

</figure>

In this example, an HTML page is embedded in another using the object element.

<figure>

<object data="clock.html"></object>

<figcaption>My HTML Clock</figcaption>

</figure>



        7.5. The param element

This element defines parameters for plugins invoked by <object> element. It does not
represent anything on its own.

Attributes support:

name:- This attribute gives the name of the parameter

value:- This attribute give the value of the parameter

Both attribute must be present and they may have any value.

Example:

The following example shows how the param element can be used to pass a parameter to a
plugin, in this case the O3D plugin.
<!DOCTYPE HTML>

<html lang="en">

 <head>

 <title>O3D Utah Teapot</title>

 </head>

 <body>

 <p>

  <object type="application/vnd.o3d.auto">

  <param name="o3d_features" value="FloatingPointTextures">

  <img src="o3d-teapot.png"

       title="3D Utah Teapot illustration rendered using O3D."

       alt="When O3D renders the Utah Teapot, it appears as a squat

       teapot with a shiny metallic finish on which the

       surroundings are reflected, with a faint shadow caused by

       the lighting.">

  <p>To see the teapot actually rendered by O3D on your

  computer, please download and install the <a

   href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D
plugin</a>.</p>

  </object>

  <script src="o3d-teapot.js"></script>

 </p>

 </body>

</html>



        7.6. The video element

A <video> element is used for playing video or movies and audio files with captions.
Content may be provided inside the video element. User agents should not show this content
to the user; it is intended for older Web browsers which do not support video, so that legacy
video plugins can be tried, or to show text to the users of these older browsers informing
them of how to access the video contents.

Attributes support:

src:- URL of the video to embed.

height and width:- Height and width of the video

autoplay:- If specified, the video will automatically begin to play.

buffered:- An attribute you can read to determine which time ranges of the media have been
buffered. This attribute contains a TimeRanges object.

controls:- If present, it will offer controls to allow the user to control video playback,
including volume, seeking and pause/resume playback.

loop:- If present, will upon reaching the end of the video, automatically seek back to the
start.

poster:- A URL indicating a poster frame to show until the user plays or seeks, If this attribute
isn't specified, nothing is displayed until the first frame is available; then the first frame is
displayed as the poster frame.

preload:- This enumerated attribute is intended to provide a hint to the browser about what
the author thinks will lead to the best user experience. It may have one of the following
values:

   •    none: hints that either the author thinks that the user won't need to consult that video
        or that the server wants to minimize its traffic; in others terms this hint indicates that
        the video should not be cached.

   •    metadata: hints that though the author thinks that the user won't need to consult that
        video, fetching the metadata (e.g. length) is reasonable.

   •    auto: hints that the user needs have priority; in others terms this hint indicated that, if
        needed, the whole video could be downloaded, even if the user is not expected to use
        it.

   •    the empty string: which is a synonym of the auto value.

If not set, its default value is browser-defined (i.e. each browser can choose its own default
value), though the spec advises it to be set to metadata.

NOTE:
The autoplay attribute has precedence over this one as if one wants to automatically play a
video, the browser will obviously need to download it. Setting both the autoplay and
the preload attributes is allowed by the specification.

Example:

This example shows how to detect when a video has failed to play correctly:

<script>

function failed(e) {

    // video playback failed - show a message saying why

    switch (e.target.error.code) {

        case e.target.error.MEDIA_ERR_ABORTED:

         alert('You aborted the video playback.');

         break;

        case e.target.error.MEDIA_ERR_NETWORK:

         alert('A network error caused the video download to fail part-way.');

         break;

        case e.target.error.MEDIA_ERR_DECODE:

   alert('The video playback was aborted due to a corruption problem or because the video
used features your browser did not support.');

         break;

        case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:

   alert('The video could not be loaded, either because the server or network failed or
because the format is not supported.');

         break;

        default:

         alert('An unknown error occurred.');

         break;

    }

}
</script>

<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>

<p><a href="tgif.vid">Download the video file</a>.</p>



       7.7. The audio element

This element represents a sound or audio stream. The attributes for this element is all
described in <video> element.



       7.8. The source element (empty)

The <source> element allows authors to specify multiple alternative media resources for
media elements (<audio> and <video>). It does not represent anything on its own. The
attributes supported by this element are src, type and media.

Example:

<video controls>

<source src=”foo.ogg” type=”video/ogg”>

<p>I’m sorry, your browser doesn’t support video element</p>

</video>

For more examples, see Using audio and video in Firefox.




       7.9. The track element (empty)

This element is used to specify text track for HTML5 media elements (<audio> and <video>).

Attributes support:

default:- This attribute indicates that the track should be enabled unless the user's
preferences indicate that another track is more appropriate. This may only be used on
one track element per media element.

kind:- Kind of text track. The following keywords are allowed:

   •   subtitles: A transcription or translation of the dialogue.
   •   captions: A transcription or translation of the dialogue or other sound effects.
          Suitable for users who are deaf or when the sound is muted.

   •   descriptions: Textual descriptions of the video content. Suitable for users who are
          blind.

   •   chapters: Chapter titles, intended to be used when the user is navigating the media
          resource.

   •   metadata: Tracks used by script. Not visible to the user.

label:- A user-readable title of the text track Used by the browser when listing available text
tracks.

src:- Address of the track. Must be a valid URL. This attribute must be defined.

srclang:- Language of the track text data.




Example:

This video has subtitles in several languages:

<video src="brave.webm">

<track kind=subtitles src=brave.en.vtt srclang=en label="English">

<track kind=captions src=brave.en.vtt srclang=en label="English for the Hard of Hearing">

<track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">

<track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">

</video>



          7.10. The map element

This element used with <area> elements to define an image map.

Example:

<map>

<area shape=”circ” coords=”200, 205, 25” href=”another.htm”>

</map>
       7.11.    The area element

This element defines a hot-spot (clickable) region on an image, and optionally associates it
with a hypertext link. This element is used only within a <map> element.

Attributes support:

alt, media, hreflang, media, type, target, href,

shape:- The shape of the associated hotspot. Values are circ, poly, rect and default.

coords:- A set of values specifying the coordinates of the hot-spot region. The number and
meaning of the values depend upon the value specified for the shape attribute. For a rect or
rectangle shape, the coords value is two x,y pairs: left, top, right, and bottom. For
a circle shape, the value is x,y,r where x,y is a pair specifying the center of the circle and r is a
value for the radius. For a poly or polygon< shape, the value is a set of x,y pairs for each point
in the polygon:x1,y1,x2,y2,x3,y3, and so on. In HTML4, the values are numbers of pixels or
percentages, if a percent sign (%) is appended; in HTML5, the values are numbers of
CSS pixels.

NOTE:- coords and shape attribute doesn’t use with the <a> element.

Example:

<map name=”primary”>

<area shape=”rect” coords=”200, 140” href=”another.html”>

</map>

Another example

				
DOCUMENT INFO
Shared By:
Stats:
views:19
posted:1/8/2012
language:
pages:12
Description: This is my HTML5 notes, Hope you like it