HTML in Hindi : <pre> Tag

  • Introduction to html <pre> tag in Hindi
  • Syntax of html <pre> tag in Hindi
  • Example of html <pre> tag in Hindi

Introduction to HTML <pre> Tag

यदि आप चाहते है की web page में आपका text उसी प्रकार show हो जिस प्रकार आपने उसे लिखा है और उसमे किसी भी प्रकार का change भी ना आये तो इसके लिए HTML में <pre> tag provide किया गया है। 

HTML में <pre> tag का प्रयोग preformatted text को present करने के लिए किया जाता है। Preformatted text से तात्पर्य ऐसे text से है जो पहले से ही format किया जा चुका है और जिसे आगे format नहीं किया जाना चाहिए।

जब आप <pre> tag के द्वारा कोई text webpage में present करते है तो वह उसी format में show होता है जिस format में आपने उसे लिखा था। यानी की spaces और indentation आदि सभी settings change न होकर उसी रूप में show हो जाती है।

इस tag का सबसे प्रचलित प्रयोग आजकल किसी programming code को represent करने के लिए किया जाता है। इसके लिए इस tag को <code> के साथ प्रयोग किया जाता है।

जैसा की आप जानते है programming code को spaces और indentation द्वारा represent किया जाता है और केवल तब ही वह समझ में आता है। इसी कारण programming code को represent करने के लिए <pre> tag का प्रयोग किया जाता है। अब यह एक standard बन चूका है और सभी इसे follow करते है।

Syntax of HTML <pre> Tag

HTML <pre> tag का general syntax निचे दिया जा रहा है।

<pre>
Text here as you want it to appear in webpage…
</pre>

जैसा की आप ऊपर दिए गए syntax में देख सकते है <pre> tags के बीच आप text उस तरह लिखते है जिस तरह आप उसे web page में show करना चाहते है। उदाहरण के लिए यदि आप हर word के बाद double space देते है तो web page में भी वह उसी प्रकार show होगा।

<pre> tag के द्वारा programming code present करने के लिए निचे दिया गया syntax आप follow कर सकते है।

<pre>
<code>
Your programming code here…
</code>
</pre>

जब आप कोई programming code present कर रहे हो तो <code> tag को उपयोग करना आवश्यक है। <code> tag के माध्यम से ही interpreter को पता चलता है की एक programming code को present किया जा रहा है।

<pre> tag के माध्यम से आप programming code को सही structure प्रदान कर पाते है जिससे वह और भी readable हो जाता है।

Example of HTML <pre> Tag

HTML <pre> tag का उदाहरण निचे दिया जा रहा है। 

<html>
<head>
<title> HTML pre tag demo </title>
</head>
<body>

<pre>
<code>
#include<stdio.h>
#include<conio.h>

int main()
{
    printf(“Hello HTML!”);
    return 0;
}
</code>
</pre>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML in Hindi : <base> Tag

  • Introduction to HTML <base> tag in Hindi
  • Syntax of HTML <base> tag in Hindi
  • Attributes of HTML <base> tag in Hindi

Introduction to HTML <base> Tag

HTML <base> tag द्वारा किसी HTML document के सभी URLs के लिए base URL specify किया जाता है। इसके बाद आपको पूरा URL लिखने के लिए आवश्यकता नहीं होती है। जब भी आप कोई URL add करते है तो base URL उस URL से पहले automatically prefix कर दिया जाता है।

उदाहरण के लिए मान लीजिये आपकी images web-files directory में है जिसका address c:/documents/web-files है। जब भी आप कोई image add करेंगे तो आपको पूरा address define करना होगा। जैसा की निचे दिया जा रहा है।

<img src=”c:/documents/web-files/myImage.png”>

इसी प्रकार आप जितनी images add करेंगे उन सबके लिए भी आपको पूरा address specify करना होगा। लेकिन यदि आप web-files directory के address को base url के रूप में define कर दे तो आपको images को add करने के लिए पूरा URL लिखने की आवश्यकता नहीं होगी। जैसा की निचे दिया जा रहा है।

<img src=”myImage.png”>

Document में specify की गयी सभी links base URL से relative हो जाती है। Base url को page में सबसे ऊपर define किया जा सकता है और बाकी की links को आप short forms में use कर सकते है।

HTML <base> tag को use करके document में code को reduce किया जाता है। इससे code को समझने में आसानी भी होती है।

HTML <base> tag का मुख्य drawback यह है की एक बार इसे define करने के बाद आप bound हो जाते है क्योंकि सभी links के पहले यह automatically prefix हो जाता है। यदि आप किसी दूसरी location से कोई image या file add करना चाहे तो ऐसा करना सम्भव नहीं है।

<base> tag को HTML5 में भी include किया गया है। इसके द्वारा आप सभी URLs के लिए base URL define करते है और इसके अलावा आप सभी links के लिए target भी set कर सकते है।

Syntax of HTML <base> Tag

निचे <base> tag का general syntax दिया जा रहा है।

<base href=”base-url” target=”_blank”>

एक <base> tag में या तो href या target attribute define किया जाना आवश्यक होता है। <base> को बिना attribute के नहीं define किया जा सकता है।

HTML में <base> tag का कोई end tag नहीं होता है। यह एक empty tag है। लेकिन यदि आप इसे XHTML में use कर रहे है तो इसे </base> end tag द्वारा close किया जाना आवश्यक है।

<base> tag को पुरे document में एक ही बार define किया जाना चाहिए। इसे हमेशा <head> tag के अंदर ही define किया जाना चाहिए।

Attributes of HTML <base> Tag

<base> tag के साथ 2 attributes available है। इनके बारे में निचे बताया जा रहा है। 

  • href – इस attribute द्वारा base URL specify किया जाता है। URL को double quotes में लिखा जाता है। 
  • target – इस attribute द्वारा आप links का target define करते है। इस attribute की निचे दी गयी values define की जा सकती है। 
    • _blank – जब आप link को नयी window में open करना चाहते है तो target _blank define करते है। 
    • _self – जब आप link को current window में ही open करना चाहते है तो target _self define करते है। 
    • _parent – जब आप link को parent container में open करना चाहते है तो target _parent define करते है। 

HTML <base> tag global और event attributes को भी support करता है। 

Example of HTML <base> Tag

HTML <base> tag का उदाहरण निचे दिया जा रहा है। 

<!DOCTYPE html>
<html>

<head>
<title>HTML base tag Demo</title>
<base href=”c:/documents/web-files”>
</head>

<body>
<img src=”myImage.png”>
</body>

</html>

Previous: HTML <br> Tag

HTML in Hindi : <br> Tag

HTML <br> Tag

  • Introduction to HTML <br> tag in Hindi 
  • Syntax of HTML <br> tag in Hindi 
  • Attributes of HTML <br> tag in Hindi 

Introduction to HTML <br> Tag

HTML में <br> tag को किसी text या paragraph में line को break करने के लिए use किया जाता है। ये tag उन situations के लिए महत्वपूर्ण है जिनमें line break का महत्व होता है। उदाहरण के लिए कोई poem या address लिखते समय text line को break करने के लिए आप इस tag को use कर सकते है।

HTML <br> tag को lines या paragraphs के बीच gap बढ़ाने के लिए नहीं use किया जाना चाहिए। इसके लिए या तो आप अलग अलग paragraph tags use कर सकते है नहीं तो इसके लिए आपको CSS margin property को use करना चाहिए।

HTML5 में इसी tag का एक advanced version introduce किया गया है जिसे <wbr> tag के नाम से जाना जाता है। जँहा <br> tag के द्वारा text line को break किया जाता है वँही <wbr> tag द्वारा आप browser को suggest कर सकते है की यदि screen size कम हो तो text line को कँहा break किया जाना चाहिए।

<wbr> tag के बारे में विस्तृत जानकारी प्राप्त करने के लिए कृपया HTML5 <wbr> tag in Hindi tutorial पढ़े।

Syntax of HTML <br> Tag

HTML में <br> tag को define करने का general syntax निचे दिया जा रहा है। 
some-text <br> some-text

जैसे की आप ऊपर दिए गए syntax में देख सकते है <br> tag को text के बीच में define किया जाता है यह एक inline tag है। HTML में <br> tag का कोई end tag नहीं होता है। यह एक empty tag होता है।

XHTML में <br> tag को अलग प्रकार से define किया जाता है। इसका syntax निचे दिया जा रहा है।

some-text <br /> some-text

जैसा की आप ऊपर दिए गया syntax में देख सकते है XHTML में <br> tag को self closing tag के रूप में define किया जाता है। इसका मुख्य reason यह है की XML किसी भी tag को open रखना allow नहीं करती है। इसलिए जब भी आप XHTML में <br> tag का प्रयोग करेंगे तो इसे self closing tag के रूप में define करेंगे।

XHTML <br> tag का syntax HTML में भी allow है। इसलिए आपको XHTML का ही syntax use करना चाहिए क्योंकि यह दोनों में allow है और इससे confusion नहीं होता है।

Attributes of HTML <br> Tag

HTML <br> tag सभी global attributes जैसे की id, class आदि को support करता है।

Example of HTML <br> Tag

निचे HTML में <br> tag के use को निचे उदाहरण द्वारा समझाया जा रहा है। 
<!DOCTYPE html>
<html>
<head>
<title>HTML br tag Demo</title>
</head>

<body>
<p>Twinkle twinkle little star,<br>
How I wonder what you are<br>
Up above the world so high<br>Like a diamond in the sky</p>
</body>

</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML-br-tag-example-in-Hindi

HTML in Hindi : <!DOCTYPE>

HTML <!DOCTYPE> 

  • Introduction to HTML <!DOCTYPE> in Hindi
  • Syntax of HTML <!DOCTYPE> in Hindi 
  • Example of HTML <!DOCTYPE> in Hindi 

Introduction to HTML <!DOCTYPE>

HTML में <!DOCTYPE> कोई tag नहीं है। इसे document type declaration कहा जाता है। जैसा की आप इसके नाम से अंदाजा लगा सकते है, यह document के type के बारे में जानकारी provide करता है। यह जानकारी interpreter को webpage को बेहतर organize करने में मदद करती है।

एक <!DOCTYPE> declaration किसी HTML document में use किये गए HTML version की जानकारी interpreter को provide करता है। कई browsers पुराने HTML versions को support नहीं करते है इसलिए जब भी आप कोई HTML document create करते है तो उसमे <!DOCTYPE> declaration से interpreter को बताते है की आप HTML का कौनसा version use कर रहे है।

जब भी किसी HTML document को webpage के रूप में render किया जाता है तो सबसे पहले validators द्वारा यह check किया जाता है की HTML document valid है या नहीं। HTML के हर version को validate करने के लिए different validator use किया जाता है।

<!DOCTYPE> declaration से validator को पता चल जाता है की HTML document को किस HTML version से match करना है। यदि validators document को validate नहीं कर पाते है तो आपको webpage show नहीं होता है।

जब भी आप किसी HTML document में <!DOCTYPE> declare करे तो वह HTML document की सबसे first line होनी चाहिए।

Syntax of HTML <!DOCTYPE> 

HTML के हर version में <!DOCTYPE> को अलग प्रकार से declare किया जाता है। इनके बारे में निचे बताया जा रहा है।

HTML5 <!DOCTYPE> Declaration 

HTML5 में <!DOCTYPE> को बहुत ही simple बना दिया गया है।

<!DOCTYPE html>

HTML 4.01 <!DOCTYPE> Declaration 

HTML version 4.01 में <!DOCTYPE> को 3 modes (Transitional, Frameset, Strict) में define किया जाता है।

Transitional mode में HTML के सभी elements allowed होते है, लेकिन इस mode में frame-set allowed नहीं होते है।

<!DOCTYPE HTML PUBLIC “-//W3C DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

Frameset mode भी transitional mode की तरह ही होता है लेकिन इसमें framesets allowed होते है।

<!DOCTYPE HTML PUBLIC “-//W3C DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

Strict mode में HTML के presentational elements और framesets को छोड़कर बाकी सभी elements allowed होते है।

<!DOCTYPE HTML PUBLIC “-//W3C DTD HTML 4.01 //EN” “http://www.w3.org/TR/html4/strict.dtd”>

XHTML 1.0 <!DOCTYPE> Declaration 

HTML4 की ही तरह XHTML में भी <!DOCTYPE> 3 modes में declare किया जाता है। इन modes पर XHTML में भी वे ही rules apply होते है जो की HTML4 में होते है लेकिन इनका syntax different होता है। इन सभी modes के syntax निचे दिए जा रहे है। 

Transitional

<!DOCTYPE html PUBLIC “-//W3C// DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Frameset

<!DOCTYPE html PUBLIC “-W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Strict

<!DOCTYPE html PUBLIC “-W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Example of <!DOCTYPE>

HTML में <!DOCTYPE> के use का एक simple उदाहरण निचे दिया जा रहा है। 
<!DOCTYPE html>
<html>
<head>
<title>DOCTYPE Demo</title>
</head>
<body>
<h1>Example of HTML DOCTYPE</h1>
</body>
</html>
Previous: HTML <hr> Tag

HTML in Hindi : Headings

HTML Headings 

  • Introduction to HTML headings in Hindi 
  • Types of HTML headings in Hindi
  • Example of HTML headings in Hindi

Introduction to HTML Headings 

जब आप कोई paragraph लिखते है तो उससे पहले उसका shorter version heading के रूप में define करते है। Heading से reader को पता चल जाता है की आगे दिए जा रहे paragraph में किस विषय पर चर्चा की गयी है।

जब भी कोई reader किसी article को पढता है तो सबसे पहले वह एक बार सभी headings को देखता है और उसके बाद article को पढ़ना start करता है। ऐसा reader ये check करने के लिए करता है की जिस information को वह ढूँढ रहा है वह उस article में है या नहीं।

Headings define करके आप readers को अपने article का एक short version provide करते है जिससे reader उस article में provide की गयी information का अंदाजा लगा पाता है।

जब भी आप किसी text को heading के रूप में define करते है तो वह webpage में बड़ा और bold दिखाई पड़ता है। इससे webpage में headings normal text से अलग show होती है। लेकिन text को बड़ा और bold show करने के लिए आपको उसे heading के रूप में नहीं define करना चाहिए।

HTML में जब भी आप कोई heading define करते है तो automatically उसके पहले और बाद में space (line break) add हो जाता है। इससे headings को अलग से unique दिखने में मदद मिलती है और user का ध्यान जल्दी उन पर जाता है।

Search engines किसी article की headings को उस article को structure और index करने के लिए use करते है। इसलिए आपको अपने webpages में headings का प्रयोग अवश्य करना चाहिए।

Types of HTML Headings

HTML आपको 6 level की headings provide करती है। इनका प्रयोग क्रमशः topics और subtopics को define करने के लिया किया जाता है। इनकी list निचे दी जा रही है। 
  1. <h1> – यह सबसे महत्वपूर्ण heading tag होता है। यह article की main heading को define करने के लिए use किया जाता है। इसे आपको पुरे document में एक ही बार use करना चाहिए। Search engine crawlers इस tag से पता लगाते है की कोई article किस बारे में है। 
  2. <h2> – यह subheading tag होता है। इसके द्वारा आप subheadings define करते है। किसी बड़े section को आप इस tag द्वारा कई sections में divide कर सकते है। 
  3. <h3> – यह minor heading tag होता है। इस heading के द्वारा आप subtopics को भी कई minor topics में define करके represent कर सकते है। 
  4. <h4> – यह fourth level का heading tag होता है इससे आप और भी deep level पर content को sections में divide कर सकते है। 
  5. <h5> – यह fifth level heading tag होता है और इससे भी आप headings को define करते है। लेकिन इसे deep level पर content को define करने के लिए use किया जाता है। 
  6. <h6> – यह sixth level heading tag है इससे भी आप heading define कर सकते है। यह heading normal text के बहुत करीब होती है। इससे आप कई topics को list के रूप में present कर सकते है। 

Example of HTML Headings

निचे HTML में headings को use करने का simple उदाहरण निचे दिया जा रहा है। 

<!DOCTYPE html>
<html>
<head>
<title>HTML Headings Example</title>
</head>
<body>

<h1>This is main heading</h1>

<h2>This is subheading</h2>

<h3>This is minor heading</h3>

<h4>This is 4th level heading</h4>

<h5>This is 5th level heading</h5>

<h6>This is 6th level heading</h6>

</body>
</html>

ऊपर दिए गए उदाहरण में सभी headings को प्रयोग किया गया है। यह उदाहरण निचे दिया गया output generate करता है।

HTML-headings-example-in-Hindi
Previous: HTML Attributes

HTML in Hindi : First Webpage

Creating Your First Webpage

  • Writing your first HTML program in Hindi
  • Interpreting a HTML program in Hindi  

Writing Your First HTML Program

HTML में web pages create करना बहुत ही आसान है। जैसा की मैने आपको पहले बताया एक HTML program text और tags का combination होता है। इसलिए ये जरुरी है की यदि आपने अब तक HTML tags के बारे में नहीं पढ़ा है तो इस tutorial को आगे पढ़ने से पहले एक बार HTML tags के बारे में जरूर जान लें।

Tutorial के इस section में आप अपना पहला HTML program लिखना सीखेंगे। इसके बाद के section में आपको लिखे गए program को HTML webpage के रूप में run करना बताया जाएगा।

Choosing Text Editor For Writing HTML Program 

HTML के द्वारा web pages create करने के लिए आपको एक text editor की आवश्यकता होती है। इसके लिए आप कोई भी text editor use कर सकते है। कुछ popular text editors की list निचे दी जा रही है।

  • Notepad – यह text editor windows operating system द्वारा by default provide किया जाता है। इसे आप start menu से open कर सकते है। यह text editor बिलकुल simple है। लेकिन इसमें line numbers और code color जैसे features नहीं है। 
  • Notepad++ – यह text editor notepad-plus-plus.org website द्वारा provide किया गया है। यह notepad का advanced version माना जाता है। यह एक free source code editor है। इस editor में programming से संबधित कई useful features provide किये गए है। 
  • Sublime Text – Sublime text एक sophisticated text editor है। इस editor का user interface बहुत ही अच्छा है। ये text editor आपको IDE के equivalent features provide करता है। इसे आप sublimetext.com से download कर सकते है।  

Common Structure of HTML Program

सभी HTML file एक common structure को follow करती है। यह structure basic tags द्वारा form किया जाता है। हर HTML file में सभी basic tags को use करना अनिवार्य है। HTML का basic structure निचे बताया जा रहा है। 
<!DOCTYPE html>
<html>

<head>
<title>Title of your webpage</title>
</head>

<body>

Main content of your webpage here

</body>
</html>

हर HTML file की starting और ending <html> tag से होनी चाहिए। HTML tag के बाद <head> tag define किया जाता है। <head> tag के अंदर आप web page का title <title> tag द्वारा define करते है।

Webpage का title browser में menu बार के ऊपर show किया जाता है। <head> tag के बाद <body> tag define किया जाता है। <body> tag में webpage का मुख्य content लिखा जाता है।

A Simplest HTML Program 

निचे एक simple HTML program दिया गया है।

<!DOCTYPE html>
<html>
<head>

<title>My First Webpage</title>

</head>
<body>

<h1>My First Webpage</h1>

</body>
</html>

इस program में basic tags के आलावा <body> tag में सिर्फ <h1> tag add किया गया है। यह tag text को heading के रूप में show करता है। इस program को आप अपने text editor में लिख लीजिये।

Interpreting a HTML Program

किसी भी HTML program/code को webpage के रूप में देखने के लिए सबसे पहले आपको उसे .html extension के साथ save करना होता है। By default text editor में जब आप किसी file को save करते है तो वह .txt extension के साथ save होती है। इसलिए HTML file को save करते समय ही आपको उसके नाम के आगे .html extension लगाना होता है।

First-HTML-script-in-Hindi

Web browser interpreter उसी file को webpage के रूप में interprete करता है जिसका extension .html होता है। इस extension से interpreter को पता चल जाता है की file एक HTML file है। इसलिए HTML file को .html extension के साथ save करना अनिवार्य होता है।

Saving-HTML-document-in-Hindi

जैसे ही आप file को .html extension के साथ save करेंगे तो interpreter आपकी file को interpret कर देगा और आपकी file save की गयी location पर browser icon के साथ show होगी। Icon आपके computer में default browser का ही show होगा। इसका मतलब ये होता है की यह एक webpage है।

HTML-webpage-in-Hindi

जैसे ही आप इस file को open करेंगे तो HTML page आपको show हो जाएगा।

First-HTML-webpage-in-Hindi

यदि आपके code में कोई error है तो HTML page आपको show नहीं होगा। एक बात आपको ध्यान रखनी चाहिए की HTML में error reporting feature नहीं है। इसलिए यदि आपके code में कोई error है तो आपको उसे खुद ही ढूँढ कर ठीक करना होगा। 

Previous: HTML Tags
Next: HTML Attributes

HTML in Hindi : Tags

HTML Tags

  • Introduction to HTML tags in Hindi
  • Syntax of HTML tags in Hindi 
  • Types of HTML tags in Hindi

Introduction to HTML Tags

एक HTML file tags और text का combination होती है। HTML tags को HTML elements भी कहा जाता है। यदि आपको tags का concept समझ आ जाये तो आप HTML आसानी से समझ सकते है। क्योंकि HTML पूरी तरह tags के द्वारा ही कार्य करती है।

शुरआत में जब HTML को design किया गया तो इसे सिर्फ webpages में text को display करने के लिए use किया जाता था। उस समय HTML बहुत limited थी और इसमें कुछ ही tags थे। HTML tags द्वारा text को webpages में display करने की process को text को mark करना कहा जाता था। यही वजह थी की HTML को text markup language कहा गया।

उस समय HTML सिर्फ computer scientists द्वारा use की जाती थी जो अपने papers को HTML द्वारा world wide web पर publish करते थे ताकि दूसरे scientist उन्हें पढ़ सके। लेकिन HTML इतनी simple और effective थी की यह बहुत जल्दी popular हो गयी और बहुत से लोग इसे use करने लगे।

धीरे धीरे जैसे ही HTML popular हुई तो webpages में अलग अलग elements show करने की requirement बढ़ती गयी। अब HTML सिर्फ एक text markup language नहीं रही है। अब आप HTML के द्वारा webpages में कई प्रकार के elements जैसे की lists, tables images, audio, video, graphics आदि insert कर सकते है।

किसी भी webpage में elements (lists, tables, images, video आदि) HTML tags द्वारा ही insert किये जाते है। आप webpage में जो भी add करना चाहे वह tags द्वारा ही add किया जाएगा। इसके लिए HTML आपको बहुत से tags provide करती है। ये सभी tags interpreter से familiar होते है।

Interpreter एक program होता है जो सभी web browsers में होता है। यह program HTML tags को identify करता है और उनके मतलब को समझकर web page में उसी के अनुरूप text, images, list और tables आदि show करता है।

Basically tags से आप interpreter को ये बताते है की आप webpage में क्या display करना चाहते है। उदाहरण के लिए यदि आप webpage में image add करना चाहते है तो इसके लिए आप <img> tag अपनी HTML file में define करेंगे।

ज्यादातर HTML tags का purpose आप उनके नाम द्वारा ही समझ सकते है। उदाहरण के लिए <table> tag को webpage में table insert करने के लिए use किया जाता है। जैसे जैसे आप इन्हें use करना शुरू करते है तो आपको आसानी से याद रहता है की कोई particular tag किस लिए use किया जाता है।

Syntax of HTML Tags

आम तौर पर HTML tag के 3 part होते है। Opening tag शुरुआत में लगाया जाता है। इससे interpreter को ये पता चल जाता है की आप क्या करने वाले है। Opening tag के बाद वो text लिखा जाता है जिस पर ये tag apply हो रहा है। इसके बाद closing tag लिखा जाता है।

Closing tag से interpreter को पता चलता है की इस tag का उपयोग यँही तक था। Closing tag को opening tag से differentiate करने के लिए closing tag में forward slash लगाया जाता है।

HTML tags का general syntax निचे दिया जा रहा है। 

<tagName> text </tagName>  

सभी HTML tags ही closing tag द्वारा नहीं close किये जाते है। HTML में ऐसे tags भी है जिन्हें सिर्फ opening tag द्वारा ही define किया जाता है। ऐसे tags को empty tags कहा जाता है। इनका syntax निचे दिया जा रहा है।

<tagName>  

HTML में कुछ ऐसे tags भी है जिनके opening और closing दोनों parts एक ही part द्वारा define किये जाते है। इनमें पहले tag का नाम लिखा जाता है उसके बाद forward slash लगाया जाता है। इनका syntax निचे दिया जा रहा है।

<tagName />  

Types of HTML Tags

HTML में बहुत प्रकार के tags available है। कुछ tags text को format करने के लिए use किये जाते है तो कुछ multimedia elements जैसे की images, audio, video आदि insert करने के लिए use किये जाते है।

HTML के कुछ tags structures जैसे की tables, sections और lists आदि create करने के लिए use किये जाते है तो कुछ tags container की तरह भी काम करते है जिनके अंदर दूसरे tags को define किया जाता है जो उसके sub tags होते है।

HTML के सभी प्रकार के tags को कुछ मुख्य categories में divide करके निचे बताया जा रहा है। 

Basic Tags

Basic tags वे tags होते है जो सभी HTML documents में अनिवार्य रुप से use किये जाते है। ये tags किसी HTML document के core structure को define करते है। HTML के basic tags की list निचे दी जा रही है।

  • <html> – यह tag एक HTML file को define करता है। हर HTML file की शुरुआत इसी tag से की जाती है। 
  • <head> – इस tag में webpage से related scripts और styles define की जाती है। 
  • <title> – इस tag से web page का title define किया जाता है। 
  • <body> – इस tag में webpage का मुख्य content define किया जाता है। 

Formatting Tags

Formatting tags वे tags होते है जो text को format करने के लिए use किये जाते है। ये tags text पर ही apply होते है और text की presentation को control करते है। HTML के formatting tags की list निचे दी जा रही है।

  • <i> – इस tag द्वारा text को italic बनाया जाता है। 
  • <b> – इस tag द्वारा text को bold किया जाता है। 
  • <u> – इस tag से text को underline किया जाता है। 
  • <ins> – इस tag द्वारा ऐसे text को define किया जाता है जो content में बाद में add किया गया है। 
  • <mark> – इस tag द्वारा text को highlight किया जाता है। 
  • <sup> – इस tag से text को superscript के रूप में define किया जाता है। 
  • <sub> – इस tag से text को subscript के रूप में define किया जाता है। 
  • <small> – इस tag से small text के रूप में define किया जाता है। 
  • <del> – इस tag से text को deleted show किया जाता है। 
  • <strong> – इस tag से text को strong (bold) show किया जाता है। 

Form and Input Tags

form और input tags web page में forms create करने और user से input प्राप्त करने के लिए use किये जाते है। इनकी list निचे दी जा रही है। 
  • <form> – यह form elements create करने के लिए एक container tag होता है। 
  • <input> – इस tag द्वारा different form elements create किये जाते है। 
  • <textarea> – इस tag द्वारा textarea create किया जाता है। 
  • <button>  – इस tag द्वारा buttons create किये जाते है। 
  • <select> – यह dropdown list create करने के लिए container tag होता है। 
  • <optgroup> – इस tag द्वारा dropdown menu में related options का group create किया जाता है। 
  • <option> – इस tag द्वारा dropdown list के options define किये जाते है। 
  • <label> – यह tag एक text label define करने के लिए use किया जाता है। 
  • <fieldset> – इस tag के द्वारा किसी form में related elements का create किया जाता है। 

Frame Tags

Frame tags एक web page को frames के रूप में divide करने के लिए use किये जाते है। इन tags की list निचे दी जा रही है।

  • <frame> – यह tag frame elements के लिए container का कार्य करता है। 
  • <frameset> – इस tag द्वारा frames define किये जाते है। 
  • <noframes> – इस tag द्वारा उन browsers के लिए content define किया जाता है। जो forms को support नहीं करते है। 
  • <iframe> – इस tag द्वारा inline frames define किये जाते है। 

Image Tags

Image tags web page में images को include और render करने के लिए use किये जाते है। इनकी list निचे दी जा रही है। 
  • <img> – इस tag द्वारा webpage में image include की जाती है। 
  • <map> – इस tag द्वारा एक image map include किया जाता है। 
  • <area> – इस tag द्वारा map में किसी particular location को show किया जाता है। 

Link Tags

Link tags web page में links create करने के लिए use किये जाते है। Links एक page से दूसरे page तक travel करने के लिए use की जाती है। इनकी list निचे दी जा रही है। 
  • <a> – इस tag द्वारा webpage में link define की जाती है। 
  • <link> – इस tag द्वारा HTML file को CSS file से जोड़ा जाता है। 

List Tags

List tags webpage में lists create करने के लिए use किये जाते है। इनकी list निचे दी जा रही है। 
  • <ul> – यह tag unordered list के लिए container create करता है। 
  • <ol> – यह tag ordered list के लिए container create करता है। 
  • <li> – इस tag द्वारा list item define किये जाते है। 
  • <dl> – ये tag definition list के लिए container create करता है। 
  • <dt> –  इस tag द्वारा definition list की term define की जाती है। 
  • <dd> – इस tag द्वारा definition list की definition define की जाती है। 

Table Tags

Table tags webpages में tables create करने के लिए use किये जाते है। इनकी list निचे दी जा रही है। 
  • <table> – यह tag table create करने के लिए use किया जाता है। 
  • <th> – इस tag द्वारा table की heading define की जाती है। 
  • <tr> – इस tag द्वारा table की rows define की जाती है। 
  • <td> – इस tag द्वारा table के columns define किये जाते है।   
  • <thead> – यह tag table के header content का group create करता है। 
  • <tbody> – यह tag table के body content का group create करता है। 
  • <caption> – इस tag द्वारा table का शीर्षक define किया जाता है। 

Style Tags

Styles tags विभिन्न प्रकार की styles apply करने के लिए use किये जाते है। इनकी list निचे दी जा रही है। 
  • <style> – इस tag के अंदर HTML document के लिए styles (CSS) define की जाती है। 

Section Tags

Section tags किसी container की तरह काम करते है। इनकी list निचे दी जा रही है। 
  • <div> – यह tag एक block section create करता है। 
  • <span> – यह tag एक inline section create करता है। 
  • <section> – इस tag द्वारा document को कई sections में divide किया जाता है। 

Scripting Tags

Scripting tags web page में scripts apply करने के लिए use किये जाते है। इनकी list निचे दी जा रही है। 
  • <script> – इस tag के अंदर आप HTML के साथ use की जाने वाली script को define करते है। 
  • <noscript> – इस tag के अंदर ऐसे browsers के लिए content define करते है जिनमें script को disable कर दिया गया है। 

HTML in Hindi : <hr> Tag

HTML <hr> Tag

  • Introduction to HTML <hr> tag in Hindi 
  • Syntax of HTML <hr> tag in Hindi
  • Attributes of HTML <hr> tag in Hindi 

Introduction to HTML <hr> Tag

HTML में <hr> tag thematic break (विषय अंतराल) को दर्शाने के लिए use किया जाता है। यह tag एक horizontal line generate करता है जिसे अलग अलग विषयों को separate करने के लिए use किया जा सकता है। इसे HTML में horizontal rule भी कहा जाता है।

HTML5 में <hr> tag thematic break को define करता है और पुराने versions में यह horizontal rule (line) create करने के लिए use किया जाता था।

उदाहरण के लिए आप कोई story लिख रहे तो उस story में किसी दृश्य के बदलाव को आप <hr> tag द्वारा separate करके लिख सकते है। यदि आप कोई article लिख रहे है जिसमें आप अलग अलग विषयों पर अपने विचार दे रहे है तो उन विषयों को भी आप <hr> tag द्वारा separate कर सकते है।

हालाँकि <hr> tag HTML5 में भी horizontal line generate करता है लेकिन HTML5 में इसके अर्थ (separating content change) पर ज़ोर दिया गया है और पुराने versions में इस tag के presentation (drawing line) पर ज़ोर दिया गया था।

<hr> tag को <section> tag के साथ confuse नहीं किया जाना चाहिए। <hr> tag एक article के अलग अलग topics को separate करता है। जबकि <section> tag एक web page में अलग अलग sections define करने के लिए use किया जाता है।

Syntax of HTML <hr> Tag

<hr> tag का general syntax निचे दिया जा रहा है। 
<hr>

जैसा की आप ऊपर दिए गए syntax में देख सकते है <hr> tag का कोई end tag नहीं होता है। यह एक empty tag होता है। लेकिन यदि आप इसका प्रयोग XHTML में कर रहे है तो इसे आपको इस प्रकार close करना होता है।

<hr />

XHTML में आप opening tag में ही forward slash लगा देते है जो opening और ending दोनों ही tags को दर्शाता है।

Attributes of HTML <hr> Tag

<hr> tag के 4 element specific attributes है। लेकिन इन attributes को HTML5 में disable कर दिया गया है। 
  • align – इस attribute द्वारा आप <hr> tag का alignment set कर सकते है। इस attribute की left, centre और right तीन possible values हो सकती है। 
  • noshade – इस tag के द्वारा आप define कर सकते है की <hr> tag सिर्फ एक ही color में show हो और कोई shade ना use की जाए। इस attribute की value आप noshade ही define करते है। 
  • size – इस attribute द्वारा आप <hr> tag की height define कर सकते है। इसकी value आप pixels में define करते है। 
  • width – इस attribute द्वारा आप <hr> tag की width define करते है। इसकी value भी आप pixels में ही define करते है। 

<hr> tag सभी HTML versions में सभी global और event attributes को support करता है। 

Example of HTML <hr> Tag

<hr> tag का उदाहरण निचे दिया जा रहा है। 
<!DOCTYPE html>
<html>
<head>
<title>hr tag Demo</title>
</head>
<body>

<h1>hr tag Demo</h1>

<article>
This is first part of article and I am talking about fruits here.
<hr>
This is second part of article and I am talking about cars here.
<hr>
This is another part of article and I am talking about different topic here.
</article>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

Previous: HTML <menu> Tag

HTML in Hindi : <menu> Tag

HTML <menu> Tag

  • Introduction to HTML <menu> tag in Hindi
  • Syntax of HTML <menu> tag in Hindi
  • Attributes of HTML <menu> tag in Hindi

Introduction to HTML <menu> Tag

HTML <menu> tag HTML के पुराने versions में included था। लेकिन इसे बाद में HTML version 4.0.1 में exclude कर दिया गया था। अब इस tag को वापस HTML5 में redefine करके include किया गया है।

<menu> tag commands की list define करने के लिए use किया जाता है। उदाहरण के लिए आप web page में कोई image add करते है। आप चाहते है की जब कोई इस image पर right click करे तो default menu display ना हो और आपके द्वारा define की गयी commands की menu display हो तो इसके लिए आप HTML <menu> tag को use कर सकते है।

Commands की list में हर command एक specific task perform करती है। जैसे की जब आप windows operating system में desktop पर right click करते है तो आपको कुछ commands की list show होती है जो अलग अलग tasks perform करती है।

उसी प्रकार आप HTML elements के लिए भी commands की list create कर सकते है जो user को right click करने पर show होगी। <menu> tag के द्वारा context menus, popup menus, toolbars और form controls create किये जा सकते है।

जिस भी HTML element पर आप menu apply करना चाहते है उस element में आप contextmenu attribute define करते है और उसमे <menu> tag की id value के रूप में pass करते है।

HTML <menuitem> Tag

<menu> tag commands की list के लिए एक container का काम करता है। इसके अंदर हर command को <menuitem> द्वारा define किया जाता है। <menuitem> tag के label और icon दो मुख्य attributes होते है।

इनमें label attribute द्वारा command का display name define किया जाता है और icon attribute द्वारा command का icon define किया जाता है। Command का icon define करना अनिवार्य नहीं है। इस tag का general syntax निचे दिया जा रहा है।

<menuitem label=”command-name” icon=”icon-image-url” event-attribute=”action”></menuitem>

किसी command को click करने पर क्या action लिया जाएगा ये आप HTML event attributes द्वारा define करते है। उदाहरण के लिए आप onclick event attribute से define कर सकते है की command को click करने पर क्या action लिया जाएगा।

Syntax of HTML <menu> Tag

HTML <menu> tag का general syntax निचे दिया जा रहा है। 
<menu label=”” type=”” id=””>
<menuitem attributes…>
</menuitem>
</menu>

जैसा की आप ऊपर गए syntax में देख सकते है <menuitem> tag <menu> tag के अंदर define किया जाता है। इसे <menu> tag का sub tag भी कहा जा सकता है।

Attributes of HTML <menu> Tag

<menu> tag के साथ available attributes के बारे में निचे बताया जा रहा है। 
  • label – इस attribute द्वारा आप menu का एक display नाम define कर सकते है। इसे define करना अनिवार्य नहीं है। 
  • type – इस attribute द्वारा आप define करते है की आप किस प्रकार की menu show करना चाहते है। इस attribute की निचे दी गयी 3 possible values हो सकती है। 
    • list – जब आप commands की list create करना चाहते है। 
    • toolbar – जब आप एक toolbar create करना चाहते है। 
    • context – जब आप एक context menu create करना चाहते है। 
<menu> tag HTML के सभी global और event attributes को भी support करता है। 

Example 

<menu> tag का उदाहरण निचे दिया जा रहा है। 
<!DOCTYPE html>
<html>
<head>
<title>Menu Tag Demo</title>
</head>
<body>

<img src=”Best-Hindi-Tutorials-Logo.png” contextmenu=”myMenu”>

<menu type=”context” id=”myMenu”>
<menuitem label=”Reload” onclick=”window.location.reload();”>
</menuitem>
</menu>

</body>
</html>


ऊपर दिए गए उदाहरण एक image add की गयी है। इस image पर myMenu नाम की context menu apply की गयी है। इस menu में refresh command दी गयी है जो click करने पर image को reload करती है। यह उदाहरण निचे दिया गया output generate करता है।

यह tag अभी सिर्फ mozilla firefox web browser में ही work करता है। 

Previous: HTML <meta> Tag
Next: HTML <hr> Tag

HTML in Hindi : <address> Tag

HTML <address> Tag

  • Introduction to HTML <address> tag in Hindi
  • Syntax of HTML <address> tag in Hindi 
  • Attributes of HTML <address> tag in Hindi

Introduction to HTML <address> Tag

HTML <address> tag किसी document के author या owner की contact information define करने के लिए use किया जाता है। <address> tag को HTML3 में add किया गया था। HTML3 के बाद के सभी versions में यह tag available है। इसे HTML5 में भी include किया गया है।

कई बार web developers <address> tag के use को लेकर confuse हो जाते है। <address> tag को document के author से related contact information जैसे की author का email, mailing address और social media links आदि provide करने के लिए use किया जाना चाहिए।

<address> tag को पूरी website की contact information provide करने के लिए नहीं use किया जाना चाहिए। इसके लिए आपको <footer> tag use करना चाहिए। <address> tag को किसी organization का postal address provide करने के लिए नहीं use किया जाना चाहिए।

यदि आपकी website में कई authors publish करते है तो address tag को आप सभी authors के articles के साथ attach कर सकते है और उनकी contact information provide कर सकते है।

<address> tag readers के लिए बहुत ही उपयोगी होता है। <address> tag द्वारा provide की गयी information से readers उस article के author से आसानी से संपर्क कर सकते है।

हालाँकि author की contact information <p> या <span> tag से भी provide की जा सकती है। लेकिन SEO की दृष्टि से <address> tag को use किया जाना महत्वपूर्ण है। Search engines <address> tag को author ranking के लिए use करते है।

यदि कोई person उस author के बारे में search करता है तो search engines ये information knowledge graph द्वारा show कर सकते है।

HTML <address> tag द्वारा provide की गयी information web page में italic style में show होती है।

Syntax of HTML <address> Tag

निचे <address> का general syntax दिया जा रहा है। 
<address>
//author email address
//author mailing address
//author social media profile links
</address>
जैसा की आप ऊपर दिए गए syntax में देख सकते है <address> tag को closing tag द्वारा properly close किया जाना आवश्यक है। <address> tag में आप <span> <p> और <a> tags को आसानी से use कर सकते है।

Attributes of HTML <address> Tag

HTML <address> का कोई element specific attribute नहीं है। यह tag HTML के सभी global और event attributes को support करता है। 

Example 

<address> tag का उदाहरण निचे दिया जा रहा है। 
<!DOCTYPE html>
<html>
<head>
<title>HTML address Tag Demo</title>
</head>
<body>

<article>
This is an article. This article is written by an author. <br />
If you want to show the authors contact information
you can do it with HTML address tag. <br /> <br />

<address>
Best Hindi Tutorials – contact@besthinditutorials.com
</address>
</article>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
HTML-address-tag-example-in-Hindi