131 - GOVERNMENT POLYTECHNIC COLLEGE
ARIYALUR
Regulation-2023
1052233540-Web Designing
R. CHINNAA M.E
LECTURER/CSE
LIST OF EXPERIMENTS
PART - A
[Link]. EXPERIMENT
Write a HTML code to display welcome text using different text formatting tags.(Use
1
h1-h6, bold, italic, underline, strikethrough,div,p,pre tags)
Design a HTML page to list the computer languages where each language is a link.
2 Prepare separate HTML documents for each language and call them in the appropriate
link.
Write a HTML program to display the image of a computer as a link to the web page
3 describing the components of computers.
Develop a web page using CSS to create a timetable for the class using different border
4 style.
Design a webpage of your college with attractive background color, text-color, font-
5
face,an image by using external CSS formatting
PART - B
Write a JavaScript program to create a clock in 24 hours format using Date Object. (Do
6
not include AM/PM)
Write a JavaScript program to control (play, pause, stop) the audio/video in a web
7
page.
Write a JavaScript program to change the color of a web page to the color typed by the
8
user in the text box.
Write a JavaScript program to develop a simple calculator (with basic arithmetic
9 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.
Create a form with text fields such as username, mail id, password, retype
password,gender (radio), languages known (check box), Describe yourself (textarea),
10 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.
[Link] TEXT FORMATTING TAGS
DATE:
AIM
Write a HTML code to display welcome text using different text formatting tags using h1-h6,
bold, italic, underline, strikethrough,div,p,pre tags.
PROCEDURE:
1. Open Notepad
2. Type the html code.
3. Include title ”my first web page” in title tag.
4. Use different text formatting tags .
5. Go to file->save->save the file with html extension.
6. Run the html code using browser.
TAG DESCRIPTION:
TAGS DESCRIPTION
<HTML> Defines an HTML document
<body> Defines the document’s body
<h1>to<h6> Defines header 1 to header 6
<p> Defines a paragraph
<b> Make the text bold.
<i> Make the text italic
<u> Set the text underline
<strike> Defines a strike or line through Text
<title> Defines the document’s title
<div> Defines a division or a section in an HTML document.
PROGRAM:
[Link]
<html>
<head>
<title>Welcome Text with Formatting Tags</title>
</head>
<body>
<h1 style="color: red;">WELCOME</h1>
<h2>WELCOME</h2>
<h3>WELCOME</h3>
<h4>WELCOME</h4>
<h5>WELCOME</h5>
<h6>WELCOME</h6>
<p>
<strong>Bold text:</strong> This is <strong>bold text</strong>.
</p>
<p>
<em>Italic text:</em> This is <em>italic text</em>.
</p>
<p>
<u>Underlined text:</u> This is <u>underlined text</u>.
</p>
<p>
<s>Strikethrough text:</s> This is <s>strikethrough text</s>.
</p>
<div>
<p>Text inside a div element. </p>
</div>
<p>Paragraph with<pre>preformatted text</pre>inside a tag. </p>
</body>
</html>
OUTPUT:
RESULT
Thus, the program to display welcome text using different text formatting tags has been executed
successfully.
[Link].:2 DESIGN A HTML PAGE USING LINK
DATE:
AIM
Design a HTML page to list the computer languages where each language is a link.
Prepare separate HTML documents for each language and call them in the appropriate link.
PROCEDURE:
1. Open Notepad
2. Type the html code.
3. Include title ”second program” in title tag.
4. Use link tags for linking documents.
5. Go to file->save->save the file with html extension.
6. Run the html code using browser.
TAG DESCRIPTION:
TAGS DESCRIPTION
<ol> display elements in an ordered form, either numerical or alphabetical.
<li> define a list item
<ul> displays the elements in a bulleted format
<a> defines a hyperlink, which is used to link from one page to another.
<dl> defines the description list.
<dt> defines data term.
<dd> defines data definition (description).
PROGRAM
[Link]
<html>
<head>
</head>
<body >
<h1 style="text-align: center; color:red">List of Computer Languages</h1>
<hr size="3px" color="blue">
<ul>
<li><a href="[Link]">JavaScript</a></li>
<li><a href="[Link]">Python</a></li>
<li><a href="[Link]">Java</a></li>
</ul>
</body>
</html>
[Link]
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1>JavaScript</h1>
<hr size="2px" color="blue">
<p>JavaScript is a high-level, interpreted programming language
used to create interactive effects within web browsers.</p>
<p>
<a href="[Link]">Back to Languages List</a>
</p>
</body>
</html>
[Link]
<html>
<head>
<title>Python</title>
</head>
<body>
<h1>Python</h1>
<hr size="2px" color="blue">
<p>Python is an interpreted, high-level programming language known
for its readability and simplicity. It is widely used in various
applications including web development, data science, and automation.</p>
<p>
<a href="[Link]">Back to Languages List</a>
</p>
</body>
</html>
[Link]
<html>
<head>
<title>Java</title>
</head>
<body>
<h1>Java</h1>
<hr size="2px" color="blue">
<p>Java is a multi-platform, object-oriented, and network-centric
language that can be used as a platform in itself.</p>
<p>
<a href="[Link]">Back to Languages List</a>
</p>
</body>
</html>
OUTPUT:
RESULT
Thus, the web pages are created with links has been executed successfully.
[Link].: 3 DISPLAY THE IMGAE WITH LINK
DATE:
AIM
Write a HTML program to display the image of a computer as a link to the web page
describing the components of computers.
PROCEDURE:
1. Go to start ->all program – >accessories-> notepad.
2. Type the html code.
3. Include title ”third program” in title tag.
4. Use img and link tags for displaying image and linking documents.
5. Go to file->save->save the file with html extension.
6. Run the html code using browser.
TAG DESCRIPTION:
TAGS DESCRIPTION
<img> display image on the web page
<a> defines a hyperlink, which is used to link from one page to another.
hspace specifies the whitespace on left and right side of an image
vspace specify the number of whitespaces on bottom and top side of an image.
src specifies the URL of the image
PROGRAM:
<html>
<head>
<title>Components of Computer</title>
</head>
<body style="text-align: center; color:green">
<h1>Click below image to know components</h1>
<hr size="3px" color="darkblue">
<a href="[Link]
<img src="[Link]" alt="Computer Image"
style="width:350px;height:350px;"/></a>
</body>
</html>
OUTPUT
RESULT
Thus, the program to display the image of a computer as a link to the web
page hasbeen executed successfully.
[Link].: 4 TIME TABLE USING INLINE STYLESHEET
DATE:
AIM
Develop a web page using CSS to create a timetable for the class using different border style.
PROCEDURE:
1. Open notepad.
2. Type the html code
3. Include title” time table” in title tag.
4. Use table tags for creating time table.
5. Go to file->save->save the file with html extension.
6. Run the html code using browser.
TAG DESCRIPTION:
TAGS DESCRIPTION
<table> create table
<style> change the font-type, size and color of the page.
<tr> create horizontal rows of cells.
<th> define the heading of cells in the table.
<td> define the data of each cells in the table.
colspan specifies the number of columns a cell should span.
rowspan specifies the number of rows a cell should span
PROGRAM:
<html>
<head>
<style>
table {
border-collapse: collapse;
background-color: #ede3c7;
margin: auto;
font: 25px bold Arial;
}
.sub1 {
text-align: center;
}
td {
text-align: center;
align-items: center;
}
</style>
</head>
<body style="text-align: center;">
<h1>TIME TABLE</h1>
<hr size="3px" color="darkblue">
<table border="1">
<tr style="background-color: #c6d8f5";>
<th>Day/Hour</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>Monday</td>
<td>RD</td>
<td>WD</td>
<td>CP</td>
<td>DLD</td>
</tr>
<tr style="background-color: #c6d8f5">
<td>Tuesday</td>
<td>WD</td>
<td>CP</td>
<td>DLD</td>
<td>RD</td>
</tr>
<tr>
<td>Wednesday</td>
<td>[Link]</td>
<td>[Link]</td>
<td>WD</td>
<td>RD</td>
</tr>
<tr style="background-color: #c6d8f5">
<td>Thursday</td>
<td>LIB</td>
<td>CP</td>
<td>DLD</td>
<td>RD</td>
</tr>
<tr>
<td>Friday</td>
<td>RD</td>
<td>WD</td>
<td colspan="2" class="sub1">CP</td>
</tr>
</table>
</body>
</html>
OUTPUT:
RESULT
Thus, the program to create a timetable for the class using inline stylesheet has been
executed successfully.
[Link].: 5 COLLEGE WEB PAGE USING EXTERNAL STYLESHEET
DATE:
AIM
Design a webpage of your college with attractive background color, text-color, font-
face,an image by using external CSS formatting
PROCEDURE:
1. Open notepad.
2. Type the html code and css code.
3. Include title” college web page” in title tag.
4. Use font, color tags for creating web page.
5. Go to file->save->save the file with html extension and css extension.
6. Run the html code using browser.
TAG DESCRIPTION:
TAGS DESCRIPTION
<font> specify the font face, font size, and color of text
<style> change the font-type, size and color of the page.
<li> define a list item
<ul> displays the elements in a bulleted format
<div> defines a division or a section in an HTML document
<img> display image on the web page
PROGRAM:
[Link]
<html>
<head>
<title>College Name</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>GOVERNMENT POLYTECHNIC COLLEGE -ARIYALUR</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Admissions</a>
<a href="#">Programs</a>
<a href="#">Contact</a>
</nav>
<main>
<img src="[Link]" width="700" height="400" class="center" />
<p>Government Polytechnic College, Ariyalur is a Co-educational
institution. Around 1000 students are studying in our college. It
provides a holistic environment and teaches the subjects and
disciplinary values by the dedicated and ideal teachers.</p>
<p>We have six Engineering Departments along with Four Science
Departments. We have a exclusive Physical Eduction Department for
encourging the students to participte in various sports activies.</p>
</main>
</body>
</html>
[Link]
body {
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
}
nav {
background-color: #444;
color: #fff;
text-align: center;
padding: 0.5em;
}
nav a {
color: #fff;
text-decoration: none;
padding: 1em;
}
nav a:hover {
background-color: #555;
}
main {
padding: 1em;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
OUTPUT:
RESULT
Thus, the program to create a web page for the college using external stylesheet has
been executed successfully.
[Link].: 6 CLOCK IN 24 HOURS
DATE:
AIM
To Write a JavaScript program to create a clock in 24 hours format using Date Object.
PROCEDURE:
1. Open notepad.
2. Type the html code
3. Include title” javascript example” in title tag.
4. Use Date (), getHours(),getMinutes() & getSeconds() methods for creating clock web
page.
5. Go to file->save->save the file with html extension.
6. Run the html code using browser.
TAG DESCRIPTION:
TAGS DESCRIPTION
<script> Specify client-side script such as JavaScript
<style> Define style information (CSS) for a document
<div> Defines a division or a section in an HTML document.
PROGRAM:
[Link]
<html>
<head>
<title>Clock Example</title>
<style>
body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
div {
width: 150px;
border: 1px solid black;
background-color: lightblue;
padding: 25px;
margin-left: 45%;
margin-top: 15%;
}
</style>
<script>
function currentTime() {
let date = new Date();
let hh = [Link]();
let mm = [Link]();
let ss = [Link]();
let time = hh + ":" + mm + ":" + ss + " ";
[Link]("clock").innerText = time;
let t = setTimeout(function() {
currentTime()
}, 1000);
}
</script>
</head>
<body onload="currentTime()">
<h2>Today's Time</h2>
<hr size="5px" color="white">
<h1>
<div id="clock"></div>
</h1>
</body>
</html>
OUTPUT
RESULT
Thus, the program to create a clock in 24 hours format using Date Object has been
executed successfully.
[Link].: 7 CONTROL THE AUDIO/VIDEO
DATE:
AIM
To Write a JavaScript program to control (play, pause, stop) the audio/video in a web page.
PROCEDURE:
1. Open notepad.
2. Type the html code
3. Include title” audio example” in title tag.
4. Use play(), pause()&stop()method for creating audio/video.
5. Go to file->save->save the file with html extension.
6. Run the html code using browser.
TAG DESCRIPTION:
TAGS DESCRIPTION
<script> Specify client-side script such as JavaScript.
<style> Define style information (CSS) for a document.
<audio> Embed sound content in documents.
<video> Embed video content in documents.
<button> create a clickable button within HTML form on your webpage
<source> to specify multimedia files like <audio>, <video>, and <picture>
PROGRAM:
[Link]
<html>
<head>
<title>Media Player</title>
</head>
<style>
body {
font-family: Monaco;
background: #fdfd96;
color: red;
text-align: center;
}
</style>
<body>
<h2>Audio and Video Example</h2>
<hr size="3px" color="darkblue">
<audio id="myAudio" src="entry.mp3"></audio>
<video id="myVideo" width="320" height="240">
<source src="sample.mp4" type="video/mp4">
</video>
<br>
<button onclick="playMedia(audioPlayer)">Play Audio</button>
<button onclick="pauseMedia(audioPlayer)">Pause Audio</button>
<button onclick="stopMedia(audioPlayer)">Stop Audio</button>
<br>
<br>
<button onclick="playMedia(videoPlayer)">Play Video</button>
<button onclick="pauseMedia(videoPlayer)">Pause Video</button>
<button onclick="stopMedia(videoPlayer)">Stop Video</button>
<script src="[Link]"></script>
</body>
<html>
[Link]
var audioPlayer =
{
media: [Link]("myAudio"),
play: function() {
[Link]();
},
pause: function() {
[Link]();
},
stop: function() {
[Link]();
[Link] = 0;
}
};
var videoPlayer =
{
media: [Link]("myVideo"),
play: function() {
[Link]();
},
pause: function() {
[Link]();
},
stop: function() {
[Link]();
[Link] = 0;
}
};
function playMedia(player) {
[Link]();
}
function pauseMedia(player) {
[Link]();
}
function stopMedia(player) {
[Link]();
}
OUTPUT:
RESULT
Thus, the program to control the audio/video in a web page using javascript has been
executed successfully.
[Link].: 8 CHANGE COLOR OF WEB PAGE
DATE:
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.
PROCEDURE:
1. Open notepad.
2. Type the html code
3. Include title” change color” in title tag.
4. Create user defined function changeColor() in [Link].
5. Go to file->save->save the file with html extension.
6. Run the html code using browser.
TAG DESCRIPTION:
TAGS DESCRIPTION
<script> Specify client-side script such as JavaScript.
<style> Define style information (CSS) for a document.
<button> create a clickable button within HTML form on your webpage
<source> to specify multimedia files like <audio>, <video>, and <picture>
PROGRAM:
[Link]
<html>
<head>
<title>Color Change</title>
</head>
<body style="text-align: center; color: red">
<h2>Color Change Example</h2>
<hr size="3px" color="darkblue">
<br>
<input type="text" id="colorInput" placeholder="Enter color">
<br>
<br>
<button id="changeButton">Change Color</button>
<script src="[Link]"></script>
</body>
<html>
[Link]
function changeColor() {
const colorInput = [Link]('colorInput');
const colorValue = [Link];
[Link] = colorValue;
}
const changeButton = [Link]('changeButton');
[Link]('click', changeColor);
OUTPUT:
RESULT
Thus, the program to change the color of a web page using javascript has been executed
successfully.
[Link].: 9 SIMPLE CALCULATOR
DATE:
AIM
To Write a JavaScript program to develop a simple calculator by getting two numbers in two
text boxes, buttons for operations and display the result in the third text box.
PROCEDURE:
1. Open notepad.
2. Type the html code
3. Include Input & Button tags for form designing.
4. Use parseFloat() for accurate arithmetic calculations.
5. Go to file->save->save the file with html extension.
6. Run the html code using browser.
PROGRAM:
[Link]
<html>
<head>
<title>Simple Calculator</title>
<script src="[Link]"></script>
</head>
<body>
<div style="text-align: center;">
<h2>Simple calculator</h2>
<hr size="4px" color="black">
<br>
<br>
<div
style="background: #adb9e6; padding: 15px; margin-left: 30%; width: 600px;">
<form id="myForm">
1st Number : <input type="text" id="firstNumber" /><br>
<br> 2nd Number : <input type="text" id="secondNumber" /><br>
<br> Result : <input type="text" id="result" /><br>
<br> <input type="button" onClick="addBy()" Value="Addition" />
<input type="button" onClick="subBy()" Value="Subtraction" />
<input type="button" onClick="multiplyBy()" Value="Multiply" />
<input type="button" onClick="divideBy()" Value="Divide" />
</form>
</div>
</div>
</body>
</html>
[Link]
function addBy()
{
num1 = parseFloat([Link]("firstNumber").value);
num2 = parseFloat([Link]("secondNumber").value);
var res = (num1)+(num2);
[Link]("result").value= res;
}
function subBy()
{
num1 = parseFloat([Link]("firstNumber").value);
num2 = parseFloat([Link]("secondNumber").value);
var res=num1-num2;
[Link]("result").value= res;
}
function multiplyBy()
{
num1 = parseFloat([Link]("firstNumber").value);
num2 = parseFloat([Link]("secondNumber").value);
var res=num1*num2;
[Link]("result").value= res;
}
function divideBy()
{
num1 = parseFloat([Link]("firstNumber").value);
num2 = parseFloat([Link]("secondNumber").value);
var res=num1/num2;
[Link]("result").value= res;
}
OUTPUT:
RESULT
Thus, the program to create a simple calculator javascript has been executed
successfully.
[Link].: 10 FORMS & FORMS VALIDATION
DATE:
AIM
To create a form and form validation.
PROCEDURE:
1. Open notepad.
2. Type the html code
3. Include Input,Label and Button tags for form designing.
4. Go to file->save->save the file with html extension.
5. Run the html code using browser.
PROGRAM:
[Link]
<html>
<head>
<title>Form Validation</title>
<script>
function validateForm() {
var username = [Link]("username").[Link]();
var email = [Link]("email").[Link]();
var password = [Link]("password").value;
var retypePassword = [Link]("retypePassword").value;
var isValid = true;
var usernameError = [Link]("usernameError");
if ([Link] < 8) {
alert("Name should be 8 characters minimum");
isValid = false;
}
if () {
alert("Email must contain @ symbol");
isValid = false;
}
if (password !== retypePassword) {
alert("Passwords do not match");
isValid = false;
}
return isValid;
}
</script>
</head>
<body>
<h1 style="text-align: center">Registration Form</h1>
<hr size="2px" color="black">
<form id="registrationForm" onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<br> <span id="usernameError" class="error"></span>
<label for="email">Email ID:</label>
<input type="email" id="email" name="email">
<span id="emailError" class="error"></span><br>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<span id="passwordError" class="error"></span><br>
<br> <label for="retypePassword">Retype Password:</label>
<input type="password" id="retypePassword" name="retypePassword">
<span id="retypePasswordError" class="error"></span><br>
<br> <label>Gender:</label> <label>
<input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
<label><input type="radio" name="gender" value="other"> Other</label><br>
<br> <label>Languages known:</label>
<label><input type="checkbox" name="languages" value="english">
English</label>
<label><input type="checkbox" name="languages" value="tamil"> Tamil</label>
<label><input type="checkbox" name="languages" value="others">
Others</label><br>
<br> <label for="description">Describe yourself:</label>
<textarea id="description" name="description"></textarea>
<br>
<br>
<button type="submit">Submit</button>
</form>
<script src="[Link]"></script>
</body>
</html>
OUTPUT
RESULT
Thus, the program to create a form and form validation has been executed successfully.