Google Ad

HSC Complete Baord
SOP Practicals
of Advacned Web Desgining, COMPURISED ACCOUNTING WITH GST, Database Concepts with code and output are as follows


(Q1) SOP-1:Creation of website using HTML5
Answer:-

Page1- Main.html

 

<html>

<head>

<title> Main Page </title>

</head>

<body background="Tulips.jpg">

<h1><center>Welcome to The B.S.G.D Junior College of Commerce,Arts and Science

</center></h1>

<h2><marquee>Malad West</marquee></h2>

<br>

<br>

<br>

<nav>

<h2><center><a href="Index.html">College Profile</a></center></h2>

<h2><center><a href="Form.html"> Feedback Form</a></center></h2>

</nav>

</body>

</html>

 

Page2- Index.html

 

<html>

<head>

<title> The B.S.G.Ds Jr college </title>

<style>

h1{color:blue;text-align:center;} b{font-size:50px;}

body{background-image:url('Tulips.jpg');background-size:cover;}

</style>

</head>

<body>

<img src="Logo.jpg" alt="bsgd jr college" widhth=150 height=150>

<h1> THE B.S.G.D's Junior College of Commerce,Arts and Science</h1>

<h1><b>of Commerce</b>,<i>Arts</i> & <u>Science</u>

<p> The location of the college is in Malad (west) mumbai-400064 </p></h1>

<nav>

 

<a href="Main.html">Main Page</a><br>

<a href="Form.html">Feedback Form </a>

</nav>

</body>

</html>

 

Page3- Form.html

 

<html>

<head>

<title> Feedback Form </title>

</head>

<body bgcolor="lightgreen">

<h1> Feedback Form </h1>

<form name=f1 method="post">

<h3>Firstname:<input type="text"></h3>

 

<h3>Lastname:<input type="text"></h3>

<h3>Gender

<input type="radio" name="r1">Male

<input type="radio" name="r1">Female

</h3>

<h3>Email-Id:<input type="email"></h3>

<h3><input type="submit" value="Send"></h3>

</form>

 

</body>

 

</html>

 

Output:

 

https://itexamnotes.com/sop/practicals/A1.png

https://itexamnotes.com/sop/practicals/A2.png

https://itexamnotes.com/sop/practicals/A3.png

(Q2) SOP-2 :Create a webpage using HTML and CSS code to design a webpage.
Answer:-

SOP2.html

 

<html>

<head>

<title> Tourist Place </title>

<style>

section{background-color:yellow;width:50%;height:50%; float:left;color:black;font-size:30px;outline-style:solid;} aside{background-color:pink;width:50%;height:50%; float:right;color:black;font-size:30px;outline-style:solid;}

</style>

</head>

<body>

<header style="background-color:lightblue;color:deeppink;text-align:center; height:30%;width:100%;font-size:50px;outline-style:solid">Tourist places

</header>

<header>

<section>

<b> City </b>

<ol>

<li> Pune </li>

<li> Delhi </li>

<li> Banglore </li>

<li> Hyderabad </li>

</ol>

</section>

<aside>

<p> Tourist places in Pune </p>

<ul>

<li> Shaniwarwada </li>

<li> Sinhgad </li>

<li> Kelkar Museum </li>

</ul>

</aside>

</header>

</body>

</html>

 

Output:

 

https://itexamnotes.com/sop/practicals/A4.png

(Q3) SOP-3 Use of Audio webpages using HTML5
Answer:-

Audio.html

<html>

<head>

<title> Audio </title>

</head>

<body>

<p> Audio sample </p>

<audio controls loop>

<source src="Side - A.mp3" type="audio/mp3">

</audio>

</body>

</html>

 

Audio1.html

 

<!DOCTYPE html>

<html>

<body>

<h1>The audio </h1>

<audio controls autoplay>

<source src="Side - A.mp3" type="audio/mp3">

<source src="Side - A.ogg" type="audio/ogg">

<source src="Side - A.wav" type="audio/wav"> Your browser does not support the audio element.

</audio>

</body>

</html>

 

Output:

 

https://itexamnotes.com/sop/practicals/A5.png

(Q4) SOP 4 : Use of video on web pages using html5.
Answer:-

1) Create a webpage named video.html to display a video file on web page and plays automatically with controls. The dimension of video area should be 150* 150 pixels.

HTML PROGRAM :-

 

<html>

<head>

<title>Video Insert Practical</title>

</head>

<body>

<video src="waterfalls.mp4" type="video/mp4" height="150" width="150" controls autoplay="autoplay">

</video>

</body>

</html>

 

2) Create another webpage which provide multiple source file formats for the same video file that plays a video automatically with controls. The dimension of video area should be 100* 100 pixels. The browser should display the message with appropriate attribute when video file is not supported by browser. The code must incorporate the list of video files formats (like webM, MP4 or ogg etc).

HTML PROGRAM :-

 

</html>

<html>

<head>

<title>Video Insert Practical</title>

</head>

<body>

<video height="150" width="150" controls autoplay="autoplay">

<source src="waterfalls.ogg" type="video/ogg" >

<source src="waterfalls.mp4" type="video/mp4”> Your browser does not support video tag

</video>

</body>

</html>

 

https://itexamnotes.com/sop/practicals/A6.png

(Q5) SOP 5 : Navigation on an image using Client side image Mapping in web page using html 5.
Answer:-

Create a webpage named imagemap. html with an inserted image having jpeg, png or gif extension. Create 3 different shapes (like rectangle, circle and polygon) which do not overlap. Note the co-ordinates making use of

 

HTML PROGRAM :-

<html>

<head><title>Image Mapping</title></head>

<body>

<img src="garden.jpg" alt="Garden Home" usemap="#garden">

<map name="garden">

<area shape="poly" coords="53,173,33,223,52,269,72,222" href="https://www.andersenwindows.com/windows-and-doors/doors/big-doors/" alt="click here to go to ">

<area shape="rect" coords="132,374,157,394"

href="https://dir.indiamart.com/impcat/garden-pole-light.html" alt="click here to go to ">

<area shape="circle" href="https://homebnc.com/best-flower-bed-ideas/" coords="468,389,35" alt="click here to go to ">

</map>

</body>

</html>

 

OUTPUT :-

 

 

https://itexamnotes.com/sop/practicals/A7.png

(Q6)

SOP 1: [Digital Marketing] With the help of SEO tool which is freely available optimize the website and write down the following findings. Ask the teacher/examiner to provide URL of the website to be optimized.

  1. Name of the website you are optimizing.
  2. Whether the site has Title Tag?
  3. Whether the site has Header Tags? If yes, which tags are there?
  4. Whether the Images used has Alt Attributes?
  5. What is the comment about usability?

 

 

Answer:-

We can use any Search Engine Optimization Tool which is freely available over the internet.

Step 01: Open any browser. Search www.seoptimer.com.

Step 02: Enter the proper URL of the website which teacher/examiner has provided.

Step 03: Click on Audit.

Step 04: Now by reviewing that page you can answer the following questions.

 

 

  1. Name of the website you are optimizing? Ans. www.givingway.com
  2. Whether the site has title tag? Ans. Yes   
  3. Whether the site has header tags? If yes, which tags are there? Ans. Yes  
    1. Header Tag
    1. Frequency
    1. H1
    1. 1
    1. H2
    1. 0
    1. H3
    1. 19
    1. H4
    1. 6
    1. H5
    1. 0
    1. H6
    1. 0
  4. Whether the Images used has Alt Attributes? Ans. No
  5. What is the comment about usability? Ans. A (Your Usability is good)
(Q7)

SOP 2: [Digital Marketing] Assume that you are appointed as a Digital Marketing Expert for a company name as XYZ Marketing Private Ltd. They have a website hosted on a web server. Suggest your client changes needed in the website to improve the speed of website and also make him aware about following

  1. Total numbers of recommended improvements are?
  2. Mention grades given for the following points
    1. SEO
    2. Usability
    3. Performance
    4. Security
  3. Check for broken links and images.
  4. Whether the website has links with the social media? If yes ,Give name of the social media .

(Take the name of the website from your teacher/examiner and get a report for Search Engine Optimization with tool freely available.)

Answer:-

Step 01: Open any browser. Search www.seoptimer.com.

Step 02: Enter the proper URL of the website which teacher/examiner has provided.

Step 03: Click on Audit.

Step 04: Now by reviewing that page you can answer the following questions.

Here we are using www.helpageindia.org website for optimization.

  •  

 

  1. Total numbers of recommended improvements are? Ans. 11
  2. Check for broken links and images. Ans. Not Present
  3. Whether the website has links with the social media? If yes , give name of the social media.  Ans. Yes. Facebook, Twitter, Instagram, YouTube, LinkedIn
  4. Mention grades given for the following points. Ans.  
  • SEO : B-
  • Usability : B
  • Performance : F
  • Security : A
(Q8)

SOP 1 :  [ COMPURISED ACCOUNTING WITH GST Practical ]  Mr. Ravindrakumar started business by the name M/s Bitwise Trading Company in the year 2019

COMPANY DETAILS

Company Name:           M/s Bitwise Trading Company

Address:                       102 M.G. Road, Bhavana Nagar, Latur - 413512

State:                            Maharashtra

Website:                       www.bitwisetrading.com

E-mail Id:                     info@bitwise.com

Maintain:                      Account with Inventory Financial Year From:       01-04-2019

Books Begin From :     01-04-2019

With the help of any open source or free education version accounting software pass the following transactions in appropriate vouchers to display and print various reports such as Trial Balance, Profit & Loss A/c, Balance Sheet and Day Book.

Date

Particulars

Amount (Rs)

1/04/2019

Mr. Ravindrakumar started business with cash

5,00,000

1/4/2019

Purchased goods from Sharada Steel works on credit

20,000

2/5/2019

Paid salary to staff

5,000

1/6/2019

Cash deposited into Bank of India

50,000

2/6/2019

Sold goods to Rakesh Enterprises on cash

25,500

2/7/2019

Purchased Machinery

10,000

2/12/2019

Received Interest on cash deposited in Bank of India

2,000

Answer:-

STEP 1: Creation of Company

Company Creation:

  • Open Tally ERP9 >> Tap on “W: Work in Educational Mode”
  • Company Info>> Click on Create Company
  • Create a company in the name of M/s Bitwise Trading Company with the given details.
  • Enter the details such as Name, Address, State, Website, Email-Id and Financial year begins on 01/04/2020.
  • Click on Enter, it will ask to Accept the details of the Company
  • Click on “YES” to Accept and save the details.

https://itexamnotes.com/sop/practicals/T7.png

Enabling the Features:

  •   Go to Features or Click F11
  • Inside “Company Features”>> Click on “Accounting Features”
  • Click on “Accounts with Inventory” >> Type Yes
  • Click on Enter, it will ask to Accept the changes
  • Click on “YES” to Accept and save the changes.

https://itexamnotes.com/sop/practicals/T6.png

STEP 2: Creation of Ledger

  • Inside Gateway of Tally
  • In the Masters>> Click on “Account Info”
  • Click on Ledger>>Under “Single Ledger” Category select “Create”
  • Create the Ledgers with following List of Groups:

Ledger

Under Groups

Capital A/c

Capital Account

Purchase A/c

Purchase Account

Sharda Steel A/c

Sundry Creditors

Salary A/c

Indirect Expense

Bank A/c

Bank Accounts

Sales A/c

Sales Account

Interest A/c

Indirect Income

 

  • To view the list of ledgers: Account Info>>Ledger>>Single Ledger>>Display

https://itexamnotes.com/sop/practicals/T5.png

STEP 3: Voucher Entries

  • To view the list of vouchers types: Masters >> Account Info>> Voucher Types >> Display

 

Date

 

Voucher Type

 

Particular Entries

 

Debit Amount

 

Credit Amount

 

01/04/2019

 

Receipt

 

Dr. Cash

Cr. Capital A/c

5,00,000

 

 

 

5,00,000

 

01/04/2019

 

Purchase

 

Dr. Purchase A/c Cr. Sharda Steel A/c

20,000

 

 

 

20,000

 

02/05/2019

 

Payment

 

Dr. Salary A/c Cr. Cash

5,000

 

 

 

5,000

 

01/06/2019

 

Contra

 

Dr. Bank of India A/c Cr. Cash

50,000

 

 

 

50,000

 

02/06/2019

 

Sales

 

Dr. Cash

Cr. Sales A/c

25,500

 

 

 

25,500

 

02/07/2019

 

Purchase

 

Dr. Purchase A/c Cr. Cash

10,000

 

 

 

10,000

 

02/12/2019

 

Receipt

 

Dr. Cash

Cr. Interest A/c

2,000

 

 

 

2,000

 

STEP 4: To view various reports

  • To view TrialBalance - Display > Trial Balance > Detailed Trial Balance

https://itexamnotes.com/sop/practicals/T4.png

  • To view Profit and Loss A/c – Reports >> Profit & Loss A/c

https://itexamnotes.com/sop/practicals/T3.png

  • Toview Balance Sheet - Reports >> Balance Sheet >> Detailed

https://itexamnotes.com/sop/practicals/T2.png

  • To view Day Book - Display > >Day Book > >Detailed (Alt + F1)

https://itexamnotes.com/sop/practicals/T1.png

 

 

(Q9)

SOP 1 :  [Database concepts using LibreOffice Base Practical]

  • Create a table student with fieldnames- rollno, studname, class, div, city, dob etc.
  • Insert minimum 8 records.
  • Create a form based on employee table.

 

Answer:-

Create a table student with fieldnames- roll no, stud name, class, div, city, dob etc.

Step 1-

  • Open LibreOffice Base
  • Create a table
    • Open a database and from left pane click on 'Tables' icon
    • From right pane click on 'Create table in Design View'
    • A window will appear on the screen, type 'Field Name'

https://itexamnotes.com/sop/practicals/D1.png

  • Select 'Field type' ( field type means type of data to be stored in that field
  • In next column type the description about the field.
  • In the bottom section in 'Field Properties' select 'Yes' for 'Entry required' property.
  • You can set default value and for numeric field types you can set decimal places also. In this way create all fields.
  • Right click on the small button present on the left side of the field name which is decided as primary key and select 'primary key' option.
  • Click on 'Save' icon to save the table, type name for the table, Click on 'ok'.

https://itexamnotes.com/sop/practicals/D2.png

Insert minimum 8 records.

Steps

  • Open a database, from left pane click on 'Tables' icon.
  • In the right pane from bottom part double click on the name of Table in which data is to be inserted.
  • A window will appear on the screen, type data under each field and

Complete one record; in this way add some records.

  • Click on 'Edit Data'  nbsp;icon to make edit mode off, a window will appear.
  • Click on 'Yes' icon and click on 'close' button.

https://itexamnotes.com/sop/practicals/D3.png

Create a form based on employee table.

Steps-

  • Open a database, from left pane click on 'Forms' objects.
  • From right pane click on 'Use Wizard to Create Form'.
  • Select name of 'Employee Table' and shift fields from 'Available fields' list to 'Fields in the form' list by clicking on arrow button then click on 'Next' button
  • Click on 'Next' button.
  • Select any one arrangement for main form for placing the controls (Ex-columnar labels left) and click on ‘Next’ button.
  • Click on ‘Next’ button.
  • Select style for the form , click on ‘Next’ button
  • Type Name for the form , click on ‘Finish’ button

https://itexamnotes.com/sop/practicals/D4.png

 

(Q10)

SOP 1) [Javascript Practical]  Create a web page in HTML having a white background and two Button Objects. Write code using JavaScript such that when the mouse is placed over the first button object without clicking, the color of the background of the page should change after every      seconds. There should at least be 7 different and visibly distinct background colors excluding the default color. When the second button object is clicked, appropriate message should be displayed in Browsers status bar.

Create  another  web  page  using  JavaScript  where  the  background  color changes automatically after every        seconds. This event must be triggered automatically  after  the  page  gets  loaded  in  the  browser.  There  should  at least be 7 different and visibly distinct background colors. When the page is unloaded, the appropriate alert message should be displayed.

Answer:-

js1.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body id="background">
	<h1>Background Color is being changed every 1 seconds</h1>
<script>
var i = 0;
function change() {


  var doc = document.getElementById("background");

  var color = ["red", "blue", "brown", "green","yellow","pink","orange"];
  doc.style.backgroundColor = color[i];
  i = i+1;
  if(i==7){
  	doc.style.backgroundColor = "white";
  }

  
}
function click_btn() {
  	window.status = "Background Color is being changed every 1 seconds";
  }
</script>
<input type="button" name="b1" value="over here" onmouseover="setInterval(change, 1000)">
<input type="submit" name="b2" value="click here" onclick="click_btn()">
</body>
</html>

 

FirstJs.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body id="background">
	<h1>Background Color is being changed every 1 seconds</h1>
<script>
var i = 0;
function change() {


  var doc = document.getElementById("background");

  var color = ["red", "blue", "brown", "green","yellow","pink","orange"];
  doc.style.backgroundColor = color[i];
  i = i+1;
  if(i==7){
  	doc.style.backgroundColor = "white";
  }

  
}
function click_btn() {
  	window.status = "Background Color is being changed every 1 seconds";
  }
</script>
<input type="button" name="b1" value="over here" onmouseover="setInterval(change, 1000)">
<input type="submit" name="b2" value="click here" onclick="click_btn()">
</body>
</html>

 

https://itexamnotes.com/sop/practicals/php1.png

SecondJs.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body id="background" onload="setInterval(change, 1000)">
	<h1>Background Color is being changed every 1 seconds</h1>
<script>
var i = 0;
function change() {


  var doc = document.getElementById("background");

  var color = ["red", "blue", "brown", "green","yellow","pink","orange"];
  doc.style.backgroundColor = color[i];
  i = i+1;
  if(i==7){
  	doc.style.backgroundColor = "white";
    alert("Page unload")
  }
}
</script>
</body>
</html>

 

https://itexamnotes.com/sop/practicals/php2.png

(Q11)

SOP 2) [Javascript Practical] 

Create  JavaScript  program  for  the  following  form  validations.  Make use of HTML5 properties to do the following validations :

  1. Name, address, contact number and email are required fields of the form.
  2. Address field should show the hint value which will disappear when field gets focus or key press event.
  3. Telephone number should be maximum 10 digit number only.
  4. Email field should contain valid email address, @ should appear only once and not at the beginning or at end. It must contain at least one dot(.).
  5. Make use of pattern attribute for email to accept lowercase, uppercase alphabets, digits and specified symbols.
Answer:-

index.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">
function ValidateEmail(inputText)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
document.form1.text1.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.form1.text1.focus();
return false;
}
}
	</script>
</head>
<body>
<h1>Information Form</h1>
<form action="" method="" name="f1">
<table>
<tr>
<td>Your Name</td>
<td><input type="text" name="t1" required></td>
</tr>
<tr>
<td>Address</td>
<td><textarea rows="5" cols="20" name="a1" required placeholder="Enter Address"></textarea></td>
</tr>
<tr>
<td>Contact</td>
<td><input type="number" name="n1" maxlength="10" required></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="email" name="e1" required></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="submit" onclick="ValidateEmail(document.f1.e1)"></td>
</tr>
</table>
</form>
</body>
</html>

 

Create &nbsp;JavaScript &nbsp;program &nbsp;for &nbsp;the &nbsp;following &nbsp;form &nbsp;validations. &nbsp;Make use of HTML5 properties to do the following validations

(Q12)

SOP 3) [Javascript Practical] 

Create event driven JavaScript program for the following. Make use of appropriate variables, JavaScript inbuilt string functions and control structures.

  • To accept string from user and count number of vowels in the given string.
Answer:-

index.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	
</head>
<body>
<script type="text/javascript">
function getVowels() {
  var vowelsCount = 0;
  var str = document.getElementById("t1").value;
  var string = str.toString();
  for (var i = 0; i <= string.length - 1; i++) {
    if (string.charAt(i) == "a" || string.charAt(i) == "e" || string.charAt(i) == "i" || string.charAt(i) == "o" || string.charAt(i) == "u") {
      vowelsCount += 1;
    }
  }
  //document.write("Total Vowels : "+vowelsCount);
  document.getElementById('demo').innerHTML = "Total Vowels : "+vowelsCount;
  return vowelsCount;
}
</script>
	<tr>
	<td><input type="text" id="t1"></td>
	<td><input type="submit" name="submit" onclick="getVowels()"></td>
		</tr>
	 <p id="demo"></p>
</body>
</html>

 

https://itexamnotes.com/sop/practicals/js3.png

(Q13)

SOP 4) [Javascript Practical] 

Create event driven JavaScript program for the following. Make use of appropriate variables, JavaScript inbuilt string functions and control structures.

  • To accept string from user and reverse the given string and check whether it is palindrome or not.
Answer:-

index.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	
function reverse_String() { 
	var str = document.getElementById('s1').value;
	var final_str = str;
    var split = str.split("");     
    var reverse = split.reverse();
    var reverse_data = reverse.join(""); 
    document.write("Reverse : "+reverse_data);
    if (final_str==reverse_data) {
    	document.write("<br>It is palindrome ");
    }	
    else{
    	document.write("<br>not palindrome ");
    }
}
	</script>
	<input type="text" id="s1" placeholder="Enter a Striing">
	<input type="submit" name="" onclick="reverse_String()">
    
</body>
</html>

 

https://itexamnotes.com/sop/practicals/js4.png

(Q14)

SOP 5) [Javascript Practical] 

Create event driven JavaScript program for the following. Make use of appropriate variables, JavaScript inbuilt string functions and control structures.

  • To accept string from user and reverse the given string and check whether it is palindrome or not.
Answer:-

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        function get_Fahrenheit(){
            var c = parseInt(document.getElementById('c1').value);
            var f;
            //(f-32)/9 = c/5; 
            f = c/5*(9)+32;
            document.write("Fahrenheit : "+f);
        }

        function get_Celsius(){
            var f = parseInt(document.getElementById('f1').value);
            var c;
            //(f-32)/9 = c/5; 
            c = ((f-32)/9)*5;
            document.write("Celsius : "+c);
        }
    </script>
</head>
<body>
        <input type="text" id="c1" placeholder="Temperature in Celsius">
        <input type="submit" onclick="get_Fahrenheit()">
        <br>

        <input type="number" id="f1" placeholder="Temperature in Fahrenheit">
        <input type="submit" onclick="get_Celsius()">
        
</body>
</html>
(Q15)

SOP 6) [Javascript Practical] 

Create  JavaScript  program  which  compute  the  average  marks  of students.  Accept  six  subject  marks  of  student  from  user.  Calculate average marks of student which is used to determine the corresponding grades.

Range                       Grade

35 to 60                    F

61 to 70                    D

71 to 80                    C

81 to 90                    B

91 to 100                  A

Answer:-

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Enter Marks</title>
<script type="text/javascript">
function submit_marks() {
var sub1 = parseInt(document.getElementById('s1').value);
var sub2 = parseInt(document.getElementById('s2').value);
var sub3 = parseInt(document.getElementById('s3').value);
var sub4 = parseInt(document.getElementById('s4').value);
var sub5 = parseInt(document.getElementById('s5').value);
var sub6 = parseInt(document.getElementById('s6').value);
var total = sub1+sub2+sub3+sub4+sub5+sub6;
var per  = total/6;
var grade;
if (per>=35 && per<=60) {
grade = 'F';
} 

else if(per>=61 && per<=70){
grade = 'D';
}

else if(per>=71 && per<=80){
grade = 'C';
}

else if(per>=81 && per<=90){
grade = 'B';
}

else if(per>=91 && per<=100){
grade = 'A';
}

else{
grade = "Invalid or Failed";
}
document.getElementById("demo").innerHTML = "Your Total Marks : "+total+"<br>Your Percentage : "+per+"<br>Your Grade : "+grade;
// document.write("Your Total Marks : "+total);
// document.write("<br>Your Percentage : "+per);
// document.write("<br>Your Grade : "+grade);
                
}
</script>
</head>
<body>
    <h1>Enter Students Marks</h1>
    <input type="text" id="s1" placeholder="Enter English Marks"><br>
    <input type="text" id="s2" placeholder="Enter IT Marks"><br>
    <input type="text" id="s3" placeholder="Enter OCM Marks"><br>
    <input type="text" id="s4" placeholder="Enter Economics Marks"><br>
    <input type="text" id="s5" placeholder="Enter Maths Marks"><br>
    <input type="text" id="s6" placeholder="Enter Account Marks"><br>

    <input type="submit" onclick="submit_marks()">

    <div id="demo"></div>
</body>
</html>

 

https://itexamnotes.com/sop/practicals/js5.png