Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>div{
            display: inline-block;
            width: 30%;
            margin-left:2%;
            vertical-align: top;
        }

        span{
            font-weight: bold;
        }

        h1{
            text-align: center;
        }</style>
</head>
<body>
    <div>
        <h1>Lists excercise</h1>
        <p>
            The lists contain at least two elements. The most common types are ordered and unordered lists.
        </p>
        <h2>Examples</h2>
        <ol>
           1. Apple
            <ul>* Fruit</ul>
        <ul>* It's healthy</ul>
        </ol>
        <ol>
            2. Cucumber
            <ul>* Vegetable</ul>
            <ul>* The perfect salad ingredient</ul>
        </ol>
        <ol>
            3. Bonster
            <ul>* Energy drink</ul>
            <ul>* Contains coffee</ul>
        </ol>
        <img src="../HTML/HTML-Lab-Files/pic3.png" alt="list pic">
        <p>List icon link
                <a href="../HTML/HTML-Lab-Files/pic3.png">HERE</a>
        </p>

    </div>
    <div>
        <h1>Tables excercise</h1>
        <p>
            Tables is a structured set of data made up of rows and columns.
        </p>
        <table>
            <tr>
                <th>Programming language</th>
                <th>Developed by</th>
                 <th>First appeared</th>
            </tr>
            <tr>
                <th>C#</th>
                <th>Microsoft</th>
                <th>2000</th>
            </tr>
            <tr>
                <th>Java</th>
                <th>Oracle</th>
                <th>1995</th>
            </tr>
            <tr>
                <th>PHP</th>
                <th>Zend Technologies</th>
                <th>1995</th>
            </tr>

        </table>
        <img src="../HTML/HTML-Lab-Files/pic2.png" alt="table pic">
            <p>Table icon
                <a href="../HTML/HTML-Lab-Files/pic2.png">HERE</a>
    </div>
    <div>

        <h1>Form excercise</h1>
        <p>
            An HTML form is made of one or more widgets. Those widgets can be text fields (single line or multiline), select boxes
            , buttons, checkboxes, or radio buttons.
        </p>

        <form>
            Username
            <input type="text" name="username" id="username">
            <br>
            Password
            <input type="text" name="password" id="password">
            <br>
            Email
            <input type="text" name="email" id="email">
            <br>
            Age
            <input type="radio" name="age" value="Under 20">Under 20
            <input type="radio" name="age" value="20 or more">20 or more
            <br>
            <input type="submit" value="Submit">
            </form>
            <img src="../HTML/HTML-Lab-Files/pic.png" alt="form pic">
            <p>Form icon link
                <a href="../HTML/HTML-Lab-Files/pic.png">HERE</a>
            </p>

    </div>


</body>
</html>