अगर आप HTML सीखना शुरू कर रहे हैं और basic webpage बनाना सीख चुके हैं, तो अगला important step है HTML Forms, Images और Links को समझना।

किसी भी modern website को देखें तो उसमें आपको अलग-अलग प्रकार के forms, images और links देखने को मिलेंगे।

उदाहरण के लिए:

• Login Form
• Registration Form
• Contact Form
• Search Box
• Profile Image
• Website Links
• Download Links
• दूसरी websites के Links

इस tutorial में हम आसान भाषा में समझेंगे कि HTML में Form कैसे बनाया जाता है, Image कैसे लगाई जाती है और Link कैसे बनाया जाता है।

HTML Form क्या होता है?

HTML Form का इस्तेमाल website पर user से information लेने के लिए किया जाता है।

उदाहरण के लिए जब आप किसी website पर:

• अपना Name डालते हैं
• Email डालते हैं
• Password डालते हैं
• Mobile Number डालते हैं
• Message लिखते हैं
• कोई option select करते हैं

तो इन सभी चीजों के लिए HTML Form का इस्तेमाल किया जा सकता है।

HTML Form कहाँ इस्तेमाल होता है?

Forms लगभग हर प्रकार की website में देखने को मिलते हैं।

जैसे:

Login Page:
Username और Password लेने के लिए।

Registration Page:
Name, Email, Mobile Number आदि लेने के लिए।

Contact Page:
User से message प्राप्त करने के लिए।

Search Box:
Website पर किसी information को search करने के लिए।

HTML में Basic Form कैसे बनाएं?

HTML में form बनाने के लिए <form> tag का इस्तेमाल किया जाता है।

एक simple form इस तरह बनाया जा सकता है:

<form>

    <label>Name:</label>
    <input type="text">

    <br><br>

    <label>Email:</label>
    <input type="email">

    <br><br>

    <button type="submit">Submit</button>

</form>

यह एक basic form है जिसमें user अपना Name और Email डाल सकता है।

HTML Input क्या होता है?

Form में user से information लेने के लिए Input Field का इस्तेमाल किया जाता है।

अलग-अलग प्रकार की information के लिए अलग-अलग input types available हैं।

Name के लिए Input

<input type="text">

इसका इस्तेमाल सामान्य text लिखने के लिए किया जाता है।

Email के लिए Input

<input type="email">

इसका इस्तेमाल email address के लिए किया जाता है।

Password के लिए Input

<input type="password">

इसमें user द्वारा लिखी गई information सामान्य text की तरह दिखाई नहीं देती।

Mobile Number के लिए Input

<input type="tel">

इसका इस्तेमाल telephone या mobile number के लिए किया जा सकता है।

HTML Form में Label क्या होता है?

label user को बताता है कि किसी input box में कौन-सी information डालनी है।

उदाहरण:

<label>Email Address</label>
<input type="email">

इससे user को समझ आता है कि उस box में email address डालना है।

एक अच्छे form में labels का इस्तेमाल करना बेहतर होता है क्योंकि इससे form को समझना आसान हो जाता है।

HTML में Button कैसे बनाएं?

Form को submit करने के लिए button का इस्तेमाल किया जा सकता है।

<button type="submit">Submit</button>

Button पर आप अपनी जरूरत के अनुसार text लिख सकते हैं।

उदाहरण:

• Submit
• Login
• Register
• Send Message
• Search

HTML में Image कैसे लगाएं?

Website को attractive और informative बनाने के लिए images का बहुत ज्यादा इस्तेमाल किया जाता है।

HTML में image लगाने के लिए <img> tag का इस्तेमाल किया जाता है।

Basic example:

<img src="image.jpg" alt="My Image">

यहाँ src में image की location दी जाती है।

HTML में Image की Location क्या होती है?

अगर आपकी HTML file और image एक ही folder में हैं:

website
|
|- index.html
|- image.jpg

तो आप इस तरह image लगा सकते हैं:

<img src="image.jpg" alt="Website Image">

अगर image किसी अलग folder में है:

website
|
|-index.html

|- images
|- photo.jpg

तो:

<img src="images/photo.jpg" alt="Website Image">

इस तरह HTML को image की सही location पता चल जाती है।

HTML में Alt Text क्या होता है?

Image में alt attribute भी देना useful होता है।

उदाहरण:

<img src="photo.jpg" alt="Student using computer">

alt image के बारे में छोटा description बताता है।

अगर किसी कारण से image load नहीं होती, तो यह text उपयोगी हो सकता है।

इसलिए images में meaningful alt text रखना अच्छी practice है।

Image की Width और Height कैसे बदलें?

आप image का size भी set कर सकते हैं।

<img src="photo.jpg" alt="Computer" width="400">

इससे image की width निर्धारित की जा सकती है।

हालांकि modern websites में image का final design और responsive size अक्सर CSS की मदद से control किया जाता है।

HTML Link क्या होता है?

Link की मदद से user एक webpage से दूसरे webpage पर जा सकता है।

उदाहरण के लिए किसी website के menu में:

• Home
• About
• Contact
• Blog

ये सभी links हो सकते हैं।

HTML में link बनाने के लिए <a> tag का इस्तेमाल किया जाता है।

<a href="https://example.com">Visit Website</a>

यहाँ href में उस webpage का address दिया जाता है जहाँ user को भेजना है।

दूसरी Website का Link कैसे लगाएं?

अगर आप किसी दूसरी website का link लगाना चाहते हैं, तो उसका web address href में डाल सकते हैं।

<a href="https://www.google.com">Google</a>

अब user Google text पर click करके उस website पर जा सकता है।

अपनी Website के दूसरे Page का Link कैसे लगाएं?

मान लीजिए आपके project में ये files हैं:

website
|
|- index.html
|- about.html
|-contact.html

अब Home page से About page पर जाने के लिए:

<a href="about.html">About Us</a>

और Contact page के लिए:

<a href="contact.html">Contact Us</a>

इस तरह आपकी website के अलग-अलग pages आपस में connect हो जाते हैं।

Link को नई Tab में कैसे खोलें?

अगर आप चाहते हैं कि link पर click करने के बाद webpage नई browser tab में खुले, तो target attribute का इस्तेमाल किया जा सकता है।

<a href="https://example.com" target="_blank">
    Visit Website
</a>

इससे link सामान्यतः नई tab में open होगा।

Image को Link कैसे बनाएं?

आप image पर click करके किसी दूसरी website या page पर जाने की सुविधा भी दे सकते हैं।

इसके लिए image को <a> tag के अंदर रखा जाता है।

<a href="https://example.com">
    <img src="image.jpg" alt="Visit Website">
</a>

अब user image पर click करेगा तो दिए गए webpage पर जा सकता है।

यह तरीका banners, logos और promotional images में काफी useful हो सकता है।

Form, Image और Link को एक साथ कैसे इस्तेमाल करें?

एक webpage में इन तीनों को एक साथ इस्तेमाल किया जा सकता है।

उदाहरण के लिए एक simple contact page में:

<h1>Contact Us</h1>

<img src="logo.jpg" alt="Website Logo">

<br><br>

<a href="index.html">Home</a>

<br><br>

<form>

    <label>Name:</label>
    <input type="text">

    <br><br>

    <label>Email:</label>
    <input type="email">

    <br><br>

    <label>Message:</label>
    <textarea></textarea>

    <br><br>

    <button type="submit">Send Message</button>

</form>

इस छोटे example में:

• Image का इस्तेमाल logo के लिए किया गया है।
• Link का इस्तेमाल Home page पर जाने के लिए किया गया है।
• Form का इस्तेमाल user की information लेने के लिए किया गया है।

यही basic concepts आगे चलकर complete websites बनाने में काम आते हैं।

Beginners के लिए Important Tips

HTML सीखते समय केवल tags याद करने की कोशिश न करें। छोटे-छोटे webpages बनाकर practice करें।

आप शुरुआत में एक Contact Us Page बनाने की कोशिश कर सकते हैं जिसमें:

• Website का Logo
• Home Link
• About Link
• Name Field
• Email Field
• Message Box
• Submit Button

शामिल हों।

इसके बाद इसी page को CSS की मदद से design करें।

इससे आपको HTML के concepts ज्यादा अच्छी तरह समझ आएंगे।

निष्कर्ष

HTML में Forms, Images और Links website बनाने के basic और important parts हैं।

Forms user से information लेने में मदद करते हैं। Images website को ज्यादा attractive और informative बनाती हैं, जबकि Links users को एक webpage से दूसरे webpage या दूसरी website तक पहुंचने में मदद करते हैं।

अगर आप HTML सीख रहे हैं, तो इन तीनों concepts को अच्छी तरह समझने के बाद आप CSS और JavaScript की तरफ आगे बढ़ सकते हैं और धीरे-धीरे complete interactive websites बनाना सीख सकते हैं।

Frequently Asked Questions (FAQ)

1. HTML Form क्या होता है?

HTML Form का इस्तेमाल website पर user से information लेने के लिए किया जाता है। जैसे Name, Email, Password, Mobile Number और Message आदि।

2. HTML में Image कैसे लगाते हैं?

HTML में image लगाने के लिए <img> tag का इस्तेमाल किया जाता है। इसमें src attribute से image की location और alt attribute से image का description दिया जाता है।

3. HTML में Link कैसे बनाते हैं?

HTML में link बनाने के लिए <a> tag का इस्तेमाल किया जाता है। href attribute में उस webpage या website का address दिया जाता है जहाँ user को भेजना है।

4. क्या HTML में Image को Clickable बनाया जा सकता है?

हाँ। Image को <a> tag के अंदर रखकर उसे clickable बनाया जा सकता है। User image पर click करके किसी दूसरे webpage या website पर जा सकता है।

5. HTML सीखने के बाद क्या सीखना चाहिए?

HTML के basics समझने के बाद CSS सीखना अच्छा अगला step है। CSS से webpage का design, layout, colors, fonts और responsive appearance बनाया जा सकता है। उसके बाद JavaScript सीखकर website में interactivity जोड़ी जा सकती है।