-
Notifications
You must be signed in to change notification settings - Fork 0
/
html.html
315 lines (250 loc) · 21.3 KB
/
html.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>From Zero to Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Introductory web development curriculum, created by Evan Tarrh" />
<meta name="robots" content="NOODP, index, follow" />
<meta itemprop="name" content="From Zero to Website">
<meta itemprop="description" content="Introductory web development curriculum, created by Evan Tarrh">
<meta itemprop="image" content="">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="">
<meta name="twitter:title" content="From Zero to Website">
<meta name="twitter:description" content="Introductory web development curriculum, created by Evan Tarrh">
<meta name="twitter:creator" content="">
<meta name="twitter:image:src" content="">
<meta name="twitter:domain" content="evan.land">
<!-- Open Graph data (Facebook) -->
<meta property="og:title" content="From Zero to Website" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://evan.land/jade/" />
<meta property="og:image" content="" />
<meta property="og:description" content="Introductory web development curriculum, created by Evan Tarrh" />
<link rel="icon" type="image/png" href="/img/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/img/favicon/favicon-16x16.png" sizes="16x16" />
<!-- Chrome Theme Color -->
<meta name="theme-color" content="#42CBAD">
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/css/style.min.css" inline>
<!-- Google Analytics go here -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-50221324-4', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="big-nav hidden">
<div class="pages">
<ul>
<li><a href="/">Introduction</a></li>
<li><a href="/html.html">HTML</a></li>
<li><a href="/css.html">CSS</a></li>
<li><a href="/js.html">Javascript</a></li>
<li><a href="/git.html">Git and GitHub</a></li>
<li><a href="/nextsteps.html">Next Steps</a></li>
</ul>
</div>
</div>
<div class="wrapper">
<div id="burger" class="burger">
<div class="patty"></div>
<div class="patty"></div>
<div class="patty"></div>
</div>
<div class="mobile-only mobile-header">
<h1>From Zero to Website</h1>
</div>
<div class="content">
<div class="headers hide-mobile">
<h1>HTML</h1>
<h2>What your browser speaks</h2>
</div>
<p>HTML is the language of the Internet. Whenever you visit a website, what you see is the result of HTML being interpreted and rendered by your browser.</p>
<h3 id="tags"><a href="#tags">What does HTML look like?</a></h3>
<p>It's simple!</p>
<pre><code class="language-markup"><p>It's simple!</p></code></pre>
<p>HTML is simply the content you see on the screen, with extra markup around it to help format it. In the example above, the <code class="inline-code"><p></code> is an <strong>opening tag</strong> that denotes the start of a paragraph, and the <code class="inline-code"></p></code> closes the paragraph. The whole paragraph can be referred to as an <strong>element</strong>.</p>
<p>HTML is more than just paragraphs, though. Let's get familiar with some more HTML elements!</p>
<h4>Headers</h4>
<p>One of the best ways to create hierarchy is with <strong>headers</strong>. At the top of this page, the "HTML" is actually an <code class="inline-code">h1</code>, so the code looks like <code class="inline-code"><h1>HTML</h1></code>.
<p><code class="inline-code">h1</code>'s are the biggest options for headers, but there are also <code class="inline-code">h2</code>'s and <code class="inline-code">h3</code>'s, all the way down to the rarely-used <code class="inline-code">h6</code>. For example, the gray "Headers" at the top of this section is an <code class="inline-code">h4</code>.</p>
<h4>Links</h4>
<p>We can use <strong>anchor tags</strong> to link to other pages!</p>
<pre><code class="language-markup"><a href="http://jumpman.space">Jumpman Jumpman Jumpman</a></code></pre>
<p>The <code class="inline-code">href</code> attribute contains the URL that the link will send you to, and the content inside the tags is what the user actually sees. So, the code above ends up producing this: <a href="http://jumpman.space">Jumpman Jumpman Jumpman</a></p>
<p>If you're linking to another website, it's important to always include the <code class="inline-code">http://</code> at the beginning of the link inside the <code class="inline-code">href</code>.</p>
<p>However, <span class="major-key">when you link to a different page on the same website, you should always omit both the <code class="inline-code">http://</code> and the base URL</span>—so, for example, if I wanted to link to <code class="inline-code">/css.html</code>, the tag should look like this: <code class="inline-code"><a href="/css.html"></code>. This means that if you ever just want to link to the homepage (e.g. <code class="inline-code">jade2017.github.io</code>), the correct <code class="inline-code">href</code> is simply <code class="inline-code">href="/"</code>.</p>
<p>Note that the <code class="inline-code">href</code> goes inside the tag itself! This isn't the only element for which this happens. Another great example is the <code class="inline-code"><img></code> tag!</p>
<h4>The <code class="inline-code"><img></code> tag</h4>
<p>It's actually really easy to put pictures on websites—there's a tag for that!</p>
<div class="image-wrapper">
<img src="http://imgs.xkcd.com/comics/tags.png">
</div>
<pre><code class="language-markup"><img src="http://imgs.xkcd.com/comics/tags.png"></code></pre>
<p>Note that <code class="inline-code"><img></code> tags do not need need a closing tag, i.e., <code class="inline-code"></img></code>.
<p>Also, note that the source of the image (a URL specifying the location of the image) goes inside the tag itself. This isn't the only <strong>attribute</strong> that can be specified inside the tag: we can also specify <code class="inline-code">alt</code> text that provides an image description for accessibility purposes (primarily for screen reader users) or for instances when an image might not load.
<pre><code class="language-markup"><img src="https://fudogblog.files.wordpress.com/2009/05/chow3.jpg" alt="A chow chow, a type of dog breed originally from northern China, stands on some grass."></code></pre>
It's standard practice to design or develop with accessibility in mind, and there are many possibilities with HTML alone to vastly improve the accessibility of one's site. <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML">MDN's documentation</a> on using HTML for maximizing accessibility is definitely worth looking through!
We can also set the height and/or width of the image using their respective attributes like this!</p>
<pre><code class="language-markup"><img src="http://imgs.xkcd.com/comics/tags.png" width="100%"></code></pre>
<pre><code class="language-markup"><img src="http://imgs.xkcd.com/comics/tags.png" height="300px"></code></pre>
<p>There are several valid formats for these <code class="inline-code">height</code> and <code class="inline-code">width</code> attributes, which we'll cover in more detail in our section on CSS.</p>
<h4>The container element: <code class="inline-code"><div></code></h4>
<p><code class="inline-code"><div></code>'s are container elements. They offer a way to organize different HTML elements by <strong>nesting</strong>. In other words, a <code class="inline-code"><div></code> will almost always contain other elements inside it, like so:
<pre><code class="language-markup"><div>
<img src="http://imgs.xkcd.com/comics/tags.png" width="300px">
</div></code></pre>
<p>Note that the <code class="inline-code">img</code> is indented in this code block. It's common practice to indent whenever an HTML element is <strong>nested</strong> inside another one. When this happens, we refer to the <code class="inline-code">div</code> as the <strong>parent</strong> element, and the <code class="inline-code">img</code> as the <strong>child</strong>.</p>
<p>We'll learn more about the importance of divs when we move on to styling our pages. For now, we can just think of them as organizational tools.</p>
<h4>Typographical elements: <code class="inline-code"><strong></code> and <code class="inline-code"><em></code></h4>
<p>For anyone who likes typography, this is the fun stuff! You can use tags to make your type <strong>bold</strong> or <em>italicized</em>.</p>
<pre><code class="language-markup"><strong>I'm bold!</strong>
<em>I'm italicized!</em>
<strong>
<em>I'm bold and italicized!</em>
</strong>
<em>
<strong>I'm bold and italicized, too! The order doesn't matter here.</strong>
</em></code></pre>
<div class="separator"></div>
<p>OK, we've already learned a lot! There are more useful HTML elements out there (<a href="http://htmlreference.io/">htmlreference.io</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">MDN</a> are great resources for learning more about the elements available for use), but we still have a pretty good idea of what HTML looks like. Now, let's focus on how to use HTML in practice.</p>
<h3 id="files"><a href="#files">What should an HTML file look like?</a></h3>
<p>Here's a very minimal skeleton. We can fill it out later once we start building our own pages!</p>
<pre><code class="language-markup"><!DOCTYPE html>
<html>
<head>
<!-- This is a comment. -->
<title>Wow!</title>
</head>
<body>
<!-- Put all content here. -->
</body>
</html></code></pre>
<p class="with-list">Check it out! Let's look at this file line-by-line to understand it.</p>
<ul>
<li>
<p><code class="inline-code"><!DOCTYPE html></code></p>
<p>Every HTML file must have exactly this as its first line. Otherwise, your browser won't know how to interpret the file.</p>
</li>
<li>
<p><code class="inline-code"><html></code></p>
<p>Remember how you can nest HTML elements? Well, it turns out that every HTML file is nested inside one <code class="inline-code">html</code> element! This line of code is almost always the second line of code inside an HTML file, and it must contain exactly two children: <code class="inline-code">head</code> and <code class="inline-code">body</code>.</p>
</li>
<li>
<p><code class="inline-code"><head></code></p>
<p>The <code class="inline-code">head</code> element contains information about the HTML page that is important, but shouldn't be rendered inside your browser alongside all the content. For example, this is how your browser knows what text to put in the tab (for this website, “From Zero to Website”), or the little icon next to it (the green J).</p>
</li>
<li>
<p><code class="inline-code"><!-- This is a comment --></code></p>
<p><strong>Comments</strong> can help clarify confusing sections of code. They're a useful way to explain your code to someone else (most often, the “someone else” ends up being you 2 months later, so be nice to your future self).</p>
<p>Comments must begin with <code class="inline-code"><!--</code> and end with <code class="inline-code">--></code>.</p>
</li>
<li>
<p><code class="inline-code"><title>Wow!</title></code></p>
<p>The <code class="inline-code">title</code> is that small blob of text that's displayed in your browser's tab. It won't affect anything else on the page.</p>
</li>
<li>
<p><code class="inline-code"></head></code></p>
<p>Closing the <code class="inline-code">head</code> tag. The head must be closed before the body begins. …That's a weird sentence.</p>
</li>
<li>
<p><code class="inline-code"><body></code> and <code class="inline-code"></body></code></p>
<p>The <code class="inline-code">body</code> is where all of the content on the page goes. All of the tags we talked about before—<code class="inline-code">p</code>'s, <code class="inline-code">div</code>'s, <code class="inline-code">img</code>'s—go here!
</li>
</ul>
<p>That's what a basic HTML file should look like! We're only missing one thing—the name of the file. The only rule is that the file must end in <code class="inline-code">.html</code>. However, there is a special case: <code class="inline-code">index.html</code>. This will fold in nicely to our next mini-topic: the directory structure for websites.</p>
<div class="separator"></div>
<h3 id="structure"><a href="#structure">How do we organize HTML files?</a></h3>
<p class="with-list">This might be a little complicated, and it's hard to explain without looking at an example. So, let's use this website as an example! The <strong>root directory</strong> of this website is a folder simply named <code class="inline-code">/</code>, and it contains six HTML files. Here are the files and their respective URLs:</p>
<ul>
<li><code class="inline-code">index.html</code> : <code class="inline-code">/</code></li>
<li><code class="inline-code">html.html</code> : <code class="inline-code">/html.html</code></li>
<li><code class="inline-code">css.html</code> : <code class="inline-code">/css.html</code></li>
<li><code class="inline-code">js.html</code> : <code class="inline-code">/js.html</code></li>
<li><code class="inline-code">git.html</code> : <code class="inline-code">/git.html</code></li>
<li><code class="inline-code">nextsteps.html</code> : <code class="inline-code">/nextsteps.html</code></li>
</ul>
<p>Note that every page's URL must contain the file name, except for <code class="inline-code">index.html</code>. <span class="major-key">When a folder contains a file named <code class="inline-code">index.html</code>, that is the default page that will be shown when you don't specify a file name.</span></p>
<p>There are other files apart from the HTML, so this is a little simplified. Still, this should help clarify the structure.</p>
<div class="separator"></div>
<p>We're almost ready to build out our own content! But first, we have an important tool to talk about.</p>
<h3 id="inspector"><a href="#inspector">How do we know what's going on in the browser?</a></h3>
<p>This is a huge problem. If something's broken on your site, how do you know what's happening? Or, maybe more interesting, if you see something awesome on another website, is there a way to find out why it looks the way it does?</p>
<p>Fortunately, this problem has already been solved beyond our wildest dreams by very smart people! You can <strong>inspect element</strong> by right-clicking in Chrome, Safari, or Firefox. (In Safari, you might have to <a href="https://developer.apple.com/library/iad/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html">enable this manually.</a>)</p>
<p>You can also view the <strong>source code</strong> in <code class="inline-code">Tools > Web Developer > Source Code</code> in Firefox, <code class="inline-code">View > Developer > View Source</code> in Chrome, and <code class="inline-code">Develop > Show Page Source</code> in Safari. <code class="inline-code">Fn</code>+<code class="inline-code">F12</code> will also often work.</p>
<p>Try viewing the source for this page now! You'll see some things that look familiar, and some things that might look a little bizarre. It's great practice to do this whenever you come across a website you really like and want to see what's going on under the hood.</p>
<p><span class="major-key">If there's something you don't understand, Google it. Always. Every time.</span> Most of the learning we do as developers happens while we're on the job, or building something on our own, not from tutorials like this. Don't be afraid to explore and learn something new.</p>
<div class="separator"></div>
<p>Let's review some of the language we covered in this lesson. I know this might seem a little silly, but there's actually a great reason to focus on vocabulary, and it's not because I want to treat this like a middle school English class.</p>
<p><span class="major-key">It is really important to be able to hold a technical conversation.</span> This is something I wish I'd learned earlier on in my life as a programmer! You'll be able to communicate much more easily with other developers if you understand these words and know when it's appropriate to use them.</p>
<h3 id="terms"><a href="#terms">Terms you should know</a></h3>
<dl>
<dt>HTML</dt>
<dd>Stands for HyperText Markup Language. A standard developed in 1991 by Tim Berners-Lee.</dd>
<dt>element</dt>
<dd>A component of an HTML page. Every HTML page is made up of elements.</dd>
<dt>tag</dt>
<dd>The code that opens and closes HTML elements. <code class="inline-code"><p></code> is an <strong>opening tag</strong>;<code class="inline-code"></p></code> is a <strong>closing tag</strong>.</dd>
<dt>headers</dt>
<dd>Also known as <strong>headings</strong>, although that terminology is getting outdated. Generally speaking, they describe the topic of a section. In decreasing order of priority, they go from <code class="inline-code"><h1></code> to <code class="inline-code"><h6></code>.</dd>
<dt>anchor tags</dt>
<dd>More commonly known as links, represented by <code class="inline-code"><a href="http://some-link.com"></code>.</dd>
<dt>attribute</dt>
<dd>A property of an HTML element, like the <code class="inline-code">href</code> in a link or the <code class="inline-code">src</code> in an image.</dd>
<dt>nesting</dt>
<dd>HTML elements can be <strong>nested</strong> inside one another.</dd>
<dt>parent/child</dt>
<dd>A <strong>child</strong> element is nested inside its <strong>parent</strong>.</dd>
<dt>comment</dt>
<dd>Helps to clarify your code. Only visible in the <strong>source code</strong>. In HTML, <code class="inline-code"><!--</code> opens a comment and <code class="inline-code">--></code> closes a comment. Comments are formatted differently in every language.</dd>
<dt>root directory</dt>
<dd>The top folder in a file system.</dd>
<dt>source code</dt>
<dd>Raw code written by a programmer. HTML source code is viewable using the developer tools in your browser.</dd>
<dt>inspect element</dt>
<dd>You can <strong>inspect element</strong> using your browser to view the properties of a specific HTML element.</dd>
</dl>
<div class="separator"></div>
<p>Now it's time to apply what you've learned! Let's build something fun.</p>
<h3 id="assignment"><a href="#assignment">A short project</a></h3>
<h4>Getting started</h4>
<p>Create a folder at the same level as your <code class="inline-code">Documents</code> folder. It will be your working directory for the remainder of this tutorial.</p>
<p>Open up <a href="http://sublimetext.com">Sublime Text</a>. You should have downloaded this already, but if not, do so now!</p>
<p>In Sublime Text, create a new file called <code class="inline-code">index.html</code> and save it inside your working directory.</p>
<h4>Working on the file</h4>
<p>You can view the HTML file in your browser by right-clicking and choosing <code class="inline-code">Open with..."</code>, then choosing your browser.</p>
<p>Whenever you want to update your file, make sure you save the file! Saving is very important, not only to make sure your work doesn't disappear, but also because your browser will only display the most recently saved version.</p>
<h4>Checklist</h4>
<ul>
<li>A header with your name in it.</li>
<li>A picture of you. Or of your favorite food. Or your least favorite rapper.</li>
<li>A paragraph describing yourself. Or your favorite food, or least favorite rapper.</li>
<li>At least three links to other websites.</li>
</ul>
</div>
<div class="inline-nav">
<div class="next-subject"><a href="/css.html">Styling with CSS</a></div>
<div class="arrow">
<a href="/css.html">
<div class="line"></div>
<div class="line"></div>
</a>
</div>
</div>
<div class="footer">
<span class="left">Designed, developed, and maintained by <a href="http://evantarrh.com">Evan</a>.</span>
<span class="right"><a href="https://github.com/evantarrh/jade/issues/new">Suggest an improvement.</a></span>
</div>
</div>
<script src="/js/burger.js"></script>
<script src="/js/progress.js"></script>
<script src="/js/lib/prism.js"></script>
</body>
</html>