My First HTML Code

HTML का पूरा नाम HyperText Markup Language है। यह Web Pages बनाने के लिए इस्तेमाल होने वाली सबसे basic और important language है। अगर आप Web Development सीखना शुरू कर रहे हैं, तो HTML सबसे पहला step है।

इस article में हम अपना First HTML Code बनाएंगे और समझेंगे कि HTML में एक simple webpage कैसे तैयार किया जाता है।

HTML क्या है?

HTML एक Markup Language है, जिसका उपयोग webpage के content और structure को define करने के लिए किया जाता है। जैसे किसी webpage पर heading, paragraph, image, link, list और table आदि दिखाई देते हैं, उनके structure को HTML से बनाया जा सकता है।

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

Heading के लिए <h1>
Paragraph के लिए <p>
Link के लिए <a>
Image के लिए <img>
List के लिए <ul> और <ol>

HTML को programming language के बजाय markup language कहा जाता है क्योंकि यह webpage के structure और content को mark up करती है।

HTML सीखने के लिए सबसे पहले एक simple webpage बनाते हैं।

			
<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is my first HTML code.</p>
</body>
</html>

		

यह आपका My First HTML Code है। अब इसे line by line समझते हैं।

`<!DOCTYPE html>` क्या है?

<!DOCTYPE html>

यह browser को बताता है कि document HTML5 में लिखा गया है।

यह कोई normal HTML tag नहीं है। इसे DOCTYPE declaration कहा जाता है।

`<html>` Tag

			
<html>
</html>

यह HTML document का main/root element है। लगभग पूरा HTML code इसी के अंदर लिखा जाता है।

Opening tag:

<html>

और closing tag:

</html>

के बीच webpage का पूरा structure रहता है।

`<head>` Tag

			
<head>
</head>

head section में webpage की ऐसी information रखी जाती है जो सामान्यतः webpage के main visible content के रूप में दिखाई नहीं देती।

इसमें title, metadata, CSS links और अन्य information शामिल हो सकती है।

`<title>` Tag

<title>My First Web Page</title>

यह webpage का title निर्धारित करता है।

यह title आमतौर पर browser tab में दिखाई देता है।

`<body>` Tag

			
<body>
</body>

body के अंदर webpage का visible content लिखा जाता है।

अगर आप webpage पर heading, paragraph, image, button या link दिखाना चाहते हैं, तो उसका HTML code सामान्यतः <body> के अंदर लिखा जाता है।

`<h1>` Tag

हमने अपने example में लिखा:

<h1>Hello World!</h1>

<h1> सबसे important और सबसे बड़ी level की heading के लिए इस्तेमाल किया जाता है।

इससे webpage पर दिखाई देगा:

Hello World!

HTML में headings के लिए <h1> से <h6> तक tags होते हैं।

			
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Another Heading</h3>

`<p>` Tag

हमारे code में:

<p>This is my first HTML code.</p>

<p> का उपयोग paragraph बनाने के लिए किया जाता है।

Browser में यह एक सामान्य paragraph की तरह दिखाई देगा।

आप इसमें अपना text लिख सकते हैं:

<p>HTML is easy to learn.</p>

Complete First HTML Page

अब एक थोड़ा बेहतर example बनाते हैं:

			
<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>My First HTML Page</h1>
    <p>Hello! My name is Rahul.</p>
    <p>I am learning HTML.</p>
    <h2>About HTML</h2>
    <p>HTML is used to create the structure of web pages.</p>
</body>
</html>

		

इस code को browser में open करने पर एक simple webpage दिखाई देगा जिसमें heading और paragraphs होंगे।

HTML Code कैसे Run करें?

HTML सीखने के लिए आपको कोई complicated software जरूरी नहीं है। आप अपने computer में Notepad का भी इस्तेमाल कर सकते हैं।

सबसे पहले Notepad खोलें और यह code लिखें:

			
<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Welcome to my first webpage.</p>
</body>
</html>

		

अब इसे इस नाम से save करें:

index.html

ध्यान रखें कि file का extension .html होना चाहिए।

इसके बाद index.html file पर double-click करें। यह आपके default web browser में open हो जाएगी।

आपको अपना पहला webpage दिखाई देगा।

HTML Tags क्या होते हैं?

HTML में अलग-अलग elements बनाने के लिए tags का इस्तेमाल किया जाता है।

उदाहरण:

<h1>My Heading</h1>

यहाँ:

<h1> = Opening tag
My Heading = Content
</h1> = Closing tag

इसे मिलाकर एक HTML element बनता है।

एक और example:

<p>Welcome to my website.</p>

यह एक paragraph element है।

HTML में Comments

HTML में comments भी लिखे जा सकते हैं।

<!-- This is a comment -->

Comment browser में webpage पर दिखाई नहीं देता।

Comments का उपयोग code को समझाने या notes लिखने के लिए किया जाता है।

उदाहरण:

			
<!-- Main heading -->
<h1>My First Web Page</h1>

HTML में एक Link बनाना

HTML की basic understanding के बाद आप link भी बना सकते हैं।

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

यह एक clickable link बनाएगा।

यहाँ <a> को anchor tag कहा जाता है और href attribute link का address बताता है।

HTML में Image लगाना

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

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

यहाँ:

src image का location बताता है।
alt image के बारे में alternative text देता है।

HTML में List बनाना

HTML में unordered list बनाने के लिए:

			
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

		

और numbered list के लिए:

			
<ol>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JavaScript</li>
</ol>

		

My First HTML Project

अब एक छोटा सा complete webpage बनाकर practice करें:

			
<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>Hello! This is my first website.</p>
    <h2>About Me</h2>
    <p>I am learning HTML and web development.</p>
    <h2>My Skills</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

		

यह एक basic लेकिन complete HTML webpage है। इसे index.html के नाम से save करके browser में खोलें।

HTML सीखने के लिए Next Step

अगर आपने अपना First HTML Code successfully run कर लिया है, तो अब धीरे-धीरे HTML के important elements सीखना शुरू करें।

आप इस क्रम में सीख सकते हैं:

HTML Document Structure
HTML Headings
HTML Paragraphs
HTML Links
HTML Images
HTML Lists
HTML Tables
HTML Forms
HTML Buttons
HTML Attributes
HTML Semantic Elements
HTML5 Elements

इसके बाद CSS सीखना शुरू करें। CSS की मदद से आप अपने HTML webpage को colors, fonts, spacing, layout और attractive design दे सकते हैं। उसके बाद JavaScript सीखकर webpage में interactivity और dynamic features जोड़े जा सकते हैं।

Conclusion

My First HTML Code लिखना Web Development की journey का पहला और सबसे important step है। HTML शुरुआत में बहुत simple लग सकती है, लेकिन यही webpage के पूरे structure की foundation तैयार करती है।

सबसे अच्छी practice यह है कि केवल code पढ़ने के बजाय खुद code type करें, browser में run करें और उसमें छोटे-छोटे changes करके result देखें।

आज अगर आपने सिर्फ एक <h1> और एक <p> वाला webpage भी successfully बना लिया है, तो आपने HTML की शुरुआत कर दी है। इसके बाद लगातार practice करके आप धीरे-धीरे complete webpages और websites बनाना सीख सकते हैं।