HTML Assignment

Assignment
HTML,CSS and JavaScript
Name : Dhwanit A. Vibhani

Roll no: 1183
Divison: C
Course : M.Sc. IT First Year Semester-2
Answer-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Commerce Courses</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="11">Commerce</td>
<td rowspan="7">UG</td>
<td>Com. Plain</td>
</tr>
<tr>
<td>Com. Tourism & Travel Mgmt.</td>

</tr>
<tr>
<td>Com. Office Mgmt & Sec. Practice</td>
</tr>
<tr>
<td>Com. Insurance Management</td>
</tr>
<tr>
<td>Com. Tax Procedure & Practice</td>
</tr>
<tr>
<td>Com. Advertising, Sales Pro. & S. M.</td>
</tr>
<tr>
<td>Com. Computer Application</td>
</tr>
<tr>
<td rowspan="4">PG</td>
<td>M. Com. Accounts</td>
</tr>
<tr>
<td>M. Com. Management</td>
</tr>
<tr>
<td>Com. Accounts</td>
</tr>
<tr>
<td>Com. Management</td>
</tr>
</table>
</body>
</html>
Answer-2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student Registration Form</title>
<style>
body{
font-size: 20px;
}
</style>
</head>
<body>
<fieldset>
<legend> <h2>Student Registration Form</h2></legend>
<form action="#" method="POST">
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" placeholder = "Enter your
name..." required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder = "Enter your
e-mail..." required><br><br>
<label for="pass">Pass-Word:</label>
<input type="password" id = "pass" name ="pass" placeholder = "Enter your
pass_word..." required></input><br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required><br><br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male" checked
required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<label for="address">Address:</label><br>
<textarea id="address" name="address" placeholder = "Start here ..."
required></textarea><br><br>
<label for="course">Select Course:</label>

<select id="course" name="course" required>

<option value="It">I.T.</option>
<option value="Engineering">Engineering</option>
<option value="Medical">Medical</option>
<option value="Business">Business</option>
<option value="Arts">Arts</option>
</select><br><br>
<input type="submit" value="Submit">

<input type="reset" value="Reset">
</form>
</fieldset>
</body>
</html>
Answer-3
<!DOCTYPE html>
<html lang="en">
<head>
<title>Order-Unorder-List</title>
<style>
</style>
</head>
<body>
<ol>
<li> Animals </li>
</ol>
<ul>
<li>Cow</li>
<li>Cat</li>
<li>Lion</li>
</ul>
<ol type="1" start="2">
<li> Colors</li>
</ol>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
</body>
</html>
Answer-4
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
<style>
body {
font-size: 18px;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
padding: 8px;
text-align: left;
font-weight: bold;
}
th{
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>
Community
</th>
<th>
Male
</th>
<th>
Female
</th>
</tr>
<tr>
<td>OBC</td>
<td>35</td>
<td>40</td>
</tr>
<tr>
<td>SC/ST</td>
<td>23</td>
<td>12</td>
</tr>
<tr>
<td>GEN</td>
<td>12</td>
<td>10</td>
</tr>
</table>
</body>
</html>
Answer-5
Page with Background Image
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:C:\Users\hp\Downloads\browser-1666982_1280.png;
background-size: cover;
}
</style>
</head>
<body>
</body>
</html>
Page with Hyperlink
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Page</title>
</head>
<body>
<a href="background.html">Go to Image Program</a>
</body>
</html>
Answer-6
<!DOCTYPE html>
<html lang="en">
<head>
<title>Department Courses</title>
<style>
body {
font-size: 18px;
}
table {
/* border-collapse: collapse; */
width: 100%;
}
td {
padding: 8px;
text-align: left;
}
th{
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table border = 2>

<tr>
<th rowspan="2">S. No.</th>
<th rowspan="2">Department Names</th>
<th colspan="2">Courses</th>
</tr>
<tr>
<th>UG</th>
<th>PG</th>
</tr>
<tr>
<td>1</td>
<td><a href="#">Computer Science</a></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>2</td>
<td><a href="#">Maths</a></td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>3</td>
<td><a href="#">Chemistry</a></td>
<td >No</td>
<td>Yes</td>
</tr>
<tr>
<td>4</td>
<td><a href="#">Commerce</a></td>
<td>Yes</td>
<td>Yes</td>
</tr>
</table>
</body>
</html>
Answer-7
<!DOCTYPE html>
<html>
<head>
<title>Multi-Section Layout</title>
<style>
.section {
margin: 10px;
padding: 10px;
}
#physics {
height: 100px;
}
#welcome {
height: 200px;
}
#maths {
width: 300px;
display: inline-block;
vertical-align: top;
}
#chemistry {
width: 400px;
}
#computer {
width:600px;
}
</style>
</head>
<body>
<div id="physics" class="section">
<p style="font-size:40pt;color:green">Physics.html</p>
</div>
<div id="welcome" class="section">
<p style="font-size:80pt;color:green;">Welcome.html</p>
</div>
<div id="maths" class="section">
<p style="font-size:30pt;color:green">Maths.html</p>
</div>
<div id="chemistry" class="section">
<p style="font-size:45pt;color:green">Chemistry.html</p>
</div>
<div id="computer" class="section">
<p style="font-size:30pt;color:green">Computer.html</p>
</div>
</body>
</html>
Answer-8
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Favorite Teacher</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<style>
body {
background-color: antiquewhite;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.left img{
width : 300px;
height: 200px;
}
.container {
display: flex;
justify-content: space-around;
}
.left, .right {
width: 45%;
padding: 20px;
}
.left h1 {
color : red;
}
.vertical-line {
border-left: 2px solid black;
height: 100vh;
}
.right img {
max-width: 100%;
height: auto;
}
</style>
<body>
<div class="container">
<div class="left">
<img src="p1.PNG" alt="back">
<h1><u>My Favorite Teacher</u></h1>
<h2> Shri S.K AACHARYA

was My Favorite Teacher he is a good teacher who is very popular in our school.
He
commands respect from most of the students with the exception of a few wicked
and
idle boys. He is widely acclaimed as a good teacher since he does not inflict severe
punishment even on the dull boys. His method of teaching is systematic and
convincing that makes some sense even for dull and idle students. Though he
teaches us English and Mathematics, he has knowledge in almost all subjects. He
never hankers after cheap popularity nor does he ever preach one practice which
he
himself cannot practice. His open mindedness and staunch opposition to any act
of
injustice are the features to be admired by teachers and students as well. His
popularity is never lowered in the estimation of the public also.
</h2>
</div>
<div class="vertical-line"></div>
<div class="right">
<h2> His dealings are excellent. His knowledge in English and mathematics
is vast since
he is well-read and has a vast knowledge. He has parental care and affection for
all
of us and he sees that we are proper in our behaviour and are progressing in our
studies.
We enjoy his teachings and he makes his classes very interesting by citing
examples
from day to day happenings and from books outside our courses. He stimulates us
to
make our activities greater. He is always loving and affectionate and never a
tyrant
or a hard hearted one.
As regards his extracurricular activities he is ahead of others in our school. He is a
fluent speaker and a good story writer. We are full of praise for his worthiness.
The
skill in teaching has made him a lovable teacher for us in the school.</h2>
</body>
</html>
Answer-9
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sum of Two Numbers</title>
</head>
<script>
function calculateSum() {
var num1 = parseInt(document.getElementById('num1').value);
var num2 = parseInt(document.getElementById('num2').value);
var sum = num1 + num2;
document.getElementById('result').innerHTML = "Sum: " + sum;
}
</script>
<body>
<input type="text" id="num1" placeholder="Enter first number"><br><br>

<input type="text" id="num2" placeholder="Enter second number"><br><br>
<button onclick="calculateSum()">Calculate Sum</button>
<p id="result"></p>
<script src="script.js"></script>
</body>
</html>
Answer-10
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline CSS Example</title>
</head>
<body>
<p style="font-family: Arial, sans-serif; font-size: 24px; color: blue; font-weight:

bold;">This text is styled using inline CSS.</p>
<p style="font-family: 'Times New Roman', serif; font-size: 18px; color: green;
font-style: italic;">This text is styled using inline CSS.</p>
<p style="font-family: Verdana, Geneva, sans-serif; font-size: 20px; color: red;

text-decoration: underline;">This text is styled using inline CSS.</p>
</body>
</html>
Answer-11
<!DOCTYPE html>
<html>
<head>
<title>Signup Form</title>
<script>
function validateForm() {
var username = document.forms["signupForm"]["username"].value;
var password = document.forms["signupForm"]["password"].value;
if (username == "") {
alert("Username must be filled out");
return false;
}
if (password.length < 6) {
alert("Password must be at least 6 characters long");
return false;
}
}
</script>
</head>
<body>
<h2>Signup Form</h2>
<form name="signupForm" action="/submit-your-form" onsubmit="return

validateForm()" method="post">
Username: <input type="text" name="username">
<br><br>
Password: <input type="password" name="password">
<br><br>
</form>
</body>
</html>
Answer-12
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="p11.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph on my website.</p>
</body>
</html>
CSS File
body {
background-color: #f0f0f0;
}
h1 {
background-color: #007bff;
color: #ffffff;
padding: 20px;
text-align: center;
}
p{
background-color: #28a745;
color: #ffffff;
padding: 10px;
text-align: center;
}
Answer-13
<!DOCTYPE html>
<html>
<head>
<title>Compare Two Integers</title>
<script>
function displayLarger() {
var num1 = parseInt(prompt("Enter the first integer:", ""));
var num2 = parseInt(prompt("Enter the second integer:", ""));
if (!isNaN(num1) && !isNaN(num2)) {

if (num1 > num2) {
document.getElementById("result").innerHTML = "The larger integer is: "
+ num1;
} else if (num2 > num1) {
document.getElementById("result").innerHTML = "The larger integer is: "
+ num2;
} else {
document.getElementById("result").innerHTML = "Both integers are
equal.";
}
} else {
document.getElementById("result").innerHTML = "Please enter valid
integers.";
}
}
</script>
</head>
<body>
<h2>Find the Larger Integer</h2>

<button onclick="displayLarger()">Click to enter integers</button>
<p id="result"></p>
</body>
</html>
Answer-14
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student Registration Form</title>
</head>
<body>
<h2>Student Registration Form</h2>
<form>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required><br><br>
<label for="lastName">Last Name:</label>

<input type="text" id="lastName" name="lastName" required><br><br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label><br><br>
<label for="city">City:</label>
<input list="cities" id="city" name="city">
<datalist id="cities">
<option value="New York">
<option value="Los Angeles">
<option value="Chicago">
<option value="Houston">
<option value="Phoenix">
<option value="Philadelphia">
<option value="San Antonio">
<option value="San Diego">
<option value="Dallas">
<option value="San Jose">
</datalist><br><br>
<label for="address">Address:</label><br>
<textarea id="address" name="address" rows="4"
cols="50"></textarea><br><br>
<label for="course">Course:</label>
<select id="course" name="course">
<option value="Engineering">Engineering</option>
<option value="Business">Business</option>
<option value="Medicine">Medicine</option>
<option value="Arts">Arts</option>
</select><br><br>
<label for="agree">Agree to Terms:</label>

<input type="checkbox" id="agree" name="agree" required><br><br>

</form>
</body>
</html>
Answer-15
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
<script>
function onClickEvent() {
document.getElementById("clickResult").innerHTML = "Button was clicked!";
}
function onMouseMoveEvent() {
document.getElementById("moveResult").innerHTML = "Mouse is moving over
this text!";
}
</script>
</head>
<body>
<h2>JavaScript Events</h2>
<button onclick="onClickEvent()">Click Me</button>

<p id="clickResult"></p>
<p onmousemove="onMouseMoveEvent()">Move your mouse over this text.</p>
<p id="moveResult"></p>
</body>
</html>
Answer-16
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML with Linked CSS</title>
<link rel="stylesheet" type="text/css" href="16.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p class="Arial">This is a paragraph styled with class "Arial".</p>
</body>
</html>
CSS file
h1 {
color: red;
font-family: Arial, sans-serif;
}
p.Arial {
background-color: gray;
}

HTML Assignment

Uploaded by

Copyright:

Available Formats

HTML Assignment

Uploaded by

Document Information

Original Title

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

HTML Assignment

Uploaded by

Copyright:

Available Formats

Assignment

HTML,CSS and JavaScript

Name : Dhwanit A. Vibhani

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<td>Com. Tourism & Travel Mgmt.</td>

<td>Com. Office Mgmt & Sec. Practice</td>

<td>Com. Insurance Management</td>

<td>Com. Tax Procedure & Practice</td>

<td>Com. Advertising, Sales Pro. & S. M.</td>

<td>Com. Computer Application</td>

<td>M. Com. Accounts</td>

<td>M. Com. Management</td>

<label for="course">Select Course:</label>

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

<table border = 2>

<h2> Shri S.K AACHARYA

<input type="text" id="num1" placeholder="Enter first number"><br><br>

<p style="font-family: Arial, sans-serif; font-size: 24px; color: blue; font-weight:

<p style="font-family: Verdana, Geneva, sans-serif; font-size: 20px; color: red;

<form name="signupForm" action="/submit-your-form" onsubmit="return

<p>This is a paragraph on my website.</p>

if (!isNaN(num1) && !isNaN(num2)) {

<h2>Find the Larger Integer</h2>

<h2>Student Registration Form</h2>

<label for="lastName">Last Name:</label>

<label for="agree">Agree to Terms:</label>

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

<button onclick="onClickEvent()">Click Me</button>

<p class="Arial">This is a paragraph styled with class "Arial".</p>

You might also like