-
Notifications
You must be signed in to change notification settings - Fork 0
/
lab4.html
329 lines (251 loc) · 23.9 KB
/
lab4.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Jason Carman">
<meta name="description" content="CNET204 Lab 4">
<meta name="keywords" content="cnet204,centennial college,HTML5,CSS3">
<meta charset="utf-8">
<title>Lab 4</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Schedule</a></li>
<li><a href="lab1.html">Lab 1</a></li>
<li><a href="lab2.html">Lab 2</a></li>
<li><a href="lab3.html">Lab 3</a></li>
<li><a class="active" href="#">Lab 4</a></li>
<li><a href="lab5.html">Lab 5</a></li>
<li><a href="lab6.html">Lab 6</a></li>
<li><a href="lab7.html">Lab 7</a></li>
<li><a href="lab8.html">Lab 8</a></li>
<li><a href="assignment1.html">Assignment 1</a></li>
<li><a href="lab9.html">Lab 9</a></li>
<li><a href="lab10.html">Lab 10</a></li>
<li><a href="assignment2.html">Assignment 2</a></li>
<li><a href="good.html">Good Formatting</a></li>
<li><a href="bad.html">Bad Formatting</a></li>
</ul>
</nav>
<main>
<h1>Lab 4 - Introduction to Git, GitHub & HTML5</h1>
<h2>Overview</h2>
<p>This week's lab will cover the following:</p>
<ul>
<li>Configuring your development environment.</li>
<li>Identifying the basic elements of a simple web page.</li>
<li>Describing HTML syntax, tags, attributes and values.</li>
<li>Creating a web page.</li>
<li>Previewing a web page in a browser.</li>
<li>Using GIT for version control.</li>
<li>Adding your code to a GitHub repostiory (repo).</li>
<li>Posting a web page to your web server.</li>
</ul>
<h2>Lecture Slides</h2>
<div class="container">
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSejYALX8D7WvWTAwOCOzXOXwb1N3M4ya1kTFqEjDRM1w6gtPR14Dxzyw2RVm0HI-Wf4fMFhMYMjv7k/embed?start=false&loop=false&delayms=5000" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder="0" class="responsive-iframe"></iframe>
</div>
<h2>Creating a GitHub account</h2>
<p>Navigate to <a href="https://github.com/">github.com</a> and create an account (if you don't already have one) using your college email address. You may also wish to add your personal email address as a secondary one. You can change this to your primary email address at any time; which might be useful post graduation.</p>
<p>In the next steps you will be accessing GitHub classroom. You will also be using git with Visual Studio Code to push your code (web pages) to github.com, where you will then pull them into your Apache web server. These tools are all free, open source, and commonly used in web development.</p>
<h2>Introduction to Git & GitHub</h2>
<p>Use the following <a href="https://classroom.github.com/a/x0FHlTbg" target="_blank">link</a> to set up your access to the Introduction to Git & Github materials (provided by GitHub Classroom). Read through and everything before you continue. The purpose of this exercise is to familiarize yourself with Git & Github. To submit this, edit the instructions (README.md) by clicking on the pencil in the top right corner. You may wish to complete any of the additional items under <strong>Optional next steps</strong>. You are <strong>required</strong> to add your <strong>name</strong> and a short <strong>bio</strong> to access the <a href="https://education.github.com/pack">Student Developer Pack</a> which comes with free access to a ton of useful industry tools and services. You will need access to this for assignment 1, so you can register a domain name (for free!).</p>
<p>You may want to install the GitHub mobile app. It allows you access to your GitHub profile and repos from the comfort of your smart phone. It also allows you to secure your GitHub.com account with two-factor authentication if you wish to. You can install it for <a href="https://github.com/mobile">Android or iOS</a>.</p>
<h2>Configuring SSH keys in AWS & GitHub</h2>
<p>You're going to want to configure secure remote access between your GitHub repository and your Ubuntu Server instance in AWS. Fortunately, you have the perfect tool available at your fingertips. You've already used this somewhat.SSH key pairs.</p>
<p>Start your <strong>www</strong> instance in the AWS Learner Lab, and connect to it using SSH. Once you have logged in, issue the following command to generate a 4096 bit RSA keypair for your GitHub account's email address (replace [email protected] with your email address).</p>
<pre>ssh-keygen -t rsa -b 4096 -C [email protected]</pre>
<p>Accept the defaults and provide a secure passphrase (twice). Your keypair will be generated, with the public key saved as id_rsa.pub in .ssh (a hidden directory) in your home directory.</p>
<p>Before copying this into your GitHub account settings, you'll want to test it. Issue the following command to test it:</p>
<pre>ssh -T [email protected]</pre>
<p>This should fail, because you have't added your ssh key to GitHub.</p>
<p>You should see the following output:</p>
<img src="images/github-test-rsa.png" alt="Testing the RSA keypair for github.com">
<p>Issue the following command view your public key.</p>
<pre>cat .ssh/id_rsa.pub</pre>
<ul>
<li>With your mouse, select the contents of the cat command (beginning with ssh-rsa and ending with [email protected]) and copy it.</li>
<li>Access the <a href="https://github.com/settings/keys">SSH and GPG keys</a> settings in github.com (you will be prompted to login if you haven't already.</li>
<li>Click <strong>New SSH key</strong>, give it an appropriate title and paste in your public key (see following screenshot).</li>
</ul>
<img src="images/github-new-ssh-key.png" alt="Adding your public key to github.com">
<p>Try issuing the following command again. It should work now.</p>
<pre>ssh -T [email protected]</pre>
<h2>Creating your Github Repo for your Labs</h2>
<p>Use the following <a href="https://classroom.github.com/a/yUvD6w5z" target="_blank">link</a> to set up your labs 4-5 repository. You will be using this for labs 4 & 5</p>
<p>Next, you will set up your development tools (Visual Studio Code or VS Code and Git). Follow the sections for setup on a Shared Computer by Accessing GitHub Codespaces or on your Personal Computer.</p>
<h2>Shared Computer (ie College PC): Accessing GitHub Codespaces.</h2>
<p>Once you have set up your Lab 4-5 repository by following the link above (go back and do that if you missed it), you can access GitHub Codespaces from any browser on any device (PC, tablet, smart phone). Codespaces gives you access to Visual Studio Code, with direct access to your repository (without having to clone) from anywhere. It's perfect for a portable development environment. Login to GitHub (if you haven't already) and proceed.</p>
<p>You may have noticed in the link above you can click <strong>Open in GitHub Codespaces</strong>. Feel free to do so now. If you have already clicked past that window the next few steps will show you how to access it again (which is useful for future access attempts anyway). Click on <strong><> Code</strong> and create a new codespace. Once you have created it, you can access it by clicking on the named link.</p>
<img src="images/github-codespaces.png" alt="Accessing GitHub Codespaces">
<p>It may take a couple seconds to create your Codespace, but once it launches it is exactly like the interface in Visual Studio Code. That is because it is Visual Studio Code, running in an Ubuntu container in the cloud through GitHub. You get access to this completely free through GitHub Classroom. If you are working from a Shared Computer (ie a College PC), you can skip the Personal Computer set up below for now and proceed to <strong>Creating Your First Webpage</strong>. You will want to set up your Personal Computer with Visual Studio Code and Git later.</p>
<h2>Personal Computer: Downloading Visual Studio Code (VS Code)</h2>
<p>The College PCs should all have Visual Studio Code and Git installed on them. You can login to your GitHub account using a college PC to do your lab as well (instead of using Codespaces). Watch the lab demonstration video on eCentennial to see how.</p>
<p>You will be using Visual Studio Code and Git to develop your website. If you are working from home or your laptop however, you will want to install and configure both of these. If you are working on a PC at Centennial College, skip to the next section (configuring Visual Studio Code). You can download and install Visual Studio Code in the following ways:</p>
<ul>
<li>From the <a href="https://code.visualstudio.com/">Visual Studio Code website</a>.</li>
<li>In Windows - From the Microsoft Store: search for vscode and click Install.</li>
</ul>
<p>The <a href="https://code.visualstudio.com/">Visual Studio Code website</a> has installers for Windows, Linux (Debian and Red Hat based) and macOS.</p>
<h2>Configuring Visual Studio Code & Git</h2>
<p>Visual Studio Code (VS Code) is a powerful editor designed for programming and scripting. It is open source and available for free. It also works cross-platform, meaning you can install it in Windows, macOS or Linux. Additionally, it has source control tools for git and GitHub built-in. Launch Visual Studio Code, click on Source Control on the left and click the Download Git link unique to your operating system (see the following screenshot).</p>
<img src="images/installgit.png" alt="Installing Git in Visual Studio Code">
<p>When you're installing Git, accept the defaults except for <strong>Choosing the default text editor used by Git</strong>. Select <strong>Use Visual Studio Code as Git's default editor</strong> from the dropdown (screenshot below).</p>
<img src="images/giteditor.png" alt="Choosing the default editor used by Git">
<p>Once the installation is finished you will have to close and re-open VS Code to access Git.</p>
<h2>Cloning Your Repository in VS Code</h2>
<ol>
<li>In order to clone your repository in VS Code, you need to first sign in with GitHub. Open VS Code and click the profile icon in the bottom left. It is located directly above the settings (gear) icon. Sign in with GitHub.</li>
<li>Next, click on Source Control and click <strong>Clone Repository</strong>. Select <strong>Clone from GitHub</strong> in the url bar, and select the CNET204/labs-assignment-1-youruser repository.</li>
<li>You will now select the local folder to be used as your Repository Destination. If you are working on a PC at the college, set this to your H drive. If you are working from your own PC, set this to a folder of your choosing (but remember where it is). The advantage to using your H drive on a college PC, is it is automatically mounted on any PC you log into. Additionally, you can access your H drive through <a href="https://my.centennialcollege.ca/">myCentennial</a>.</li>
</ol>
<p>You may be prompted to sign in. Accept any other prompts, including opening the repository locally and select:<strong>Yes, I trust the authors</strong>.</p>
<h2>Creating your first web page</h2>
<p>Before creating your first web page, it's best to lay out the required structural tags (an example follows). You can then fill in the rest of the data using this simple template. Remember, a web page is everything that exists between the opening and closing html tags (<html> and </html> respectively). It consists of three main parts:</p>
<dl>
<dt>The Doctype Declaration</dt>
<dd>The document type declaration tells the browser what type of document to expect. There are many different doctypes, however for this course we will be using the one for HTML5.</dd>
<dt>The Head</dt>
<dd>Consists of everything between the head tags (<head> and </head> respectively). This section contains information about the document, and won't appear on the page itself.</dd>
<dt>The Body</dt>
<dd>Consists of everything between the body tags (<body> and </body>). This section contains the document itself. Everything in here will appear as your web page.</dd>
</dl>
<p>Click on new file (in the welcome screen) and create a new file named <em>index.html</em>. Save it in your local repository folder and fill in the structure using the below sample. This is the file you'll be editing for the rest of the lab.</p>
<pre>
<html>
<head>
</head>
<body>
</body>
</html>
</pre>
<h3>Add the doctype</h3>
<p>Add the following to your webpage above the opening HTML tag (the doctype declaration must be the first thing in your document).</p>
<pre><!DOCTYPE html></pre>
<p><a href="https://www.w3schools.com/tags/tag_doctype.asp">W3Schools</a> has some useful information on the different doctypes and their uses.</p>
<h2>Filling in the head</h2>
<h3>Add a title</h3>
<p>Add the title of "First Page" (without the quotes) to the header section of your document.</p>
<pre><title>First Page</title></pre>
<h3>Add some meta tags</h3>
<p>Meta tags provide additional information about our page. These include what character encoding you're using, and data used by search engines to index your page. Part of Seach Engine Optimization (SOE) is using these appropriately to gain higher rankings with search engines' (such as Google) algorithms. Another large part is properly structuring and formatting your code, which you will learn as you create html documents.</p>
<p>Using the meta tag, define the character set as "UTF-8" (Unicode). This tag defines metadata about the document, and can contain many attributes. We will use several of them over the duration of this course.</p>
<pre><meta charset="utf-8"></pre>
<p>Use the meta tag to add author information to your web page (with the content of your name). An example follows.</p>
<pre><meta name="author" content="Linus Torvalds"></pre>
<p>The header can contain many other things such as embedded or external links to CSS or JavaScript, which we will visit later.</p>
<h2>Filling in the body</h2>
<h3>Add a heading</h3>
<p>Headings are used in of importance, with 1 being most important and 2-6 used for sub-headings in order of descending importance.</p>
<p>Insert the follwing using an H1 tag:<p>
<pre><h1>Your Name's Home Page</h1></pre>
<h3>Add a paragraph</h3>
<p>Using the paragraph tag (<strong><p></strong> to open and <strong></p></strong> to close), add a paragraph below your heading about what you hope to learn from this course.</p>
<h3>Comments</h3>
<p>The comment tag can be extremely useful when you're first learning HTML, or when you have a large block of code and want to clearly define where it begins and ends. Comments can make your code easier to read and understand, either by someone else or yourself after quite a bit of time has passed. Comments are not used as frequently in HTML as they are in other languages. To add a comment you require an opening (<!--) and closing (-->) tag. A sample follows below, please feel free to include comments in your labs whenever you encounter something that may be useful to remembering what you've learned later.</p>
<pre><!-- This is a comment, it's contents will only appear when you view the page source through the browser. Comments in HTML can span multiple lines. This is not always true of comments in a other languages, and some can even have a variety of methods for designating a comment --></pre>
<h3>To do:</h3>
<p>Using what you learned about comments above, add a comment indicating your name and student number as the first line of the body. You are required to do this for every web page you create for this course.</p>
<h2>Setting your git username and email</h2>
<span class="tip">Skip this step if you are using GitHub Codespaces, and proceed to Making your first commit.</span>
<p>Before you can push your commit to GitHub, you need to set your username and email (to be included in the commit) from the command line within VS Code. To do this:</p>
<ol>
<li>Click on <strong>Terminal</strong> (in the menu bar across the top of VS Code).</li>
<li>Click <strong>New Terminal</strong>.</li>
</ol>
<p>Then issue the following two commands:</p>
<pre>
git config user.name "Your Name"
git config user.email "[email protected]"
</pre>
<span class=".tip">If you are using your personal computer, you may include the --global option to set these semi-permanently.</span>
<h2>Making your first commit</h2>
<p>Congratulations! Your have created your first web page. You can now commit it to your github repository. To do this:</p>
<ol>
<li>Click on source control (on the left side of the screen).</li>
<li>Click the three dots at the top of the pane.</li>
<li>Click <strong>Changes</strong> and select <strong>Stage All Changes</strong>.</li>
<li>Then click Commit.</li>
<li>Enter a commit message (a short message describing what you have changed) and click on the check mark in the upper right corner.</li>
<li>Click <strong>save</strong> when prompted.</li>
<li>Click <strong>Sync Changes</strong> at the top of your Source Control pane, and agree to any prompts.</li>
</ol>
<p>You've made your first commit! You will be doing this many times over the course of the semester. It will get easier with repetition.</p>
<h2>Installing your AWS pem key via GitHub Secret</h2>
<p>You are going to add your AWS ssh key (.pem) to your GitHub repository as a secret. This will allow you to SSH to your AWS instance from the terminal in Codespaces without specifying the location of the key. To do this:</p>
<p>Add your .pem file as a GitHub secret called "SSH_KEY" using the following steps in **YOUR** new repository:</p>
<ul>
<li>Go to <strong>Settings</strong> (top right corner)</li>
<li>Click on <strong>Secrets and variables</strong></li>
<li>Click on <strong>Codespaces</strong></li>
<li>Click the Green button labelled <strong>New repository secret</strong></li>
</ul>
<p>View your key (.pem) from the command line using the cat command. To do this:</p>
<ul>
<li>In Windows: launch a PowerShell terminal by clicking on <strong>Start</strong> and typing <strong>powershell</strong>.</li>
<li>In macOS: launch a terminal by clicking on <strong>Finder</strong>, then <strong>Applications</strong>, then <strong>Utilities</strong>, and finally <strong>Terminal</strong>.</li>
<li>In Linux: launch a terminal by clicking on the terminal icon in your taskbar or by pressing <strong>Ctrl+Alt+T</strong>.</li>
</ul>
<p>Once you have your terminal open, change to the directory your key is located. This may be your Downloads folder, or on the College PC your H drive:</p>
<pre>cd Downloads</pre>
<p>OR</p>
<pre>H:</pre>
<p>View the contents of your key using the cat command:</p>
<pre>cat cnet204.pem</pre>
<p>Using the mouse, highlight the output of the key carefully including the lines <strong>-----BEGIN RSA PRIVATE KEY-----</strong> and <strong>-----END RSA PRIVATE KEY-----</strong>. Your output should look similar to the following:</p>
<img src="images/highlight-key.png" alt="Highlighting the key with the cat command">
<p>Copy the key to your clipboard by right-clicking on the highlighted text, right-clicking the PowerShell window title bar and selecting <strong>Edit</strong> and selecting <strong>Copy</strong> from the context menu. The following screenshot is for reference.</p>
<img src="images/copy-key.png" alt="Copying the key to the clipboard">
<p>Login to Github, and go to your GitHub repository for Labs 4-5. You are going to add a GitHub secret and paste the key into the secret field. With the following information:</p>
<ul>
<li>With the name <strong>SSH_KEY</strong></li>
<li>In the <strong>Secret</strong> field, paste in the contents of your .pem file (cat from your local command line and copy/paste)</li>
</ul>
<p>Your screen should look as follows (note, in the screenshot the secret field has been left empty):</p>
<img src="images/new-secret.png" alt="Adding a new secret to your repository">
<p>Click the green button labelled **Add secret**.</p>
<p>To apply the secret to your Codespaces container, you will need to rebuild it. To do this:</p>
<ol>
<li>In the bottom left corner, left-click where it says <strong>Codespaces</strong>.</li>
<li>Click <strong>Rebuild container</strong> from the menu that appears in the top center.</li>
</ol>
<p>Once the container has been rebuilt, you can SSH to your AWS instance from the Terminal in Codespaces without specifying the location of the key. ie: ssh ubuntu@*ip or FQDN*. You now have the command line access to your web server from within Codespaces! Note, your instance is likely not on and this will not currently work. Continue to the next steps to access your instance from the command line in Codespaces.</p>
<h2>Cloning your repository in your Apache server</h2>
<p>Start your <strong>www</strong> instance in the AWS Learner Lab, and connect to it using SSH from Codespaces by issuing the following command:</p>
<pre>ssh ubuntu@*ip or FQDN*</pre>
<p>You do not need to connect using the EC2 instance connect. However, you now have two methods for accessing your instance. Once you have logged in, issue the following command to clone your github repository into your home directory.</p>
<span class="tip">Important: Be sure to replace username in the following command with YOUR GitHub username.</span>
<pre>git clone [email protected]:CNET204/labs-4-5-username</pre>
<p>Issue a command to confirm the repository has been cloned on your Ubuntu server.</p>
<p>Notice the content from our GitHub repository is all there, but it's not in the right place. It is in your user's home directory. It needs to be in document root (/var/www/html), and only root can put it there.</p>
<p>Issue the following command to recursively copy the contents of your labs-4-5-username directory into /var/www/html</p>
<pre>sudo cp -R labs-4-5-username/* /var/www/html</pre>
<p>Confirm the contents have been written to document root. You should see the following files:</p>
<ul>
<li>LICENSE</li>
<li>README.md</li>
<li>index.html</li>
</ul>
<h2>Accessing your index page through a web browser</h2>
<p>In your AWS Learner Lab, navigate to <strong>Instances</strong>, highlight the Elastic IP for www (see the following screenshot). Paste this into your web browser. You should see your <strong>index.html</strong> page!</p>
<img src="images/ec2-elastic-ip-for-index.png" alt="Copying Elastic IP to access index.html">
<h2>Completing the Lab</h2>
<p>Your page should look similar to the following output. If it does not, go back and complete whatever you've missed.</p>
<img src="images/lab4.png" alt="Lab 4 sample">
<p>Upon completion of this lab you should have set up your development environment (VS Code & GitHub) and written a simple web page using some introductory HTML. Your page should validate using the <a href="https://validator.w3.org/">w3schools html validator</a>. To submit your lab you need to submit the code to your GitHub repo (which you did in already in the lab). Additionally, you need to submit a screenshot of it running your server to the assignment folder in eCentennial.</p>
<h2>Exploration Questions</h2>
<p>The following questions are for furthering your knowledge only, and may appear on quizzes or tests at any time later in this course.</p>
<ol>
<li>What does HTML stand for?</li>
<li>What are the two main parts of a web page?</li>
<li>What sort of things appear in the header? Which two did we use in this assignment?</li>
<li>What sort of things appear in the body? Which two did we use in this assignment?</li>
<li>What is the range of heading tags? Which is the biggest? The smallest?</li>
<li>How do you access your index.html in the browser?</li>
<li>In git, what does cloning your repository do?</li>
</ol>
</main>
</body>
</html>