-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
224 lines (213 loc) · 8.8 KB
/
index.html
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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html>
<head>
<!--changing tab title-->
<title>My Coding Website</title>
</head>
<body>
<header>
<hr>
<!--Linking other pages-->
<a href="youtube.html">Go to my site page</a>
<hr>
</header>
<main>
<!--Header Tags-->
<h1>Programming Language</h1>
<h2>Programming Language</h2>
<h3>Programming Language</h3>
<h4>Programming Language</h4>
<h5>Programming Language</h5>
<h6>Programming Language</h6>
<hr>
<!-- Text style-->
<b>BOLD</b><br>
<i>ITALIC</i><br>
<u>UNDERLINED</u><br>
<hr>
<!--Paragraph Tags-->
<p>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
<p>Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
<hr>
<!--embeding a youtube video in HTML page-->
<iframe width="560" height="315" src="https://www.youtube.com/embed/FNGoExJlLQY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!--Breaking the line-->
<br>
<hr>
<!--embeding image on HTML page-->
<!--alt tag is for crawlers to identify the image-->
<img width="560" height="315" src="https://images.ctfassets.net/3s5io6mnxfqz/wfAz3zUBbrcf1eSMLZi8u/c03ac28c778813bd72373644ee8b8b02/AdobeStock_364059453.jpeg" alt="golden chess board">
<br>
<hr>
<!--embeding video on HTML page-->
<!-- We use attribute controls to provide video controls to play/pause the video -->
<!-- Used loop to play video in loop -->
<!-- Used autoplay to play video on opening the web page -->
<video src="mtVideo.mov" width="560" height="315" controls autoplay loop></video>
<br>
<hr>
<!--making hyperlinks-->
<h4>Below link open on this same tab</h4>
<a href="https://www.linkedin.com">Got to linkedin</a>
<br>
<!--sending on new tab-->
<h4>Below link open on the <a href="https://www.linkedin.com" target="_blank">new</a> tab</h4>
<a href="https://www.linkedin.com" target="_blank">Got to linkedin</a>
<br>
<!--To make a line or a saparator-->
<hr>
<!--Lists-->
<h2>Lists</h2>
<!--Unorder Lists-->
<h3>UnOrder Lists</h3>
<ul>
<li>Javascript</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>Scala</li>
</ul>
<hr>
<!--Unorder Lists-->
<h3>Order Lists</h3>
<ol>
<li>Javascript</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>Scala</li>
</ol>
<hr>
<!--Creating a form on HTML page-->
<!--/ means your website.com-->
<!--/about means your website.com/about-->
<!--method means API method it will be GET or POST or DELETE-->
<!--Here the input type will add the validation for that type like for email, email validation
and for password password validation will be added like password will get encrypted into "."-->
<h3>Creating a basic form</h3>
<form action="" method="get">
<div>
<label for="inputName">Enter Your Name :
<input type="text" name="name" id="inputName" placeholder="name">
</label>
</div>
<div>
<label for="inputEmail">Enter Your Email :
<input type="email" name="email" id="inputEmail" placeholder="email">
</label>
</div>
<div>
<label for="inputPassword">Enter Your Password :
<input type="password" name="password" id="inputPassword" placeholder="password">
</label>
</div>
<!--Creating dropdown menu-->
<div>
<select name="Cars" id="Cars">
<option value="Volvo">Volvo</option>
<option value="BMW">BMW</option>
<option value="Mercedies">Mercedies</option>
<option value="Mahindra">Mahindra</option>
</select>
</div>
<!-- Creating radio buttons -->
<div>
<label for="selectGender1">Gender :
<input type="radio" value="Male" name="gender" id="selectGender1">Male
</label>
<label for="selectGender">
<input type="radio" value="Female" name="gender" id="selectGender">Female
</label>
</div>
<!-- Creating checkboxes -->
<div>
<label for="selectbox1">Gender :
<input type="checkbox" value="Audi" name="car" id="selectbox1">Audi
</label>
<label for="selectbox">
<input type="checkbox" value="BMW" name="car" id="selectbox">BMW
</label>
</div>
<!--Creating description input box-->
<div>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</div>
<!--Creating submit button-->
<div>
<label for="submitButton">
<input type="submit" value="Submit your form" name="submit" id="submitButton">
</label>
</div>
</form>
<hr>
<!--Creating a table-->
<h3>Creating tables</h3>
<table><caption>User data</caption>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Omkar</td>
<td>omkar@gmail.com</td>
<td>26</td>
</tr>
<tr>
<td>Aniket</td>
<td>aniket@gmail.com</td>
<td>27</td>
</tr>
</tbody>
</table>
<hr>
<!--Creating dropdown menu-->
<h3>Creating dropdown menu</h3>
<div>
<select name="Cars" id="Cars">
<option value="Volvo">Volvo</option>
<option value="BMW">BMW</option>
<option value="Mercedies">Mercedies</option>
<option value="Mahindra">Mahindra</option>
</select>
</div>
<hr>
<!--subscript & superscript-->
<p>H<sub>2</sub>O</p>
<p>A<sup>n</sup>+B</p>
<p>3<sup>2</sup> = 9 </p>
<hr>
<!--to count spaces between text we use <pre> tag-->
<pre>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed nesciunt esse delectus exercitationem earum, ab ad reprehenderit quas consequuntur, fugit dolorem sunt minima commodi cupiditate quisquam possimus tenetur? Iusto, perferendis?
</pre>
<hr>
<!-- section tag is used to devide the content section wise -->
<section>Education : BTECH in Mech</section>
<section>Experience : Reliance Jio</section>
<hr>
<!-- We can use article tag to write articles or stories -->
<article>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima doloremque accusantium sint, exercitationem praesentium ex aliquid totam? Impedit quo recusandae rerum possimus, voluptatum in laboriosam itaque, quisquam, vitae ut iure?</article>
<hr>
<!-- We can use aside tag to place ads or the content that is not related to our main content -->
<aside>This is an advertise space</aside>
<hr>
<!-- We use div as a container. It is a Block element (takes full width of our screen) -->
<div>
<p>THis is under div tag</p>
<p>THis is under same div tag</p>
<p>THis is under same div tag</p>
</div>
<hr>
<!-- We use span tag to get expected space of a container (takes width as per size) -->
<span> this is under span tag</span>
<hr>
</main>
<footer>
<p style="text-align: center;">Omkar ™ | 2022 ©</p>
</footer>
</body>
</html>