Exercise 5.1. Introducing HTML
Create a new file on you computer, name it as index.html, put the following code in it and save.
<html> <head> <title>Title for the browser</title> </head> <body> <h1>I'm a Heading 1 title</h1> <p>This is a paragraph.</p> </body> </html>
Now open it with your browser (you can simply drag it to your browser). You will see a web page:
Back to the code. It’s obvious that HTML begins with <html> and ends with </html>. They are called opening tag and closing tag. It’s the basic of HTML syntax, you can see them all over a HTML file.
Inside HTML, we have two parts, the head and the body. The head deals with configurations, like the title of the page for the browser, which is not showing in page. On the other hand, the body part contains everything that shows on the page.
Let’s take a closer look at the <h1> tag. H1 is short for Heading 1. Just like the <html> tag, it ends with </h1>. Whatever in between is affected by it. If you don’t like the default font size, you can adjust it with CSS, but we are not gonna talk about it here.
HTML has many tags like these, for example, <img> for images, <a> for links, etc. You will come to them later.
You might be wondering if you should put this in the head or the body. Actually both are fine. Here is an example to put it in the body:
<html> <head> <title>Title for the browser</title> </head> <body> <h1>I'm a Heading 1 title</h1> <p>This is a paragraph.</p> <script> alert("JavaScirpt in HTML."); </script> </body> </html>
Go back to your browser and refresh our page, you should see a popup window:
Exercise 5.3. Introducing JS Bin
Here is how JS Bin looks like:
console.log("This is for the Console."); alert("This is for the popup."); document.write("This is for the web page.");
Here is the demo:
We’ve know that console.log() is for the Console, while alert() is for popup. Our new command document.write() is for the web page, in other words, the HTML file. The HTML file is exactly the document in document.write(), therefore you see it in the Output column.
Exercise 5.4. Practice what you’ve learned in JS Bin
From now on, we will be using JS Bin for this series. We suggest you practice all previous codes on JS Bin as a way to review what you’ve learned and to get used to the new tool.