lesson |
HTML document setup |
Create a valid HTML document with all the right starter code. |
web-dev-1 |
html-document-setup |
true |
true |
| title |
url |
HTML semantics |
html-semantics |
|
| title |
url |
HTML indentation |
html-indentation |
|
| title |
url |
highlight |
HTML semantics cheat sheet |
html-semantics-cheat-sheet |
true |
|
| title |
url |
HTML semantics checklist |
html-semantics-checklist |
|
| title |
url |
HTML introduction slide deck |
/courses/web-dev-1/html-introduction/ |
|
| title |
url |
Validators |
validators |
|
|
| before |
notes |
We’re going to walk through writing some HTML code and the bits that are necessary for a valid document. |
| label |
text |
Type it, type it real good |
Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers! |
|
|
|
|
| title |
before |
folders |
after |
notes |
Set up project |
Before we get started, create some files and get ready.
|
| label |
type |
html-document-setup |
folder |
|
| label |
indent |
index.html |
1 |
|
| label |
type |
indent |
notes |
images |
folder |
1 |
This folder already exists, it was cloned from GitHub |
|
|
|
1. Drag the `html-document-setup` folder you cloned to your code editor (likely Atom).
2. Using your code editor, create a new file, then immediate save it as exactly `index.html` into the `html-document-setup` folder.
|
| label |
text |
Naming conventions |
Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions). |
|
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
notes |
after |
Write the HTML |
In order for our HTML file to be read properly by all web browsers we need a bunch of specific elements in our code.
Here’s the HTML we need to make a basic HTML file.
|
html |
index.html |
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>HTML template</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<!-- All the HTML content goes in here -->
<header>
<h1>HTML template</h1>
</header>
<main>
<p>Lorem ipsum dolor sit amet.</p>
<img src="images/logo.svg" alt="">
<a href=" https://www.wikipedia.org">Wikipedia</a>
</main>
</body>
</html>
|
| num |
text |
1 |
The `DOCTYPE` tells browsers we’re writing valid HTML. Without it browsers will render our sites like 1999. |
|
| num |
text |
2 |
Everything in the file is wrapped in an `<html>` element.
This is where we specify the content language using the `lang=""` attribute.
|
|
| num |
text |
3 |
The `<head>` is where we store extra metadata about our HTML file; stuff that isn’t rendered in the browser’s viewport. |
|
| num |
text |
4 |
By writing `utf-8` on this line we’re allowing any language to be written in our file. Allows accented characters, non-English characters, Klingon, etc. |
|
| num |
text |
5 |
The `<title>` is *the* most important element—it’s what’s shown in search results and in the browser tab. |
|
| num |
text |
6 |
The `viewport` tag tells mobile browsers how to render our website—we’ll discuss this more later. |
|
| num |
text |
8 |
Everything goes in the `<body>` tag. **This isn’t the body of the content it’s the body of the HTML file.** |
|
| num |
text |
10 |
We can write notes to ourselves, called comments; they won’t be shown on the screen. |
|
| num |
text |
13 |
The `<h1>` tag *is the most important* piece of content on the page—every single HTML file needs one. |
|
| num |
text |
16-20 |
We can write as much HTML in here as we want. The indentation is there to help us understand our code, but the browser doesn’t really care. |
|
|
| label |
text |
Type it, type it real good |
Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers! |
|
|
**The code above is intentionally not copy-and-paste-able. You need to write the code by hand to learn it properly. So every single lesson will have the ability to copy-and-paste its code snippets disabled.**
|
|
| title |
before |
notes |
Test it in the browser |
Double click the `index.html` file Finder *or* right-click in your code editor and press “Open in browser”.
You should see something that looks like this:
|
| label |
text |
HTML snippets |
In the future you can create the HTML boilerplate stuff with a few snippets: `html5` and `viewport`
Type the snippet keyword then press `Tab`
|
|
|
|
| title |
before |
Validate the HTML |
We can use an online tool, called a validator, to check our HTML for bugs like unclosed tags, missing, code, etc.
**If your code isn’t doing what you expect it to do—validate it!**
2. Select all your HTML code with `⌘A`
2. Copy the code with `⌘C`
1. Go to the [W3C HTML validator]( https://validator.w3.org/).
3. Paste the code into the “Validate by Direct Input” text box with `⌘V`
4. Press “Check”.
5. See your errors, correct them, and validate again.
*You want to get the green bar—green is good.*
|
|
|