CSU953 - CSE 2026 - Shoolini University

Create a HTML file with these instructions:

  1. Create 10 ol and 10 ul lists.
  2. Select 7 countries in radio button.
  3. Create a form with some meaningful content.

Details of the tags:

p: This tag is used to create a paragraph

abbr: This tag is used to create an abbreviation.

br: This tag is used to create a line break.

h1: This is an heading 1 tag.

address: This is an address tag used for syntactical marking of an address.

Code

                    
<!doctype html>
<head>
    <title>First Webpage</title>
</head>
<body style="background-color:#fafafa; padding:15px;">
    <div class="row">
        <div class="col">
            <img src="https://shooliniuniversity.com/assets/images/logo.png" href="https://shooliniuniversity.com/" style="width:100px;
                                height:50px;">
        </div>
        <div class="col" style="margin-left: -20%;">
            <h1 style="font-size: 50px;"> First Webpage </h1>
        </div>
    </div>
    <h1> Using heading h1 - Question for Odd </h1>
    <h2> Using heading h2 - We have to create a webpage using:</h2>
    <p> 1<sup>st</sup> line of p - 5 lines of p with a break tag and this being the first line <br />
    </p>
    <p> 2<sup>nd</sup> line of p - and this being the second line.</p>
    <p> 3<sup>rd</sup> line of p - While this is the 3rd line, </p>
    <p> 4<sup>th</sup> line of p - I am thining how it can become more interesting in 4th line </p>
    <p> 5<sup>th</sup> line of p - so that readers read it till the 5th line.</p>
    <h3> Using heading h3 - While making a paragraph is interesting</h3>
    <h4> Using heading h4 - if we use text-alignment:justify what it does is</h4>
    <h5> Using heading h5 - it will indent text equally throughout the screen.</h5>
    <h6> Using heading h6 - We also have to make sure an address like <address>Shoolini University, Bajhol</address> is
        marked correctly</h6>
    <p> Using abbr tag - <abbr title="that is">i.e.</abbr> it will help visually impaired users to correctly understand
        that it is an address</p>
    <h1 style="padding-top: 20px;">Question for Even</h1>
    <h4>Create a table with a 7 rows with 1 as heading and 1 as rowspan</h4>
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Demo</th>
                <th scope="col">Table</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Row 1, Column 1</td>
                <td>Row 1, Column 2</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Row 2, Column 1</td>
                <td>Row 2, Column 2</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td rowspan="2">Row 3 with rowspan 2, Column 1</td>
                <td>Row 3, Column 2</td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>Row 4, Column 2</td>
            </tr>
            <tr>
                <th scope="row">5</th>
                <td>Row 5, Column 1</td>
                <td>Row 5, Column 2</td>
            </tr>
            <tr>
                <th scope="row">6</th>
                <td>Row 6, Column 1</td>
                <td>Row 6, Column 2</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
                    
                

Output

Output


Here are 7 radio buttons

Here is the form:

Here is the list with 10 values:

  • This is item 1
  • This is item 2
  • with nested list equivalent to 2.1
  • and 2.2
  • This is item 3 to make it 5 in number.
  1. This is an ordered list.
  2. This is an ordered nested list
  3. with this as 2.1
  4. and this as 2.2
  5. This is an ordered list extra to make it 5 total.