Scribd Logo
Upload

Welcome to Scribd!

  • Worksheet 1.4

    Uploaded by

    Rohit Rohilla
    11 views6 pages
    This document summarizes a student's web technologies lab experiment on designing a webpage for ABZ University using Bootstrap, HTML, and CSS. The student used the Bootstrap grid system, container class, external CSS, and target elements in CSS. Links were also added to Bootstrap. Concepts covered included using online Bootstrap CDN linking and implementing Bootstrap classes. Steps taken involved creating HTML boilerplate, linking Bootstrap CSS, and adding images, text, links and other elements within container and row divs. The student learned about multiple Bootstrap classes, the container class, and how to use online Bootstrap.

    Original Description:

    Original Title

    worksheet 1.4

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document summarizes a student's web technologies lab experiment on designing a webpage for ABZ University using Bootstrap, HTML, and CSS. The student used the Bootstrap grid system, container class, external CSS, and target elements in CSS. Links were also added to Bootstrap. Concepts covered included using online Bootstrap CDN linking and implementing Bootstrap classes. Steps taken involved creating HTML boilerplate, linking Bootstrap CSS, and adding images, text, links and other elements within container and row divs. The student learned about multiple Bootstrap classes, the container class, and how to use online Bootstrap.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views6 pages

    Worksheet 1.4

    Uploaded by

    Rohit Rohilla
    This document summarizes a student's web technologies lab experiment on designing a webpage for ABZ University using Bootstrap, HTML, and CSS. The student used the Bootstrap grid system, container class, external CSS, and target elements in CSS. Links were also added to Bootstrap. Concepts covered included using online Bootstrap CDN linking and implementing Bootstrap classes. Steps taken involved creating HTML boilerplate, linking Bootstrap CSS, and adding images, text, links and other elements within container and row divs. The student learned about multiple Bootstrap classes, the container class, and how to use online Bootstrap.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    Write Your Experiment Title Here

    Student Name: Rohit UID:20bca1150


    Branch: BCA Section/Group:1/A
    Semester: 4th Date of Performance:25/4/2022
    Subject Name Web Technologies Lab Subject Code:20-CAP-315

    1. Aim/Overview of the practical:


    a. Design a web page for ABZ University using Bootstrap, HTML, CSS.
    b.
    2. Task to be done:
     Using grid System
     Using container Class
     Using external Css
     Target element in css
     Adding links in Bootstrap

    3. Concept used:
    1. In this experiment we are added online (CDN) bootstrap rather than offline
    boostrap.
    <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-


    ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    2. Use bootstrap classes to implement bootstrap css.


    4. Steps/Commands involved to perform practical:
    <!doctype html>

    <html lang="en">

      <head>

        <title>Experiment 3</title>

        <!-- Required meta tags -->

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"


    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <link rel="stylesheet" href="experiment3_style.css">

      </head>

      <body>

        <div>

        <div class="row btn-light">

         

          <img src="download.jpg" alt = "cu logo" title = "abz logo"  max-height="10%" class=" col-4 img-rounded p-0">

          <img src="download.png" alt = "cu logo" title = "abz name"  max-height="10%" class=" col-8 img-rounded p-0">

         

        </div>

        <div class="col bg-secondary rounded" style="border-width: 5px;border-color: rgba(93, 90, 90, 0.253); margin:5px;
    padding:15px; border-style: solid;">

          <p class = " text-light" style="font-size: 50px;;padding: 20px;">X_Y_Z Course</p>

          <a class = "head_link rounded-pill" href ="https://lms.cuchd.in" target = "_parent">Home</a>

          <a class = "head_link rounded-pill" href="https://lms.cuchd.in/my/ "target = "_parent" > My Courses</a>

          <a class = "head_link rounded-pill" href ="https://lms.cuchd.in/course/view.php?id=2457&section=0" target =


    "_parent" >20CAP-315_20BCA-5_A::WEB TECHNOLOGIES LAB</a>

          <a class = "head_link rounded-pill" href="https://lms.cuchd.in/course/view.php?id=2457&section=0" target = "_parent"


    >ASSESSMENT MODEL</a>

        </div>
        <div class="col" style="border-width: 5px;border-color: rgba(93, 90, 90, 0.253); margin:35px 5px; padding:15px;
    border-style: solid;">

            <a class="unit" href="https://lms.cuchd.in/course/view.php?id=2457" >Course Overview</a>

            <a class="unit"href="https://lms.cuchd.in/course/view.php?id=2457&section=1#tabs-tree-start" >Unit-1 </a>

            <a class="unit"href="https://lms.cuchd.in/course/view.php?id=2457&section=5#tabs-tree-start" >Unit-2</a>

            <a class="unit"href="https://lms.cuchd.in/course/view.php?id=2457&section=9#tabs-tree-start" >Unit-3</a>

       

            <hr>

            <div class="col"><ul style="list-style-type: square;">

                <li><div class="row"><a href="https://lms.cuchd.in/mod/forum/view.php?id=55193" target = "_parent"class =


    "course">Announcements</a></div></li>

                <li><div class="row"><a href="https://lms.cuchd.in/mod/page/view.php?id=55194"target = "_parent"


    class="course">Course Introduction,Objectives and Outcomes</a></div></li>

                <li> <div class="row"><a href="https://lms.cuchd.in/mod/page/view.php?id=55195" target =


    "_parent"class="course">Course Information</a></div></li>

                <li><div class="row"><a href="https://lms.cuchd.in/mod/page/view.php?id=55196"target =


    "_parent"class="course">Course Syllabus and Suggestive Readings</a></div></li>

                <li><div class="row"><a href="https://lms.cuchd.in/mod/page/view.php?id=55197" target =


    "_parent"class="course">Netiquette Guielines</a></div></li>

              <li><div class = "row"><a href = "https://lms.cuchd.in/mod/page/view.php?id=55198" target = "_parent" class=


    "course" >Computer Requirment</a></div></li></ul>

             

            </div>

        </div>  

           

           

           

       

        </div>

       

        <!-- Optional JavaScript -->

        <!-- jQuery first, then Popper.js, then Bootstrap JS -->

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-


    UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-
    JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

      </body>

    </html>

    a.

    5. Result/Output/Writing Summary:
    Learning outcomes (What I have learnt):
    1. We learn multiple classes in into boostrap.

    2.We learn to use of container class

    3.we learn how to use online bootsrap.

    Evaluation Grid:

    Sr. No. Parameters Marks Obtained Maximum Marks


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

    You might also like