-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinstructions.html
117 lines (108 loc) · 5.51 KB
/
instructions.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "css/instructions.css">
<link rel="icon" href="images/class_logo.png" type="image/png">
<title>Visual Studio Code practice with HTML tags</title>
</head>
<body>
</body>
</html>
<h1>Intro Lab</h1>
<main>
<section>
<h2>Motivation</h2>
<p>In this exercise you will gain practice editing HTML documents. You will start with an HTML file that has been loaded with plain text. Your job is to use the accompanying image as a guideline to update the file in to valid HTML document.</p>
</section>
<section>
<h2>Adding HTML tags to your document</h2>
<ol>
<li>Add the h1 tag.
<p>That was annoying — it adds the end tag at the start.</p>
</li>
<li>Add the first h2 tag<p>Select the first h2 tag and type <code>Cmd+Shift+P —> Emmett:Wrap with Abbreviation</code></p>
<p>It works!!<br>
Unfortunately there are a lot of h2 elements to wrap so lets select all of the common ones.</p>
</li>
</ol>
</section>
<section>
<h2>Using VSC Packages</h2>
<ol>
<li>For Mac, hold down the Option key. For PC hold down the Ctrl key</li>
<li>Click at the start (or anywhere within) each line that you want to wrap. This will create a cursor at each location you click.</li>
<li>Press Cmd + Shift + P to open the command palette.</li>
<li>In the command palette, type Emmet: Wrap with Abbreviation and select it. (Or select it as the latest command)</li>
<li>Type the tag abbreviation you want to wrap around the selected lines (e.g., div).</li>
<li>Press Enter.</li>
<li>Each line with a cursor will be wrapped with the specified tag.</li>
</ol>
</section>
<section>
<h2>Installing Live Server in Visual Studio Code</h2>
<p>One of the most key elements of success in learning this material is constantly checking your work. After adding a few lines of code, you will want to see what your <span>deployed page</span> looks like. While it is possible to intermittantly refresh your browser, it makes more sense to use a VSC extension that will refresh it every time you save your code. </p>
<ol>
<li>Open the Extensions View:
<ol>
<li>Click on the Extensions icon on the sidebar (it looks like a square with four squares inside it).</li>
<li>Alternatively, you can press <code>Ctrl + Shift + X</code> on Windows/Linux or <code>Cmd + Shift + X</code> on Mac to open the Extensions view.</li>
</ol>
</li>
<li>Search for Live Server:
<ol>
<li>In the search bar at the top of the Extensions view, type Live Server.</li>
<li>The search should return the “Live Server” extension by Ritwick Dey.</li>
</ol>
</li>
<li>Install Live Server:
<ol>
<li>Click on the Install button next to the Live Server extension.</li>
</ol>
<li>Wait for Installation:
<ol>
<li>Wait a few moments while the extension is downloaded and installed.</li>
</ol>
</ol>
</section>
<section>
<h3>Using Live Server</h3>
<ol>
<li>Open Your HTML File:
<ol>
<li>Open the HTML file you want to view live in your default browser OR open the entire folder of the file you want to open in Visual Studio Code.</li>
</ol>
</li>
<li>Start Live Server:
<ol>
<li>Right-click on the HTML file in the Explorer sidebar and select Open with Live Server.</li>
<li>Alternatively, you can press <code>Alt + L, Alt + O</code> (on Windows/Linux) or <code>Cmd + L, Cmd + O</code> (on Mac) to start Live Server.</li>
</ol>
</li>
<li>View Your HTML File in the Browser:
<ol>
<li>Your default web browser should automatically open and display your HTML file.</li>
<li>Any changes you make to the HTML file in Visual Studio Code will be automatically reflected in the browser without needing to refresh the page.</li>
</ol>
</li>
</ol>
</section>
<section>
<h3>Stopping Live Server</h3>
<ol>
<li>To stop the Live Right clidk to find the Stop Live server command, find the stop button in the Visual Studio Code status bar at the bottom, or close the browser window.</li>
</ol>
<hr>
</section>
<section>
<h3>Back to the Actual Assignment!!!</h3>
<ol>
<li>Add the four h3 tags - UMSI student organization meetings, activities, or events, UMSI student project meetings, SPACE 2435, and UMSI student lounge. </li>
<li>Add the list items.</li>
<li>Remove the "-" formatting that was indicating where the list items were located. Use Find/Replace to do this in a single step. What should you serach for to ensure you remove only the "-" symbols that appear at the start of the list items?</li>
<li>Add the paragraph tags.</li>
<li>Add the two links (the main USMI page and to room scheduling).</li>
<li>Add the class_logo.png image directly after the h1 element. Include the tag attribute width="200" along with the src and alt text.</li>
</ol>
</section>