Easy learning HTML 5 from basic

by Didin J. on Dec 03, 2016 Easy learning HTML 5 from basic

How to learn HTML 5 from basic? A simple, quick and fun way to learn website creation with today's standard HTML 5.

This is a tutorial of how to learn basic HTML 5 easily with examples of HTML 5 tags. This tutorial aims for everyone who is interesting in web programming or web design using HTML 5. Please read this article from top to bottom to get fully understanding.

What is HTML?

HTML stands for Hyper Text Markup Language. It a scripting language that readable by the browser (standard) or by another application like Microsoft Word. Basically, all web browser (Chrome, Firefox, Internet Explorer, Opera) convert HTML tags to screen as viewable. Let take a real example:

  1. Open your web browser (Chrome/Firefox/Opera/Safari/IE)
  2. Write address on address box at the top of browser and write e.g: www.google.com Easy Learning HTML 5 from Basic - Browser Address Box
  3. Click Enter from keyboard then look at the page, should be like this Easy learning HTML 5 from basic - Sample HTML Page
  4. Yes, you see simple google search with a textbox, search and feeling lucky button surrounded by few links only.
  5. Now, right click your mouse on blank area of page then click View Page Source Easy learning HTML 5 from basic - Right click the browser
  6. You will see the code behind this page which full of javascript codes, just take a look at <!doctype html> syntax at the top. It is an HTML code which defines starting point for another HTML code/syntax Easy learning HTML 5 from basic - HTML 5 Source codes

Please, ignore complicated code inside "<script>" tag because it's javascript code that we will cover it later in another tutorial.

Terms About HTML

From this stage we found few terms about HTML they are:

  • Web Browser is application for displaying web pages that accessing the internet on your Computer
  • Page Source is group of special characters for building a single web page
  • Syntax, another term for source code or group of word with special character defined
  • Tag, is term for single syntax that build a source like "<html>" or <script>

 

Understanding HTML Tag

After few introduction, we will show a simple HTML page that shows few text in the browser. Just copy and paste to your text editor and save as simpleexample.html (don't save as text file or .txt)

<!doctype html>
   <head>
      <title>
         Simple Single HTML Page
      </title>
   </head>
   <body>
      <h1>Simple Single HTML Page</h1>
      Simple Single HTML Page
   </body>
</html>

Right-click the file, then open by -> chrome or firefox. Then it will show text in the page. Easy learning HTML 5 from basic - Open HTML 5 File

Easy learning HTML 5 from basic - Sample HTML 5 page

Let me explain line by line.

<!doctype html>

This line is the core of HTML syntax, because this describes type of document or file. Every HTML page shoul starting with this line and ended with </html>. Every value of HTML must be surrounded by "<>" and "</>", in this case "<!doctype html>" and </html>".

<head>
  ...
</head> 

This line is the first part of HTML that contains a title (the text that shows on top/tab of browser), HTML configuration, tag and link to another javascript and stylesheet file.

<title>..</title>

This line is the title of the page that show on top of browser or browser tab.

<body>
  ...
</body>

This line is where main content put on the HTML page.

<h1>...</h1> 

This is header text inside of the content.

Another thing is text under "<h1>..</h1>" without any tag, it treats as standard text without style if we put inside body.

That's it, a simple easy learning HTML 5, especially HTML itself.

Thank you.

The following resources might be useful for you:

Loading…