Tyler Clarke
691974d96b
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 23s
48 lines
2.3 KiB
HTML
48 lines
2.3 KiB
HTML
[!]
|
|
[=title "Week 2: HTML, Head, Body"]
|
|
[=content-]
|
|
<p>
|
|
We've covered a bunch of <i>basic tags</i> - tags that just show some text or an image.
|
|
These are fun and useful, but there's a whole world of much fancier stuff out there, and to access it we need to start thinking about <i>document structure</i>.
|
|
</p>
|
|
<p>
|
|
Immediately after the DOCTYPE (read <a href="week-2-doctypes.html">this</a> if you don't know what that is), almost every serious HTML page begins with the
|
|
<code><html></code> tag. This is not technically required, but it's necessary to write clear code.
|
|
It's also useful for some more advanced trickery that we most likely won't cover in this course. The tag works exactly how you think: you open with
|
|
<code><html></code>, and you close with <code></html></code>. Your entire website goes inside it (minus the DOCTYPE - the DOCTYPE is always above everything else, including
|
|
the <code><html></code> tag).
|
|
</p>
|
|
<p>
|
|
Inside the <code><html></code> tag, you have two main sub-sections: <code><head></code> and <code><body></code>.
|
|
</p>
|
|
<p>
|
|
The <b>header</b>, contained within the <code><head></code> tag, contains all of your <i>metadata</i> - this is information describing your
|
|
page, that isn't actually part of the page content. For instance, if you want your tab to have a title, you use the <code><title></code> tag inside the <code><head></code>.
|
|
</p>
|
|
<p>
|
|
You should only ever put invisible metadata in the header; don't put content there. You technically don't <i>have</i> to have a <code><head></code>, but it's a good practice.
|
|
</p>
|
|
<p>
|
|
The <b>body</b>, contained within the <code><body></code> tag, contains all of your actual content that shows up in the page. You can put all the normal tags in it,
|
|
and use them exactly as you would without all this fancy stuff!
|
|
</p>
|
|
<p>
|
|
An example of a bare-minimum working page is thus:
|
|
</p>
|
|
<pre><code><!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<!-- metadata goes here! -->
|
|
</head>
|
|
<body>
|
|
<h1>Actual content goes here!</h1>
|
|
</body>
|
|
</html>
|
|
</code></pre>
|
|
<p>
|
|
This is a lot more complicated than what we've done so far! With practice writing all this out will become muscle memory; I won't expect you to have it memorized immediately.
|
|
</p>
|
|
[/]
|
|
[#template.html]
|