S.NO DATE PROGRAM NAME PAGE NO SIGNATURE
1
Calculator
2 Factorial
3 Fibonacci Series
4 Prime Number
5 Semantics
6 Different Styles
7 Validation
8 Adding Multimedia
9 Formatting Tag
10 Style Sheet
11 Table Tag
12 Links
13 Input Controls
14 Sum Of Digits
15 Number Of Words
16 Image Maps
Ex no : 1 Date :
CALCULATOR
Aim:
To demonstrate the calculator program.
Program :
<html>
<body> <script>
const operator = prompt('Enter operator to perfome the calculation(either+,-,* or/):'); const number1 = parseFloat(prompt('Enter the first number:')); const number2 = parseFloat(prompt('Enter the second number:')); let result; if(operator =='+')
{
result = number1+number2;
}
else if(operator =='-')
{ result = number1-number2;
}
else if(operator =='*')
{ result = number1*number2;
} else
{
result=number1/number2;
}
window.alert("Result is"+result);
</script>
</body>
</html>
OUTPUT :
Result :
The given program is executed successfully.
Ex no : 2 Date :
FACTORIAL
Aim:
To demonstrate the factorial program.
Program :
<html>
<body style="text align:center;font-size:20px;">
<h1>welcome to department of BCA</h1> <h1>FACTORIAL NUMBER</h1>
enter the number:<input id="num">
<br><br>
<button onclick="fact()">factorial</button>
<p id="res"></p> <script> function fact()
{ var i,num,f; f=1;
num=document.getElementById("num").value; for(i=1;i<=num;i++)
{ f=f*i;
document.getElementById("res").innerHTML="the factorial of the number"+ i +"is:" +f;
}
}
</script>
</body>
</html>
Output :
Result :
The given program is executed successfully…
Ex no : 3 Date :
FIBONACCI SERIES
Aim:
To demonstrate the fibonacci program.
Program :
<html>
<head>
<title>Fibonacci Series in Javascript</title>
</head>
<body> <script>
var n1 = 0, n2 = 1, next_num, i;
var num=parseInt(prompt("Enter the limit for Fibonacci Series")); document.write("Fibonacci series:"); for(i=1;i<=num;i++)
{
document.write(" <br> " + n1); next_num=n1+n2; n1=n2; n2=next_num;
}
</script>
</body>
</html>
OUTPUT:
Result :
The given program is executed successfully…
Ex no : 4 Date :
PRIME NUMBER
Aim:
To demonstrate the prime number program.
Program :
<html >
<head>
<title>Prime Numbers between 1 and 100</title>
</head>
<body>
<h1>Prime Numbers between 1 and 100</h1>
<ul id="primeList"></ul>
<script> function isPrime(num)
{ if (num <= 1) return false; if (num <= 3) return true;
if (num % 2 === 0 || num % 3 === 0) return false;
for (let i = 5; i * i <= num; i += 6)
{
if (num % i === 0 || num % (i + 2) === 0) return false; } return true; }
function displayPrimesInRange(start, end)
{
let primeList = document.getElementById("primeList"); for (let i = start; i <= end; i++)
{ if (isPrime(i)) {
let listItem = document.createElement("li"); listItem.textContent = i; primeList.appendChild(listItem);
}
}
}
displayPrimesInRange(1, 100);
</script>
</body>
</html>
OUTPUT:
Result :
The given program is executed successfully…
Ex no : 5 Date :
SEMANTICS
Aim:
To demonstrate the semantics program.
Program :
<html>
<body>
<article>
<h2>Today's highlights</h2>
<p>department of IT Got3 University Ranks</p>
<p>Success Meet-War Teach 2k24</p>
<p>First Year gotover All championship</p>
</article>
<h2>My Last year memories</h2>
<p>/ have visited pairs with my friends last month.this was the memorable journey and;wish to go there again.</P>
<aside>
<h4>pairs</h4>
<p>pairs,Fraces capital,is a major european city and a global center for fasion,gastrononry and culturce</p>
</aside>
<h2>web designing tutorial </h2>
<section>
<h3>HTML</h3>
<p>HTML is an acronym which stands for Hyper Text Markup Language whish is used for creating web pages and web applications.</p>
</section>
<section>
<h3>css</h3>
<p>css stands for cascading style sheets.it is a style sheet language which is used to describe the look and formatting of a document wrriten in markup language it provaide an addiotional feature to HTML.</p>
</section>
<nav>
<a href="https://www.javatpoint.com/html-tutorial">HTML</a>
<a href="https://www.javatpoint.com/java-titorial">JAVA</a>
<a href="https://www.javatpoint.com/php-titorial">PHP</a>
</nav>
<header>
<h1>welcome to into teach</h1>
<nav>
<ul>
<li>Home/</li>
<li>About us/</li>
<li>Contact us </li>
</ul>
</nav>
</header>
<footer>
<p>@ copyright 2024.All sights served.</p>
<footer>
</body>
</html>
Output :
Result :
The given program is executed successfully…
6
DIFFERENT STYLES
To demonstrate the different styles program.
Program :
<html>
<head> <style> body {
background-color: lavender; text-align: center;
} h2 { font-style: italic; font-size: 30px; color: #080808;
}
p.blue { color: blue;
}
p.red { color: red;
}
p.green { color: green; }
</style> </head>
<body>
<h3 style="color:red; font-style:italic; text-align:center; font-size:50px;
padding-top:25px;">Learning HTML using Inline css</h3>
<h2>Learning HTML with internal css</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>
Output :
Result :
The given program is executed successfully…
7
VALIDATION
To demonstrate the validation program.
Program :
<html>
<head>
<title>Registration Form</title>
<script>
function validateForm()
{
var name = document.myform.name.value; var password = document.myform.password.value; if(name == null || name === "")
{
alert("Name can't be blank"); return false;
}
if(password.length < 6) {
alert("Password must be at least 6 characters long"); return false;
}
}
</script>
</head>
<body>
<form name="myform" method="post" action="https://saasc10.com/" onsubmit="return validateForm()">
Name: <input type="text" name="name"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Register">
</form> </body>
</html>
Output :
8
ADDING MULTIMEDIA
To demonstrate the Adding multimedia program.
Program :
<html>
<head>
<title>Multimedia Webpage</title>
</head>
<body>
<h1>My Multimedia Webpage</h1>
<h3>Image</h3>
<img src="new.jpg" alt="new.jpg" height="400px" width="400px">
<br>
<h3>Video</h3>
<video controls>
<source src="car.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br>
<h3>Audio</h3>
<audio controls>
<source src="my-audio.mp3" type="audio/mpeg"> Your browser does not support the audio tag.
</audio>
<br>
<h3>YouTube Video Embed</h3>
<iframe width="560" height="315" src="https://youtube.com/shorts/VATHDIChgwI?si=9ICc9wOgVvhviNv_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted- media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3>External Webpage Embed</h3>
<iframe src="https://wdpilot.microsoft.com/" width="800" height="600"></iframe>
<br>
<h3>Download Option</h3>
<p>
<a href="my-document.pdf" download>Download PDF</a> </p>
</body>
</html> Output :
9
FORMATTING TAG
To the Formatting tags program.
Program :
<html>
<head>
<title>Text Formatting</title>
<style> body
{ text-align: center;
}
</style>
</head>
<body>
<h3><u>Text Formatting</u></h3>
The text is <p>paragraph</p><br>
The text is <pre>pre formatting</pre><br>
The text is <b>Bold</b><br>
The text is <i>Italic</i><br>
The text is <u>Underline</u><br>
The text is <big>Big</big><br>
The text is <small>small</small><br> The text is <em>Emphasis</em><br> The text is <strike>strike</strike><br>
The text is <h1>heading</h1><br>
</body>
</html>
Output :
10
STYLE SHEET
To the Style sheet program.
Program :
<html>
<head><title>style sheet</title>
<link rel="style sheet"href=" "style.csstype="text/css">
</head>
<body>
<div class="heading"></div>
<ul>
<li><a>Home</a></li> <li><a>About</a></li>
<ul>
<li><a>Achivement</a></li>
<li><a>Awarels</a></li>
<li><a>HOD message</a></li>
<ul>
<li><a>BSC</a></li>
<li><a>MSC</a></li>
<li><a>PHD</a></li>
</ul>
<li><a>Contact</a></li>
<ul>
<li><a>Map</a></li>
<li><a>Direction</a></li>
</ul>
<li><a>News</a></li>
</ul>
<br><br><br><br>
<dl>
<dt>information technology</dt>
<dd>IT department offers,under graduate,post graduate and research program in various discipline</dd>
<br><br>
</dl>
<h4>VISION OF THE DEPARTMENT<h4>
<ol>
<li>center of excellence</li>
<li>innovation researcher</li>
</ol>
<h4>MISSON OF THE DEPARTMENT</h4>
<ol type=i>
<li> To Enhance Students soft,personality and facilitate the student research by perfossional knowledge</li>
</ol>
</body>
</html> Output :
Result :
The given program is executed successfully…
11
STUDENT INFORMATION SYSTEM USING TABLE TAG
To the Table tag program.
Program :
<html>
<head> <style> table {
border-collapse:collapse; width:60%;
} th,td{ border:1px solid#ddd padding:8px;
text-align:left;
} th{
background-color:#f2f2f2
}
</style> </head>
<body>
<h1> STUDENT INFORMATION SYSTEM</h4>
<h3 Dept.of IT</h3>
<table>
<tr>
<th>Roll number</th>
<th>student name</th>
<th>class</th>
</tr>
<tr>
<td> 01 </td>
<td>Amutha</td>
<td> I year</td>
<tr>
<td> 02 </td>
<td> Nisha</td>
<td>I year</td>
</tr>
<td> 03 </td>
<td> Afra</td>
<td> I year</td>
</tr>
</table>
<h2>SPORTS</h2>
<table>
<tr>
<th colspan="2">UNIVERSITY PLAYERS</th>
</tr>
<tr>
<td rowspan="3">vollyball</td>
<td>kavitha</td>
</tr>
<tr>
<td>anusha</td>
</tr>
<tr>
<td>ambika</td>
</tr>
<tr>
<td rowspan="3">Football</td>
<td>shalini</td>
</tr>
<tr>
<td>deepika</td>
</tr>
<tr>
<td>yasika</td>
</tr>
</table>
</body>
</html> Output :
Result :
The given program is executed successfully…
12
LINKS
To design a web pages with links to different pages and allow navigation b/w web pages.
Program :
<html>
<head>
<title>Navigation Example</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<main>
<h2>Home Page</h2>
<p>Welcome to our website. This is the home page.</p>
</main>
</body>
</html>
Output :
Result :
The given program is executed successfully…
13
INPUT CONTROLS
To design a web pages with form that uses all type of input controls Program :
<html>
<head>
<title>Form with Input Controls</title>
</head>
<body>
<form>
<label for="text">Text Input:</label>
<input type="text" id="text" name="text" placeholder="Enter text here"><br>
<label for="email">Email Input:</label>
<input type="email" id="email" name="email" placeholder="Enter email here"><br>
<label for="password">Password Input:</label><input type="password" id="password" name="password" placeholder="Enter password here"><br>
<label for="number">Number Input:</label>
<input type="number" id="number" name="number" placeholder="Enter number here"><br>
<label for="date">Date Input:</label>
<input type="date" id="date" name="date"><br>
<label for="select">Select Control:</label>
<select id="select" name="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option> <option value="option3">Option 3</option>
</select><br>
<label for="textarea">Textarea:</label><br>
<textarea id="textarea" name="textarea" rows="4" placeholder="Enter text here"></textarea><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output :
Result :
The given program is executed successfully…
14
SUM OF DIGITS
To the sum of digit program.
Program :
<html>
<head>
<title>Sum of Digits</title>
</head>
<body>
<h2>Sum of Digits Calculator</h2>
<input type="text" id="numberInput" placeholder="Enter a number">
<button onclick="calculateSum()">Calculate</button>
<p id="result"></p> <script> function calculateSum()
{
let inputNumber = document.getElementById("numberInput").value; let sum = 0;
for (let digit of inputNumber) { sum += parseInt(digit) || 0;
}
document.getElementById("result").textContent = "Sum of digits: " + sum;
}
</script>
</body>
</html>
Output :
Result :
The given program is executed successfully…
15
NUMBER OF WORDS
To an accept a number from the user and display the number of words in it program. (Do not use split() function).
Program :
<html>
<head>
<title>Word Counter</title>
</head>
<body>
<h1>Word Counter</h1>
<label for="sentence">Enter a sentence:</label>
<input type="text" id="sentence">
<button onclick="countWords()">Count Words</button>
<p id="wordCount"></p>
<script>
function countWords() {
var sentence = document.getElementById("sentence").value.trim(); var wordCount = 0; var isWord = false;
for (var i = 0; i < sentence.length; i++) { if (sentence[i] !== ' ' && !isWord) { wordCount++; isWord = true;
} else if (sentence[i] === ' ') { isWord = false;
}
}
document.getElementById("wordCount").innerText = wordCount;
}
</script>
</body>
</html>
Output :
Result :
The given program is executed successfully…
16
IMAGE MAPS
To an accept a number from the user and display the number of words in it program. (Do not use split() function).
Program :
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<img src="file:///D:/kayal/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="file:///D:/kayal/mac.jpg">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="file:///D:/kayal/cellphone.jpg">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="file:///D:/kayal/coffeehouse2.jpg">
</map>
</body>
</html>
Output :
Result :
The given program is executed successfully…
Comments
Post a Comment