From Zero to Website

HTML

What your browser speaks

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.

What does HTML look like?

It's simple!

<p>It's simple!</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 <p> is an opening tag that denotes the start of a paragraph, and the </p> closes the paragraph. The whole paragraph can be referred to as an element.

HTML is more than just paragraphs, though. Let's get familiar with some more HTML elements!

Headers

One of the best ways to create hierarchy is with headers. At the top of this page, the "HTML" is actually an h1, so the code looks like <h1>HTML</h1>.

h1's are the biggest options for headers, but there are also h2's and h3's, all the way down to the rarely-used h6. For example, the gray "Headers" at the top of this section is an h4.

Links

We can use anchor tags to link to other pages!

<a href="http://jumpman.space">Jumpman Jumpman Jumpman</a>

The href 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: Jumpman Jumpman Jumpman

If you're linking to another website, it's important to always include the http:// at the beginning of the link inside the href.

However, when you link to a different page on the same website, you should always omit both the http:// and the base URL—so, for example, if I wanted to link to evan.land/jade/css.html, the tag should look like this: <a href="/jade/css.html">. This means that if you ever just want to link to the homepage (e.g. evan.land), the correct href is simply href="/".

Note that the href goes inside the tag itself! This isn't the only element for which this happens. Another great example is the <img> tag!

The <img> tag

It's actually really easy to put pictures on websites—there's a tag for that!

<img src="http://imgs.xkcd.com/comics/tags.png">

Note that <img> tags do not need need a closing tag, i.e., </img>.

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 attribute that can be specified inside the tag: we can also set the height and/or width of the image like this!

<img src="http://imgs.xkcd.com/comics/tags.png" width="100%">
<img src="http://imgs.xkcd.com/comics/tags.png" height="300px">

There are several valid formats for these height and width attributes, which we'll cover in more detail in our section on CSS.

The container element: <div>

<div>'s are container elements. They offer a way to organize different HTML elements by nesting. In other words, a <div> will almost always contain other elements inside it, like so: 

<div>
    <img src="http://imgs.xkcd.com/comics/tags.png" width="300px">
</div>

Note that the img is indented in this code block. It's common practice to indent whenever an HTML element is nested inside another one. When this happens, we refer to the div as the parent element, and the img as the child.

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.

Typographical elements: <strong> and <em>

For anyone who likes typography, this is the fun stuff! You can use tags to make your type bold or italicized.

<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>

OK, we've already learned a lot! There are more useful HTML elements out there, but we still have a pretty good idea of what HTML looks like. Now, let's focus on how to use HTML in practice.

What should an HTML file look like?

Here's a very minimal skeleton. We can fill it out later once we start building our own pages!

<!DOCTYPE html>
<html>
    <head>
        <!-- This is a comment. -->

        <title>Wow!</title>
    </head>
    <body>
        <!-- Put all content here. -->
    </body>
</html>

Check it out! Let's look at this file line-by-line to understand it.

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 .html. However, there is a special case: index.html. This will fold in nicely to our next mini-topic: the directory structure for websites.

How do we organize HTML files?

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 root directory of this website is a folder called jade/, and it contains six HTML files. Here are the files and their respective URLs:

Note that every page's URL must contain the file name, except for index.html. When a folder contains a file named index.html, that is the default page that will be shown when you don't specify a file name.

Also, this is an interesting case, because the jade folder is really a folder that lives inside of my personal website. So what the directory structure really looks like is:

evan.land/
  - index.html
  - jade/
    - index.html
    - html.html
    - css.html
    - js.html
    - git.html
    - nextsteps.html

There are other files apart from the HTML, so this is a little simplified. Still, this should help clarify the structure.

We're almost ready to build out our own content! But first, we have an important tool to talk about.

How do we know what's going on in the browser?

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?

Fortunately, this problem has already been solved beyond our wildest dreams by very smart people! You can inspect element by right-clicking in Chrome, Safari, or Firefox. (In Safari, you might have to enable this manually).

You can also view the source code in Tools > Web Developer > Source Code in Firefox, View > Developer > View Source in Chrome, and Develop > Show Page Source in Safari.

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.

If there's something you don't understand, Google it. Always. Every time. 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.

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.

It is really important to be able to hold a technical conversation. 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.

Terms you should know

HTML
Stands for HyperText Markup Language. A standard developed in 1991 by Tim Berners-Lee.
element
A component of an HTML page. Every HTML page is made up of elements.
tag
The code that opens and closes HTML elements. <p> is an opening tag;</p> is a closing tag.
headers
Also known as headings, although that terminology is getting outdated. Generally speaking, they describe the topic of a section. In decreasing order of priority, they go from <h1> to <h6>.
anchor tags
More commonly known as links, represented by <a href="http://some-link.com">.
attribute
A property of an HTML element, like the href in a link or the src in an image.
nesting
HTML elements can be nested inside one another.
parent/child
A child element is nested inside its parent.
comment
Helps to clarify your code. Only visible in the source code. In HTML, <!-- opens a comment and --> closes a comment. Comments are formatted differently in every language.
root directory
The top folder in a file system.
source code
Raw code written by a programmer. HTML source code is viewable using the developer tools in your browser.
inspect element
You can inspect element using your browser to view the properties of a specific HTML element.

Now it's time to apply what you've learned! Let's build something fun.

A short project

Getting started

Create a folder at the same level as your Documents folder. It will be your working directory for the remainder of this tutorial.

Open up Sublime Text. You should have downloaded this already, but if not, do so now!

In Sublime Text, create a new file called index.html and save it inside your working directory.

Working on the file

You can view the HTML file in your browser by right-clicking and choosing "Open with...", then choosing your browser.

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.

Checklist

Styling with CSS
Designed, developed, and maintained by Evan. Suggest an improvement.