Apr 17, 2014

HTML5 TUTORIAL: Introduction To HTML.

HTML 5, being phenomenally penetrated in the market by the usage of the designers and developers, the acceptance is also at the same pace. The new and flexible features that can be enabled with easy coding, collects a good number of enthusiasts of HTML 5. Through this tutorial series, you can gain hands on experience with HTML 5 so that you can build websites  as a hobby and make a lucrative career in web designing in HTML 5.

Let’s start with the basics of HTML 5 and gradually get into the core , practicing the advanced concepts.

HTML 5 , being phenomenally penetrated in the market by the designers and developers, the acceptance also is in the same pace.
HTML or Hyper Text Markup Language, in simple terms is a computer language, through which we can create the web pages to build any website. When you see this code, you find more of angle brackets (<,>). The appearance and function of the web page can be easily and frequently changed by modifying this HTML code. You can add text, images, videos, background patterns, literally any digital content on your web page. This markup language is much easier than the computer programming languages. So, going through this blog regularly can make you an HTML programmer and you will be able to build your own website, using the advanced version of HTML 5.

We can write this code in a simple text editor or make use of existing enhanced editors like Notepad ++, Eclipse, BlueFish, Aloha, BllueGriffon, etc. After we write the code, we execute, run or read the code with the help of the browsers, like Internet Explorer, Google Chrome, Mozilla Firefox, Opera, etc.

Coming to the HTML code, the entire coding is written with its key components like tags, data types, attributes and necessary references. The rectangular area of the web page is considered and targeted as the standard space to publish the digital content in a meaningful and effective manner.

The entire web page is divided into basically two parts, header section and body section. The digital content is placed accordingly in the respective sections. The sub sections present in these sections are nested as you can see with separate and inner indents.

Writing and executing the code is easy and just needs a fewer steps:
1. First open the Notepad
2. Write the following code snippet in it.

<!DOCTYPE html>
<html>
   <head>
        <title>  Web Page Title  </title>
      <header>  This is a header </header>
</head>
<body>
<p> You can write the textual content in these paragraph tags </p>
</body>
</html>

3.     Save the notepad file with the extension of .html in a specific location. For example, save the file as sample.html.
4.    Now you can run or execute the file in two ways.
Go to the location, where the html file is saved and double click the html file.
The other way is to go to the browser and browse the html file from the location where it was saved.
5.     After the file is rendered or run, it will show the result of the html code. And you will    see the browser window with the result.


6.  If you want to go back and change the code in the Notepad file, go to its location, right click, open it as a Notepad.

Writing the code in HTML is as easy as this one. However, before starting the code, if you prepare and format the layout of the web page, it would be easier to code accordingly. There are many HTML editors developed, which make your task of coding easier, especially with the indentation. The resultant page of the code can be instantly shown in the same editor, as and when you modify the code. Special tool bars, syntax highlighting, auto-completion, templates and keyboard shortcuts will make you prefer the editors rather than our regular Notepad.

Going forward, you will frequently come across the words elements, tags, attributes and many more, which are the ingredients of HTML programs.

Next topic: What’s new in HTML5