week 2

site/introwebdev/week-2-metadata.html

@@ -0,0 +1,63 @@
+[!]
+[=title "Week 2: Metadata"]
+[=content-]
+<!-- here's some metadata for ya! -->
+<p>
+	Metadata is all the information <i>people don't see in the page</i>. In our previous pages there wasn't very much of it;
+	we're going to change that!
+</p>
+<h2>Titles</h2>
+<p>
+	The simplest type of metadata is the page title. This is set with the <code>&lt;title&gt;</code> tag (inside your header - read <a href="week-2-html-head-body.html">this</a> if you aren't sure what that is).
+	It doesn't show up inside the page, but it shows up on search engines and in the web browser's top bar.
+</p>
+<p>
+	You can set a simple title like so:
+</p>
+<pre><code>&lt;head&gt;
+	&lt;title&gt;This Is My Page Title!&lt;/title&gt;
+&lt;/head&gt;
+</code></pre>
+<p>
+	Try it - you'll see it changes the name of the tab! Titles are very useful and necessary - a raw path is a really ugly name for a webpage.
+</p>
+<h2>Linking Icons</h2>
+<p>
+	Perhaps the most dubiously-named tag in HTML is the <code>&lt;link&gt;</code> tag.
+	It always goes inside a <code>&lt;head&gt;</code>, and does not have content.  
+</p>
+<p>
+	<code>&lt;link&gt;</code> always looks like this:
+</p>
+<pre><code>&lt;link rel="something" href="something" /&gt;</code></pre>
+<p>
+	The "rel" property defines what this link <i>means</i>, and the "href" property defines <i>the file we're linking</i>.
+</p>
+<p>
+	This does <i>not</i> create an anchor like the <code>&lt;a&gt;</code> tag - it is purely metadata. It's used to import styles (we'll cover these later)
+	and favicons. Favicons are the little image next to the name of each tab. Let's import a favicon:
+</p>
+<pre><code>&lt;link rel="icon" href="favicon.png" /&gt;</code></pre>
+<p>
+	This literally means "use favicon.png as the icon for this site". Note that "favicon.png" is not a magic name - you can use any image file,
+	as long as it's a ".png" or a ".ico". Other formats might not be supported.
+</p>
+<h2>Aside: comments</h2>
+<p>
+	Another type of hidden information is a <i>comment</i>. This is some text that html <b>completely ignores</b>. It's only there for human developers to read
+	- or for scripts to process! You write comments sorta like a normal HTML tag:
+</p>
+<pre><code>&lt;!-- This is a comment! --&gt;</code></pre>
+<p>
+	<!-- he's lying, this doesn't work ;) -->
+	Note the normal tag less than and greater than signs, the exclamation mark (indicating a special tag - note that DOCTYPE is much the same way!), and the two dashes before and after.
+	These must all be exact! If you do it wrong, <!-- trust me, I would know! --> your comment text will be rendered as normal text, which can be quite embarrassing.
+	<!-- if you're reading this, you might be a turnip! -->
+	<!-- spontaneous turnipification is a real concern! -->
+</p>
+<p>
+	Comments are not generally considered <i>metadata</i> - they're information hidden from the user, but they don't actually
+	do anything. Use comments to explain to other developers what your code does.
+</p>
+[/]
+[#template.html]