HOW TO ADD IMAGES, AUDIO AND VIDEO TO YOUR WEBSITE ?

ADDING IMAGES TO A SITE:

Images are added to a website using <img> element with the help of src attribute which denotes the source of a file. For example:
<img src="logo.jpg/logo.png/logo.jpeg/logo.gif" height="200" width="100"><img>

The src tells the browser where to find an image.Generally speaking, images for your site should always reside on your server or on another server you control. It is not good practice to link to images on other sites because if the owner of the other site decides to move that image, your users will no longer see the image.Because the images are on your server, rather than being an absolute URL, the value is more likely to be a relative URL that uses the same shorthand notations.Most web page authors create a separate directory (or folder) in the website for images. If you have a large site, you might even create different folders for different types of images. For example, you might keep any images used in the design of the interface (such as logos or buttons) separate from images used in the content of the site.

THE HEIGHT AND WIDTH ATTRIBUTE: The height and width attribute specify the height and width of image to be displayed on a webpage and they are usually in pixels.Specifying the size of the image is considered good practice, so you should try to use these attributes on any image that you put on your pages.It also helps a page to load faster and more smoothly because the browser knows how much space to allocate to the image, and it can correctly render the rest of the page while the image is still loading.Also, if for some reason the image doesn’t load, you’ll also have the browser draw an empty box of the given height and width.

USING IMAGES AS LINKS: It is very easy to turn an image into link.Rather than putting text between opening tag<a> and closing tag</a> as learnt earlier,you can put image instead.Images are often used to create graphical buttons or links to other pages,
For example:
<a href="http://www.000webhost.com"><img src="logo.jpg" height="200" width="100"></a>

ADDING FLASH,VIDEO AND AUDIO TO YOUR WEB PAGES:

If you learned just a little bit about Adobe Flash, you could easily embed audio and video on your pages, and that media would be available to the vast majority of Internet users.Unfortunately, for people who make websites, this is no longer the case. With the explosive growth of mobile devices and the lack of support for Flash on IOS (the operating system for Apple products) adding audio and video to pages is a lot more complicated than it used to be.The following section simplifies the issues as much as possible. The hope is that you can handle the most common scenarios you’ll encounter. Reading this blog won’t make you an expert on the different ways video and audio on the Internet work, but you will have the foundation needed to get up and running.The basic approach these days is to serve video and audio to all modern browsers (the latest versions of Chrome, Firefox, Internet Explorer, and Safari) using the new HTML5 <video> element and then use Adobe Flash to serve video to users of Internet Explorer 8 or below.
First, you learn about the most common example of embedding rich media on the web today, using a third-party service such as YouTube. These companies take the business of putting video on the web and make it as simple as possible, providing a simple interface to upload video, hosting services for video content, and easy-to-use embed code. Under the hood, they use the same techniques you’ll learn about later in the chapter; they just hide all the complexity from their end users.By far, the most common way to host and share video is with Google’s YouTube service. Whether you upload your own content or want to share content from another YouTube user, the method to embed the video is the same.
YouTube has made it easy for users to embed the YouTube Player on their pages. This is done simply
by copying and pasting a line of code from the YouTube site into any web page.

Adding Rich Media with the <audio> and <video> Elements:

Any rich media solution for the modern web starts with the new <audio> and <video> elements,
which work similarly, so many of the lessons you learn about one applies to the other. You focus
mostly on <video> in this section, but you see an example of <audio> in action as well.
<video> is designed to work just like the <img> element you learned about earlier in this chapter. The most basic usage is a <video> element with src, height, and width attributes.As a note, this and the following examples in this section work only in Internet Explorer 9, Chrome, and Safari. You learn why that is in the upcoming section on containers and codecs.
<video width="720" height="480" src="central.mp4">
In addition to the global attributes, <video> supports the following attributes:
poster, preload, autoplay, mediagroup, loop, muted,controls, crossorigin
With the exception of the crossorigin attribute that you learn about when you explore JavaScript
and Ajax, “jQuery: .

Controlling Playback with the preload, autoplay, loop, and muted Attributes:

These four attributes set parameters for how the video should behave without user interaction. All
these are boolean attributes.The preload attribute indicates that the browser should begin to download the video referenced in the src attribute even before the user presses Play. The preload attribute is defined in the specification as a “hint.” This means browser vendors can decide in certain situations, for example, on a mobile device, to ignore this attribute.
<video width="720" height="480" src="video/central.mp4" preload>
The autoplay attribute indicates whether the video should automatically play when the page is
loaded. Unless you have an extremely well-thought-out reason for doing this, don’t. Let your site
visitors choose when to play your video.
<video width="720" height="480" src=" video/central.mp4" autoplay>
loop, as the name implies, indicates that the browser should start the video over when playback is
complete.
<video width="720" height="480" src=" video/central.mp4" loop>
muted indicates whether the video player should play the associated audio track.
<video width="720" height="480" src=" video/central.mp4" muted>

Using the poster Attribute to Customize the Initial Frame:

The poster attribute defines an image used as a placeholder until the video plays. If there is no
poster attribute defined, the first frame of the video is used as the poster.
<video width="720" height="480" src=" video/central.mp4" poster="central.jpg">

Adding Video Playback Controls with the controls Attribute:

If you’ve ever used a stereo with physical knobs and buttons, an MP3 player, the music player
on your smartphone, or a video player on your desktop, you’re familiar with playback controls.
The boolean controls attribute indicates whether the browser should include playback controls.
Figure 4-15 illustrates two <video> elements, one with the controls attribute and the other without.
<video width="720" height="480" src=" video/central.mp4" controls>

Adding Audio to Your Web Pages Using the <audio> Element:

As you learned, the <audio> element works the same way as the <video> element. As the following
code sample shows, an <audio> element and an src attribute are enough to get
audio onto your pages.
<audio src="audio/pink_noise.mp3">
<audio> also supports the following attributes that you learned about earlier:
crossorigin ,preload ,autoplay ,loop ,muted ,controls.