Web Desighning Lab Manual

Program 1
To create a Simple HTML file to demonstrate the use of different tags.

The Different Tags are:
1. Heading Tag
HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most
important heading. <h6> defines the least important heading.
Code:-
<!DOCTYPE html>
<head>
<title>Heading Tags</title>
<style type="text/css">
body{
background-color: cyan;
}
</style>
</head>
<html>
<body>
<center>
<h1>Heading level 1</h1>
</center>
</body>
1
</html>
Output :-
2. Paragraph Tag
The HTML <p> element defines a paragraph. A paragraph always starts on a new line
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Tag</title>
body{
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<p>This is a paragraph Example.</p>
<p>This is Second paragraph.</p>
</body>
</html>
2
Output :-
3. HTML Formatting Elements

Formatting elements were designed to display special types of text-
• <b> - Bold text

• <i> - Italic text
• <u>-Underline
• <strong> - Important text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <big>-Bigger text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
• <abbr>-Abbreviation
• <address>- Address
• <blockquote>-Quotations
Code:-
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Formatting Tag</title>
body{
3
}
p{
background-color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Formatting Tag</h1>
<p>
<i>This text is italic</i><br>
<b>This is bold text</b><br>
<u>The text has underline</u><br>
<strong>This text is important!</strong><br>
<em>This is Emphesised Text</em><br>
Do not forget to write <mark>Mark</mark> tag<br>
<small>This is some smaller text.</small><br>
<big>This is some bogger text.</big><br>
My favorite color is <del>blue</del><br>
My favorite color is <ins>red</ins>!<br>
The Formula is log <sub>10</sub> x<br>
The Formula is (a+b) <sup>2</sup><br>
The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.<br></p>
<address>
[email protected]<br>
Box 336, BayLand<br>
USA
</address>
4
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading
conservation organization, WWF works in 100 countries and is supported by 1.2 million
members in the United States and close to 5 million globally.
</blockquote>
</body>
</html>
Output :-
5
Program 2
To create an html file to link to different html page which contains image,
tables and also link within a page.
Image Tag :-
The HTML <img> tag is used to embed an image in a web page. Images are not technically
inserted into a web page; images are linked to web pages. The <img> tag creates a holding
space for the referenced image. The <img> tag is empty, it contains attributes only, and does
not have a closing tag.
The <img> tag has two required attributes:
• src - Specifies the path to the image

• alt - Specifies an alternate text for the image
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Image</title>
img{
height: 250px;
margin: 5px;
}
h1{
background-color: black;
color: white;
text-align: center;
border: solid 5px;
border-radius: 50px;
}
</style>
</head>
6
<body>
<h1>Image Gallary</h1>
<img src="Image/img1.jpg" alt="Image is no Showing" border="2px">
</body>
</html>
Output :-
Table Tag :-
The <table> tag defines an HTML table. An HTML table consists of one <table> element and
one or more <tr>, <th>, and <td> elements. The <tr> element defines a table row, the <th>
element defines a table header, and the <td> element defines a table cell.
7
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
table{
border-collapse: collapse;
empty-cells: hide;
width: 1000px;
height: 500px;
text-align: center;
background-color: pink;
caption{
font-size: 25px;
font-weight: bolder;
</style>
</head>
<body>
<center>
<table border="2">
<caption>Time Table(IT 2nd Year)</caption>

8
<tr>
<th rowspan="2"></th>
<th rowspan="2">Branch</th>
<th>1st</th>
<th>2nd</th>
<th rowspan="2">11:00 - 11:10</th>
<th>3rd</th>
<th>4th</th>
<th rowspan="2">Lunch</th>
<th>5th</th>
<th rowspan="2">2:50-3:00</th>
<th>6th</th>
<th>7th</th>
</tr>

<tr>
<th>9:00-10:00</th>
<th>10:00-11:00</th>
<th>11:10-12:05</th>
<th>12:05-1:00</th>
<th>1:50-2:50</th>
<th>3:00-3:45</th>
<th>3:45-4:30</th>
</tr>
9

<tr>
<th>Monday</th>
<th>IT 2</th>
<td>Python</td>
<td>Maths</td>
<th rowspan="6">Water Break</th>
<td>OS</td>
<td>WD</td>
<th rowspan="6">Lunch Break</th>
<td>TAFL</td>
<th rowspan="6">Water Break</th>
<td>TC</td>
<td>PD</td>
</tr>

<tr>
<th>Tuesday</th>
<th>IT 2</th>
<td>WD</td>
<td>Maths</td>
<td>TAFL</td>
<td>Python</td>
<td>TC</td>
10
<td colspan="2">OS Lab</td>
</tr>

<tr>
<th>Wednesday</th>
<th>IT 2</th>
<td>TAFL</td>
<td>OS</td>
<td>Python</td>
<td>Maths</td>
<td>TC</td>
<td colspan="2">WD Lab</td>
</tr>

<tr>
<th>Thursday</th>
<th>IT 2</th>
<td>Maths</td>
<td>Python</td>
<td>WD</td>
<td>TAFL</td>
<td>PD</td>
<td>TC</td>
<td>WD</td>
</tr>
11

<tr>
<th>Friday</th>
<th>IT 2</th>
<td>TC</td>
<td>Math</td>
<td>WD</td>
<td>TAFL</td>
<td>TC</td>
<td colspan="2">Python Lab</td>
</tr>

<tr>
<th>Saturday</th>
<th>IT 2</th>
<td>Python</td>
<td>Math</td>
<td>OS</td>
<td>WD</td>
<td>TAFL</td>
<td>TC</td>
<td>PD</td>
</tr>
</table>
</center>
12
</body>
</html>
Output :-
Link:-
The <a> tag defines a hyperlink, which is used to link from one page to another. The most
important attribute of the <a> element is the href attribute, which indicates the link's
destination.
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue

• A visited link is underlined and purple
• An active link is underlined and red
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Link</title>
13
a:hover{
font-size: 25px;
h1{
color: white;
text-align: center;
border: solid 5px;
</style>
</head>
<body>
<h1>Following are the Links to Open New Pages or Windows</h1>
<ol>
<li><a href="Program2a.html" target="_blank">Time Table of IT 2nd Year</a></li>
<li><a href="Program2b.html" target="_self">Image Gallary</a></li>
<li><a href="https://WWW.Google.com" target="_top">Google</a></li>
<li><a href="https://www.w3cSchool.com" target="_parent">W3CSchool</a></li>
</ol>
</body>
</html>
14
Output :-
15
Program 3
To create n html page with different types of frames such as floating frame,
navigation frame and mixed frame.
Floating Frame :-
A floating frame is used to embed another document or page within an existing
frame. This frame will be an inline framed region that acts like other embedded objects-
meaning that text can flow around it.
Add the iframe element to the <body> of the HTML document. The inline frame is
defined by the iframe element.
• To create an<iframe> tag the major attributes required is src, height, and width.
• The src is set to the URL of the file to load while the height and width are set either to
the pixel or percentage value of the screen that the floating frame region should
consume.
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Floating Frame</title>
iframe{
margin: 12px;
}
h1{
color: white;
text-align: center;
border: solid 5px;
}
</style>
</head>
<body>
<h1>Floating Frame is use to embed another document</h1>
16
<iframe src="Image\img1.jpg" height="300px" width="400px">Navigation Frame</iframe>
<iframe src="Program1.html" height="300px" width="400px">Navigation Frame</iframe>
<iframe src="Program2a.html" height="300px" width="400px">Navigation Frame</iframe>
<iframe src="Program2b.html" height="300px" width="400px">Navigation Frame</iframe>
</body>
</html>
Output:-
17
Navigation Frame:-
HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document. A collection of frames in the browser window
is known as a frameset. The window is divided into frames in a similar way the tables are
organized: into rows and columns.
Code1:-
<html>
<head>
<title>Navigation Frames</title>
</head>
<frameset cols="200, 600, 200">
<frame src="Program1.html"></frame>
<frame src="Program2a.html"></frame>
<frame src="Program2b.html"></frame>
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
18
</frameset>
</html>
Output:-
Code2:-
<!DOCTYPE html>
<html>
<head>
<title>Navigation Frames</title>
</head>
<frameset rows="200, 600, 200">
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
19
Output:-
Mixed Frame:-
Mixed Frame is used to display vertical and horizontal frameset in a same web page.
<!DOCTYPE html>
<html>
<head>
<title>Mixed Frame</title>
</head>
<frameset rows="200, 600, 200">
<frameset cols="300, 400, 300">
</frameset>
</frameset>
20
</html>
Output:-
21
Program 4
To create a registration form as mention below.
Procedure: Create an html page named as “Registration.html”
a) Set background color
b) Use table for alignment
c) Provide font color and size
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Reg Form</title>
body{
font-family: Calibri;
}
label{
color: white;
font-size: 25px;
}
input[type="text"] {
width: 250px;
}
input[type="submit"], input[type="reset"] {
width: 80px;
height: 40px;
position: relative;
left: 180px;
font-size: 20px;
background-color: white;
22
color: coral;
}
form{
text-align: center;
font-size: 20px;
border: 3px solid white;
width: 600px;
margin: 20px auto;
background-color: coral;
}
td {
padding: 10px;
}
td:first-child {
text-align: right;
font-weight: bold;
}
td:last-child {
text-align: left;
}
h2{
color: coral;
}
h1{
color: coral;
23
}
input::placeholder{
color: coral;
}
option{
color: coral;
}
select{
color: coral;
}
</style>
</head>
<body>
<center><h1>Form Validation using HTML,CSS,JavaScript</h1></center>
<form name="reg_form" onsubmit="return(validate())">
<h2>Registration Form</h2>
<table>
<tr>
<td><label>First Name: </label></td>
<td>
<input type="text" name="fname" placeholder="First Name">
</td>
</tr>
<tr>
<td><label>Last Name: </label></td>
<td>
<input type="text" name="lname" placeholder="Last Name">
</td>
</tr>
24
<tr>
<td><label>Address: </label></td>
<td>
<input type="textarea" size="50" name="address" placeholder="Address">
</td>
</tr>
<tr>
<td><label>Gender: </label></td>
<td>
<input type="radio" name="gender" value="male"><font
color="white">Male</font>
<input type="radio" name="gender" value="femele"><font
color="white">Female</font>
</td>
</tr>
<tr>
<td><label>Email Id: </label></td>
<td>
<input type="text" name="email" placeholder="[email protected]">
</td>
</tr>
<tr>
<td><label>Mobile: </label></td>
<td>
<input type="tel" name="mobile" placeholder="Mobile Number">
</td>
</tr>
<tr>
<td><label>Course: </label></td>
<td>
25
<select name="course">
<option value="select course">select course</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JAVASCRIPT</option>
<option value="Java">JAVA</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Output:-
26
Program 5
To create an html file by applying the different style by using inline,
internal, external style sheet.
Inline Style Sheet:-
An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses
the style attribute of an HTML element.
<!DOCTYPE html>
<html>
<body style="background-color: cyan;">
<h1 style="color:blue; background-color: pink; text-align: center">A Blue Heading</h1>
<p style="color:red; font-size: 20px; text-align: center; background-color: yellow ">A red
paragraph.</p>
<p style="color:green; font-size: 20px; text-align: center; background-color: yellow ">A

green paragraph.</p>
<p style="color:black; font-size: 20px; text-align: center; background-color: yellow ">A

black paragraph.</p>
<p style="color:purple; font-size: 20px; text-align: center; background-color: yellow ">A

purple paragraph.</p>
</body>
</html>
Output:-
27
Internal Style Sheet:
An internal CSS is used to define a style for a single HTML page. An internal CSS is defined
in the <head> section of an HTML page, within a <style> element.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: powderblue;
h1 {
color: blue;
text-align: center
#red {
color: red;
font-size: 20px;
text-align: center;
#green {
color: green;
font-size: 20px;
text-align: center;
28
#black {
color: black;
font-size: 20px;
text-align: center;
#purple {
color: purple;
font-size: 20px;
text-align: center;
#gray {
color: gray;
font-size: 20px;
text-align: center;
</style>
</head>
<body>
<h1>This is a heading</h1>
<p id="red">This is a red paragraph.</p>
29
<p id="green">This is a green paragraph.</p>
<p id="black">This is a black paragraph.</p>
<p id="purple">This is a purple paragraph.</p>
<p id="gray">This is a gray paragraph.</p>
</body>
</html>
|Output:-
External Style Sheet:-
With an external style sheet, you can change the look of an entire website by changing just
one file. Each HTML page must include a reference to the external style sheet file inside the
<link> element, inside the head section.
An external style sheet can be written in any text editor, and must be saved with a .css
extension. The external .css file should not contain any HTML tags.
Code:-
HTML:-
<!DOCTYPE html>
30
<html>
<head>
<title>External Style Sheet</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p id="red">This is a red paragraph.</p>
<p id="green">This is a green paragraph.</p>
<p id="black">This is a black paragraph.</p>
<p id="purple">This is a purple paragraph.</p>
<p id="gray">This is a gray paragraph.</p>
</body>
</html>
CSS:-
body {
background-color: skyblue;
h1 {
color: blue;
text-align: center
#red {
color: red;
31
font-size: 20px;
text-align: center;
#green {
color: green;
font-size: 20px;
text-align: center;
#black {
color: black;
font-size: 20px;
text-align: center;
#purple {
color: purple;
font-size: 20px;
text-align: center;
#gray {
color: gray;
font-size: 20px;
32
text-align: center;
Output:-
33
Program 6
To write a JavaScript program to define a user defined function for sorting
the values in an array
<html>
<head>
<title>JavaScript Array sort Method</title>
</head>
<body>
<script type = "text/javascript">
function func() {
var arr = new Array("Bugatti " , " Ferrari " , " Lamborghini " , " HondaCity " , " BMW
" , " Ford " );
document.write(" Non Sorted Array is : " + arr);
var sorted = arr.sort();
document.write("<br><br>");
document.write(" Sorted Array is : " + sorted );
}
func();
</script>
</body>
</html>
34
Output:-
35
Program 7
To create an html page to explain the use of predefine functions in a string
and math objects in JavaScript
Math Objects:-
• The JavaScript Math object allows you to perform mathematical tasks on numbers.
Math.E returns Euler's number

Math.PI returns PI
Math.SQRT2 returns the square root of 2
Math.SQRT1_2 returns the square root of 1/2
Math.LN2 returns the natural logarithm of 2
Math.LN10 returns the natural logarithm of 10
Math.LOG2E returns base 2 logarithm of E
Math.LOG10E returns base 10 logarithm of E
⚫ Other Math methods inn JavaScript
Method Description
abs(x) Returns the absolute value of x
acos(x) Returns the arccosine of x, in radians.The acos() method must be in

the range -1 to 1, otherwise it returns NaN.
asin(x) Returns the arcsine of x, in radians. The asin() method must be in

the range -1 to 1, otherwise it returns NaN.
atan(x) Returns the arctangent of x as a numeric value between -PI/2 and

PI/2 radians.The value returned by atan() method lies between -
Math.PI/2 to Math.PI/2.
cbrt(x) Returns the cubic root of x
ceil(x) Returns x, rounded upwards to the nearest integer
cos(x) Returns the cosine of x (x is in radians)
36
cosh(x) Returns the hyperbolic cosine of x
exp(x) Returns the value of Ex
floor(x) Returns x, rounded downwards to the nearest integer
log(x) Returns the natural logarithm (base E) of x
max(x, y, z, ..., Returns the number with the highest value

n)
min(x, y, z, ..., Returns the number with the lowest value

n)
pow(x, y) Returns the value of x to the power of y
random() Returns a random number between 0 and 1
round(x) Rounds x to the nearest integer
sign(x) Returns if x is negative, null or positive (-1, 0, 1)
sin(x) Returns the sine of x (x is in radians)
sqrt(x) Returns the square root of x
tan(x) Returns the tangent of an angle
Code :-
<!DOCTYPE html>
<html>
<head>
<title>Maths And String Objects</title>
37
p{
font-family: times new Roman;
font-size: 20px;
}
h2{
color: red;
background: yellow;
}
</style>
</head>
<body>
<h2>JavaScript Math Constants</h2>
<script>
function ConstMath(){
document.write(
"<p><b>Math.E:</b>" + Math.E + "</p>" +
"<p><b>Math.PI:</b>" + Math.PI + "</p>" +
"<p><b>Math.SQRT2:</b>" + Math.SQRT2 + "</p>" +
"<p><b>Math.SQRT1_2:</b>" + Math.SQRT1_2 + "</p>" +
"<p><b>Math.LN2:</b>" + Math.LN2 + "</p>" +
"<p><b>Math.LN10:</b>" + Math.LN10 + "</p>" +
"<p><b>Math.LOG2E:</b>" + Math.LOG2E + "</p>" +
"<p><b>Math.Log10E:</b>" + Math.LOG10E + "</p>");
}
ConstMath();
</script>
<h2>JavaScript Other Math Methods</h2>

<script type="text/javascript">
function OtherMethods(){
document.write(
"<p><b>Math.round(4.6):</b>" + Math.round(4.6) + "</p>" +
"<p><b>Math.ceil(4.9):</b>" + Math.ceil(4.9) + "</p>" +
"<p><b>Math.floor(4.9):</b>" + Math.floor(4.9) + "</p>" +
"<p><b>Math.trunc(4.9):</b>" + Math.trunc(4.9) + "</p>" +
"<p><b>Math.sign(-4):</b>" + Math.sign(-4) + "</p>" +
"<p><b>Math.pow(8, 2):</b>" + Math.pow(8, 2) + "</p>" +
"<p><b>Math.sqrt(64):</b>" + Math.sqrt(64) + "</p>" +
"<p><b>Math.abs(-4.7):</b>" + Math.abs(-4.7) + "</p>" +
"<p><b>Math.sin(90):</b>" + Math.sin(90) + "</p>" +
"<p><b>Math.cos(0):</b>" + Math.cos(0) + "</p>" +
"<p><b>Math.min(0, 150, 30, 20, -8, -200):</b>" + Math.min(0, 150, 30, 20, -8, -200) +
"</p>" +
"<p><b>Math.max(0, 150, 30, 20, -8, -200):</b>" + Math.max(0, 150, 30, 20, -8, -200) +
"</p>" +
"<p><b>Math.random():</b>" + Math.random() + "</p>" +
"<p><b>Math.log(1):</b>" + Math.log(1) + "</p>" +
38
"<p><b>Math.log2(8):</b>" + Math.log2(8) + "</p>" +
"<p><b>Math.log10(100):</b>" + Math.log10(100) + "</p>" +
"<p><b>Math.acos(-1):</b>" + Math.acos(-1) + "</p>" +
"<p><b>Math.asin(1):</b>" + Math.asin(1) + "</p>" +
"<p><b>Math.atan(1):</b>" + Math.atan(1) + "</p>" +
"<p><b>Math.cbrt(27):</b>" + Math.cbrt(27) + "</p>");
}
OtherMethods();
</script>
</body>
</html>
Output:-
String Object :-
A JavaScript string stores a series of characters. A string can be any text inside double
or single quotes:
JavaScript String Methods

Method Description
charAt() Returns the character at a specified index (position)
charCodeAt() Returns the Unicode of the character at a specified

index
concat() Returns two or more joined strings
endsWith() Returns if a string ends with a specified value
39
fromCharCode() Returns Unicode values as characters
includes() Returns if a string contains a specified value
indexOf() Returns the index (position) of the first occurrence

of a value in a string
lastIndexOf() Returns the index (position) of the last occurrence

of a value in a string
match() Searches a string for a value, or a regular

expression, and returns the matches
repeat() Returns a new string with a number of copies of a

string
replace() Searches a string for a value, or a regular

expression, and returns a string where the values
are replaced
search() Searches a string for a value, or regular expression,

and returns the index (position) of the match
slice() Extracts a part of a string and returns a new string
split() Splits a string into an array of substrings
startsWith() Checks whether a string begins with specified

characters
substr() Extracts a number of characters from a string, from

a start index (position)
substring() Extracts characters from a string, between two

specified indices (positions)
toLowerCase() Returns a string converted to lowercase letters
toString() Returns a string or a string object as a string
toUpperCase() Returns a string converted to uppercase letters
trim() Returns a string with removed whitespaces
valueOf() Returns the primitive value of a string or a string

object
Code:-
<!DOCTYPE html>
<html>
40
<head>
<title>String Objects</title>
h1{
color: red;
}
b{
font-family: times new roman;
font-size: 20px;
}
</style>
</head>
<body>
<h1>JavaScript Strings</h1>
<script>
function strMethods(){
let text = "Hello World! This is example of String Method ....";
let text2="Welcome!";
const arr=text.split("");
document.write("<p><b><u>" + text + "</u></b></p>")
document.write(
"<p><b>text.charAt(0) : </b>" + text.charAt(0) + "</p>"+
"<p><b>text.charCodeAt(0) : </b>" + text.charCodeAt(0) + "</p>" +
"<p><b>text1.concat(text2) : </b>" + text.concat(text2) + "</p>" +
"<p><b>text.endsWith(world) : </b>" + text.endsWith("World") + "</p>" +
"<p><b>String.fromCharCode(72, 69, 76, 76, 79) : </b>" +String.fromCharCode(72,
69, 76, 76, 79) + "</p>" +
"<p><b>text.includes(world, 12) : </b>" +text.includes("World") + "</p>" +
41
"<p><b>text.indexOf(Example) : </b>" +text.indexOf("Example") + "</p>" +
"<p><b>text.lastIndexOf(Method) : </b>" +text.lastIndexOf("Method") + "</p>" +
"<p><b>text.length : </b>" +text.length + "</p>" +
"<p><b>text.match(of) : </b>" + text.match("of") + "</p>" +
"<p><b>text.repeat(2) : </b>" +text.repeat(2) + "</p>" +
"<p><b>text.replace(Hello , ohoo!) : </b>" +text.replace("Hello", "ohoo!") + "</p>"
+
"<p><b>text.search(World) : </b>" +text.search("World") + "</p>" +
"<p><b>text.slice(0, 5) : </b>" +text.slice(0, 5) + "</p>" +
"<p><b>text.startsWith(Hello) : </b>" + text.startsWith("Hello") + "</p>" +
"<p><b>text.substr(1, 4) : </b>" + text.substr(1, 4) + "</p>" +
"<p><b>text.substring(2) : </b>" + text.substring(2) + "</p>" +
"<p><b>text.toLocaleLowerCase() : </b>" + text.toLowerCase() + "</p>" +
"<p><b>text.toLocaleUpperCase() : </b>" + text.toUpperCase() + "</p>" +
"<p><b>text.toString() : </b>" + text.toString() + "</p>" +
"<p><b> text.trim() : </b>" + text.trim() + "</p>" +
"<p><b> text.valueOf() : </b>" + text.valueOf() + "</p>" +
"<p><b> text.split() : </b>" + arr + "</p>");
}
strMethods();
</script>
</body>
</html>
42
Output:-
43
Program 8
To create an html page to explain the use of predefine functions in a Array
and Date objects in JavaScript.
Array Object:-
An array is a special variable, which can hold more than one value. Array indexes are
zero-based: The first element in the array is 0, the second is 1, and so on.
Name Description
concat() Joins arrays and returns an array with the joined arrays
copyWithin() Copies array elements within the array, to and from specified positions
fill() Fill the elements in an array with a static value
from() Creates an array from an object
includes() Check if an array contains the specified element
indexOf() Search the array for an element and returns its position
isArray() Checks whether an object is an array
join() Joins all elements of an array into a string
lastIndexOf() Search the array for an element, starting at the end, and returns its
position
length Sets or returns the number of elements in an array
map() Creates a new array with the result of calling a function for each array
element
44
pop() Removes the last element of an array, and returns that element
push() Adds new elements to the end of an array, and returns the new length
reverse() Reverses the order of the elements in an array
shift() Removes the first element of an array, and returns that element
slice() Selects a part of an array, and returns the new array
sort() Sorts the elements of an array
splice() Adds/Removes elements from an array
toString() Converts an array to a string, and returns the result
unshift() Adds new elements to the beginning of an array, and returns the new
length
valueOf() Returns the primitive value of an array
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Array Object</title>
h1{
color: red;
45
}
b{
font-size: 20px;
}
</style>
</head>
<body>
<h1>JavaScript Array Methods</h1>
function ArrayMethod(){
const arr1 = ["Apple", "Banana", "Mango", "Orange"];
const arr2 = ["Kivi", "Raspberry", "Cherry", "Strawberry"];
const numbers = [4, 9, 16, 25];
document.write(
"<p><b>arr1.concat(arr2) : </b>" + arr1.concat(arr2) + "</p>"+
"<p><b>arr1.sort() : </b>" + arr2.sort() + "</p>"+
"<p><b>arr1.copyWithin(2, 0) : </b>" + arr1.copyWithin(2, 0) + "</p>"+
"<p><b>arr1.fill(Kiwi) : </b>" + arr2.fill("Kiwi") + "</p>"+
"<p><b>Array.from(ABCDEFG) : </b>" + Array.from("ABCDEFG") + "</p>"+
"<p><b>arr1.includes(Papaya) : </b>" + arr1.includes("Papaya",2) + "</p>"+
"<p><b>arr1.indexOf(Apple) : </b>" + arr1.indexOf("Apple") + "</p>"+
"<p><b>Array.isArray(arr1) : </b>" + Array.isArray(arr1) + "</p>"+
"<p><b>arr1.join( and ) : </b>" + arr1.join(" and ") + "</p>"+
"<p><b>arr1.lastIndexOf(Apple) : </b>" + arr1.lastIndexOf("Apple") + "</p>"+
"<p><b>arr1.length : </b>" + arr1.length + "</p>"+
"<p><b>numbers.map(Math.sqrt) : </b>" + numbers.map(Math.sqrt) + "</p>"+
"<p><b>numbers.pop() : </b>" + numbers.pop() + "</p>"+
"<p><b>arr1.push(kiwi) : </b>" + arr1.push("Kiwi") + "</p>"+ arr1[4] +
46
"<p><b>numbers.reverse() : </b>" + numbers.reverse() + "</p>"+
"<p><b>arr2.shift() : </b>" + arr1.shift() + "</p>"+
"<p><b>arr1.slice(1, 3) : </b>" + arr1.slice(1, 3) + "</p>"+
"<p><b>arr1.splice(2, 0, Lemon, Kiwi) : </b>" + arr1.splice(2, 0, "Lemon",
"Papaya") + "</p>"+
"<p><b>arr1.toString() : </b>" + arr1.toString() + "</p>"+
"<p><b>arr1.valueOf() : </b>" + arr1.valueOf() + "</p>"+
"<p><b>arr1.unshift(Pineapple) : </b>" + arr1.unshift("Pineapple") + "</p>"
);
document.write("<b>Final Array is : </b>")
for (var i = 0; i < arr1.length; i++) {
document.write(arr1[i] +" , ");

}
}
ArrayMethod();
</script>
</body>
</html>
47
Output:-
Date Object:-
• These methods can be used for getting information from a date object
Method Description
getFullYear() Get the year as a four digit number (yyyy)
getMonth() Get the month as a number (0-11)
getDate() Get the day as a number (1-31)
getHours() Get the hour (0-23)
48
getMinutes() Get the minute (0-59)
getSeconds() Get the second (0-59)
getMilliseconds() Get the millisecond (0-999)
getTime() Get the time (milliseconds since January 1, 1970)
getDay() Get the weekday as a number (0-6)
Date.now() Get the time. ECMAScript 5.
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Date Objects</title>
h1{
color: red;
}
h2{
color: yellow;
background-color: red;
}
b{
font-size: 20px;
}
</style>
</head>
<body>
<h1>JavaScript Date Methods</h1>
function _DT() {
const d = new Date();
document.write("<h2>"+d+"</h2>");
document.write(
"<p><b>Full Year is : </b>"+d.getFullYear()+"</p>"+
"<p><b>Month is : </b>"+d.getMonth()+"</p>"+
"<p><b>Hour is : </b>"+d.getHours()+"</p>"+
49
"<p><b>Minute is : </b>"+d.getMinutes()+"</p>"+
"<p><b>Second is : </b>"+d.getSeconds()+"</p>"+
"<p><b>Millisecond is : </b>"+d.getMilliseconds()+"</p>"+
"<p><b>Day is : </b>"+d.getDay()+"</p>"+
"<p><b>Time is : </b>"+d.getTime()+"</p>"+
"<p><b>Time is : </b>"+Date.now()+"</p>");
}
_DT();
</script>
</body>
</html>
Output:--
50
Program 9
To create an html page to demonstrate exception handling in JavaScript
JavaScript Exception
There are Four way to handle exception in java.
1. The try statement defines a code block to run (to try).

2. The catch statement defines a code block to handle any error.
3. The finally statement defines a code block to run regardless of the result.
4. The throw statement defines a custom error.
JavaScript try and catch
The try statement allows you to define a block of code to be tested for errors while it is being
executed.
The catch statement allows you to define a block of code to be executed, if an error occurs in
the try block.
Code:-
<html>
<head>
<title>Exception Handling</title>
</head>
<body>
<h1> Try and Catch Statement </h1>
<script>
try{
var a= ["34","32","5","31","24","44","67"]; //a is an array
document.write("<p><b>Array is : "+ a +"</b></p>"); // displays elements of a
document.write(b); //b is undefined but still trying to fetch its value. Thus catch block will be
invoked
catch(er){
51
alert("There is error which shows "+er.message); //Handling error
</script>
</body>
</html>
Output:-
52
JavaScript finally Statement
The finally statement lets you execute code, after try and catch, regardless of the result
Code:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Try,Catch and Finally Statement</h1>
<script>
try{
var a= ["34","32","5","31","24","44","67"]; //a is an array
document.write("<p><b>Array is : "+ a +"</b></p>"); // displays elements of a
document.write(b); //b is undefined but still trying to fetch its value. Thus catch block will be
invoked
}
catch(e){
document.write("<p><b>Error found "+e.message+"</b></p>");
}
finally{
document.write("<p><b> a is and Array but b is no defined </b></p>");
}
</script>
</body>
</html>
53
Output:-
JavaScript throw statement
The throw statement allows you to create a custom error. Technically you can throw an
exception (throw an error). The exception can be a JavaScript String, a Number,
a Boolean or an Object.
Code:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Throw Statement</h1>
54
<script>
try {
throw new Error("This is the throw Exception"); //user-defined throw statement.
catch (e) {
document.write(e.message); // This will generate an error message
</script>
</body>
</html>
Output:-
55
Program 10
To create html registration form and to validate the form using JavaScript
code.
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Reg Form</title>
body{
}
input[type="text"] {
width: 250px;
}
input[type="submit"], input[type="reset"] {
width: 77px;
height: 27px;
position: relative;left: 180px;
}
form{
text-align: center;
font-size: 20px;
border: 3px solid white;
width: 600px;
margin: 20px auto;
56
}
td {
padding: 10px;
}
td:first-child {
text-align: right;
font-weight: bold;
}
td:last-child {
text-align: left;
}
h2{
color: coral;
}
h1{
color: coral;
}
</style>
<script>
function validate() {
var fname = document.reg_form.fname;
var lname = document.reg_form.lname;
var address = document.reg_form.address;
var gender = document.reg_form.gender;
57
var email = document.reg_form.email;
var mobile = document.reg_form.mobile;
var course = document.reg_form.course;
if (fname.value.length <= 0) {
alert("Name is required");
fname.focus();
return false;
}
if (lname.value.length <= 0) {
alert("Last Name is required");
lname.focus();
return false;
}
if (address.value.length <= 0) {
alert("Address is required");
address.focus();
return false;
}
if (gender.value.length <= 0) {
alert("Gender is required");
gender.focus();
return false;
}
if (email.value.length <= 0) {
alert("Email Id is required");
email.focus();
return false;
}
58
if (mobile.value.length <= 0) {
alert("Mobile number is required");
mobile.focus();
return false;
}
if (course.value == "select course") {
alert("Course is required");
course.focus();
return false;
}
return false;
}
</script>
</head>
<body>
<center><h1>Form Validation using HTML,CSS,JavaScript</h1></center>
<form name="reg_form" onsubmit="return(validate())">
<h2>Registration Form</h2>
<table>
<tr>
<td><label>First Name: </label></td>
<td>
<input type="text" name="fname" placeholder="First Name">
</td>
</tr>
<tr>
<td><label>Last Name: </label></td>
<td>
<input type="text" name="lname" placeholder="Last Name">
59
</td>
</tr>
<tr>
<td><label>Address: </label></td>
<td>
<input type="textarea" size="50" name="address" placeholder="Address">
</td>
</tr>
<tr>
<td><label>Gender: </label></td>
<td>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="femele">Female
</td>
</tr>
<tr>
<td><label>Email Id: </label></td>
<td>
<input type="text" name="email" placeholder="[email protected]">
</td>
</tr>
<tr>
<td><label>Mobile: </label></td>
<td>
<input type="tel" name="mobile">
</td>
</tr>
<tr>
<td><label>Course: </label></td>
60
<td>
<select name="course">
<option value="select course">select course</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JAVASCRIPT</option>
<option value="Java">JAVA</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
61
Output:-
62
Program 11
To create html file. To open a new window from the current window using
JavaScript.
The open() method opens a new browser window, or a new tab, depending on your browser
settings and the parameter values.
Parameters:
1. URL: The URL of the page to open.
2. Name: The target attribute or the name of the window.(Values can be _blank, _parent,
_self, _top)
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Open New Window</title>
button{
font-size: 20px;
height: 50px;
width: 120px;
color: lightgreen;
border:solid 5px lightgreen;
}
h1{
color: coral;
}
p{
color: magenta;
63
font-size: 20px;
}
</style>
</head>
<body>
<h1>open a new window from the current window using JavaScript.</h1>
<p>Click the button to open a new browser window </p>
<button onclick="myFunction()">Click Here</button>
<script>
function myFunction() {
var myWindow = window.open("", "", "width=200,height=100");
}
</script>
</body>
</html>
Output:-
64
Or
Code:-
<!DOCTYPE html>
<html>
<head>
button{
font-size: 20px;
height: 50px;
width: 120px;
color: lightgreen;
}
h1{
color: coral;
65
}
p{
color: magenta;
font-size: 20px;
}
</style>
</head>
<body>
<p>Click the button to a new browser window </p>
<button onclick="myFunction()">Google</button>
<button onclick="myFun()">You Tube</button>
<script>
window.open("http://www.google.com/");
}
function myFun(){
window.open("https://www.youtube.com/");
}
</script>
</body>
</html>
66
Output:-
Or
Code:-
<!DOCTYPE html>
<html>
<head>
67
button{
font-size: 20px;
height: 50px;
width: 120px;
color: lightgreen;
}
h1{
color: coral;
}
p{
color: magenta;
font-size: 20px;
}
</style>
</head>
<body>
<p>Click the button to put the new window in the current window.</p>
<button onclick="myFunction()">Click Here</button>
<script>
var myWindow = window.open("", "_self");
myWindow.document.write("<p><b>I replaced the current window.<b></p>");
}
68
</script>
</body>
</html>
Output:-
69
Program 12
To create an html page to change the background color for every click of a button using
JavaScript.
querySelector:-The Document method querySelector() returns the first Element within the
document that matches the specified selector, or group of selectors. If no matches are
found, null is returned.
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Change Color</title>
button{
position: absolute;
left: 500px;
top:250px;
height: 100px;
width: 300px;
font-size: 30px;
text-transform: uppercase;
cursor: pointer;
border: solid 5px black;
color: black;
}
</style>
</head>
<body>
<button>Switch Color</button>
70
var color=["coral","lightgreen","lightblue","yellow","pink","gray"];
var i=0;
document.querySelector("button").addEventListener("click", function() {
i = i < color.length ? ++i : 0;
document.querySelector("body").style.background = color[i]
})
</script>
</body>
</html>
Output:-
71
72
Program 13
To create a html page to display a new image and text when the mouse comes over the
existing content in the page.
Code:-
<!DOCTYPE html>
<html>
<head>
<title> Events of JavaScript</title>
h1{
color: coral;
text-align: center;
}
p{
color: magenta;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body align="center">
<h1 onmouseover="img()" onmouseout="Page1()">Event of JavaScript that Appears the
Image</h1>
<h1 onmouseover="txt()" onmouseout="Page2()">Event of JavaScript that Appears the
Text</h1>
<p id="para"></p>
var image = new Image();
image.src = "Image/img1.jpg";
73
var str="Hello JavaScript Programmer! You are choosing the best language for client side
Scripting. Thank You for Visiting Here. ";
function img(){
image.style.height="500px";
image.style.width="900px";
document.body.appendChild(image);
}
function Page1(){
document.body.removeChild(image);
}
function txt(){
document.getElementById('para').innerHTML = str;
}
function Page2(){
document.getElementById('para').innerHTML = '';
}
</script>
</body>
</html>
Output:-
74
75

Web Desighning Lab Manual

Uploaded by

Copyright:

Available Formats

Web Desighning Lab Manual

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Desighning Lab Manual

Uploaded by

Copyright:

Available Formats

Program 1

To create a Simple HTML file to demonstrate the use of different tags.

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<h5>Heading level 5</h5>

<h6>Heading level 6</h6>

3. HTML Formatting Elements

• <b> - Bold text

The <img> tag has two required attributes:

• src - Specifies the path to the image

<caption>Time Table(IT 2nd Year)</caption>

<th rowspan="2">11:00 - 11:10</th>

<th rowspan="6">Water Break</th>

<th rowspan="6">Lunch Break</th>

<th rowspan="6">Water Break</th>

<td colspan="2">WD Lab</td>

<td colspan="2">Python Lab</td>

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue

border: solid 5px;

<h1>Following are the Links to Open New Pages or Windows</h1>

<li><a href="Program2a.html" target="_blank">Time Table of IT 2nd Year</a></li>

<li><a href="Program2b.html" target="_self">Image Gallary</a></li>

<li><a href="https://WWW.Google.com" target="_top">Google</a></li>

<li><a href="https://www.w3cSchool.com" target="_parent">W3CSchool</a></li>

<body style="background-color: cyan;">

<h1 style="color:blue; background-color: pink; text-align: center">A Blue Heading</h1>

<p style="color:green; font-size: 20px; text-align: center; background-color: yellow ">A

<p style="color:black; font-size: 20px; text-align: center; background-color: yellow ">A

<p style="color:purple; font-size: 20px; text-align: center; background-color: yellow ">A

<p id="red">This is a red paragraph.</p>

<p id="black">This is a black paragraph.</p>

<p id="purple">This is a purple paragraph.</p>

<p id="gray">This is a gray paragraph.</p>

External Style Sheet:-

<title>External Style Sheet</title>

<link rel="stylesheet" href="style.css">

<p id="red">This is a red paragraph.</p>

<p id="green">This is a green paragraph.</p>

<p id="black">This is a black paragraph.</p>

<p id="purple">This is a purple paragraph.</p>

<p id="gray">This is a gray paragraph.</p>

Math.E returns Euler's number

⚫ Other Math methods inn JavaScript

abs(x) Returns the absolute value of x

acos(x) Returns the arccosine of x, in radians.The acos() method must be in

asin(x) Returns the arcsine of x, in radians. The asin() method must be in

atan(x) Returns the arctangent of x as a numeric value between -PI/2 and

cbrt(x) Returns the cubic root of x

ceil(x) Returns x, rounded upwards to the nearest integer

cos(x) Returns the cosine of x (x is in radians)

exp(x) Returns the value of Ex