html-practice/index.html at master · RishiBuilds/html-practice · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>HTML</title>
</head>
<body>
  <header>
    <h1>HTML</h1>
    <p>Just a sneak peek at core HTML elements</p>
  </header>

  <main>
    <section aria-labelledby="headings-paragraphs">
      <h2 id="headings-paragraphs">Headings & Paragraph</h2>
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur iure aliquid eaque laudantium, quo
        ullam nobis distinctio ex ipsam nulla. Illum sit dolor voluptatum, aperiam adipisci placeat eaque harum nisi!
      </p>
    </section>

    <section aria-labelledby="links-images">
      <h2 id="links-images">Links & Images</h2>
      <p>
        <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">Google</a>
      </p>
      <figure>
        <img
          src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=800&q=80"
          alt="Mountain landscape with lake at sunrise"
          width="400"
          height="250"
        />
        <figcaption>Landscape photo by (unsplash)</figcaption>
      </figure>
    </section>

    <section aria-labelledby="text-formatting">
      <h2 id="text-formatting">Text Formatting</h2>
      <p>CO<sub>2</sub> and E = mc<sup>2</sup></p>
      <pre><code>Hello
  HTML
</code></pre>
    </section>

    <section aria-labelledby="lists">
      <h2 id="lists">Lists</h2>
      <p>Unordered list</p>
      <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
      </ul>

      <p>Ordered lists</p>
      <ol>
        <li>Learn HTML</li>
        <li>Practice</li>
        <li>Build Projects</li>
      </ol>
    </section>

    <section aria-labelledby="table">
      <h2 id="table">Table</h2>
      <table border="1" summary="List of students with roll numbers and names">
        <caption>Students List</caption>
        <thead>
          <tr>
            <th scope="col">Roll No</th>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Rishi</td>
            <td>Chaurasia</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jeet</td>
            <td>Bhandari</td>
          </tr>
        </tbody>
      </table>
    </section>

    <section aria-labelledby="form">
      <h2 id="form">Form</h2>
      <form action="#" method="post" aria-describedby="form-note">
        <p id="form-note">Please complete required fields before submitting</p>

        <div>
          <label for="name">Name <span aria-hidden="true">*</span></label><br />
          <input id="name" name="name" type="text" placeholder="Enter your name" required />
        </div>

        <div>
          <label for="email">Email <span aria-hidden="true">*</span></label><br />
          <input id="email" name="email" type="email" placeholder="Enter your email" required />
        </div>

        <div>
          <label for="dob">Date of birth</label><br />
          <input id="dob" name="dob" type="date" />
        </div>

        <fieldset>
          <legend>Select Section</legend>
          <div>
            <input id="section-a" name="section" type="radio" value="A" />
            <label for="section-a">Section A</label>
          </div>
          <div>
            <input id="section-b" name="section" type="radio" value="B" />
            <label for="section-b">Section B</label>
          </div>
        </fieldset>

        <div>
          <input id="subscribe" name="subscribe" type="checkbox" value="yes" />
          <label for="subscribe">Subscribe</label>
        </div>

        <div>
          <label for="reason">Why do you want to join?</label><br />
          <textarea id="reason" name="reason" rows="4" placeholder="Tell us why..."></textarea>
        </div>

        <div>
          <label for="number">Select a number</label><br />
          <select id="number" name="number">
            <option value="">Select a number</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
        </div>

        <div>
          <button type="submit">Submit</button>
        </div>
      </form>
    </section>

    <section aria-labelledby="multimedia">
      <h2 id="multimedia">Multimedia</h2>

      <div>
        <p>Embedded video</p>
        <iframe
          width="560"
          height="315"
          src="https://www.youtube.com/embed/HcOc7P5BMi4?si=_DYpve53WCSqwU71"
          title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
        ></iframe>
      </div>

      <div>
        <p>Local video file</p>
        <video controls width="320" height="240">
          <source src="ufo.mp4" type="video/mp4" />
        </video>
      </div>
    </section>
  </main>

  <footer>
    <p>&copy;</p>
  </footer>
</body>
</html>