Iframes & Images Using HTML

HTML Iframes An iframe is used to display a web page within a web page. Syntax for adding an iframe: <iframe src="URL"></iframe> The URL points to the location of the separate page.

Iframe Attributes Src (source) Height Width Frameborder Align

Youtube 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">

Add images to your pages. Images and Objects Objectives Upon completing this section, you will be able to: Add images to your pages.

Adding 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 format Copying Images from other sites.

Types 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.

Bitmap Images Most static images on the Web are bitmapped images.

Types of Bitmap Images Browsers tend to support three common bitmap graphics formats: ❑ GIF: Graphics Interchange Format ❑ JPEG: Joint Photographic Experts Group Format ❑ PNG: Portable Network Graphics

Keeping 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.

Illustration of Image Types

Vector Images Illustration 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.

Types 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.

Adding 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 image an alt attribute whose value is an alternate description for the image in case it does not load or the user has a visual impairment.

Attributes of <img> <img> element can carry the following attributes: src alt align border height width hspace vspace longdesc name

Attributes Description Align Attribute:

Attributes 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.

Attributes Description hspace and vspace Attributes: used to control the amount of whitespace around an image. hspace=”10” vspace=”14”

Attributes 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”

Some 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

Adding 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>

Adding Audio HTML5 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>

Audio Formats and Browser Support

MIME Types for Audio Formats HTML5 Audio Tags

Other ways to add audios <Embed> <embed src=“test1.mp3"> <object> <object data=“test2.mp3"> <param name="autoplay" value="false"> </object>

Adding Video HTML5 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.

Adding 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>

Video Formats and Browser Support

MIME Types for Video Formats

Other ways to add Videos <embed> <embed src=“test.swf" height="400" width="400"> <object> <object data="intro.flv" height="200" width="200"></object>