Table of Contents
HTML Tools
HTML tutorial in Hindi – HTML में Code लिखने और Run करने के लिये कुछ Basic Tools की जरूरत होती है जो लगभग सारे Computers में पहले से ही Installed होते हैं।
इसके लिये mainly दो प्रकार के Tools की जरूरत पडती है:
- Text Editor (जैसे Notepad, Notepad++, Dreamweaver, Coffee Cup, Visual Studio Code आदि)
- Web Browser (जैसे Internet Explorer, Google Chrome, Firefox, Safari, Opera आदि)
Text Editor हम Use करेंगे Code लिखने के लिये और Browser में हम बनाये गये HTML File को Run करेंगे। अगर आपके पास Windows System है तो Notepad और Internet Explorer पहले से ही आपके Computer में Installed होंगे।
अगर आप Notepad Use नही करना चाहते तो HTML editor Download कर सकते हैं इसके बारे में अधिक जानकारी के लिए यह Article पढ़ें: HTML tutorial in Hindi
HTML Document Structure
अब हम एक html Page Create करेंगे इसके लिये नीचे कुछ जरूरी Code दिये गए जिसे आप copy करके notepad में paste कर लें और save as करके किसी Folder में save करलें। ध्यान रहे File को save करते समय save as पर जायें और file के Name के आगे .html लगायें।
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>This is heading</h1>
Hello World!!!
</body>
</html>Copy अब save किये गये File को Browser मे open करें जो कि कुछ इस तरह दिखाई देगा
अब चलिये इस Code को समझते हैं: HTML tutorial in Hindi
- एक HTML Page कई सारे Tags से मिलकर बना होता है, और सारे tags उस Page के किसी न किसी element को दर्शाते हैं जैसे paragraph, image, table आदि।
- लगभग सारे Tags के opening और closing होते हैं। opening tag कुछ इस तरह होता है: <tag_name> और closing tag में / लगा होता है जैसे: </tag_name>
- जैसा कि आप ऊपर Code मे देख सकते हैं सबसे पहले <html> Tag होता है जो html page के Starting को दर्शाता है और Last में </html> लिखा हुआ होता है जो Page के Ending को बताता है।
HTML Page Sections
एक html Page के mainly दो Parts होते हैं:
- Head Section: इस Section में Page के बारे में Information’s लिखे जाते हैं जो web browser और search engine के काम का होता है। इस section मे mainly Three type की जानकारियां होती हैं: keywords, description जो कि Google जैसे search engines के काम आता है और Third title जो कि webpage का Title होता है और Browser के title bar में display होता है।
- Body Section: यह main content वाला part होता है यहां वो सारी जानकारियां लिखीं जातीं हैं जिसे हम अपने Page में दिखाना चाहते हैं जैसे: text, image, video आदि।
Background और Text में Color add करना
अपने Webpage को और Attractive बनाने के लिये हम background color, text color और images use कर सकते हैं।
आईये जानते हैं की HTML में background color कैसे Add किया जाता है।
तो चलिये सबसे पहले हम अपने page का background Color change करते हैं। ऐसा करने के लिये जो coding हमने पहले की थी उसे फ़िर से notepad में open करते हैं और body tag में एक bgcolor Name का attribute Add कर देते है और उसकी value को blue कर देते हैं जिससे पूरे Page का background blue हो जायेगा। Code कुछ इस प्रकार से होगा:
<html>
<head>
<title>My First HTML Document</title>
</head>
<body bgcolor="blue">
<h1>This is heading</h1>
Hello World!!!
</body>
</html>
अब चलिये इस Code को समझते हैं:
- एक HTML Page कई सारे Tags से मिलकर बना होता है, और सारे tags उस Page के किसी न किसी element को दर्शाते हैं जैसे paragraph, image, table आदि।
- लगभग सारे Tags के opening और closing होते हैं। opening tag कुछ इस तरह होता है: <tag_name> और closing tag में / लगा होता है जैसे: </tag_name>
- जैसा कि आप ऊपर Code मे देख सकते हैं सबसे पहले <html> Tag होता है जो html page के Staritng को दर्शाता है और Last में </html> लिखा हुआ है जो Page के Ending को बताता है। HTML tutorial in Hindi
HTML Page Sections
एक html Page के mainly दो Part होते हैं:
- Head Section: इस Section में Page के बारे में Information’s लिखे जाते हैं जो web browser और search engine के काम का होता है। इस section मे mainly तीन type की जानकारियां होती हैं: keywords, description जो कि Google जैसे search engines के काम आता है और तीसरा title जो कि Webpage का Title होता है और Browser के title bar में display होता है।
- Body Section: यह main content वाला part होता है यहां वो सारी जानकारियां लिखीं जातीं हैं जिसे हम अपने page में दिखाना चाहते हैं जैसे: text, image, video आदि।
Background और Text में Color add करना
अपने Webpage को और Attractive बनाने के लिये हम background color, text color और images use कर सकते हैं।
आईये जानते हैं कि HTML में background color कैसे Add किया जाता है।
तो चलिये सबसे पहले हम अपने page का Background Color change करते हैं। ऐसा करने के लिये जो coding हमने पहले की थी उसे फ़िर से notepad में open करते हैं और body tag में एक bgcolor नाम का attribute Add कर देते है और उसकी value को blue कर देते हैं जिससे पूरे Page का background blue हो जायेगा। Code कुछ इस प्रकार से होगा:
<html>
<head>
<title>My First HTML Document</title>
</head>
<body bgcolor="blue">
<h1>This is heading</h1>
Hello World!!!
</body>
</html>
अब इसे save करें और browser में open करें, कुछ इस प्रकार दिखाई देगा:
<img src="images/myimage.jpg">Copy ऊपर Code में मैने images/myimage.jpg लिखा है जो बताता है कि हमारे Image/चित्र का नाम myimage.jpg है जो images Name के Folder में है।
HTML tutorial in Hindi
Note: यहां पर image के name और उसके format पर ध्यान दें, Image का Name और format जानने के लिये Image की properties check करें। यहां मैने जो Image ली है उसका Name myimage है जो jpg format मे है, आपके Image का Name और format अलग हो सकता है। अब Webpage को Browser में Open करते हैं, जो कुछ ऐसा दिखाई देगा।
हम picture का size भी change कर सकते हैं जिसके लिये height और width attribute का Use करेंगे।
<img src="images/myimage.jpg" height="100px" width="100px">Copy Height और width Change करने के बाद हमारा Page कुछ ऐसा दिखाई देगा।
Link create करना
Link या Hyperlink का Use एक Page को दूसरे Page से जोडने के लिये किया जाता है। सबसे पहले हमें एक HTML page चाहिये जिसे हम अपने Page से Link कर सकें, तो आप एक और Page बना लें या पहले जो हमने Page बनाया था उसे copy कर के उसी folder में दूसरे नाम से save कर लें।
Link बनाने के लिये Code कुछ इस प्रकार से लिखें:
<a href="अपने page का नाम">Text जिसे आप user को show करना चाहते हैं</a>
<a href="contact.html">Contact us</a>
अगर आप किसी website को link करना चाहते हैं तो उसके लिये code कुछ ऐसे लिखें:
<a href="http://www.website.com"> Text जिसे आप user को show करना चाहते हैं </a>
<a href="http://www.last_date.com">Learn web design in Hindi</a>
Image Link: जैसा की आपने किसी website में देखा होगा जिसमें कुछ Buttons होते हैं
जिस पर click करने से कोई दूसरा Page open होता है इसी तरह हम किसी image के ऊपर भी link create कर सकते हैं।
Image link create करने के लिये code कुछ इस तरह से लिखें:
<a href="page.html"><img src="images/button.jpg"></img></a>
Example के लिये हम एक Read More नाम का Button अपने Page पर लगाते है:
<a href="page.html"><img src="images/Read_more_button.png"></img></a>हमारा Page कुछ इस तरह दिखाई देगा:
अब जैसे ही हम Read More वाले Button पर click करेंगे तो page.html नाम का दूसरा Page Open होगा।
Text Formatting
यह सबसे Basic लेकिन जरूरी part है मगर ये थोडा frustrating भी हो सकता है। अगर आप साथ में practice करते जायें तो ये आपको interesting लग सकता है।
इस Part में हम simple text formatting जैसे कि नये line में sentence कैसे लिखे, text को left, right या center align कैसे करें आदि सीखेंगे। सबसे पहले आप नीचे दिये गये English paragraph को copy कर के अपने HTML document में Paste करें और Page को browser में run करें और देखें क्या result आता है।(आप इसके बदले में कोई दूसरा random text भी use कर सकते हैं लेकिन ध्यान रहे उसमें कुछ space डालना ना भूलें जैसा कि नीचे paragraph में हमने डाला है)
“This is a sample paragraph of text. Nothing important here just typing some words to the example of HTML formatting. In this article you are learning basics of HTML page designing in Hindi language. In last-date.com we will cover all the topics related to web design and development in Hindi language. If you find this article helpful then please bookmark our blog, like our Facebook page and keep visiting. End of my sample paragraph!”
आपने notice किया होगा कि हमने प्रत्येक sentence के बाद space छोडा था लेकिन browser में वो spaces दिखाई नही दे रहे हैं और सारे sentences एक साथ एक ही paragraph मे merge हो गये हैं।
इसे fix करने के लिये हमें नीचे दिये गये कुछ tags use करने होंगे:
- <p> : इसका Use हम तब करते हैं जब हमें कोई नया sentence लिखना होता है।
- <br> : Line break, New Line Start करने के लिये use किया जाता है।
अब हम इन दोनो Tags का Use कर नीचे फ़िर से पहले वाले Paragraph को लिखेगें, इसे copy कर फ़िर से अपने document में paste कर लें।
<p>“This is a sample paragraph of text. <br> Nothing important here just typing some words to the example of HTML formatting.</p> <p>In this article you are learning basics of HTML page designing in Hindi language. </p>
<p> In Last_date.com we will cover all the topics related to web design and development in Hindi language.<br>
<p>If you find this article helpful then please bookmark our blog, like our Facebook page and keep visiting.
End of my sample paragraph!”</p>अब आप <p> और <br> tags के स्थान को Change कर कुछ experiment कर के देखें की output कैसा आता है।
अब हम text या image को align करना सीखेंगे, इसके लिये हम नीचे दिये कुछ Tags का Use करेंगे:
- <center>Text जिसको center align करना है </center>
- <p align =left> Text जिसको left align करना है </align>
- <p align =right> Text जिसको right side में दिखाना है </align>
अब हम इन Tags को पहले वाले paragraph में apply करते है।
एक बार आप नीचे पूरा Code देख ले:
<html>
<head>
<title>My First HTML Document</title>
</head>
<body bgcolor="#1B99CF">
<center><font color="#fff">Hello World!!!</font></center>
<center>
<h1>This is heading</h1>
</center>
<center><img height="100px" src="images/myimage.jpg" width="100px"></center>
<center><a href="page1.html"><img height="50px" src="images/button.png" width="100px"></a></center>
<center>
<p>“This is a sample paragraph of text.<br>
Nothing important here just typing some words to the example of HTML formatting.</p>
</center>
<p align="left">In this article you are learning basics of HTML page designing in Hindi language.</p>
<p align="right">If you find this article helpful then please bookmark our blog, like our Facebook page and keep visiting.</p>
<p>In last-date.com we will cover all the topics related to web design and development in Hindi language.<br>
End of my sample paragraph!”</p>
</body>
</html>Text Formatting के लिए इन Tags का Use करें :
1. <font>Text जिसकी size change करनी है</font>:
इस <font> tag को हम पहले भी use कर चुके हैं बस इस बार उसमें हम size attribute जोड देंगे और इसकी value 1-7 हो सकती (जहां 1 सबसे छोटा और 7 सबसे बडी size होगी)
2.<b>Text जिसको bold में दिखाना है</b>
3.<i>Text जिसको italic करना है</i>
4.<u>Text जिसमे underline डालना है</u>
HTML में Table कैसे बनाये?
HTML में table बहुत ही useful होता है इससे न केवल हम data को अच्छे से present कर सकते हैं बल्कि हम table का use करके पूरे website का layout design कर सकते है। तो चलिये देखते हैं कि हम अपने Page में table कैसे डाल सकते हैं।
Table बनाने के लिये 3 जरूरी tags का use किया जाता है:
- <table > :Table
- <tr> : Table Row
- <td> : Table Data
अब नीचे दिये code को copy कर लें और run करके देखें:
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
जो कुछ ऐसा दिखाई देगा:
अब चलिये Code को समझते हैं:
- सबसे पहले हमने <table> tag use किया border=”1″ लिखा जिससे border on हो जायेगा जिसकी size 1 होगी।
- <tr> से हम एक नया row बनाते हैं।
- <tr> के अन्दर हम <td> लिखते हैं, <td> से एक नया column बनता है। हमको कोई data लिखना होता है तो हम हमेंशा <td> tag के अंदर लिखेंगे।
- हमने एक <tr> के अंदर दो <td> लिखा इसका मतलब एक row के अंदर 2 columns बनेंगे।
Colspan and Rowspan:
अब नीचे कुछ Tables दिये हैं, देखेंगे कि हम उसे किस तरह बना सकते हैं:
ये Table पहले से कुछ अलग है, इसमें पहले row में सिर्फ़ एक ही column है ऐसी स्थिती में हमें “colspan” attribute use करना पडता है।
- Colspan एक column की property है जिससे हम किसी एक column को दो या दो से अधिक column के बराबर span या फ़ैला सकते हैं।
- जैसा कि आप ऊपर देख सकते हैं first वाले row में सिर्फ़ एक cell है लेकिन वो 2 cells के बराबर है, ऐसा हमने <td> में colspan=”2″ attribute use करके बनाया है। नीचे आप पूरा Code देख सकते है:
<table border="1" width="200px" height="200px">
<tr align="center">
<td colspan="2">Cell 1</td>
</tr>
<tr align="center">
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>अब हम rowspan का example देखेंगे:
जैसा कि आप देख सकते हैं हमने एक cell को vertically span करके 2 cells के बराबर बनाया है तो इसके लिये हमने <td> में rowspan=”2″ attribute का Use किया है।
नीचे आप पूरा Code देख सकते हैं:
<table border=1 width="200px" height="200px">
<tr align="center">
<td rowspan="2">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr align="center">
<td>Cell 3</td>
</tr>
</table>Note: अगर आप cell को horizontally stretch करना चाहते हैं तो <td> में colspan का use करें और vertical stretch के लिये rowspan attribute लगायें।
HTML में Form कैसे बनाये?
Web forms के जरिये आप अपने web page के users से information ले सकते हैं। HTML form के जरिये आप Registration, login, contact form आदि बना सकते हैं।
Note: HTML से form की सिर्फ़ design की जा सकती है। एक functional form बनाने के लिये हमें कोई server-side scripting (जैसे php, Asp.net आदि) की जरूरत पडेगी जिसे हम बाद में इसी blog में cover करेंगे।
Form काम कैसे करता है:
- हर form मे एक submit button होता है, जब भी कोई user इस Button को click करता है तो उसके द्वारा Fill की गयी सारी information दूसरे Page में send हो जाती है।
- हमें सारा data कहां Send करना है ये हम पहले से ही form बनाते समय specify कर देते हैं
- जिस page पर data send होता है उसमें हमें एक program लिखना पडता है जिससे आने वाले सारे data को हम receive कर सकें। इस program को PHP या कोई अन्य server-side Language में लिखा जाता है जिसके बारे में हम बाद में जानेंगे।
Form कैसे बनायें:
- <form> tag से सारे forms start होते हैं जिसे हम html के body में कहीं भी लिख सकते हैं।
- Form tag में दो main attributes, method और action होते हैं <form method=”post” action=”register-exe.php”>
- Method attribute की value “get” या “post” हो सकती है। By default value get होती है।
- Get method से Send की गयी information secured नही होती और form के सारे data browser के address bar में दिखाई दे सकते हैं। sensitive information जैसे की password आदि get method से नही भेजना चाहिये।
- Post method secured होता है, send किया हुआ कोई भी data browser में show नही होता।
- Action attribute में हम उस Webpage का address लिखते हैं जहां हमें data send करना होता है।
सबसे पहले आप नीचे दिया गया Code copy करें और एक नये html page मे paste कर run करें:
<html>
<head>
<title>Registration Page</title>
</head>
<body bgcolor="#00CCCC">
<h3>Registration Form</h3>
<form action="" method="post">
Enter Name: <input name="name" type="text"><br> <br>
Enter Email: <input name="email" type="text"><br> lt;br>
Gender: <input name="gender" type="radio" value="Male">Male <input name="gender" type="radio" value="female">Female<br> <br>
City: <select name="city">
<option>Delhi</option>
<option>Mumbai</option> <option>Kolkata</option>
<option>Pune</option>
<option>Hydrabad</option>
</select><br> <br>
Address: <textarea name="address"></textarea>
<br> <br>
<input type="submit" value="Register"> <input type="reset" value="Clear">
</form>
</body>
</html>HTML tutorial in Hindi
Output कुछ इस तरह दिखाई देगा:
उपर हमने एक registration form बनाया है जिसमें name और email के लिये text box, gender के लिये radio button, city के लिये dropdown box और address के लिये textarea use किया है। चलिये अब इन HTML codes को समझते हैं:
- हमने form tag के action attribute को blank छोड दिया है क्योंकि अभी हमें data दूसरे Page में send नहीं करना है।
- Text-box: name और email enter कराने के लिये दो text-box बनाया गया है, इसके लिये <input> tag use किया जिसमें type में हमने text डाला।
- Radio button: male, female के लिये हमने दो radio button बनाये, यहां ध्यान देने वाली बात यह है कि एक बार में दोनो में से कोई एक radio button active होना चाहिये, हम male और female दोनो एक साथ select नही कर सकते नही तो मामला गडबड हो सकता है। इसलिये हमे दोनो radio buttons के name को same रखना होगा।
- Dropdown या Combo box: इसे हमने city के लिये use किया है। <select> tagके अंदर हमने 5 <option> लिखे हैं जिसमें 5 City के नाम है।
- Text-area: address के लिये हमें एक बडा box बनाना होता है जिसमें हम multiple lines लिख सकते हैं। इसे <textarea> tag के जरिये बना सकते हैं।
- Submit button: form को submit करने के लिये button बनाया जिसे <input> tag से बना सकते हैं जिसमे type=”submit” होना चाहिये। value attribute के जरिये button में दिखने वाले text को Change भी सकते हैं जैसा की हमने ऊपर button में register लिखा हुआ है।
- Reset या Clear button: last में form fields को reset करने के लिये एक और <input> tag लिया जिसमें type=”reset” रखा।
HTML tutorial in Hindi
इस article में हमने कोशिश किया है की HTML के सारे basic topics को Cover किया जाये, हो सकता है यह Post आपको थोड़ी लम्बी लगी हो लेकिन अगर आप इसे step-by-step तरीके से practice करते जाएँ तो आप सिर्फ 20 मिनट में HTML सीख सकते हैं। HTML tutorial in Hindi
Read Also Top 50 Excel Interview Questions and Answers You Need to Know