Question 1: Create Time Table in HTML As Given in Attached Image

SYBCA SEM 4 Web Designing Roll no:-120
Question 1 : create Time table in HTML as given in attached image.

<html>
<head>
<TITLE> time-table</TITLE>
</head>
<body>
<caption><p align="center"><u><b>TIME TABLE</b></u></p></caption>
<table border="1" cellspacing="1" bgcolor="yellow" align="center">
<tr align="center">
<td rowspan="6" style="color:skyblue" > HOURS </td>
<th bgcolor="pink"> MON </th>

<th bgcolor="pink"> TUE </th>
<th bgcolor="pink"> WED </th>
<th bgcolor="pink"> THUS </th>
<th bgcolor="pink"> FRI </th>
</tr>
<tr align="center" >
<td> SCIENCE </td>
<td> MATHS </td>
<td> SCIENCE </td>
<td> MATHS </td>
<td> ARTS </td>
</tr>
<tr align="center">
<td> SOCIAL </td>
<td> HISTORY </td>
<td> ENGLISH </td>
<td> SOCIAL </td>
<td> SPORTS </td>
</tr>
<tr align="center">
<td colspan="5"align="center" style="color:red" bgcolor="khaki"> LUNCH </td>
</tr>
<tr align="center">
<td> SCIENCE </td>
<td> MATHS </td>
<td> SCIENCE </td>
<td> MATHS </td>
<td rowspan="2"> PROJECT </td>
</tr>
<tr align="center">
<td> SOCIAL </td>
<td> MATHS </td>
<td> ENGLISH </td>
<td> SOCIAL </td>
</tr>
</table>
</body>
</html>
OUTPUT:
1
Question 2: Create registration page in HTML using form and table tags.
<html>
<body>
<TITLE> Regitrastion form</TITLE>
<center>
<form method="get" bordercolor="blue" >
<fieldset>
<legend><h4> <font color="gold">REGISTRATION </gold></h4></legend>
<table border="4" style="padding:20px;" cellspacing="4" bordercolor="pink" bgcolor="snow" width='600px'>

<tr>
<td style="text-align:left;"> <b>Student's Name : </b> </td>
<td> <input type="text" id="sname" name="sname" /> </td>
</tr>
<tr>
<td style="text-align:left"> <b>Password : </b> </td>
<td> <input type="password" id="pswd" name="pswd" /></td>
</tr>
<tr>
<td style="text-align:left"> <b>Phone No : </b></td>
<td> <input type="text" id="phno" name="phno" /> </td>
</tr>
<tr>
<td style="text-align:left"> <b>Email : </b></td>
<td> <input type="email" id="email" name="email" /> </td>
</tr>
<tr>
<td style="text-align:left"> <b>Address : </b></td>
<td>
<textarea name="adr" id="adr" rows="5" cols="25"> </textarea>
</td>
</tr>
<tr>
<td style="text-align:left"> <b>Roll No. : </b></td>
<td> <input type="text" id="rno" name="rno" /> </td>
</tr>
<tr>
<td style="text-align:left"> <b>Gender : </b></td>
<td>
<div><input type="radio" id="gndr" name="gndr" value="male" />male</div>
<div><input type="radio" id="gndr" name="gndr" value="female" />female</div>
</td>
</tr>
<tr>
<td style="text-align:left"> <b>Div : </b></td>
<td>
<select id="div" name="div" >
<option value="div0"selected>----select --- </option>
<option value="div1">SYBCA DIV-1</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:left" colspan="2"> <b>which Subject do you like most? </b></td>
</tr>
2
<tr>
<td style="text-align:center"> subject :</td>
<td style="text-align:left" >
<input type="checkbox" id="cwd" name="cwd" value="wd" />WD
<input type="checkbox" id="cjava" name="cjava" value="java" />JAVA
<input type="checkbox" id="cnet" name="cnet" value="dotnet" />.NET
<input type="checkbox" id="cse" name="cse" value="se" />SE
<input type="checkbox" id="cis" name="cis" value="is" />IS
</td>
</tr>
<tr>
<td style="text-align:left" colspan="2"> <b>which faculty do you like most? </b></td>
</tr>
<tr>
<td style="text-align:center" > faculty </td>
<td>
<select id="fklty" name="fklty" size="3"multiple>
<option value="viral patel">Viral Patel</option>
<option value="heta desai">Heta Desai</option>
<option value="swety tamakuwala">Sweety tamakuwala</option>
<option value="radhika amlani">Radhika Amlani</option>
<option value="piyush arora">Piyush Arora</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:left" colspan="2"> <b>what do you want to be in future? </b></td>
</tr>
<tr>
<td style="text-align:center"> field</td>
<td>
<input list="fld">
<datalist id="fld">
<option value="Developer">
<option value="Designer">
<option value="Tester">
<option value="Administrator">
</datalist>
</td>
</tr>
<tr>
<td style="text-align:left"> <b>Percentage : </b></td>
<td>
0
<input type="range" id="a" name="a" value="50" />
100
<br>
<output name="x" >50</output>%
</td>
</tr>
<tr >
<td style="text-align:center" colspan="2">
<input type="submit" style="color:blue" value="submit" id="sbtn" name="sbtn" />
<input type="reset" style="color:green" value="Reset" id="rst" name="rst" />
</td>
</tr>
</table>
3
</fieldset>
</form>
</center>
</body>
</html>
OUTPUT:
Question 3 : Apply validation using Java Script on registration page which you have already design in question 2.
<html>
<head>
<script type="text/javascript">
function regvalidate()
{
// name validation
var nam=document.getElementById("sname").value;
if(nam==""||nam==null)
{
alert('student name not be empty. you must have enter name ');
//document.getElementById("msg").innerHTML = 'student name not be empty. you
must have enter name';
return false;
}
var letters=/^[A-Za-z]+$/;
if(!nam.match(letters))
{
alert('only allows alphbet value ');
//document.getElementById("msg").innerHTML = 'only you can enter alphabet';
return false;
}
// password validation
var psw=document.getElementById("pswd").value;
if(psw=="" || psw==Null)
{
alert('password not be should empty ');
//document.getElementById("msg").InnerHTML = 'password not be should empty ';
return false;
}
// phone no. validation
var phn=document.getElementById("phno").value;
if(phn=="")
4
{
alert('phone no must be required ');
//document.getElementById("msg").innerHTML = 'must be enter your phoone
number';
return false;
}
var number=/^[0-9]+$/;
if(!phn.match(number))
{
alert('only allows numerices value ');
return false;
}
if(phn.length!=10)
{
alert('phone number must should be 10 digit ');
return false;
}
// email validation
var eml=document.getElementById("email").value;
if(eml=="")
{
alert('email-id not be empty. you must have enter email-id ');
//document.getElementById("msg").innerHTML = 'student name not be empty. you
must have enter name';
return false;
}
var mailformat = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if(!eml.match(mailformat))
{
alert('not valid email !!!');
//document.getElementById("msg").innerHTML = 'not valid email !!!';
return false;
}
// adress validation
var adr=document.getElementById("adrs").value;
if(adr.trim()=="" || adr==null)
{
alert('adress not should be empty ');
return false;
}
var patrn=/^[0-9A-Za-z\,\-]+$/;
if(!(adr.trim()).match(patrn))
{
alert('only 0-9,A-Z,a-z character allow ');
return false;
}
if(adr.lenth>75)
{
alert('maximum character allow only 75. you have enter
total'+adr.length+'charecters');
return false;
}
// roll no validation
var rn=document.getElementById("rno").value;
if(rn=="" || rn==Null)
{
alert('roll no not be should empty please enter your roll number');
5

return false;
}
// gender validation
var gnd=document.rform.gndr.value;
//alert(gnd);
if (gnd==""||gnd==null)
{
alert('gender is not selected please select your gender ................ !!!!');
return false;
}
// date validation
var userinput = document.getElementById("dob").value;
//var dob = new Date(userinput);

if(userinput==null || userinput=="")
{
alert('**Choose a date please. ............ !!!!');
return false;
}
// division validation
var vdiv = document.getElementById("div").value;
if(vdiv=="" || vdiv==null)
{
alert('Please select your division...!!!');
return false;
}
// subject validation
var vwd = document.getElementById("cwd").checked;
var vjava = document.getElementById("cjava").checked;
var vnet = document.getElementById("cnet").checked;
var vse = document.getElementById("cse").checked;
var vis = document.getElementById("cis").checked;
if(vwd==false && vjava==false && vnet==false && vse==false && vis==false )

{
alert('Please select atleast one subject...!!!');
return false;
}
// faculty validation
var vfklty = document.getElementById("fklty").value;
if(vfklty=="" || vfklty==null)
{
alert('Please select atleast one faculty which you like most...!!!');
return false;
}
// future validation
var vfld=document.getElementById("fld").value;
if(!vfld.match(letters))
{
alert('only allows alphbet value. ........... !!!');
return false;
}
if(vfld=="")
6
{
alert('Please select or input atleast one field what do you want to be in future...!!!');
return false;
}
return true;
}
</script>
</head>
<body>
<TITLE> Regitrastion form</TITLE>
<center>
<form name="rform" id="rform" method="get" bordercolor="blue" regvalidate();" >
<fieldset>
<legend><h4> <font color="gold">REGISTRATION </gold></h4></legend>
<table border="4" style="padding:20px;" cellspacing="4" bordercolor="pink" bgcolor="snow" width='600px'>

<tr>
<td style="text-align:left;"> <b><font style="color:red">*</font>Student's Name : </b> </td>
</tr>
<tr>
<td style="text-align:left"> <b><font style="color:red">*</font>Password : </b> </td>
</tr>
<tr>
<td style="text-align:left"> <b><font style="color:red">*</font>Phone No : </b></td>
<td> <input type="text" id="phno" name="phno" /> </td>
</tr>
<tr>
<td style="text-align:left"> <b><font style="color:red">*</font>Email : </b></td>
<td> <input type="text" id="email" name="email" /> </td>
</tr>
<tr>
<td style="text-align:left"> <b><font style="color:red">*</font>Address : </b></td>
<td>
<textarea name="adrs" id="adrs" rows="5" cols="25"> </textarea>
</td>
</tr>
<tr>
<td style="text-align:left"> <b><font style="color:red">*</font>Roll No. : </b></td>
<td> <input type="text" id="rno" name="rno" /> </td>
</tr>
<tr>
<td style="text-align:left"> <b><font style="color:red">*</font>Gender : </b></td>
<td>
<div><input type="radio" id="gndr" name="gndr" value="male" />male</div>
<div><input type="radio" id="gndr" name="gndr" value="female" />female</div>
</td>
</tr>
<tr>
<td style ="text-align:left"> <b><font style="color:red">*</font> Date of birth: </b></td>
<td><input type="date" id="dob" name="dob"> </td>
</tr>
<tr>
<td style="text-align:left"> <b><font style="color:red">*</font>Div : </b></td>
<td>
<select id="div" name="div" >
7
<option value="div0" selected >----select--- </option>

</select>
</td>
</tr>
<tr>
<td style="text-align:left" colspan="2"> <b><font style="color:red">*</font>which Subject
do you like most? </b></td>
</tr>
<tr>
<td style="text-align:center"> subject :</td>
<td style="text-align:left" >
<input type="checkbox" id="cwd" name="cwd" value="wd" />WD
<input type="checkbox" id="cjava" name="cjava" value="java" />JAVA
<input type="checkbox" id="cnet" name="cnet" value="dotnet" />.NET
<input type="checkbox" id="cse" name="cse" value="se" />SE
<input type="checkbox" id="cis" name="cis" value="is" />IS
</td>
</tr>
<tr>
<td style="text-align:left" colspan="2"> <b><font style="color:red">*</font>which faculty
do you like most? </b></td>
</tr>
<tr>
<td style="text-align:center" > faculty </td>
<td>
<select id="fklty" name="fklty" size="3"multiple>
<option value="viral patel">Viral Patel</option>
<option value="heta desai">Heta Desai</option>
<option value="swety tamakuwala">Sweety tamakuwala</option>
<option value="radhika amlani">Radhika Amlani</option>
<option value="piyush arora">Piyush Arora</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:left" colspan="2"> <b><font style="color:red">*</font>what do you
want to be in future? </b></td>
</tr>
<tr>
<td style="text-align:center"> field</td>
<td>
<input list="fld">
<datalist id="fld">
<option value="Developer">
<option value="Designer">
<option value="Tester">
<option value="Administrator">
</datalist>
</td>
</tr>
<tr>
<td style="text-align:left"> <b><font style="color:red">*</font>Percentage : </b></td>
<td>
0
8
<input type="range" id="a" name="a" value="50" />

100
<br>
<output name="x" >50</output>%
</td>
</tr>
<tr >
<td style="text-align:center" colspan="2">
<input type="submit" style="color:blue" value="submit" id="sbtn" name="sbtn" />
<input type="reset" style="color:green" value="Reset" id="rst" name="rst" />
</td>
</tr>
</table>
</fieldset>
</form>
</center>
</body>
</html>
OUTPUT
Question-4 : Design a website for college. Create minimum following 5 pages for this website.
1) Home page - describe the college
2) registration page - for collecting students data
3) login page - for student/faculty login
4) Photo Gallery page - which show photos related to college
5) Contact Us page - display college address and contact numbers
<html>
<head>
<title>link page</title>
</head>
<body bgcolor="lightyellow">
<center>
<h3 style="color:orange"> Select</h3>
</center>
<a href="home page.htm"target="rightside">HOME PAGE</a><br>
<a href="registration page.htm"target="rightside">REGISRATION</a><br>
<a href="login page.htm"target="rightside">LOGIN</a><br>
<a href="photo gallary page.htm"target="rightside">PHOTO GALLARY</a><br>
<a href="contact us page.htm"target="rightside">CONTACT US</a><br>
</body>
9
</html>
1) Home page - describe the college
<html>
<head>
<title>Home page</title>
</head>
<fieldset>
<legend align="center">
<table border="2"align="center">
<tr><td>
<tr>
<td><img src="home page photo.jpg"width="200"></td>
</tr>
</table>
</td></tr>
</table>
</legend><br><br>
<table align="center">
<tr>
<td colspan="2"><font size="5"><b>Founder</b><br>Late Shri. Shambhubhai V.
Patel<br></td>
</tr>
<tr>
<td><img src="founder.png"width="150" border="1"></td>
<td><b>"A true Gandhian Leader"</b>, a person who dedicated his entire life to the
principles of honesty, trust,
unity and encouraged positive thinking together by providing inspiring leadership.
With a view to help the needy people,
he established many organizations which still today spread the fragrance of his deeds.
He tirelessly endeavored to serve
the society and has become immortal in the memory of people.</td>
</tr>
</table>
<p> -</p>
<p>
<b>Why IT ?</b><br>
Information technology is a progressive and constantly changing industry, promising a wide
range of opportunities.
If you have always loved the idea of working with computers, a career in IT is the ideal
pathway for you to choose.
No matter what industry you’re looking into, most modern businesses need people with
general skills and knowledge of
how to support information technology activities in the workplace.
</p>
<p> -</p>
<p>
<b>Why Management ?</b><br>
Programme Design Young graduates with no prior experience in business but who exhibit
entrepreneurial ambitions,
and The next generation of Family Business owners. To promote the development of socio-
economically sensitive,
responsible and effective managers and management academics of tomorrow.
</p>
</fieldset>
</body>
10
</html>
2) registration page - for collecting students data
3) login page - for student/faculty login
<html>
<head>
<title> Login Form</title>
<style>
*{
font-size:15px;
}
table{
margin-top:75px;
}
tr{
margin:25px;
}
</style>
<script type="text/javascript">
function loginvalidate()
{
// name validation
var nam=document.getElementById("sname").value;
if(nam==""||nam==null)
{
alert('student name not be empty. you must have enter name ');
return false;
}
if(!nam.match(letters))
{
alert('only allows alphbet value ');
return false;
}
// password validation
var psw=document.getElementById("pswd").value;
if(psw=="" || psw==Null)
{
alert('password not be should empty ');
return false;
}
alert('you have login successfully ');
return true;
}
</script>
</head>
<body bgcolor="lightgreen">
<center>
<form name="loginform" id="loginform" method="get" bordercolor="blue" >loginvalidate();" >
<table style="padding:40px;color:orange" cellspacing="5"
width='600px'bgcolor="lightyellow">
<tr>
<th style="text-align:center;font-size:30px"colspan="2"> Login
Here</th>
</tr>
<tr>
<td style="text-align:left;"> <b>Student's Name : </b> </td>
11

</tr>
<tr>
<td style="text-align:left"> <b>Password : </b> </td>
</tr>
<tr>
<td><input type="submit" style="color:blue" value="submit"
id="sbtn" name="sbtn" subvalidate();" /></td>
<td>
not yet member?? <a href="registration
page.htm">Register</a>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
4) Photo Gallery page - which show photos related to college
<html>
<head>
<title>Gallary</title>
</head>
<font size="10"face="impact"color="orange"><marquee behavior="alternate"
direction="right">Image Gallary</marquee></font>
<br><br><br><br>
<tr>
<td rowspan="2"><img src="j-1.jpg"width="420"></td>
<td><img src="pic-1.jpg"width="650"></td>
</tr>
<tr>
<td><img src="pic-2.jpg"width="650"></td>
</tr>
</table>
<br>
<tr>
<td><img src="j-2.jpg"width="400"></td>
</tr>
</table>
<br>
<tr>
<td><img src="s-1.jpg"width="500"></td>
<td><img src="s-2.jpg"width="500"></td>
</tr>
</table>
<br>
<tr>
<td><img src="L1.jpg"width="450"></td>
<td><img src="L2.jpg"width="450"></td>
</tr>
</table>
12
<br>
</body>
</html>
5) Contact Us page - display college address and contact numbers
<html>
<head>
<title>contact us</title>
</head>
<style>
*{
font-size:15px;
}
table{
font-family:comic sans ms;
margin-top:50px;
}
tr{
margin:25px;
}
</style>

<body bgcolor="skyblue">
<center>
<table style="padding:40px;color:blue" cellspacing="5"
width='600px'bgcolor="lightyellow">
<tr>
<th style="text-align:center;font-size:30px"colspan="2">Contact
Details</th>
</tr>
<tr>
<td><b> College Address :</b></td>
<td> Shri Shambhubhai V. Patel College Of Computer Science
And Business Management,Sumul Dairy Road Near I.C. Gandhi High School,Surat,Gujarat 395008. </td>
</tr>
<tr>
<td><b> Telephone</b></td>
<td> 0261-2537772 </td>
</tr>
<tr>
<td><b> Email : </b></td>
<td> svpatelcsbm@gmail.com </td>
</tr>
</table>
</center>
</body>
</html>
OUTPUT:
13
Question-5 create structure shown in image using Bootstrap Grid System classes. Image is attached.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Grid System Classes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
div{
font-size:15pt;
border:solid;
border-color:white;
border-width:3px;
}
</style>
</head>
<body>
<div class="container m-3">

</br></br>
<div class="row">
<div class="col-md-1" style="background-color:lightgrey;"align="center">span <br>1 </div>
</div>
<div class="row">
<div class="col-md-4" style="background-color:lightgrey;"align="center">span 4</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
<div class="col-md-12"style="background-color:lightgrey;"align="center">span 12</div>
</div>
</div>
14
</body>
</html>
OUTPUT:
Question-6 Create one table which have 5 rows and 4 columns. Take some data for this table. Apply following
bootstrap classes for table.
1. Apply .table class in table tag and display it.
2. Apply .table-striped class and display zebra-stripes rows in table.
3. Apply .table-bordered class and adds borders on all sides of the table and cells.
<html>
<head>
<title> Student data</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<table class="table table-striped table-bordered">
<caption>student marks data</caption>
<thead class="thead-light">
<tr>
<th>Roll no</th>
<th>Student-Name</th>
<th>Marks</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Snehal</td>
<td>41/50</td>
<td>82%</td>
</tr>
<tr>
<td>02</td>
<td>Roshni</td>
<td>48/50</td>
<td>96%</td>
</tr>
<tr>
<td>03</td>
<td>Sweta</td>
<td>40/50</td>
<td>80%</td>
</tr>
<tr>
<td>04</td>
<td>Bhumi</td>
<td>45/50</td>
15
<td>90%</td>
</tr>
</tbody>
</table>
</body>
</html>
OUTPUT:
Question-7 : Take any one image and apply bootstrap classes for different shape of images to display as following.
Also apply .img-responsive class of bootstrap to make the image responsive.
<html>
<head>
<title>Responsive Image</title>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css"></style>
</head>
<body>
<div class="container">
<img src="teddy.jpeg" class="img-rounded img-fluid" width="30%">
<img src="rabbit.jpg" class="img-circle img-fluid" width="30%">
<img src="flower.jpg" class="img-thumbnail img-fluid " width="30%">
</div>
</body>
</html>
OUTPUT:
Question-8 : create different size and different colors buttons. Apply bootstrap classes for buttons. Also try to
Active/Disabled Buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap question-8</title>
</head>
<body>
16
<h2>Button Styles</h2>
</br>
<div>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div> </br>
<div>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
</div></br>
<div>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
</div>
</div>
</div>
</body>
</html>
OUTPUT:
Question-9 : Apply bootstrap classes to make 5 buttons group.

1. Make these group vertically.
2. Make these group horizontally and justify them to span the button group the entire width of the screen.
3. Make one of these group button as dropdown menu.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap p_9</title>
</head>
<body>
<h2>Vertical Button Group</h2>
</br>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Amul </button>
<button type="button" class="btn btn-primary">Havmor </button>
<button type="button" class="btn btn-primary">chocalate chips </button>
<button type="button" class="btn btn-primary">American drifriuts </button>
<button type="button" class="btn btn-primary">venila </button>
17
</div>
<h2>Nesting Button Groups</h2>
</br>
<div class="btn-group">
<button type="button" class="btn btn-primary">Amul </button>
<button type="button" class="btn btn-primary">Havmor </button>
<button type="button" class="btn btn-primary">chocalate chips </button>
<button type="button" class="btn btn-primary">American drifriuts </button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">venila
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">candy </a></li>
<li><a href="#">kin-kone </a></li>
</ul>
</div>
</div>
<h2>Justified Button Groups</h2>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Amul </a>
<a href="#" class="btn btn-primary">Havmor</a>
<a href="#" class="btn btn-primary">chocalate chips </a>
<a href="#" class="btn btn-primary">American drifriuts </a>
<a href="#" class="btn btn-primary">venila</a>
</div>
</div>
</body>
</html>
OUTPUT:
Question-10 : Create one registration page (without using table) to apply bootstrap form classes. Take user name
(use input tag), address (use textarea tag) and select city (use select tag to create dropdown menu of city select)
fields. Also take one submit button. Do following.
1. Make bootstrap vertical registration form (default)
2. Make bootstrap inline registration form
3. Make bootstrap horizontal registration form
<html lang="en">
<head>
<title>Bootstrap question-10</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
18
</head>
<body>
<h2><b><u>Vertical Form</u></b></h2>
<form>
<div class="form-group">
<label for="User Name">User Name:</label>
<input type="User Name" class="form-control" id="User Name"
placeholder="Enter User Name" name="User Name">
</div>
<label for="Addr">Address:</label>
<textarea name="adr" rows="3" class="form-control"
placeholder="Enter Address"></textarea>
</div>
<label for="cty">City:</label>
<select class="form-control" id="cty" name="cty">
<option selected>--Select City--</option>
<option>Surat</option>
<option>Vadodara</option>
<option>Ahemdabad</option>
<option>Rajkot</option>
</select>
</div>
<br />
<button type="submit" class="btn btn-
primary">Submit</button>
</form>
</div>
<h2><b><u>Inline Form</u></b></h2>
<form class="form-inline">
<label for="User Name">User Name:</label>
</div>
<label for="Addr">Address:</label>
</div>
<label for="cty">City:</label>
</select>
</div><br />
</form>
19
</div>
<h2><b><u>Horizontal Form</u></b></h2>
<form class="form-horizontal" >
<label class="control-label col-sm-2" for="User Name">User
Name:</label>
<div class="col-sm-10">
</div>
</div>
<label class="control-label col-sm-2"
for="Addr">Address:</label>
</div>
</div>
<label class="control-label col-sm-2" for="cty">City:</label>
</select>
</div>
</div><br />
</form>
</div>
</body>
</html>
OUTPUT:
20

Question 1: Create Time Table in HTML As Given in Attached Image

Uploaded by

Copyright:

Available Formats

Question 1: Create Time Table in HTML As Given in Attached Image

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Question 1: Create Time Table in HTML As Given in Attached Image

Uploaded by

Copyright:

Available Formats

SYBCA SEM 4 Web Designing Roll no:-120

Question 1 : create Time table in HTML as given in attached image.

<th bgcolor="pink"> MON </th>

//document.getElementById("msg").InnerHTML = 'password not be should empty ';

//var dob = new Date(userinput);

if(vwd==false && vjava==false && vnet==false && vse==false && vis==false )

<option value="div0" selected >----select--- </option>

<input type="range" id="a" name="a" value="50" />

<td> <input type="text" id="sname" name="sname" /> </td>

<div class="container m-3">

Question-9 : Apply bootstrap classes to make 5 buttons group.

You might also like