Building Blocks of HTML

 नमस्ते PK! आपके चैनल Quick Learn Code के लिए यह "Building Blocks of HTML" वाला ब्लॉग पोस्ट बहुत ही जानकारीपूर्ण है। 

इंटरनेट पर दिखने वाले किसी भी Web Page को बनाने के लिए HTML का होना अनिवार्य है।

यह एक विशेष सिस्टम (Tags) का उपयोग करके Text, Images, Links, Forms और अन्य Items को Screen पर व्यवस्थित करता है। चाहे आप Beginner हों या आने वाले समय के Professional Web Developer, यह सीखना बहुत महत्वपूर्ण है कि HTML Web Page का आधार (Base) कैसे बनाता है।

एक HTML Document के सबसे महत्वपूर्ण 3 Components  होते हैं:

{1} Tags

{2} Attributes

{3} Elements

वेब पेज के डिजाइन और कंटेंट को सही रूप देने के लिए इन तीनों का आपस में जुड़ना बहुत जरूरी है।


1. HTML Tags

Tags ही HTML को संभव बनाते हैं। ये तय करते हैं कि इंटरनेट पर डिस्प्ले होने वाला कंटेंट कैसा दिखेगा और उसका व्यवहार कैसा होगा। ज्यादातर समय, HTML में इस्तेमाल होने वाले Tags Start tag और End tag की जोड़ी (Pair) में होते हैं।

Syntax:

<tagname> Content goes here </tagname>


[i] Start Tag: किसी कंटेंट सेक्शन की शुरुआत में लगने वाला टैग, जैसे <p>, इसके लेआउट की शुरुआत को दर्शाता है।

[ii] End Tag: यह टैग किसी पैराग्राफ या सेक्शन के अंत को दर्शाता है, जैसे </p>

[iii] Self-closing Tags: कुछ Tags ऐसे होते हैं जिनमें किसी कंटेंट की जरूरत नहीं होती और वे खुद ही बंद हो जाते हैं। उदाहरण के लिए, नई लाइन के लिए <br> और फोटो के लिए <img>

Tags के कुछ मुख्य उदाहरण:


Tags

Meaning

<h1> to <h6>

Headings (सबसे महत्वपूर्ण से कम महत्वपूर्ण)

<p>

Paragraph

<a>

Anchor (Hyperlink के लिए)

<div>

Division या Section

<img>

Image

<br>

Line break




2. HTML Attributes

Attributes किसी Element के बारे में अतिरिक्त जानकारी (Additional Information) जोड़ते हैं। इन्हें हमेशा उस Tag में Set किया जाता है जहाँ Element की पहली बार शुरुआत होती है। प्रत्येक Attribute में एक Name और एक Value होती है।

Syntax:

<tagname attribute="value"> Content </tagname>

Examples:

[i] Style Attribute: 

<p style="color: red">The style is attribute of paragraph tag</p>


[ii] Image Source: 

  

<img src="photo.jpg" alt="A scenic view" width="400" height="300" />


[iii] Hyperlink: 

<a href="https://qlcbypk.blogspot.com/"> Visit Example </a>




3. HTML Elements

एक HTML Element का स्ट्रक्चर एक Tag, उसके अंदर का Content और Closing tag से मिलकर बनता है। ब्राउज़र इन अलग-अलग Elements को उस कंटेंट में बदल देते हैं जिसे आप स्क्रीन पर देखते हैं, जैसे Heading, Lists, Links और Images।

HTML Structure का एक उदाहरण:


<!DOCTYPE html>  

<html>  

  <head>  

    <title>The basic building blocks of HTML</title>  

 </head>  

  <body>  

       <h2>The building blocks</h2>  

       <p>This is a paragraph tag</p>  

       <p style="color: red">The style is attribute of paragraph tag</p>  

       <span>The element contains tag, attribute and content</span>  

  </body>  

</html>





Tags, Attributes और Elements ही वह चाबी हैं जिससे आप अपनी मनपसंद website बना सकते हैं। जब आप इन बुनियादी Concepts को गहराई से समझ लेते हैं, तो आप एक बेहतरीन और उपयोगी Web Page बनाने के लिए तैयार हो जाते हैं।

क्या आप चाहते हैं कि मैं आपके अगले Blog किस Topic पर लाये? Comment में जरूर बताये! आपके सुझाव हमें और बेहतर Content बनाने में मदद करते हैं।

"लिखना शुरू करें, coding खुद-ब-खुद आ जाएगी।"PK (@QLCbyPK)













—————— ——————




Comments

Popular Posts

HTML Introduction

HTML Text Editors

CREATE DATABASE

You might like

Quick Learn Code by PK

Quick Learn Code by PK (@QLCbyPK) एक उपयोगी और beginner-friendly platform है, जहाँ आप HTML, CSS, Bootstrap, JavaScript, jQuery, PHP, CodeIgniter, C, C++, और SQL जैसी programming languages आसानी से सीख सकते हैं।


Follow us