-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathoverall.html
210 lines (179 loc) · 6.06 KB
/
overall.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="This is description">
<meta name="keywords" content="html, html tutorials, web development">
<meta name="robots" content="INDEX, FOLLOW">
<title>Document</title>
<!-- This is how you include external css -->
<link rel="stylesheet" href="harry.css">
<!-- This is how you include external JavaScript -->
<script src="harry.js"></script>
</head>
<body>
<a href="https://google.com" target="_blank">Go to google</a><br>
<a href="https://facebook.com" target="_blank">Go to facebook</a><br>
<a href="https://twitter.com" target="_blank">Go to twitter</a><br>
<a href="https://linkedin.com" target="_blank">Go to Linkedin</a><br>
<a href="/tut4.html" target="_blank">Tut 4</a>
<a href="/tut5.html" target="_blank">Tut 5</a>
<!-- Image is not present hence alt text is shown -->
<!-- <img src="harry.jpg" alt="Error loading image"> -->
<img src="https://source.unsplash.com/200x110/?nature,water" alt="remote image" width="233" height="34">
<!-- This is How we make List in HTML -->
<ul type="circle">
<li>This is first item of my unordered list</li>
<li>This is second item of my unordered list</li>
<ul>
<li>Another one</li>
<li>Another two</li>
<li>Another three</li>
</ul>
<li>This is third item of my unordered list</li>
</ul>
<ol type="a">
<li>This is first item of my ordered list</li>
<li>This is second item of my ordered list</li>
<li>This is third item of my ordered list</li>
</ol>
<!-- Tables -->
<h3>HTML Table</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Employee Id</th>
<th>Employee Role</th>
</tr>
</thead>
<tbody>
<tr>
<td> Harry </td>
<td> 34343 </td>
<td> Programmer </td>
</tr>
<tr>
<td> Rohan Das</td>
<td> 3483 </td>
<td> HTML Expert </td>
</tr>
<tr>
<td> Shubham </td>
<td> 7564 </td>
<td> Android Developer </td>
</tr>
</tbody>
</table>
<h2>This is HTML forms tutorial</h2>
<form action="backend.php">
<label for="name"> Name</label>
<div>
<input type="text" name="myName" id="name">
</div>
<br>
<div>
Role: <input type="text" name="myRole">
</div>
<br>
<div>
Email: <input type="email" name="myEmail">
</div>
<br>
<div>
Date: <input type="date" name="myDate">
</div>
<br>
<div>
Bonus: <input type="number" name="myBonus">
</div>
<br>
<div>
Are you eligible?: <input type="checkbox" name="myEligibility" checked>
</div>
<br>
<div>
Gender: Male <input type="radio" name="myGender"> Female <input type="radio" name="myGender">
Other <input type="radio" name="myGender">
</div>
<br>
<div>
Write about yourself: <br><textarea name="myText" cols="90" rows="10"></textarea>
</div>
<br>
<div>
<label for="car">Car</label>
<select name="myCar" id="car">
<option value="ind">Indica</option>
<option value="swf" selected>Swift</option>
</select>
</div>
<br>
<div>
<input type="submit" value="Submit Now">
<input type="reset" value="Reset Now">
</div>
</form>
<strong style="border: 2px solid red;">this is a paragraph</strong> <a style="border: 2px solid blue;">
this is also a paragraph</a>
<span style="border: 2px solid red;">this is a span</span> <span style="border: 2px solid red;">this is also a span</span>
li, em, div, img
<h3>Ids and classes tutorial</h3>
<div id="mainBox" class="redBg blackBorder">
this is mainbox
</div>
<span class="redBg"></span>
<!-- Select and press ctrl + / to comment -->
<!-- Emmet -->
<!-- . is for class and # is for id -->
<span class="redBg"></span>
<span id="mainSpan"></span>
<div class="redBg blackBorder anotherClass"></div>
<!-- Emmet takes div tag as default -->
<div class="blackBackground"></div>
<!-- Creating multiple elements using Emmet -->
<!-- span.myClass.myClass2.myClass3*4 + <Tab> to print 4 similar elements using Emmet -->
<span class="myClass myClass2 myClass3">First</span>
<span class="myClass myClass2 myClass3">Second</span>
<span class="myClass myClass2 myClass3">Third</span>
<span class="myClass myClass2 myClass3">Fourth</span>
<div class="container">
<p>This is a paragraph</p>
</div>
<div class="container">
<p>This is another paragraph with two spaces</p>
<p>Paragraph is written like this <p> </p>
<p>Pound is written like this £ </p>
<p>Copyright is written like this © </p>
<p>Another character is ⇛ </p>
<p>Another character is ¼ </p>
<p>Empty character is written like this </p>
</div>
<h3>Semantic Elements</h3>
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?
A keyboard.
A keyboard.
A keyboard.
A keyboard.
A keyboard.
A keyboard.
A keyboard.
A keyboard.
A keyboard.
A keyboard.
A keyboard.
A keyboard.
A keyboard.
A keyboard.
A keyboard.
A keyboard.
A keyboard.
A keyboard.
A keyboard.</summary>
lorem34
</details>
</body>
</html>