HTML forms ,Tables, Video Audio tags
Tables, layouts and frames: Table creation and layouts, frame creation and layouts. Multimedia: Audio, video and animation. Cascading style sheets: Basics, creation and use
4. 1.1. Table creation & Layout
Table-
HTML tables allow web developers to arrange data into rows and columns
<table>
<thead>
<th>Roll No</th>
<th>Student Name</th>
<th>Marks</th>
</thead>
<tr>
<td>101</td>
<td>Swapnali</td>
<td>76%</td>
</tr>
</table>
Roll
No
Student
Name
Marks
101 Swapnali 76%
Swapnali Pawar
6. FORM TAG-
<form class=“” action=“” method=“”>
</form>
INPUT TAG
In form tag to collect end user input we use input tag
<input type=“” name=“” value=“”>
Type attribute used to specify type of input. Some types of input are-
• Text
• Email
• submit
• Password
• color
• Checkbox
• radio
Name- represents name of Tag
Value- represents its default value
HTML Forms Creation
Swapnali Pawar
7. <input type=“text” name=“username”
placeholder=“Enter user Name”>
<input type=“email” name=“MailId” value=“”>
<input type=“password” name=“pwd” value=“”>
<input type=“radio” name=“True” value=“”>
<input type=“checkbox” name=“terms&Cond” >
<input type=“text” name=“username” value=“Enter user
Name”>
<input type=“submit” name=“btnsub” value=“Submit”>
Important Form Input Types
Swapnali Pawar
8. <html>
<head>
<title>Swapnali</title>
</head>
<body>
<center>
<h1 style="color:red;">Government College Of Engineering Karad</h1>
<hr style="border:solid;">
<h1>User Login Form</h1>
<label for=“name”>Enter Name :</label>
<input id =“name” type=“text” name=“username” >
<br>
<br>
<label for=“pass”>Enter Password : </label>
<input id=“pass” type=password name=“pwd” >
<br>
<br>
<input type=submit name=“btnsub” value=Login>
</center>
<hr style="border:solid;">
</body>
</html>
Form Example
Swapnali Pawar
10. 1.2. Frame Creation & Layout
Use the <iframe> tag to embed another document
within the current HTML document:
<iframe src=“Login.html">
</iframe>
Swapnali Pawar
13. 2. Multimedia- Videos Audio & Animation
Videos
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Swapnali Pawar
14. Browser MP4 WebM Ogg
Edge YES YES YES
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES
There are three supported video formats in HTML: MP4, WebM, and OGG.
Swapnali Pawar
15. ATTRIBUTE VALUE DESCRIPTION
autoplay autoplay Specifies that the video will start playing as soon as it is ready
controls controls Specifies that video controls should be displayed (such as a
play/pause button etc).
height pixels Sets the height of the video player
loop loop Specifies that the video will start over again, every time it is
finished
muted muted Specifies that the audio output of the video should be muted
poster URL Specifies an image to be shown while the video is
downloading, or until the user hits the play button
preload auto
metadata
none
Specifies if and how the author thinks the video should be
loaded when the page loads
src URL Specifies the URL of the video file
width pixels Sets the width of the video player
Optional Attributes
Swapnali Pawar
17. Browser MP3 WAV OGG
Edge / IE YES YES* YES*
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES
There are three supported audio formats in HTML: MP3, WAV, and
OGG.
Audio Format and Browser Support
Swapnali Pawar
18. Attribute Value Description
autoplay autoplay Specifies that the audio will start playing as
soon as it is ready
controls controls Specifies that audio controls should be
displayed (such as a play/pause button etc)
loop loop Specifies that the audio will start over again,
every time it is finished
muted muted Specifies that the audio output should be
muted
preload auto
metadata
none
Specifies if and how the author thinks the
audio should be loaded when the page loads
src URL Specifies the URL of the audio file
Attributes
Swapnali Pawar
20. 3. CSS-Cascading Style Sheets
• CSS is the language we use to style an HTML document.
• CSS describes how HTML elements should be displayed.
Swapnali Pawar