Create a HTML file with these instructions:

Fix Code for slide 3
Create the border slide and make it colorful.
Create the border slide with different colored text
Recreate the slide 8

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>
<!html lang="en">
<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;">Output</h1>
    </div>
    <hr>
</div>

<div>
    <h3>Create a short html to demonstrate the use of style tag.</h3>
    <style>
        .styledemo1 :nth-child(odd) {
            font-family: "Maven Pro", Verdana;
            color: lightBlue;
        }

        .styledemo1 :nth-child(even) {
            font-family: "Roboto", Verdana;
            color: lightgreen;
        }
    </style>
    <div class="styledemo1">This is a demo text with custom style with automated styling for odd
        div's.</div>
    <div class="styledemo1">This is a demo text with custom style with automated styling for
        even div's.</div>
    <div class="styledemo1">This is a demo text with custom style with automated styling for odd
        div's.</div>
    <div class="styledemo1">This is a demo text with custom style with automated styling for
        even div's.</div>
    <div class="styledemo1">This is a demo text with custom style with automated styling for odd
        div's.</div>
    <div class="styledemo1">This is a demo text with custom style with automated styling for
        even div's.</div>
</div>
<div>
    <h3>Create some types of colored border: dotted </h3>
    <style>
        .demodot {
            border-style: dotted;
        }

        .demodash {
            border-style: dashed;
        }

        .demodouble {
            border-style: double;
        }

        .demogroove {
            border-style: groove;
        }

        .demoins {
            border-style: inset;
        }

        .demoout {
            border-style: outset;
        }

        .demoridge {
            border-style: ridge;
        }

        .demosolid {
            border-style: solid;
        }
    </style>
    <div class="demodot p-2 border border-success">Dotted Colored Border</div>
    <div class="demodash p-2 border border-warning">Dashed Colored Border</div>
    <div class="demodouble p-2 border border-danger">Double Colored Border</div>
    <div class="demogroove p-2 border border-primary">Groove Colored Border</div>
    <div class="demoins p-2 border border-secondary">Inset Colored Border</div>
    <div class="demoout p-2 border border-info">Outset Colored Border</div>
    <div class="demoridge p-2 border border-light">Ridge Colored Border</div>
    <div class="demosolid p-2 border border-white">Solid Colored Border</div>
</div>

<div>
    <h3>Create some types of colored border and colored text </h3>
    <style>
        .demodot {
            border-style: dotted;
        }

        .demodash {
            border-style: dashed;
        }

        .demodouble {
            border-style: double;
        }

        .demogroove {
            border-style: groove;
        }

        .demoins {
            border-style: inset;
        }

        .demoout {
            border-style: outset;
        }

        .demoridge {
            border-style: ridge;
        }

        .demosolid {
            border-style: solid;
        }
    </style>
    <div class="demodot p-2 border border-success text-dark">Dotted Colored Border</div>
    <div class="demodash p-2 border border-warning text-danger">Dashed Colored Border</div>
    <div class="demodouble p-2 border border-danger text-warning">Double Colored Border</div>
    <div class="demogroove p-2 border border-primary text-secondary">Groove Colored Border</div>
    <div class="demoins p-2 border border-secondary text-info">Inset Colored Border</div>
    <div class="demoout p-2 border border-info text-dark">Outset Colored Border</div>
    <div class="demoridge p-2 border border-light text-success">Ridge Colored Border</div>
    <div class="demosolid p-2 border border-white text-primary">Solid Colored Border</div>
</div>

<div>
    <h3>Create some types of colored border and colored text </h3>
    <style>
        .demomargin {
            margin-top: 10px;
            margin-bottom: 29px;
            margin-left: 20px;
            margin-right: 15px;
        }
    </style>
    <div class="demomargin p-5 m-5 border border-5  border-bottom border-danger text-dark">Dotted
        Colored Border</div>
</div>                    
</body>
</html>

Output

Create a short html to demonstrate the use of style tag.

This is a demo text with custom style with automated styling for odd div's.

This is a demo text with custom style with automated styling for even div's.

This is a demo text with custom style with automated styling for odd div's.

This is a demo text with custom style with automated styling for even div's.

This is a demo text with custom style with automated styling for odd div's.

This is a demo text with custom style with automated styling for even div's.

Create some types of colored border: dotted

Dotted Colored Border

Dashed Colored Border

Double Colored Border

Groove Colored Border

Inset Colored Border

Outset Colored Border

Ridge Colored Border

Solid Colored Border

Create some types of colored border and colored text

Dotted Colored Border

Dashed Colored Border

Double Colored Border

Groove Colored Border

Inset Colored Border

Outset Colored Border

Ridge Colored Border

Solid Colored Border

Create some types of colored border and colored text

Dotted Colored Border