forked from biratdatta/Webpage-Maker
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathIndex.html
198 lines (149 loc) · 4.02 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Website</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body >
<p style="color: aqua ;">
<strong>
Let's Make Something
</strong>
</p>
<p>
Here is a tutorial in texts for those who wanna learn HTML and CSS
</p>
Some of the popular webpages links!
<h1>
<a href="https://www.google.com">
Google
</a>
<br>
<a href="https://www.facebook.com">
Facebook
</a>
<br>
<a href="https://www.youtube.com">
YouTube
</a>
<br>
<a href="https://www.twitter.com">
Twitter
</a>
<br>
<a href="https://www.instagram.com">
Instagram
</a>
<br>
<a href="https://www.snapchat.com">
Snapchat
</a>
</h1>
<p>
Let's Make Something
</p>
<p>
Okay Now Let's Make Something
</p>
<p>
<!-- Strong makes it bold-->
<strong> Man, you give so much useful info. </strong> I have wondered why no one was using them in these tutorials videos...thanks for explaining that.
</p>
<!-- em Is for Emphasis-->
<em> This is different paragraph</em>
<p>
<b>
This is bold text too
</b>
<i>
<p></p> This is italic text too
</i>
<u>
<br> <u>This is underlined text too </u>
</u>
<a>
<p></p> <!--This is a link text too -->
</a>
</p>
<!-- Types of Lists in HTML -->
<!-- Ordered , Unordered and Descriptive List -->
<h1> Lists in HTML</h1>
<h4>An Unordered HTML List</h4>
<ul>
<li>January</li>
<li>February</li>
<li>March</li>
</ul>
<h4>An Ordered HTML List</h4>
<ol>
<li>January</li>
<li>February</li>
<li>March</li>
</ol>
<h4>A Description HTML List</h4>
<dl>
<dt>First month of year </dt>
<dd>- January</dd>
<dt>Last month of year</dt>
<dd>-December</dd>
</dl>
<!-- Adding Tables in HTML-->
<!-- Tables are used to store data in Tabular form with the help of rows and columns-->
<div class="tab">
<h2>TD elements define table cells</h2>
<table style="width:100%">
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</div>
<div>
<h2>Symbols in Html</h2>
<h4>Example of Mathematical Symbol</h4>
<p>The summation symbol: ∑ </p>
<p>The partial differential symbol: ∂</p>
<p>The element-of symbol: ∈</p>
<P>There are many more!!</p>
</div>
<div>
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</div>
<!-- Use of classes in html-->
<h2> Using classes in HTML</h2>
<h2>Here the class note is applied on "example"</h2>
<h3>My <span class="note">example</span> Heading</h3>
<p>This is some <span class="note">example</span> text.</p>
<script type="text/javascript">
var number = 0;
function Click() {
// the value will increase by every click
number+=1;
// declaring the value of div using a variable
document.getElementById("abc").innerHTML = number;
};
</script>
<p> Now let's learn how to make a counter in html using simple js</p>
<p> here is a div in which there will be a number which will increase as we will click a buttom</p>
<!-- Lets give it a id name so we can access its value using getElementbyId -->
<div ><p id ="abcd"><a id="abc">0</a></p></div>
<button type = "button" onClick="Click()">Click Me</button>
<!-- Now if we want a secondary link in the folder itself then this is the way-->
<a href="SECOND PAGE.html">
<p>
<strong>
<p>
This is a link to the second page in the file (which is not external)
</p>
</strong>
</p>
<img src=" https://www.bing.com/th?id=OIP.nI0YocbKuw2038jFv_VDfQHaD4&w=206&h=106&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2">
<!-- Now I want to add something from my computer an Image of mine-->
<img src="Image/me.jpeg" alt="It's me">
</p>
</body>
</html>