Scribd
Upload
33 views71 pages

Archi WD File

The document provides code for several HTML practical assignments: 1. It includes code for an HTML page with various HTML tags like headings, text formatting, lists, tables etc. 2. It includes code for an HTML page with ordered lists, unordered lists, definition lists, and nested lists. 3. It includes code for an HTML table with colored cells and rowspans. The document provides code solutions for assignments on basic HTML tags and page structure in 3 sentences or less.

Uploaded by

Archi Jariwala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
33 views71 pages

Archi WD File

The document provides code for several HTML practical assignments: 1. It includes code for an HTML page with various HTML tags like headings, text formatting, lists, tables etc. 2. It includes code for an HTML page with ordered lists, unordered lists, definition lists, and nested lists. 3. It includes code for an HTML table with colored cells and rowspans. The document provides code solutions for assignments on basic HTML tags and page structure in 3 sentences or less.

Uploaded by

Archi Jariwala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 71

PRACTICAL 1

A. Study of HTML tags, design HTML page using basic design.

<html>
<head> <title> PRCATICAL 1 </title> </head>
<body>
<p align="left"> Name: Archi Jariwala <br>
Enrollment No: 210410116047
</p>
<b> <u> HELLO WORLD </u> </b> <br>
<i> This Is Fun </i>
HTML is main language for website.
All browser use it for simplicity.
At initial level we develop static pages.
<p> Loading pages with browser.</p>
<hr> WD
<hr>
<tt> Type Writing Text </tt>
<pre> Website </pre>
<blink> HTML TAGS </blink>
<h1> WEB DEVELOPMENT </h1>
<h2> Web DEVELOPMENT </h2>
<h3> WEB DEVELOPMENT </h3>
<h4>WEB DEVELOPMENT </h4>
<h5> WEB DEVELOPMENT </h5>
<h6>WEB DEVELOPMENT </h6>
</body>
</html>

OUTPUT:
B.) Design an HTML page with ordered list, unordered list,
definition list and nested list.

Ordered List :-
<html>
<head><title> Ordered List </title></head>
<body>
<p align="left"> Name: Archi Jariwala <br>
Enrollment No: 210410116047
</p>
<ol type="1">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li></ol>
<ol type="A">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li></ol>
<ol type="I">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li></ol>
<ol type="a">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li></ol>
</body>
</html>

OUTPUT:
Unordered List :-
<html>
<head><title> Unordered List </title></head>
<body>
<p align="left"> Name: Archi Jariwala <br>
Enrollment No: 210410116047
</p>
<ul style="list-style-type:disc;">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ul>
<ul style="list-style-type:square;">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ul>
<ul style="list-style-type:circle;">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ul>
<ul style="list-style-type:none;">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ul>
</body>
</html>

OUTPUT:
Definition List :-
<html>
<head><title> Definition List </title></head>
<body>
<p align="left"> Name: Archi Jariwala <br>
Enrollment No: 210410116047
</p>
<dl>
<dt>Color</dt>
<dd>black</dd>
<dt>Fruit</dt>
<dd>Apple</dd>
</body>
</html>

OUTPUT:

Nested List :-
<html>
<head><title> Nested List </title></head>
<body>
<p align="left"> Name: Archi Jariwala <br>
Enrollment No: 210410116047
</p>
<ol type="I"> <li>List Item 1</li>
<ol type="a">
<li>Nested Item 1.1</li>
<li>Nested Item 1.2</li></ol>
<li>List Item 2</li>
<ol type="1">
<li>Nested Item 2.1</li>
<li>Nested Item 2.2</li>
<ul style="list-style-type:circle;">
<li>Nested Item 2.2.1</li>
<li>Nested Item 2.2.2</li>
<ul style="list-style-type:square;">
<li>Nested Item 2.2.2.1</li>
<li>Nested Item 2.2.2.2</li>
</ul>
<li>Nested Item 2.2.3</li>
</ul>
<li>Nested Item 2.3</li>
</ol>
<li>List Item 3</li>
<ul style="list-style-type:disc;">
<li>Nested Item 3.1</li>
<li>Nested Item 3.2</li>
<li>Nested Item 3.3</li></ul>
</ol>
</body>
</html>

OUTPUT:
C.) Write the html code for following table.

<html.
<head><title> Practical 1 c</title></head>
<body>
<p align="left"> Name: Archi Jariwala <br>
Enrollment No: 210410116047
</p>
<table border="3" cellspacing="3" cellpadding="4">
<caption>Table</caption>
<tr>
<th align="center" colspan="4"> Work Contact Points</th>
</tr>

<tr align="center">
<th> Name</th>
<th> Email </th>
<th>Phone</th>
<th>Floor/Block</th>
</tr>

<tr align="center">
<td bgcolor="Yellow" >Fred</td>
<td bgcolor="Cyan" >[email protected]</td>
<td bgcolor="Yellow">123456</td>
<td bgcolor="Light Blue" rowspan="2">1/A</td>
</tr>

<tr align"center">
<td bgcolor="Cyan" align="center">John</td>
<td bgcolor="Yellow" align="center">[email protected]</td>
<td bgcolor="Cyan" align="center">234567</td>
</tr>

<tr align="center">
<td bgcolor="Yellow" >Bill</td>
<td bgcolor="Cyan" >[email protected]</td>
<td bgcolor="Yellow">345678</td>
<td bgcolor="Purple" rowspan="3">3/C</td>
</tr>

<tr align"center">
<td bgcolor="Cyan" align="center">jane</td>
<td bgcolor="Yellow" align="center">[email protected]</td>
<td bgcolor="Cyan" align="center">777444</td>
</tr>

<tr align="center">
<td bgcolor="Yellow" >Alison</td>
<td bgcolor="Cyan" >[email protected]</td>
<td bgcolor="Yellow">888652</td>
</tr>

</table>
</body>
</html>

OUTPUT:
Practical - 2

A.) Design a page of small picture album. And when you click
on image it should display picture in new browser window.

<html>
<head><title> </title></head>
<body>
<p align="left"> Name: Archi Jariwala <br>
Enrollment No: 210410116047
</p>
<table border="3" cellspacing=3" cellpadding="4" >

<tr align="center">
<td><center><a href="2.html" target="_blank"><img src="2.jpg" height="50"
width="50"></a></center></td>
<td colspan="2"><center><a href="3.html" target="_blank"><img src="3.jpg"
height="30" width="40"></center></td>
<td><center><a href="4.html" target="_blank"><img src="4.jpg" height="30"
width="40"></center></td>
</tr>

<tr align="center">
<td colspan="2"><center><a href="5.html" target="_blank"><img src="5.jpg"
height="50" width="50"></center></td>
<td colspan="2"><center><a href="6.html" target="_blank"><img src="6.jpg"
height="50" width="50"></center></td>
</tr>

<tr align="center">
<td><center><a href="7.html" target="_blank"><img src="7.jpg" height="50"
width="50"></center></td>
<td colspan="2"><center><a href="8.html" target="_blank"><img src="8.jpg"
height="50" width="50"></center></td>
<td><center><a href="9.html" target="_blank"><img src="9.jpg" height="50"
width="50"></td>
</tr>
</table>
</body>
</html>

OUTPUT:
B.) Create a student registration form using <form> tag.
The registration form must consist of following information:
First Name, Middle Name, Last Name, Gender, Address,
PhoneNo., pincode, email id, Hobbies, City, State, Country.
Also take one submit button. Use Fieldset and legend tag also.

<html>
<head><title> Registration Page </title></head>
<body bgcolor="Lightskyblue">
<p align="left"> Name: Archi Jariwala <br>
Enrollment No: 210410116047
</p>
<h2> Registeration Form</h2>
<form name="Registration Form", action="Registration Form.mp" ,
method="post" />
<fieldset>
<legend>Personal</legend>
Firstname:<input type="text" name="firstname" size="15"/> <br> <br>
Middlename:<input type="text" name="firstname" size="15"/> <br> <br>
Lastname:<input type="text" name="firstname" size="15"/> <br> <br>
</fieldset>

<fieldset>
<legend>Contact Information</legend>
Address: <textarea cols="80" rows="5" value="address"> </textarea> <br>
<br>
Phone No.: <input type="text" name="phone" size="12" /> <br> <br>
Pincode: <input type="text" name="Pincode" size="8"/> <br> <br>
Email: <input type="email" id="email" name="email" size="40"/> <br>
<br>
</fieldset>

<fieldset>
<legend>Other Details</legend>
Gender :<input type="radio" name="male"/> Male
<input type="radio" name="female"/> Female
<input type="radio" name="other"/> Other <br> <br>

Hobbies:<input type="checkbox" name="Hobbies" value="Sports">Sports


<input type="checkbox" name="Hobbies" value="Coding">Coding
<input type="checkbox" name="Hobbies" value="Reading">Reading
<br> <br>
City:<select name="city id" id="city">
<option value="select">Select City</option> <option
value="Indore">Indore</option> <option value="Rajkot">Rajkot</option>
<option value="Mumbai">Mumbai</option>
<option value="Ahmedabad">Ahmedabad</option> <option
value="Pune">Pune</option> </select><br> <br>
State:<select name="state id" id="state">
<option value="select">Select State</option> <option
value="Gujarat">Gujarat</option> <option
value="Maharastra">Maharastra</option>
<option value="Madhya Pradesh">Madhya Pradesh</option> </select> <br>
<br>
Country:<select name="Country">
<option value="India" >India</option> <option
value="Others">Others</option> </select> <p>
<input type="button" value="Submit"/>
<input type="Reset"/>
</form>
</body>
</html>

OUTPUT:
PRACTICAL 3
A. Create an HTML page with 2 frames. 1st frame should contain 2
links. Clicking on which it should display related contents in the 2nd
frame.

FRAME 1:

<html>
<head>
<title>Practical 3a</title>
</head>
<frameset cols="50%,50%">
<frame name = "a " src = "frame2.html">
<frame name = "b" >
</frameset>
</html>

FRAME 2:

<html>
<head>
<title>Practical 3a</title>
</head>
<body>
<hr>
<a href="frame3.html" target ="b">HYPERTEXT
MARKUP LANGUAGE</a>
<hr>
<a href="frame4.html" target="b" >JAVASCRIPT</a>
<hr>
</body>
</html>

FRAME 3:

<html>
<head>
<title>html</title>
</head>
<body bgcolor="lightblue">
<p> Name: Archi Jariwala
<br> Enrollment No: 210410116047
</p>
<hr>
<h4>What is HTML?</h4>
HTML stands for Hyper Text Markup Language.
<br>
HTML is the standard markup language for creating Web pages.
<br>
HTML describes the structure of a Web page.
<br>
HTML consists of a series of elements.
<br>
HTML elements tell the browser how to display the content.
<br>
HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

</body>
</html>

FRAME 4:

<html>
<head>
<title>JAVASCRIPT</title>
</head>
<body bgcolor="lightblue">
<p> Name: Archi Jariwala
<br> Enrollment No: 210410116047
</p>
<hr>
<h4>What is JAVASCRIPT?</h4>
HTML stands for Hyper Text Markup Language.
<br>
HTML is the standard markup language for creating Web pages.
<br>
HTML describes the structure of a Web page.
<br>
HTML consists of a series of elements.
<br>
HTML elements tell the browser how to display the content.
<br>
HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

</body>
</html>

OUTPUT:
B. Design HTML page which display one Audio and
Video with all controls.

<html>
<head>
<title>Practical 3B</title>
</head>
<body>
<p> <font size="4">Name: Archi Jariwala
<br> Enrollment No: 210410116047
</font>
</p>
<hr>
<h3><u>AUDIO FILE</u></h3>
<audio controls>
<source src="C:\Users\Archi\Desktop\Kid giggling.mp3"
type="audio/ogg">
</audio>
<br>
<h3><u>VIDEO FILE</u></h3>
<video width="300" height="300" controls>
<source src="C:\Users\Archi\Desktop\BirdChirping video.mp4" >
</video>
</body>
</html>
OUTPUT:
PRACTICAL-4
A. CREATE AN HTML PAGE WITH INTERNAL STYLE SHEET
<!DOCTYPE html>
<html lang="en">
<head>
<title>practical- 8</title>
<style> form{
border: 2px solid black; background-color: green; color:
white; height: 350px;

width: 450px; justify-content: center;

} button{ background-color: blue; color: white;


border- radius: 20px;
}
.btn{ border-radius: 150px; }
.content{ text-align: center; justify-content: center;
} input{ width: 300px; height: 20px; line-height: 20px;
}

</style>
</head>
<body>
<h3> ARCHI JARIWALA</h3>
<h4>210410116047</h4>
<h3><b>Internal css.</b> </h3>
<div>
<form > <div class="content"> your Name :<br>
<input type="text"> <br>

your Age : <br>


<input type="text">
<br>
<br>
<div class="btn">

<input type="button" value="submit">


</div>
</div>
</form>
</div>
</body>
</html>
OUTPUT:
B. CREATE AN HTML PAGE WITH STYLE SHEET.
<html>
<head>
<title> practical 4(b) </title>
</head>
<body>
<h1> page with style sheet</h1>
<h3> ARCHI JARIWALA</h3>
<h4>210410116047</h4>
<hr>
<p style="color:red"> TEXT WITH THE COLOR</p>
<p style="text-align:center"> TEXT WITH THE TEXT-ALIGN center </p>
<p style="text-align:left"> TEXT WITH THE TEXT-ALIGN left </p>
<p style="text-align:right"> TEXT WITH THE TEXT-ALIGN right </p>
<p> TEXT WITH THE <span style="letter-spacing:5px"> LETTER SPACING
</span> </p>
<p style="background-color: blue; color:white">TEXT WITH THE background-
color </p> \
<p style="text-decoration:underline"> TEXT DECORATION
UNDERLINE</p>
<p style="text-decoration:overline"> TEXT DECORATION OVERLINE </p>
<p style="text-decoration:line-through"> TEXT DECORATION LINE-
THROUGH </p>
<p style="text-indent:2em"> TEXT - INDENT</p>
<p style="text-shadow:4px 8px red ;font-size:2em">: text</p>
<p style="text-shadow:-4px -8px red ;font-size:2em">: text</p>
</body>
</html>
OUTPUT:
C.) Create an HTML page with external style
sheet.
Html file
<html >
<head>

<link rel="stylesheet" type="text/css" href="s1.css">


<title>Practical 4 c</title>
</head>
<p>
Name: Archi Jariwala
<br>
Enrollment No: 210410116047
</p>
<hr>

<body>
<h1>List Styles</h1>

<h2>Ordered List (ol)</h2>


<ol >
<li class="decimal">ADA</li>
<li class="hebrew">WD</li>
<li class="katakana">CN</li>
<li class="roman">PE</li>
<li class="alpha">CPDP</li>

</ol>

<h2>Unordered List (ul)</h2>


<ul>
<li class="circle">ADA</li>
<li class="square">WD</li>
<li class="disc">CN</li>
<li class="none">PE</li>
</ul>

<h2>Unordered List (ul)</h2>


<ul class="star">
<li>ADA</li>
<li>WD</li>
<li>CN</li>
<li>PE</li>
</ul>

</div>
<div class="container">
<img src="a1.jpg" alt="Background Image" class="background-image">
<div class="overlay-text">
This is text with a higher z-index.
</div>
<div class="underlay-text">
This is text with a lower z-index.
</div>
</div>
</body></html>

Css file
.circle {
list-style-type: circle;
}
.square {
list-style-type: square;
}

.disc {
list-style-type: disc;
}

.star {
list-style-image: url('starz.jpg');
}

.decimal{
list-style-type: decimal;
}

.hebrew{
list-style-type:hebrew;
}
.alpha{
list-style-type: upper-alpha;

}
.katakana{
list-style-type:katakana;

}
.roman{
list-style-type:upper-roman;

.container {
position: relative;
width: 400px;
height: 300px;
}

.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
text-align: center;
font-size: 24px;
color: white;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px: }
.underlay-text {
position: absolute;
top: 50%;
left: 100%;
transform: translate(-50%, -50%);
z-index: 0;
text-align: center;
font-size: 24px;
color: white;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
}
OUTPUT:
PRACTICAL-5
A. DESIGN A PAGE WITH CSS WILDCARDSELECTORS
<html>
<head>
<title>paractical-11</title>
<style> [class*="str"]{ background-color: blue;
color:bisque;
} h1 { color:blue; text-decoration: capitalize;
} div { text-align:center;

width:60%; border: 3px solid black;

</style>

</head>
<body>
<h3> ARCHI JARIWALA</h3> <h4>210410116047</h4>

<div>
<h1>TEST PAGE </h1>
<div class="first-str">The first div element.</div>
<div class="second">The second div element.</div>
<div class="third">The third div element.</div>
<p class="mystr" >This is some text in a paragraph.</p>

</div>
</body>
</html>
OUPUT:
B. DESIGN CSS PAGE WITH LINEAR GRADIENT WITH COLOUR
OF RAINBOW.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Linear gradient </title>
<style> .box{
height:
100vh;
background-image: repeating-linear-gradient( to left,
red,orange,yellow,green,blue,indigo,violet) ;
}
</style>
</head>
<body class="box" style="text-align: center; font-size: larger;">

<h3>ARCHI JARIWALA</h3>
<h4>210410116047</h4>
</body>
</html>

OUPUT:
RADIAL GRADIENT
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Evenly Spaced Color Stops</h1>

<div id="grad1"></div>
<h3>ARCHI JARIWALA</h3>
<h4>210410116047</h4>
</body>
</html>
Output:
PRACTICAL-6
A. CREATE AN HTML PAGE WITH JS WHICH GIVES
SIMPLE FUNCTIONALITY OF ACALCULATOR.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PRACTICAL-6(A)</title>
</head>
<body>
NAME:ARCHI JARIWALA <br>
ENROLLMENT NO.: 210410116047 <br>
<script type="text/javascript"> function sum() {
var n1 =
Number(document.f1.no1.value); var n2 =
Number(document.f1.no2.value); sum = n1 + n2; document.f1.ans.value = sum;
}
function sub() {
var n1 =
Number(document.f1.no1.value); var n2 =
Number(document.f1.no2.value); sub = n1 - n2; document.f1.ans.value = sub;
}

function mul() {
var n1 = Number(document.f1.no1.value);
var n2 = Number(document.f1.no2.value); mul = n1 * n2;
document.f1.ans.value = mul;
}
function div() {
var n1 =
Number(document.f1.no1.value); var n2 =
Number(document.f1.no2.value); if
(n2 != 0) { div = n1 / n2;
}
document.f1.ans.value = div;
}
</script>
<form name="f1">
Enter No. :-<input name="no1" /><br><br> Enter No. :-<input name="no2"
/><br><br> Answer :-
<input name="ans" /><br><br>
<input type="button" value="+" onclick="sum()" />
<input type="button" value="-" onclick="sub()" />
<input type="button" value="*" onclick="mul()" />

<input type="button" value="/" onclick="div()" />


</form>
</body>
</html>
OUTPUT:
B.Create an HTML page with JavaScript , which contains a button
When you click on button it displays count on web page.
<html>
<head>
<title>Counter</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
>
</head>
<body style="text-align: center;">
NAME:ARCHI JARIWALA <br>
ENROLLMENT NO.: 210410116047 <br>
<h1>Counter using JavaScript</h1>
<button type="button" id="count" class="btn btn-
primary">Count</button>
<button type="button" id="reset" class="btn btn-danger"
onclick="reset()">Reset</button><br>
<div>
<b>Count: <span id="clicks">0</span></b>
</div>
<script>
var count=0;
var button=document.getElementById("count");
var display=document.getElementById("clicks")
button.onclick = function(){
count++;
display.innerHTML =count;
}
function reset(){
document.getElementById('clicks').innerHTML=0;
count=0;
}
</script>
</body>
</html>
OUTPUT:
PRACTICAL-7
A. Create an HTML page with java script, which takes two numbers
as inputs and display Odd numbers, Even Numbers on the web page.

<html>
<head>
<title>Practical 7-A</title>
</head>
<body>
NAME:ARCHI JARIWALA <br />
ENROLLMENT NO.: 210410116047 <br />
<h1>Odd and Even Number Finder</h1>
<p>Enter two numbers:</p>
<input type="text" id="num1" placeholder="Enter the first number" />
<input
type="text"
id="num2"
placeholder="Enter the second number"
/><br /><br />
<button onclick="findOddEven()">Check Number</button><br /><br />
<div id="result"></div>
<div id="result2"></div>

<script>
function findOddEven() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
if (num1 % 2 == 0) {
var result = `${num1} is even.`;
document.getElementById("result").innerHTML = result;
} else {
var result = `${num1} is odd.`;
document.getElementById("result").innerHTML = result;
}
if (num2 % 2 == 0) {
var result = `${num2} is even.`;
document.getElementById("result2").innerHTML = result;
} else {
var result = `${num2} is odd.`;
document.getElementById("result2").innerHTML = result;
}
}
</script>
</body>
</html>

OUTPUT:
B. Create an HTML page with JavaScript, in which a text should movewith
mouse cursor.
<html>
<head>
<title>Text Following Cursor</title>
<style>
#following-text {
position:
absolute; font-
size: 16px; color:
red;
}
</style>
</head>
<body>
NAME:ARCHI JARIWALA <br />
ENROLLMENT NO.: 210410116047 <br />

<h2>Text follows Cursor</h2>


<div id="following-text">Follow this!</div>
<script>
var textElement = document.getElementById("following-text");
document.addEventListener("mousemove", function (event) {
textElement.style.left = event.pageX + 10 + "px";
textElement.style.top = event.pageY + 10 + "px";
});
</script>
</body>
</html>
OUTPUT:
PRACTICAL-8
A. Create a page using java script HTML DOM, which contains
following fields: -Name –Address –Gender –Occupation- Email
address and button when user click on button if any field is left blank;
then it should display Message. Also do Email validation with the help
of regular expression in JavaScript.
<html>
<head>
<title>Form Validation</title>
</head>
<body>
NAME:ARCHI JARIWALA <br />
ENROLLMENT NO.: 210410116047 <br />

<h2>Form Validation</h2>
<form id="userForm">
<label for="name">Name:</label>
<input type="text" id="name" required /><br /><br />
<label for="address">Address:</label>
<input type="text" id="address" required /><br /><br />
<label for="gender">Gender:</label>
<input type="radio" id="gender" name="gender" value="male" /> Male
<input type="radio" id="gender" name="gender" value="female" /> Female
<input type="radio" id="gender" name="gender" value="other" />
Other<br /><br />
<label for="occupation">Occupation:</label>
<input type="text" id="occupation" required /><br /><br />
<label for="email">Email Address:</label>
<input type="text" id="email" required /><br /><br />
<button type="button" onclick="validateForm()">Submit</button>
</form>
<p id="error-message" style="color: red"></p>

<script>
function validateForm() {
var name = document.getElementById("name").value;
var address = document.getElementById("address").value;
var occupation = document.getElementById("occupation").value;
var email = document.getElementById("email").value;
var genderElements = document.getElementsByName("gender");
var selectedGender = null;
for (var i = 0; i < genderElements.length; i++) {
if (genderElements[i].checked) {
selectedGender = genderElements[i].value;
break;
}
}

if (!name || !address || !occupation || !email || !selectedGender) {


document.getElementById("error-message").textContent =
"Please fill in all fields.";
} else if (!isValidEmail(email)) {
document.getElementById("error-message").textContent =
"Invalid email address.";
} else {
document.getElementById("error-message").textContent =
"Form submitted successfully!";
}
}
function isValidEmail(email) {
var emailPattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
return emailPattern.test(email);
}
</script>
</body>
</html>

OUTPUT:
B. Write a JavaScript function that accepts a string as a parameterand
converts the first letter of each word of the string in upper case.
<html>
<head>
<title>Practical8-B</title>
</head>
<body>
NAME:ARCHI JARIWALA <br />
ENROLLMENT NO.: 210410116047 <br />
<h3>Convert First Letter To Uppercase</h3>
<input type="text" id="inputString" placeholder="Enter a string" />
<button onclick="convert()">Convert</button>
<p id="result"></p>
<script>
function convert() {
var inputString = document.getElementById("inputString").value;
var words = inputString.split(" ");
var titleCaseString = "";
for (var i = 0; i < words.length; i++) {
var word = words[i];
var firstLetter = word.charAt(0).toUpperCase();
var restOfWord = word.slice(1).toLowerCase();
titleCaseString += firstLetter + restOfWord + " ";
}
titleCaseString = titleCaseString.trim(); // Remove trailing space
document.getElementById("result").textContent = titleCaseString;
}
</script>
</body>
</html>

OUTPUT:
PRACTICAL-9
A. Write a php program to build following
pattern. 0
11
222
3333
44444

<html>
<head>
<title> Practical 9-A </title>
</head>
<body>
NAME:ARCHI JARIWALA <br />
ENROLLMENT NO.: 210410116047 <br />

<?php
$rows = 5;
for ($i = 0; $i < $rows; $i++) {
for ($j = 0; $j <= $i; $j++) {
echo $i;
}
echo "<br>";
}
?>
</body>
</html>
OUTPUT:

B. Write PHP program to find the maximum and minimum elementof an


array.
<html>
<head>
<title>Practical 9-B</title>
</head>
<body>
NAME:ARCHI JARIWALA <br />
ENROLLMENT NO.: 210410116047 <br />
<?php
$array = [10, 5, 8, 20, 2, 15, 30];
$max = $array[0];
$min = $array[0];

foreach ($array as $value) {


if ($value > $max) {
$max = $value;
}
if ($value < $min) {
$min = $value;

}
}
echo "Maximum element: $max\n <br>";
echo "Minimum element: $min\n";
?>
</body>
</html>
OUTPUT:
PRACTICAL-10

A. Write a Php program to verify users login in the


employee management system.

<!DOCTYPE html>

<html>

<head>

<title>Login Page</title>

</head>

<body>

NAME:ARCHI JARIWALA <br />

ENROLLMENT NO.: 210410116047 <br />

<h2>Login</h2>

<form method="post" action="">

<label for="username">Username:</label>

<input type="text" name="username" id="username"


required><br><br>

<label for="password">Password:</label>

<input type="password" name="password" id="password"


required><br><br>

<input type="submit" value="Login">

</form>

<?php

Susers = [
'employeel' => 'password',

'employee2' => 'password2',


];

if ($_SERVER['REQUEST_METHOD] 'POST') {

Susername=$_POST['username'];

Spassword=S_POST['password'];

if (array_key_exists(Susername, Susers)) {

if (Spassword Susers[Susername]) {

echo "Login successful! Welcome, Susername!";

} else {

echo "Incorrect password. Please try again.";

} else {

echo "User not found. Please check your username.";


}
}
?>
</body>

</html>

OUTPUT:
B. Enhance a page with help of the experiment 8 and
10 with CRUD Operations in Php.

<?php

$servername="localhost:3306":

$username="root";

$password = "test";

$dbname="db";

$conn = new mysqli($servername, $username, $password,


$dbname);

if ($conn->connect_error) {

die("Connection failed: ".$conn->connect_error);

function createUser($name, $address, Sgender,


Soccupation, Semail) {

global $conn;

$sql = "INSERT INTO users (name, address, gender,


occupation, email)

VALUES ('$name', '$address', '$gender', '$occupation',


'$email')";

if ($conn->query($sql)===TRUE) {

return "User created successfully!";


} else {

return "Error: ".$sql."<br>" $conn->error;

function readUsers() {

global $conn;

$users = array();

$sql = "SELECT * FROM users";

$result = $conn->query($sql);

if ($result->num_rows > 0) { while ($row - $result-


>fetch_assoc()) {

$users[] = $row,

return $users;

function updateUser($id, $name, $address, $gender,


$occupation, $email) { global $conn;

$sql="UPDATE users SET name='$name',


address='$address'. gender-'$gender,
occupation="$occupation', email-$email" WHERE id-
$id":
if ($conn->query($sql) - =TRUE) {

return "User updated successfully!", } else {

return "Error: ".$sql."<br>" .$conn->error;

function deleteUser(Sid) { global $conn;

$sql="DELETE FROM users WHERE id=$id"; if ($conn-


>query($sql) == TRUE) { return "User deleted
successfully!";

} else {

return "Error: ". $sql."<br>". $conn->error;

if ($_SERVER['REQUEST_METHOD"]='POST') {

TY-IT-1

210410116047

if (isset($_POST['create_user']))
{ name=$_POST['name'];

$address=S_POST['address'];

$gender=S_POST['gender '],

$occupation-5_POST['occupation");

$email=$_POST['email'];

$message createUser($name, $address, $gender,


$occupation, $email).

} elseif (isset($_POST['update_user'])) {

$id = $_POST['id'];

$name-S_POST['name']

$address=$_POST['address'];

$gender = $_POST['gender'];

$occupation$_POST['occupation'];

$email$_POST['email'].

$message updateUser(Sid, Sname, Saddress, Sgender,


$occupation, Semail);

} elseif (isset($_POST['delete_user'])) {

$id $_POST['id'];

$message deleteUser($id);

$users readUsers();

?>

<html>

<head>

<title>CRUD Application</title>
</head>

<body>

NAME:Archi Jariwala<br />

ENROLLMENT NO.: 210410116047<br />

<h2>User Management</h2>

<form method="post" action="">

<label for="name">Name:</label>

<input type="text" name="name" id="name"


required><br><br>

<label for="address">Address:</label>

<input type="text" name="address" id="address"


required><br><br>

<label for="gender">Gender:</label>

<input type="radio" name="gender" value="male"> Male

<input type="radio" name="gender" value="female">


Female

<input type="radio" name="gender"


value="other">Other<br><br>

<label for="occupation">Occupation</label>

<input type="text" name="occupation" id="occupation"


required><br><br>

<label for="email">Email Address:</label>

<input type="text" name="email" id="email"


required><br><br

<button type="submit" name="create_user">Create


User</button>

</form>

<p style="color: red;"><?php if (isset($message)) echo


$message; ?></p>

<h2>User List</h2>

<table border="1">

<tr>

<th>ID</th>

<th>Name</th>

<th>Address</th>

<th>Gender</th>

<th>Occupation</th>

<th>Email</th>

<th>Actions</th>

</tr>
<?php foreach ($users as $user) { ?>

<P>

<td><? $user['id']; ?></td>

<td><?= $user['name']; ?></td>

<td><?= $user['address']; ?></td>

<td><?=$user['gender']; ?></td>

<td><?= $user['occupation']; ?></td>

<td><?= $user['email']; ?></td>

<td>

<form method="post" action="">

<input type="hidden" name="id" value="<?- $user['id']; ?


>">

<button type="submit"
name="update_user">Update</button>

<button type="submit"
name="delete_user">Delete</button>

</form>
</td>

</tr>

<?php } ?>
</table>

</body>

</html>

OUTPUT:
PRACTICAL-11
A. Display “Hello world” message using JQuery.

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
NAME:ARCHI JARIWALA <br>
ENROLLMENT NO.: 210410116047 <br>
<div id="message-container"></div>

<script>
$(document).ready(function () {
$("#message-container").text("Hello world");
});
</script>
</body>
</html>

OUTPUT:
B. Creating Fade-in and Fade-out effects in JQuery.

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#element {
width: 200px;
height: 50px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 50px;
display: none;
}
</style>
</head>
<body>
NAME:Archi Jariwala <br> ENROLLMENT
NO.: 210410116047 <br>
<button id="fadeInButton">Fade In</button>
<button id="fadeOutButton">Fade Out</button>
<div id="element">Hello, I'm fading in and out!</div>

<script>
$(document).ready(function () {
$("#fadeInButton").click(function () {
$("#element").fadeIn("slow");
});
$("#fadeOutButton").click(function () {
$("#element").fadeOut("slow");
});
});
</script>
</body>
</html>

OUTPUT:
C. Creating slide-up and slide-down effect in JQuery.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#element {
width: 200px;
height: 50px;
background-color: #3498db;
color: #fff;
text-align: center;

line-height: 50px;
display: none;
}
</style>
</head>
<body>
NAME:Archi Jariwala <br />
ENROLLMENT NO.: 210410116047 <br />
<button id="slideUpButton">Slide Up</button>
<button id="slideDownButton">Slide Down</button>
<div id="element">Hello, I'm sliding up and down!</div>
<script>
$(document).ready(function () {
$("#slideUpButton").click(function () {
$("#element").slideUp("slow");
});
$("#slideDownButton").click(function () {
$("#element").slideDown("slow");
});
});
</script>
</body>
</html>
OUTPUT:
BEYOND SYLLABUS

Practical: Study of PHP Laravel framework

Laravel Introduction:

Laravel is a compelling model view controller (MVC) architectural pattern PHP


framework, an open-source web application development intended for
developers who demand an uncomplicated and rich toolkit to build full- featured
web applications. Taylor Otwell created Laravel. Laravel is a PHP framework
which makes it effortless for you to produce professional web application by
following refined coding standards and architectural pattern. This concise
tutorial illustrates the basics of the Laravel framework.

Prerequisites:

Before you begin progressing with this tutorial, we assume that you are familiar
with website development using PHP and MySQL also you should be familiar
with HTML, Core PHP, and Advance PHP. We have applied Laravel version 5.1
in all the examples.
Introduction of Laravel :

Laravel is an open-source PHP framework, is robust as well as simple to learn.


In simpler form, it is an open-source web application development framework
written in PHP. It follows a model-view-controller design pattern. Taylor
Otwell created Laravel and released under MIT license. Laravel reuses the
existing elements of various frameworks which aid in building a web
application.
Laravel offers a rich collection of functionalities which consolidates the primary
characteristics of PHP frameworks like Code Igniter, Yii and different
programming languages like Ruby on Rails. Laravel has a vibrant set of features
which will heighten the pace of web development. Laravel is the most successful
elected web development aloft other PHP based MVC frameworks due to its
integrity, execution, scalability, and features.
Why Laravel?

Assists professional and advanced web development exercises. Promotes rapid


as well as reliable web application development. Makes development,
deployment, and maintenance flexible and pleasant. Inherent Syntax. An elegant
set of convenient and advanced built-in features. Laravel is the Utmost
promising PHP based MVC framework. Pretty adequately documented and has
the large community of active members. And the most desirable and promising
thing is it is easy to learn and understand.

Advantages of Laravel :

1. Built-in Libraries.
2. Built-in CLI.
3. Built-in Template engine.
4. Modular.
5. Migration System.
6. Error plus Exception Handling.
7. Test Driven Development (TDD).
8. Security.
9. Follows MVC Architecture.
10. Built-in ORM (object-relational mapping).
Composer:
A composer is a tool, incorporates all the dominions and libraries. It enables
auser to generate a project concerning the specified framework (for instance,
those adopted in Laravel installation). Third party libraries can be installed
efficiently with the help of composer. Laravel tutorial for beginners step by step
guide you with all the provinces which are noted in a composer.json file placed
in the source folder.
Artisan: Command line interface utilized in Laravel is named Artisan. It
comprises a collection of commands which aids in developing a web
application. These commands are consolidated from the Symphony framework,
appearing in add-on hallmarks in Laravel 5.1 (latest version of Laravel).

Features of Laravel:

• Class Auto loading


• IOC container
• Migration
• Query builder
• Artisan console
• Database Seeding
• Unit-Testing
• Application Logic
• Automatic Pagination
• Form Pagination
• Restful Controllers
• Reverse Routing
• The Eloquent ORM
• View Composers
• Form request
• Bundles
Laravel – Installation:

The top crucial part to install laravel on windows is requirements that demandthe
proper workflow of the framework. You need to fulfil the condition mentioned
below before establishing the Laravel framework.
1.PHP &gt;= 5.6.4

2.OpenSSL PHP Extension


3.Tokeniser PHP Extension
4.Mbstring PHP Extension
5.XML PHP Extension
6.PDO PHP Extension
For handling dependencies, Laravel applies composer. You need to be sure that
you have a Composer installed on your system before you install Laravel on
windows. In this section, you will understand the installation process of Laravel.
You will need to comprehend the measures given below for installing Laravel
onto your system.

Laravel Application Structure :

The application structure in Laravel is the composition of folders, sub-


foldersplus files involved in a project. Once we construct a project in Laravel,
we perceive an overview of the application structure.
Laravel App Directory:
• App
• Console
• Events
• Exceptions
• Http
• Job

You might also like