-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathglossary.html
440 lines (395 loc) · 24.4 KB
/
glossary.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
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
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Newspaper - Glossary</title>
<!-- Website Stylesheets -->
<link href="styles/style.css" type="text/css" rel="stylesheet">
<link href="styles/fonts.css" type="text/css" rel="stylesheet">
<!-- Font Awesome (https://fontawesome.com/) -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body id="top" class="flex">
<!-- Site Header -->
<header class="site-header">
<a class="menu-button" href="index-nav.html"><i class="fas fa-bars"></i></a>
<a class="logo" href="index.html"><img src="images/logo.png" alt="Newspaper Logo"></a>
<div class="search-box">
<i class="fas fa-search"><input type="search" value="Search"></i>
</div>
<a class="search-button" href="index-search.html"><i class="fas fa-search"></i></a>
</header>
<!-- Site Navigation Bar -->
<nav class="site-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a class="current-page" href="glossary.html">Glossary</a></li>
<li><a href="jobs.html">Jobs</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
</ul>
</nav>
<!-- Site Main -->
<main class="site-main">
<h2>Glossary</h2>
<!-- Glossary Table -->
<div class="glossary-table">
<!-- Table Headings -->
<!-- HTTP Headings -->
<div class="heading heading-1">
Term
</div>
<div class="heading heading-2">
Definition
</div>
<div class="heading heading-3">
Source(s)
</div>
<!-- WWW Headings -->
<div class="heading heading-4">
Term
</div>
<div class="heading heading-5">
Defintion
</div>
<div class="heading heading-6">
Source(s)
</div>
<!-- Internet Headings -->
<div class="heading heading-7">
Term
</div>
<div class="heading heading-8">
Defintion
</div>
<div class="heading heading-9">
Source(s)
</div>
<!-- HTML Headings -->
<div class="heading heading-10">
Term
</div>
<div class="heading heading-11">
Defintion
</div>
<div class="heading heading-12">
Source(s)
</div>
<!-- CSS Headings -->
<div class="heading heading-13">
Term
</div>
<div class="heading heading-14">
Defintion
</div>
<div class="heading heading-15">
Source(s)
</div>
<!-- JavaScript Headings -->
<div class="heading heading-16">
Term
</div>
<div class="heading heading-17">
Defintion
</div>
<div class="heading heading-18">
Source(s)
</div>
<!-- Stylesheet Headings -->
<div class="heading heading-19">
Term
</div>
<div class="heading heading-20">
Defintion
</div>
<div class="heading heading-21">
Source(s)
</div>
<!-- Directory Headings -->
<div class="heading heading-22">
Term
</div>
<div class="heading heading-23">
Defintion
</div>
<div class="heading heading-24">
Source(s)
</div>
<!-- IDE Headings -->
<div class="heading heading-25">
Term
</div>
<div class="heading heading-26">
Definition
</div>
<div class="heading heading-27">
Source(s)
</div>
<!-- Git Headings -->
<div class="heading heading-28">
Term
</div>
<div class="heading heading-29">
Definition
</div>
<div class="heading heading-30">
Source(s)
</div>
<!-- Front End Developer Headings -->
<div class="heading heading-31">
Term
</div>
<div class="heading heading-32">
Definition
</div>
<div class="heading heading-33">
Source(s)
</div>
<!-- Back End Developer Headings -->
<div class="heading heading-34">
Term
</div>
<div class="heading heading-35">
Definition
</div>
<div class="heading heading-36">
Source(s)
</div>
<!-- Full Stack Developer Headings -->
<div class="heading heading-37">
Term
</div>
<div class="heading heading-38">
Definition
</div>
<div class="heading heading-39">
Source(s)
</div>
<!-- Table Content -->
<!-- HTTP -->
<div id="http" class="term">
<p>HTTP</p>
</div>
<div class="definition">
<p>The <strong>HyperText Transfer Protocol (HTTP)</strong> is the protocol that essentially forms the backbone of the web. Based on the client-server model, and considered to be an application layer (Layer 7) protocol in the OSI Model, HTTP allows for documents that make up web pages, such as HTML and CSS documents, to be transmitted by a server, commonly known as the Web Server, to the client that initially made the HTTP request. Once a client has received the documents that they requested, the result is displayed in the client's web browser.</p>
<p>When hosting files, a Web Server typically uses HTTP on TCP Port 80. However, HTTP Secure (HTTPS), which is an encrypted version of the standard HTTP protocol, instead uses TCP Port 443.</p>
<p>Any communication done over HTTPS is usually encrypted using Secure Sockets Layer (SSL) or the more recent Transport Layer Security (TLS), and is therefore the most widely recommended option when it comes to setting up a web server, especially if sensitive information was to be transferred between the server and client.</p>
</div>
<div class="source">
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP" target="_blank">MDN Web Docs - HTTP</a>
<a href="https://developer.mozilla.org/en-US/docs/Glossary/https" target="_blank">MDN Web Docs - HTTPS</a>
</div>
<!-- WWW -->
<div id="www" class="term">
<p>WWW</p>
</div>
<div class="definition">
<p>The <strong>World Wide Web (WWW)</strong> is the term that is commonly used to refer to the many HTML resources, much of which are interlinked, that can be accessed via the Internet</p>
<p>Whilst some people may use this term interchangeably with "Internet", the terms Internet and WWW do in fact have different meanings. Whilst WWW refers to interlinked resources, often coming in the form of HTML web pages, the term Internet refers to the infrastructure that allows user to access the WWW.</p>
</div>
<div class="source">
<a href="https://www.techopedia.com/definition/5217/world-wide-web-www" target="_blank">Techopedia</a>
</div>
<!-- Internet -->
<div id="internet" class="term">
<p>Internet</p>
</div>
<div class="definition">
<p>The <strong>Internet</strong> is the term that is commonly used to refer to the network of globally interconnected devices that allows for data to be exchanged regardless of the device's physical location. Any device that is connected to the Internet transmits data using the Transmission Control Protocol/Internet Protocol (TCP/IP) protocol suite.</p>
</div>
<div class="source">
<a href="https://www.techopedia.com/definition/2419/internet" target="_blank">Techopedia</a>
</div>
<!-- HTML -->
<div id="html" class="term">
<p>HTML</p>
</div>
<div class="definition">
<p><strong>HyperText Markup Language (HTML)</strong> is a markup language that is used to create the structure of many of the websites you see on the web today.</p>
<p>For the basic structure of a website, HTML makes use of elements such as <code><html></code>, <code><head></code> and <code><body></code>. When describing content on a page, however, HTML also makes use of semantic elements such as <code><header></code>, <code><nav></code>, <code><main></code> and <code><footer></code></p>
<p>As an example of how HTML code is typically structured, the following code shows you how to make a basic web page with the text "Hello World!":</p>
<div class="code-block">
<!DOCTYPE html><br>
<html><br>
    <head><br>
    </head><br>
    <body><br>
        <p>Hello World!</p><br>
    </body><br>
</html>
</div>
<p>With these elements, HTML can therefore essentially be thought of as the skeleton of a web page.</p>
</div>
<div class="source">
<a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML" target="_blank">MDN Web Docs - HTML</a>
</div>
<!-- CSS -->
<div id="css" class="term">
<p>CSS</p>
</div>
<div class="definition">
<p><strong>Cascading Style Sheets (CSS)</strong> is a stylesheet language. Whilst HTML can be thought of as the skeleton of a web page, CSS can essentially be thought of as the skin of a web page.</p>
<p>Unlike HTML code, which makes use of elements like <code><header></code>
and <code><footer></code>, CSS code is instead made up of selectors, which
in turn contain properties.</p>
<p>As an example of how a typical CSS declartion is structured, the follow snippet
of code shows you how you would make the background of a paragraph black, and the text
white:<br></p>
<div class="code-block">
p {<br>
    background-color: black;<br>
    color: white;<br>
}
</div>
</div>
<div class="source">
<a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS" target="_blank">MDN Web Docs - CSS</a>
</div>
<!-- JavaScript -->
<div id="javascript" class="term">
<p>JavaScript</p>
</div>
<div class="definition">
<p><strong>JavaScript</strong> is a programming language that is commonly used by Web Developers to provide additional functionality on a web page.</p>
<p>Unlike HTML and CSS, which are a markup language and a stylesheet language respectively, the fact that JavaScript is a programming language means that JavaScript code can be executed outside of the user's web browser. As a result, this can give developers the ability to create standalone JavaScript applications.</p>
</div>
<div class="source">
<a href="https://developer.mozilla.org/bm/docs/Web/JavaScript" target="_blank">MDN Web Docs - JavaScript</a>
</div>
<!-- Stylesheet -->
<div id="stylesheet" class="term">
<p>Stylesheet</p>
</div>
<div class="definition">
<p>A <strong>Stylesheet</strong> is a document that is made up of CSS code. Stylesheets usually
come in the form of files that end with the .css extension.</p>
<p>To add a Stylesheet to an HTML document, you should add a <code><link></code> element that references the Stylesheet that you wish to use between the <code><head></code> tags, as shown below:</p>
<div class="code-block">
<link href="style.css" type="text/css" rel="stylesheet">
</div>
<p>Whilst the example shown here shows the Stylesheet "style.css" being imported from the website's root directory, a Stylesheet can be imported from a separate directory.</p>
</div>
<div class="source">
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link" target="_blank">MDN Web Docs - <link> Element</a>
</div>
<!-- Directory -->
<div id="directory" class="term">
<p>Directory</p>
</div>
<div class="definition">
<p>A <strong>Directory</strong> is the name for a store of files in within a File System. In an Operating System such as Windows, directories are more commonly known as Folders.</p>
<p>As a result of this, the terms Directory and Folder are often used interchangeably, regardless of the exact terminology that is used.</p>
</div>
<div class="source">
<a href="https://techterms.com/definition/directory" target="_blank">TechTerms</a>
</div>
<!-- IDE -->
<div id="ide" class="term">
<p>IDE</p>
</div>
<div class="definition">
<p>An <strong>Integrated Development Environment (IDE)</strong> is a piece of software that combines a text editor with tools specific to programming, such as linters, debuggers and compilers.</p>
<p>Alongside these tools, most IDEs also often support multiple programming languages with ease. In some cases, however, an IDE may only be designed with one programming language in mind.</p>
<p>Whilst code for any language can be written in pretty much any text editor <i>(even Notepad!)</i>, text editors do not provide developers with the ability to properly format their code. In addition, a text editor such as Notepad does not include tools to assist in the debugging and/or linting of code, nor does it provide the ability to compile code into an executable program.</p>
<p>Some examples of IDEs include <strong>Visual Studio Code</strong>, <strong>Eclipse</strong>, <strong>JetBrains IntellJ IDEA</strong> and <strong>Code::Blocks</strong>.</p>
</div>
<div class="source">
<a href="https://developer.mozilla.org/en-US/docs/Glossary/IDE" target="_blank">MDN Web Docs - IDE</a>
<a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a>
<a href="https://www.eclipse.org/ide/" target="_blank">Eclipse</a>
<a href="https://www.jetbrains.com/idea/" target="_blank">JetBrains IntellJ IDEA</a>
<a href="http://www.codeblocks.org/" target="_blank">Code::Blocks</a>
</div>
<!-- Git -->
<div id="git" class="term">
<p>Git</p>
</div>
<div class="definition">
<p><strong>Git</strong> is an open-source version control system that is used for maintaining and keeping track of changes made to an application's source code.</p>
<p>Because Git is open-source, being licenced under version 2 of the GNU General Public License (GNU GPL), Git is free to use by anyone wishing to streamline how they manage a software development project.</p>
<p>When using Git, any files relating to a given project reside in a directory known as a repsitory. While repositories can reside on a local machine or a business's internal server, services such as <strong>GitHub</strong> and <strong>GitLab</strong> do exist to provide individuals or businesses with space to store their projects through the use of "cloud storage".</p>
<p>Below, I have included some examples of how you can use Git:</p>
<h3>Creating a new repository</h3>
<div class="code-block">
$ mkdir webdev-project<br>
$ cd webdev-project<br>
$ git init
</div>
<h3>Cloning an existing repository</h3>
<div class="code-block">
$ mkdir webdev-project<br>
$ cd webdev-project<br>
$ git clone repository-url
</div>
<h3>Comitting files</h3>
<div class="code-block">
$ git add index.html<br>
$ git add styles/style.css<br>
$ git commit
</div>
<h3>Pushing files to a repository</h3>
<div class="code-block">
$ git push
</div>
</div>
<div class="source">
<a href="https://git-scm.com/" target="_blank">Git</a>
<a href="https://developer.mozilla.org/en-US/docs/Glossary/Git" target="_blank">MDN Web Docs - Git</a>
<a href="https://github.com/" target="_blank">GitHub</a>
<a href="https://about.gitlab.com/" target="_blank">GitLab</a>
</div>
<!-- Front End Developer -->
<div id="frontend" class="term">
<p>Front End Developer</p>
</div>
<div class="definition">
<p>A <strong>Front End Developer</strong> is a developer that is primarily concerned with developing parts of an application or website that users will be interacting with. For example, anything that the user clicks on to invoke an action, types in to record data or reads to understand a given topic can all be considered to be examples of a Front End interface.</p>
<p>Whilst Front End Developers do produce interfaces that users can interact with, Front End Developers are not usually concerned with the overall design of a website. Instead, a Front End Developer typically only translates designs, which are usually made by a Web Designer, and turns them into an actual website using languages such as HTML, CSS and JavaScript.</p>
</div>
<div class="source">
<a href="https://www.invensis.net/blog/it/difference-between-front-end-and-back-end-development/" target="_blank">Invensis</a>
</div>
<!-- Back End Developer -->
<div id="backend" class="term">
<p>Back End Developer</p>
</div>
<div class="definition">
<p>A <strong>Back End Developer</strong> is a developer that is primarily concerned with developing the parts of an application, website or system that a user doesn't typically interact with. Essentially, unlike a Front End Developer, which translates designs produced for an application, website or system into working, user-facing code, a Back End Developer, produces the code that is responsible for carrying out the functions executed by a user, such as processing a transaction or booking a reservation at a restaurant.</p>
<p>In regards to Web Development, Back End Developers typically use languages such as <strong>SQL</strong>, <strong>PHP</strong>, <strong>Python</strong> and <strong>ASP.NET</strong></p>
</div>
<div class="source">
<a href="https://www.invensis.net/blog/it/difference-between-front-end-and-back-end-development/" target="_blank">Invensis</a>
</div>
<!-- Full Stack Developer -->
<div id="fullstack" class="term">
<p>Full Stack Developer</p>
</div>
<div class="definition">
<p>A <strong>Full Stack Developer</strong>, as the name implies, is a developer that does the tasks that are typically carried out by both a Front End Developer and a Back End Developer respectively. As a result, this means that a Full Stack Developer is able to Front End Development using languages such as HTML, CSS and JavaScript, alongside doing Back End Development using languages such as SQL, PHP and Python.</p>
<p>Whilst a Full Stack Developer can choose to either work in either solely a Front End Development or Back End Development role, companies do often look for Full Stack Developers. More often than not, Full Stack Developers are usually paid more than a sole Front End Developer or Back End Developer.</p>
</div>
<div class="source">
<a href="https://hackernoon.com/what-is-a-full-stack-developer-in-2018-and-how-to-become-one-ca82e8906c87" target="_blank">Hackernoon</a>
</div>
</div>
</main>
<!-- Site Footer -->
<footer class="site-footer">
<p>Copyright © 2018 <a class="name" href="https://darkmetal485.github.io/" target="_blank">Alexander Turner</a></p>
<ul class="social-icons">
<li><a href="https://github.com/UoN-Computing/Turner_18416709" target="_blank"><i class="fab fa-github"></i></a></li>
<li><a href="https://www.linkedin.com/in/alexander-turner-aa8883156/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
<li><a href="https://twitter.com/DarkMetal485" target="_blank"><i class="fab fa-twitter"></i></a></li>
</ul>
<p>
<a href="https://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="https://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>
<a class="back-to-top" href="#top"><i class="fas fa-arrow-circle-up"></i> Back To Top</a>
</footer>
</body>
</html>