1 / 30

Iframes & Images

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

medge-underwood
Download Presentation

Iframes & Images

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Iframes & Images Using HTML

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

  3. Iframe Attributes • Src (source) • Height • Width • Frameborder • Align

  4. Youtube videos using IFrame You can add youtube videos using the Iframe: Example: <iframe width="420" height="345" src="http://www.youtube.com/embed/vP0cUBi4hwE"> </iframe> <iframesrc="http://www.dailymotion.com/embed/video/x26jsjo_four-stories-to-watch-in-week-5-of-the-sec_sport?PARAMS" width="400" height="400" frameborder="2">

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

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

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

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

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

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

  11. Illustration of Image Types

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

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

  14. Adding Images Using the <img> Element • <IMG>This element defines a graphic image on the page. • It must carry: • srcattribute 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.

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

  16. Attributes Description Align Attribute:

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

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

  19. Attributes Description longdescAttribute: 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”

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

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

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

  23. Audio Formats and Browser Support

  24. MIME Types for Audio Formats HTML5 Audio Tags

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

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

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

  28. Video Formats and Browser Support

  29. MIME Types for Video Formats

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

More Related