Presentation is loading. Please wait.

Presentation is loading. Please wait.

Using HTML.  An iframe is used to display a web page within a web page. Syntax for adding an iframe: The URL points to the location of the separate page.

Similar presentations


Presentation on theme: "Using HTML.  An iframe is used to display a web page within a web page. Syntax for adding an iframe: The URL points to the location of the separate page."— Presentation transcript:

1 Using HTML

2  An iframe is used to display a web page within a web page. Syntax for adding an iframe: The URL points to the location of the separate page.

3  Src (source)  Height  Width  Frameborder  Align

4 You can add youtube videos using the Iframe: Example:

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

6  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 ❑ 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  Most static images on the Web are bitmapped images.

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

10 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

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

15  element can carry the following attributes:  src  alt  align  border  height  width  hspace  vspace  longdesc  name

16 Align Attribute:

17 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 hspace and vspace Attributes: used to control the amount of whitespace around an image. hspace=”10” vspace=”14”

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

20 20 Some Examples on images 1) 2) 3) 4) 5) blast blast blast blast blast

21  This element is also used to add a graphic image on the page.  It must carry: Data attribute indicating the source of the image

22  HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the element. Example: Your browser does not support the audio element.

23

24 HTML5 Audio Tags

25

26  HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the element.  Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the element.  Internet Explorer 8 and earlier versions, do not support the element.  You should also insert text content between the and tags for browsers that do not support the element.  The element allows multiple elements. elements can link to different video files. The browser will use the first recognized format.

27 Your browser does not support the video tag.

28

29

30


Download ppt "Using HTML.  An iframe is used to display a web page within a web page. Syntax for adding an iframe: The URL points to the location of the separate page."

Similar presentations


Ads by Google