Scribd Logo
Upload

Welcome to Scribd!

  • Worksheet 1.3

    Uploaded by

    Rohit Rohilla
    9 views7 pages

    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

    Copyright:

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

    Worksheet 1.3

    Uploaded by

    Rohit Rohilla

    Copyright:

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

    Worksheeet 1.

    3
    Student Name: Rohit UID:20bca1150
    Branch: BCA Section/Group:1/A
    Semester: 4th Date of Performance:8/9/2022
    Subject Name Web Technologies Lab Subject Code:20-CAP-315

    1. Aim/Overview of the practical:


    a. Display the content of Syllabus of Master of Computer application of XYZ
    university using Bootstrap.

    2. Task to be done:
     Using grid System
     Using container Class
     Using external Css
     Target element in css
     Adding links in Bootstrap
    3. Steps/Commands involved to perform practical:

     External CSS

    .head_link

        color: black;

        text-decoration: none;

        font-size: large;

        padding: 10px;

        background-color: rgb(242, 253, 249);

        border-style: solid;

        border-width: 4px;

        border-color:white;

       
       

    .head_link:hover

        color: rgb(151, 34, 34);

        text-decoration: underline;

       

       

    .head_link:active:visited

        border-color: pink white black white;

    .unit

        color: rgb(225, 12, 12);

        padding: 2px;

        font-size: large;

        text-decoration: none;

        padding: 15px;

        font-weight: 380;

    .unit:hover

        color: rgb(151, 34, 34);

        border-width: 2px;

        border-color: rgb(215, 211, 211);

        border-style: solid;

    .unit:active :visited

    {
        color: white;

        font-weight: bold;

        background-color: rgb(184, 12, 12);

    .course

        color: rgb(225, 12, 12);

        font-size: large;

        font-weight: 380;

        text-decoration: none;

        margin: 10px;

       

        padding-left: 40px;

    .course:hover

        color: rgb(102, 8, 8);

    HTML File:-

    <!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">

          <img src="xyz_university.png" alt = "cu logo" title = "cu logo" style="width:98% ;" class="m-2 rounded mx-auto d-
    block

    ">

         

        </div>

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

          <p style="font-size: 50px;color:rgb(75, 89, 101);padding: 20px;">CONT_20CAT-311::WEB_TECHNOLOGIES</p>

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

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

          <a class = "head_link" 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" 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>

    4. Result/Output/Writing Summary:
    5.
    attractive
    hovering css

    Adding links
    Learning outcomes (What I have learnt):

    1. Target element in web pages

    2 . How to use grid system

    3.how to adding links in bootstrap

    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