HTML Tutorial

A step by step approach to learn HTML through examples and videos..!!

In this tutorial we have divided into many sections in which we will explain basic concepts of HTML.

HTML Introduction:

  • HTML is Hyper Text Markup Language which is used to create web page and web applications.
  • HTML consists of elements which are the building blocks of WebPages.
  • HTML tags and elements is used to create the structure of Webpage like "headings", "paragraph", "body", "image", "links".
  • Browser will display only content it will not display tags and elements.

Now let us understand basics of HTML through an example step by step.

Step1: Open a notepad in your system and name it as "MyFirstPage.html" and save it in a folder.







Step2: Now in this example we will make an simple HTML document which renders a heading and paragraph into a webpage.

Write the below HTML code into your HTML file and save it.





Example Explanation: 


  • <!DOCTYPE html>- This tells the browser that I am an HTML document.
  • <html>- This is the root element of HTML Page as HTML follows tree like structure.
  • <body>- It consists of visible part of HTML Page whatever we write within this tag will be displayed on your browser.
  • <head>- It consists of meta information about any HTML page like <title>.
  • <title>- It gives your webpage a name when it is displayed on your browser.
  • <h1>- This is a heading tag which is used to define a name for any topic, section, article on your HTML Page.
  • <p>- This tag is used to define text or content for any heading or section in HTML Page.



Step3: Now your have understood concepts of Basic HTML Page it's time to render your page on Web Browser.

Go to your HTML Page in the folder where you have saved it just right click on it open your page in any Browser like Chrome or Mozilla.


Video Explanation of this HTML Introduction:



HTML Elements:

HTML elements are the building blocks of any HTML Page.

HTML elements consists of three parts <start tag>, visible content and <end tag>.

See Below Image:
Let us understand how HTML element works through an example.


Step1: Open the same HTML file  you have made and render it on your browser like you have done before in HTML Introduction example.

Step2: When you have rendered your Webpage open a Browser Developer tool by pressing f12 button on your keyboard.

Step3: When you press f12 button a new window will open at the bottom of your web browser.

In this window there are many tabs just click on Element tab if you are using chrome or click Inspector tab if you are using Mozilla.

Now you get this kind of view-


Step4: When you click on any element like in the above image I have clicked on body element the visible content will be highlighted but <tags> are not getting displayed on your Webpage.

Here you can also see that your body element contains <h1> and <p> elements so this is called nesting of elements. 


Video Explanation of this example:

 


Congratulations!! You have understood the concepts of Basic HTML and Elements now it's time to play with images.


 HTML Attributes:

HTML Attributes provides additional information about HTML elements.

HTML Attributes always used in name="value" pairs.

HTML Attributes embed in the starting tag of HTML element.

HTML Attributes are of many types like "src", "href", "title", "alt" etc. which we will explain in later sections.

Lets us understand HTML Attribute through example by using "src" attribute of <img> tag which is used to display images on our webpage.

Step1: Open notepad with the same HTML page you have created in HTML elements section.



Step2: Now we will modify this HTML page to display an image using "src" attribute.
For doing this just download an image from google and save it at the same location where you have saved your HTML page.

See Below how to download from google:


I have already downloaded an image so I will use that image you can use any image you want.
Step3: Now place your image in your HTML file just after the heading element.

In above HTML Page I have provided the name of an image in the "src" attribute so when we it will be rendered on the web browser then it with the help of this "src" attribute from your folder.

Hence this is how HTML  attribute works.

Step3: Now its time to render your image on the web browser, go to the folder where you have saved your HTML file and open it with any browser.

See Below Output:



Now you have understood how to use attributes with HTML elements through this example.

Video Explanation of this example:

 

  HTML Headings:

 HTML Headings are used to describe heading for a topic, section or article in a HTML document.

 HTML Headings can be used from <h1>.........<h6> where <h1> is most important and <h6> is least important.

 Let us understand how to use HTML Heading with a practical example.

 Video Explanation of Example:

 

HTML Paragraph: 

 HTML <p> element is used to define a paragraph.

 HTML Paragraph is generally used to describe any topic, section or article in a text format.

Let us understand with an example how HTML paragraph works on browser.

See the below video.

 HTML Styles:

HTML Styles are used to apply CSS in HTML elements.

HTML Style can be applied in many ways like "Background Color", "Text Format", "Fonts", "Text Size" etc.

Let us understand how to to apply CSS in different ways with the help of an example.

Video Explanation of this Explanation:

 

HTML Formatting: 

HTML defines special elements which is used to change format of any text.

Following are the elements which is used to change text format-

  • <b> - Bold text

  • <strong> - Important text

  • <i> - Italic text

  • <em> - Emphasized text

  • <mark> - Marked text

  • <small> - Small text

  • <del> - Deleted text

  • <ins> - Inserted text

  • <sub> - Subscript text

  • <sup> - Superscript text

  Video Explanation of this Example:

 

HTML Quotations: 

HTML elements are used to quote text in a any paragraph or section.

HTML have two quote elements <q> and <blockquote> where as <q> is used to quote small text within in a paragraph or <blockquote> is used to quote a full paragraph or block.

Video Explanation:


HTML Comments:

HTML comments is used add additional information in HTML code. 

Comments is scope to only HTML Page it is not display on Web Browser


Video Explanation:


HTML Colors:

HTML Colors is  a part of presentation layer of HTML it is used to highlight or color HTML elements.

Colors can be applied through CSS properties.

Video Explanation:


HTML CSS:

CSS is Cascading Style Sheets which define how  HTML elements present or display on browser.

CSS can be applied in three ways i.e. inline, internal, or external sheet.


Video Explanation:



HTML Links:

HTML Links is used to link HTML pages to each other.

Anchor tag <a> is used to define Links in HTML pages.


Video Explanation:


HTML Images:

HTML image tag is used to display image in Webpage and it is an inline element.

<img> tag with src attribute is used to render Image in HTML Page.


Video Explanation:


HTML Tables:

Tables are used to display data in HTML in a tabular structure.

<table>, <th>, <tr>, <td>  tags are used to display tables in HTML Page.

Video Explanation:


HTML Lists:


HTML Lists is used to display items in HTML Page.

Lists are of two types ordered list and un-ordered list.

Video Explanation:



HTML Blocks:

HTML elements are of two types block and  inline element.

Block element take full width available where as inline element take width with respect to their size.


Video Explanation:


HTML Classes:

HTML Classes is used to apply  styles and properties to more than one HTML element.

Dot(.) is used to define CSS class to more than one HTML element in internal or external style sheet.


Video Explanation:
For more updates please subscribe our blog and you tube channel...!!

#KeepLearning





Comments

  1. Anil IT Expert2 March 2021 at 19:15

    Nice article, Which you have shared about the html tutorial. Your article is very informative and useful for those who are looking for html tutorial in hindi.

    ReplyDelete

Post a Comment

Popular Posts

How to use Rasterize.js with PhantomJS?

Image
In the previous blogs we have explained you how to take screenshot of a web page with PhantomJS in a PNG format. In this blog we will teach you how to use Rasterize.js in PahntomJS  to capture  any Webpage/Render HTML in a PDF format. What is Rasterize.js? It is a Javascript API runs on PhantomJS Engine which capture any Webpage/Render HTML in PDF format.   Please follow the below steps to make a PDF Convertor on your machine:- Step 1 :  First download and configure PhantomJS in your machine with the help of my previous blog . Step 2 :  Now hopefully you have installed and checked  PhantomJS running in your system. Download Rasterize.js   by clicking this URL  or simply copy paste the updated script from below: " use strict " ; var page = require ( ' webpage ' ). create (), system = require ( ' system ' ), address, output, size, pageWidth, pageHeight; if ( system . args . length < 3 || system . a...
Keep reading

How to Crack any Government exam in 6 months?

Image
Do you want to  crack any govt exam? First of all if you are preparing for any govt exam then you need to know the importance of test series as compared to long term courses for any particular exam. Secondly why I am writing this blog  because I was running a coaching institute in 2016 and I have experienced many students who are hard working and also good in academics but they are not able to crack any govt exam. Reason behind  this is to be an intelligent and hard working is not sufficient for cracking any govt exam, this is an era of smart working so we need to figure out where we are actually lagging and need to work on our weak points. But the question is that how we can determine where we are lagging and why we are not selecting in any govt exam? Daily practice of test series is the best way to figure out weak points and deep analysis of all the unanswered/wrong/doubtful questions will give you idea about where you are lagging and you should work on t...
Keep reading

A brief Introduction of CSS Box Model

Image
In this blog I will explain you basic introduction of CSS Box Model...!! First we will discuss what is CSS? CSS stands for Cascading Style Sheets which acts as a presentation layer in any webApplication. CSS is used to add styles, design and how our elements will display on Screen or Broser Window. CSS Box Model? All HTML elements are rectangular in nature when it renders on webpage,so it has box like architechture which consists of padding, border and margin and visible content. "The content part of any HTML element is wraps around a box which is called as CSS Box Model." Here we will explain you different component of Box Model by example- We will use design of our previous blog i.e. How to make website in 10 easy steps? Please read the above blog to know the structure of a basic webpage which we will modify to demonstrate examples below: Now we will modify the HTML page which we have used in the above blog by inserting a <div> container in th...
Keep reading

Total Pageviews