BUILDING YOUR ROBOT’S BODY

WRITING HTML

HTML stands for HyperText Markup Language. That’s a fancy way of saying that HTML is a language that you can use to create links (hypertext). HTML is so much more than simply a language for creating links, though.

HTML forms the skeleton that the text, pictures, and JavaScript in a web page attach to.

SEEING WHAT TEXT LOOKS LIKE WITHOUT HTML

Markup languages, like HTML, were invented in order to give documents (such as letters, books, or essays) structure that a computer can understand and do things with.

Here’s a simple list that a person can understand with no problem:

Things I Need carrots celery spinach

As a human, you see this list and understand it. But to a computer, this list has some issues. Figure 3-1 is what it looks like when you view the preceding list with a web browser.

Figure 3-1: The list displayed as HTML in JSFiddle.

As you can see, a computer has no way of knowing that “Things I Need” is a title, or that the rest of the items are part of a list. To make this list understandable to a web browser, we need to use HTML to “mark it up.”

USING HTML: IT’S ALL ABOUT THE TAGS

HTML is made up of tags. The tags on clothes give you information about what the clothes are made of and how to wash them. Similarly, tags in HTML give you information about the content inside of them.

Tags are made up of keywords inside of angle brackets (< and >) and they come in two basic types: a beginning tag and an ending tag. Here’s an example of a beginning tag:

<p>

The p tag is how you mark up text in a document as a paragraph.

Most beginning tags also have matching ending tags. The only difference between a beginning tag and an ending tag is that an ending tag has a / before the name of the tag. For example, here’s the ending p tag:

</p>

To use tags, just put the thing that you want to mark up (such as text, images, or even other tags) between the beginning and ending tags. For example, here’s how you would mark up a paragraph of text in HTML:

<p>This is a paragraph of text. A paragraph has a line break before and after it in order to separate it from the other paragraphs of text in a document.</p>

HTML has a bunch of tags that you can use to label different parts of a document. Examples of tags include <p> for paragraph, <img> for image, <audio> for audio clips, <video> for video clips, <header> for the top of a web page, and <footer> for the bottom of a web page.

When you have a beginning tag, an ending tag, and stuff in between those tags, we call the whole thing an HTML element. Here are some more examples of HTML elements. You can try each of these out to see what they look like by typing them into the HTML pane in JSFiddle.

<p>An HTML <em>element</em> is made up of <strong>text</strong> and <strong>other elements</strong>.</p>

<h1>This text will display large and bold.</h1>

<h2>This text will be bold and smaller than h1 text.</h2>

<h3>This text will be smaller than h2 text.</h3>

<header>Content in a header element is for the top of an HTML document or web page.</header>

<footer>Content in a footer element is for the bottom of an HTML document or web page.</footer>

<a href="link.html">This is a link</a>

<div><p>The div element creates a box where you can put anything you want, like paragraphs.</p></div>

Here’s the list from earlier in the chapter marked up as an HTML document, made up of tags and text:

<html> <head> <title>My Grocery List</title> </head> <body> <h1>Things I Need</h1> <ol> <li>carrots</li> <li>celery</li> <li>spinach</li> </ol> </body> </html>

Figure 3-2 shows what it looks like when you view it with a web browser. That’s much better, right?

Figure 3-2: The list displayed as HTML in a web browser.

Notice that you can’t see the HTML tags in the web browser. Instead, they tell the web browser how to show text and images.

NESTING HTML TAGS

Writing HTML is pretty easy once you know a few things about how tags are put together. The first thing to know is that most HTML documents share a very similar basic structure, and they all must follow a few basic rules.

The first rule of writing HTML is that tags need to be opened and closed in the right order. One way to remember this is FILO, which stands for First In, Last Out.

Notice that the grocery list earlier starts with the <html> tag and ends with the </html> tag. This is how every HTML document should start and end. All the other tags in a web page are “inside” the html tags, and they’re closed according to FILO.

For example, the <head> element is inside of <html>. Therefore, the closing head tag must come before the closing html tag:

<html> <head> </head> </html>

The <ol> tag comes after the <body> tag, so <ol> is inside of <body> and you have to put the </ol> tag before the </body> tag:

<html> <head> </head> <body> <ol> </ol> </body </html>

HTML elements are put together in a similar way to Russian nesting dolls (see Figure 3-3). One element goes inside of another. Another word for the way HTML tags fit inside of each other is nesting.

Figure 3-3: HTML tags nest in the same way that Russian nesting dolls do.

Another rule when writing HTML is that documents always have a head element and a body element:

The head element: The head element is like the brain of your web page. JavaScript code often goes into the head element, but it doesn’t display in the web browser window.

In the grocery list, we have only a title tag in the head. The title is what displays at the top of the browser window or in your browser’s tab when you’re on a web page. Whatever you put inside the title tag is usually what shows up as a link in search results, too.
The body element: The body element is where everything that you want to display in the web browser goes. In the grocery list, we have several elements in the body:
- The h1 element: The h1 element can be used to identify the most important header on your web pages. Headers typically identify sections of documents or web pages. For example, if this chapter were a web page, the first h1 element would come right after the chapter introduction and would read “Writing HTML.”
- The ol element: Following the h1 element, we have an ol element. ol stands for ordered list. An ordered list is a list of items that are numbered or lettered in a particular order. HTML also lets you make unordered lists, by using the ul (for unordered list) tag. Unordered list will display with a dot, or bullet, to the left of each item.
- The li element: Following the ol element, we have an li element. Inside of either an ol or ul element, you can use any number of li elements (li stands for list item) to create the individual list items in your list.

WRITING YOUR FIRST HTML DOCUMENT

Now that you’ve seen the basic rules of HTML, you’re ready to build your first HTML document.

Open your web browser and go to https://jsfiddle.net.
Drag the pane borders to make the HTML pane in JSFiddle as large as you like.

We’re only going to be working with the HTML pane for now, so make sure you’re comfortable and have plenty of space.
Type the following basic HTML template into the HTML pane:
<html> <head> <title>HTML Template</title> </head> <body> <h1>A basic HTML template</h1> </body> </html>

As soon as you type <html>, you get a warning message from JSFiddle, as shown in Figure 3-4, telling you that <html> is already included in the output. What’s happening is that JSFiddle knows that every HTML document must have an html element and a head element, so it automatically puts it in there for you. JSFiddle only cares about what comes in between the <body> and </body> tags.
Because JSFiddle already includes the basic HTML template, go ahead and delete the html tags, the head tags, and the body tags.

Always keep in mind that the <html>, <head>, and <body> elements should be part of every HTML document, even if you don’t need to type them yourself when you’re working in JSFiddle.
Click Run.

The text between the <h1> and </h1> tags will display in the Result pane, formatted as a first-level heading, as shown in Figure 3-5.

Figure 3-5: Running the basic HTML template in JSFiddle.

KNOWING YOUR HTML ELEMENTS

HTML has a lot of elements. We don’t have the space to talk about all the HTML elements here, but we’ll cover just enough of them to allow you to build an awesome robot.

There are some really good books on HTML, such as Beginning HTML5 & CSS3 For Dummies, by Ed Tittel and Chris Minnick (Wiley). You can also find a complete list of every HTML element online. Our favorite free online resource is at https://developer.mozilla.org/en-US/docs/Web/HTML/Element.

Table 3-1 lists the most commonly used HTML elements, along with descriptions of what they’re used for.

TABLE 3-1 THE MOST COMMON HTML ELEMENTS

Element	Name	Description
<h1> through <h6>	Heading levels 1 through 6	The heading for a section
<p>	Paragraph	A paragraph
<em>	Emphasis	Adds emphasis to word(s), often displayed as italics
<strong>	Strong	Adds strong importance, usually displayed as bold
<a>	Anchor	A link
<ul>	Unordered list	A bulleted list
<ol>	Ordered list	A numbered list
<li>	List item	An item in an unordered or ordered list
<img>	Image	An image
<hr>	Horizontal rule	A horizontal line on a page
<div>	Division	A way to separate a document into different parts

INTRODUCING DOUGLAS THE ROBOT

We’d like to introduce you to a good friend of ours. His name is Douglas the Robot. He enjoys programming, helping people, and especially dancing.

Douglas the Robot was named after one of our computer programming heroes, Douglas Crockford, who has taught us a lot about programming in general and about programming with JavaScript in particular. Figure 3-6 is a picture of Douglas the Robot.

Figure 3-7 is a picture of Douglas Crockford.

Photograph courtesy of Robert Claypool (`https://commons.wikimedia.org/wiki/File:Douglas_Crockford,_February_2013.jpg`)

Figure 3-7: Douglas Crockford, JavaScript extraordinaire.

Can you see any resemblance?

You’ll use HTML to make your basic robot skeleton.

The job of HTML is to give structure to a web page, in the same way that it’s the job of your bones to give your body structure.

Go to http://jsfiddle.net/watzthis/zppk3xe2. Notice that there is already some code in the CSS pane. This code is there to make your robot visible.

The job of CSS is to give style to HTML.

Without this CSS, Douglas certainly wouldn’t look much like a robot. In Chapter 4, after we finish building his skeleton, we’ll show you how this CSS code works, and you’ll make changes to it to personalize your own version of Douglas.

For now, let’s get started with the robot construction!

Follow these steps:

Type the starting tag for the robot’s head in the HTML pane.
<div id="robot">
Press Return (Mac) or Enter (Windows) several times to create blank lines.

JS Fiddle automatically puts in the closing </div> tag for you. Thanks, JSFiddle!

HTML elements are pretty powerful just by themselves, and they can make web browsers do some pretty fancy things. HTML has some other tricks up its sleeve: HTML attributes! HTML attributes are a way to give web browsers more information about your elements. The id attribute is used to give your element a unique name; in other words, it identifies it. The class attribute, which you’ll also be using to build Douglas, identifies a group of elements.
Between the starting and ending robot div tags, type these starting and ending tags to create the robot’s head element:
<div id="head"> </div>
Between the beginning and ending tags of the head div element you just typed, make four new elements for the robot’s eyes, nose, and mouth, like this:
<div class="eye" id="righteye"></div> <div class="eye" id="lefteye"></div> <div id="nose"></div> <div id="mouth"></div>

Your HTML pane should now have the following code inside it:

<div id="robot"> <div id="head"> <div class="eye" id="righteye"></div> <div class="eye" id="lefteye"></div> <div id="nose"></div> <div id="mouth"></div> </div> </div>

Notice that we put spaces before the eyes, nose, and mouth elements. We did this so that it’s easy to see that the eyes, nose, and mouth are all inside of the head element. Putting spaces at the beginning of lines of code to make them easier to read is called indenting.

When you put code between the starting and ending tags of other elements, it’s called nesting.
Click Run to see what you have so far.

You should now see Douglas’s head (see Figure 3-8).

Now let’s give Douglas a body and two arms!
Under the closing </div> tag of the head element, but before the closing tag for the whole robot, create a right arm with this code:
<div class="arm" id="rightarm"></div>
Under the right arm, type this code to create Douglas’s body:
<div id="body"></div>
Under the body element, type this last element to create the left arm:
<div class="arm" id="leftarm"></div>
Click Run to see the result.

Douglas now has a head, a face, two arms, and a body, as you can see in Figure 3-9.

Next, we'll write the code to display a message on Douglas’s shirt.
In between the starting and ending tags for his body, type the following code to display a message:
<p id="message">I Love to Code!</p>
Click Run to see the message appear proudly across Douglas’s chest, as shown in Figure 3-10.

Your finished HTML should look like this:

<div id="robot"> <div id="head"> <div class="eye" id="righteye"></div> <div class="eye" id="lefteye"></div> <div id="nose"></div> <div id="mouth"></div> </div> <div class="arm" id="rightarm"></div> <div id="body"><p id="message">I Love to Code!</p></div> <div class="arm" id="leftarm"></div> </div>

Figure 3-10: Douglas wearing a cool T-shirt!

CHANGING HTML USING JAVASCRIPT

Douglas the Robot is pretty cool already, but we want to be able to interact with him and give him commands to make him do things. JavaScript makes it possible to program Douglas to respond to your commands.

Let’s write some code to change the message on Douglas’s shirt dynamically, using JavaScript!

Type the following into the JavaScript pane:
var myMess = prompt("What should my shirt say?"); document.getElementById("message") .innerHTML=myMess;

The final code should look like Figure 3-11.
Click Run.

A popup window appears, asking you to type in a new message.
Type whatever you’d like to display on Douglas’s shirt and click OK.

Figure 3-11: The final code for Douglas the Robot.

Your new message will appear on Douglas’s shirt. We typed a message to show the world what Douglas loves to do (see Figure 3-12)!

Figure 3-12: Changing Douglas’s message.

Now let’s take a closer look at this JavaScript code:

var myMess = prompt("What should my shirt say?"); document.getElementById("message") .innerHTML=myMess;

This code is made up of two statements. This first statement tells JavaScript to ask you a question. Another name for a question is a prompt.

var myMess = prompt("What should my shirt say?");

After you’ve answered this question, your answer gets put into your variable, var myMess, where it will be stored and used by the next statement.

The next statement has a command:

getElementById

The job of this command is to look at the HTML and find an element by its unique ID. In this case, it’s looking for the element with the ID of message.

getElementById("message")

This command searches and finds this HTML element:

<p id="message">I love to Code!</p>

The next command tells JavaScript that we want to change the HTML and what to change it to:

.innerHTML=myMess

The “inner” HTML is this part of the HTML element:

I Love to Code!