-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
206 lines (178 loc) · 4.81 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My Page</title>
<meta charset="utf-8">
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: blue;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body style="background-color: powderblue;">
<h1 style="text-align: center;">Centered heading</h1>
<h2>About W3Schools</h2>
<p title="About W3Schools">
W3Schools is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
<p><b>
If you move the mouse over the paragraph above,
the title will display as a tooltip.
</b></p><hr>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<form>
First name:<br>
<input type="text" name="firstname" placeholder="First name">
<br>
Last name:<br>
<input type="text" name="lastname" placeholder="Last name">
<br>
User password:<br>
<input type="password" name="psw">
</form><hr>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
</form> <hr>
<form method="post" target="_blank" accept-charset="utf-8" enctype="application/x-www-form-urlencoded" autocomplete="off">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form><hr>
<figure>
<a href="Capture.png" target="_blank">
<img src="Capture.png" alt="Mohamed.com" width="600" height="300">
<figcaption>Fig.1 - The Car</figcaption>
</a>
</figure><hr>
<iframe width="100%" height="300px" src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="m.html" target="iframe_a">M.com</a></p><hr>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button><hr>
<p style="color: red;">The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<hr>
<form action="http://www.w3schools.com/html/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist><br>
<textarea name="note"></textarea>
<input type="submit">
</form><hr>
<form >
Username: <input type="text" name="user">
<br><br>
Encryption: <keygen name="security">
<br><br>
<input type="submit">
</form><hr>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form><hr>
<p style="color: blue;"><strong>This is a paragraph.</strong></p>
<hr>
<p style="color: orange;">This is a paragraph.</p>
<hr>
<p>H<sub>2</sub>O is the scientific term for water.</p>
<hr>
<p style="font-family: verdana"><b>The <mark>pre</mark> tag preserves both spaces and line breaks:</b></p>
<pre style="font-size: 160%">
<i>My Bonnie lies over the ocean.</i>
<em>My Bonnie lies over the sea.</em>
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
<hr>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo
</nav>
<section>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</section>
<footer>
Copyright © Mohamed.com
<hr>
<a href="myPage.html" target="_blank">myPage</a>
<a href="https://www.google.com">Google</a>
</footer>
</body>
</html>