HTML. Hyper-Text Markup Language. The programming language that changed the web as we know it. Every since the early days of the internet, this programming language has been used on all web pages, and it is what all web browser use to display web pages. But that is just an overview. How do you actually start using it to create websites? Simple.

Start by downloading a text editor, such as Brackets. This is a common, cross-platform text editor designed to build websites. After you finish downloading the installer for your computer, open it up. You will be presented with an interface like this:

Brackets.PNG

The interface is much simpler than most other code editors out there. You may be looking at the text in the middle and being confused, but the rest of the interface is simple enough for most people to figure out. The lightning bolt figure at the right of the screen is what you use to display the page that you code. If you click on it now, you will see that the text in the middle is now being displayed in a webpage, inside your selected browser, or in most people’s case, Google Chrome.

You have just displayed your first web page. Now let us code a really basic one. Create a new file within Brackets by hitting the New button under the File menu. Now copy this code, I will explain it step by step.

<html>
    <head>
        <title>Document</title>
    </head>
    <body>

    </body>
</html>

First thing that you may see is the greater than and less than symbols everywhere. Don’t worry, they are quite simple to understand. When a computer looks at the code, it needs something to know where the content is located within the text. So, it scans for certain symbols, such as <, or >, and gives them importance based on the text between them.

The < and > define tags. Here is an example of a tag: <p>Some Info</p>
The <sometag> part defined the “opening” of a tag. The one with a slash in it defines the end of the tag, </sometag>. The info in between the < and > tell what to do with the information in between the <> and the </>.

So, the first line. <html> means that this document is an HTML document, and that the browser should process it as such. The second line defines the <head> of an HTML document. The head is like the extra information that doesn’t get displayed on the page. Many extra things, such as font styles and website styles go in the head.

Next we have the <title> tag. This sets the tab name to the text in between the opening and closing tag. In this case, the tab name in the upper left area will be set to Document. As you can see, we then close the tag, because the entire document is not a title, only that area is. It is still part of the head, which is still part of the html.

Now we have the <body>. This is the most important tag, because this is where all of the information will go. _All of the content is here!_ So, we can simply type in text to that area, and it will show up in the web page. Try it now. Type in something to that area, then hit the lightning button on the right to see the result.

webpage.PNG

Pretty cool, eh! After that line of code, we end each of the tags that we opened up above, in this case the html tag and the body tag.

I will cover more in the next part of this series, which will be mostly video based. If you have any questions, ask me in the comments. Enjoy!