-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
304 lines (288 loc) · 15.1 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
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
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121942481-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-121942481-1');
</script>
<title>TechReturners</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<link rel="stylesheet" href="Styles/style.css" type="">
<!--
<body style="background-image:url('images/banner-home.fc70d7f4.jpg')">
-->
<body class="body">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="getting_started.html">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link" href="HTML.html">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="CSS.html">CSS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Version_Control.html">Version Control</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Bootstrap.html">Bootstrap</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Javascript.html">Javascript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="jQuery.html">jQuery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Analytics.html">Analytics</a>
</li>
</ul>
</div>
</nav>
<!-- end of navigation -->
<div class='jumbotron'>
<div class='container'>
<div class='row'>
<div class='col-sm-1'>
<br>
</div>
<div class='col-sm-2'>
<a href="https://techreturners.com/">
<img src="images/TR_Logo.png" ; alt="Tech Returners Logo" style="width:182px; height:27px">
<p style="color: white; font-size: 1vw">Empowering into Tech</p>
</a>
</div>
<div class='col-sm-9'>
<br>
</div>
<div class='col-sm-12'>
<h1 class='heading1'>Tech Returners</h1>
</div>
<div class='col-sm-12'>
<h2 class='heading2'>Course Overview</h2>
</div>
<div class='col-sm-12'>
<br>
</div>
<div class='col-sm-6'>
<br>
</div>
<div class='col-sm-6'>
<div class='picture'>
<a href="getting_started.html">
<img src="images/banner-home.fc70d7f4.jpg" alt="TR Classroom image" style="width:242px; height:146px" ;>
<div class="centered">
<h1>Next</h1>
</div>
</a>
</div>
</div>
<div class='col-sm-12'>
<h3>
<ul>
<li>How Websites are made</li>
<li>How to create your own Web Page</li>
<li>Basic skills and tools that will useful for any coding you do</li>
<li>The course aims to provide a basic overview of the technologies used, along with the tools and
resources to discover more</li>
<li>If you are ever in doubt</li>
<ul>
<li>Google it</li>
<li>Check Stack Overflow</li>
<li>Post on Slack</li>
<li>Ask the person next to you</li>
<li>Ask one of the TechReturners Training Team</li>
</ul>
</ul>
</h3>
</div>
<div class='col-sm-12'>
<h2 class='heading2'>What is a website?</h2>
</div>
<div class='col-sm-12'>
<h3>A website is a collection of linked webpages (and their associated resources); a set of related files
that is compatible to your browser.</h3>
</div>
<div class='col-sm-12'>
<h3>
<ul>
<li>A web-page is just a file that your web browser is able to read and display, written in a markup
language; HTML.
</li>
<li>HTML (HyperText Markup Language) is the most basic building block of the Web. It describes and
defines the content of a webpage along with the basic layout of the webpage. Other technologies
besides HTML are generally used to describe a web page's appearance/presentation (CSS) or
functionality/ behavior (JavaScript).
</li>
<li>The website’s main webpage (or point of entry) is referred to as the homepage, or a landing page.
This is predefined, and its document name must be set as index.html
</li>
<li>Because the web document files are sent to your browser, it is easy for you to look at them.</li>
<li>There are no secrets in HTML, CSS or js. If there’s a part of a webpage that you like, it’s easy
to find out how it is coded and use the technique yourself.</li>
<li>
<a href="http://www.bbc.co.uk/news">
<h3 class='whitetext2'>http://www.bbc.co.uk/news</h3>
</a>
</li>
<li>
<a href="https://techreturners.com/">
<h3 class='whitetext2'>https://techreturners.com/</h3>
</a>
</li>
</ul>
</h3>
</div>
<div class='col-sm-12'>
<br>
</div>
<div class='col-sm-12'>
<h2 class='heading2'>How does the internet work?</h2>
</div>
<div class='col-sm-12'>
<h3>
<ul>
<li>Computers connected to the Web are called clients and servers.
</li>
<li>The computers that hold web pages, sites and applications are called servers.
<br>Web servers are large, specialised computers that are (almost) permanently connected to the
internet.
</li>
<li>The computers that allow people to access the web by providing software (browsers) for them to
do so are called clients. They are the typical user’s Internet-connected device, for example
- your laptop or mobile phone, connected to the internet through a browser.
</li>
<li>Servers respond to requests sent to them by clients. The Internet is the network layer that makes
the Web possible, it lies on top of a very complex hardware infrastructure, which allows
us to communicate by sending files to each other.</li>
</ul>
</h3>
</div>
<div class='col-sm-12'>
<h2 class='heading2'>How does the Web work?</h2>
</div>
<div class='col-sm-12'>
<h3>
<ul>
<li>How does the router know where to send your (client) requests?
<br>Many of our web interactions begin with a URL (uniform resource locator) being typed
</li>
<li>
<a href="https://www.theguardian.com/uk">
<h3 class='whitetext2'>https://www.theguardian.com/uk</h3>
</a>
</li>
<li>
<b>https</b> (Hyper Text Transfer Protocol Secure):
<br>the protocol or how to fetch the information (https for secured communication)
</li>
<li>
<b>www.theguardian.com</b> : the host or where to fetch it from</li>
<li>
<b>/uk</b> : the path or precisely what information to fetch</li>
<li>Example of http request
<a class='whitetext2' href="http://www.example.com/">
(http://www.example.com/)
</a>
</li>
<li>When we type the URL into the address bar a request is sent over the internet and some information
is returned to us.</li>
<li>The protocol describes how the information is transmitted.</li>
<li>The host describes where the information should come from and the path tells that location precisely
what information to send.</li>
</ul>
</h3>
</div>
<div class='col-sm-12'>
<h2 class='heading2'>IP Addresses</h2>
</div>
<div class='col-sm-12'>
<h3>
<ul>
<li>Each computer on the internet has an address (an Internet Protocol address) so that requests
can be sent to it and files returned - much like a telephone number.</li>
<li>IP addresses are a sequence of numbers and ‘.’s such as 216.58.213.110</li>
<li>Why don’t we just use IP addresses?</li>
<li>As servers (computers which host and run the code for a website) are commonly switched, or run
in parallel, or may be back-ups, IP addresses change often.</li>
<li>IP addresses are also difficult and tedious to remember, so the internet works on a domain name
system, that matches domain names such as google.com to IP addresses.
</li>
</ul>
</h3>
</div>
<div class='col-sm-12'>
<h2 class='heading2'>DNS (Domain Name Service)</h2>
</div>
<div class='col-sm-12'>
<h3>
<ul>
<li>One of the first things that happens when you type a URL into your browser is a DNS lookup: your
computer contacts a DNS server (Domain Name System server), which is basically a massive
address book of IP addresses.</li>
<li>The DNS server converts the domain name from the URL (e.g. google.com) into an address for a
server (such as 213.123.245.98)</li>
<li>Once the address of the web server has been found your request is forwarded onto it, the web
server will interpret your request and send back one or more files.
</li>
</ul>
<br>
</h3>
</div>
<div class='col-sm-4'>
<br>
</div>
<div class='col-sm-3'>
<div class='picture'>
<a href="getting_started.html">
<img src="images/banner-home.fc70d7f4.jpg" alt="TR Classroom image" style="width:242px; height:146px" ;>
<div class="centered">
<h1>Getting Started</h1>
</div>
</a>
</div>
</div>
<div class='col-sm-5'>
<br>
</div>
<div class='col-sm-12'>
<br>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="main.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js " integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q "
crossorigin="anonymous "></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js " integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl "
crossorigin="anonymous "></script>
</body>
<!-- © CookieMonster | <a href="https://antony-cooke.github.io/ChesterBL/</a> -->
</html>