Let’s Code: HTML 100.1

Let's Code Post #4 V2

Welcome back to Let’s Code. Last week, we learned to make a simple coin toss game. We used new commands such as .toUpperCase() and Math.random(). This week, I was going to cover the switch command, but I decided it would be better to start with some basic HTML. HTML is the code that makes up the skeleton of websites. By combining HTML code and JavaScript, we will be able to make some really neat games. But, since HTML is written very differently than JavaScript, we are going to start with the basics.

To begin, most of HTML coding uses the less than (<) and greater than (>) signs. The actual code usually goes between a < and a >. The code written between these signs are called tags. So for example:

 

<”Insert Code Here”>

 

HTML also makes use of the slash (/), which is equivalent to the semicolon in JavaScript, a period. So, using our original example, a piece of HTML coding might look like this:

 

<”Insert Code Here”> </”Insert Code Here”>

 

Since examples only go so far, lets start using some actual HTML code.

 

<DOCTYPE!>

<html>

<body>

<h1>

HELLO WORLD

</h1>

</body>

</html>

 

In this example, we have five major parts. First of all, at the top, we have <DOCTYPE!>. This tag is telling the computer what kind of code the document is going to use. Whenever you are coding HTML, you must always start with <DOCTYPE!>.  Next, we have <html> and </html>. These tags are telling the computer that you will be programming in HTML. The <html> declares where the code starts, and the </html> declares where the code ends. The next part of the code is the <body> tag. Everything between these tags will contain the main information shown on a website. It makes sense since the body of a person is the most important part of their body. The fourth part of this code is the <h1> tag. These are called the heading tags because, as the name implies, they create a heading for your webpage. In HTML, there are only six headings: <h1> to <h6>. Words typed between the <h1> and </h1> tags comprise what will be displayed on a webpage.

 

So, there we go, you know some basic HTML. For coding practice, you can actually just use simple text-editors such a notepad or textedit. Just remember that you have to change the format of the text to plain text for it to work. Once you are finished typing out your code, you can just save it as a web page by adding the extension .html to the end of the file name. Then you can open it to show your results in your web browser. You can also just continue to use JSFiddle, but as an important note, JSFiddle doesn’t require you to type out the <DOCTYPE!> and <html> tags as it is already pre-programmed in.

 

Challenge of the Week: Try out HTML and create a .html file. Try using all 6 headings.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s