https://kakablogs.com/

Learn HTML5 in an easy way.

What is HTML5:

HTML stands for HyperText Markup Language and 5 for its 5th and latest version. If you are deciding to become a web developer in 2020 you must have to learn HTML5 because it is the base language where the complete structure of a website is developed. Almost  99.99% of websites available on the internet uses HTML5. Some of the very famous websites are listed below which are using HTML5

  • Google.com
  • Facebook.com
  • Amazon.com
  • Alibaba.com
  • Ebay.com

 

————————————————————————————————————————————–

What we can create using HTML5:

By using HTML5 only we can create only simple static and basic looking websites with no animation, colors, user interactivity, and data saving. It can only defines the structure of a website like

  • Headings
  • Paragraps
  • Text formating (Bold, Italic, UnderLine etc.)
  • Tables
  • Forms
  • Line breaks
  • Adding Images

And much more. If you want to create some awesome looking websites with animations, colors, margin, paddings, user interactivity, saving data from users to the database and other stuff like that you must have to learn other web programming languages too like.

  • CSS3 for animation and styles of your web page.
  • JS, jQuery and AngularJS for user interactivity with and behaviors.
  • PHP and MySQL to make your website dynamic and to save data form users.

But before learning these languages you must have to learn HTML5 because all those languages and frameworks use HTML5 to work properly on a website because HTML5 is a base language and you can’t create anything without HTML5 in web development. Down below I have a comparison for you which explains how a website looks with and without other UI languages.

Facebook using HTML5 Only :

Fig.1.1

Facebook using HTML5 with some UI languages.

Fig.1.2

So form the above comparison you can feel the importance of other UI languages but believe me they are nothing without HTML5. We will learn them too but first HTML5 then others to learn everything in a simple and efficient way.

————————————————————————————————————————————–

Where we can Create / Edit and Save HTML5 Files:

Creating, Saving and Editing HTML5 files is really simple you can even use Notepad to create an HTML5 file. But the best way to write HTML5 code is by using an efficient Code Editor.  Some of the best code editors which are used personally and they work really good are listed below.

  1. Sublime Text
  2. Visual Studio Code
  3. Brackets
  4. Notepad ++
  5. Adobe Dreamweaver

All those Above listed code editor are very good. Few of them are free and very efficient for HTML5 and other web programming languages. I suggest you use the 2nd one VISUAL STUDIO CODE because it is fast, feature-rich, and there is a hell of extensions available of VS code which makes your web programming more easier and accurate.

————————————————————————————————————————————–

Tags in HTML5:

Tags in HTML5 are those elements that define the structure of a website means they guides the browser what to do and where to do. Tag starts with an angle bracket “<” then the “tagname” with a closing angle bracket “>” at the end of a tagname <tagname>. To close a tag we repeats the same procedure with a forward slash “/” between opening angle bracket and the tagname </tagname>  . Tags execute on the browser in a series, for example, the topmost tag executes first then the others. There are two types of tags in HTML5.

<tagname>Content Goes Here ..</tagname>

  1. Empty Tags
  2. Container Tags

Empty Tags:

Empty tags are those tags that start and closed at once and do not contain any information in between them. For Example

  • <br/> is used to add a linespace in between two element.
  • <img/> is used to insert image in a webpage
  • <input/> is used to make form fields like text field, password field, number field, and email field and more.
  • <hr/> is used to add a horizantal line in a webpage

In the above examples, you can see they all are started and closed at once and do not contain any information in between them.

Container Tags:

Container Tags are those tags that contain some information in between them. Their syntax (writing method) is similar to this.

<tagname>Content Goes Here ..</tagname>

As you can see in above example there is a content in between the tags which will be affected according to the tag we used. I’ve listed some examples down below for a clear vision.

  • <p></p> used to add paragraph to a webpage.
  • <div></div> is used to division of a section.
  • <section></section> is used to make diffrent sections in HTML5 like ABOUT US sections and a CONTACT US
  • Text Formating tags like <i></i>, <b></b>, <strong></strong>, <u></u> are used to formate text like
    • Bold
    • Italic
    • Under Line

————————————————————————————————————————————–

Creating Our First HTML5 webpage:

First of all CONGRATULATIONS! you just completed the basics of HTML5. Now we are going to make our first HTML5 document. I want all of you to pay very close attention and to be motivated because you just stepped in web developer and you have to learn a lot more stuff, but don’t worry I’m here to teach you, just be motivated you can learn anything thing.

So, first all we have download and install our code editor I’m using Visual Studio Code you can use any of your choices.

To download VS code open the following URL in your browser

https://code.visualstudio.com/

and click on the download button.

It will take some time to download depending on your internet connection. Install VS code by using a simple installation method. Just click next, next, next and you are done. When you complete your installation, open VS Code and uncheck this option.

So by unchecking this option, you will never see the welcome screen whenever you start VS code.

————————————————————————————————————————————–

Usefull Visual Studio Code Extensions For HTML5:

Now it’s time to install some useful extension to our VS code which will help us a lot in coding. To install extensions in visual studio code, click on the icon of the extension present in the left side menu.

I’ve Listed all of them, which you have to install, it will help  to code in HTML5 in smoother and easier way.

  • Live Server By Ritwick Dev ( Loads our HTML5 file on browser and reloads its automatically whenever you save your HTML5 file ).
  • Elm Emmet By Max Yyz ( Provide autocompletions for you HTML5 tags ).
  • Monokai++ By Davide Casella ( Beautifull theme to make coding fun ).

Install all these. Now we are going to make our first HTML5 file. Do a CTRL+N to make a new file and do CTRL+S to save that file, you can save it anywhere you want but don’t forget to add .html file extension at the end of your file name. Now its time to code type html:5 and press tab to load HTML5 file structure ( I’ll explain each and everything about HTML5 structure in the next article ).

You will see this code after following the above steps.

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

<title>Document</title>

</head>

<body>

 

</body>

</html>

 

Save the file whenever you make any changes to the HTML5 code to see the result in the browser. Now right-click in VS code and then click on Open with Live Server  

By this your file will be opened in web browser.

NOTE: Save your file in a folder and open that folder in our VS code otherwise live server will not work

When your folder is opened as a workspace it will look something like this

This type of webpage will open in your browser

Congratulations! you have created your fisrt HTML5 file. In next lecture we will learn about.

  • Explanation Everysingle element present in a HTML5 stucture.
  • Headings, Paragraphs, Line Breaks, Horizontal Dividers, Text formatting and Tables in HTML5.

————————————————————————————————————————————–

What we learn in this lecture:

  • What is HTML5.
  • How to Install Code editor.
  • How to install extension to VS Code.
  • How to use these extensions.
  • Create our first HTML5 file and run it in browser.

————————————————————————————————————————————–

Some Motivation:

We are HUMAN BEINGS and we can do anything we wish. We can’t fly but can develop tools that can help us to fly. Just we have to work hard and realize our self. I know this fell very difficult to learn web development in 2020 but trust me if you work hard to fulfill your dreams and keep struggling no one can beat you.

Thanks for reading my article. If you like my content and effort please like this post and share it with your friends.

And the most important thing don’t forget to subscribe to my newsletter so whenever I publish a new post you will get an email notification about that Thanks again. I’ll see you in the next lecture

Good bye.

Leave a Comment

Your email address will not be published. Required fields are marked *