Lecture-2/lecture-2.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Styles</title>

    <!-- internal css -->
    <style>
        /* css property and values */
        .style-list {
            color: red;
            background-color: orange;
        }

        .style-ul-list {
            list-style-type: square;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
        <!-- Lists -->
        <!-- unordered list 
    li-> list item -->
        <h3>Web technologies</h3>

        <!-- inline css -->
        <ul class="style-ul-list">
            <li class="style-list">HTML</li>
            <li class="style-list">CSS</li>
            <li class="style-list">JS</li>
            <li class="style-list">ReactJs</li>
        </ul>

        <!-- ordered list
    type="I" type="i" type="a" type="A" -->
        <ol type="A">
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>ReactJs</li>
        </ol>

        <ol start="4" reversed>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>ReactJs</li>
        </ol>

        <!-- description list 
    dt-definition term
    dd->description defination-->
        <dl>
            <dt>HTML</dt>
            <dd>is used to structure <b>webpage.</b></dd>

            <dt>CSS</dt>
            <dd>is used to style <i>webpage.</i></dd>
        </dl>

        <!-- Formatting elements -del, sup, sub -->
        <p>Hello <del>world<del></del></p>
        <p>2 <sup>3</sup> &equals; 2 &times; 2 &times; 2 &equals; 8</p>
        <p>log <sub>10</sub> </p>

        <!-- Quotation elements -->
        <address>
            By alex joe <br>
            visit us:<br>
            admin.com<br>
            Street 201<br>
            USA
        </address>

        <p>HTML <abbr title="Hyper Text Markup Language">HTML</abbr></p>

        <q style="font-size: 40px;">Adding quotes</q>

        <p>Hi&comma; this is <span style="color: red">Alina&period;</span></p>

        <div style="text-align: center; background-color: orange;">
            <img src="./download.png" alt="html">
        </div>

        <p>&#8377; 20000 </p>
        <p>&copy; Rights belong to Edyoda</p>

        <p> 3 &#62; 2
            &lt;
            &gt;
        </p>

        <p>Hi, This is <span style="color:red; display: block;">Alex.</span></p>

    </div>

</body>

</html>

<!-- pseudo element
::marker
 -->