Scribd
Upload
90 views

HTML Programs: 1. Program To Print The Colors

The document contains 12 HTML programs and 4 JavaScript programs. The HTML programs demonstrate various features of HTML like using headings, colors, lists, tables, frames, images, forms, CSS, video, and designing a webpage. The JavaScript programs show how to print messages using prompts, perform arithmetic operations, check if a number is odd or even, and print messages using a switch case statement.

Uploaded by

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

HTML Programs: 1. Program To Print The Colors

The document contains 12 HTML programs and 4 JavaScript programs. The HTML programs demonstrate various features of HTML like using headings, colors, lists, tables, frames, images, forms, CSS, video, and designing a webpage. The JavaScript programs show how to print messages using prompts, perform arithmetic operations, check if a number is odd or even, and print messages using a switch case statement.

Uploaded by

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

HTML PROGRAMS

1. Program To Print the colors

<html>

<body>

<h1 style="background-color:Tomato;">Tomato</h1>

<h1 style="background-color:Orange;">Orange</h1>

<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>

<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>

<h1 style="background-color:Gray;">Gray</h1>

<h1 style="background-color:SlateBlue;">SlateBlue</h1>

<h1 style="background-color:Violet;">Violet</h1>

<h1 style="background-color:LightGray;">LightGray</h1>

</body>

</html>

2.Program To display the different levels of heading

<html>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>

</html>
3.Program To display alignment of headings

<html>

<body>

<h1 align="center">This is heading 1</h1>

<h2 align="left">This is heading 2</h2>

<h3 align="right">This is heading 3</h3>

<h4 align="justify">This is heading 4</h4>

</body>

</html>

4. Program To display the lists

<html>

<body>

<h2>An Unordered HTML List</h2>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

<h2>An Ordered HTML List</h2>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>
5. Program To display a table
<html>
<title>TABLE</title>
<body>
<div class="w3-container">
<h2>Basic Table</h2>
<p>The w3-table class defines a basic table:</p>
<table BORDER=1>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>
6. Program To display the level of items
<html>
<head>
<title>LEVELS OF ITEMS</title>
</head>
<body>
<ol type="=1">
<li> Top level of item</li>
<br />
<li>Another top level of item</li>
<li type="A" value="1">
<p align="center">
Second level of item
</p>
</li>
<li type="A">
<p align="center">
Second level of item
</p>
</li>
<li type="1" value="1">
<p align="right">
Third level item
</p></li>
<li type="A" value="3">
<p align="center">
Another Second level of item
</p>
</li>
<li type="1" value="3"> Another top level item
</li>
</ol>
</body>
</html>
7. Program To implement the frame

<html>

<frameset cols="25%,*,25%">

<frame src="frame_a.htm">

<frame src="frame_b.htm">

<frame src="frame_c.htm">

</frameset>

</html>

frame_a.htm

<html>

<body style="background-color:#8F8FBD">
<h3>Frame A</h3>

<p><strong>Note:</strong> The frameset, frame, and noframes elements are not supported in
HTML5.</p>

</body>

</html>

frame_b.htm

<html>

<body style="background-color:#EBC79E">

<h3>Frame B</h3>

</body>

</html>

frame_c.htm

<html>

<body style="background-color:#FFFFCC">

<h3>Frame C</h3>

</body>

</html>

8.Program To display the image

<html>

<body bgcolor=blue align=center>

<img src="smiley.gif" alt="Smiley face" width="62" height="62">

<p>Smiley face</p>

</body>

</html>
9. Program To display cascading style sheet
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

styles.css

<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

10. Program To implement the video in html

<html>

<head>

</head>

<body bgcolor=black>

<center>

<video src="frozen.mp4" controls height="95%" width="95%">

</video>

</body>
</html>

11. Program To design a web form

<html>

<head>

<title>HTML Table</title>

</head>

<body>

<form method="" action="">

<table border="1" align="center" width="400" bgcolor="#CCCCCC" >

<caption>Registration form</caption>

<tr>

<th>Enter your first name</th>

<td><input type="text" name="fn" id="fn1" maxlength="10" title="enter your first name"


placeholder="enter your first name" required/></td>

</tr>

<tr>

<th>Enter your last name</th>

<td><input type="text"/></td>

</tr>

<tr>

<th>Enter your password</th>

<td><input type="password"/></td>

</tr>

<tr>

<th>ReEnter your password</th>

<td><input type="password"/></td>

</tr>

<tr>
<th>Enter your email</th>

<td><input type="email"/></td>

</tr>

<tr>

<th>Enter your mobile</th>

<td><input type="number"/></td>

</tr>

<tr>

<th>Enter your address</th>

<td><textarea rows="8" cols="20"></textarea></td>

</tr>

<tr>

<th>Select your gender</th>

<td>

male<input type="radio" name="g" value="m"/>

female<input type="radio" name="g" value="f"/>

</td>

</tr>

<tr>

<th>Select your hobbies</th>

<td>

hobby1<input type="checkbox" name="x[]" value="h"/>

hobby2<input type="checkbox" name="x[]" value="h2"/>

hobby3<input type="checkbox" name="x[]" value="h3"/>

</td>

</tr>

<tr>

<th>Select your DOB</th>


<td><input type="date"/></td>

</tr>

<tr>

<th>Select your Country</th>

<td>

<select name="country">

<option value="" selected="selected" disabled="disabled">Select your country</option>

<option value="1">India</option>

<option value="2">Pakistan</option>

</select>

</td>

</tr>

<tr>

<th>Upload your pic</th>

<td><input type="file"/></td>

</tr>

<tr>

<td colspan="2" align="center"><input type="submit" value="Save My Data"/>

<input type="reset" value="Reset Data"/>

</td>

</tr>

</table>

</form>

</body>

</html>

12. Program To design a webpage

<html>

<head><title>web page</title></HEAD>
<Body style="background-color:thistle">

<CENTER><H1> <U><FONT COLOR="NAVY">RAI SAHEB BHANWAR SINGH

COLLEGE NASRULLAGANJ </FONT></U></H1></CENTER>

<IMG SRC="IMAGE\NEW LOGO.PNG"WIDTH="150" HEIGHT="200"

ALIGN="LEFT"/>

<img src="image\College photo.jpg" width="1080" height="200"/>

<table width="100%" border="1"><tr>

<th><A HREF="HOME.HTML">HOME</A></th>

<th><A HREF="ABOUTUS.HTML">ABOUT US</A></th>

<th><A HREF="CONTACT US.HTML">CONTACT US</A></th>

<th><A HREF="DEPARTMENT.HTML">DEPARTMENT</A></TH>

<TH><A HREF="SPORTS.HTML">SPORTS</A></th>

<th><A HREF="COURSES.HTml">COURSES</A></th></body></head>

</html>

JAVASCRIPT PROGRAMS

13. Program To Print Msg Using Prompt Box


<html>

<body>

<p>Click the button to demonstrate the prompt box.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>

function myFunction() {

var person = prompt("Please enter your name", "Harry Potter");

if (person != null) {

document.getElementById("demo").innerHTML =

"Hello " + person + "! How are you today?";


}

</script>

</body>

</html>

14. Pgm To Perform All Arithmetic Operations


<html>
<head>
<title>Javascript Arithmetic Operators</title>
</head>
<body>
<h1>Performing Arithmetic Operations </h1>
<script>
var a = 12, b = 3;
var addition, subtraction, multiplication, division, modulus;

addition = a + b; //addition of 3 and 12


subtraction = a - b; //subtract 3 from 12
multiplication = a * b; //Multiplying both
division = a / b; //dividing 12 by 3 (number of times)
modulus = a % b; //calculation the remainder

document.write("Addition of " + a +' and ' + b +" is = " + addition + "<br />");
document.write("Subtraction of " + a +' and ' + b +" is = " + subtraction + "<br />");
document.write("Multiplication of " + a +' and ' + b +" is = " + multiplication + "<br
/>");
document.write("Division of " + a +' and ' + b +" is = " + division + "<br />");
document.write("Modulus of " + a +' and ' + b +" is = " + modulus + "<br />");
</script>
</body>
</html>

15.Pgm To Check Whether Given Number Is Odd Or Even

<html>
<head>
<title>JavaScript to find Odd or Even number Example - Tutorialsmade.com!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function findOddEven(){
//get the input value
var num = document.getElementById('num').value;

//if the value of c is 2 then it is a prime number


//because a prime number should be exactly divisible by 2 times only (itself and 1)
if ( num % 2 == 0) {
document.getElementById('result').innerHTML = num + ' is a Even number';
}else{
document.getElementById('result').innerHTML = num + ' is a Odd number';
}
}
</script>
</head>
<body>
<h2>JavaScript to find Odd or Even number!</h2>
<form method="post">
Enter a number: <input type="number" id="num" name="num" min="0" /><input
type="button" value="Find Odd or Even" onclick="findOddEven()" name="find" />
<div style="margin-top: 10px;" id="result"></div>
</form>
</body>
</html

16.Pgm To Print Msg Using Switch Case

<html>

<body>

<p>Write Banana, Orange or Apple in the input field and click the button.</p>

<p>The switch statement will execute a block of code based on your input.</p>

<input id="myInput" type="text">

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>

function myFunction() {

var text;

var fruits = document.getElementById("myInput").value;

switch(fruits) {
case "Banana":

text = "Banana is good!";

break;

case "Orange":

text = "I am not a fan of orange.";

break;

case "Apple":

text = "How you like them apples?";

break;

default:

text = "I have never heard of that fruit...";

document.getElementById("demo").innerHTML = text;

</script>

</body>

</html>

17.Pgm To Print Even Numbers Using While Loop

<html>

<body>

<h2>JavaScript Do/While Loop</h2>

<p id="demo"></p>

<script>

var text = ""

var i = 0;

do {

if(i%2 == 0)
text += "<br>The number is " + i;

i++;

while (i < 10);

document.getElementById("demo").innerHTML = text;

</script>

</body>

</html>

PERL PROGRAMS

18. Pgm To Implement While Loop In Perl

#!/usr/local/bin/perl

$a = 10;

# while loop execution

while( $a < 20 ) {

printf "Value of a: $a\n";

$a = $a + 1;

19. Pgm To Implement Foreach Loop

#!/usr/local/bin/perl
@list = (2, 20, 30, 40, 50);

# foreach loop execution

foreach $a (@list) {

print "value of a: $a\n";

20. Pgm To Implement Conditional Operator

use strict;

use warnings;

use 5.010;

my $file = shift;

say $file ? $file : "file not given";

21 Pgm To Implement An Array

#!/usr/bin/perl

@ages = (25, 30, 40);

@names = ("John Paul", "Lisa", "Kumar");

print "\$ages[0] = $ages[0]\n";

print "\$ages[1] = $ages[1]\n";

print "\$ages[2] = $ages[2]\n";

print "\$names[0] = $names[0]\n";

print "\$names[1] = $names[1]\n";

print "\$names[2] = $names[2]\n"

22.Pgm To Illustrate The Sequential Array Elements.


#!/usr/bin/perl

@var_10 = (1..10);

@var_20 = (10..20);

@var_abc = (a..z);

print "@var_10\n"; # Prints number from 1 to 10

print "@var_20\n"; # Prints number from 10 to 20

print "@var_abc\n"; # Prints number from a to z

23.Pgm To Display The Array Elements Using qw()

#!/usr/bin/perl -w

@array = qw(This is a list of words without interpolation);

foreach $key (@array) {


print"Key is $key\n";
}

24. Pgm To Demonstrate Some Of The Properties Of Array Assignment S

#!/usr/bin/perl

@nums = (1,2,3,4,5);

@more = 6..1000; #using the 'range' operator

@none = (); # empty array.

@names = qw/Paul Michael Jessica Megan/;

@all = (@nums, @more); #@all contains all integers from 1 to 1000


25. Pgm To Display The Current Date And Time

#!/usr/local/bin/perl

$datestring = localtime();

print "Current date and time $datestring\n";

You might also like