Tyler Clarke
691974d96b
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 23s
64 lines
2.9 KiB
HTML
64 lines
2.9 KiB
HTML
[!]
|
|
[=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><title></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><head>
|
|
<title>This Is My Page Title!</title>
|
|
</head>
|
|
</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><link></code> tag.
|
|
It always goes inside a <code><head></code>, and does not have content.
|
|
</p>
|
|
<p>
|
|
<code><link></code> always looks like this:
|
|
</p>
|
|
<pre><code><link rel="something" href="something" /></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><a></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><link rel="icon" href="favicon.png" /></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><!-- This is a comment! --></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]
|