Labels

HTML #1 - Introduction to HTML, HTML Tags, Basic Structure of HTML


Hello friends, welcome to the another tutorial of programming infinity. This tutorial is the beginning of the HTML Tutorial Series. In this tutorial, we will be introduced about the HTML. After reading this whole tutorial, we will pass the first level of learning HTML i.e. we will know the basic structure of HTML, its uses and more. So friends, let's begin..

HTML

HTML Stands for Hypertext Markup Language, and is a simple & easy programming language for developing a website i.e. Creating Web Pages. HTML is simply used to structure the website that is "markup" with tags and the browser uses it to show the web page as the structure is defined. The Hypertext refers to linking between web pages either internal/external. This is done with <a></a> elements. we will further knows about it. 
The total means that HTML is a programming language used to create web page structure and links them with hyperlinks, and the browser uses its structure for showing it in the display area (browser window).

Basic Structure of HTML -

The basic structure of HTML is :-

<!DOCTYPE html>
<html>
<head>
<title>
Sample HTML
</title>
</head>
<body>
<h1>
This is a Simple Page.
</h1>
</body>
</html>

Now let's know about the tags :-
  • <!DOCTYPE html> - This is used to define the version of HTML used in the code. above declaration is for HTML5. we will know about the declaration further.
  • <html> - This is the starting tag of the root element, which contains all the another markup within it. we can also understand it as a initializer for the web page.
  • <head> - This is the starting tag of the HEAD element in HTML, which contains all the meta-data elements, dependencies, title, description and advanced features code which gives uniqueness and more functions to the web page.
  • <title> - This is the starting tag of the TITLE element in HTML, which contains the title of the web page.
  • </title> - This is the ending tag of the TITLE element.
  • </head>  - This is the ending tag of the HEAD element.
  • <body> - This is the starting tag of the BODY element, which contains all the visible component like images, text, video, audio player and so on. It can also contains codes, which is used in the HEAD element like notifications, css designing and so on. These are only interpreted i.e. web browser uses it for defined function without showing it.
  • </body> - This is the ending tag of the BODY element.
  • </html> - This is the ending tag of the ROOT element.

HTML TAGS

HTML tags are used to represent HTML elements. Elements are the building blocks of HTML. we will know more about the elements further. 

<element>.....</element>

Here, we can notice that there is two tags of the same element. Out of them, on is called starting tag and another with forward slash "/" is called ending tag. In HTML, It is recommended to use closing tag properly otherwise the code will throw error. Still the page will display, the plus point of HTML, but with improper design. So don't forget to put closing tag. Some tags like <p> can be used without closing tag in HTML5, but It is recommended to close it, to raise any error.

SAMPLE WEB PAGE

The webpage is designed in the text editor, as Notepad, Notepad++ etc. For creating a web page, write every code in the text editor and while saving it save it with format ".htm" or ".html" and encoding "UTF-8", the default encoder/decoder for HTML, as shown in below image.

 1. Writing Code..


2. Saving Code...


3. Output of sample code in browser..


The title of the webpage, as in code, Sample HTML, is shown in browser title box, and the Heading is also shown.
So friends, that's all for today friend's, Hope you enjoyed this tutorial. If had any problem/Question, then ask me in comment box. Thanks..
Tags

Comments

Post a Comment