Scribd
Upload
66 views

WebDesign HTML CSS JS Practical Programs

The document contains code to create an HTML form to enter personal data including name, email, phone number, date of birth, gender, address, and submit buttons. The form uses input fields like text, email, tel, date, radio buttons for gender, and a textarea for address.

Uploaded by

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

WebDesign HTML CSS JS Practical Programs

The document contains code to create an HTML form to enter personal data including name, email, phone number, date of birth, gender, address, and submit buttons. The form uses input fields like text, email, tel, date, radio buttons for gender, and a textarea for address.

Uploaded by

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

Write a HTML program to design a from which should allow entering your personal data

<!DOCTYPE html>

<html>

<head>

<title>Personal Data Form</title>

</head>

<body>

<h1>Personal Data Form</h1>

<form action="">

Name: <input type="text" name="name" placeholder="Full Name"><br><br>

Email: <input type="email" name="email" placeholder="Email Address"><br><br>

Phone: <input type="tel" name="phone" placeholder="Phone Number"><br><br>

Date of Birth: <input type="date" name="dob"><br><br>

Gender:

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

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

Address: <textarea name="address" cols="30" rows="5"></textarea><br><br>

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

<input type="reset" value="Reset">

</form>

</body>

</html>

...............................................................................

create a simple HTML page with the title heading paragraph emphasize strong and image elements.

<html>

<head>

<title>My Page</title>

</head>
<body>

<h1>Welcome to My Page!</h1>

<p>My page is a collection of interesting things I find on the web.</p>

<p><em>Here I will share my favorite articles and photos.</em></p>

<p><strong>Come explore the amazing world of the web with me!</strong></p>

<img src="mypage.jpg" alt="My Page Picture">

</body>

</html>

....................................................................

Write a CSS style specification rule that would make all unordered lists(<ul> tags) have square bullets
and a purple background

In CSS file

ul {

list-style-type: square;

background-color: purple;

In the HTML page:

<ul style="list-style-type: square; background-color: purple;">

<li>List Item 1</li>

<li>List Item 2</li>

<li>List Item 3</li>

</ul>

...........................................................................

Write a javascript program to calculate multiplication and division of two numbers (input form user).

<script type="text/javascript">

// Ask the user to enter two numbers

var firstNumber = prompt("Please enter the first number:");

var secondNumber = prompt("Please enter the second number:");


// Convert the numbers to integers

firstNumber = parseInt(firstNumber);

secondNumber = parseInt(secondNumber);

// Calculate the multiplication and division

var multiplication = firstNumber * secondNumber;

var division = firstNumber / secondNumber;

// Output the results

alert("The multiplication of the two numbers is: " + multiplication);

alert("The division of the two numbers is: " + division);

</script>

<---------------------------------------->

<!DOCTYPE html>

<html>

<body>

<h2>Calculate Multiplication and Division of Two Numbers</h2>

<p>Please enter two numbers:</p>

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

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

<br><br>

<button onclick="calculateMulDiv()">Calculate</button>

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

<script>

function calculateMulDiv() {

var num1 = document.getElementById("num1").value;

var num2 = document.getElementById("num2").value;

var mulResult = num1 * num2;

var divResult = num1 / num2;


document.getElementById("result").innerHTML = "The multiplication result is " + mulResult + " and the
division result is " + divResult;

</script>

</body>

</html>

.............................................................................

Write a JavaScript program to find the largest of three given integers with HTML code

<!DOCTYPE html>

<html>

<head>

<title>Finding the Largest Integer</title>

</head>

<body>

<script>

function largestInteger(x, y, z) {

if (x > y && x > z) {

return x;

} else if (y > x && y > z) {

return y;

} else {

return z;

document.write(largestInteger(8, 7, 9));

</script>

</body>

</html>

.........................................................................
Write a JavaScript conditional statement to sort three numbers. display an alert box to show the result
with HTML page code

<html>

<head>

<script>

let num1 = 10;

let num2 = 8;

let num3 = 6;

if ((num1 >= num2) && (num1 >= num3)) {

alert("The biggest number is " + num1);

} else if ((num2 >= num1) && (num2 >= num3)) {

alert("The biggest number is " + num2);

} else {

alert("The biggest number is " + num3);

</script>

</head>

<body>

</body>

</html>

................................................................................

Create a web page of customer profile for data entry of customer's in a Hotal, The profile should include
Name,Address, Age, gender, Room Type (A/C, Non-A/C or Deluxe), Type of payment (cash, credit/debit
card or Coupons).

<html>

<head>

<title>Customer Profile</title>

</head>

<body>

<h1>Customer Profile</h1>
<form>

<label>Name:</label><input type="text"
name="name"/><br/><br/>

<label>Address:</label><input type="text"
name="address"/><br/><br/>

<label>Age:</label><input type="number"
name="age"/><br/><br/>

<label>Gender:</label>

<select name="gender">

<option value="male">Male</option>

<option value="female">Female</option>

</select><br/><br/>

<label>Room Type:</label>

<select name="roomtype">

<option value="ac">AC</option>

<option value="non-ac">Non-AC</option>

<option value="deluxe">Deluxe</option>

</select><br/><br/>

<label>Type of Payment:</label>

<select name="payment">

<option value="cash">Cash</option>

<option value="credit">Credit Card</option>

<option value="debit">Debit Card</option>

<option value="coupon">Coupons</option>

</select><br/><br/>

<input type="submit" value="Submit" />

</form>

</body>

</html>

.............................................................................
write a javascript function that checks whether a passed string is palindrome or not

function isPalindrome(str) {

var re = /[^A-Za-z0-9]/g;

str = str.toLowerCase().replace(re, '');

var len = str.length;

for (var i = 0; i < len/2; i++) {

if (str[i] !== str[len - 1 - i]) {

return false;

return true;

//Test the function

isPalindrome("A car, a man, a maraca"); // returns true

<-------------------------------------------------------->

<!DOCTYPE html>

<html>

<head>

<title>Palindrome Checker</title>

</head>

<body>

<h2>Palindrome Checker</h2>

<div>

<input type="text" placeholder="Enter text to check" id="inputString" />

<button type="button" id="checkButton" value="check">Check Now</button>

</div>
<h4>Result:</h4>

<div id="result"></div>

<script>

document.getElementById("checkButton").addEventListener("click", checkPalindrome);

function checkPalindrome(){

var str = document.getElementById("inputString").value;

var isPalindrome = true;

var i=0, j=str.length-1;

while(i<j){

if(str[i] != str[j]){

isPalindrome = false;

break;

i++;

j--;

if(isPalindrome){

document.getElementById("result").innerHTML = "The string is palindrome!";

}else{

document.getElementById("result").innerHTML = "The string is not palindrome!";

</script>

</body>

</html>

.............................................................................................

Write a java script program to find the factorial of given number

<html>
<head>

<title>Factorial Program</title>

</head>

<body>

<script type="text/javascript">

function factorial(num) {

if (num < 0)

return -1;

else if (num == 0)

return 1;

else {

return (num * factorial(num - 1));

var num = prompt("Enter a number: ");

var result = factorial(num);

alert("The factorial of " + num + " is: " + result);

</script>

</body>

</html>

............................................................................

create a web page illustrating text formatting tags

<html>

<head>

<title>Text Formatting Tags</title>

</head>

<body>
<h1>Text Formatting Tags</h1>

<p><strong>Bold</strong> text is used to emphasize a point. To make text <strong>bold</strong> you


can use the <strong>&lt;strong&gt;</strong> tag.</p>

<p><em>Italic</em> text is used to add emphasis to a point. To make text <em>italic</em> you can
use the <strong>&lt;em&gt;</strong> tag.</p>

<p>You can also <u>underline</u> text. To underline text you can use the <strong>&lt;u&gt;</strong>
tag.</p>

<p>Finally, you can also <strike>strike through</strike> text. To strike through text you can use the
<strong>&lt;strike&gt;</strong> tag.</p>

</body>

</html>

.....................................................................

create an html page with following specifications:

a. Title should be about Maa Jinwani college

b. put the image in the background

c. place Maa jinwani college name at the top of the page in large text followed by address in smaller size

d. Add names of courses offered each in a different color, style and typeface.

e. add scrolling text with a message of your choice

<!DOCTYPE html>

<html>

<head>

<title>Maa Jinwani College</title>

<style>

body {

background-image: url("college.jpg");

background-repeat: no-repeat;

background-size: cover;

}
h1 {

font-size: 50px;

text-align: center;

p{

font-size: 25px;

text-align: center;

ul{

list-style-type: none;

text-align: center;

ul li{

display: inline;

padding: 10px;

ul li a{

font-size: 30px;

text-decoration: none;

color: black;

.scrolling-text {

margin: 0 auto;

width: auto;
height: auto;

background-color: #F7A9A9;

text-align: center;

font-size: 30px;

padding: 8px;

white-space: nowrap;

overflow: hidden;

box-sizing: border-box;

animation: scroll 20s linear infinite;

@keyframes scroll {

0% {

transform: translate(0, 0);

100% {

transform: translate(-100%, 0);

</style>

</head>

<body>

<h1>Maa Jinwani College</h1>

<p>Address of college</p>

<ul>

<li><a href="">English</a></li>

<li><a href="">Science</a></li>

<li><a href="">Commerce</a></li>
<li><a href="">Maths</a></li>

</ul>

<div class="scrolling-text">Welcome to Maa Jinwani College. We aim to provide quality education to our
students.</div>

</body>

</html>

.....................................................................

Using Nested HTML tables create Pramod rathore Curriculum Vitae

<table>

<tr>

<th>Pramod Rathore</th>

</tr>

<tr>

<td>

<table>

<tr>

<th>Curriculum Vitae</th>

</tr>

<tr>

<td>

<table>

<tr>

<th>Personal Information</th>

</tr>

<tr>

<td>Name: Pramod Rathore</td>

</tr>
<tr>

<td>Address: #66 ABC Street, XYZ City</td>

</tr>

<tr>

<td>Phone: 1234567890</td>

</tr>

<tr>

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

</tr>

</table>

</td>

</tr>

<tr>

<td>

<table>

<tr>

<th>Education</th>

</tr>

<tr>

<td>B.Tech in Computer Science</td>

</tr>

<tr>

<td>University of XYZ, Year 2020</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>
<table>

<tr>

<th>Work Experience</th>

</tr>

<tr>

<td>Software Developer at ABC Corp. - August 2020 - Present</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<table>

<tr>

<th>Skills</th>

</tr>

<tr>

<td>Programming Languages: Java, Python, C#</td>

</tr>

<tr>

<td>Frameworks: Spring, Hibernate, React</td>

</tr>

<tr>

<td>Database: PostgreSQL, MySQL</td>

</tr>

</table>

</td>

</tr>

</table>
</td>

</tr>

</table>

..........................................................................

Using CSS invert the behavior of the <h1> to <6> tags.

<!DOCTYPE html>

<html>

<head>

<title>Style Inversion</title>

<style>

h1 {

font-size: 40px;

font-weight: bold;

h2 {

font-size: 35px;

font-weight: bold;

h3 {

font-size: 30px;

font-weight: bold;

h4 {

font-size: 26px;

font-weight: bold;

h5 {

font-size: 22px;

font-weight: bold;
}

h6 {

font-size: 18px;

font-weight: bold;

</style>

</head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Style Inversion</title>

<style>

h1 {

font-size: 18px;

font-weight: bold;

h2 {

font-size: 22px;

font-weight: bold;
}

h3 {

font-size: 26px;

font-weight: bold;

h4 {

font-size: 30px;

font-weight: bold;

h5 {

font-size: 35px;

font-weight: bold;

h6 {

font-size: 40px;

font-weight: bold;

</style>

</head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>

</html>

..........................................................................
create a sample code of illustrate the Inline style sheet for you web page.

<html>

<head>

<style type="text/css">

body {

background-color: #FFF;

font-family: sans-serif;

.main-div {

width: 600px;

margin: auto;

background-color: #F2F2F2;

padding: 10px;

h1 {

font-size: 20px;

color: #000000;

text-align: center;

padding: 5px;

p{

font-size: 14px;

color: #000000;

line-height: 20px;

padding: 10px;

</style>

</head>

<body>
<div class="main-div">

<h1>This is a heading</h1>

<p>This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>

</div>

</body>

</html>

...........................................................................

Create a sample code to illustrate the external style sheet for your web page.

<html>

<head>

<title>My Web Page</title>

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

</head>

<body>

<h1>External CSS style sheet</h1>

<p>This is my web page.</p>

</body>

</html>

/* style.css */

h1 {

font-size: 24px;

font-weight: bold;

color: #000000;

p{

font-size: 18px;
font-weight: normal;

color: #666666;

......................................................................

The End

You might also like