[Tutorial] HTML - Lesson 1 - Basic understanding

HTML stands for Hyper Text Markup Language. That means it's not programming language, you just tell browser what elements structure you have.

You can imagine HTML as boxes inside boxes inside boxes (and so on). Everything in HTML are shaped as rectangle.


For our start website we need few things.

  1. Browser. Any. The newer the better.
  2. Website inspections tools. Most browsers already has that tool integrated. Try pressing F12 on your keyboard.
  3. Plain text editor. Like notepad. I prefer Notepad++. It's free and aimed to development. Any text processing programs (like MS Word) can't be used here, because it will shape your code and you don't want that.

I will be using Mozilla FireFox and it's default inspections tools. There are also FireBug extension for FireFox.

Lets look at our console window and tabs that we will be using (On other browsers tabs sequence may differ but they still do same thing).

  1. Element inspection. Clicking this button and than on any area inside webpage will show you this element HTML code inside #6
  2. Inspector. In this tab you see plain HTML and you can expand inner it's content to see what's inside.
  3. Console. This tab is not used for HTML but here you will see any errors, warnings and messages from JavaScript.
  4. Network. Here you can find what elements are loaded via URL to your page. Any image, resource (css, js...), requests are shown here.
  5. Breadcrumb. Here you will see path till selected element.
  6. Tab content. Clicking different tabs will show different information inside this area.

Let's start with our "Hello World!" website.

First of all create new folder and name it as your website (I will name that folder "tutorial"). Now open text editor and inside tutorial folder save file named "index.html". Make sure it's extension (file name part after last ".") is html and not txt, you will see that now this file is openable via browser.

We named our file index because when using server and not specifying file name it will search for "index.*" file to show.

Every element inside HTML is called tag and it must start and end with same tag name just tag end must be prefixed with "/" before name. E.g. "<div>Some text</div>".

There are two types of tags inside HTML.

  1. Block. It has width and height that can be specified. Usually height is same as inner content height and width is full browser window width (or parent width). These elements by default goes one under another.
  2. Inline. It's width and height is same as inner content. These elements by default goes side by side.
Replaying to
Leave comment