Scribd
Upload
69 views

Web Technologies Lab Worksheet 3

1. The document describes two experiments to create three column web pages using Bootstrap. 2. The first experiment outputs a three column page with name, UID, and email. 3. The second experiment outputs a more complex page with buttons, images, and buttons to demonstrate curriculum design using Bootstrap grid system and components.

Uploaded by

MRIDUL DASHORA 20BCA1482
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
69 views

Web Technologies Lab Worksheet 3

1. The document describes two experiments to create three column web pages using Bootstrap. 2. The first experiment outputs a three column page with name, UID, and email. 3. The second experiment outputs a more complex page with buttons, images, and buttons to demonstrate curriculum design using Bootstrap grid system and components.

Uploaded by

MRIDUL DASHORA 20BCA1482
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

MRIDUL DASHORA

20BCA1482

20BCA1482_MRIDUL DASHORA_Practical-3

Student Name:MRIDUL DASHORA UID: 20BCA1482


Branch: BCA Section/Group: 20BCA5_B
Semester: 5th DateofPerformance: 10.09.2022
Subject Name: WEB TECHNOLOGIES LAB Subject Code:20CAP315_B

Subject Code: CONT_20CAP-315::WEB TECHNOLOGIES LAB

1. Aim/Overview of the practical:


2. Experiment 1.1 -Create three column web page using bootstrap file.
Experiment 1.2 - Create three column web page using bootstrap file.

3. Task to be done:
1. Create three column web page using bootstrap file.

2. Experiment - Create three column web page using bootstrap file.

4. Steps/Commands involved to perform practical:

Experiment 1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel = "stylesheet"


href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
   </script>

    <title>Web Technologies Lab :-> First Experiment</title>

    <style>
        h1{

            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;


            background-color: black;
            color: white;
        }
    </style>
</head>
<body>

   <div class="container-fluid">
  <center><h1>Create Three column web page using bootstrap file   Bootstrap</h1></center>  
    <div class = "row">

        <div class = "col-sm-12" style = "background-color:green; color:


white;"><h4><center>Name:-> Pulkit Kapila</center></h4></div>
       
        <div class = "col-sm-12" style = "background-color:orange; color:
white;"><h4><center>Uid:-> 20BCA1051</center></h4></div>
       
        <div class = "col-sm-12" style = "background-color:rgb(157, 127, 127); color:
white;"><h4><center>Email :-> [email protected]</center></h4></div>
       
        </div>
       
        </div>
</body>
</html>
Experiment 1 Output:->

Experiment 1.2:->
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <link rel = "stylesheet"


href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
   </script>
   <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  </script>
    <title>Document</title>
   
</head>
<body>
       <div class="container-fluid"  >
          <!--  <center> -->
        <h1> Curriculum Design</h1>

         <div class="rows">
     
   
 
          <div class="col-sm-2" >  <button type="button" style="background-color: rgb(25,
220, 237); " class ="btn btn-light btn-sm"><b>Outcomes</b></button></div>
        <div class="col-sm-2">  <button type="button" style="background-color:rgb(25, 220,
237);" class ="btn btn-light btn-sm"><b>Courses</b></button></div>
            <div class="col-sm-2" >  <button type="button" style="background-color: rgb(25,
220, 237);" class ="btn btn-light btn-sm"><b>Policies</b></button></div>
                <div class="col-sm-2" >  <button type="button" style="background-color:
rgb(25, 220, 237);" class ="btn btn-light btn-sm"><b>Technology</b></button></div>
                    <div class="col-sm-2" >   <button type="button" style="background-color:
rgb(25, 220, 237);" class ="btn btn-light btn-sm"><b>Content</b></button></div>
       <!--style="width:100%; height:10%; background-color:Blue; position: fixed; top:0;  -->

         </div>
    </div>

 <div class="container-fluid" >


    <div class="rows">    

       

         <div class="col-sm-3">   <img src="R.png" style="width:100px; height:280px; margin-


left:60px;" alt="error Coding"></div>
          <div class="col-sm-3">  <img src="R.png" style="width:100px; height:280px;"
alt="error Coding"></div>
         <div class="col-sm-3">  <img src="R.png" style="width:100px; height:280px;"
alt="error Coding"></div>
          <div class="col-sm-3">  <img src="R.png" style="width:100px; height:280px;"
alt="error Coding"></div>
       
    </div>
</div>

     <div class="container-fluid" >


       
     
        <div class="rows">
     
           <div class="col-sm-3">   <button type="button" style="background-color: rgb(247,
10, 93); ;  margin-left: 90px;" class ="btn btn-light btn-lg"><i>Learning
Activities</i></button></div>
            <div class="col-sm-3">   <button type="button" style="background-color: rgb(247,
10, 93);;" class ="btn btn-light btn-lg"><i>Learning Material</i></button></div>
          <div class="col-sm-3">  <button type="button" style="background-color: rgb(247, 10,
93);" class ="btn btn-light btn-lg"><i>Interaction Design</i></button></div>
           <div class="col-sm-3">  <button type="button" style="background-color: rgb(247,
10, 93);;" class ="btn btn-light btn-lg"><i>Delivery Methods</i></button></div>
      </div>
    </div>
    <center> <h1 > Instructional Design</h1></center>
   
</body>
</html>

Experiment 3 Output:->
Learning outcomes (What I have learnt):

1.

2.

3.

Evaluation Grid:

Sr. No. Parameters Marks Obtained Maximum Marks


1. Worksheet 5
2. Demonstration/Performance /Pre 10
Lab Quiz
3. Post Lab Quiz 5

You might also like