chapter 3 html multimedia and inputs -...

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


Contents

Image

Audio

Video

Input and Form


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


ImagesExample

<!DOCTYPE html><html><body>

<h2>Everland</h2>

<img border="0" src="everland.jpg" alt="Everland"width="300" height="230">

</body></html>


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


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.


Image thumbnail

The basic idea of the thumbnail:

Go to this gallery: http://nanogallery.brisbois.fr/

http://nanogallery.brisbois.fr/


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


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/


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>


Results

Responsive images<picture> element


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


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>


Audio <audio> attributes

https://www.w3schools.com/Tags/tag_audio.asp


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>


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>


VideoGetting <iframe> embed link


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" />


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.


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>


webvtt format


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


How input form works


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


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


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


HTML formThe <input> element (2/2)

Attribute type

Various types of input: text, button, checkbox, date, email, file, image,

radio, search etc.


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>


HTML formPlaceholder

<form action="">User name: <input type="text" placeholder="Enter your name">

</form>


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>


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>


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>


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


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>


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>


HTML formText area

<form><textarea rows="4" cols="50">This is a textarea, size 4x50</textarea></form>


HTML formPassword

<form action="">User password:<br><input type="password" name="psw">

</form>


HTML formFile upload button

<form action="/action_page.php"><input type="file" name="pic" accept="image/*"><input type="submit" value="Upload">

</form>


HTML formColor input

<form action="">Select your favorite color:<input type="color" name="favcolor" value="#ff0000"><input type="submit">

</form>


HTML formRange

<form action="/action_page.php" method="get">Points:<input type="range" name="points" min="0" max="10"><input type="submit">

</form>


HTML formDate

<form action="/action_page.php">Birthday:<input type="date" name="bday"><input type="submit">

</form>


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>


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>


THANK YOU!

chapter 3 html multimedia and inputs -...

Documents