Scribd
Upload
13 views

WT Coverpage

Uploaded by

subbu081104
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

WT Coverpage

Uploaded by

subbu081104
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

S.D.M.

E Society’s

SDM COLLEGE OF ENGINEERING AND TECHNOLOGY,


DHARWAD-580002

(AFFILIATED TO VISVESVARAYA TECHNOLOGICAL UNIVERSITY)


DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND
MACHINE LEARNING

REPORT ON

INTRODUCTION TO WEB TECHNOLOGY


LABORATORY

Under the guidance of

Dr. LEENA I SAKRI


Department of Artificial Intelligence and Machine Learning

SUBMITTED BY,
Name USN
S Subash 2SD23AI041
Vaishnavi K N 2SD23AI059
3rd Semester B.E. Academic Year 2024-25
Table of Contents
Sl.n Name of the program Pg.n
o. o
1 Student Detail Box
2 Form for Light Bulb Shopping
3 Registration Form
4 Webpage using CSS
5 Display Date
6 Factorial
7 Multiplication Table
8 Sun of N numbers
9 Countries and their Capital
10 Simple Calculator
11 Square & Cubes
12 Text Growing and Text Shrinking
13 HTML Page – Ordered Lists & Hyper Links
14 Time Table
15 Lowercase and Uppercase Converter
16 National Park Booking form
17 Accessories Order Form
18 Text Colour Changer
19 Adding Event Listener
20 Removal Of Event Listener
21 Railway Passenger Details
1. Design a webpage by giving details of your [Name, Age],[Register Number, Class],
[Address, Phone Number] which are aligned in a proper order using alignment attribute
of paragraph tag.

<html>
<body>
<style>
.container {
margin: 20px;
padding: 20px;
border: 3px solid black;
}
</style>
<div class="container">
<h1>MY DETAILS ARE</h1>
<center>Name:PRIYA</center>
<center>AGE:20</center>
<p align="left">Register number:0123456789</p>
<p aling ="left">class:'A'</p>
<p align ="right">Adress:hubli</p>
<p align ="right">Phone number:9876543210</p>
</body>
</html>

OUTPUT :
2. Create, test, and validate an HTML document that has a form with the following controls:
a. A text box to collect the user’s name b. Four checkboxes, one each for the following
items: i. Four 25-watt light bulbs for $2.39 ii. Eight 25-watt light bulbs for $4.29 iii. Four
25-watt long-life light bulbs for $3.95 iv. Eight 25-watt long-life light bulbs for $7.49 c.
A collection of three radio buttons that are labeled as follows: i. Visa ii. Master Card iii.
Discover
<html>
<head>
<title>HTML DOCUMENT</title>
</head>
<body>
<div>
<label> USER NAME</label>
<input type="text"id="" name="user-name">
</div>
<h1> </h1>
<p>
<input type="checkbox" value="ab1" name="choose">
<label>four 100-watt light bulbs for $2.39</label>
<input type="checkbox" value="ab2" name="choose">
<label>eight 100-watt light bulbs for $4.29</label>
<input type="checkbox" value="ab3" name="choose">
<label>four 100-watt, long-life light bulbs for $3.95</label>
<input type="checkbox" value="ab4" name="choose">
<label>eight 100-watt, long-life light bulbs for $7.49</label>
<div>
<h1> </h1>
<input type="radio" value="" name ="payment">visa
<input type="radio" value="" name ="payment">master card
<input type="radio" value="" name ="payment">discover
</div>
<h1> </h1>
<div class="button">
<button type="SUBMIT">SUBMIT</button>
</body>
</html>

OUTPUT
3. Create a “REGISTRATION FORM” with the following fields: i) Name(text
field) ii) Password(password field) iii) Email-ID(text field) iv) Phone
Number(text field) v) Address(textarea field) vi) Gender(radiobutton) vii)
Date of Birth viii) 4 Language Known(checkbox). Language
Known(checkbox).

<!DOCTYPE html>
<html>

<body>
<body style="background-color: aqua">
<h2 style="text-align:center;">REGISTRATION FORM</h2>
<form>
<div>
<label> Name</label>
<input type="text"id="" name="user-name">
</div>
<h2> </h2>
<div>
<label> Password</label>
<input type="password"id="" name="user-name">
</div>
<h2> </h2>
<div>
<label>Email </label>
<input type="text"id="" name="user-name">
</div>
<h2> </h2>
<div>
<label> Phn number</label>
<input type="text"id="" name="user-name">
</div>
<h2> </h2>
<div>
<label> adress</label>
<textarea name="Address" rows="3" cols="40">
</textarea>
</div>
<h2> </h2>
<p>
Gender
<input type="radio" name="Gender" />
<label>Male</label>
<input type="radio" name="Gender" />
<label>Female</label>
</p>
<h2> </h2>
<p>
Date of Birth:
<input type="date" />
</p>
<h2> </h2>
<p>
Language
<input type="checkbox" name=" " />
<label>English</label>
<input type="checkbox" name=" " />
<label>Hindi</label>
<input type="checkbox" name=" " />
<label>Kannada</label>
</p>
</html>

OUTPUT :

4. Aim: Design a web page using CSS which includes the following: 1) Use
different font repeat and no-repeat property 3) Define style for links as
a: link, a: active, a: hover, a: visited 4) Add customized cursors for
Develop and demonstrate the usage of inline, internal and external
style sheet using CSS. Aim: Design a web page using CSS which
includes the following: 1) Use different font styles 2) Control the
repetition of image with background Define style for links as a: link, a:
active, a: hover, a: visited 4) Add custom links.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Property Example</title>
<style>
body {
background-color: green; /* Fallback color */
background-image: url("file:///D:/paint%20files/Screenshot
%202024-08-29%20114054.png"); /* Encoded local file path */
background-repeat: repeat;
background-position: right;
color: white; /* Text color for visibility */
}
</style>
</head>
<body>
<h1>Welcome to the Background Property in CSS</h1>
</body>
</html>

OUTPUT :

5. Click on Display Date button using onclick( ) function Output: Display


date in the textbox

<!DOCTYPE html>
<html>
<body>
<center>
<input type="text" id="dateBox" readonly>
<div>
<button onclick="displayDate()">Display Date</button>
</div>
</center>
<script>
function displayDate() {
document.getElementById('dateBox').value = new
Date().toLocaleDateString();
}
</script>
</body>
</html>

OUTPUT :

6. A number n obtained using prompt Output: Factorial of n number


using alert

<!DOCTYPE html>
<html>
<head>
<title>Factorial</title>
</head>
<body onload="calculate()">
<script>
function calculate() {
let n = prompt("Enter a positive number:")
if (n > 0) {
let f = 1
for (let i = 1; i <= n; i++) f *= i
alert("The factorial of " + n + " is " + f)
} else {
alert("Invalid input")
}
}
</script>
</body>
</html>

OUTPUT :

7. Input: A number n obtained using prompt Output: A multiplication table


of numbers from 1 to 10 of n using alert

<!DOCTYPE html>
<html>
<head>
<title>Multiplication Table</title>
<body onload="showTable()">
<script>
function showTable() {
let n = prompt("Enter a number:");
let output = "";
for (let i = 1; i <= 10; i++) {
output += n + " x " + i + " = " + (n * i) + "\n";
}
alert(output);
}
</script>
</head>

</html>

OUTPUT :

8.

You might also like