Practical 11 - CSU953 - CSE 2026 - Shoolini University

Create a navigation bar (horizontal and vertical) by using CSS.

navigation bar: This tag is used to start making a form

label: This tag is used to define a label for form element

input: This tag is used to get input data from the form

button: This tag is used to create a button which can be click to perform some action

select: This tag is used to create a drop-down selectable list

textarea: This tag is used to create a bigger text input field to take input from users

fieldset: This tag is used to group simillar type of fields

legend: This tag is used to caption the fieldset element

datalist: It is used to specify pre-defined list options for input control

output: This tag is used to display the output of the performed operation

option: This tag is used to define options in the dropdown list.

Following is the hierarchy required for the tags:

Code

                    
<!doctype html>
<head>
    <title>Practical 11</title>
    <style>
    .ont {
    margin: 0;
    height: 100vh;
    display: grid;
    place-items: center;
    }
    
    img {
    max-width: 100%;
    height: auto;
    }
    
    table {
    text-align: center;
    vertical-align: middle;
    position: absolute;
    margin-top: -50px;
    }
    
    .nav {
    list-style: none;
    background-color: #333;
    margin: 0;
    padding: 0;
    }
    
    .nav li {
    text-align: center !important;
    padding: 0px !important;
    background: #333 !important;
    }
    
    .hor {
    display: flex;
    }
    
    .hor li {
    flex: 1;
    }
    
    .ver,
    .ver li {
    display: block;
    }
    
    
    .nav a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px;
    }
    
    .nav a:hover {
    background-color: #111;
    }
    </style>
</head>
<body>
<div class="row">
    <div class="col">
        <img src="https://shooliniuniversity.com/assets/images/logo.png" style="width:100px;
            height:50px;">
    </div>
    <div class="col" style="margin-left: -20%;">
        <h1 style="font-size: 50px;">Practical 11</h1>
    </div>
</div>
<div class="ont">
    <img src="https://img.freepik.com/free-vector/coronavirus-global-spread-banner-with-text-space_1017-24740.jpg?w=2000">
    <table>
        <tr>
            <td>
                <ul class="nav hor">
                    <li><a href="#">Wear a Mask</a></li>
                    <li><a href="#">Use Sanitizer</a></li>
                    <li><a href="#">Wash Hands</a></li>
                </ul
            </td>
            <td>
                <ul class="nav ver">
                    <li><a href="#">Wear a Mask</a></li>
                    <li><a href="#">Use Sanitizer</a></li>
                    <li><a href="#">Wash Hands</a></li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <h3>Horizontal Navigation</h3>
            </td>
            <td>
                <h3>Vertical Navigation</h3>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

Output

Practical 11

Horizontal Navigation

Vertical Navigation