web programming & scripting 2

Swapnali R. Pawar
Swapnali Pawar

Lab Session 2
1. Tables Layouts Frames-
1.1. Table creation & Layout
1.2. Frame Creation & Layout
2. Multimedia-
Videos Audio & Animation
3. CSS-Cascading Style Sheets-
Basics Creation & Use
Swapnali Pawar

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

1.2. Frame Creation
& Layout
Swapnali Pawar

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

<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

<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

Form Example Output
Swapnali Pawar

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

<html>
<head>
<title>SwapnaliSite</title>
</head>
<body>
<center>
<iframe
src="file:///C:/Users/Swapnali/Desktop/test3.html"
height=200 width=800>
</iframe>
</center>
</body>
</html>
iframe Example
Swapnali Pawar

Output - iframe Example
Swapnali Pawar

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

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

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

Audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Swapnali Pawar

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

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

Animation
<Marquee>
Animated Moving Tag…..
</Marquee>
Swapnali Pawar

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

CSS-Cascading Style Sheets
Swapnali Pawar

3. CSS-Cascading Style Sheets
Inline
Styles
External
Styles
Internal /
Embedded
Styles
Swapnali Pawar

Inline Styles
<body style=“background-color: blue;” >
------------
------------
</body>
<img style=“background-color: blue;” >
------------
------------
</img>
Swapnali Pawar

Internal / Embedded Styles
<head>
<title>MySite</Title>
<style>
body
{
background-color:red;
}
hr
{
border-style:solid;
}
</style>
</head>
Swapnali Pawar

body
{
background-color: lightblue;
}
h1
{
color: white;
text-align: center;
}
p
{
font-family: verdana;
font-size: 20px;
}
External Styles
1. Create new folder CSS
2. Inside that create styles.css
file
3. In html add
< link rel=“stylesheet” href =
“styles.css” >
Swapnali Pawar

Student Activity
Experiment 2-
To Create Webpage using Link Button & Map Tags
Swapnali Pawar

web programming & scripting 2

More Related Content

What's hot

Similar to web programming & scripting 2

More from Swapnali Pawar

Recently uploaded

web programming & scripting 2