Aravind.p

RECORD NOTEBOOK
WEB DESIGN LAB – (HBCS17L07)
2021– 2022 (ODD SEMESTER)
DEPARTMENT
Of
COMPUTER SCIENCE AND ENGINEERING
NAME : JAYASHREE.R
REGISTER NO : 193181101012
COURSE : B.Sc, ISCF
YEAR / SEM / SEC : III, V, A

BONAFIDE CERTIFICATE
Register No: 193181101012
NAME OF LAB : WEB DESIGN LAB (HBCS17L07)
DEPARTMENT : COMPUTER SCIENCE AND ENGINEERING
Certified that this is the bonafide record of work done by
JAYASHREE.R of II Year B.Sc, ISCF, Sec-‘A’ in the

WEB DESIGN LAB during the year 2020-2021.
Signature of Lab-in-Charge Signature of Head of Dept
Submitted for the Practical Examination held on
Internal Examiner External Examiner

INDEX
EXP NO DATE EXPEIRMENT NAME PAGE NO SIGNATURE
1 16-09-2021 WEB PAGE CREATION
2 16-09-2021 ORDERED AND UN-ORDERED

LIST
3 17-09-2021 HYPERLINK USING IMAGE
4 17-09-2021 FLOATING IMAGE WITH

PARAGRAPH TAGS
5 23-09-2021 TABLE
6 24-09-2021 LINKS AND FRAMEMS
7 30-09-2021 FORMS
8 01-10-2021 CSS
9 21-10-2021 CSS & TEXT COLOR
10 21-10-2021 FIBONACCI SERIES
11 22-10-2021 JAVASCRIPT-COPY TEXT

FROM DIFFERENT FIELD
12 22-10-2021 ODD OR EVEN USING

JAVASCRIPT
13 28-10-2021 SWITCH CASE - JAVASCRIPT
EXP NO:1 DATE:16-09-2021
193181101012 1 JAYASHREE.R
WEB PAGE CREATION
AIM:
To write a html code to develop a web page having the background in red and title “My
FirstPage” apply marquee in any other color, giving details of your name, age, address.
ALGORITHM:
STEP 1: Start the html program by opening HTML tag <html>.
STEP 2: Open the head and title tag to give their contents and close them
STEP 3: Open the body tag and give “My first page” as a text to be displayed.
STEP 4: Open marquee tag. Inside marquee, give font-family, font-size, color, width, height,
direction, behaviour, scroll delay, scroll amount, loop, bg color, hspace, vspace, tex tcolor as its
style.
STEP 5: Close the end tags of marquee, body and html.
193181101012 2 JAYASHREE.R
PROGRAM:
<!DOCTYPE html>
<html>
<head><p>THIS OUTPUT WAS DONE BY R.JAYASHREE REG

NO:193181101012</P>
<title>my first page</title>
</head>
<body style=background-color:red></body>
<h1>my first page</h1>
<marquee width="50%" direction="up" height=75px>
name=Jayashree<br>
age=21<br>
address=chennai;
</marquee>
</body>
</html>
193181101012 3 JAYASHREE.R
EXPLANATION:
LINE1: The DOCTYPE declaration is an instruction to a web browser about what version of
HTML the page is written in,(HTML5 document).
LINE2: The html tag has been opened ,the html tag is the root element of an HTML page.
LINE3: The head tag has been opened. the head tag contain specific information about the web
page
LINE4: the title tag allows you to give a web page a title.
LINE5: head tag has been closed .
LINE 6: The body tag has been opened. The background color has been given has red.
LINE7: The h1 tag has been opened and closed. Here the heading for the web page has been
given.
LINE8:The body tag has been closed.
LINE9:The marquee tag has been given .here the width, direction and height has been set
LINE10:The content has been given and break tag is given to break the line.
LINE13:The h2 tag is given to display the content.
LINE14:The marquee tag has been closed.
LINE15:The html tag has been closed
193181101012 4 JAYASHREE.R
OUTPUT:
RESULT:
Thus the html program with the background color red, and title “my first page” with
marquee in any other color, giving details of your name, age, address has been verified and
executed successfully.
193181101012 5 JAYASHREE.R
EXP NO: 2 DATE:16-09-2021
ORDERED AND UN-ORDERED LIST
AIM:
To Create a web page to display list of names using ordered & unordered list.
ALGORITHM:
STEP 1: Start the program with HTML tag.
STEP 2: Open Ordered list tag and give the list with list tag and close the ordered list tag.
STEP 3: Open unordered list tag and give the list tag and close the unordered list tag
STEP 4: Close the program with HTML tag and save the file with .html extension.
193181101012 6 JAYASHREE.R
PROGRAM:
<!DOCTYPE html>
<html>
<head><p>THIS PROGRAM WAS DONE BY R.JAYASHREE REG

NO:193181101012</P>
<title>ordered & unordered</title>
</head>
<body style=background-color:red>
<ol start="1"></ol><ol>fruits</ol>
<li>banana</li>
<li>apple</li>
<li>strawberry</li>
</body>
<body>
<ul start></ul><ul>vegetables</ul>
<li>tomato</li>
<li>carrot</li>
<li>chilly</li>
</body>
</html>
193181101012 7 JAYASHREE.R
EXPLANATION:
page
LINE 6: The body tag has been opened.
LINE7: The h1 tage has been opened and closed. the heading for the web page has been given.
LINE8:The ol tag been given. which initiates ordered list.
LINE9:The list tag has been given , the content has been given .
LINE13:The ordered tag has been closed.
LINE14: The body tag has been closed.
LINE15:The ul tag been given. which initiates unordered list.
LINE20:The unordered tag has been closed.
LINE21:The h5 tag is given to display the content
LINE23:The html tag has been
193181101012 8 JAYASHREE.R
OUTPUT:
RESULT:
Thus the web page to display list of names using ordered and unordered list has been
verified and executed successfully.
193181101012 9 JAYASHREE.R
EXP NO: 3 DATE:17-09-2021
HYPERLINK USING NAME
AIM:
To create a web page that contains a image at its left hand side of the page when the user
clicks the image it should open on another web page.
ALGORITHUM:
STEP 1: Start the html code. Open html and head tags. Give their contents.
STEP 2: Open the body tag. Open <a> tag and give link using href.
STEP 3: Open <img> tag and give source <src> tag.
STEP 4: Close all the end tags.
193181101012 10 JAYASHREE.R
PROGRAM :
<!DOCTYPE html>
<html>
<head><P>THIS PROGRAM WAS DONE BY R.JAYASHREE REG

NO:193181101012</P>
<title>image as hyperlink</title>
<h1>image as hyperlink</h1>
</head>
<body>
<p>click on image more to next
<a
href="https://www.onlinegdb.com/online_java_compiler"target="_self"</a>
<img src=https://www.google.com/url?sa=i&url=https%3A%2F
%2Fiso.500px.com%2Fthe-top-20-nature-photos-on-500px-so-far-this-year
%2F&psig=AOvVaw1kTZUCkE7iprDRntxdiIwl&ust=1632202087865000&s
ource=images&cd=vfe&ved=0CAgQjRxqFwoTCKCAyOLojPMCFQAAAAA
dAAAAABAD /img>
</body>
</html>
193181101012 11 JAYASHREE.R
EXPLANATION:
page
LINE4: The h1 tage has been opened and closed. Here the heading for the web page has been
given.
LINE7:The a href tag has been given. It is a code to create a link to another page.
LINE8:The img src tag is given. The tag takes the image from the computer by giving location.
LINE9: The h5 tage has been opened and closed.
LINE10: The body tag has been closed..
LINE11:The html tag has been closed.
193181101012 12 JAYASHREE.R
OUTPUT:
193181101012 13 JAYASHREE.R
RESULT:
Thus the html page that contains image at its left hand side of the page when user clicks the
image it should open on another web page has been verified and executed successfully
193181101012 14 JAYASHREE.R
EXP NO: 4 DATE:17-09-2021
FLOATING IMAGE WITH PARAGRAPH TAGS
AIM:
To write a html code to create a floating image with paragraph tags
ALGORITHM:
STEP 1: Open <html>tag and <body> tag.
STEP 2: Open <h1> tag and give the information and close <h1>.
STEP 3: Open <p> tag and give the details.
STEP 4: Open <imgsrc>tag and give the image and align it in left side and close </p> tag.
STEP 5: Repeat step 3 and 4 by aligning the next image in lest side and close the respective tags.
193181101012 15 JAYASHREE.R
PROGRAM:
<!DOCTYPE html>
<html>
<head><P>THIS PROGRAM WAS DONE BY R.JAYASHREE REG NO:193181101012</P>
<title>program 4</title>
</head>
<body>
<p> ball is a round shape </p>
<p>peacock is a national bird</p>
</body>
</html>
193181101012 16 JAYASHREE.R
EXPLANATION:
page
LINE4: The h1 tag has been opened and closed. Here the heading for the web page has been
given.
LINE7:The img src tag has given along with border ,height and the picture has been aligned to
left
LINE8:The paragraph tag has given to enter the content inside the program.
LINE9:The img src tag is given. along with border ,height and the picture has been aligned to
right.
LINE10:The paragraph tag has given to enter the content inside the program.
LINE11: The h5 tag has been opened and closed.
LINE12: The body tag has been closed..
193181101012 17 JAYASHREE.R
OUTPUT:
193181101012 18 JAYASHREE.R
RESULT:
Thus the html code to create a floating image with paragraph tags has been verified and
executed successfully
193181101012 19 JAYASHREE.R
EXP NO: 5 DATE:23-09-2021
TABLE
AIM:
Create a web page to display a table and fill the data in the table created
ALGORITHM:
STEP 1: Open the html and head tag.
STEP 2: Open table tag and specify the width, border.
STEP 3: Open the table-row tag and define bgcolor and alignment. Open the table data tag and
give data items.
STEP 4: Close the td tag and tr tag. Repeat
193181101012 20 JAYASHREE.R
PROGRAM:
<!DOCTYPE html>
<html>
<head><P>THIS PROGRAM WAS DONE BY JAYASHREE REG NO:193181101012</P>
<title>program 5</title>
</head>
<body>
<br><br><br>
<table border="15" width="50%" cellpadding="5" cellspacing="4" style="background-

color:white"
<tr>
<th colspan="5">
<h1>Details</h1>
</th>
<tr>
<th style="background-color:green">name</th>
<th style="background-color:blue">designation</th>
<th style="background-color:yellow">college</th>
</tr>
<tr>
<td>priyanka</td>
<td>assistant professor</td>
<td>kcg</td>
</tr>
<tr>
<td>praveen</td>
193181101012 21 JAYASHREE.R
<td>drmgr</td>
</tr>
<tr>
<td>arun</td>
<td>ade</td>
</tr>
<tr>
<td>dineshkumar</td>
<td>srm</td>
</tr>
<tr>
<td>saravanan</td>
<td>all</td>
</body>
</html>
193181101012 22 JAYASHREE.R
EXPLANATION:
LINE3:The table has been created with border ,width ,cellpadding(specify the amount of space
between the border of a table cell and its content) ,cellspacing(to specify space between the cells)
,background color ,alignment to center and vertical alignment to middle.
LINE4:The table row tag has been opened.
LINE5:The table header tag and colspan given( colspan attribute defines the number of columns
a table cell should span).
LINE6:The h1 tage has been given for heading.
LINE7:The table header has been closed.
LINE8:The table row has been closed.
LINE9:The table header is opened, the background color has been given and also the content in
side the cell is given. Then table header tag is closed.
side the cell is gSiven. Then table header tag is closed.
193181101012 23 JAYASHREE.R
LINE19 :The table row has been set and opened.
LINE20:The td tag is opened .table data is given such has background color and the content
inside the cell ,then the tag is closed.
LINE 30:The table row has been closed.
LINE31 :The table row has been set and opened.
LINE32 :The td tag is opened .table data is given such has background color and the content
193181101012 24 JAYASHREE.R
LINE 42:The table row has been closed.
LINE 43:The table row has been set and opened.
193181101012 25 JAYASHREE.R
LINE54 :The table row has been closed.
LINE 55:The paragraph tag is opened , the content has been given and the tag is closed.
LINE56:The table tag is closed.
193181101012 26 JAYASHREE.R
OUTPUT:
vv
RESULT:
Thus the web page to display a table and fill the data in the table has been verified and
193181101012 27 JAYASHREE.R
EXP NO: 6 DATE :24-09-2021
LINKS AND FRAMES

.
AIM:
Create a web page having to frames one containing links and another with contents of the
link when link is clicked appropriate contents should be displayed on frame.
ALGORITHM:
STEP 1: Open the html and head tags.
STEP 2: Open the <frameset> and give the size.
STEP 3: Create a frame source for 2 frames. Give the link in page1 so that it is displayed in
frame 2 using <a href> tags.
STEP 4: Close all the tags
193181101012 28 JAYASHREE.R
PROGRAM:
6.HTML
<!DOCTYPE.html>
<html>
<title>jayashree</title>
<frameset cols="20%,50%">
<frame src="2.html">
<frmeset cols="25%,25%">
</frame set>
</frame set>
</frame set>
</frame set>
</html>VV
193181101012 29 JAYASHREE.R
193181101012 30 JAYASHREE.R
6.1.HTML
<!DOCTYPE html>
<html>
<body>
<h1>KRP Solutions</h1>
<h2>about us</h2>
<p><a href=target="frame 1">contact Information</a></p>
<p><a href=services></a></p>
<p><a href>hours of operation works</a></p>
<p><a href>Product of operation</a></p>
<ol>
<li>Bread</li>
<br>
<li>Apple</li>
</ol>
</body>
</html>
193181101012 31 JAYASHREE.R
6.2.HTML
<!DOCTYPE html>
<html>
<body>
<h1>THIS PROGRAM WAS DONE BY ARAVIND.P,193181101003</h1>
<h2> contact information</h2>
<p>ARAVIND>P<br>
019876543211<br>
abcdefgh<br>
</p>
<p>for any kind of information kindly visit our website</p>
<p>conatct info-*****</p>
<h2> Hours of operation Works</h2>
</body>
</html>
193181101012 32 JAYASHREE.R
6.3.HTML
<!DOCTYPEhtml>
<html>
<body>
<h1>MGR UNIVERSITY</h1>
<p>Research And INStuite of technology<br>
</p>
<p>for any kind of information kindly visit our website</p>
<p>contact info<br>
987654321<br>
</p>
</body>
</html>
193181101012 33 JAYASHREE.R
EXPLANATION:
6.HTML (explanation)
page.
LINE4:The title tag is opened then the content is given and the tag is closed.
LINE5:Here frameset cols attribute is used to specify the size and the number of columns in a
frameset.
LINE6: Here the frame source tag is given and the scrolling function is given yes.
LINE7:The frame is set and row size is given.
LINE8:The frame source is given .
LINE9: Here frameset cols attribute is used to specify the size of the frame set.
LINE10:The frame source is given .
LINE11:Here frameset cols attribute is used to specify the size of the frame set.
LINE12: The frame source is given
LINE13:The frame set is closed.
LINE17:The html tag is closed.
193181101012 34 JAYASHREE.R
6.1.HTML (explanation)
LINE3: The body tag has been opened.
LINE4:The header tag h1 is opened ,the content is given and the tag is closed
LINE5: The header tag h2 is opened ,the content is given and the tag is closed
LINE6:The paragraph tag is opened
LINE7:The a href tag(refers to specify the url page the link goes to) and the target is set to frame
one where the program should be placed, then the content is given and the tag is closed and the
paragraph tag is closed.
LINE8:The paragraph tag and a href tag is opened and the content is given then the tag is closed.
LINE9: The paragraph tag and a href tag is opened and the content is given then the tag is closed.
LINE10:The paragraph tag and a href tag is opened and the content is given then the tag is
closed.
LINE11:The ordered list tag is created
LINE12:The list tag is given and he content is entered , then the tag is closed.
LINE13:The break tag is given.
LINE17:The ordered list tag is closed.
LINE18:The body tag is closed.
193181101012 35 JAYASHREE.R
LINE5: The header tag h2 is opened ,the content is given and the tag is closed
LINE6:The paragraph tag is opened
LINE7:The a href tag(refers to specify the url page the link goes to) and the target is set to frame
one where the program should be placed, then the content is given and the tag is closed and the
paragraph tag is closed.
LINE8:The paragraph tag and a href tag is opened and the content is given then the tag is closed.
LINE9: The paragraph tag and a href tag is opened and the content is given then the tag is closed.
LINE10:The paragraph tag and a href tag is opened and the content is given then the tag is
closed.
LINE11:The ordered list tag is created
LINE17:The ordered list tag is closed.
193181101012 36 JAYASHREE.R
LINE1: the DOCTYPE decleration is an instruction to a web browser about what version of
LINE5: The paragraph tag is opened, the content is entered and the break tag is given.
LINE6:The content is entered and a break tag is given.
LINE7: The paragraph tag Is closed.
LINE9:The html tag is closed
193181101012 37 JAYASHREE.R
OUTPUT:
RESULT:
Thus the web page having two frames containing one as link to its contents has been
193181101012 38 JAYASHREE.R
EXP NO: 7 DATE:30-09-2021
FORMS
AIM:
Create a simple form accepting Name, Reg. No and Submit button.
ALGORITHM :
STEP 1: Open the html tag. Determine the styles of respective classes inside the body tag along
with their details.
STEP 2: Open form tag. Give details of form inside the for tag and their styles there itself.
STEP 3: Close the form, body, and html end tags.
193181101012 39 JAYASHREE.R
PROGRAM:
<!DOCTYPE html>
<html>
<title>Form</title>
</head>
<body>
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdN8d0H4qhcGv2-
x55_V8nU3FDnXqbyyyRtXORjsG2upTdTuQ/formResponse" target="_self" method="POST"
<label>STUDENT NAME</label>
<input class="STUDENT NAME" type="text" name="entry.1983101012"><br><br>
<label>REG NO</label>
<input class="REG NO" type="number" name="entry.86816789">
<p><button type="submit">Submit</button></p>
</form>
</body>
</html>
EXPLANATION:
page
193181101012 40 JAYASHREE.R
LINE5: Head tag has been closed .
LINE7: The form tag is opened . Here form action tag is used to define what should happen to
data when a form is submitted on a web page.
LINE8: The label tag is opened and closed(used to specify a label for an <input> element of a
form. Text is given inside the tag.
LINE9: Here input tag is given where user can enter data. Type is given for which type the data
will be enter example text ,place holder is a tag where the entered data should be registered.
LINE10: The label tag is opened and closed(used to specify a label for an <input> element of a
form. Text is given inside the tag
LINE11: Here input tag is given where user can enter data. Type is given for which type the data
will be enter example text ,place holder is a tag where the entered data should be registered.
LINE12:The paragraph tag is given to enter the data and tag is closed
LINE13:The h5 tag is given to display the heading and the tag is closed.
LINE14:The form tag is been closed.
LINE16: The html tag has been closed.
193181101012 41 JAYASHREE.R
OUTPUT:
RESULT:
Thus the program to create a simple form accepting Name, Reg. No, and submit button has been
193181101012 42 JAYASHREE.R
EXP NO: 8 DATE:01-10-2021
CSS
AIM:
To write a simple style sheet using font-size property for text sizes.
ALGORITHM:
STEP 1: Start the program.
STEP 2: Create the style tag in head column.
STEP 3: Use div.a, div.b and div.c and give the style px, em, %.
STEP 4: Close the style tag and head tag.
STEP 5: Give the content for the divisions.
STEP 6: Close the body and html tag.
193181101012 43 JAYASHREE.R
193181101012 44 JAYASHREE.R
PROGRAM:
<!DOCTYPE.html>
<html>
<body>

NO:193181101012</p>
div.a{
font-size:2.875em;
div.b{
font-size:100%;
div.c{font-size:70px;
</style>
</head>
<body>
<h1>The font-size property</h1>
<div class="a">DHONI FINISHES OF HIS STYLE</div>
<div class="b">INDIA LIFT THE WORLDCUP AFTER 28 YEARS</div>
<div class="c">AND ITS AN INDIAN CAPTAIN WHO IS BEING

ABSOLUTELY MAXIMUM IN NIGHT OF FINAL</div>
</body>
</html>
193181101012 45 JAYASHREE.R
193181101012 46 JAYASHREE.R
EXPLANATION:
page
LINE4: The style tag is been opened .(contains the css and information for a document or a part
of a document)
LINE5: Division tag is given to make a division of content in the web page and has been named
as A.
LINE 6:Font size has been declared .
LINE7:Division tag is closed.
LINE8: Division tag is given to make a division of content in the web page and has been named
as B.
LINE11:Division tag is given to make a division of content in the web page and has been named
as C.
LINE14:The style tag is closed.
LINE15:The head tag closed.
LINE16:The body tag is opened.
LINE17: The h1 tag is given to display the content inside the tag.
LINE18:The content for division A is given.
LINE19:The content for division B is given.
LINE20:The content for division C is given.
193181101012 47 JAYASHREE.R
193181101012 48 JAYASHREE.R
OUTPUT:
193181101012 49 JAYASHREE.R
RESULT:
Thus the simple style sheet using font-size property for text sizes has been verified and executed
successfully.
193181101012 50 JAYASHREE.R
EXP NO: 9 DATE:21-10-2021
CSS AND TEXT COLOR
AIM:
To create a style sheet to implement the class attribute and id to differentiate the text color
ALGORITHM:
STEP 1: Start the program with html tag.
STEP 2: Give the suitable head in the head tag.
STEP 3: Now create a class and id attribute for different paragraph.
STEP 4: Create a style using the <style> tag for each attribute.
STEP 5: Save the program and run in chrome.
193181101012 51 JAYASHREE.R
PROGRAM:
<!DOCTYPE.html>
<html>
<head>THIS PROGRAM WAS DONE BY R.JAYASHREE REG NO:193181101012</p>
<body>
<style>
#class{
background-color:#ff5733;
font-size:25px;
</style>
</head>
<body style="text-align:center">
<h1>Dr.MGR EDUCATIONAL & Research Institute</h1>
<P ID="CLASS">Third year Bsc ISCF</p>
<p>year of passing 2019-2022</p>
</body>
</html>
193181101012 52 JAYASHREE.R
EXPLANATION:
page.
LINE4:The title tag is opened , the title is given and and the tag is closed.
LINE5: The style tag is been opened .(contains the css and information for a document or a part
of a document)
LINE6:# is given to make a division of content in the web page and has been named as aravind.
LINE7:Color has been given.
LINE8:Font size has been declared .
LINE9:} tag is closed.
LINE10:The style tag is closed.
LINE12:The body tag is opened, and text I aligned to center.
LINE14:The paragraph tag is given then id is given to take the content from #aravind. and the
content inside the paragraph tag is given then the tag is closed.
LINE15:The paragraph tag is given, the content is given and the tag is closed.
193181101012 53 JAYASHREE.R
OUTPUT:
193181101012 54 JAYASHREE.R
RESULT:
Thus the style sheet to implement the class attribute and id to differentiate the text color
has been executed successfully.
193181101012 55 JAYASHREE.R
EXP NO: 10 DATE:21-10-2021
FIBONACCI SERIES - JAVASCRIPT
AIM:
To write a program to compute Fibonacci sequence using java script.
ALGORITHM:
STEP 1: Open and start the program with html tag.
STEP 2: Give the heading if required

.
STEP 3: Open the script and define the type as text/javascript.
STEP 4: Give the required coding for Fibonacci series.
STEP 5: Save the program and run.
193181101012 56 JAYASHREE.R
PROGRAM:
<!DOCTYPE html>
<html>
<head><p>THIS PROGRAM WAS DONE BY R.JAYASHREE REG NO:193181101012</P>
<meta charset="utf-8">
<title> Fibonacci Series</title>
</head>
<body>
<script>
var n1 = 0, n2 = 1, next_num, i;
var num = parseInt (prompt (" Enter the limit for Fibonacci Series "));
document.write( "Fibonacci Series: ");
for ( i = 1; i <= num; i++)
{ document.write (" <br> " + n1);
next_num = n1 + n2;
n1 = n2;
n2 = next_num;
</script>
</body>
</html>
193181101012 57 JAYASHREE.R
EXPLANATION:
page.
LINE4:This line use the utf-8 character encoding when translating machine code into human
readable text and vice versa to be displayed in the browser.
LINE5:The title tag is opened , the title is given and and the tag is closed.
LINE7:The body tag is opened
LINE8:The script tag is opened.
LINE9:The var is given which indicates mathematical expression in a program
LINE10:The variable number is given , parseInt function converts its first argument to a string
LINE11:The alert page content is given.
LINE12:For tag is given and formula is entered.
LINE13:Document.write method writes a string of text to a document stream opened by a

document.
LINE14:This line means n1+n2
LINE15:This line means n1 is = to n2
LINE16:This line means n2 is =next_num;
LINE17: } tag is closed.
LINE18:The script tag is closed.
LINE21:The html tag has been closedS
193181101012 58 JAYASHREE.R
OUTPUT:
RESULT:
Thus the Fibonacci series using java script program has been verified and executed successfully.
193181101012 59 JAYASHREE.R
EXP NO: 11 DATE:22-10-2021
JAVASCRIPT-COPY FROM DIFFERENT FIELD
AIM:
To write a simple java script program to copy text from different field.
ALGORITHM:
STEP 1: Write the html program starting with html tag.
STEP 2: Give the title in the head if required.
STEP 3: Create form in the body by which it has the checkbox input.
STEP 4: Create another form in which the body will be copied

.
STEP 5: Write the script for the copying of the text.
STEP 6: Close the program and execute it.
193181101012 60 JAYASHREE.R
PROGRAM:
<!DOCTYPE html>
<html>
<head><P>THIS PROGRAM WAS DONE BY R.JAYASHREE REG

NO:193181101012</P>
<meta charset="utf-8">
<title>JS program to copy to clipboard</title>
</head>
<body>
<html>
<head>
<script>
function FillBilling(f) {
if(f.billingtoo.checked == true) {
f.billingname.value = f.shippingname.value;
f.billingcity.value = f.shippingcity.value;
</script>
</head>
<body>
<h2>Mailing Address</h2>
<form>
<p>Name:raji
193181101012 61 JAYASHREE.R
<input type="text" name="shippingname"></p>
<p>City:chennai
<input type="text" name="shippingcity">
</p>
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">
<em>Check this box if Billing Address and Mailing Address are the same.</em>
<P>
<h2>Billing Address</h2>
<p>
Name:raji
<input type="text" name="billingname">
</p>
<p>City:chennai
<input type="text" name="billingcity">
</P>
</form>
</body>
</html>
</body>
</html>
EXPLANATION:
193181101012 62 JAYASHREE.R
page.
LINE4:This line use the utf-8 character encoding when translating machine code into human
readable text and vice versa to be displayed in the browser.
LINE5:The title tag is opened ,then title given and title tag is closed.
LINE6:The head tag is closed.
LINE7:The body tag is opened.
LINE8:The html tag is opened again.
LINE9:The head tag is opened again.
LINE10:The script tag is opened.
LINE11:The function is given as fillbilling and the left parentheses is opened.
LINE12:Here is the user clicks the check box the following details will happen and the left
parentheses is opened.
LINE13:Here the billing name details will be copied to shipping name
LINE14:Here the billing city details will be copied to shipping city
LINE15:Right parentheses is closed.
LINE16:Right parentheses is closed .
LINE17:The script tag is closed.
LINE18:The head tag is closed.
LINE19:The body tag is created.
LINE20:Header tag h2 is opened then the content is entered and the tag is closed.
LINE21:The form tag is opened
LINE22: The paragraph tag is created & content is entered. Input type is given as text and
name id given as shipping name .then the tag is closed.
LINE23: : The paragraph tag is created & content is entered. Input type is given as text and
name id given as shipping city .then the tag is closed.
LINE24:Input type is given as checkbox, its designed as once the check box is clicked the details
filled in the above box will be pasted inside the blow box.
193181101012 63 JAYASHREE.R
LINE25:The em tag is opened(emphasized text) the content is entered and the tag is closed.
LINE26:The header tag is created and the content is entered and the tag is closed.
name id given as billing name .then the tag is closed.
name id given as billing city .then the tag is closed
LINE29:The form tag is closed.
LINE33:Header tag is given and the content is entered and the tag is closed.
193181101012 64 JAYASHREE.R
OUTPUT:
RESULT:
193181101012 65 JAYASHREE.R
Thus the simple java script program to copy text from different fields has been executed
successfully.
193181101012 66 JAYASHREE.R
EXP NO: 12 DATE:22-10-2021
ODD OR EVEN USING JAVASCRIPT
AIM:
To write a program to check the given number is odd or even using java script.
ALGORITHM:
STEP 1: Start the program with html tag.
STEP 2: Enter the title if needed.
STEP 3: Write the required scripting inside the body tag.
STEP 4: Use if else condition to check the number.
STEP 5: Close the file and run the program.
193181101012 67 JAYASHREE.R
PROGRAM:
<!doctype html>
<html><P>
<head></P>THIS PROGRAM WAS DONE BY R.JAYASHREE REG

NO:193181101012</P>
<script>
var num, temp;
function fun()
num = parseInt(document.getElementById("num").value);
if(num)
temp = document.getElementById("resPara");
temp.style.display = "block";
if(num%2==0)
document.getElementById("res").innerHTML = "Even";
else
document.getElementById("res").innerHTML = "Odd";
</script>
</head>
<body>
193181101012 68 JAYASHREE.R
<p>Enter the Number: <input id="num"><button
onclick="fun()">Check</button></p>
<p id="resPara" style="display:none;">It is an <span id="res"></span>

Number</p>
</body>
</html>
EXPLANATION:
page
LINE4: title has been opened and the title is given and the tag is closed.
LINE 6: The body tag is opened.
LINE7:content inside the body tag is given and input id is also given .
LINE8:Button is set and the content inside the button is given has “click me”
LINE9: Script tag is opened.
LINE10:Function is given as odd or even
LINE11: left parentheses is opened
LINE12:Variable is no
LINE13:Sets the location no_input to get the value
LINE14:If function is used
193181101012 69 JAYASHREE.R
LINE15:left parentheses Is opened
LINE16:Alert tag is given as even number
LINE17:right parentheses is closed
LINE18:Else tag is used
LINE19: left parentheses Is opened
LINE20: Alert tag is given as odd number
LINE23:Script tag is closed
LINE24:Body tag is closed
LINE25:The h5 tag is given to show the content in the last .
193181101012 70 JAYASHREE.R
OUTPUT:
193181101012 71 JAYASHREE.R
VV
RESULT:
Thus the program to execute the given numbers is odd or even using java script has been
executed successfully
193181101012 72 JAYASHREE.R
EXP NO: 13 DATE:28-10-2021
SWITCH CASE-JAVASCRIPT
AIM:
To implement switch case to find the days of the week using java script
ALGORITHM:
STEP 1: Open and start the program using the html tag.
STEP 2: Give the heading if required.
STEP 3: Give the input in which the number of the week is to be given.
STEP 4: Enter the scripting using the switch case. STEP 5: Give the default if not a valid input
is given.
STEP 6: Close the program and save the file.
193181101012 73 JAYASHREE.R
PROGRAM:
<html>

NO:193181101012</P>
<p>Enter the number to view the day<p>
<h2 style=”text-align:center”>DAYS OF THE WEEK</h2>
<input type="text" id="ARAVIND" />
<input type="button" value="Click "

onclick="javascript:days(parseInt(document.getElementById('ARAVIND').v
alue));" />
<script type=text/javascript>
function days(dayOfTheWeek)
switch (dayOfTheWeek)
case 1:
alert("It’s Monday"); break;
case 2:
alert("It's Tuesday"); break;
case 3:
alert("It’s Wednesday"); break;
case 4:
alert("It’s Thursday "); break;
case 5:
193181101012 74 JAYASHREE.R
alert("It’s Friday"); break;
case 6:
alert("It’s Saturday "); break;
case 7:
alert("It’s Sunday "); break;
default:
alert("Valid DAY (1-7)"); break;
</script>
</html>
193181101012 75 JAYASHREE.R
EXPLANATION:
LINE2:paragraph tag is opened , the content is entered and the tag is closed.
LINE3:Header tag is opened , the text is aligned to center , the content has been entered and the
tag is closed.
LINE4:Input type is given as text and id id mentioned
LINE5:Input type is given as button and element id is given as aravind.
LINE6:Script tag is opened
LINE7:function is given as days of week
LINE8:left parentheses is opened.
LINE9:Switch case is used inside the program
LINE10:left parentheses is opened.
LINE11:if the user click the no1 then the condition executes
LINE12:Alerts as “its Monday “will be displayed in the web page
LINE14:Alerts as “its Tuesday” will be displayed in the web page
LINE16:Alerts as “its wednesday” will be displayed in the web page
LINE18:Alerts as “its thursday” will be displayed in the web page
LINE20:Alerts as “its friday“ will be displayed in the web page
193181101012 76 JAYASHREE.R
LINE22:Alerts as “its saturday” will be displayed in the web page
LINE24:Alerts as “its sunday” will be displayed in the web page
LINE25:if the user clicks othe than the 7 digits then the condition executes
LINE26:Alerts as “Enter a valid day (1-7)” will be displayed in the web page
LINE27:Right parentheses is closed
LINE28:Right parentheses is closed
LINE29:Script tag is closed
LINE30:Header tag is given and the content is given.
193181101012 77 JAYASHREE.R
OUTPUT:
193181101012 78 JAYASHREE.R
RESULT:
Thus the program to implement switch case to find the days of the week using java script
has beeSn executed successfully.S
193181101012 79 JAYASHREE.R

Aravind.p

Uploaded by

Document Information

Original Title

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

Aravind.p

Uploaded by

Copyright:

Available Formats

RECORD NOTEBOOK

WEB DESIGN LAB – (HBCS17L07)

2021– 2022 (ODD SEMESTER)

COMPUTER SCIENCE AND ENGINEERING

COURSE : B.Sc, ISCF

YEAR / SEM / SEC : III, V, A

Register No: 193181101012

NAME OF LAB : WEB DESIGN LAB (HBCS17L07)

DEPARTMENT : COMPUTER SCIENCE AND ENGINEERING

Certified that this is the bonafide record of work done by

JAYASHREE.R of II Year B.Sc, ISCF, Sec-‘A’ in the

Signature of Lab-in-Charge Signature of Head of Dept

Submitted for the Practical Examination held on

Internal Examiner External Examiner

EXP NO DATE EXPEIRMENT NAME PAGE NO SIGNATURE

1 16-09-2021 WEB PAGE CREATION

2 16-09-2021 ORDERED AND UN-ORDERED

3 17-09-2021 HYPERLINK USING IMAGE

4 17-09-2021 FLOATING IMAGE WITH

6 24-09-2021 LINKS AND FRAMEMS

9 21-10-2021 CSS & TEXT COLOR

10 21-10-2021 FIBONACCI SERIES

11 22-10-2021 JAVASCRIPT-COPY TEXT

12 22-10-2021 ODD OR EVEN USING

13 28-10-2021 SWITCH CASE - JAVASCRIPT

EXP NO:1 DATE:16-09-2021

STEP 5: Close the end tags of marquee, body and html.

<head><p>THIS OUTPUT WAS DONE BY R.JAYASHREE REG

<title>my first page</title>

<h1>my first page</h1>

<marquee width="50%" direction="up" height=75px>

LINE5: head tag has been closed .

LINE8:The body tag has been closed.

LINE13:The h2 tag is given to display the content.

LINE14:The marquee tag has been closed.

LINE15:The html tag has been closed

ORDERED AND UN-ORDERED LIST

STEP 1: Start the program with HTML tag.

<head><p>THIS PROGRAM WAS DONE BY R.JAYASHREE REG

<title>ordered & unordered</title>

LINE5: head tag has been closed .

LINE 6: The body tag has been opened.

LINE8:The ol tag been given. which initiates ordered list.

LINE13:The ordered tag has been closed.

LINE14: The body tag has been closed.

LINE15:The ul tag been given. which initiates unordered list.

LINE20:The unordered tag has been closed.

LINE21:The h5 tag is given to display the content

LINE22: The body tag has been closed.

LINE23:The html tag has been

HYPERLINK USING NAME

STEP 3: Open <img> tag and give source <src> tag.

STEP 4: Close all the end tags.

<head><P>THIS PROGRAM WAS DONE BY R.JAYASHREE REG

<p>click on image more to next

LINE5: head tag has been closed .

LINE 6: The body tag has been opened.

LINE9: The h5 tage has been opened and closed.

LINE10: The body tag has been closed..

LINE11:The html tag has been closed.

FLOATING IMAGE WITH PARAGRAPH TAGS

STEP 1: Open <html>tag and <body> tag.

STEP 3: Open <p> tag and give the details.