chapter 3 html multimedia and inputs -...
TRANSCRIPT
Web Programming Networking Laboratory 1/45
Sungkyunkwan University
Copyright 2000-2012 Networking LaboratoryCopyright 2000-2018 Networking Laboratory
Chapter 3
HTML Multimedia and Inputs
Prepared by D. T. Nguyen and H. Choo
Web Programming Networking Laboratory 2/45
Contents
Image
Audio
Video
Input and Form
Web Programming Networking Laboratory 3/45
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 4/45
ImagesExample
<!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 5/45
Imagesalt 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 6/45
Image types
JPEG
Suitable for complex, many-color images such as real photographs
Loss compression method is used.
PNG
Suitable for images with fewer colors, such as clip art
Lossless compression method
GIF
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 7/45
Image thumbnail
The basic idea of the thumbnail:
Go to this gallery: http://nanogallery.brisbois.fr/
Web Programming Networking Laboratory 8/45
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 9/45
Responsive images
We want to display identical image content, just larger or smaller
depending on the device
https://www.html5rocks.com/en/tutorials/responsive/picture-element/
Web Programming Networking Laboratory 10/45
Responsive images<picture> element
Try the following code:
<picture><sourcemedia="(min-width: 650px)"srcset="L03/imgs/Elsa480.jpg">
<sourcemedia="(min-width: 465px)"srcset="L03/imgs/Elsa320.jpg">
<imgsrc="L03/imgs/Elsa240.jpg"alt="Elsa smiling">
</picture>
Web Programming Networking Laboratory 11/45
Results
Responsive images<picture> element
Web Programming Networking Laboratory 12/45
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 13/45
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
The text inside the <audio></audio> is shown as a fallback in
browsers that don’t support the element
<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>
Web Programming Networking Laboratory 14/45
Audio <audio> attributes
https://www.w3schools.com/Tags/tag_audio.asp
Web Programming Networking Laboratory 15/45
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 16/45
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="https://www.youtube.com/embed/7kHZ0a_6TxY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Web Programming Networking Laboratory 17/45
VideoGetting <iframe> embed link
Web Programming Networking Laboratory 18/45
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 19/45
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 20/45
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="https://
youtu.be/IHNzOHi8sJs">link to the video</a> instead.</p></video>
Web Programming Networking Laboratory 21/45
webvtt format
Web Programming Networking Laboratory 22/45
Web Programming Networking Laboratory 23/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 buttons, submit buttons, and more.
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.
<form>.form elements.</form>
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form
Web Programming Networking Laboratory 24/45
How input form works
Web Programming Networking Laboratory 25/45
HTML formForm submit method (1/2)
There are 2 type of methods: GET and POST. The default method is
GET
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:
<form action="/action_page.php" method="get"><form action="/action_page.php" method="post">
https://www.bing.com/search?q=web+programming
Web Programming Networking Laboratory 26/45
HTML formForm 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 27/45
HTML formThe <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 28/45
HTML formThe <input> element (2/2)
Attribute type
Various types of input: text, button, checkbox, date, email, file, image,
radio, search etc.
Web Programming Networking Laboratory 29/45
HTML formText 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 30/45
HTML formPlaceholder
<form action="">User name: <input type="text" placeholder="Enter your name">
</form>
Web Programming Networking Laboratory 31/45
HTML formRegular 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"><inputtype="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 32/45
HTML formPassword 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 33/45
HTML formRadio 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 34/45
HTML formSubmit 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 35/45
HTML formAction 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 36/45
HTML formCheckbox
<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 37/45
HTML formText area
<form><textarea rows="4" cols="50">This is a textarea, size 4x50</textarea></form>
Web Programming Networking Laboratory 38/45
HTML formPassword
<form action="">User password:<br><input type="password" name="psw">
</form>
Web Programming Networking Laboratory 39/45
HTML formFile upload button
<form action="/action_page.php"><input type="file" name="pic" accept="image/*"><input type="submit" value="Upload">
</form>
Web Programming Networking Laboratory 40/45
HTML formColor input
<form action="">Select your favorite color:<input type="color" name="favcolor" value="#ff0000"><input type="submit">
</form>
Web Programming Networking Laboratory 41/45
HTML formRange
<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 42/45
HTML formDate
<form action="/action_page.php">Birthday:<input type="date" name="bday"><input type="submit">
</form>
Web Programming Networking Laboratory 43/45
HTML formDropdown 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 44/45
HTML formGrouping 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 45/45
THANK YOU!