-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathHistory.html
More file actions
344 lines (319 loc) · 16 KB
/
History.html
File metadata and controls
344 lines (319 loc) · 16 KB
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
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html lang="en-AU">
<head>
<!--This html file is an assignment of CITS5505 unit in the university of Western Australia (2024 S1)-->
<!--This is a part of the indivisual assingment-->
<!-- Author name: Arthur Lian (Mingyu Lian as the formal name) SID:24046428-->
<!--this html file mainly show the history Hyperlink-->
<!--the photo/videos of in this page are photoed by the author, the author has the copyright-->
<!--Some parts of the code might be generated by ChatGPT, will be referred in the content-->
<!--Some parts of the content might be extracted from online resource, will be referred in the content-->
<!--Part of the logo is from the ICONS funciton in MicroSoft PowerPoints, who owns the copyrights-->
<!--this page doesn't include any outside resource (or framework like Bootstrap) all thestyles are defined in css/JS-->
<title> Hyperlink History</title>
<meta name="author" content="Arthur Lian">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--local resource-->
<script src="myScript.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="source/logo.png">
</head>
<body>
<!--header section-->
<nav class="func-bar">
<ul >
<li class = "linebar funcli" id="theme" title="Change Day/Night Theme"> Day/Night</li>
<li class = "linebar funcli" id="printButton" title="Print the Page"> Print</li>
</ul>
</nav>
<!--logoheader Section-->
<section class = "logoheader" >
<img src = "source/fulllogo.png" alt="cannot find the resource" class = "fulllogo" style="float:left">
<nav class="navi-bar">
<ul>
<li class = "linebar logobar"> <a href = "Concept.html" title="Concept of Hyperlink">CONCEPT</a></li>
<li class = "linebar logobar"> <a href = "History.html" title="History of Hyperlink">HISTORY</a></li>
<li class = "linebar logobar"> <a href = "Aboutauthor.html" title="Introduction of Author">AUTHOR</a></li>
</ul>
</nav>
</section>
<!--title part Carousel -->
<section class="custom-carousel">
<div class="carousel-container">
<div class="carousel-logo">
<img src="source/fulllogogray.png" alt="Cannot find resource" >
</div>
<div class="carousel-title">
About HISTORY
</div>
<div class="carousel-slide">
<!-- Carousel item 1 -->
<div class="carousel-content">
<img src="source/global.jpg" alt="cannot find resources">
<div class="text">_____________<br><br>from <b>LOCAL</b> to <b>GLOBAL</b> </div>
</div>
<!-- Carousel item 2 -->
<div class="carousel-content">
<img src="source/media.jpg" alt="cannot find resources">
<div class="text">_____________<br><br>from <b>TEXT</b> to <b>MULTIMEDIA</b></div>
</div>
<!-- Carousel item 3 -->
<div class="carousel-content">
<img src="source/dynamic.jpg" alt="cannot find resources">
<div class="text"> _____________<br><br>from <b>STATIC</b> to <b>DYNAMIC</b></div>
</div>
<!-- Carousel item 4 -->
<div class="carousel-content">
<img src="source/social.jpg" alt="cannot find resources">
<div class="text">_____________<br><br>from <b>INFORMATION RETIREVAL</b> to <b>SOCIAL INTERACTION</b></div>
</div>
</div>
</div>
<div class="carousel-indicators">
<!-- Indicators will be generated by JavaScript -->
</div>
</section>
<section>
<div id="quote-container">
<h4>Here quotes a sentence randomly</h4>
<p> this is driven by AJAX/XMLHTTP/JSON</p>
<div class="button">
<button onclick="getRandomQuote()">Get a Random Quote</button><br>
</div>
<div class="quotepart">
<span id="quote">"Difficulties increase the nearer we get to the goal."</span><br><br>
<span id="author" style="font-size: small;">- Johann Wolfgang von Goethe</span>
</div>
</div>
</section>
<!--time line section-->
<!--The source cited here is in the link of Read More button-->
<section id="timeline">
<div class="timeline-title">
<h2>Responsive Timeline</h2>
</div>
<ul>
<li>
<i></i>
<div class="box">
<div class="box-front" style="background-color: rgb(187, 164, 64);">
<h3 class="title"><span class="year">1945<br></span>
<p class="subtitle" style="color: rgb(187, 164, 64);">Memex System </p></h3>
</div>
<div class="box-back">
<p>
Proposed by Vannevar Bush, it was an early concept that foreshadowed hyperlinks
and personal information management systems, though not yet
realized in digital technology.
</p>
<button><a href="https://en.wikipedia.org/wiki/Memex" target="_blank">Read More</a></button>
</div>
</div>
</li>
<li>
<i></i>
<div class="box">
<div class="box-front">
<h3 class="title"><span class="year">1964</span><p class="subtitle">Project Xanadu </p></h3>
</div>
<div class="box-back">
<p>
Proposed by Ted Nelson, it was an early attempt at the hyperlink concept,
aiming to create a global network of cross-referenced texts.
</p>
<button><a href="https://en.wikipedia.org/wiki/Project_Xanadu" target="_blank">Read More</a></button>
</div>
</div>
</li>
<li>
<i></i>
<div class="box">
<div class="box-front" style="background-color: rgb(125, 64, 187);">
<h3 class="title"><span class="year">1966</span>
<p class="subtitle" style="color: rgb(125, 64, 187);">NLS system </p></h3>
</div>
<div class="box-back">
<p>
Developed by Douglas Engelbart's team,
it was the first to implement hyperlinks within a single document and
connecting paragraphs between separate documents.
</p>
<button><a href="https://en.wikipedia.org/wiki/NLS_(computer_system)" target="_blank">Read More</a></button>
</div>
</div>
</li>
<li>
<i></i>
<div class="box">
<div class="box-front">
<h3 class="title"><span class="year">1983</span><p class="subtitle">HyperTIES </p></h3>
</div>
<div class="box-back">
<p>
Developed by Ben Shneiderman and Dan Ostroff, it introduced
highlighted links and was used to produce the world's first electronic journal.
</p>
<button><a href="https://muse.jhu.edu/pub/166/oa_monograph/chapter/144659/pdf" target="_blank">Read More</a></button>
</div>
</div>
</li>
<li>
<i></i>
<div class="box">
<div class="box-front" style="background-color: rgb(25, 139, 105);">
<h3 class="title"><span class="year">1987</span><p class="subtitle" style="color:rgb(25, 139, 105);">HyperCard </p></h3>
</div>
<div class="box-back">
<p>
A database program for Apple Macintosh that allowed hyperlinking
between various pages within a document, as well as to other documents
and separate applications.
</p>
<button><a href="https://en.wikipedia.org/wiki/HyperCard" target="_blank">Read More</a></button>
</div>
</div>
</li>
<li>
<i></i>
<div class="box">
<div class="box-front">
<h3 class="title"><span class="year">1990</span><p class="subtitle">Windows Help </p></h3>
</div>
<div class="box-back">
<p>
Introduced with Microsoft Windows 3.0, it made extensive use of
hyperlinks to link different pages in a single help file together.
</p>
<button><a href="https://en.wikipedia.org/wiki/Windows_3.0" target="_blank">Read More</a></button>
</div>
</div>
</li>
<li>
<i></i>
<div class="box">
<div class="box-front">
<h3 class="title"><span class="year">1991</span><p class="subtitle">Gopher Protocol </p></h3>
</div>
<div class="box-back">
<p>
Implemented hyperlinks from any Internet site to any other Internet site, but was quickly eclipsed by HTML.
</p>
<button><a href="https://en.wikipedia.org/wiki/Gopher_(protocol)" target="_blank">Read More</a></button>
</div>
</div>
</li>
<li>
<i></i>
<div class="box">
<div class="box-front" style="background-color: rgb(168, 33, 85);">
<h3 class="title"><span class="year">1993</span><p class="subtitle" style="color: rgb(168, 33, 85);">HTML and Mosaic Browser </p></h3>
</div>
<div class="box-back">
<p>
Brought widespread application of hyperlinks, with HTML enabling the integration of graphics, text, and hyperlinks.
</p>
<button><a href="https://en.wikipedia.org/wiki/Mosaic_(web_browser)" target="_blank">Read More</a></button>
</div>
</div>
</li>
<li>
<i></i>
<div class="box">
<div class="box-front">
<h3 class="title"><span class="year">1998</span><p class="subtitle">Google Search</p></h3>
</div>
<div class="box-back">
<p>
Revolutionized the way hyperlinks and web content were indexed and searched, using the algorithm to rank websites. This greatly facilitated the discovery and sharing of web content.
</p>
<button><a href="https://en.wikipedia.org/wiki/History_of_Google" target="_blank">Read More</a></button>
</div>
</div>
</li>
<li>
<i></i>
<div class="box">
<div class="box-front" style="background-color: rgb(29, 98, 136);">
<h3 class="title"><span class="year">2004</span><p class="subtitle" style="color:rgb(29, 98, 136);">Social Media Platforms</p></h3>
</div>
<div class="box-back">
<p>
Platforms like Facebook (2004) utilized hyperlinks extensively for connecting users, transforming hyperlinks into tools for social interaction and information dissemination on a massive scale.
</p>
<button><a href="https://online.maryville.edu/blog/evolution-social-media/" target="_blank">Read More</a></button>
</div>
</div>
</li>
<li>
<i></i>
<div class="box">
<div class="box-front">
<h3 class="title"><span class="year">2007</span><p class="subtitle">Smartphones Internet</p></h3>
</div>
<div class="box-back">
<p>
The advent of the mobile internet made hyperlinks accessible on the go, with deep linking technologies
allowing links to direct users to specific locations within mobile apps.
</p>
<button><a href="https://en.wikipedia.org/wiki/Mobile_web" target="_blank">Read More</a></button>
</div>
</div>
</li>
<li>
<i></i>
<div class="box">
<div class="box-front">
<h3 class="title"><span class="year">2010</span><p class="subtitle"> APIs and Web Services</p></h3>
</div>
<div class="box-back">
<p>
It allowed different web services to be linked and interact through hyperlinks,
facilitating the integration of disparate web services and the automation of tasks across the internet.
</p>
<button><a href="https://en.wikipedia.org/wiki/API" target="_blank">Read More</a></button>
</div>
</div>
</li>
<li>
<i></i>
<div class="box">
<div class="box-front" style="background-color: rgb(165, 71, 37);">
<h3 class="title"><span class="year">2010s</span><p class="subtitle" style="color: rgb(165, 71, 37);">Semantic Web & Linked Data</p></h3>
</div>
<div class="box-back">
<p>
Efforts to create a more structured web where data is interconnected in a meaningful way,
allowing for more sophisticated linking of data across the web.
</p>
<button><a href="https://pitt.libguides.com/metadatadiscovery/linked-data" target="_blank">Read More</a></button>
</div>
</div>
</li>
<li>
<i></i>
<div class="box">
<div class="box-front">
<h3 class="title"><span class="year">2010s</span><p class="subtitle">HTTPS</p></h3>
</div>
<div class="box-back">
<p>
The widespread adoption of HTTPS as the standard for secure web browsing ensured that hyperlinks, when clicked,
led to secure connections, protecting users from various types of cyber threats.
</p>
<button><a href="https://en.wikipedia.org/wiki/HTTPS" target="_blank">Read More</a></button>
</div>
</div>
</li>
</ul>
</section>
<!--footer-->
<div class="footer">
<img src="source/fulllogogray.png" alt="cannot find the resource" class = "footerlogo">
<p>
©Arthur Lian 2024<br>
lian.mingyu@outlook.com
</p>
</div>
</body>
</html>