Practical 10 - CSU953 - CSE 2026 - Shoolini University

By using CSS specifies 50% opacity to an image.

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>
<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">
        <title>Practical 10</title>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/css/bootstrap.min.css"> -->
        <style>
            body {
                margin: 0;
                height: 100vh;
                display: grid;
                place-items: center;
            }
            
            img {
                max-width: 100%;
                height: auto;
            }

            .op4 {
                opacity: 0.4;
            }
            table {
                text-align: center;
                vertical-align: middle;
            }
        </style>
    </head>

    <body>
        <table>
            <tr>
                <td>
                    <img
                        src="https://images.wallpaperscraft.com/image/single/art_lettering_letters_creative_minimalism_95487_320x480.jpg">
                </td>
                <td>
                    <img class="op4"
                        src="https://images.wallpaperscraft.com/image/single/art_lettering_letters_creative_minimalism_95487_320x480.jpg">
                </td>
            </tr>
            <tr>
                <td>
                    <h3>Full Opacity</h3>
                </td>
                <td>
                    <h3>Reduced Opacity</h3>
                </td>
            </tr>
        </table>
    </body>

</html>
                    
                

Output

Practical 10

Full Opacity

Reduced Opacity