01: Elements

This module will teach you the simplest basics of HTML so you can get started making web pages, and later use JavaScript to control them. We'll quickly go through the part of the standard that talks about "elements" which are created using "tags". If you complete this module before learning JavaScript you will help yourself in three ways:

1. You will have a first look at how you use text--aka code--to make a computer program do what you want...usually.
2. You will create your first working thing you can show people on the internet.
3. You will have a better understanding of the most common place you use JavaScript: the web browser.

You should learn this material even if you're learning JavaScript to be a "backend" programmer. So much of JavaScript's weirdness on the backend comes from its original birth place on the frontend. Learn the frontend history even just a little bit and you will have a much better time using JavaScript for other purposes.

Warm-up

To get started I'm giving you a small "warm-up exercise." Consider this a small puzzle to attempt so you get into the mindset of programming:

1. Start up your text editor of choice.
2. Start a new file and name it ex01-warmup.html.
3. Save this file anywhere.
4. Type this text into the file: <h1>I Did It!</h1>.
5. Save it again.
6. Find the file and then double click it with your mouse. It should open in your browser.

How does it look? If it's not large text saying "I Did It!" then you are missing a character. Triple check your text compared to mine.

What Is HTML?

The web is built on a combination of technologies, but at the core is the HyperText Markup Language. If you take that acronym apart you can get a first idea of what it actually does:

• Hypertext -- This is an old term that was all the rage in the 80s and 90s that basically means "documents linked together in some way". Usually this meant having links that you could click on or navigate through to continue reading other parts of the document, or transition to other documents.
• Markup -- If you write a document with a word processor you see exactly what you type. Make something bold and it looks bold. Make it italics and it looks italics. A "markup" language is where you take plain text, but you add special modifiers to the text to tell something else how to display that text. If you've ever written a blog post with Markdown then you've used a simpler markup than HTML.
• Language -- In the world of computing everything is a language, and this means that it has an exact vocabulary, punctuation, and grammar that you must follow to be understood. You wouldn't understand me if I wrote, "Understdood, you. must have! to be." You--being a human being--may be able to figure out what I meant, and HTML generally also tries to be forgiving if you make no sense.

What Does HTML Code Look Like?

HTML can get very complicated, but to start we can write a single paragraph with an emphasized word:

<p>This word right <em>here</em> is emphasized.</p>

This is actual text you would find in any web page, but what do I mean by "in a web page". You could put this into a file named index.html, and then drag it to your browser to see it actually work. On OSX you can also type open index.html and it will open the index.html file in your favorite browser. On Linux you're on your own since I'm sure you probably have some crazy secure way you run IceWeasel so you're way smarter than me. No matter how you load the web page, when you're done, it will probably look like this:

Breaking It Down

You write HTML by surrounding text with <tags> and </tags>. A tag is structured like this:

• < (less-than) to start the tag. This is like yelling at the computer, "HEY! Pay attention, I'm about to tell you something that's a command, not a bunch of text."
• The tag name, such as p, or em or many other words. These are the command the computer should process.
• > (greater-than) to end the tag. Later we'll learn about attributes which go before this, but for now stick to just <, a name, and then >.

That starts your tag command to the browser (which I'm just calling the computer because it is really a computer inside your computer), you then write text that fits inside this tag. In the example above, I wrote:

Then I repeated my process above for the <em> tag to start an emphasized word. After this <em> tag I wrote "here", and then I did the other thing you need to make HTML work: I closed the <em> tag with </em>. Here's what that means:

• < (less-than) again to start the ending tag. I know, you're starting the ending, but this is consistent at least.
• / (slash) to indicate that this is an ending tag, and it has to match the previous one.
• em the tag name again so you know it's really ending the <em> above.
• > (greater-than) then close this closing tag with the same greater-than character.

This finishes our one line up to the emphasis, so we now have written:

<p>This word right <em>here</em>

If you think a little bit ahead, you now realize you have to close that <p> tag at the beginning, and since you already did that for the <em>here</em> part then you should be able to figure out how you end it with </p>.

1. Write out the remaining text of is emphasized.
2. Write the < (less-than) to start the ending tag.
3. Write the / (slash) to tell the browser this is an closing tag.
4. Write the p (which means paragraph) to tell the browser exactly what tag you're closing.
5. Write the > (greater-than) to finally end the closing tag.

This basic concept of opening tags, text, and closing tags makes up a large part of HTML. There are a few more components but this is a good start. The one thing you'll need to start grasping is the concept of nesting, or recursive structures.

Programmers Love Nesting

I think if most programmers had to do other jobs they would choose from the following:

1. Professional string and cable detangler.
2. Phrenologist, since it's about as exact a science as computer science.
3. Matryoshka doll designer.

Programmers love nesting things inside things inside other things inside recursive self-similar structures probably more than eating food and breathing air. Meanwhile, normal people like you and me just want to write text like Markdown and get on with our lives, but programmers want you to structure your words into trees.

What this means is when you read that code we've been laboring over:

<p>This word right <em>here</em> is emphasized.</p>

You--a normal human--sees a straight line that looks like This word right here is emphasized with some random trash thrown in to confuse you. I--a programmer--see this as a beautifully clean tree structure that makes me weep with joy at its treeness.

You see, the above code is actually structured like this internally:

<p>
   This word right
   <em>
      here
   </em>
   is emphasized.
</p>

If I break this down completely I would see this structured as:

1. <p> is the root of the structure. Like the .... trunk of a tree, but we call it a root, even though roots look like branches...just go with it, it's the root not the trunk. Stop being so normal.
2. This word right here is the first child, or "branch" of the tree.
3. <em> is the second child. Remember when I say "child" I mean "child of <p>".
4. here is now the child of <em>, so we're now two levels deep on this tree. The <p> is the grandparent of this word.
5. </em> actually closing tags are mostly ignored and only serve to tell the browser when to end a tag's contents. This now closes the <em> tag so that we can start more children of <p>.
6. is emphasized. is the final child of the root <p> tag and we're done.
7. </p> actually now we're done. Remember, the ending tags aren't counted as children, they're purely just to tell the browser how to end things.

An (Almost) Complete HTML Page

That is a lot of information to start, but you should be able to take the following code and make some educated guesses as to what it does:

<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
   <p>This word right <em>here</em></p>
  </body>
</html>

Type this code into your index.html file and load it in the browser again. You can usually just refresh the page and your new content will show up. If you typed it correctly then it should look the exact same as before, but now you should see a title in the browser window bar.

In the next exercise I'll break down this whole page, then get into all of the main tags you'll use, and in the 3rd exercise we'll get into attributes.

Cooldown

Be sure you can answer the following questions:

1. What is meant by "nesting" in HTML?
2. What is a tag?
3. How do would you create a tag named pizza?
4. How do you load a .html file in your browser?
5. Do you know how to open a file in your browser from the command line (PowerShell or Terminal)?
6. What is the <head> and what is the <body> of an .html file?

About The Video

The video is a retelling of the above story, but with demos on how to actually write these files and load them into the browser on different platforms. Actually, I only cover Windows and OSX because Linux people probably can't play the video anyway.