4. VIVA based on Lab 1, Lab 2, Lab 3.

Question for Even: Create a table using 7 rows with one as table heading and also split row number 3 into 2 parts and also give skyblue color to your table. Question for Odd: Create a webpage with a title as "First Webpage". Use the following tags in your webpage:

6 heading tags
address tag
abbr
break
image
background-color
alignment-tag
Paragraph with 5 lines

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

First Webpage

Using heading h1 - Question for Odd

Using heading h2 - We have to create a webpage using:

1^st line of p - 5 lines of p with a break tag and this being the first line

2^nd line of p - and this being the second line.

3^rd line of p - While this is the 3rd line,

4^th line of p - I am thining how it can become more interesting in 4th line

5^th line of p - so that readers read it till the 5th line.

Using heading h3 - While making a paragraph is interesting

Using heading h4 - if we use text-alignment:justify what it does is

Using heading h5 - it will indent text equally throughout the screen.

Using heading h6 - We also have to make sure an address like
Shoolini University, Bajhol
is marked correctly

Using abbr tag - i.e. it will help visually impaired users to corretly understand that it is an address

Question for Even

Create a table with a 7 rows with 1 as heading and 1 as rowspan

#	Demo	Table
1	Row 1, Column 1	Row 1, Column 2
2	Row 2, Column 1	Row 2, Column 2
3	Row 3 with rowspan 2, Column 1	Row 3, Column 2
4	Row 3 with rowspan 2, Column 1	Row 4, Column 2
5	Row 5, Column 1	Row 5, Column 2
6	Row 6, Column 1	Row 6, Column 2