Google Ad

Board SYJC Practical Slip Question with Answer


(Q1) Create a Website of 3 pages in which each web page is interlinked.
Select appropriate theme (like Hotel Profile, Company Profile, etc.) and create pages as follows.
The first page of the website has a background image related to the theme
1. An introduction to the theme has highest level heading and 4 physical tags
2.It has to hyperlinks. The color of the hyperlink should be other than default color.
The second page has
3. An order list with 5 items with descriptions.
4. A link to an e-mail address.
5. The second page should be connected to first page through an image icon (image hyperlink) and to the third page through text link
The third page has a form generated with controls like text, radio button, textarea and submit button. It connects to the homepage through an image icon. The second page is connected through a text link.
Get the handwritten code checked and corrected from the examiner.
Type and save the program with appropriate file name.
Execute the program and show it to the examiner.
Obtain the hardcopy of HTML code.
Answer:- We have to create Three HTML page to perform this practical.
Follow the following steps to perform above HTML practical:-
Step 1:-
(1) Create a folder name "SYJC" in Dekstop.
(2) Create First HTML page with name "firstpage.html".
(3) Add basic Structure of HTML.
(4) Add background image.
(5) Create two Hyperlink like Hyperlnk1 and Hyperlink2.
HTML Code of firstpage.html:-

<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
body { background-image: url("01.jpg"); } </style>
</head>
<body>
<h1>
This is highest Level of heading h1</h1>
<a href="secondpage.html">
Hyperlink 1 </a>
<br>
<a href="thirdpage.html">
Hyperlink 2 </a>
</body>
</html>
<br>

Step 2:-
(1) Create Second HTML page with name "secondpage.html".
(2) Add basic Structure of HTML.
(3) Add 5 ordered list items.
(4) add mailto funtion to HTML code.
(5) Create one image and click on that image "firstpage.html page will open".
(6) Create text link and click on this link will open "thirdpage.html".
HTML Code of secondpage.html:-

<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<h4>
Ordered List with 5 items are as follow </h4>
<ol>
<li> item 1</li>
<li> item 2</li>
<li> item 3</li>
<li> item 4</li>
<li> item 5</li>
</ol>
Email to <a href="mailto:xyz@gmail.com">
Amit Sir</a>
.<br>
Click on Image to go to First Page<br>
<a href="firstpage.html ">
<img src="01.jpg" height="150px" width="350px">
</a>
<br>
Click on Text link to go to third Page <a href="thirdpage.html">
Text Link </a>
</body>
</html>

Step 3:-
(1) Create Third HTML page with name "thirdpage.html".
(2) Add basic Structure of HTML.
(3) add form with controls like text, radio button, textarea, submit.
(4) Create one image and click on that image "firstpage.html page will open".
(5) Create text link and click on this link will open "secondpage.html".
HTML Code of thirdpage.html:-

<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br>
<br>
Male <input type="radio" name="male">
<br>
Female <input type="radio" name="female">
<br>
Enter your address <textarea>
</textarea>
<br>
<br>
<input type="submit" value="Submit">
</form>
<br>
<br>
Click on Image to go to First Page<br>
<a href="firstpage.html ">
<img src="01.jpg" height="150px" width="350px">
</a>
<br>
<br>
Click on Text link to go to Second Page <a href="secondpage.html">
Text Link </a>
</body>
</html>
(Q2) Creation of a Website using Frames
Create a website using frames with given layout.
Select appropriate theme like (College Profile,
Company Profile, and Environment etc.) and create
pages as follows.
The webpage is divided into 3 different frames left,
right and bottom.
The left and right section have hyperlinks. Each hyperlink on clicking displays data in
bottom frame of the webpage. The bottom most section changes the content
dynamically. Create internal CSS for hyperlinked files with three properties.
Get the handwritten code checked and corrected from the examiner.
Type and save the code on the computer with appropriate file names.
Execute and demonstrate the functioning of the code to the examiner.
Obtain hard copy of the code.
Answer:- Follow folowing steps to perform this practical:-
Step1:-
(1) Create folder name "SYJC".
(2) Create page1.html file.
(3) Add following code.


<html>
<head>
<title>
</title>
</head>
<body>
<a href="" target="contents">
Hyperlink1</a>
<h1>
thie is page 1</h1>
</body>
</html>

Step2:-
(1) Create page2.html file.
(2) Add following code.


<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<a href="" target="contents">
Hyperlink2</a>
<h1>
this is page2</h1>
</body>
</html>

Step3:-
(1) Create contents.html file.
(2) Add following code.x


<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<center>
<p>
Contents</p>
</center>
</body>
</html>

Step4:-
(1) Create frame.html file.
(2) Add following code.
(3)create frameset like below code.
(4) Add name attribute property to contents.html frame src.


<html>
<head>
<title>
</title>
</head>
<frameset rows="50%, 50%">
<frameset cols="50%, 50%">
<frame src="page.html">
</frame>
<frame src="page.html">
</frame>
</frameset>
<frame src="contents.html" name="contents">
</frame>
</frameset>
</html>

Conclusion:- Click on Hyperlink1 then that will apear on contents.html file.
(Q3) Hyperlink on a Web page using Client side image Mapping
Create a web page with an inserted image having jpeg or gif extension. Create 3 different
shapes which do not overlap, note their coordinates making use of Ms-Paint. Each shape
should be mapped with a different URL of which to should be to the functional world
wide web and one URL should be link to a local web page.
Get the handwritten code checked and corrected form the examiner
Create the web page without using existing code and save the code. Demonstrate
the execution of the code to the examiner
Obtain hard copy of the code
Note: Shape should not be drawn on the image. Shape should not go beyond the
boundary of the image displayed.
Answer:- Follow folowing steps to perform this practical:-
step1:-

(1) Create folder name "SYJC".
(2) Create client.html file.
(3) Insert Image in HTML File.
(4) Add usermap Attribute to image tag.
(5) Create map tag with name "map"
(6) Add Rectangle shape with 4 coordinates.
(7) Add Circle shape with 3 coordinates. Out of 3 coords, one coords will be one of (90,60,180,360)
(8) Add Polygon shape with 8 coordinates.
(9) Refer Following Code :-


<html>
<head>
<title>
</title>
</head>
<body>
<img src="c2.jpg" height="450px" width="450px" usemap="#map">
<map name="map">
<area shape="rectangle" coords="326,28,424,21" href="itexamnotes.com">
<area shape="circle" coords="90,33,81" href="">
<area shape="poly" coords="17,95,45,51,61,72,81,95" href="">
</map>
</body>
</html>
(Q4) Hyperlink on a Web page using Server side image Mapping
Create a web page with an inserted image having jpeg or gif extension. Create 3 different
shape which do not overlap. Make use of server side external image map where the map
file is stored on a web server and the hotspots coordinates should be noted using the MsPaint. Each shape should be mapped with a different URLs and same should be functional
on the world wide web. Do not create URLs to local Web Pages and do not create the target web pages.
Get the handwritten HTML code as well as code written for the external map file checked
and corrected form the examiner before using a computer.
Create the map file and Web page without using any pre-existing web pages or code. Save
the files, upload the map file to any web server that is local or a free web server on the
World Wide Web that supports image maps. Execute the same. Demonstrate proper
functioning of the same to the examiner. Obtain a hardcopy of the HTML code of the web page.
Answer:- Information:-

(1)In Server side mapping the map details are placed on the server.
(2)The browser activates program on the server by sending x and y coordinates of the position where the hyperlink was created.
(3)On receiving the coordinates the program on the server looks at the map file for close match and then loads the file that is closet to coordinates.
(4)In Server side mapping, the image map is mentioned by using ISMAP attribute in the tag.
(5)The map details are save in a text file with the extension .map and place this file in the same folder in which html document containing the image is
placed.

Note:- Server side image mapping - the map is written in globe.map file which is placed on server

globe.map

Default http://exza.in/xyz.html
Rect http://exza.in/page1.html 22,37,123,97
Circle http://exza.in/page2.html 286, 90, 45
Poly http://exza.in/page3.html 48,169,142,234,50,248

mapexample.html

<html>
<body>
<a href="http://exza,in/globe.map">
<img src="images/globe.jpg" ISMAP>
</a>
</body>
</html>
(Q5) Use of Audio and Animation on web pages
Create a webpage that continuously plays a background sound for specific number of
times without controls. This page must also contain an animated file where display
dimensions are 100X100 pixels. Make use of alternate text.
Create another webpage that plays a sound continuously with controls. The webpage
should contain animated image with display dimensions 100X100 pixels along with
alternate text. The audio files should be provided by the examiner and need not be encoded or created
by students. Any Wave,MP3 or Au sound may be used. Get handwritten Html code for both the pages checked and corrected from the
examiner before using a computer. Type the handwritten code and save it on the computer. Demonstrate the proper
functioning of the same to the examiner. Obtain a hardcopy of the HTML codes of both the web pages.
Answer:- Information:-

(1)To add background sound to html pages <bgsound> and <embed> tag is used.
(2)bgsound is supported by only Internet Explorer
(3)bgsound has no control attribute (play, stop, pause buttons).
(4)We can use <a> tag to link an audio resource on your computer or web.


Inserting Background Sound without control

<html>
<head>
<title>
</title>
</head>
<body>
<h1>
Inserting Background Sound without control</h1>
<bgsound src="audio.mp3" loop="-1">
</body>
</html>

Inserting Background Sound with control

<html>
<head>
<title>
</title>
</head>
<body>
<h1>
Inserting Background Sound with control</h1>
<embed src="audio.mp3">
</body>
</html>
(Q6) Use of Video on webpages
Create a webpage that plays a video infinite number of times with controls. The
displayed video should have dimensions 200X150 pixels. The video must being
playing on users interaction. Create another webpage that plays a video without controls for some specific number
of times. The dimension of video file should be 150X200 pixels. The video should play
when the mouse is placed over the video area. The video files should be provided by the examiner and need not be encoded or created
by students. Any AVI, MOV or MPEG file may be used. Get handwritten Html code for both the pages checked and corrected from the
examiner before using a computer. Type the handwritten code and save it on the computer. Demonstrate the proper
functioning of the same to the examiner. Obtain a hardcopy of the HTML codes of both the web pages.
Answer:- Information:-

(1)<embed> tag is used to insert video on the web page.
(2)<img> tag along with DYNSRC attribute is used to insert video in the web page.


Adding video to the web page using embed tag

<html>
<head>
<title>
</title>
</head>
<body>
<h1>
Adding video to the web page using embed tag</h1>
<embed src="videos/sample.mp4" height=480 width=640>
</body>
</html>

Adding video using img tag

<html>
<head>
<title>
</title>
</head>
<body>
<h1>
Adding video using img tag</h1>
<img DYNSRC="videos/sample.mp4" height=480 width=640>
</body>
</html>
(Q7)

Write a program using html with following CSS specification-

 

  1. The background colour of the company name should be in green.
  2. The text colour of the company name should be red.
  3. The heading should be large –with font ''comic sans ms''
  4. The description of the company should be displayed in blue color in a paragraph.
Answer:-

Note: In this question, They had not mentioned that which css use. Like internal css, inline css or external css. So here we can use any of them. Then inline css is most easy type of css. Here we will create this program using Inline CSS.

Program :

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h1 style="font-family: comic sans ms;">This is large Heading with font "comic sans ms"</h1>
    <p style="background-color: green; color: red">Company Name : XYZ Corporate Comoany</p>
    <p style="color: blue "    >Description : Write any description you want here</p>
</body>
</html>

Output:

 

outpu1

(Q8)

Write Html5 code with CSS as follows-

 

  1. To create form to accept name,age, email address, from the user.
  2. Create a submit button to send the data.
  3. The heading of the form should have a background colour and a different font style.
Answer:-

Program :

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<h1 style="background-color: red; font-family: cursive;">Form Heading</h1>
<form>
    name : <input type="text" name="name"><br><br>
    email : <input type="text" name="email"><br><br>
    Age   :
    <input type="radio" name="male" value="m">Male
    <input type="radio" name="female" value="f">Female<br><br>
    <input type="submit" name="submit" value="submit">
    
</form>
</body>
</html>

 

outpu2

(Q9)

Write Html5 code with CSS as follows-

  1. Create ordered list with names of tourist Cities
  2. Create  unordered  list  with tourist places of those cities
  3. Divide   the   list    into   two sections  left  and  right by using CSS.
Answer:-

Program

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        /* Pen-specific styles */
* {
  box-sizing: border-box;
}


/* Pattern styles */
div {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: 1rem;
}

.left-half {
  background: #ff9e2c;
}

.right-half {
  background: #b6701e;
}
</style>

</head>
<body>

<div class="left-half">
<p>tourist Cities</p>
<ol>
<li>Mumbai</li>
<li>Delhi</li>
<li>Gujrat</li>
<li>Punjab</li>
</ol>
</div>

<div class="right-half">
<p>tourist Cities</p>
<ol>
<li>Mumbai</li>
<li>Delhi</li>
<li>Gujrat</li>
<li>Punjab</li>
</ol>

</div>

</body>
</html>

 

outpu3

(Q10)

What are the uses of <P>, <B>, <br> and <mark> tags?

Answer:-

(1) <P> Tag : 

Meaning :  The <p> tag defines a paragraph. It is a block-level element and always starts on a new line. The <p> tag comes in pairs which is opening and closing tag.

Syntax    :  <p>...... content (Elements).......</p>

Example : 

 <!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

<p>This is a paragraph</p>

</body>

</html>

 

(2) <B> Tag : 

Meaning :  The <b> tag specifies bold text without any extra importance.

Syntax    :  <b>...... content (Elements).......</b>

Example : 

 <!DOCTYPE html>
<html>
<body>

<h1>The b element</h1>

<p>This is normal text - <b>and this is bold text</b>.</p>

</body>
</html>

 

(3) <B> Tag : 

Meaning :  <br> tag is used to break line. The <br> tag inserts a single line break. The <br> tag is an empty tag which means that it has no end tag.

Syntax    :  <br>  (Only have opening tag)

Example : 

 <!DOCTYPE html>
<html>
<body>

<h1>The br element</h1>

<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>

</body>
</html>

 

(4) <Mark> Tag : 

Meaning :  The <mark> tag defines marked text. <mark> tag is used to highlight the specific word or sentence.

Syntax    :  <mark>...... content (Elements).......</mark>

Example : 

<!DOCTYPE html>
<html>
<body>

<h1>The mark element</h1>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>
</html>

(Q11)

Create  a  website  using   HTML  and  CSS  code  to  design  webpages  as follows -

The  first  webpage  will  accept  the  name  of  the  traveller,  date  of  travel  , telephone number . It also has submit button as an image .

The second webpage has information about the name of transporter, time , seat no and destination displayed one below the other in the form of unordered list as

Name of transporter – Air Asia Time - 09:30 am

Seat no – B39 Destination - Delhi

Both pages should be interlinked.  Create external stylesheet  with relevant tags.

Answer:-

Program :

Below is code for firstpage.html Page

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <h1> Traveller </h1>

<form>
    First Name <input type="text" name="name"><br><br>
    Date of Travel <input type="date" name="date"><br><br>
    Telephone Number <input type="tel" name="phone"  required><br><br>
    <a href="secondpage.html"><img src="submit.png" style="height: 42px;"></a>

</form>
</body>
</html>

 

Below is code for  secondpage.html 

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <h1>Congratulations, Please check below details.</h1>

    <p>Name of transporter - Air Asia</p>
    <p>Seat no - B39</p>
    <p>Destination - Delhi</p>

<a href="firstwebpage.html">Back to Form</a>

</body>
</html>

 

Output

First Page

 

Second Page

(Q12)

SOP 1 : Creation of website using HTML5  (Practical SOP 1)

Create a website using HTML5 and CSS using any 4 CSS properties. Write a code for 2 separate pages having different file names such as first page as Index. html and second page as page2.html. Use any theme such as college profile  or  company  profile  etc.  Every  page  must  contain  proper  Meta information and design web page as follows-

  1. The index page must contain a heading which is highest among other text on pages and must be at centre of the page. There must be a paragraph which introduces general information about the theme chosen must have at least 3 physical style tags and one image with alternate text. This page must be connected to other two pages with proper navigational links.
  2. The 2nd page must contain the feedback or enrolment form related with theme chosen with features of HTML5. The form must contain text element and email address of the company or person. Include the submit button.

    Creation of website using HTML5

    Create a website using HTML5 and CSS using any 4 CSS properties. Write a code for 2 separate pages having different file names such as first page as Index. html and second page as page2.html. Use any theme such as college profile  or  company  profile  etc.  Every  page  must  contain  proper  Meta information and design web page as follows-

  3. The index page must contain a heading which is highest among other text on pages and must be at centre of the page. There must be a paragraph which introduces general information about the theme chosen must have at least 3 physical style tags and one image with alternate text. This page must be connected to other two pages with proper navigational links.
  4. The 2nd page must contain the feedback or enrolment form related with theme chosen with features of HTML5. The form must contain text element and email address of the company or person. Include the submit button.
Answer:-

Index.html

<!DOCTYPE html>
<html>
<head>
    <title>College Profile</title>
</head>
<body>

    <center><h1>Welcome to the Thakur College (Your College Name)</h1></center>
    <b>General Information : </b>
    <p>Thakur Junior College was established in 1992, by the founding members, with the notion of providing an avenue of learning within easy reach to the growing young population of Kandivali and its vicinity. It was a natural augmentation by the Thakur Educational Trust, for the S.S.C. Pass-out students of the various schools as well as Thakur Vidya Mandir. Thakur College had a humble beginning with only 57 students in FYJC first batch of Commerce stream. Its success led to the commencement of the Junior Science stream and the Degree College in 1997 followed by the Post Graduate section in 2002.</p>

    <b>The management is committed to continually improve the service quality through</b><br>

<big>Training and retraining of educationists to enhance the competencies</big><br>
<i>Improvement in learning resources such as laboratories, library etc</i><br>
<u>Adopting</u><br>

<h2>To give us feedback, Fill up the form.</h2>
<a href="page2.html">Link is here</a>

</body>
</html>

 

 

page2.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<h1>Feedback Form</h1>
<form>
    Full Name<input type="text" name="name"><br><br>
    Mobile Number<input type="text" name="mobile"><br><br>
    Your Email<input type="email" name="email"><br><br>
    Gender:
    Male   <input type="radio" name="male">
    Female<input type="radio" name="female">
<br><br>
    <input type="Submit" name="Submit">
</form>

</body>
</html>

 

Output

(Q13)

SOP 2 :   Create a webpage using  HTML and CSS code to design a web page as the layout displayed below.

The top section will display the heading , ‘Tourist places’   in header. The section on the left has list of cities. The right hand side displays tourist places of any one of the city .

Use Inline style sheet in the top section to display background color for the text ‘Tourist places’. Use internal stylesheet for the left and right section with background color and font styles.

Answer:-

Index.html

<!DOCTYPE html>
<html>
<head>
    <title>Tourist PLACES</title>
</head>
<body>

<center>
<table border="1px">
    
    <tr style="background-color: aliceblue">
        <th colspan ="2"><h1>Tourist PLACES</h1></th>
    </tr>
    <tr >
        <td style="background-color: khaki">
            <p><h3>City</h3></p>
<ol>
    <li>Pune</li>
    <li>BANGLORE</li>
    <li>HYDERABAD</li>
    <li>Delhi</li>
</ol>
    </td>


        <td style="background-color: pink">
    <p><h3>Tourist PLACES in Pune</h3></p>
<ul>
    <li>SHANIVARWADA</li>
    <li>KELKAR </li>
    <li>KELKAR </li>
</ul>
</td>
    </tr>

</table>
</center>
</body>
</html>

 

Output

 

(Q14)

SOP 4 :  Creation of website using HTML5 and CSS.

Create a webpage as given layout use <nav>,<header>,<footer>,<aside>,

<article> with CSS.

Answer:-

Index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My Title</title>

        <style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  background-color: lightgray;
      margin-top: -475px;
}
</style>


    </head>
    <body style="background: lightgrey;">
        <h1>News</h1>

        <header>
            
            <nav style="background: darkblue;color: white !important;">
                <a href="#" style="color: white">HOME</a>&nbsp;&nbsp;&nbsp;
                <a href="#" style="color: white">ARCHIEVES</a>&nbsp;&nbsp;&nbsp;
                <a href="#" style="color: white">ABOUT</a>&nbsp;&nbsp;&nbsp;
            </nav>
        </header>
        <article>
           
            <section style="background: darkgrey; width: 900px;">
                 <h2 style="">Local News</h2>
                <p style="background: white;     padding: 13px;">Fire ighter rescue man from building this is local news1<br>
                    (reporter name, date)<br>
                    This is fighter detail text, this is the storyof fighter,

                    </p>

            </section>
            <section style="background: white; width: 900px;">
                <p style="    padding: 13px;">Fire ighter rescue man from building this is local news1<br>
                    (reporter name, date)<br>
                    This is fighter detail text, this is the storyof fighter,

                    </p>
                </section>

                  <section style="background: darkgrey; width: 900px;">
                 <h2 style="">National News</h2>
                <p style="background: white;     padding: 13px;">Fire ighter rescue man from building this is local news1<br>
                    (reporter name, date)<br>
                    This is fighter detail text, this is the storyof fighter,

                    </p>

            </section>
            <section style="background: white; width: 900px;">
                <p style="    padding: 13px;">Fire ighter rescue man from building this is local news1<br>
                    (reporter name, date)<br>
                    This is fighter detail text, this is the storyof fighter,

                    </p>
                </section>

            

    
        <aside style="    background: darkgray;"> <b style="font-size: 30px">Be a news Reporter</b><br>
        if you see news happening, Send us a text</aside>

        <footer style="background: darkblue;color: white !important;">Footer Information</footer>

    </body>
</html>

 

Output

 

(Q15)

SOP 5 :   Use of Audio on web pages using HTML5.

Create a webpage named audio.html to set an audio file in web page with controls such that it uses HTML5 elements. The audio file must play as soon as  the  webpage  loads  in  browser  and  it  will  start  over  again,  every  time when it is completed.

Create another webpage named audio1.html which provides multiple source file formats for the same audio file that plays a sound automatically with controls. The browser should display the message with appropriate attribute, when audio file is not supported by browser. The code must incorporate the list of sound files formats (like wav, MP3 or ogg etc).

Answer:-

audio.html  (With infinite loop ie. autoplay)

<!DOCTYPE html>
<html>
<body>

<h1>The audio element</h1>

<p>Click on the play button to play a sound:</p>

<audio controls autoplay loop>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

 

audio1.html  (With control)

<!DOCTYPE html>
<html>
<body>

<h1>The audio element</h1>

<p>Click on the play button to play a sound:</p>

<audio controls autoplay loop>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

 

 

(Q16)

SOP 6 :   Use of video on web pages using html5.

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.

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

 

Answer:-

video.html  (With infinite loop ie. autoplay)

<!DOCTYPE html>
<html>
<body>

<h1>The video element</h1>

<video width="320" height="240" controls autoplay loop>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

 

video.html  (With control)

<!DOCTYPE html>
<html>
<body>

<h1>The video element</h1>

<video width="320" height="240" controls >
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

 

 

(Q17)

SOP 7 :   Navigation on an image using Client side image Mapping in web page using html 5.

  • 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 Ms-Paint/GIMP/IrfanView/Pinta. Each shape should be mapped or navigate with  a  different  URL  that  should navigate to a local webpage.

 

Answer:-

index.html

<!DOCTYPE html>
<html>
<body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

 

 

(Q18) 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

(Q19) 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

(Q20) 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

(Q21) 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

(Q22) 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

(Q23)

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)
(Q24)

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
(Q25)

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

 

 

(Q26)

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

 

(Q27)

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

(Q28)

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

(Q29)

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

(Q30)

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

(Q31)

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>
(Q32)

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

(Q33)

Write html code to display tet XII Online Exams having font-size 26px, text color red and underline text effect using CSS

Answer:-

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

<p style="font-size: 26px; color: red; text-decoration: underline;">XII Online Exams</p>

</body>
</html>

(Q34)

Write html code to display tet XII Online Exams having font-size 26px, text color red and underline text effect using CSS

Answer:-

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

<p style="font-size: 26px; color: red; text-decoration: underline;">XII Online Exams</p>

</body>
</html>

(Q35)

Write html code to display text world is beautiful having font-size 35px; LETTER-SPACING: 10PX;, specing between letters using CSS

Answer:-

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

<p style="font-size: 35PX; LETTER-SPACING: 10PX;">world is beautifu</p>

</body>
</html>