4Youtube videos using IFrame You can add youtube videos using the Iframe: Example: <iframe width="420" height="345" src="http://www.youtube.com/embed/vP0cUBi4h wE"> </iframe> <iframe src="http://www.dailymotion.com/embed/video/x 26jsjo_four-stories-to-watch-in-week-5-of-the- sec_sport?PARAMS" width="400" height="400" frameborder="2">
5Add images to your pages. Images and ObjectsObjectivesUpon completing this section, you will be able to:Add images to your pages.
6Adding Images to Your Site Images and graphics can really bring your site to life.Different image formats you can use on the Web (such as GIFs, JPEGs, and PNGs)Issues in adding Image:Choosing right formatCopying Images from other sites.
7Types of Image Formats❑ Bitmapped graphics divide a picture into a grid of pixels and specify the color of each pixel, much as a computer tells a screen the color of each pixel. Broadly speaking, bitmaps are ideal for photographs and complicated gradations of shade and color. There are several different Bitmap formats; common ones include JPEG, GIF, TIFF, PNG, and the rather confusingly named bitmap or BMP. ❑ Vector graphics break the image into lines and shapes, and store the lines as coordinates. They then fill the spaces between the lines with color. Vector graphics are commonly used for line art, illustration, and animation. More recently some formats such as Flash and SVG are making use of vector graphics.
8Bitmap ImagesMost static images on the Web are bitmapped images.
9Types of Bitmap ImagesBrowsers tend to support three common bitmap graphics formats: ❑ GIF: Graphics Interchange Format ❑ JPEG: Joint Photographic Experts Group Format ❑ PNG: Portable Network Graphics
10Keeping File Sizes Small The rule of thumb is: ❑ Use JPEGs for photo-realistic pictures with a lot of detail, or subtle shade differences you want to preserve. ❑ Use GIFs for images with flat color (rather than textured colors), and hard edges, such as diagrams, text, or logos. You can also consider using PNGs if you do not need the advanced features such as transparency, or if you know the majority of your visitors will be using more recently released browsers.
12Vector ImagesIllustration and animation software tends to use vector formats to save images, and the most popular vector graphics format on the Web is Flash.Browsers and XHTML do not, by default, support any vector graphics formats, although the main browsers now ship with the Flash Player that is required to view Flash files.
13Types of Vectors Images ❑ Flash Files: Flash is currently the most popular way of deploying vector graphics and animations on the Web. ❑ SVG: W3C developed Scalable Vector Graphics (SVG), which (like XHTML) is written in XML, and would thus be easily integrated with XHTML (Furthermore, it is an open standard, not the creation of an individual company as Flash is.) A number of tools support SVG, although at the time of this writing it is not used very widely. Microsoft has also come up with a technology called Silverlight that uses vector graphics and competes with Flash.
14Adding Images Using the <img> Element <IMG>This element defines a graphic image on the page.It must carry:src attribute indicating the source of the imagean alt attribute whose value is an alternate description for the image in case it does not load or the user has a visual impairment.
15Attributes of <img> <img> element can carry the following attributes:srcaltalignborderheightwidthhspacevspacelongdescname
17Attributes Description Border Attribute: Specifies the width of the border around the image in pixels:Say border=”4”Height and Width Attributes: The height and width attributes specify the height and width of the image:height=”120” width=”180”The values for these attributes are almost always shown in pixels.
18Attributes Description hspace and vspace Attributes: used to control the amount of whitespace around an image.hspace=”10”vspace=”14”
19Attributes Description longdesc Attribute: The longdesc attribute is used to indicate the URL of a document (or part of a document) containing a description for the image in more detail. name Attribute: The name attribute allows you to specify a name for the image so that it can then be referenced from script code. It is the predecessor to, and has been replaced by, the id attribute. name=”image_name”
20Some Examples on images 1) <IMG SRC=“jordan.gif“ border=4>2) <IMG SRC=" jordan.gif" width="60" height="60">3) <IMG SRC=“jordan.gif" ALT="This is a text that goes with the image">4) <IMG SRC=" jordan.gif “ Hspace="30" Vspace="10" border=20>5) < IMG SRC =" jordan.gif“ align="left">blast blast blast blast blast
21Adding Images Using the <object> Element <Object>This element is also used to add a graphic image on the page.It must carry:Data attribute indicating the source of the image<object width="400" height="400" data="w3.jpg"></object>
22Adding AudioHTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.Example:<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
26Adding VideoHTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <video> element.Internet Explorer 8 and earlier versions, do not support the <video> element.You should also insert text content between the <video> and </video> tags for browsers that do not support the <video> element.The <video> element allows multiple <source> elements. <source> elements can link to different video files. The browser will use the first recognized format.
27Adding Video<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>