forked from stElmitchay/cf-eng
-
Notifications
You must be signed in to change notification settings - Fork 0
/
w3.html
302 lines (272 loc) · 12.6 KB
/
w3.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Introduction to HTML</title>
<link rel="icon" type="imeage/png" href="assets/Engineering_Workshop_14_OCT.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reset.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/blood.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/a11y-dark.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/progress/progress.min.css">
<style>
.reveal code {
color: var(--r-link-color-hover);
}
body {
background: linear-gradient(100%, #1a2a6c, #b21f1f, #fdbb2d);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
.reveal h2, .reveal h3, .reveal h4 {
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.reveal ul li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h2>INTRODUCTION TO HTML</h2>
<p>baby Steps To Web Development</p>
</section>
<section>
<h3>What is HTML?</h3>
<ul>
<li>HTML stands for Hyper Text Markup Language</li>
<li>HTML is the standard markup language for creating Web pages</li>
<li>HTML describes the structure of a Web page</li>
<li>HTML consists of a series of elements</li>
<li>HTML elements tell the browser how to display the content</li>
</ul>
</section>
<section>
<h3>HTML Structure</h3>
<img src="https://www.notion.so/PHASE-1-Course-76d122f4c2904589a256bcf4a8081e2b?pvs=4#eb1e309323694a43a857c57b3f98bfae" alt="HTML Structure">
</section>
<section>
<h3>Where do I write HTML?</h3>
</section>
<section>
<section>
<h3>ANYWHERE!</h3>
<p>You can literally write HTML anywhere.</p>
</section>
<section>
<p style="margin-bottom: 20px; font-size: 1.1em;">However, there are dedicated software like code editors and text editors designed to write code (HTML):</p>
<ul style="list-style-type: none; padding-left: 10px; margin-left: 0;">
<li>🖋 Sublime Text</li>
<li>📝 Notepad</li>
<li>📓 Notes</li>
<li>💻 Visual Studio Code</li>
<li>🌐 Codepen</li>
<li>🚀 Replit</li>
</ul>
</section>
</section>
<section>
<h3>Your First HTML Page</h3>
<pre><code class="language-html">
<!DOCTYPE html>
<html>
<head>
<title>PAGE</title>
</head>
<body>
<h1> MY FIRST PAGE </h1>
<p> Today is a monumental day, the day i become a developer</p>
</body>
</html>
</code></pre>
</section>
<section>
<h3>Exercise 1: Create Your First Webpage</h3>
<ol>
<li>Open your preferred text/code editor</li>
<li>Create a new file called "myFirstSite.html"</li>
<li>Copy and paste the HTML code from the previous slide</li>
<li>Save the file</li>
<li>Open the file in a web browser</li>
</ol>
</section>
<section>
<h3>Basic HTML Tags</h3>
<ul>
<li><code><p></code> - Paragraph</li>
<li><code><a></code> - Link</li>
<li><code><img></code> - Image</li>
<li><code><div></code> - Division</li>
<li><code><span></code> - Inline container</li>
</ul>
</section>
<section>
<h3>HTML Attributes</h3>
<ul>
<li><code>href</code> - Hyperlink reference</li>
<li><code>src</code> - Source</li>
<li><code>alt</code> - Alternative text</li>
<li><code>class</code> - CSS class</li>
<li><code>id</code> - Unique identifier</li>
</ul>
</section>
<section>
<h3>HTML Headings</h3>
<p>HTML headings are defined with the <code><h1></code> to <code><h6></code> tags.</p>
<pre><code class="language-html">
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</code></pre>
</section>
<section>
<h3>Exercise 2: Headings and Paragraphs</h3>
<ol>
<li>Open your "myFirstSite.html" file</li>
<li>Add three different levels of headings</li>
<li>Under each heading, add a paragraph of text</li>
<li>Save and refresh in the browser</li>
</ol>
</section>
<section>
<h3>HTML Lists</h3>
<p>HTML provides two types of lists: unordered and ordered.</p>
</section>
<section>
<h3>Unordered Lists</h3>
<p>Unordered lists are created using the <code><ul></code> tag:</p>
<pre><code class="language-html">
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
</code></pre>
</section>
<section>
<h3>Ordered Lists</h3>
<p>Ordered lists are created using the <code><ol></code> tag:</p>
<pre><code class="language-html">
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
</code></pre>
</section>
<section>
<h3>Exercise 3: Creating Lists</h3>
<ol>
<li>In your HTML file, create an unordered list of your favorite foods</li>
<li>Create an ordered list of your top 3 vacation destinations</li>
<li>Save and view the changes in your browser</li>
</ol>
</section>
<section>
<h3>HTML Links</h3>
<p>Links are defined with the <code><a></code> tag, using the <code>href</code> attribute to specify the URL.</p>
<pre><code class="language-html">
<a href="https://www.example.com">Visit Example.com</a>
</code></pre>
</section>
<section>
<h3>HTML Images</h3>
<p>Images are defined with the <code><img></code> tag, using the <code>src</code> attribute to specify the image source and the <code>alt</code> attribute to provide alternative text.</p>
<pre><code class="language-html">
<img src="image.jpg" alt="Description of image">
</code></pre>
</section>
<section>
<h3>Exercise 4: Links and Images</h3>
<ol>
<li>Add a link to your favorite website in your HTML file</li>
<li>Find an image online and add it to your page using the <code><img></code> tag</li>
<li>Make sure to include an <code>alt</code> attribute for your image</li>
<li>Save and view your updated page</li>
</ol>
</section>
<section>
<h3>HTML File Paths</h3>
<p>File paths describe the location of a file in a web site's folder structure.</p>
<img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/a0ce00e2-435a-4e33-99d0-71a42933885c/92406749-a0fa-4062-91fb-b3c695ec4b0c/Screenshot_2024-07-23_at_19.06.29.png" alt="File Paths">
</section>
<section>
<h3>Absolute File Paths</h3>
<p>Absolute file paths provide the full URL to a file:</p>
<pre><code class="language-html">
<img src="https://www.example.com/images/picture.jpg" alt="Example Image">
</code></pre>
</section>
<section>
<h3>Relative File Paths</h3>
<p>Relative file paths specify the location relative to the current file:</p>
<pre><code class="language-html">
<img src="images/picture.jpg" alt="Example Image">
</code></pre>
</section>
<section>
<h4>Exercise 5: File Paths</h4>
<ol>
<li>Create a folder called "images" in the same directory as your HTML file</li>
<li>Download an image and place it in the "images" folder</li>
<li>Add the image to your HTML file using a relative file path</li>
<li>Add another image using an absolute file path from a website</li>
<li>Save and view your page to ensure both images are displayed correctly</li>
</ol>
</section>
<section>
<h4>Your Personal Webpage</h4>
<p>Create a personal webpage about yourself, including:</p>
<ul>
<li>A title and heading with your name</li>
<li>A short biography paragraph</li>
<li>An unordered list of your hobbies</li>
<li>An ordered list of your top 5 favorite movies or books</li>
<li>A link to your social media profile or a favorite website</li>
<li>An image of yourself or something that represents you</li>
</ul>
</section>
<section>
<h3>Conclusion</h3>
<ul>
<li>You've learned the basics of HTML</li>
<li>Practice is key to improving your skills</li>
<li>Experiment with different tags and attributes</li>
<li>Next steps: Learn about CSS to style your HTML pages</li>
</ul>
</section>
<section>
<h3>Thank You!</h3>
<p>Any questions?</p>
<img src="https://media.giphy.com/media/3o7buirYcmV5nSwIRW/giphy.gif" alt="Thank You GIF">
<br>
<a href="w4.html" class="button" style="display: inline-block; padding: 10px 20px; background-color: #2885a5; color: white; text-decoration: none; font-size: 18px; border-radius: 5px; transition: background-color 0.3s;">
Next: CSS Essentials
</a>
<a href="index.html" class="button" style="display: inline-block; padding: 10px 20px; background-color: #a52828; color: white; text-decoration: none; font-size: 18px; border-radius: 5px; transition: background-color 0.3s; margin-left: 10px;">
Back to Home
</a>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/markdown/markdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/highlight/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/progress/progress.min.js"></script>
<script>
Reveal.initialize({
hash: true,
plugins: [ RevealMarkdown, RevealHighlight ],
transition: 'slide',
transitionSpeed: 'default',
backgroundTransition: 'slide'
});
</script>
</body>
</html>