Scribd
Upload
32 views23 pages

Web Practicals 1

The document contains multiple HTML solutions for various web design tasks, including creating headings, text formatting, navigation links, CSS types, lists, tables, registration forms, and simple calculators. Each section provides a complete HTML structure with embedded CSS and JavaScript functionalities. The tasks demonstrate fundamental web development concepts and practices.

Uploaded by

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

Web Practicals 1

The document contains multiple HTML solutions for various web design tasks, including creating headings, text formatting, navigation links, CSS types, lists, tables, registration forms, and simple calculators. Each section provides a complete HTML structure with embedded CSS and JavaScript functionalities. The tasks demonstrate fundamental web development concepts and practices.

Uploaded by

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

Practical Questions

such as bold, italic, and underline.


SOLUTION:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heading Tags & Text Formatting</title>
</head>
<body>

<h1>This is H1 Heading</h1>
<h2>This is H2 Heading</h2>
<h3>This is H3 Heading</h3>
<h4>This is H4 Heading</h4>
<h5>This is H5 Heading</h5>
<h6>This is H6 Heading</h6>

<p>This is a <b>bold</b> text.</p>


<p>This is an <i>italic</i> text.</p>
<p>This is an <u>underlined</u> text.</p>
<p>This is a <b><i><u>bold, italic, and underlined</u></i></b> text.</p>

</body>
</html>
Design a web page using different HTML tags like

a) body, background, font size, font color, paragraph, and division.

b) Use Formating text.

c) Alignment

SOLUTION:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Web Page</title>
</head>
<body bgcolor="lightgray">

<h1 align="center">Welcome to My Web Page</h1>

<p>
<b>This is a bold text.</b>
</p>
<p>
<i>This is italic text.</i>
</p>
<p>
<u>This is underlined text.</u>
</p>
<p>
<b><i><u>This is bold, italic, and underlined text.</u></i></b>
</p>
<hr>
<p align="left">
This paragraph is left-aligned.
</p>
<p align="center">
This paragraph is center-aligned.
</p>
<p align="right">
This paragraph is right-aligned.
</p>

<div style="background-color: lightblue; padding: 10px;">


<h2>Font Size & Color Example</h2>
<p style="font-size: 20px; color: blue;">
This text is blue with font size 20px.
</p>
<p style="font-size: 16px; color: green;">
This text is green with font size 16px.
</p>
</div>
<h2>Simple Form</h2>
<form>
Name: <input type="text"><br><br>
Email: <input type="email"><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>
Design a web page with links to different pages and allow navigation between them.
SOLUTION:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
</head>
<body bgcolor="lightgray">

<h1 align="center">Welcome to My Website</h1>

<p>Click on the links below to navigate to different pages:</p>

<a href="practical3(about).html">About Us</a> |


<a href="practical3(contact).html">Contact</a>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
</head>
<body bgcolor="lightblue">

<h1 align="center">About Us</h1>


<p>This is the About Us page.</p>

<a href="practical3(main).html">Go Back to Home</a>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
</head>
<body bgcolor="lightyellow">

<h1 align="center">Contact Us</h1>


<p>Email: [email protected]</p>

<a href="practical3(main).html">Go Back to Home</a>

</body>
</html>
Design a web page that demonstrates all style sheet types.
SOLUTION:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Types Demo</title>

<!-- Internal CSS -->


<style>
body {
background-color: lightgray;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
text-align: center;
}
.internal {
color: green;
font-size: 20px;
}
</style>

<!-- External CSS -->


<link rel="stylesheet" type="text/css" href="practical4.css">
</head>
<body>

<h1>Demonstrating All CSS Types</h1>

<!-- Inline CSS -->


<p style="color: red; font-size: 18px;">This paragraph is styled using Inline CSS.</p>

<!-- Internal CSS -->


<p class="internal">This paragraph is styled using Internal CSS.</p>

<!-- External CSS -->


<p class="external">This paragraph is styled using External CSS.</p>

</body>
</html>

.external {
color: purple;
font-size: 22px;
font-weight: bold;
}
Design a web page with ordered and unordered lists.

SOLUTION:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lists in HTML</title>
</head>
<body bgcolor="lightgray">

<h1 align="center">Ordered and Unordered Lists</h1>

<h2>Unordered List (Bullet Points)</h2>


<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grapes</li>
</ul>

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


<ol>
<li>Wake up</li>
<li>Brush your teeth</li>
<li>Have breakfast</li>
<li>Go to college</li>
</ol>

</body>
</html>
Design a web page using different table properties like padding, cell padding, and merging.

<!DOCTYPE html>
<html>
<head>
<title>Table Layout</title>
</head>
<body>

<table border="1" cellpadding="10px" cellspacing="3px">


<tr>
<th>Columu 1</th>
<th>Columu 2</th>
<th>Columu 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Registration form

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: orange; /* Full Background Color */
margin: 0;
padding: 0;
display: flex;
align-items: center;
height: 100vh;
}
.container {
width: 350px;

margin-left: 50px; /* Align to Left */


border-radius: 10px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
h2 {
text-align: center;
}
label {
font-weight: bold;
display: block;
margin-top: 10px;
}
input, select {
width: 100%;
padding: 5px;
margin-top: 5px;
border: 1px solid black;
}
.gender {
display: flex;
gap: 10px;
margin-top: 5px;
}
.btn {
display: block;
width: 100%;
padding: 8px;
background-color: lightgray;
border: 1px solid black;
cursor: pointer;
margin-top: 10px;
}
.btn:hover {
background-color: darkgray;
}
</style>
</head>
<body>

<div>
<h2>Student Registration Form</h2>
<p>Fill in this form to register</p>

<form>
<label>First Name</label>
<input type="text" placeholder="Enter your first name">

<label>Last Name</label>
<input type="text" placeholder="Enter your last name">

<label>E-mail</label>
<input type="email" placeholder="Enter your e-mail">

<label>Date of Birth</label>
<input type="date">

<label>Set Username</label>
<input type="text" placeholder="Set Username">

<label>Set Password</label>
<input type="password" placeholder="Set password">

<label>Gender</label>
<div class="gender">
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
<input type="radio" name="gender"> Others
</div>

<label>Course</label>
<select>
<option>Course</option>
<option>BSc IT</option>
<option>Engineering</option>
<option>Management</option>
</select>

<button type="submit" class="btn">Register</button>


</form>
</div>

</body>
</html>
Write a JavaScript Program to design a simple calculator.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<script>
function appendValue(value) {
document.getElementById("display").value += value;
}

function clearDisplay() {
document.getElementById("display").value = "";
}

function calculate() {
try {
document.getElementById("display").value =
eval(document.getElementById("display").value);
} catch (error) {
alert("Invalid Expression");
}
}
</script>

</head>
<body>

<h2>Simple Calculator</h2>

<input type="text" id="display" readonly>


<br><br>

<button onclick="clearDisplay()">C</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('+')">+</button>
<br><br>

<button onclick="appendValue('3')">3</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('-')">-</button>
<br><br>

<button onclick="appendValue('6')">6</button>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('*')">*</button>
<br><br>

<button onclick="appendValue('9')">9</button>
<button onclick="appendValue('0')">0</button>
<button onclick="calculate()">=</button>
<button onclick="appendValue('/')">/</button>

</body>
</html>
Using JavaScript, design a web page to accept a number from the user and print its Factorial.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Factorial Calculator</title>
</head>
<body>

<h2>Factorial Calculator</h2>

<label>Enter a number:</label>
<input type="number" id="numberInput">
<button onclick="calculateFactorial()">Calculate</button>

<p>Factorial: <span id="result"></span></p>

<script>
function calculateFactorial() {
let num = document.getElementById("numberInput").value;
let factorial = 1;

if (num < 0) {
document.getElementById("result").innerText = "Factorial not
defined for negative numbers";
return;
}

for (let i = 1; i <= num; i++) {


factorial *= i;
}

document.getElementById("result").innerText = factorial;
}
</script>
</body>
</html>
Write a program in JavaScript to accept a sentence from the user and display the number of words in

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Counter</title>
</head>
<body>

<h2>Word Counter</h2>

<label>Enter a sentence:</label>
<input type="text" id="sentenceInput">
<button onclick="countWords()">Count Words</button>

<p>Number of words: <span id="result"></span></p>

<script>
function countWords() {
let sentence = document.getElementById("sentenceInput").value;
let count = 0;
let inWord = false;

for (let i = 0; i < sentence.length; i++) {


let char = sentence[i];

if (char !== ' ' && char !== '\t' && char !== '\n') {
if (!inWord) {
count++;
inWord = true;
}
} else {
inWord = false;
}
}

document.getElementById("result").innerText = count;
}
</script>

</body>
</html>
Write a JavaScript program to display all the prime numbers between 1 and 100.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prime Numbers (1-100)</title>
</head>
<body>

<h2>Prime Numbers from 1 to 100</h2>

<button onclick="displayPrimes()">Show Prime Numbers</button>

<p id="result"></p>

<script>
function isPrime(num) {
if (num < 2) return false;
for (let i = 2; i <= num / 2; i++) {
if (num % i === 0) {
return false;
}
}
return true;
}

function displayPrimes() {
let primes = "";
for (let i = 1; i <= 100; i++) {
if (isPrime(i)) {
primes += i + " ";
}
}
document.getElementById("result").innerText = primes;
}
</script>

</body>
</html>
Write a JavaScript program that takes three numbers from the user and finds the smallest and
largest number using the Math.min() and Math.max() functions.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Find Smallest and Largest Number</title>
</head>
<body>

<h2>Find Smallest and Largest Number</h2>

<label>Enter first number:</label>


<input type="number" id="num1"><br><br>

<label>Enter second number:</label>


<input type="number" id="num2"><br><br>

<label>Enter third number:</label>


<input type="number" id="num3"><br><br>

<button onclick="findNumbers()">Find</button>

<p>Smallest Number: <span id="smallest"></span></p>


<p>Largest Number: <span id="largest"></span></p>

<script>
function findNumbers() {
let n1 = document.getElementById("num1").value;
let n2 = document.getElementById("num2").value;
let n3 = document.getElementById("num3").value;

let smallest = Math.min(n1, n2, n3);


let largest = Math.max(n1, n2, n3);
document.getElementById("smallest").innerText = smallest;
document.getElementById("largest").innerText = largest;
}
</script>

</body>
</html>

Write a JavaScript program that takes a number as a string input from the user and converts it into a
number using the Number object. Then, display its type before and after conversion.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String to Number Conversion</title>
</head>
<body>

<h2>Convert String to Number</h2>

<label>Enter a number (as text):</label>


<input type="text" id="numInput">
<button onclick="convertNumber()">Convert</button>

<p>Before Conversion: <span id="before"></span></p>


<p>After Conversion: <span id="after"></span></p>

<script>
function convertNumber() {
let input = document.getElementById("numInput").value;
let beforeType = typeof input; // Get type before conversion

let convertedNumber = Number(input); // Convert string to number


let afterType = typeof convertedNumber; // Get type after conversion

document.getElementById("before").innerText = input + " (Type: " + beforeType +


")";
document.getElementById("after").innerText = convertedNumber + " (Type: " +
afterType + ")";
}
</script>

</body>
</html>

You might also like