Learn HTML in simple steps

Learning a new Technology or Skill is a bit confusing at starting, emerging into where to begin and where to stop. It tends to be a troublesome procedure to go ahead. This post enable you to think about what to learn and in what manner, ideally making big things to smaller and tends you to learn things interestingly.

This is the most significant part of any learning procedure, once you've settled on the choice to expand your perspectives by learning a new skill you have crossed your first step of hurdle. Maybe you're a designer and hoping to move beyond paperwork and photoshop, perhaps you've already had nothing to do with the web, it doesn't make a difference. Presently you need to build web pages and with the assistance of the steps listed below you'll build HTML in a matter of moments.

Learning the Basics

Firstly you need to know what the HTML is. So according to the World Wide Web Consortium(W3C) "HTML is the Web’s core language for creating content for everyone to use anywhere."

That was a simple definition right? With HTML (HyperText Markup Language) you can create documents ready for publication on the web. Basically, HTML refers as the structure of the document. You can categorize the structure into Headings, Paragraphs, Sections etc.,

To start your first html file, you need a text editor. You can start with the general TextEdit on OS X, or Notepad on Windows. The following simple steps you can follow:

1. Take a New file

2. Type some text like "Hello World"

3. Save the file with any name say index.html(the .html extension is the most important as you are going to execute the file)

text-editor-1

Now to execute your code you need a web browser. There are many web browsers running in competion in the browser market like Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera and other. Your index.html file will execute almost in any of the browsers by default.

No matter which browser you are using, while you execute a .html file it realises to process the contents as HTML. Technically, you haven't written any HTML related code here its just a simple text, but the browser recognizes as that you are executing a .html file. You can take a look how browser regognized the content

web-browser-3

The debugging window is just to show you how the browser recognizes the .html file. So this is your first step into HTML. You now get to know what it is and what applications do you need to do.

Before going into further more concepts, it's important to get a couple of more fundamental standards. From the above example, you could have noticed that browser has added some extra code. Those are HTML tags, the building blocks of the HTML document. A "Tag" is a word highlighted between angle brackets.

There are opening and closing tags where the code in between these tags is executed. HTML is all about the "Tags" We use the html tag to start our document, then we finish off our document with an closing tag. And that's the first principle of HTML tag pairs.

The forward slash in the second tag denotes the closing tag. Every content placed inbetween the html tags is our HTML document.

The basic HTML structure contains Header, Sections and Footer. A header contains headings, menu and horizontal rules. Section contains paragraphs, anchors and spans. Footer contain lists which then contain links.

Follow Beginners Tutorials

After knowing the basic standards its time to move on to the actual HTML fundamentals. You can refer to tutorials which helps you lot in understanding from the beginning stage to the end. Without the knowledge of the subject, following the tutorials a newbie can achieve to a great extent. Coming to the html language, there are a lot of tags to build a HTML document you can learn all of them at one place w3schools. It helps you to learn and execute the code simultaneously.

Choose a Code Editor

The editing tool which you choose shouldn’t restrict you. Learning by practising is the great area where you can gain more knowledge. You have to choose the editor in such a way that having your HTML tags display in one color, your content in another, comments and the various other aspects of HTML markup in other colors.

You can also refer to the Codeplayground platforms which has live coding feature that helps you to build code easily by live preview the result. You can also refer to Webcodesnip where you can write lots of code and preview your result according to the structure of the code you build. Webcodesnip can also be consider as a helpful and useful platform to every developer or designer of any skill and especially engaging for individuals figuring out how to code.