Scribd Logo
Upload

Welcome to Scribd!

  • Lab 4

    Uploaded by

    harshit Chaturvedi
    37 views11 pages
    The document contains code for an HTML navigation menu with four list items: Home, About Us, Portfolio, and Contact Us. The navigation menu items are displayed inline with padding and background color on hover.

    Original Description:

    Original Title

    lab_4.docx

    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
    The document contains code for an HTML navigation menu with four list items: Home, About Us, Portfolio, and Contact Us. The navigation menu items are displayed inline with padding and background color on hover.

    Copyright:

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

    Lab 4

    Uploaded by

    harshit Chaturvedi
    The document contains code for an HTML navigation menu with four list items: Home, About Us, Portfolio, and Contact Us. The navigation menu items are displayed inline with padding and background color on hover.

    Copyright:

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

    Q1:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-
    scale=1.0">
    <title>q1</title>

    <style>

    ul{
    list-style: none;
    display: inline-block;

    }
    li{
    float: left;

    Harshit Chaturvedi 27 Sec - C


    padding: 10px;
    background-color: wheat;
    }
    a{
    text-decoration: none;
    color: black;
    }

    a:hover{ color
    : blue;
    }
    </style>
    </head>
    <body>
    <nav>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </nav>
    </body>
    </html>

    Harshit Chaturvedi 27 Sec - C


    OUTPUT

    Harshit Chaturvedi 27 Sec - C


    Q2

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-
    width, initial- scale=1.0">
    <title>Document</title>
    <style>
    a:link{ co
    lor:
    green;
    }
    a:visited{
    color:
    purple;
    }
    a:hover{ c
    olor:
    black;
    }
    a:active{ c
    olor:
    yellow;
    }
    </style>
    </head>
    <body>
    <h2>Following are the colors I used in different states of
    css links:</h2>
    <ul>

    Harshit Chaturvedi 27 Sec - C


    <li>link -> green</li>
    <li>visited -> purple</li>
    <li>hover -> black</li>
    <li>active -> yellow</li>
    </ul>
    <h1>LINK: </h1>
    <a href="https://www.google.com/"
    target="_blank">GOOGLE</a>
    </body>
    </html>

    OUTPUT

    Harshit Chaturvedi 27 Sec - C


    Harshit Chaturvedi 27 Sec - C
    Q3
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-
    width, initial- scale=1.0">
    <title>Document</title>
    <style>
    table,tr,td,
    th{
    border: 1px solid
    black; border-
    collapse: collapse;
    padding: 5px;
    }
    tr:nth-
    child(even):hover{ b
    ackground-color:
    yellow;
    }
    tr:nth-
    child(odd):hover{ b
    ackground-color:
    green;
    }
    </style>
    </head>
    <body>
    <table>
    <thead>
    <tr>
    <th>ROW1</th>
    <th>ROW2</th>
    </tr>
    </thead>

    Harshit Chaturvedi 27 Sec - C


    <tbody>
    <tr>
    <td>hello</td>
    <td>bye</td>
    </tr>
    <tr>
    <td>yo</td>
    <td>gehu</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

    Harshit Chaturvedi 27 Sec - C


    Output

    Harshit Chaturvedi 27 Sec - C


    Q4
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-
    width, initial- scale=1.0">
    <title>Document</title>
    <style
    > ul{
    list-style-image:
    url(b.jpg); list-style-
    position: outside;
    }
    ol{
    list-style-image:
    url(b.jpg); list-style-
    position: outside;
    }

    </style>
    </head>
    <body>
    <h1>UNORDERED LIST</h1>
    <ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Contact</li>
    </ul>
    <h1>ORDERED LIST</h1>
    <ol>
    <li>Home</li>
    <li>About Us</li>
    <li>Contact</li>
    Harshit Chaturvedi 27 Sec - C
    </ol>
    </body>
    </html>

    Output

    Harshit Chaturvedi 27 Sec - C

    You might also like