Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML (Advanced) -forms, iframe, audio, video. Outline – Forms – iFrames – Audio/Video.

Similar presentations


Presentation on theme: "HTML (Advanced) -forms, iframe, audio, video. Outline – Forms – iFrames – Audio/Video."— Presentation transcript:

1 HTML (Advanced) -forms, iframe, audio, video

2 Outline – Forms – iFrames – Audio/Video

3 Forms The web started as a way for people to post static information, but now is largely about "user-contributed content." All that content means a lot of forms! Users see form on social sites, login screens, banking sites, and more:

4 Form element – A form consists of a form element with multiple input controls inside of it that help retrieve user data in some way, and attributes that specify how a server should handle the form. – The example below asks for a search query, and then sends the query to the Google server once submitted. Google Search

5 Google:

6 Input element – The input element is used for many different types of user input, depending on value of the type attribute. It defaults to a simple 1-line text input. – The "name" attribute gives the server a way to identify that piece of attribute. The "value" attribute can be set to specify a default value. The "placeholder" provides a hint to the user.

7 Label element The label element is used to caption a form control, so users know what they should put in it. Animal: Animal e.g. fox

8 Checkboxes The input element can be used for letting users pick multiple in a list or simply indicate yes/no, using type="checkbox". Extra cheese? Pizza Toppings: Bacon Extra Cheese Onion

9 Radio buttons Similarly, the input element can be used for creating a group of radio buttons, for letting users pick one in a list, with type="radio". Pizza Size: Small Medium Large

10 Range sliders The input element can be used for users to pick a value in a range, using type="range". *New, only supported in modern browsers. Cheesiness:

11 The select element The select element used with the option element produces a dropdown of options for the user to pick from. Crust type: Thin Thick Cheese

12 Textarea element To let the user specify multiple lines of text, use the textarea element, and specify cols or rows to specify a specific size. Delivery instructions:

13 Button element The button element is most commonly used to submit a form to the server, but can also be used for resetting a form or other scripted actions. Submit order

14 Iframes – The iframe element – You can use HTML to embed other webpages in your own page using an iframe element pointing at a URL:

15 Iframe embeds – The iframe element makes it easy for websites to become embeddable on other websites, and for users to share content that they've created on a site. – Most websites don't naturally look good when embedded at small sizes, so websites create special versions that are designed for embedability, and the provide users with those URLs.

16 Iframe embeds: Docs – In its "Publish" dialog, Google docs provides this HTML for embedding a presentation on your site:

17 Iframe embeds: Calendar and Youtube In settings, Google Calendar provides this HTML for embedding a calendar: Youtube : <iframe width="420" height="345" src="http://www.youtube.com/embed/XGSy3_Czz8k">

18 Multimedia – The object element – You can use object to embed non-HTML content in your page, like a quicktime movie or a flash file. Typically, users need a "plug-in" to view that content. – The object tag should have one or more param child tags that give info to the browser on what to embed.

19 The embed element – The embed tag is similar to the object tag, but is sometimes used in cases where the object tag doesn't work. – The embed tag should specify src and type attributes.

20 Embeds: Youtube Youtube gives user an embed code that includes an object and an embed tag.

21 Audio

22 Video <object id="mediaplayer" width="192" height="190" classid="clsid:22d6f312-b0f6- 11d0-94ab-0080c74c7e95" standby="loading windows media player components..." type="application/x- oleobject"> <embed type="application/x-mplayer2" src="wildlife.wmv" name="mediaplayer" width="192" height="190" showcontrols="1" showstatusbar="0" showdisplay="0" autostart="0">


Download ppt "HTML (Advanced) -forms, iframe, audio, video. Outline – Forms – iFrames – Audio/Video."

Similar presentations


Ads by Google