Web Technology Practicals

INDEX
Practical Description Sign

No.
1. To create a simple html file to demonstrate the use of different tags.  Design your
Bio-Data in given format (sample image on next page).
o Background Color- #ADD8E6 o Whole content should be center aligned
o Heading – use H1 tag o Sub Heading Background Color ="#228B22"
o Sub Heading color – yellow o Sub Heading should be bold and italic.
o Sub Heading Font face- Arial o Sub Heading font size – Default +1
o Image Border = "2" o size - width="150" height="150"
o Horizontal line under sub heading
o Mark the important content with yellow highlight.
2. To create a registration form as mentioned below. Procedure: Create an html page
named as “registration.html”
Username- textbox (min and max length)
Password- textbox (min and max length)
Email - textbox (valid emailed)
State- Selection box (atleast one value selected)
Gender- radio button (atleast one value selected)
Hobbies- checkbox (atleast one value selected)
Mobile no- (min and max length, no. Only)
3. To create an html file by applying the different styles using inline, external &
internal style sheets.
4. Write a code to: 1) Create CSS3 blurry text effect 2) Create a CSS3 based button 3)
Use CSS3 to make an image rounded shape 4) Style first letter and first line. 5) Style
first and the last element 6) Style the element which is not empty 7) Set style for link
hover active and visited states of hyperlink 8) Style placeholder text
5. Write a JavaScript program to Input Number by Textbox And Check Number Is
Armstrong Number or Not Using Javascript.
6. To create an html page to demonstrate exception handling in javascript
7. Write a code to convert Lowercase to Uppercase.
8. To create an html page to change the background colour for every click of a button
using javascript
9. To create a html page to display a new image & text when the mouse comes over the
existing content in the page.
10. To create html registration form (same as created in practical-2) and to validate the
form using javascript code
Practical No. 01
To create a simple html file to demonstrate the use of different tags.
Design your Bio-Data in given format (sample image on next page).
o Background Color- #ADD8E6 o Whole content should be center aligned
o Heading – use H1 tag o Sub Heading Background Color ="#228B22"
o Sub Heading should be bold and italic. o Sub Heading font size – Default +1
o Sub Heading color – yellow o Sub Heading Font face- Arial
o Mark the important content with yellow highlight. o Image Border = "2"
o Horizontal line under sub heading o size - width="150" height="150".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body bgcolor="#ADD8E6">
<table width="800" border="0" align="center" cellpadding="5">
<tr>
<td colspan="2"> <center><h1><u>BIO-DATA</h1></u></center></td>
<td rowspan="10"><img src="C:\Users\never\Downloads\WhatsApp Image 2022-11-14
at 11.45.10 AM (1).jpeg" BORDER = "2" width="150" height="150"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#228B22"><b><i><font size ="+1" face="arial"
color = "yellow">Basic Info</font></i></b><hr/></td>
</tr>
<tr>
<td width="50%" align="right"><b>Name:</b></td>
<td>Archit Srivastava</td>
</tr>
<tr>
<td align="right">Father's Name:</td>
<td>Mr. Anil Kumar Srivastava</td>
</tr>
<tr>
<td align="right">Age:</td>
<td>20 Years</td>
</tr>
<tr>
<td align="right">Date of Birth:</td>
<td>3<sup>rd</sup>JANUARY 2003</td>
</tr>
<tr>
<td align="right">Religion:</td>
<td>Hindu</td>
</tr>
<tr>
<td align="right">Nationality:</td>
<td>Indian</td>
</tr>
<tr>
<td colspan="2"bgcolor="#228B22"><b><i><font size ="+1" face="arial" color =
"yellow">Contact Details</i></b><hr/></td>
</tr>
<tr>
<td align="right" valign="top">Address:</td>
<td>Vill :- Uprahitan Purwa, Janki Nagar</br>
Post :- Gonda,</br>
Dist :- Gonda</td>
</tr>
<tr>
<td align="right" valign="top">Phone Number:</td>
<td>9369592385</td>
</tr>
<tr>
<td align="right">Email Address:</td>
<td>neverrest15@gmail.com</td>
</tr>
<tr>
<td align="right">My Website:</td>
<td>https://elastic-fermi-4af2f8.netlify.app/</td>
</tr>
<tr>
<td colspan="2"bgcolor="#228B22"><font size ="+1" face="arial" color =
"yellow"><b><i>Education & Knowledge</i></b><hr/></td>
</tr>
<tr>
<td align="right" valign="top">Language:</td>
<td><ul><li>English</li>
<li>Hindi</li>
</ul>
</td>
</tr>
<tr>
<td align="right">Education:</td>
<td>
<table border="1" align="center">
<tr>
<th>Qualification</th>
<th>Board/University</th>
<th>College/School</th>
<th>Percentage</th>
</tr>
<tr>
<td align="center">Diploma</td>
<td align="center">BTEUP</td>
<td align="center">GPL</td>
<td align="center">75%</td>
</tr>
<tr>
<td align="center">12<sup>th</sup></td>
<td align="center">CBSE</td>
<td align="center">SRVP</td>
<td align="center">79%</td>
</tr>
<tr>
<td align="center">10<sup>th</sup></td>
<td align="center">CBSE</td>
<td align="center">SRVP</td>
<td align="center">9.0 CGPA</td>
</tr>
</table></td>
</tr><tr>
<td align="right">Skills:</td>
<td>Web Designing, C++, Python </td>
</tr><tr>
<td align="right">Hobbies:</td>
<td><ol type="i">
<li>Listening Music</li>
<li>Reading Books</li>
<li>Playing Sports</li></ol></td>
</tr>
<tr>
<td colspan="2" bgcolor="#228B22"><font size ="+1" face="arial" color =
"yellow"><b><i>Area Of Interest & Co-curricular activities:</i></b><hr/></td>
</tr>
<tr>
<td colspan="2"><ul type="circle">
<li>Actively involved in the college symposiums and college cultural
festivals as an organizing member.</li>
<li>Winning various awards in academic career in different fields.</li>
<li>Having set of communication and analytical skills.</li>
</ul >
</td>
</tr>
<td colspan="2" bgcolor="#228B22"><font size ="+1" face="arial" color =
"yellow"><b><i>About Me</i></b><hr/></td>
</tr>
<tr>
<td colspan="2"><p>I am currently pursuing my BTECH in Information Technology
from BIET,Jhansi. I am a learner person.<hr/</p></td>
</tr>
</table>
</body>
</html>
Practical No. 02
To create a registration form as mentioned below. Procedure: Create an html
page named as “registration.html”
Username- textbox (min and max length)
Password- textbox (min and max length)
Email - textbox (valid emailed)
State- Selection box (atleast one value selected)
Gender- radio button (atleast one value selected)
Hobbies- checkbox (atleast one value selected)
Mobile no- (min and max length, no. Only)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>registration form</title>
</head>
<body onLoad="document.registration.username.focus();">
<form name='registration' action = "welcome.html" onSubmit="return formValidation();">
<label for=”username”> User name:
<input type="text" name="username" placeholder="user name" />
</label> <br /><br />
<label for=”pass”> Password :
<input type="password" name="pass" placeholder="password" /> </label ><br /><br />
<label for=”gender”> Gender : <input type="radio" name="gender" checked="m" />Male
<input type="radio" name="gender" />Female </label ><br /><br />
<label>Mobile no:
<input type="text" name="mob no" placeholder="Mobile no" maxlength="10” />
</label><br /><br />
<label>State :
<select name="state">
<option value="dist">--select--</option>
<option value="state">Uttar Pradesh</option>
<option value="state">Madhya Pradesh</option>
</select> </label><br /><br />
<label for=”email”>Email Address :
<input type="text" name="email" placeholder="Email" /> </label><br /><br />
<label> Hobbies: <input type="checkbox" name="hobby" checked />Reading Novel
<input type="checkbox" name="hobby" />Playing chess </label ><br /><br />
</form>
</body>
</html>
Output :-
Practical No. 03
To create an html file by applying the different styles using inline, external &
internal style sheets.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS linking</title>

<link rel="stylesheet" href="style.css">

<style>
.internal-para{
color: rgb(21, 231, 25);
border: 5px solid rgb(156, 182, 41);
margin-top: 40px;
}
</style>
</head>
<body>

<p style="color: red; border: 5px solid blue;">Lorem ipsum dolor sit amet consectetur
adipisicing elit. </p>
<p class="internal-para">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="external-para">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</body>
</html>
Output :-
Practical No. 04
Write a code to:
1) Create CSS3 blurry text effect
2) Create a CSS3 based button
3) Use CSS3 to make an image rounded shape
4) Style first letter and first line.
5) Style first and the last element
6) Style the element which is not empty
7) Set style for link hover active and visited states of hyperlink
8) Style placeholder text
1)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<style>
.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
</style>
<p class="blurry-text">Blurred Text Effect</p>
</body>
</html>
2)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<style>
.button {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #2980b9;
}
</style>
<a href="#" class="button">Click Me</a>
</body>
</html>
3)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<style>
.rounded-image {
border-radius: 50%;
}
</style>
<img src="image.jpg" alt="Rounded Image" class="rounded-image">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<style>
p::first-letter {
font-size: 150%;
font-weight: bold;
}
p::first-line {
text-transform: uppercase;
}
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
4)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<style>
ul li:first-child {
color: red;
}
ul li:last-child {
color: blue;
}
</style>
<ul>
<li>First Item</li>
<li>Middle Item</li>
<li>Last Item</li>
</ul>
</body>
</html>
5)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<style>
p:not(:empty) {
background-color: lightyellow;
}
</style>
<p>This paragraph has content.</p>

<p></p>
</body>
</html>
6)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<style>
a:link {
color: blue;
}
a:hover {
color: red;
}
a:active {
color: green;
}
a:visited {
color: purple;
}
</style>
<a href="#">Link</a>
</body>
</html>
7)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<style>
::placeholder {
color: gray;
font-style: italic;
}
</style>
<input type="text" placeholder="Enter your name">
</body>
</html>
8)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<a href="first.html" target="_blank">Create CSS3 blurry text effect</a>
<br>
<a href="second.html" target="_blank">Create a CSS3 based button</a>

<br>
<a href="third.html" target="_blank">Use CSS3 to make an image rounded shape</a>
<br>
<a href="fourth.html" target="_blank">Style first letter and first line</a>
<br>
<a href="fifth.html" target="_blank">Style first and the last element</a>
<br>
<a href="sixth.html" target="_blank">Style the element which is not empty </a>
<br>
<a href="seventh.html" target="_blank">Set style for link hover active and visited states of
hyperlink </a>
<br>
<a href="eight.html" target="_blank">Style placeholder text</a>
<br>
</body>
</html>
Output :-
Practical No. 05
Write a JavaScript program to Input Number by Textbox And Check Number
Is Armstrong Number or Not Using Javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Armstrong</title>
<script type="text/javascript">
function checkArmstrong()
{
var number,temp,d,sum = 0;
number = document.getElementById("number").value;
temp = number;
while(temp > 0)
{
d = temp%10;
sum = sum + d*d*d;
temp = parseInt(temp/10);
}
if(sum == number)
{
alert("The inputed number " +number+ " is Armstrong
number");
}
else
{
alert("The inputed number " +number+ " is not Armstrong
number");
}
}
</script>
</head>
<body>
<input type="text" name="Enter the number" id="number">
<input type="button" value="Check Armstrong" onclick="checkArmstrong()">
</body>
</html>
Output :-
Practical No. 06
To create an html page to demonstrate exception handling in javascript
<!DOCTYPE html>
<html>
<head>
<title>Exception Handling in JavaScript</title>
</head>
<body>
<h1>Exception Handling in JavaScript</h1>
<p>Enter two numbers below to divide:</p>
<input type="text" id="num1" placeholder="Enter number 1">
<input type="text" id="num2" placeholder="Enter number 2">
<button onclick="divide()">Divide</button>
<p id="result"></p>
<script>
function divide() {
// Get the two numbers entered by the user
let num1 = parseFloat(document.getElementById("num1").value);
let num2 = parseFloat(document.getElementById("num2").value);
// Try to divide the two numbers
try {
if (isNaN(num1) || isNaN(num2)) {
throw "One or both of the inputs is not a number";
}
if (num2 === 0) {
throw "Cannot divide by zero";
}
let result = num1 / num2;
document.getElementById("result").innerHTML = "Result: " +
result;
}
// Catch any exceptions that occur during the division
catch(error) {
document.getElementById("result").innerHTML = "Error: " +
error;
}
}
</script>
</body>
</html>
Output :-
Practical No. 07
Write a code to convert Lowercase to Uppercase.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lower to Upper</title>
<script type="text/javascript">
function lower_to_upper(){
var ch = document.getElementById("char").value;
var a = ch.toUpperCase();
document.getElementById("char").value = a;
}
</script>
</head>
<body>
<input type="text" value="" id="char" placeholder="Enter the string">
<input type="button" value="Convert" onclick="lower_to_upper()">
</body>
</html>
Output :-
Practical No. 08
To create an html page to change the background colour for every click of a
button using javascript.
<!DOCTYPE html>
<html>
<head>
<title>Change Background Color</title>
<style>
body {
background-color: white;
}
</style>
<script>
function changeColor() {
var colors = ["red", "green", "blue", "yellow", "purple", "orange"];
var body = document.getElementsByTagName("body")[0];
var currentColor = body.style.backgroundColor;
var index = colors.indexOf(currentColor);
var nextColor = index < colors.length - 1 ? colors[index + 1] : colors[0];
body.style.backgroundColor = nextColor;
}
</script>
</head>
<body>
<h1>Change Background Color</h1>
<button onclick="changeColor()">Change Color</button>
</body>
</html>
Output :-
Practical No. 09
To create a html page to display a new image & text when the mouse comes
over the existing content in the page.
<!DOCTYPE html>
<html>
<head>
<title>Image Hover Example</title>
<style>
/* Style for the existing content */
#existing-content {
width: 300px;
height: 200px;
background-color: lightgray;
text-align: center;
padding: 50px;
font-size: 24px;
cursor: pointer;
}
/* Style for the new content */
#new-content {
display: none;
width: 300px;
height: 200px;
background-color: lightblue;
text-align: center;
padding: 50px;
font-size: 24px;
}
</style>
</head>
<body>
<div id="existing-content">
Hover over me!
</div>
<div id="new-content">
<img src="https://picsum.photos/300/200" alt="New Image" />
<p>New Text</p>
</div>
<script>
var existingContent = document.getElementById("existing-content");
var newContent = document.getElementById("new-content");
existingContent.addEventListener("mouseover", function() {
existingContent.style.display = "none";
newContent.style.display = "block";
});
newContent.addEventListener("mouseout", function() {
existingContent.style.display = "block";
newContent.style.display = "none";
});
</script>
</body>
</html>
Output :-
Practical No. 10
To create html registration form (same as created in practical-2) and to
validate the form using javascript code.
function formValidation()
{
var uname = document.registration.username;
var passid = document.registration.pass;
var ugender = document.registration.gender;
var ustate = document.registration.state;
var umobno = document.registration.mobno;
var uemail = document.registration.email;
var uhobbies = document.registration.hobby;
if( allLetter(uname) == true && umobno_validation(umobno) == true &&

passid_validation(passid,7,12) == true && countryselect(ucountry) == true &&
hobbiesselect(uhobbies) == true && ValidateEmail(uemail) == true && validgender() == true)
{
return true;
alert("submitted");
}
else
{
return false;
}
}
function umobno_validation(umobno)
{
Var number=/^[0-9]+$/;
var uid_len = umobno.value.length;
if (umobno.value.notmatch(number) || uid_len !=10)
{
alert("User mob no should not be empty / should have numeric character only);
uid.focus();
return false;
}
return true;
}
function passid_validation(passid,mx,my)
{
var passid_len = passid.value.length;
if (passid_len == 0 ||passid_len >= my || passid_len < mx)
{
alert("Password should not be empty / length be between "+mx+" to "+my);
passid.focus();
return false;
}
return true;
}
function allLetter(uname)
{
var letters = /^s[A-Z a-z]+$/;
var space =" ";
if(uname.value.match(letters))
{
return true;
}
else
{
alert('Username must have alphabet characters only');
uname.focus();
return false;
}
}
function stateselect(ucountry)
{
if ( ustate.selectedIndex == 0 )
{
alert('Select your state from the list');
ustate.focus();
return false;
}
else
{
return true;
}
}
function ValidateEmail(uemail)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
uemail.focus();
return false;
}
}
function validgender()
{
var gender = document.registration.gender;
if ( ( document.registration.gender[0].checked == false ) && (
document.registration.gender[1].checked == false ) )
{
alert ( "Please choose Gender: Male or Female" );
return false;
}
return true;
}
Function hobbiesselect(uhobbies){
If(document.registration.hobby[0].checked==false ||
document.registration.hobby[1].checked==false){
alert(“please select atleast one hobby”);
return false;
}
else{
return true;
}
}
Output:-

Web Technology Practicals

Uploaded by

Copyright:

Available Formats

Web Technology Practicals

Uploaded by

Document Information

Original Description:

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

Web Technology Practicals

Uploaded by

Copyright:

Available Formats

INDEX

Practical Description Sign

7. Write a code to convert Lowercase to Uppercase.

<p class="blurry-text">Blurred Text Effect</p>

<a href="#" class="button">Click Me</a>

<img src="image.jpg" alt="Rounded Image" class="rounded-image">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>This paragraph has content.</p>

<input type="text" placeholder="Enter your name">

<a href="second.html" target="_blank">Create a CSS3 based button</a>

if( allLetter(uname) == true && umobno_validation(umobno) == true &&

You might also like