-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
312 lines (305 loc) · 11.6 KB
/
test.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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<!DOCTYPE html>
<!--Root element-->
<html lang="en">
<head>
<!--Document metadata. Not displayed in the browser-->
<meta charset="UTF-8" name="">
<meta name="description" content="Webpage experience">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Antonio Santos">
<meta http-equiv="refresh" content=""> <!--Refresh document every "..." seconds-->
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<!--Document title-->
<title>HTML eXperience</title>
<!--Internal CSS uses the element style in the head section-->
<style>
h1 {
background-color: lightblue
}
h2 {
color: rgba(56, 165, 42, 0.8)
}
/* Opacity set to 80% */
p {
color: blue
}
</style>
<link rel="stylesheet" href="stylesheets/styles.css">
<!--External style sheet (External CSS). Remove to see the magic disappear-->
</head>
<body id="beginning">
<!--Inline CSS uses the style attribute of each HTML element-->
<h1 title="The largest predefined (in size) heading in HTML!" style="color: blue; text-align: center;">
Template configuration (a large heading with a
<br/>line break)</h1>
<h2>Welcome to a mixed salad of HTML elements with some Cascading Style Sheets!</h2>
<h2 title="A not so large heading.">Btw, this is a heading 2.</h2>
<h3 title="A coloured heading." style="color:coral">This is a heading 3.</h3>
<h4 title="I have a different font." style="font-family:'Courier New', Courier, monospace">This is a heading 4.</h4>
<h5>This is a heading 5.</h5>
<h6 title="Looking for binoculars? :)">This is a heading 6.</h6>
<h6 title="Such style!" style="color:brown; font-size:30px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif">
This is a styled heading 6.
</h6>
<p title="I'm a paragraph!">There isn't a heading 7.</p>
<p>This is a(nother) paragraph.</p>
<br/>
<hr title="A horizontal rule.">
<a href="#img2">
<button>Go to the end.</button>
</a>
<p style="font-size: 25px; text-align: center; ">Check out the
<a href="https://github.com/joaomlourenco/novathesis/wiki" target="_blank">
<i>NOVAthesis</i> wiki!</a>
</p>
<br/>
<!--Button "inside" a link. The same can be done for any HTML element-->
<a href="https://www.fct.unl.pt" target="_blank">
<button title="FCT-UNL">Click me! :)</button>
</a>
<br/>
<br/>
<a href="https://github.com/joaomlourenco/novathesis/" target="_blank">
<img title="A snowman in summer??!" src="images/snowman-bitmap.jpg" alt="An unique snowman" style="float:right;width:150px;height:200px;border:0">
</a>
<h2>
<mark>Ordered</mark> parameters:</h2>
<ol title="I have a title too!" type="I">
<li class="error">Language</li>
<li style="color: blue;font-size: 120%">Cover language</li>
<li class="error">Aftercover inclusion</li>
</ol>
<h2>
<ins>Unordered</ins> parameters:</h2>
<ul>
<li>Language</li>
<li>Cover language</li>
<li>Aftercover inclusion</li>
</ul>
<h2>A
<em>description</em> list:</h2>
<dl>
<dt>Universidade Nova de Lisboa</dt>
<dd>- Faculdade de Ciências e Tecnologia</dd>
<dd>- Faculdade de Ciências Médicas</dd>
<dt>Universidade de Lisboa</dt>
<dd>- Instituto Superior Técnico</dd>
<dd>- Faculdade de Medicina</dd>
</dl>
<h2>
<sup>A</sup> nested
<sub>list</sub> :</h2>
<ul>
<li>Tea</li>
<ol type="a" start="7">
<li>Black tea</li>
<li>Green tea</li>
</ol>
<li>Coffee</li>
<ul>
<li>Colombian</li>
<li>Brazilian</li>
</ul>
</ul>
<h2>A navigation menu:</h2>
<ul id="navigation_menu">
<!--could use class if it would exist more menus-->
<li>
<a href="#beginning">Home</a>
</li>
<li>
<a href="#chapter1">Chapter 1</a>
</li>
<li>
<a href="#chapter2">Chapter 2</a>
</li>
<li>
<a href="https://www.github.com/antoniomnds/testing" target="_blank">About</a>
</li>
</ul>
<br/>
<br/>
<button onclick="hideElements('table')">Hide tables</button>
<button onclick="showElements('table')">Show tables</button>
<table class="table">
<caption>Classic table (one cell per row and per column)</caption>
<!--<thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. Use them to apply CSS-->
<thead>
<!--thead and tfoot can enable the table header and footer to be printed at the top and bottom of each page-->
<tr>
<th>School</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<!--The table data/cell can contain any HTML element, text, image, lists, other tables, etc-->
<td>FCT-NOVA</td>
<td>Caparica</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>NOVA-SBE</td>
<td>Campolide</td>
</tr>
</tfoot>
</table>
<br/>
<table class="table">
<!--Table with cells that spans many columns-->
<caption>Multi-column table</caption>
<tr>
<th colspan="2">
<abbr title="Universidade Nova de Lisboa">UNL</abbr>
</th>
<th colspan="3">
<abbr title="Universidade de Lisboa">UL</abbr>
</th>
</tr>
<tr>
<td>
<abbr title="Faculdade de Ciências e Tecnologia">FCT</abbr>
</td>
<td>
<abbr title="School of Business and Economics">SBE</abbr>
</td>
<td>
<abbr title="Instituto Superior Técnico">IST</abbr>
</td>
<td>
<abbr title="Faculdade de Ciências">FC</abbr>
</td>
<td>
<abbr title="Faculdade de Direito">FD</abbr>
</td>
</tr>
</table>
<br/>
<br/>
<table id="t1" class="table">
<!--Table with cells that spans many rows-->
<caption>Multi-row table</caption>
<tr>
<th rowspan="2">
<abbr title="Universidade Nova de Lisboa">UNL</abbr>
</th>
<td>
<abbr title="Faculdade de Ciências e Tecnologia">FCT</abbr>
</td>
</tr>
<tr>
<td>
<abbr title="School of Business and Economics">SBE</abbr>
</td>
</tr>
<tr>
<th rowspan="3">
<abbr title="Universidade de Lisboa">UL</abbr>
</th>
<td>
<abbr title="Instituto Superior Técnico">IST</abbr>
</td>
</tr>
<tr>
<td>
<abbr title="Faculdade de Ciências">FC</abbr>
</td>
</tr>
<tr>
<td>
<abbr title="Faculdade de Direito">FD</abbr>
</td>
</tr>
</table>
<br/>
<hr>
<br/>
<q>Never give up on a dream just because of the time it will take to accomplish it. The time will pass anyway.</q>
<blockquote cite="www.google.com">Never give up on a dream just because of the time it will take to accomplish it. The time will pass anyway.</blockquote>
<hr>
<pre>
<p><abbr title="Faculdade de Ciências e Tecnologia da Universidade Nova de Lisboa">FCT-UNL</abbr> was founded in 1977.</p>
<address>Quinta da Torre<br/>Campus Universitário<br/>2829-516 Caparica</address>
<address> <!-- Preformatted text does not require line breaks :) -->
Quinta da Torre
Campus Universitário
2829-516 Caparica</address>
<bdo dir="rtl">Hello World!</bdo>
<cite>Some work title. See HTML reference for some possible attributes.</cite>
</pre>
<!--Inline styling bellow...-->
<p style="background-color: green; color:white; font-size: 20px; text-align: center; border:black solid 4px;">A
<em>green</em> box</p>
<p>Resize the window to see a picture changing.</p>
<picture>
<!--Not supported in IE12 and earlier or Safari 9.0 and earlier-->
<!--The browser will use the first source element with matching values and ignore any following ones-->
<!--https://www.w3schools.com/tags/att_source_media.asp to more details on the attribute media-->
<source media="(min-width: 1200px)" srcset="images/scenic-landscape-1508373727uru.jpg">
<source media="(min-width: 850px)" srcset="images/winter-scene-1494682117gMU.jpg">
<!--An img element is required as the last child tag of the picture declaration block-->
<!--It's used to provide backward compability for browsers that don't support the picture element, or if none of the source tags matched-->
<img src="images/snowman-bitmap.jpg" alt="snowman" class="resize">
</picture>
<br/>
<br/>
<br/>
<div style="background-color: black; color: white;">Some text in</div>
<div>different divisions.</div>
<span style="background-color: black; color: white;">Some text in</span>
<span>different spans.</span>
<h3>Other use of
<span style="background-color:tomato; color: white">span</span>.</h3>
<br/>
<iframe src="https://www.unl.pt/" name="iframe_1" height="400" width="800" style="border: 2px solid red; overflow: scroll">
<p>This browser doesn't support iframes.</p>
</iframe>
<br/>
<a href="https://www.fct.unl.pt" target="iframe_1">
<button id="b1">FCT-UNL</button>
</a>
<button onclick="changeText('b1')">Click to see the reference.</button>
<br/>
<a href="https://www.di.fct.unl.pt" target="iframe_1">
<button>Computer Science Department</button>
</a>
<br/>
<div style="text-align: center">
<button onclick="document.getElementById('demo').innerHTML = Date()">
<h3 id="demo">What time is it?</h3>
</button>
<br/>
<img id="myLightBulb" alt="Light bulb." src="images/pic_bulboff.gif" width="100" height="180">
<br/>
<button onclick="toogleLight(0)">Turn on.</button>
<button onclick="toogleLight(1)">Turn off.</button>
</div>
<div>
<p id="p1">Some paragraph.</p>
<button onclick="changeStyle('p1')">Click to change my style.</button>
</div>
<br/>
<a href="#beginning" style="font-size: 25px;">Jump to the top!</a>
<!--Linked bookmark-->
<br/>
<img id="img2" title="A public domain image :)" src="images/construction-zone-1351759675pK2.jpg" alt="Under construction"
width="350" height="200">
<br/>
<a href="https://www.github.com/antoniomnds/testing" target="_blank">
<button>Website's repository</button>
</a>
<!--when src is present, the script element must be empty-->
<script src="scripts.js"></script>
<script>
function changeStyle(elementID){
document.getElementById(elementID).style.fontSize = "20px";
document.getElementById(elementID).style.color = "white";
document.getElementById(elementID).style.backgroundColor = "black";
}
</script>
<!--Only shown when scripts are not supported by the browser-->
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
</html>