HTML Tutorial in Hindi with Examples [2020] Exclusive Guide

इस HTML tutorial in Hindi में हम HTML की सभी जानकारी सीखेंगे।

HTML के इस tutorial में हम पढ़ेंगे HTML क्या है? इसके Advantages क्या हैं? HTML का Syntax? HTML के Examples? HTML के basic tags और elements? आदि।

इस tutorial से सीखने के बाद आप HTML का use करके विशिष्ट Web Pages और Websites बना सकतें हैं।

ऐसे ही और भी Hindi Tutorials आप हमारी वेबसाइट में पढ़ सकतें हैं।

चलिए HTML tutorial in Hindi को शुरू करते हैं –

अनुक्रम

What is HTML in Hindi?

HTML का पूरा नाम Hyper Text Markup Language होता है। इसका उपयोग web pages, web applications तथा website आदि बनाने में किया जाता है।

HTML एक बहुत ही लोकप्रिय web पर इस्तेमाल होने वाली language है। यह एक बहु-उपयोगी markup language है।

यदि हम केवल HTML का इस्तेमाल करके web page बनाते हैं तो हमारा static web page बन सकता है।

यदि हम अपने web page को dynamic और responsive बनाना चाहतें हैं तो हम HTML के साथ CSS और JavaScript को use कर सकतें हैं।

HTML एक programming language नहीं बल्कि एक Markup Language है।

HTML का full form ‘Hyper Text Markup Language’ होता है।
इसका use करके हम किसी web page का structure define(निर्धारित) करतेें हैं।
HTML में विशिष्ट Tags होते हैं जिनका use करके हम web page का structure तैयार करते हैं।
HTML की फाइल का extension .htm and .html होता है।

चलिए HTML tutorial in Hindi के अगले सेक्शन में हम HTML की history पढ़तें हैं।

HTML की History / History of HTML

HTML का विकास 1989 में Tim Berners-Lee नें अपने कुछ सहकर्मियों के साथ मिलकर किया था।

इसका सबसे latest version HTML 5 है।

HTML बहुत ही प्रसिद्ध Hyper Text Markup Language है। इसे लगभग सभी वेबसाइट बनाने के लिए उपयोग किया जाता है।

सबसे पहला HTML के रिलीज़ हुए document का नाम “HTML Tags” था।

Version History:

Year	Version History
1989	Tim Berners-Lee invented www
1991	Tim Berners-Lee invented HTML
1993	Dave Raggett drafted HTML+
1995	HTML Working Group defined HTML 2.0
1997	W3C Recommendation: HTML 3.2
1999	W3C Recommendation: HTML 4.01
2000	W3C Recommendation: XHTML 1.0
2008	WHATWG HTML5 First Public Draft
2012	WHATWG HTML5 Living Standard
2014	W3C Recommendation: HTML5
2016	W3C Candidate Recommendation: HTML 5.1
2017	W3C Recommendation: HTML5.1 2nd Edition
2017	W3C Recommendation: HTML5.2

Source: W3schools.com

HTML कैसे चलायें / HTML के tools?

HTML को use करने के लिए हमें इसे डाउनलोड नहीं करना पड़ता है। इसे हम Free में इस्तेमाल करके अपनी website बना सकतें हैं।

हमें HTML को इस्तेमाल करने के लिए बहुत ही basic tools की जरूरत पड़ती है जो सभी computers में होतें ही है।

HTML के लिए हमें निम्नलिखित tools की जरूरत पड़ती है:

Editor (HTML का code लिखने के लिए)
Browser (HTML का code run करने के लिए)

आप HTML को किसी भी text editor में लिख सकतें हैं। आप इसके लिए Notepad, TextPad, Notedpad++ आदि कोई भी टेक्स्ट एडिटर इस्तेमाल कर सकतें हैं।

आपको HTML का code लिखने के बाद उस फाइल को .html या .htm extension के साथ save करना पड़ता है।

HTML को run करने के लिए आपको उस फाइल को किसी web browser में open करना पड़ता है। जिससे बाद आपको उस browser में output दिख जाता है।

आप HTML को chrome, internet explorer, Mozilla आदि किसी भी वेब ब्राउज़र में run कर सकतें हैं।

Document Structure of HTML

चलिये अब इस HTML tutorial in Hindi में हम HTML के document structure को एक simple example लेकर समझेंगे।

सबसे पहले हम HTML का use करके एक simple web page बनाते हैं।

इस page में हम title, एक heading, एक paragraph, एक button add करेंगे और फिर इसे web browser में run करके इसका output देखेंगे:

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <p>I love HTML!</p>
        <input type="button" value="Button"/>
    </body>
</html>

अब आप इस फाइल को .html के extension के साथ save कर लीजिये और किसी web browser में open कर लीजिये।

Output:

अब हम इस example की मदद से HTML के document structure को समझेंगे।

<!DOCTYPE html> से हम यह declare करते हैं कि यह document हमारा HTML 5 का document है।
<html> हमारा root element है जिसके अंदर ही हम सारा HTML का code लिखतें हैं।
<head> element में हम अपने HTML page की meta information लिखतें हैं। इसे हम और detail में आगे के सेक्शन में पढ़ेंगे।
<title> में हम HTML page के title को निर्धारित करते हैं। आप ऊपर वाली output image में देख सकतें हैं।
<body> में हमारा HTML पेज की पूरी body होती हैं। हम web page के सभी elements, जो की पेज में दिखाई देतें हैं, उन्हें body में ही डालते हैं।
<h1> हमारा heading element होता है इसमें हम Heading 1 declare करते हैं।
<p> हमारा paragraph का element होता है।
<input> element में हम input provide करने वाले elements को डालते हैं जैसे कि text field, button आदि।

अगर आपको HTML tutorial in Hindi में कुछ डाउट है तो नीचे कमेंट में पूछ सकतें हैं।

HTML Tags with Complete List

HTML के tutorial में सबसे ज्यादा जरूरी हैं HTML के tags और elements क्यूंकि यह HTML के building blocks हैं।

HTML में बहुत सारे tags हैं जो कि html के तमाम elements बनाने के लिए use किये जातें हैं।

Html के tag का structure कुछ ऐसा होता है –

Start tag: <tagname>

End tag: </tagname>

HTML के अधिकतर tags में end tag भी होता है मगर कुछ ऐसे भी टैग्स होते हैं जिनमे end tag की जरूरत नहीं पड़ती हैं।

जैसे कि: <br>, <hr>

<br> tag का इस्तेमाल हम line break करने के लिए करते हैं यानी की नयी लाइन लाने के लिए। इसमें end tag की जरूरत नहीं पड़ती।

<hr> tag का इस्तेमाल हम horizontal line डालने के लिए करते हैं। इससे हमारे पेज में क्षैतिज रेखा बन जाती है।

बाकी ज्यादातर सभी HTML tags में हमें end tag की जरूरत पड़ती ही है। जिनमे से मुख्य निम्नलिखित हैं:

<p> tag हमारा paragraph element के लिए use होता है। इसमें हम ending tag </p> की जरूरत पड़ती है।

<h1>,<h2>,<h3>...<h6> हमारे heading tags होते हैं जिनमे से h1 टैग सबसे बड़ी heading और h6 टैग सबसे छोटी heading बनता है।

<input> tag का इस्तेमाल हम input elements के लिए करते हैं। इसमें हमें </input> tag की जरूरत होती हैं।

<a> यह tag हमारे page में link बनाने के लिए use होता है। इसे हम इसी tutorial के आगे सेक्शन में detail में पढ़ेंगे।

HTML tags Cheat Sheet

इस HTML की cheat sheet में हम सभी HTML tags को देखेंगे। जब आपको HTML का कोई page बनाना हो तो इसमें से आप देख सकतें हैं कौन सा tag use करना है।

HTML tags की complete list:

Tag Name	Description
<a>	Hyperlink बनाने के लिए use किया जाता है।
<abbr>	किसी बड़े word का संक्षिप्त रूप निर्धारित करता है।
<acronym>	acronym के लिए use होता है।
<address>	author की contact information बताने के लिए use होता है।
<area>	किसी image map का area दर्शाता है।
<article>	article निर्धारित करता है।
<aside>	ऐसा कंटेंट दर्शाता है जो की पेज से कम सम्बंधित होता है।
<audio>	sound या audio को document में जोड़ता है।
<b>	टेक्स्ट को Bold में दिखाता है।
<base>	base url को define करता है।
<big>	Text को बड़ा साइज करने के लिए use होता है।
<blockquote>	Long quotation डालने के लिए use होता है।
<body>	Document की body.
<br>	लाइन ब्रेक इन्सर्ट करता है।
<button>	button बनाने के लिए use होता है।
<caption>	Table का title.
<code>	document में code डालने के लिए use होता है।
<del>	Deleted text को दिखाने के लिए use होता है।
<dfn>	definition को specify करता है।
<div>	document के एक division को दर्शाता है।
<dl>	definition list को दर्शाता है।
<dt>	Definition list में term को दर्शाता है।
<em>	emphasized text के लिए use होता है।
<embed>	Embed करने के लिए use होता है।
<footer>	Footer के लिए use होता है।
<form>	HTML form के लिए use होता है।
<frame>	Defines a single frame within a frameset.
<h1> to <h6>	HTML headings के लिए use होता है।
<head>	Document के head सेक्शन के लिए use होता है।
<header>	header of a document के लिए use होता है।
<hgroup>	group of headings के लिए use होता है।
<hr>	horizontal line के लिए use होता है।
<html>	यह HTML का root element होता। है
<i>	Text को italic style में दिखाने के लिए use होता है।
<iframe>	inline frame के लिए use होता है।
<img>	inline image के लिए use होता है।
<input>	input control के लिए use होता है।
<label>	<input> के लिए label प्रोवाइड करता है।
<li>	List Item के लिए use होता है।
<map>	Image map बनाने के लिए use होता है।
<menu>	List of commands के लिए use होता है।
<meta>	Metadata के लिए use होता है।
<nav>	Navigation links का सेक्शन बनाने के लिए use होता है।
<object>	Embedded object के लिए use होता है।
<ol>	Ordered list बनाने के लिए use होता है।
<option>	selection list में option डालने के लिए use होता है।
<output>	calculation का result दिखाने के लिए use होता है।
<p>	paragraph बनाने के लिए use होता है।
<pre>	Preformatted text का ब्लॉक बनाने के लिए use होता है।
<progress>	किसी task की completion progress दर्शाता है।
<q>	Short inline quotation के लिए use किया जाता है।
<rp>	जो ब्राउज़र ruby annotation को support नहीं करते उनके लिए fallback parenthesis प्रोवाइड करता है।
<rt>	किसी ruby annotation के character का pronunciation दर्शाता है।
<ruby>	Ruby annotation दर्शाता है।
<s>	[अप्रचलित/Obsolete] इसे किसी text को strike-through बनाने के लिए use किया जाता है। जैसे कि: ~~Hello~~
<samp>	किसी text को sample output बनाने के काम आता है।
<script>	script डालने के काम आता है।
<section>	किसी document के सेक्शन बनाने के काम आता है जैसे कि: header, footer आदि।
<select>	किसी form के अंदर की selection list बनाने के काम आता है।
<small>	किसी text को छोटा बनाने के लिए use किया जाता है।
<source>	इससे हम किसी media element का alternative <audio> या <video> element निर्धारित करते हैं।
<span>	इससे हम style-less inline सेक्शन बनाते हैं।
<strike>	[अप्रचलित/Obsolete] text को strike-through बनाने के लिए use किया जाता है जैसे कि: ~~Example~~
<strong>	इससे हम text को Bold बनाते हैं।
<style>	CSS और Style elements डालने के लिए use होता है।
<sub>	Subscripted text डालने के लिए use होता है।
<summary>	<details> element की summary/सारांश डालने के लिए use होता है।
<sup>	Superscripted text डालने के लिए use होता है।
<table>	Table create करने के लिए use होता है।
<tbody>	table का main content डालने के लिए use होता है।
<td>	Table की cell को निर्धारित करने के लिए use होता है।
<textarea>	Text area बनाने के लिए use किया जाता है।
<tfoot>	इसके अंदर हम rows बनाकर column के footers बनाते हैं।
<th>	Table की header cell बनाने के लिए use होता है।
<thead>	इसके अंदर हम rows बनाकर column के labels बनाते हैं।
<time>	Date व् time को दिखाने के लिए use होता है।
<title>	Document का title सेट करने के लिए use होता है।
<tr>	Table की row बनाने के लिए use होता है।
<tt>	Text को teletype रूप में दिखाने के लिए use होता है।
<u>	[अप्रचलित/Obsolete] किसी text में underline लगाने के लिए use होता है।
<ul>	unordered list बनाने के लिए use होता है।
<var>	variable को declare करने के लिए use होता है।
<video>	HTML में video जोड़ने के लिए इस्तेमाल होता है।
<wbr>	यह दर्शाता है कि यहाँ line break का अवसर है।

Image format में Html Tags की complete list/cheat sheet:

HTML tutorial in Hindi के अगले सेक्शन में हम HTML के elements देखेंगे जो कि बहुत important हैं।

HTML Elements

HTML के element tags से मिलकर बनते हैं।

HTML का element का मतलब होता है – Html Tag + Content.

<tagname> Content </tagname>

एक HTML element start tag से शुरू होता है और end tag पर ख़त्म होता है।

HTML के कुछ elements में न ही end tag और न ही content की जरूरत होती है जैसे कि: <br>, <hr > आदि।

निष्कर्ष: HTML Tutorial in Hindi

HTML tutorial in Hindi के इस पोस्ट में हमने HTML के elements, tags, examples आदि पढ़े।

HTML एक Markup language है जिसका use वेब पेज बनाने के लिए किया जाता है। इससे हम static website बना सकतें है और यदि हम इसे CSS और JavaScript के साथ use करें तो हम dynamic website भी बना सकतें है।

अगर आपको इस HTML tutorial in Hindi में कोई डाउट है तो नीचे कमेंट बॉक्स में जरूर पूछें।

HTML Tutorial in Hindi with Examples [2020] Exclusive Guide

What is HTML in Hindi?

HTML की History / History of HTML

HTML कैसे चलायें / HTML के tools?

Document Structure of HTML

HTML Tags with Complete List

HTML tags Cheat Sheet

HTML Elements

निष्कर्ष: HTML Tutorial in Hindi

Stay Connected

Must Read

Related News

LEAVE A REPLY Cancel reply

Stay connected

कोरोनावायरस

ताज़ा

लोकप्रिय