Week-2-Assignment/index.html at main · SamuelStave/Week-2-Assignment · 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Enhanced HTML5 Content & Forms</title>
    <meta charset="UTF-8">
</head>
<body>
    <h2>Ordered List (Goals for the Week)</h2>
    <ol>
        <li>Finish HTML assignment</li>
        <li>Practice CSS basics</li>
        <li>Review form validation</li>
    </ol>

    <h2>Unordered List (Favorite Fruits)</h2>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>

    <h2>Definition List (Web Terms)</h2>
    <dl>
        <dt>HTML</dt>
        <dd>HyperText Markup Language, the structure of web pages.</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets, used for styling web pages.</dd>
        <dt>Form</dt>
        <dd>Allows users to submit data to a web server.</dd>
    </dl>

    <h2>Nested Lists (Study Topics)</h2>
    <ol>
        <li>Frontend
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JavaScript</li>
            </ul>
        </li>
        <li>Backend
            <ul>
                <li>Python</li>
                <li>Node.js</li>
            </ul>
        </li>
    </ol>

    <h2>Image Example</h2>
    <img src="https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg"
         alt="Laptop on desk"
         width="400"
         height="250">

    <h2>Table (Simple Attendance)</h2>
    <table border="1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Present</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice</td>
                <td>Yes</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>Ben</td>
                <td>No</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Chloe</td>
                <td>Yes</td>
                <td>UK</td>
            </tr>
        </tbody>
    </table>

    <h2>Embedding Video & Audio</h2>
    <video width="400" height="250" controls>
        <source src="https://videos.pexels.com/video-files/856647/856647-hd_1920_1080_25fps.mp4" type="video/mp4">
        Your browser does not support videos.
    </video>
    <audio controls>
        <source src="https://pixabay.com/music/beats-cloudburst-by-audio-club-352202" type="audio/mpeg">
        Your browser does not support audio playback.
    </audio>

    <h2>HTML5 Form Example</h2>
    <form action="#" method="post" autocomplete="on">
        <label for="fullname">Full Name:</label>
        <input type="text" name="fullname" id="fullname" placeholder="Enter your name" required minlength="2">
        <br><br>
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" placeholder="Enter your email" required>
        <br><br>
        <label for="age">Age:</label>
        <input type="number" name="age" id="age" placeholder="Enter your age" min="1" max="120" required>
        <br><br>
        <label for="dob">Date of Birth:</label>
        <input type="date" name="dob" id="dob" required>
        <br><br>
        <label for="country">Country:</label>
        <select name="country" id="country" required>
            <option value="">--Select--</option>
            <option value="usa">USA</option>
            <option value="uk">UK</option>
            <option value="canada">Canada</option>
        </select>
        <br><br>
        <label>Gender:</label>
        <input type="radio" name="gender" value="Male" id="male" required>
        <label for="male">Male</label>
        <input type="radio" name="gender" value="Female" id="female">
        <label for="female">Female</label>
        <br><br>
        <label for="profilepic">Upload Profile Picture:</label>
        <input type="file" name="profilepic" id="profilepic" accept="image/*">
        <br><br>
        <label for="bio">Short Bio:</label>
        <textarea name="bio" id="bio" cols="30" rows="5" placeholder="Write something about yourself..." minlength="10" maxlength="200"></textarea>
        <br><br>
        <label for="password">Password:</label>
        <input type="password" name="password" id="password" required minlength="6" placeholder="At least 6 characters">
        <br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>