Learn HTML

HTML (the most recent version of HTML is HTML5) is a HyperText Markup Language. As you will see, as HTML is a markup language, it includes annotations and markups that instructs the browser how to display the text or create the layout.

Websites and web applications are made by web programming languages, frameworks and other associated libraries and code snippets but whatever you see at the end is an HTML page. Let’s make it more clear by giving an example: Open a new browser (I recommend Google Chrome) and in the address bar write jamshidhashimi.com and enter. In the backend, what happens is the request goes to the server hosting the website, server handles the request and sends back an HTML response. Then it is your computer browser that renders that HTML and starts showing you the page. You can see this with your eyes by right clicking on the page and then click View Page Source

The HTML page you saw by viewing jamshidhashimi.com web page source may look complicated, but after you learn HTML, you will be able to recognize everything in any HTML code. So first, let’s see how a basic HTML page looks like.

A very basic HTML page looks like the following:

Alternatively you can see and work on the code here. (Click HTML folder in the left and then open basic.html)

The sample HTML code is based on the following structure:

HTML Structure. Source: W3Schools.com

The <!DOCTYPE html> part of the code example is the default line in every HTML page. It is case insensitive but always good to write it in capital letters. Basically it tells to the browser that the document type you are looking at is HTML.

What comes after DOCTYPE is the start of our HTML document. We start by the opening the <html> tag, and closing it immediately. That’s what I do, as I don’t want to forget a tag unclosed, you shouldn’t as well. In HTML, a tag opened (like <html>) should be closed <like </html>). The next tag we are looking at it is <head> tag. It is where you feed your page with information and resources. These information and resources can be charset, title of your page, JavaScript files, stylesheets and others.

What comes after <head> tag is <body> tag. It is one of the most important tags in your page, as whatever you see in the page is inside the body tag.

Go ahead, and create your own html document looking at the code here (Click HTML folder in the left and then open learn_coding.html). You can use Notepad in Windows, TextEdit in MAC or SublimeText in both. After writing your first HTML code, you can save it in your Desktop so that you can easily find it and don’t forget to keep the .html suffix at the end of the file, or otherwise your default browser won’t be able to recognize it as an HTML file and can not open it automatically.

In my case, I am saving the sample by the name of learning_coding.html.

You should be able to see the following result.
Now from here, it will be a duplicate of effort if I continue explaining about HTML. There are very good resources that can help you better learn HTML further. One of my top recommended is Learn HTML from w3schools.com. If you prefer a more visual resource to learn HTML, you can take this course for free.

After you feel confident that you know HTML, here is a challenge for you. Can you design a page as in the picture below?

 

After you finished your coding, you can check my codes here (Click HTML folder in the left and then open gates.html). Compare your code with mine and let me know if yours was different or maybe better? 🙂

And hey, look at this page as well. What do you think? We will soon learn how to make pages like that. Excited?

Do you have questions? or stuck somewhere? ask me.