HTML

Working with Multimedia

In this session, you'll understand how to add audio and movie to your Websites, and look for the plug-ins necessary to use them.

Adding Sound and Video

Used properly, audio and movies can significantly boost the articles in your Websites. Think about a Website about Dr. Martin Luther Master, Jr. that didn't involve something about his well-known "I Have a Dream" conversation. The textual articles of the conversation is going, but the shipping is what made it so highly effective. You can add audio and movies to your own Websites using some HTML labels you've already acquired.

This session talks about several techniques for including audio and movies. You should know that the one technique that is sure to work with every technique on every foundation is also the simplest: the <a> tag.

<a href="http://www.americanrhetoric.com/mp3clips/
politicalspeeches/mlkihaveadream35348.mp3">
Listen to the I Have a Dream speech.</a> 

When your guests press on the terms Pay attention to the I Have a Fantasy conversation, the mlkihaveadream35348.mp3 computer file will obtain to their computer systems and begin enjoying. If the guests do not have the appropriate plug-in to listen to the audio movie, the technique should immediate them to save the data declare later. It will not, however, immediate them to obtain the appropriate plug-in. You will need to provide that information on your web page.

Video segments can be managed in exactly the same way:

<a href="http://www.lucidcafe.com/library/96jan/96jangifs/MLK628Video.ram">
Watch a video of Dr. King's greatest speech.</a> 

<embed> tag

Netscape designed a new tag known as <embed> to allow you to involve a audio or movie on a Website. Windows Internet Traveler internet browser also allows this non-standard tag. The following example reveals how the <embed> tag works to add a movie.

<p>Click the video to see a clip from the IMAX movie Journey
  into Amazing Caves.</p>
   <embed src="C:\Documents and
    Settings\qc04818\Desktop\Amazing_Caves_720.wmv"
    width="360" controls="true" autostart="true"
    loop="false">
     <noembed>
      <a href="C:\Documents and
      Settings\qc04818\Desktop\Amazing_Caves_720.wmv">
      Click for a surprise.</a>
     </noembed>
    </embed>
<p>You will need the <a href="http://www.microsoft.com/
     windows/windowsmedia/download/
     AllDownloads.aspx?displang=en&qstechnology=">
     Windows Media Player</a> to see this clip.</p> 

The technique shows the user interface for the media device you use, as shown in below Figure. You can add size and top features to the <embed> tag to management the size of the movie still. The <noembed> tag provides an change way for visitors to download the movie if their technique doesn't identify the <embed> tag.

           

Observe that I've involved four features for the <embed> tag in this example: size, manages, autostart and hook. Width places the size of the movie. It is not necessary to set the top since the movie will size the picture proportionally. Controls guarantees that the movie gamer manages are involved. Autostart, which you can set to real or incorrect, informs the technique whether to begin enjoying the movie instantly upon running the web page. The hook feature informs the technique how many times in a row to play the movie before avoiding. You can set the hook feature to any whole number.

Another feature you can set is autorewind. This feature is instantly set to real, but if for some reason you don't want to go back the movie after it performs, you can set it to incorrect. The invisible feature conceals the gamblers VCR manages from the person. Covering the manages gives you, the creator, more control over the use of the movie, but may irritate your guests if they are prohibited to turn your movie on or off.

<object> tag

The <embed> tag is nonstandard, which indicates that the W3C doesn't identify it as a genuine HTML markup tag. The W3C wants that Website designers involve audio and movies using the <object> tag.

<p>Click the video to begin playing.</p>
    <object classid="C:\Documents and
    Settings\qc04818\Desktop\Amazing_Caves_720.wmv">
</object>
    <a href="C:\Documents and
    Settings\qc04818\Desktop\Amazing_Caves_720.wmv">Surprise!</a> 

The <object> tag also comes with lots of features that you can set to help management the use of the video in your Website. You can add a boundary around the item by using the overall look feature and establishing the value to 1. The <object> tag also has an autostart and autorewind feature.

Finding Plug-ins

We've described before that it's never a great concept to involve any products on your Website that need a plug-in (such as Display or RealAudio) without also offering a weblink to the plug-in. You don't want to believe that your guests will have the necessary application to perspective your web page because they might not.

Microsoft usually considers that the technique itself should contain enough value to run any programs, programs, and included products without running plug-ins, and it uses ActiveX manages to deal with these kinds of activities. Netscape, however, confirms with the concept that surfers should be lighting and plug-ins should be used to deal with outside activities. Partly because of this perception, Netscape preserves one of the best plug-in records on the Web at http://browser.netscape.com/ns8/community/plugin.jsp.

Below Desk details the HTML labels that were mentioned in this session.

HTML Tag

Closing

Description of Use

<embed>

</embed>

Netscape's nonstandard, although mostly reinforced, tag for such as audio and movies.

<noembed>

</noembed>

Netscape's tag that provides an change technique of installing the video for surfers that don't identify the <embed> tag.

<object>

</object>

W3C's recommended, although mostly in need of support, tag for such as audio and movies.

               
           Sentences, Line crack, Horizontally rule
HTML Paragraphs

Sentences are identified with the <p> ... </p> tag.
Paragraphs may contain textual content and inline components. They are prevent components, but they may not contain other prevent components, such as other paragraphs.
The duration of the shown textual content will be altered by the starting dimension the visitor.
Browsers instantly add an clear range before and after a passage, so, the range between two subsequent paragraphs is of two wrinkles.
 - Example:

HTML code	Displays in browser
<html> <head> <title>Document title</title> </head> <body> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> </body> </html>	Paragraph 1 Paragraph 2 Paragraph 3 Paragraph 4

Range Breaks
The <br /> tag places a line crack in the articles, it allows you to management where to add new line smashes, to power the starting of a new line at a particular poinnt.

- Example:

HTML code	Displays in browser
<html> <head> <title>Document title</title> </head> <body> <h1>Heading 1</h1> <p>Paragraph 1<br /> Line 2<br /> Line 3<br /> ... </p> <p>Paragraph 2</p> </body> </html>	Heading 1 Paragraph 1 Line 2 Line 3 ... Paragraph 2

<br /> is an clear factor, but may contain feature (id, category, style).

Example:     <br id="idb" />

Horizontal rule

The <hr> (<hr /> for XHTML) tag makes a horizontally range in an HTML web page.

The <hr> factor can be used to split a website into different horizontally places.

The <hr> tag is a prevent stage factor, and it uses the following attributes:

align - identifies the positioning (left, middle, right)

size - identifies the top (the thickness) of the concept in pixels

width - the duration of the concept in pixels; if you take out dimension, the concept operates all the way across the window

noshade - No value; if involved, it stops the concept from having a 3-D effect

color - places large of the line.

Example:

HTML code	Displays in browser
<html> <head> <title>Document title</title> </head> <body> <h1>Heading 1</h1> <p>Paragraph 1<br /> Line 2<br /> Line 3<br /> ... </p> <hr> Some text ... <hr color="#1111fe" size="4" width="50%"> <p>Paragraph 2</p> </body> </html>	Heading 1 Paragraph 1 Line 2 Line 3 ... Some text ... Paragraph 2

The recommended way of style a horizontally concept is by using CSS, including an "id" or "class" feature, or immediately "style".

Example:     

<hr style="width:50%; height:4px; color:#1111fe" />