Scribd
Upload
9 views

Web design manual-printout

The document contains a series of HTML and JavaScript exercises aimed at teaching basic web development skills. Each exercise includes a specific aim, program code, and a result statement confirming successful execution. Topics covered include text formatting, lists, links, images, CSS styling, JavaScript functionalities like clocks, media control, color change, calculators, and form validation.

Uploaded by

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

Web design manual-printout

The document contains a series of HTML and JavaScript exercises aimed at teaching basic web development skills. Each exercise includes a specific aim, program code, and a result statement confirming successful execution. Topics covered include text formatting, lists, links, images, CSS styling, JavaScript functionalities like clocks, media control, color change, calculators, and form validation.

Uploaded by

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

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.

You might also like