1
Ex.No.1 HTML Basic Text Formatting Tags
Aim: To Write a HTML code to display welcome text using different text formatting tags.
Program:
<!DOCTYPE html>
<html>
<head>
<title> Text Formatting </title>
</head>
<body>
<h1>Welcome</h1>
<h2>Welcome</h2>
<h3>Welcome</h3>
<p color=”red”>Welcome</p>
<b> Welcome</b>
<br>
<i> Welcome</i>
<br>
<u> Welcome</u>
<br>
<strike> Welcome</strike> <br> <mark> Welcome</mark>
<br>
Superscript <sup>Welcome</sup>
Subscript <sub>Welcome</sub>
<br>
<tt> Welcome</tt>
<br>
<small>Welcome</small>
<br>
<div>Welcome</div>
<pre>
Welcome with space
</pre>
</body>
</html>
Result: Thus to write a HTML code to display welcome text using different text formatting
tags was executed successfully.
2
Ex.No.2 Computer Language Tutorial Web page using Lists and Links
Aim: To design a HTML page to list the computer languages where each language is
a link.
Program:
<html>
<body>
The famous Programming languages are
<ol>
<li> <a href="C.html" > C Program </a>
<li> <a href ="Java.html" > JAVA </a>
<li> <a href="Python.html" > PYTHON </a>
</ol>
</body>
</html>
C.html
<html>
<body>
C is a procedural programming language
</body>
</html>
Java.html
<html>
<body>
Java is an Object oriented Language.
</body>
</html>
Python.html
<html>
<body>
Python is a dynamic language
</body>
</html>
3
Ex.No.3 Image as a Link to the web page
Aim: To Write a HTML program to display the image of a computer as a link to
the web page describing the components of computers.
Program:
<html>
<body>
<a href="Computer.html" target=”_blank”>
<img src="computer.jpg" alt="Computer Image">
</a>
<p>Click the image to learn about the components of a
computer</p>
</body>
</html>
Computer.html
<html>
<body>
<p>Computer has </p>
Input Devices- Keyboard, Mouse, Scanner
Output Devices- Monitor, Speaker, Printer
Processing Device -CPU
</body>
</html>
4
Ex.No.4 Timetable using Internal Style Sheets
Aim: To develop a web page using CSS to create a timetable for the class
using different border styles.
Program:
<html>
<head>
<style>
table
{
border-collapse: collapse;
background-color:pink;
}
th, td
{
padding: 10px;
border: 1px solid #ccc;
text-align:center;
color:brown;
}
</style>
</head>
<body>
<table>
<caption> Fourth Semester Time Table </caption>
<tr>
<th> Days </th>
<td> 9.00 -10.00 </td>
<td> 10.00 - 11.00</td>
<td> 11.00 - 12.00 </td>
<td> 12.00 - 1.00 </td>
<td> 1.00 - 2.00 </td>
</tr>
5
<tr>
<th> Day1</th>
<td> DLD</td>
<td> WD </td>
<td> OS</td>
<td ROWSPAN =5> BREAK</td>
<td> RDBMS</td>
</tr>
<tr>
<th> Day 2</th>
<td> WD</td>
<td> CP</td>
<td> RDBMS </td>
<td> OS</td>
</tr>
<tr>
<th> Day 3</th>
<td> WD PRACTICAL</td>
<td>DLD</td>
<td> CP </td>
<td> RDBMS</td>
</tr>
</table>
</body>
</html>
Ex.No.5 College Website Using External Style Sheets
Aim: To design a webpage of your college with attractive background color,
text-color, font-face, an image by using external CSS formatting.
6
Program:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>GOVERNMENT POLYTECHNIC COLLEGE,
GANDHARVAKOTTAI</h1>
<img src="college.jpg" alt="GPTC GKT">
<p>Welcome to GPTC, GKT</p>
<h2>Courses Offered</h2>
<ul>
<li>DME</li>
<li>DCE</li>
<li>DEEE</li>
<li>DECE</li>
<li> D.Comp</li>
</ul>
</body>
</html>
style.css:
h1
{
color: blue;
}
body
{
background-color: pink;
color: red;
}
ul
{
color:green;
}
7
Ex.No.6 Clock using Javascript Date Object
Aim: To write a JavaScript program to create a clock in 24 hours format using
Date Object.
Program:
<html>
<body>
<div id="new_clock"></div>
<script>
function updateClock()
{
var time= new Date();
var hours = time.getHours();
hours = hours < 10 ? '0' + hours : hours;
var minutes = time.getMinutes();
minutes = minutes < 10 ? '0' + minutes : minutes;
var seconds = time.getSeconds();
seconds = seconds < 10 ? '0' + seconds : seconds;
var clock= hours + ':' + minutes + ':' + seconds;
document.getElementById('new_clock').textContent = clock;
}
setInterval(updateClock, 1000);
</script>
</body>
</html>
Ex.No.7 HTML Media tags
Aim: To write a JavaScript program to control (play, pause, stop) the audio/video in a web
page.
8
Program:
<html>
<head>
<title>Audio/Video Control</title>
</head>
<body>
<video id="myVideo" width="400" height="300" >
<source src="your_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br>
<button id="playButton" onclick="playFunction()">Play</button>
<button id="pauseButton"
onclick="pauseFunction()">Pause</button>
<button id="stopButton" onclick="stopFunction()">Stop</button>
<script>
function playFunction()
{
myVideo.play();
}
function pauseFunction()
{
myVideo.pause();
}
function stopFunction()
{
myVideo.currentTime = 0;
myVideo.pause();
}
</script>
</body>
</html>
9
Ex.No.8 Change the color of a web page using JavaScript
Aim: To write a JavaScript program to change the color of a web page to the color typed
by the user in the text box.
Program:
<html>
<head>
<title>Change Page Color</title>
</head>
<body>
<input type="text" id="colorInput" placeholder="Enter a color
name">
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor()
{
var colorName =
document.getElementById("colorInput").value.toLowerCase();
document.body.style.backgroundColor = colorName;
}
</script>
</body>
</html>
Result:
Thus the Javascript program to change the color of a web page was executed successfully.
Ex.No.9 Simple calculator using Javascript
10
Aim: To Write a JavaScript program to develop a simple calculator (with basic arithmetic
operations like add, subtract, multiply, divide, equal to) by getting two` numbers in two text
boxes, buttons for operations and display the result in the third text box.
Program:
<html>
<head>
<title>Simple Calculator</title>
</head>
<body>
<div >
<h2>Simple Calculator</h2>
<input type="number" id="num1" >
<br>
<br>
<input type="number" id="num2" >
<br>
<br>
<input type="button" value="+" onclick="add()">
<br>
<input type="button" value="-" onclick="subtract()">
<br>
<input type="button" value="*" onclick="multiply()">
<br>
<input type="button" value="/" onclick="divide()">
<br>
<br>
<input type="text" id="result" readonly>
</div>
<script>
function add()
{
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var result = num1 + num2;
document.getElementById('result').value = result;
}
11
function subtract()
{
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var result = num1 - num2;
document.getElementById('result').value = result;
}
function multiply()
{
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var result = num1 * num2;
document.getElementById('result').value = result;
}
function divide()
{
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var result = num1 / num2;
document.getElementById('result').value = result;
}
</script>
</body>
</html>
Result:
Thus the Javascript program to develop a calculator was executed successfully.
Ex.No.10 Form Validation
Aim:
To Create a form with text fields such as username, mail id, password, retype
password, gender (radio), languages known (check box), Describe yourself (textarea),
submit button and perform form validation such as username must not be less than 8
characters, mail id should contain @ symbol, password and retype password must be the
same.
Program:
12
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<div>
<h2>Registration Form</h2>
<form onsubmit="return validateForm()">
Username: <input type="text" id="username" >
<br>
Email ID: <input type="email" id="email" required>
<br>
Password: <input type="password" id="pwd" required>
<br>
Retype Password:<input type="password" id="rpwd" >
<br>
Gender:
<br>
<input type="radio" id="male" name="gender"
value="male" required>
<label>Male</label>
<input type="radio" id="female" name="gender"
value="female">
<label >Female</label>
<br>
Languages Known:
<br>
<input type="checkbox" id="english" value="English">
<label>English</label>
<input type="checkbox" id="spanish" value="Spanish">
<label >Spanish</label>
<input type="checkbox" id="french" value="French">
<label >French</label>
<br>
Address <textarea required ></textarea>
<br>
<button type="submit">Submit</button>
</form>
13
</div>
<script>
function validateForm()
{
var username = document.getElementById("username").value;
var password = document.getElementById("pwd").value;
var retypePassword = document.getElementById("rpwd").value;
if (username.length < 8)
{
alert( "Username must be at least 8 characters long.\n");
return false;
}
if (password !== retypePassword) {
alert( "Passwords do not match.\n");
return false;
}
return true;
}
</script>
</body>
</html>
Result:
Thus the Javascript program for form validation was executed successfully.
