Chapter 3 HTML Multimedia and Inputs

Size: px

Start display at page:

Download "Chapter 3 HTML Multimedia and Inputs"

Clinton Gallagher
5 years ago
Views:

1 Sungkyunkwan University Chapter 3 HTML Multimedia and Inputs Prepared by D. T. Nguyen and H. Choo Web Programming Copyright Networking Laboratory 1/45 Copyright Networking Laboratory

2 Contents Image Audio Video Input and Form Web Programming Networking Laboratory 2/45

3 Images The <img> tag defines an image in an HTML page. The <img> tag has two required attributes: src and alt. src specifies URL of an image alt specifies an alternate text for an image <img border="0" src="everland.jpg" alt="everland" width="300" height="230"> Web Programming Networking Laboratory 3/45

4 Images Example <!DOCTYPE html> <html> <body> <h2>everland</h2> <img border="0" src="everland.jpg" alt="everland" width="300" height="230"> </body> </html> Web Programming Networking Laboratory 4/45

5 Images alt attribute Specify the alternate text to be displayed when the browser fails to display the image on the screen for some reason <img border="0" src="everland.jpg" alt="everland" width="300" height="230"> Web Programming Networking Laboratory 5/45

6 Image types JPEG Suitable for complex, many-color images such as real photographs Loss compression method is used. PNG GIF Suitable for images with fewer colors, such as clip art Lossless compression method Ideal for images in the form of logos or clip art Supports 256 colors only It supports transparent backgrounds and animations. Web Programming Networking Laboratory 6/45

7 Image thumbnail The basic idea of the thumbnail: Go to this gallery: Web Programming Networking Laboratory 7/45

jpg" alt="resized JPEG graphic" title="click to view" border="2"

8 Image thumbnail Create thumbnail with html: <a href="caribeanbay.jpg" target="_blank"> <img src="caribeanbaysmall.jpg" alt="resized JPEG graphic" title="click to view" border="2" width= 155" height= 150"/></a> Click Web Programming Networking Laboratory 8/45

9 Responsive images We want to display identical image content, just larger or smaller depending on the device Web Programming Networking Laboratory 9/45

10 Responsive images <picture> element Try the following code: <picture> <source media="(min-width: 650px)" srcset="l03/imgs/elsa480.jpg"> <source media="(min-width: 465px)" srcset="l03/imgs/elsa320.jpg"> <img src="l03/imgs/elsa240.jpg" alt="elsa smiling"> </picture> Web Programming Networking Laboratory 10/45

11 Responsive images <picture> element Results Web Programming Networking Laboratory 11/45

12 Web browser and multimedia Older methods: You must use the <embed> or <object> tags in HTML, and install Flash or ActiveX in your web browser In HTML5: added <audio> and <video> tag Web Programming Networking Laboratory 12/45

13 Audio Audio tag is used to add sound and music in the html page. At the moment the <audio> tag supports 3 types of audio file: mp3 - MIME-type audio/mpeg wav - MIME-type audio/wav ogg - MIME-type audio/ogg <audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> Your browser does not support the audio tag. </audio> The text inside the <audio></audio> is shown as a fallback in browsers that don t support the element Web Programming Networking Laboratory 13/45

14 Audio <audio> attributes Web Programming Networking Laboratory 14/45

15 Audio Example Playing Maroon 5 s song in mp3 format <audio controls> <source src="girls Like You - Maroon 5_ Cardi B.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> Web Programming Networking Laboratory 15/45

16 Video <iframe> Embed video from other video websites, e.g. Youtube: You must get the embed link For Youtube, they provided the embed link for each video using <iframe> <iframe width="560" height="315" src=" _6TxY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>< /iframe> Web Programming Networking Laboratory 16/45

17 Video Getting <iframe> embed link Web Programming Networking Laboratory 17/45

18 Video <embed> tag (1/2) The video file must be stored in your folder Supported extensions:.swf - made by Macromedia Flash.wmv - Microsoft Windows Media Video.mov - Quick Time Movie, belongs to Apple.mpeg - created by Moving Pictures Expert Group. Syntax: <embed src=" BLACKPINK(DDU_DU_DDU_DU).mp4" height="30" width="144" /> Web Programming Networking Laboratory 18/45

19 Video <embed> tag (2/2) Embed attributes: autostart - sets whether the file will run automatically after the page is loaded. Can have the true or false value hidden - sets whether the buttons are hidden or not. Can have the true or false value. volume - can have any value from 0 to 100 loop- sets whether the file will be replayed after it is finished. Can have the true or false value. playcount - this establishes how many times the file will be replayed. For example playcount="2" means it will be replayed two times and after it will stop. Web Programming Networking Laboratory 19/45

20 Video <video> tag The <video> element allows you to embed a video very easily. A really simple example looks like this: <video controls> <source src="blackpink(ddu_du_ddu_du).mp4" type="video/mp4"> <source src="blackpink(ddu_du_ddu_du).webm" type="video/webm"> <p>your browser doesn't support HTML5 video. Here is a <a href=" youtu.be/ihnzohi8sjs">link to the video</a> instead.</p> </video> Web Programming Networking Laboratory 20/45

21 webvtt format Web Programming Networking Laboratory 21/45

22 Web Programming Networking Laboratory 22/45

HTML form The <form> Element The HTML <form> element defines a form that is used to collect user input Form elements are different types of input elements, like text fields, checkboxes, radio

23 HTML form The <form> Element The HTML <form> element defines a form that is used to collect user input Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more. <form>. form elements. </form> Note: It's strictly forbidden to nest a form inside another form. Nesting can cause forms to behave in an unpredictable manner depending on the browser. Web Programming Networking Laboratory 23/45

24 How input form works Web Programming Networking Laboratory 24/45

25 HTML form Form submit method (1/2) There are 2 type of methods: GET and POST. The default method is GET <form action="/action_page.php" method="get"> <form action="/action_page.php" method="post"> Notes on GET: Appends form-data into the URL in name/value pairs The length of a URL is limited (about 3000 characters) Never use GET to send sensitive data! (will be visible in the URL) Useful for form submissions where a user wants to bookmark the result GET is better for non-secure data, like query strings in Google, Bing, etc. Example: Web Programming Networking Laboratory 25/45

26 HTML form Form submit method (2/2) Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field. Notes on POST: POST has no size limitations, and can be used to send large amounts of data. Form submissions with POST cannot be bookmarked Web Programming Networking Laboratory 26/45

27 HTML form The <input> element (1/2) The <input> element is the most important form element Used to create interactive controls for web-based forms in order to accept data from the user The <input> element can be displayed in several ways, depending on the type attribute. Important attributes: name and type Web Programming Networking Laboratory 27/45

28 HTML form The <input> element (2/2) Attribute type Various types of input: text, button, checkbox, date, , file, image, radio, search etc. Web Programming Networking Laboratory 28/45

29 HTML form Text Input <input type="text"> defines a one-line input field for text input: Default width of the text field is 20 characters <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form> Web Programming Networking Laboratory 29/45

30 HTML form Placeholder <form action=""> User name: <input type="text" placeholder="enter your name"> </form> Web Programming Networking Laboratory 30/45

31 HTML form Regular Expression For some special field, the type of input must be restricted. For example: Name must not include number Age must be numbers only <form action="somefile.php"> <input type="text" name="username" placeholder="username" pattern="[a-z]{1,15}" title="username should only contain lowercase letters. e.g. john"> </form> Web Programming Networking Laboratory 31/45

32 HTML form Password Input <input type= password"> defines a one-line input field for text input: <form> <label for="user-password">password: </label><br> <input type="password" name="user-pwd" id="user-password"> </form> Web Programming Networking Laboratory 32/45

33 HTML form Radio button input <input type= radio"> <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form> Web Programming Networking Laboratory 33/45

34 HTML form Submit button <input type= submit"> defines a one-line input field for text input: Default width of the text field is 20 characters <input type="submit" value="submit"> Web Programming Networking Laboratory 34/45

35 HTML form Action attribute The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web page on the server when the user clicks on the submit button. In the example, the form data is sent to a page on the server called "/action_page.php". This page contains a server-side script that handles the form data: <form action="/action_page.php"> form elements </form> Web Programming Networking Laboratory 35/45

36 HTML form Checkbox <form> <p>which type(s) of car do you have?</p> <input type="checkbox" name="option1" value= Hyundai"> Hyundai<br> <input type="checkbox" name="option2" value= KIA"> KIA<br> </form> Web Programming Networking Laboratory 36/45

37 HTML form Text area <form> <textarea rows="4" cols="50"> This is a textarea, size 4x50 </textarea> </form> Web Programming Networking Laboratory 37/45

38 HTML form Password <form action=""> User password:<br> <input type="password" name="psw"> </form> Web Programming Networking Laboratory 38/45

39 HTML form File upload button <form action="/action_page.php"> <input type="file" name="pic" accept="image/*"> <input type="submit" value="upload"> </form> Web Programming Networking Laboratory 39/45

40 HTML form Color input <form action=""> Select your favorite color: <input type="color" name="favcolor" value="#ff0000"> <input type="submit"> </form> Web Programming Networking Laboratory 40/45

41 HTML form Range <form action="/action_page.php" method="get"> Points: <input type="range" name="points" min="0" max="10"> <input type="submit"> </form> Web Programming Networking Laboratory 41/45

42 HTML form Date <form action="/action_page.php"> Birthday: <input type="date" name="bday"> <input type="submit"> </form> Web Programming Networking Laboratory 42/45

43 HTML form Dropdown menu You can prompt users for input by offering them a list of items displayed in a dropdown menu. I like my coffee:<br><br> <select name="coffee"> <option value="black">black</option> <option value="cream" selected>with cream</option> <option value="sugar">with sugar</option> <option value="regular">with cream & sugar</option> <option value="crisp">crisp (har har...)</option> </select> Web Programming Networking Laboratory 43/45

44 HTML form Grouping Form Data with <fieldset> The <fieldset> element is used to group related data in a form. The <legend> element defines a caption for the <fieldset> element. <form action="/action_page.php"> <fieldset> <legend>personal information:</legend> First name:<br> <input type="text" name="firstname" value="mickey"><br> Last name:<br> <input type="text" name="lastname" value="mouse"><br><br> <input type="submit" value="submit"> </fieldset> </form> Web Programming Networking Laboratory 44/45

45 THANK YOU! Web Programming Networking Laboratory 45/45

CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB

CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB Unit 8 HTML Forms and Basic CGI Slides based on course material SFU Icons their respective owners 1 Learning Objectives In this unit you will