-
Notifications
You must be signed in to change notification settings - Fork 35
/
index.html
214 lines (149 loc) · 5.6 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
<!-- Self closing / Empty tags: -->
<!-- meta: metadata: data about data. Tags which tells you information about other data on the webpage. -->
<!-- style tag is used to write internal CSS, i.e. to write css on the same page as HTML -->
<!-- link tag is used to write external CSS, i.e. to write css on different page -->
<!-- script tag is used to write internal JS, i.e. to write JS on the same page as HTML -->
<!-- meta charset: character set: tells us the characters this page will be using to displaying content. Characters including letters, numbers and special characters. -->
<!-- UTF: Unicode Text Format -->
<!-- HTML Entity: a collection of characters which turns into a symbol in the output -->
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
<meta charset="UTF-8">
<meta name="keywords" content="learning html, html basics, p tag, table tag, heading tags" />
<meta name="description" content="How to learn HTML. Learn HTML from basics. Learn about html p,heading, table, meta, anchor tags.">
<meta name="viewport" content="width=device-width,initial-scale:1.0">
<meta name="author" content="Rohit Jain">
<meta name="og:keywords">
<meta name="og:description">
<!-- <style>
</style> -->
<!-- <link rel="" href="" /> -->
<!-- <script></script> -->
</head>
<body>
<!-- <p>My name is Rohit Jain</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis velit blanditiis reiciendis nisi architecto qui voluptatem repellat hic voluptates a minus optio vitae sequi doloribus sint, incidunt est ducimus aliquam!
Ex dolores ipsam earum molestiae repellendus. Vitae ipsum, alias quidem deserunt, atque porro fuga voluptatum cumque quo consectetur quaerat, doloremque enim a corrupti officia dolorum obcaecati. Ratione iure esse debitis.
Dolor, ea sequi! Possimus aut sunt ratione! Ipsum, quos. Modi libero quibusdam dolore quisquam id aut quis, delectus minima quos est, perferendis consectetur facilis tempora corporis voluptatum adipisci aliquid quo.</p> -->
<!-- <h1>Cricket</h1>
<h2>Cricket</h2>
<h3>Cricket</h3>
<h4>Cricket</h4>
<h5>Cricket</h5>
<h6>Cricket</h6> -->
<!-- <h3>Cricket</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat fugit deserunt non nobis eius voluptate, commodi animi eos aliquam cum quidem architecto. Maxime aliquid consectetur repudiandae impedit hic, corrupti nam?
Dolore veritatis alias eveniet sapiente. Dolore blanditiis mollitia illo eveniet repellendus eius suscipit tempore debitis ut beatae. Doloremque quas sequi dignissimos facere, dolore adipisci architecto asperiores soluta necessitatibus! Dignissimos, eius.</p> -->
<!-- ATTRIBUTES: properties which provide extra powers to HTML tags -->
<!--disc | circle | square -->
<!-- <ul type="circle">
<li>Jaipur</li>
<li>New Delhi</li>
<li>Patna</li>
<li>Gurgaon</li>
</ul> -->
<!-- 1 | a | A | i | I -->
<!-- <ol type="I">
<li>Jaipur</li>
<li>New Delhi</li>
<li>Patna</li>
<li>Gurgaon</li>
</ol> -->
<!-- <tr></tr>: table row -->
<!-- <td></td>: table data -->
<!-- <th></th>: table heading -->
<!-- <table border="5">
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>Risabh</td>
<td>[email protected]</td>
<td colspan="2">1234567890</td>
</tr>
<tr>
<td>Rohit</td>
<td>[email protected]</td>
<td colspan="2">1235123454</td>
</tr>
<tr>
<td>Abhinav</td>
<td>[email protected]</td>
<td>1234567677</td>
<td>1234534567</td>
</tr>
<tr>
<td>Elton</td>
<td>[email protected]</td>
<td colspan="2">1234554432</td>
</tr>
</table> -->
<table border="5">
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>Risabh</td>
<td>[email protected]</td>
<td>1234567890</td>
</tr>
<tr>
<td>Rohit</td>
<td>[email protected]</td>
<td>1235123454</td>
</tr>
<tr>
<td rowspan="2">Abhinav</td>
<td rowspan="2">[email protected]</td>
<td>1234567677</td>
</tr>
<tr>
<td>1234534567</td>
</tr>
<tr>
<td>Elton</td>
<td>[email protected]</td>
<td>1234554432</td>
</tr>
</table>
<!-- ASSIGNMENT: cellspacing, cellpadding, colspan, rowspan -->
<!-- column spanning: increasing the size of columns to take up blank space
row spanning: increasing the size of row to take up blank space -->
<!-- SEMANTIC TAGS:
header, footer, figure, aside, section, nav, main, article, summary
-->
<!-- Block & Inline Elements -->
<!-- <p>
My name is Rohit
</p> -->
<p>To show photos on the web page, we use the <img> tag</p>
<!-- <p>×</p>
<p>&</p> -->
<!-- <p>"</p> -->
<!-- <p>&</p> -->
<!-- Semantic: name with a purpose -->
<!-- Semantic tag: a tag with a purpose -->
<!-- <header></header>
<footer></footer>
<section></section>
<aside></aside>
<figure></figure>
<nav></nav> -->
<!--
<figure>
<img src="" alt="">
<figcaption></figcaption>
</figure> -->
<!-- ALL THE SEMANTIC ELEMENTS ARE BLOCK ELEMENTS -->
<!-- FORM: to extract information from the user -->
<!-- AUDIO / VIDEO -->
<!-- sup / sub -->
<!-- code / kbd -->
</body>
</html>