Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!
राजस्थान के संग्रहालय by Innoza IT Center Udaipur
राजस्थान के संग्रहालय | Rajasthan GK
July 4, 2017
Tekken 3 Game For PC – Download Free by Innoza
Tekken 3 Game For PC – Download Free | Innoza
July 14, 2017

How To Use HTML in Hindi | Innoza

How To Use HTML by Innoza IT Center Udaipur

 What is html..? 

Html (hyper text markup language ) है।  यह वेब पेज बनाने के काम आती है।  कोई भी programming language सिकवेनस में काम करती है।  ऐसा html में नहीं होता है।  यदि किसी फाइल  में html लिंक है। और यूजर उसे press करेगा तो वो execute हो जायगी।  Html में इस बात से कोई फर्क नहीं पड़ता की पहले कितने एलिमेंट  लोड किये गये है।   इसमे text जों होता है। वो वेब पेज को represent करता है, और मार्कअप का मतलब होता है की text को आप अलग अलग tag के माध्यम से वेब पेज पर किस तरह दिखाना चाहते हो ।

HTML version : HTML के बहुत से version industries में आ चुके है।  पर सबसे लेटेस्ट version html ५.० है।   इसमे कुछ नये tag provide किये हुए है।  जों multimedia support के लिए काम आते है।

HTML tags :  जब आप वेब पेज disighn कर रहे होते है तो एक html file tags और text का combination है। यदि आपको tags का मतलब समझ में आ जाता है।  तो आप जल्द ही html को समझ लेगे।

tag को २ भागो मे divide किया है:

  • opening tag
  • closing tag

और ये आपको ये बताता है की आप text के साथ क्या करने वाले है।

Tag : यहाँ पर कुछ tag के बारे में बताया जा रहा है जों आप html file मे उसे करेंगे।

opening tag                           closing tag

<tag name>      text             </tag name>

 

  1. HTML (<html> ,</html>)  –  कोई भी html file बनाते है, तो उसकी शुरआत इसी tag के साथ की जाती है, और बाकी सभी tags इस tag के अन्दर आते है।   इस tag की closing सबसे last में define की जाती है।
  2. HEAD tag – डॉक्यूमेंट की information इसी tag में होती है।  ये tag हमेशा html tag के अंदर आता है।
  3. Title : वेब पेज का title display कराने के लिए इसी tag का use किया जाता है .
  4. :BODY  : body tag में वो text आते है. जों वेब पेज पर display कराने के काम आते है.

एक simple html program

<html>

<head>

<title>  Hello  Udaipur </title>

</head>

<body> Udaipur Is Beautiful City .</body>

</html>

  1. <p> ,</p> – यह एक पेरेग्राफ tag है, आप अपने वेब पेज में जों भी लिखते हो वो इस tag में आता है।  आप अलग अलग attribute के माध्यम से उनकी पोजीशन और उनकी formatting को इस tag के attribute के माध्यम से उसे सेट कर सकते हो।
  2. <br> ये लाइन को ब्रेक करने के काम आता है।

 

HTML attributes क्या होता है.  :-  Attributes के माध्यम से आप tags को अपने तरीके से सेट कर सकते ह। सभी html tags के  attributes होते है। Attributes हमेशा नाम और वैल्यू  pair में लिखा जाता है।

जैसे :

<tag name attributes name = “value”>  some text here </tag name >

Attributes को use करना बहुत ही आसन होता है,  आपको पता होना बहुत ही आवश्यक होता है की कोनसा attribute किस जगह उपयोग होता है।

Scope of attributes : Attributes का काम उनके tags के आधार पर है। Tags के साथ आप जों attribute apply करना चाहते है। वो उसी tag तक सिमित रहता है।

जैसेः  की आप body tag में style tag का उपयोग करते हुए font size 60px define करते हो,  तो वो पूरे पेज में font size को 60px  कर देता है, क्योंकि body tag तो पूरे पेज के लिए होता है।

लेकिन आप किसी विशेष लाइन और पेरेग्राफ की size को increase और decrease करना चाहते हो तो body tag से छोटा tag text को दूसरी font-size में define नहीं करेगा।

  • Html formatting & style :

HTML text formatting : html में कुछ tags सिर्फ text की formatting के लिए होते है, क्योंकि जब आप एक वेब पेज को design कर रहे होते हो तो आप उस पेज को आकर्षित बनाने के लिए इन tags का use करते हो।  html में आप इनका उपयोग tags के माध्यम से ही कर सकते हो, की आप text पर किस तरह की formatting apply करना चाहते हो।

bold ,italic,underline,superscript

इसमे में भी हर एक tag की opening और closing होती है।

यदि आप किसी भी text को bold करना चाहते हो तो आप इस तरह से <b> some text here </b>  लिखते हो और उसे execute करते हो तो आपका text bold हो जाता है।

italic के लिए tag <i> some text here>

underline के लिए tag <u> some text here </u>

superscript के लिए tag <sup> text here </sup>

Style for text here :

आप वेब पेज में जों text लिखते हो  उसे स्टाइलिश बनाने या फिर और भी आकर्षित दिखाना चाहते हो तो आप style attribute का use करते हो। style attribute में आप text का color और font size को बदल सकते हो। आप जों कुछ भी text के साथ करने वाले हो पहले आप उसकी property और बाद में उसकी value को insert करते हो।

  • text color: मान लीजिये की आपने जिस भी tag में text लिखा हो और आप उसका color बदलना चाहते हो, तो आप color की property को use करना और उसके बाद कोलम (:) लगा कर color का नाम देने से आपके text का color बदल जाता है।

(colorकी कम से कम value 0 होती है और ज्यादा से ज्यादा 255 होती है। Red, Green, blue (RGB) इन तीनो color की value को कम ज्यादा करके कोई भी एक नया color बनाया जा सकता है।) और आप चाहते की इसे html में define किया जाये तो , इसे इस तरह से define किया जाता है।

<p style= “color:green”> any text here, text will be green  </p>

 

  • changing font family : जब हम कोई भी document बनाते है तो text (arial black ) में ही लिखा हुआ होता है। पर इसको हम font family के माध्यम से बदल भी सकते है। वो भी हमारी वेब पेज की demand के आधार पर,  आप इसे बदलने के लिए font family property का उपयोग करे और  font family के रूप मे दे।

<p style= “font-family :arial”> any text will be in arial </p>

  • change text size : नाम से पता चलता है की ये tag text size को बदलने के लिए काम आता है। font size property और value के रूप में size आप जों चाहते हो।

<p style= “font-size:४५”> any text here , text size will be change </p>

  • change text position : यदि आप पेज में text की position को change करना चाहते हो और text को left, right, center की जगह चाहते हो।

<p style = “text-align : center”> this position is change by style tag </p>

Introducing to html text formatting :- text formatting अपने आप में बहुत अधिक महत्वपूर्ण होती है।

इससे आप वेब पेज पर text को bold करके उस text को highlight कर देते है। text पर underline करके उस text की importance को बढ़ा सकते है। दोस्तों आइये हम यहाँ कुछ common formatting के बारे में जानते है और इनका use केसे करते है।

text को bold ,italic, under line करने के लिए :

<b> any text write here </b>

<i> some text write here</i>

<ins>some text write here</ins>

Introduction to HTML link :-

Link होता क्या है. :-  लिंक दो अलग-अलग भागो को एक दुसरे से जोड़ता है उसे लिंक कहते है। अगर इसे हम document के आधार पर समझे तो document file में ऐसा text या image जिस पर माउस के curser को ले जाने पर उस text या image पर हाथ का निशान बन जाता है। और उस पर click करने से आप सीधे उसी पेज से कनेक्ट हो जाते है, जिसका लिंक वहा दिया हुआ होता है।

hyperlink के लिए tag है: <a href=” “> </a>

 

HTML लिस्ट :- HTML में जब आप कोई भी इनफार्मेशन को लिस्ट के साथ represent करना चाहते हो तो वो आप लिस्ट tag को order wise बना सकते हो।

HTML मे 3 तरह की लिस्ट होती है:

  1. order लिस्ट टाइप :- यहाँ आप लिस्ट को अलग अलग order से set कर सकते है। numeric (1,2,3,4,5,6) और alphabite (a,b,c,d,e,) और इसका tag है।  <ol> </ol>
  1. unorder लिस्ट टाइप:- ये unorder लिस्ट से  bullets के साथ लिस्ट represent होती है।

<ul> </ul>

  • definition list :-

 

Type attribute :

यदि आप एक order लिस्ट create करना  चाहते हो, तो आप टाइप attribute के माध्यम से ये बता सकते हो की आप उसे numeric या alphabet के रुप  में देखना चाहते हो, यदि आप उसे numeric  type में देखना चाहते हो तो attribute की value 1  define करो,  और आप चाहते है की आप उसे alphabetic मोड में देखे तो attribute की value a define करे।

 

order list :-  order लिस्ट को बनाने के लिए आप <ol> tag का use  करते हो, और list को define करने के लिए <li> tag का use करते है, और <li> tag का use order और unorder दोनों तरह की लिस्ट मे इसका उपयोग होता है।

example :-

<html>

<head>

<title> order list </title>

</head>

<body>

<ol>

<li> rohit Sharma </li>

<li> virat kohli </li>

<li> ms dhoni </li>

<li> hardik pandya </li>

</ol>

</body>

</html>

 

Introduce to html tables :-

Table row और column का कलेक्शन होता है। जिसे हम टेबल कहते है।  टेबल का use हम इसलिए करते है ताकि हम data को structure form में बता सके। टेबल का use करके आप data को और भी सही तरह से रख सकते है। ताकि आप उसे आसानी से समझ और समझा सके।

टेबल tag के लिए:

  • table tag
  • tr = table row
  • td = table :
  • th = table heading

table बनाते समय आपको tag का order हमेशा पता होना आवश्यक है।

सबसे पहले table tag आता है. इसके बाद <tr> tag आता है,  फिर उसके बाद में <th> और <td> tags आते है।

<th>  और <td> tags हमेशा <tr> tags के अन्दर ही आयगी।

एक बात आपको और ध्यान रखनी चाहिये की जब तक आप बॉर्डर attribute के माध्यम  से table की बॉर्डर को define नहीं करते हो, तब तक table की बॉर्डर show नहीं होती है।

 

creating table heading  : आप चाहे  तो tables की first row में heading create कर सकते ह , heading text table के बाकी text से मोटा और बड़ा होता है। यदि आप कोई table create  करना चाहते हो जों employees और student की इनफार्मेशन को सेव करती हो, आप names और address और heading create कर सकते है। heading create करने के लिए <th> tag use किया जाता है। इसे ही टेबल heading भी कहा जाता है।  इस tag से आप जों भी text use करते हो, इस tag को <tr> tag के अंदर use किया जाता है।

इसका उदाहारण नीचे दिया जा रहा है।

<html>

<head>

<title> table heading page </title>

</head>

<body>

<table border = “1” >

<tr>

<th> name </th>

<th> address </th>

<th> mobile no . </th>

</tr>

<tr>

<td> prashant </td>

<td> Udaipur </td>

<td> 8847474747 </td>

</tr>

<tr>

<td> chhaya </td>

<td> Udaipur </td>

<td> 9477477747 </td>

</tr>

</table>

</body>

</html>

Html image and video :

वेब पेज में image insert करने से वेब पेज और भी ज्यादा आकर्षित लगता है  और image के माध्यम से यूजर भी कार्य को आसानी से समझ लेता है।  वेब पेजे में image को add करने के लिए , वेब पेज पर image tag use होता है। <image tag> में बहुत से attribute होते है।

attributes :

  • src = source attribute के माध्यम से html में image को insert कराने के लिये होता है।
  • alt = अल्टरनेटिव attribute के माध्यम से कभी-कभी किसी कारण से image show नहीं हो पाती है, तो उस condition में image की जगह ये text show होता है।
  • width = width addribute के माध्यम से आप image की width को वेब पेज के लिए सेट कर सकते हो।
  • height : height attribute वेब पेज पर image की height को सेट करने के लिए होता है।
  • style : css के rules को apply कर सकते है image पर
  • autoplay : इस  attributes के माध्यम से audio और video जों भी होता है, जों autoplay हो जाता है।
  • controls : इस attribute के माध्यम से audio/video file पर हम कण्ट्रोल बटन को show कर सकते है, जिसके माध्यम से हम audio एंड video को user के control में कर सकते है।
  • loops : जब कोई यूजर किसी audio/video file को देखता है, तो वो audio और video फिर से रिपीट होगा या नहीं वो हम इस लूप attribute के माध्यम से apply  सकते है। loop attribute की 2 value होती है।  true/false

 

Introducing  to html forms :-

html form के माध्यम से आप यूजर की कुछ इनफार्मेशन ले सकते है, ताकि वो आपके data base में save हो जाये। और आप as soon as उससे contact कर सकते है।  form के माध्यम से यूजर से contact  करना सबसे आसन होता है।

 

form create करने के लिए:

<form> tag use करते है।

 

attribute:

action : इस attribute से आप define करते है की form सबमिट होने पर क्या करना है,  यूजर के form submit करते ही उसे कोई दूसरा message show हो जाये।  जैसे, thank you, well-come etc.

method : data को store कराने के लिए इस attribute को use लेते है get और post 2 value attribute की हो सकती है।

target : जब यूजर से form submit करते है और हम चाहते है की अब हम यूजर को दूसरा पेज कोनसा show कराए वो target attribute के माध्यम से होता है।

???????

“A debt of gratitude is in order For To Read This Blog..!”

 

Related:  Study Tips For All Exams, राजस्थान के लोक वाधयंत्रराजस्थान के लोक गीत एवं नृत्यराजस्थान के स्वत्रंता सेनानीराजस्थान के प्रमुख साहित्य कला व संगीत संस्थानLearning to Use CSS Attribute Sectors in HindiStudy Tips For All Competition ExamsDownload all materials PDF notes in Hindi

 

Related Post

6 Comments

  1. vikas soni says:

    mujy ek webpage banana hai . kya aap meri help ker skty ho ?

  2. ntesh rana says:

    nice

  3. Howdy here, just turned out to be familiar with your website through Bing, and have found that it’s genuinely beneficial. I’ll be grateful should you keep up this.

  4. Enjoyed examining this, very good stuff, regards . “Golf isn’t a game, it’s a choice that one makes with one’s life.” by Charles Rosin.

  5. Hi there very nice website!! Guy .. Beautiful .. Superb .. I will bookmark your blog and take the feeds additionally…I am glad to find numerous helpful information right here within the submit, we’d like develop extra techniques on this regard, thank you for sharing.

  6. Quality posts is the main to invite the viewers
    to pay a quick visit the web site, that’s what this website is providing.

Leave a Reply

Your email address will not be published. Required fields are marked *