close

एचटीएमएल स्ट्रक्चरचा परिचय: मूलभूत घटक आणि वाक्यरचना

वेब पृष्ठे तयार करण्यात HTML संरचना महत्त्वपूर्ण भूमिका बजावते. वेबपृष्ठावर सामग्री कशी व्यवस्थापित आणि प्रदर्शित केली जाते हे ते परिभाषित करते. येथे मूलभूत HTML संरचनेचा परिचय आहे:

१. Doctype

Doctype(दस्तऐवज प्रकार घोषणा) वेबपृष्ठ वापरत असलेली HTML आवृत्ती परिभाषित करते. हे HTML फाईलच्या सुरूवातीस ठेवले पाहिजे.

2. html टॅग

html टॅग हा प्रत्येक HTML फाइलचा मूळ घटक आहे. हे वेबपृष्ठाची संपूर्ण सामग्री एन्कॅप्स्युलेट करते.

3. head टॅग

हेड टॅगमध्ये वेबपृष्ठाविषयी माहिती असते जी थेट ब्राउझरवर प्रदर्शित होत नाही. येथेच पृष्ठाचे शीर्षक, मेटा टॅग, CSS आणि JavaScript फायलींचे दुवे आणि इतर विविध घटक परिभाषित केले जातात.

4. body टॅग

बॉडी टॅगमध्ये वेबपृष्ठावर प्रदर्शित होणारी सर्व सामग्री असते. येथे मजकूर, प्रतिमा, व्हिडिओ, दुवे आणि इतर वापरकर्ता इंटरफेस घटक यासारखे घटक परिभाषित केले जातात.

5. नेस्टेड टॅग

एचटीएमएल ओपनिंग आणि क्लोजिंग टॅगसह श्रेणीबद्ध रचना वापरते. मूल टॅग पालक टॅगमध्ये ठेवलेले आहेत. उदाहरणार्थ, p टॅग(परिच्छेद) मध्ये स्पॅन टॅग(इनलाइन मजकूर), मजबूत टॅग(ठळक मजकूर) आणि इतर अनेक टॅग असू शकतात.

6. सामान्य टॅग

HTML सामग्रीचे स्वरूपन आणि प्रदर्शित करण्यासाठी टॅगची श्रेणी प्रदान करते. उदाहरणार्थ, h1-h6 टॅग(शीर्षक), p टॅग(परिच्छेद), img टॅग(इमेज), एक टॅग(लिंक) आणि इतर अनेक.

 

येथे संपूर्ण HTML पृष्ठ संरचनेचे उदाहरण आहे:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

doctype वरील उदाहरणामध्ये, आमच्याकडे, html टॅग, head टॅग आणि body टॅग सारख्या मुख्य घटकांसह संपूर्ण HTML पृष्ठ आहे. हेड विभागात, आम्ही पृष्ठ शीर्षक, वापरल्या जाणार्‍या CSS आणि JavaScript फाइल्स परिभाषित करतो. वेबपृष्ठाची सामग्री प्रदर्शित करण्यासाठी मुख्य भाग विभागात शीर्षलेख, मुख्य आणि तळटीप सारखे घटक असतात.

 

योग्य HTML रचना वापरून, तुम्ही सुव्यवस्थित, वाचनीय आणि परस्परसंवादी वेब पृष्ठे तयार करू शकता.