HTML-Basics/Week-2/L6-tags-demo.html at main · JLW-7/HTML-Basics · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>L6 Common Tags</h1>
    <h2>Horizontal Rule</h2>
    <p>Just a simple line, like below.</p>
    <hr>
    <h2>Buttons</h2>
    <button>Click Me</button>
    <hr>
    <h2>Progress</h2>
    <p>Usually used to show the completion percentage of something, like a form.</p>
    <progress value="50" max="100" width="100">50%</progress>
    <hr>
    <h2>Meter</h2>
    <p>Similar layout to progress tag.</p>
    <meter value="0.6">60%</meter>
    <meter value="0.3">30%</meter>
    <hr>
    <h2>Table</h2>
    <p>Used for creating a table.</p>
    <table>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>Doe</td>
            <td>22</td>
        </tr>
    </table>
    <hr>
    <h2>Form</h2>
    <p>Used for creating a form.</p>
    <form action="/submit-form" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        <br>
        <input type="submit" value="Submit">
    </form>
    <hr>
    <h2>Bdo (Bidirectional Override)</h2>
    <p>Used to override the text direction.</p>
    <p>The below order of the letters in this text will be displayed right-to-left.</p>
    <bdo dir="rtl">This text is displayed right-to-left.</bdo>


</body>
</html>