HTML क्या है | What is HTML | HTML Tutorial in Hindi


Learn HTML in Hindi : इस HTML Tutorials की प्रथम पोस्ट मे हम HTML kya hai (क्या है) या What is HTML in Hindi के बारे जानेंगे। अगर आप Web Developer बनना चाहते है और किसी Website का निर्माण करना चाहते है तो कुछ Programing Language का Knowledge होना बहोत जरूरी है । अगर आप एक Complete Web Developer बनना चाहते है तो आप को तरह की Programming Languages सिखनी पड़ेगी | एक Front End Web Programming और दूसरा Server Side Programming । अगर आप Beginner है तो आपको सबसे पहले Front End Language से Start कर सकते है | 

html kya hai, what is html in hindi, html tutorial in hindi



Front End Web Development मे 3 Programming Languages का Use किया जाता है -

1. HTML
2. CSS
3. Java Script

Web page को बनाने के लिए HTML, उसे Style करने के लिए CSS और उसमे ज्यादा Functions को Use करने के लिए Java Script का Use किया जाता है | इसका मतलब ये है की CSS और Java Script दोनों HTML से Connected  Language है । और आपको एक Front End Web Developer बनने के लिए तीनों का ज्ञान होना बहोत आवश्यक है ।

What is HTML - HTML Tutorial in Hindi


इस tutorial मे हम HTML क्या है ( What is HTML in Hindi ), HTML का इतिहास क्या है, HTML कैसे कम करता है और HTML के All Codes की जानकारी के बारे मे विस्तार से जानेंगे।



HTML क्या है 


HTML का Full Form क्या है - Hyper Text Markup Language.

सरल भाषा मे समजे तो HTML एक standardised system है जिसका इस्तेमाल World Wide Web pages के Text, Graphics, Hyper links और Multimedia को Tag करने के लिए किया जाता है।

The definition of Hypertext Markup Language in Hindi :

जैसे हम इन्सानो को एक दूसरे को समजने के लिए एक language की जरूरत होती है, वैसे ही web browser को web page को display करने के लिए एक language की जरूरत होती है उस के लिए HTML का इस्तेमाल किया जाता है। आप हर दिन Internet का इस्तेमाल करते है, और कई web pages open करते है। उन सभी web pages का निर्माण HTML से किया जाता है। HTML बहोत ही सरल computer language है, जिसे सीखना बहोत आसान है। 

HTML का इस्तेमाल Text, Images, Forms, Table etc.. का इस्तेमाल करके एक complete web page बनाने के लिए किया जाता है। और उन web page को connect करने के लिए Hyper Links का इस्तेमाल किया जाता है। 

HTML का इतिहास 


आज की तारीख मे HTML का सबसे latest version है HTML 5.2. जिसे ज़्यादातर modern browser support करते है. लेकिन HTML की शरूआत सन. 1980 मे Tim Berners-Lee नाम के एक physicist की थी। उसके बाद सन. 1990 मे Mosaic browser जो NCSA द्वारा विकसित किया गया था उसके द्वारा उसे और भी आकर्षक बनाके आम जनता के लिए पेश किया गया था.

HTML सन.1990 के दशक में बेहद लोकप्रिय और प्रसिद्ध हो गया है जब इंटरनेट तेजी से विकास कर रहा था। इस अवधि के दौरान, HTML को विस्तृत किया गया था और विभिन्न संशोधनों में प्रस्तुत किया गया था। इंटरनेट दृढ़ता से विक्रेताओं और पेज निर्माता पर निर्भर करता है जो HTML के लिए संयुक्त सम्मेलनों को साझा करते हैं।       

अधिकांश उपयोगकर्ता और डेवलपर समझते हैं कि HTML दस्तावेज़ों को विभिन्न प्लेटफ़ॉर्म और ब्राउज़र पर उसी तरह काम करना चाहिए। एचटीएमएल की संगतता इसका मुख्य लाभ है और यह उन डेवलपर्स के लिए समय बचाती है जिन्हें विभिन्न उपयोगकर्ताओं के लिए दस्तावेज़ के कई संस्करण बनाने की ज़रूरत नहीं है। अन्यथा इंटरनेट इतनी आसानी से पहुंचने में सक्षम नहीं होगा और 'विकास की लड़ाई' वेब विकास के लिए एक गंभीर बाधा होगी।

यही वजह है की इतने सालों बाद भी HTML बहोत सरल है और Internet के विकास मे सबसे बड़ा भागीदार है । HTML के standard और versions को manage करने के काम World Wide Web Consortium ( W3C ) करती है.   

HTML Versions की जानकारी 


आज की date मे HTML के बहोत सारे version और sub version आ चुके है, अभी HTML 5 चल रहा है. HTML 1 से HTML 5 तक के सफर मे इसमे बहोत सारे बदलाव किए गए है और बहोत सारे elements जोड़े गए है। तो चलिये जानते है की HTML के हर version के साथ क्या क्या improvement किए गए है.

1. HTML 1.0 ( 1991 )

HTML 1.0 दुनिया के लिए HTML की पहली रिलीज थी। उस समय वेबसाइट निर्माण में बहुत से लोग शामिल नहीं थे, और भाषा बहुत सीमित थी। वेब पर कुछ सरल पाठ प्राप्त करने के साथ आप वास्तव में ऐसा नहीं कर सकते थे।

2. HTML 2.0 ( 1995 )

HTML 2.0 में मूल 1.0 विनिर्देशों से सबकुछ शामिल था लेकिन मिश्रण में कुछ नई विशेषताएं शामिल की गईं। HTML 2.0 जनवरी 1997 तक वेबसाइट डिजाइन के लिए मानक था और पहली बार कई मूल HTML सुविधाओं को परिभाषित किया गया था।

3. HTML 3.2 ( 1997 )

शोधकर्ताओं के गर्म तर्कों के बाद, उन्होने महसूस किया कि text attributes, जैसे background colour and texture, font size और font face, एचटीएमएल को अपनी जड़ें से व्यवस्थित करने, सजाने के लिए, साझा करने के लिए दस्तावेज़ों के रूप में दूर नहीं जा रहे थे; और IE और Netscape के बीच ब्राउज़र युद्धों के बीच, एचटीएमएल 3.2 (कोड नाम विल्बर) को मंजूरी दे दी गईै।

4. HTML 4.01 ( 1999 )

HTML 4 मे कुछ नए tags के साथ css ( cascading style sheet ) को पहली बार introduce किया गया था। HTML और css के एक साथ जुडने के कारण अब HTML पूरी तरह से modern language बन चुकी थी।

5. XHTML ( 2000 )

21 वीं शताब्दी की शुरुआत के करीब W3C ने अनुशंसा के रूप में XHTML 1.0 के अपने विनिर्देश जारी किए। 26 जनवरी 2000 से यह एचटीएमएल 4.01 के साथ संयुक्त मानक के रूप में खड़ा है। XHTML नए चश्मा काम करने के तरीके से प्रस्थान का प्रतीक है - यह HTML की पूरी तरह से नई शाखा है, जिसमें XML शामिल है, ताकि पाठक के ब्राउजर तक पहुंचने के बाद कोड को ठीक से लिखा जाना चाहिए। एक्सएचटीएमएल में कई नए या बहिष्कृत टैग और विशेषताओं नहीं थे, लेकिन कुछ चीजें बढ़ी हुई पहुंच और कार्यक्षमता के दृश्य के साथ बदल गईं। यह मुख्य रूप से कोडिंग नियमों का एक नया सेट है।

6. HTML5 ( 2014 )

Hypertext Markup Language revision 5 (HTML5) अब और भविष्य में वेब के लिए डिज़ाइन किया गया है। ये HTML का सबसे modern और latest version है। इसमे HTML के पुराने tags के साथ कुछ नए tags जोड़े गए है, जिससे web developing का काम और आसान हो सके। 

HTML कैसे कम करता है 


HTML के बहोत सारे tags एक साथ जोड़ करके एक वेब page बनता है। HTML बहुत से Tag प्रदान करता है जिसके साथ colours, font और graphics के Use से website को ज्यादा attractive बनाता है, HTML tag web browser को यह बताता है की उस tags में लिखे गये elements को website पर कैसे और कहाँ show किया जाये, HTML से सिर्फ एक Web page design किया जाता है HTML में web page का पूरा structure बनाया जाता है|

HTML के code लिखने के बाद उसको .html या .htm के extension के साथ save किया जाता है, और उसे आप किसी भी browser मे open कर सकते है। 

HTML के Features 


1. सीखने मे आसान - HTML सीखने मे बहोत सरल है। इसके tags और syntax एक दम clear होते है, जिसे आप आसानी से edit कर सकते है।

2. Web Workers - कुछ वेब application बड़े बड़े functions को perform करने के लिए भारी स्क्रिप्ट का उपयोग करते हैं। Web Workers इन scripts के लिए अलग background threads  का उपयोग करते हैं और यह किसी वेब पेज के performance को प्रभावित नहीं करता है। 

3. Videos And Audio - आप बिना किसी third party plugins या codec के video और audio को embed कर सकते हैं। video या audio को web page पर add करना एक image को add करने से बहोत आसान है।

4. Canvas - यह सुविधा एक वेब डेवलपर को फ्लाई पर ग्राफिक्स प्रस्तुत करने की अनुमति देती है। वीडियो के साथ, plug in कोई आवश्यकता नहीं है।

5. Application caches - वेब पेज विज़िटर के कंप्यूटर पर स्थानीय रूप से अधिक से अधिक जानकारी संग्रहीत करना शुरू कर देंगे। यह कुकीज़ की तरह काम करता है, लेकिन जहां कुकी छोटी होती है, नई सुविधा बहुत बड़ी फ़ाइलों के लिए अनुमति देती है। Google Gears इसका एक उत्कृष्ट उदाहरण है।

6. Geo location - HTML5 के इस feature के साथ web page पर भौगोलिक स्थान जानना आसान हो गया है।

HTML के ALL Tags की जानकारी 


<!--...--> - Comments लिखने के लिए।
<!DOCTYPE> - Document type बताने के लिए।
<a> - Hyperlink बनाने के लिए।
<abbr> - संक्षेप या संक्षिप्त नाम परिभाषित करता है।
<address> - दस्तावेज़ के लेखक / मालिक के लिए संपर्क जानकारी परिभाषित करता है।
<area>  - एक Image के अंदर एक क्षेत्र परिभाषित करता है।
<article> - लेख परिभाषित करता है।
<aside> - page के main content से दूसरे content को अलग करने के लिए।
<audio>  - ध्वनि सामग्री परिभाषित करता है।
<b> - bold text परिभाषित करता है।
<base> - दस्तावेज़ में सभी संबंधित URL के लिए आधार URL / लक्ष्य निर्दिष्ट करता है।
<bdi> - टेक्स्ट के एक हिस्से को अलग करता है जिसे इसके बाहर के अन्य पाठ से अलग दिशा में स्वरूपित किया जा सकता है।
<bdo> - current text direction को Overrides करता है।
<blockquote> -किसी अन्य स्रोत से लिए गए quotes को परिभाषित करता है।
<body> - दस्तावेज़ के body को परिभाषित करता है।
<br> - एक लाइन ब्रेक परिभाषित करता है।
<button> - Click able button परिभाषित करता है।
<canvas> - canvas tag का use graphics, on the fly, via scripting (usually Java Script) के लिए किया जाता है।
<caption> - table caption परिभाषित करता है।
<cite> - work के title को display करने के लिए।
<code> - computer code को परिभाषित करने के लिए।
<col> - <colgroup> element के हर column के लिए column properties को निर्दिष्ट करता है।
<colgroup> - table मे एक या उससे अधिक column groups के formatting को निर्दिष्ट करता है।
<data> - machine-readable अनुवाद के साथ दी गई सामग्री को लिंक करने के लिए।
<datalist> - input controls के लिए pre-defined options की list को Specifies करता है।
<dd> - description list में किसी शब्द का विवरण / मान परिभाषित करता है।
<del> - document के अंदर किसी text को delete किया गया है उसे दिखाने के लिए।
<details> - अतिरिक्त विवरण परिभाषित करता है जो उपयोगकर्ता देख या छिपा सकता है।
<dfn> - एक शब्द के परिभाषित उदाहरण का प्रतिनिधित्व करता है।
<dialog> dialogue box या window display करने के लिए।
<div>- document मे एक section बनाने के लिए।
<dl> - description list दिखने के लिए।
<dt> - Defines a term/name in a description list मे term/name display करने के लिए।
<em> - emphasised text उसे करने के लिए।
<embed> -page पर external (non-HTML) application को दिखाने के लिए।
<fieldset> - form मे Groups related elements के लिए।
<figcaption> - <figure> element के लिए caption दिखाने के लिए।
<figure> - self-contained content को प्रदशित करने के लिए।
<footer> - document या किसि section का footer दिखाने के लिए।
<form> - document मे form बनाने के लिए।
<h1> to <h6> - HTML headings उसे करने के लिए।
<head> - document का head section जहां पर document का meta data और अन्य info add कर सकते है।
<header> - document या किसि section का header दिखाने के लिए।
<hr> - content के अंदर thematic change करने के लिए।
<html> - HTML document है उसे specify करने के लिए।
<i> - <I> टैग वैकल्पिक आवाज या मूड में टेक्स्ट के एक भाग को परिभाषित करता है। <I> टैग की सामग्री आमतौर पर italic में प्रदर्शित होती है।
<iframe> -एक inline frame परिभाषित करता है।
<img> - एक image परिभाषित करता है।
<input> - user का input लेने के लिए।
<ins> -  <Ins> टैग किसी दस्तावेज़ में डाले गए पाठ को परिभाषित करता है।
<kbd> - keyboard input को display करने के लिए।
<label> - <input> element के लिए label दिखाने के लिए।
<legend> - <Legend> टैग <fieldset> element के लिए एक caption  परिभाषित करता है।
<li> - list item परिभाषित करता है।
<link> - document और external resource के बीच relationship परिभाषित करने के लिए ( ज़्यादातर style sheets को link करने के लिए )
<main> - document मे main content Specifies करने के लिए।
<map> - client-side image-map को परिभाषित करता है।
<mark> - marked/highlighted text को परिभाषित करता है।
<meta> - HTML document के विषय मे meta data परिभाषित करता है।
<meter> - known range (a gauge)  के भीतर एक scalar measurement को परिभाषित करता है
<nav> - navigation links को परिभाषित करता है।
<noscript> - अगर user का browser scripts को support नहीं करता तो alternate content display करने के लिए।
<object> - embedded object को परिभाषित करता है।
<ol> - ordered list  को परिभाषित करता है।
<optgroup> - drop-down list मे related options का group को परिभाषित करता है।
<option> - drop-down list मे option को परिभाषित करता है।
<output> - calculation के result  को परिभाषित करता है।
<p> - paragraph लिखने के लिए।
<param> - object के लिए parameter को परिभाषित करता है।
<picture> - multiple image resources के लिए container दिखाने के लिए।
<pre> - pre formatted text display करने के लिए।
<progress> - किसी task के लिए progress Represents करने के लिए।
<q> - short quotation  को परिभाषित करता है।
<rp> - परिभाषित करता है कि ब्राउज़र में क्या दिखाना है जो ruby annotations का समर्थन नहीं करते हैं।
<rt> - वर्णों का एक स्पष्टीकरण / उच्चारण परिभाषित करता है (पूर्वी एशियाई टाइपोग्राफी के लिए)
<ruby> - ruby annotation परिभाषित करता है (पूर्वी एशियाई टाइपोग्राफी के लिए)
<s> - वह that  परिभाषित करता है जो अब सही नहीं है।
<samp> - computer program से sample output परिभाषित करता है।
<script> - client-side script add करने के लिए।
<section> - document मे अलग section बनाने के लिए।
<select> - drop-down list बनाने के लिए।
<small> - smaller text लिखने के लिए।
<source> - media elements <video> और <audio> के लिए multiple media resources परिभाषित करने के लिए।
<span> - document मे अलग section बनाने के लिए।
<strong> - important text को परिभाषित करने के लिए।
<style> - document को style करने के लिए।
<sub> - sub scripted text को परिभाषित करने के लिए।
<summary> -  <details> element के लिए visible heading परिभाषित करने के लिए।
<sup> - super scripted text को परिभाषित करने के लिए।
<svg> - SVG graphics के लिए container बनाने के लिए।
<table> - table बनाने के लिए।
<tbody> - table मे body content का group बनाने के लिए।
<td> - table मे cell बनाने के लिए।
<template> - template को परिभाषित करने के लिए।
<textarea> - multiline input control लेने के लिए।
<tfoot> - table मे footer content का group बनाने के लिए।
<th> - table मे header cell बनने के लिए।
<thead> - table मे header content group बनाने के लिए।
<time> - date/time को display करने के लिए।
<title> -  document का title निर्धारित करने के लिए।
<tr> - table के लिए row बनाने के लिए।
<track> - media elements (<video> and <audio>) के लिए text track को define करने के लिए।
<u> - text को underline देने के लिए।
<ul> - unordered list बनाने के लिए।
<var> - variable को परिभाषित करने के लिए।
<video> - page मे video add करने के लिए।
<wbr> - एक संभावित line-break परिभाषित करता है

HTML Page का Example


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<img src="probloghindi.jpg" alt="probloghindi.jpg" width="500" height="360">
<button>Click me</button>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


</body>
</html>

ये है simple HTML web page का example. इसे आप किसी भी text editor मे .html या .htm के साथ save करके, browser मे open कर सकते है।

HTML क्या है | What is HTML | HTML Tutorial  in Hindi इस HTML tutorial के first page को पढ़ने के लिए आपका धन्यवाद। अगर आप हिन्दी मे programming सीखना चाहते है और daily नए tutorials और tips अपने email inbox मे पाना चाहते है तो हमारे ब्लॉग को subscribe करे।