First Year Web Technology Practical Slips Solution

 Web Technology Practical Slips Solution


*******************************
File Name : FYBBA_Practical_1.html

Q1. Write a JavaScript program to calculate the volume of a sphere.

------------------------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
    <title> To calculate the volume of a sphere. </title>

    <style type="text/css">
        .ContainerBox{
            margin: 20% auto;
            width: 50%;
            border: 2px solid #ddd;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="ContainerBox">
        <label>Input radius value and get the volume of a
            sphere.</label>
        <br><br>

        <!-- Accept the radius from the user -->
        <label>Radius</label><br>
        <input type="text" name="radius" id="radius">

        <br><br>
        <!-- Dispaly Calculated volume of the sphere -->
        <label>Volume</label><br>
        <input type="text" name="volume" id="volume"
            placeholder="0.0000">

        <br><br>
        <button onclick="calculateVolume()">Calculate</button>      
    </div>

    <script type="text/javascript">

        /* Function To Calculated Volume of the Sphere */

        function calculateVolume(){
            /* Get the radius from input field */
            var radius = document.getElementById("radius").value;

            /* Calculate the volume of the sphere using 4/3*PI*radius^3 */
            var volume = (4/3)*3.14*radius*radius*radius;

            /* Set the volume to volume input field. */
            document.getElementById("volume").value = volume;
        }
    </script>
</body>
</html>

*******************************
File Name : FYBBA_Practical_2.html

Q2. Create HTML page to Divide the frames in to different sections
as shown below and add appropriate HTML files to each frame.

------------------------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
    <title>Create HTML page to Divide the frames into
        different section</title>
</head>
<body>
    <iframe name="A" src="First_Frame.html" width="99%"></iframe>
   
    <iframe name="B" src="Second_Frame.html" width="49%"></iframe>
    <iframe name="C" src="Third_Frame.html" width="49%"></iframe>
    <iframe name="D" src="Four_Frame.html" width="32%"></iframe>
    <iframe name="E" src="Fifth_Frame.html" width="33%"></iframe>
    <iframe name="F" src="Six_Frame.html" width="32%"></iframe>
</body>
</html>

*******************************
File Name : First_Frame.html

<!DOCTYPE html>
<html>
<head>
    <title>First Frame</title>
</head>
<body>
    <center><h1>Sunil Valmik Bhagwat</h1>
    <p> At - Gavandgaon Post - Suregaon Raste
        Tal - Yeola Dist - Nashik </p></center>
</body>
</html>

*******************************
File Name : Second_Frame.html

<!DOCTYPE html>
<html>
<head>
    <title>Second Frame</title>
</head>
<body>
    <h4>Bulleted list of favourite colours</h4>
    <ol>
        <li>Red</li>
        <li>Orange</li>
        <li>Pink</li>
        <li>Purple</li>
    </ol>
</body>
</html>

*******************************
File Name : Third_Frame.html

<!DOCTYPE html>
<html>
<head>
    <title>Third Frame</title>
</head>
<body>
    <h4> Numbered List of City : </h4>
    <ol>
        <li>Nashik</li>
        <li>Mumbai</li>
        <li>Pune</li>
        <li>Dhule</li>
    </ol>
</body>
</html>

*******************************
File Name : Four_Frame.html

<!DOCTYPE html>
<html>
<head>
    <title>Fourth Frame</title>
</head>
<body>
    <h5>Scrolling Message</h5>
    <h3>
        Lorem Ipsum is simply dummy text of
        the printing and typesetting industry.
        Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s,
        when an unknown printer took a galley of type
        and scrambled it to make a type specimen book.
        It has survived not only five centuries,
        but also the leap into electronic
        typesetting, remaining essentially
        unchanged. It was popularised in the 1960s with
        the release of Letraset sheets containing
    </h3>
</body>
</html>

*******************************
File Name : Fifth_Frame.html

<!DOCTYPE html>
<html>
<head>
    <title>Fifth Frame</title>
    <style>
        .blink
        {
            animation: blinker 0.6s linear infinite;
            color: pink;
            font-size: 20px;
            font-weight: bold;
        }
       
        @keyframes blinker
        {
            50% { opacity: 0;
            }
        }
        </style>
</head>
<body>
    <h5>Blinking Reminders</h5>
    <h4 class="blink"> Here is your text that has to blink. </h4>
</body>
</html>

*******************************
File Name : Six_Frame.html

<!DOCTYPE html>
<html>
<head>
    <title>Third Frame</title>
</head>
<body>
    <h4> Name of Countries : </h4>
    <ol>
        <li>India</li>
        <li>Mumbai</li>
        <li>Pune</li>
        <li>Dhule</li>
    </ol>
</body>
</html>

*******************************
File Name : FYBBA_Practical_3.html

Q1. Write a java script program to accept a number form user and
display its multiplication table

------------------------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
    <title> To Display the Multiplication Table.</title>

    <style type="text/css">
        .ContainerBox{
            margin: 5% auto;
            width: 50%;
            border: 2px solid #ddd;
            padding: 10px;
            text-align: center;
        }

        table{
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <div class="ContainerBox">
        <!-- Accept the number from the user -->
        <label>Enter the number you want to display
                multiplication table : </label>
        <br><br>
        <input type="text" name="num" id="num">

        <br><br>
        <button onclick="multiplicationTable();">
            Get Multiplication Table
        </button>  
        <br><br>

        <!-- Dispaly the multiplication table -->
        <p id="demo"></p>  
    </div>

    <script type="text/javascript">

        /* Function To Calculated Multiplication Table */

        function multiplicationTable(){
           
            /* Get the number from input field */
            var num = document.getElementById("num").value;

            // Table to display multiplication table
            var string = "<label>Multiplication Table</label>
                            <br><br><table border='1'>
                                <tr>
                                    <th>Index</th>
                                    <th>Value</th>";

            // for loop to create table row and data
            for(var row = 1; row <= 10; row++){
                string += "<tr><td>"+row+"</td><td>"
                            + row * num + "</td></tr>";
            }

            string += "</table>";

            document.getElementById("demo").innerHTML = string;
        }
    </script>
</body>
</html>

*******************************
File Name : FYBBA_Practical_4.html

Q.2 Write the HTML code to create the following table.
Use internal CSS to format the table

------------------------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
    <title> To Create the Table. </title>

    <style type="text/css">
        table, th, td{
            border: 1px solid #ddd;
            padding: 15px;
            border-collapse: collapse;
            margin: auto;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th rowspan="2" width="30%" style="text-align: left;">
                Book_No</th>
            <th rowspan="2" width="30%" style="text-align: left;">
                Book_Name</th>
            <th colspan="2" width="70%">Price</th>
        </tr>
        <tr>
            <th style="text-align: left;">RS</th>
            <th style="text-align: left;">Paise</th>
        </tr>
        <tr>
            <td>101</td>
            <td>DBMS</td>
            <td>200</td>
            <td>50</td>
        </tr>
        <tr>
            <td>102</td>
            <td>C-Prog</td>
            <td>150</td>
            <td>75</td>
        </tr>
        <tr>
            <td>103</td>
            <td>JAVA</td>
            <td>300</td>
            <td>00</td>
        </tr>
        <tr>
            <td>104</td>
            <td>PHP</td>
            <td>250</td>
            <td>50</td>
        </tr>
        <tr>
            <td>105</td>
            <td>ASP</td>
            <td>100</td>
            <td>00</td>
        </tr>
    </table>    
</body>
</html>

*******************************
File Name : FYBBA_Practical_5.html

Q1. Write a java script program to accept a number from user
and calculate and display its sum of digits

------------------------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
    <title> To Display the Sum of Digits of Number.</title>

    <style type="text/css">
        .ContainerBox{
            margin: 5% auto;
            width: 50%;
            border: 2px solid #ddd;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="ContainerBox">
        <!-- Accept the number from the user -->
        <label>Enter the number : </label>
        <br><br>
        <input type="text" name="num" id="num">

        <br><br>
        <button onclick="calculateSum();">Calculate Sum</button>    
        <br><br>

        <!-- Dispaly the sum -->
        <label>The of accepted number is :</label>
        <p id="demo">0</p>  
    </div>

    <script type="text/javascript">

        /* Function To Calculated Multiplication Table */

        function calculateSum(){
           
          /* Get the number from input field */
          var num = parseInt(document.getElementById("num").value);
           
            var sum = 0;

            while(num > 0){

                sum += (num % 10);

                num = (num / 10);
            }

       document.getElementById("demo").innerHTML = parseInt(sum);
        }
    </script>
</body>
</html>

*******************************
File Name : FYBBA_Practical_6.html

Q2. Write HTML code to design a web as per given specification.
Divide the browser screen into two frames. The first frame will display the heading.
Divide the second frame into two columns. The frame on the left should be
name of cities consisting of hyperlinks.
Clicking on any one of these hyperlinks will display related information in
right hand side  rame as shown below

------------------------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
    <title> Divide the browser screen into two frames.</title>
</head>
<body>

    <iframe name="A" src="IT_Industry_Frame.html" width="99%"></iframe>
   
    <iframe name="B" src="IT_Industry_City_Frame.html" width="49%"></iframe>
    <iframe name="C" src="" width="49%"></iframe>
</body>
</html>

*******************************
File Name : IT_Industry_Frame.html

<!DOCTYPE html>
<html>
<head>
    <title>IT Industry City Name Frame</title>
</head>
<body>
    <h1>City</h1>
    <ol>
        <li><a href="pune.html" target="C">Pune</a></li>
        <li><a href="mumbai.html" target="C">Mumbai</a></li>
    </ol>
</body>
</html>

*******************************
File Name : pune.html

<!DOCTYPE html>
<html>
<head>
    <title>IT Industry Detail Frame</title>
</head>
<body>
    <h1> Pune </h1>
        <ul>
            <li>Infosys</li>
            <li>Persistent</li>
        </ul>
</body>
</html>

*******************************
File Name : mumbai.html

<!DOCTYPE html>
<html>
<head>
    <title>IT Industry Detail Frame</title>
</head>
<body>
    <h1> Mumbai </h1>
        <ul>
            <li>TCS</li>
            <li>Persistent</li>
        </ul>
</body>
</html>

*******************************
File Name : IT_Industry_Frame.html

<!DOCTYPE html>
<html>
<head>
    <title>IT Industry Title Frame</title>
</head>
<body>
    <center><h1>IT Industries in INDIA</h1>
</body>
</html>

*******************************
File Name : FYBBA_Practical_7.html

Q1. Write a java script program to accept a number from user and
check whether it is Armstrong number or not

------------------------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
    <title>
            Check whether given number is Armstrong number or not.
    </title>

    <style type="text/css">
        .ContainerBox{
            margin: 5% auto;
            width: 50%;
            border: 2px solid #ddd;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="ContainerBox">
        <!-- Accept the number from the user -->
        <label>Enter the number : </label>
        <br><br>
        <input type="text" name="num" id="num">

        <br><br>
        <button onclick="calculateArmstrongNumber();">Submit</button>  
        <br><br>

        <!-- Dispaly the sum -->
        <label>Result :</label>
        <p id="demo"></p>  
    </div>

    <script type="text/javascript">

        /* Function To Calculated Multiplication Table */

        function calculateArmstrongNumber(){
           
        /* Get the number from input field */
        var num = parseInt(document.getElementById("num").value);
           
            var sum = 0, num1 = 0, temp = 0;

            temp = num;

            while(temp > 0){

                num1 = (temp % 10);

                temp = parseInt(temp / 10);

                sum += (num1*num1*num1);

            }

            if(sum == num){
                document.getElementById("demo").innerHTML =
                    "The of accepted number is <b>Armstrong number</b>";
            }
            else{
                document.getElementById("demo").innerHTML =
                    "The of accepted number is <b>not Armstrong number<b>";
            }
        }
    </script>
</body>
</html>

*******************************
File Name : FYBBA_Practical_8.html

Q2. Create HTML web page with following specifications [25]
i) Title should be about your College.
ii) Put image in the background
iii) Place your college name at the top of page in large text followed by
address in smaller size.
iv) Add names of courses offered, each in different color, style and font
v) Add scrolling text about college.
vi) Add any image at the bottom.
(use External CSS to format the webpage)

------------------------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
    <title> N.V.P. College. Lasalgaon</title>
   
    <style type="text/css">
        body{
            background: url("nvp.png");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        h1{
            color: white;
            text-align: center;
            font-size: 60px;
            font-weight: 900;
        }

        h1 span{
            font-size: 30px;
        }

        address{
            text-align: center;
            color: white;
            font-size: 20px;
        }

        h4{
            Color: red;
            font-size :30px;
        }
       
        p {
            font-size: 25px;
            color:blue;
            font-family :"Times new roman";
            font-style:italic;
        }
       
        div {
            background-color: lightblue;
            width: 600px;
            height: 150px;
            overflow: scroll;
        }

        img {
            border: 1px solid red;
            border-radius: 4px;
            padding: 5px;
            width: 150px;
        }
    </style>
</head>
<body>
    <h1> <span>Nutan Vidya Prasarak Mandal's</span>
        <br> Arts, Commerce and Science College.
    </h1>
    <address> Lasalgaon (Nashik) </address>

    <h4> Course Offered </h4>
    <p> B.A. </p>
    <p> B.Sc.</>
    <p> BBA(Computer Application)</p>

    <div>
        We have been in education from 1967, during which time we have helped
        thousands of students to find their career paths and improve their job
        prospects. We have transportable qualifications, big infrastructure,
        comfortable learning environment, high level of personal student care and
        the dedicated lecturers who eagerly share their knowledge and expertise with
        students.
        We have been in education from 1967, during which time we have helped
        thousands of students to find their career paths and improve their job
        prospects. We have transportable qualifications, big infrastructure,
        comfortable learning environment, high level of personal student care and
        the dedicated lecturers who eagerly share their knowledge and expertise with
        students.
    </div>

    <img src="Desert.jpg"></img>
   
</body>
</html>

*******************************
File Name : Slip_4_1.html

<!-- ---------------------------------------------------------------

Q1. Write a java script program to accept a number from user
and check whether it is Armstrong number or not

------------------------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
    <title> To Check whether it is Armstrong Number or not.</title>

    <style type="text/css">
        .ContainerBox{
            margin: 5% auto;
            width: 50%;
            border: 2px solid #ddd;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="ContainerBox">
        <!-- Accept the number from the user -->
        <label>Enter the number : </label>
        <br><br>
        <input type="text" name="num" id="num">

        <br><br>
        <button onclick="calculate();">Check</button>  
        <br><br>

        <!-- Dispaly the sum -->
        <label>The given result :</label>
        <p id="demo"></p>  
    </div>

    <script type="text/javascript">

        function calculate(){
           
            var num = parseInt(document.getElementById("num").value);
           
            var sum = 0, rem = 0, temp = num;

            while(temp > 0){
                rem = parseInt(temp % 10)
                sum += rem * rem * rem;
                temp = parseInt(temp / 10);
            }
            if(num == sum)
                document.getElementById("demo").innerHTML = num + " is Armstrong number.";
            else
                document.getElementById("demo").innerHTML = num + " is not Armstrong number.";
        }
    </script>
</body>
</html>

*******************************
File Name : Slip_5_1.html

Q1. Write a java script program to accept a number from user and check whether it is perfect number or not. -------------------------------------------------------------------> <!DOCTYPE html> <html> <head> <title> To Check whether it is perfect Number or not.</title> <style type="text/css"> .ContainerBox{ margin: 5% auto; width: 50%; border: 2px solid #ddd; padding: 10px; text-align: center; } </style> </head> <body> <div class="ContainerBox"> <!-- Accept the number from the user --> <label>Enter the number : </label> <br><br> <input type="text" name="num" id="num"> <br><br> <button onclick="calculate();">Check</button> <br><br> <!-- Dispaly the sum --> <label>The given result :</label> <p id="demo"></p> </div> <script type="text/javascript"> function calculate(){ var num = parseInt(document.getElementById("num").value); var sum = 0; for(var i = 1; i < num; i++){ if(num % i == 0) sum += i; } if(num == sum) document.getElementById("demo").innerHTML = num + " is perfect number."; else document.getElementById("demo").innerHTML = num + " is not perfect number."; } </script> </body> </html>

*******************************
File Name : Slip_6_1.html
<!-- --------------------------------------------------------------- Q1. Write java script program to accept a number from user and check whether it is prime number or not -------------------------------------------------------------------> <!DOCTYPE html> <html> <head> <title> To Check whether it is prime Number or not.</title> <style type="text/css"> .ContainerBox{ margin: 5% auto; width: 50%; border: 2px solid #ddd; padding: 10px; text-align: center; } </style> </head> <body> <div class="ContainerBox"> <!-- Accept the number from the user --> <label>Enter the number : </label> <br><br> <input type="text" name="num" id="num"> <br><br> <button onclick="calculate();">Check</button> <br><br> <!-- Dispaly the sum --> <label>The given result :</label> <p id="demo"></p> </div> <script type="text/javascript"> /* Function To Calculated Multiplication Table */ function calculate(){ /* Get the number from input field */ var num = parseInt(document.getElementById("num").value); var flag = 0; for(var i = 2; i < num; i++){ if(num % i == 0) flag = 1; } if(flag == 0) document.getElementById("demo").innerHTML = num + " is prime number."; else document.getElementById("demo").innerHTML = num + " is not prime number."; } </script> </body> </html>


*******************************
File Name : Slip_7_1.html
<!-- --------------------------------------------------------------- Q1. Write a java script program to accept a string from user and display the count of vowel characters from that string -------------------------------------------------------------------> <!DOCTYPE html> <html> <head> <title> The count of vowel </title> <style type="text/css"> .ContainerBox{ margin: 5% auto; width: 50%; border: 2px solid #ddd; padding: 10px; text-align: center; } </style> </head> <body> <div class="ContainerBox"> <!-- Accept the number from the user --> <label>Enter the string : </label> <br><br> <input type="text" name="str" id="str"> <br><br> <button onclick="calculate();">Check</button> <br><br> <!-- Dispaly the sum --> <label>The given result :</label> <p id="demo"></p> </div> <script type="text/javascript"> /* Function To Calculated Multiplication Table */ function calculate(){ /* Get the number from input field */ var str = document.getElementById("str").value; const vowels = "aeiouAEIOU"; var count = 0; for(const char of str){ if(vowels.includes(char)) count += 1; } document.getElementById("demo").innerHTML = "The number of vowels are : " + count; } </script> </body> </html>

*******************************
File Name : Slip_8_1.html

Q1. Write a java script program to accept a string and character from user and check the count of occurrences of that character in string. -------------------------------------------------------------------> <!DOCTYPE html> <html> <head> <title> Check the count of occurrences </title> <style type="text/css"> .ContainerBox{ margin: 5% auto; width: 50%; border: 2px solid #ddd; padding: 10px; text-align: center; } </style> </head> <body> <div class="ContainerBox"> <!-- Accept the number from the user --> <label>Enter the string : </label> <br><br> <input type="text" name="str" id="str"> <br><br> <label>Enter the character : </label> <br><br> <input type="text" name="char" id="char"> <br><br> <button onclick="calculate();">Check</button> <br><br> <!-- Dispaly the sum --> <label>The given result :</label> <p id="demo"></p> </div> <script type="text/javascript"> function calculate(){ var str = document.getElementById("str").value; var char = document.getElementById("char").value; var count = 0; for(const ch of str){ if(char.includes(ch)) count += 1; } document.getElementById("demo").innerHTML = "The " + char +" count of occurrences are : " + count; } </script> </body> </html>

*******************************
File Name : Slip_9_1.html

Q1. Write a java script program to accept a string and check whether the input string is palindrome string or not -------------------------------------------------------------------> <!DOCTYPE html> <html> <head> <title> Check whether the input string is palindrome string or not </title> <style type="text/css"> .ContainerBox{ margin: 5% auto; width: 50%; border: 2px solid #ddd; padding: 10px; text-align: center; } </style> </head> <body> <div class="ContainerBox"> <!-- Accept the number from the user --> <label>Enter the string : </label> <br><br> <input type="text" name="str" id="str"> <br><br> <button onclick="calculate();">Check</button> <br><br> <!-- Dispaly the sum --> <label>The given result :</label> <p id="demo"></p> </div> <script type="text/javascript"> function calculate(){ var str = document.getElementById("str").value; let rev = str.split("").reverse().join(""); if(rev == str) document.getElementById("demo").innerHTML = "The given string is palindrome string"; else document.getElementById("demo").innerHTML = "The given string is not palindrome string"; } </script> </body> </html>

*******************************
File Name : Slip_10_1.html

Q1. Write a JavaScript program to accept a string and a position (number) from user and display the character at specified position -------------------------------------------------------------------> <!DOCTYPE html> <html> <head> <title> Check whether the input string is palindrome string or not </title> <style type="text/css"> .ContainerBox{ margin: 5% auto; width: 50%; border: 2px solid #ddd; padding: 10px; text-align: center; } </style> </head> <body> <div class="ContainerBox"> <label>Enter the string : </label> <br><br> <input type="text" name="str" id="str"> <br><br> <label>Enter the positin (number) : </label> <br><br> <input type="text" name="num" id="num"> <br><br> <button onclick="calculate();">Check</button> <br><br> <!-- Dispaly the result --> <label>The given result :</label> <p id="demo"></p> </div> <script type="text/javascript"> function calculate(){ var str = document.getElementById("str").value; var pos = parseInt(document.getElementById("num").value); let cstr = str.charAt(pos); document.getElementById("demo").innerHTML = "The character at " + pos + "th position is : " + cstr; } </script> </body> </html>

Comments

Popular posts from this blog

SYBSc (CS) Sem III : Data Structure Slip 14 Que - 2

SYBSc (CS) Sem III : Data Structure Slip 20 Que - 2