HTML ਢਾਂਚੇ ਦੀ ਜਾਣ-ਪਛਾਣ: ਮੂਲ ਤੱਤ ਅਤੇ ਸੰਟੈਕਸ

HTML ਬਣਤਰ ਵੈੱਬ ਪੰਨਿਆਂ ਨੂੰ ਬਣਾਉਣ ਵਿੱਚ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਭੂਮਿਕਾ ਅਦਾ ਕਰਦਾ ਹੈ। ਇਹ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ ਕਿ ਸਮੱਗਰੀ ਨੂੰ ਵੈਬਪੇਜ 'ਤੇ ਕਿਵੇਂ ਵਿਵਸਥਿਤ ਅਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇੱਥੇ ਬੁਨਿਆਦੀ HTML ਢਾਂਚੇ ਦੀ ਜਾਣ-ਪਛਾਣ ਹੈ:

1. `Doctype`

Doctype(ਦਸਤਾਵੇਜ਼ ਕਿਸਮ ਘੋਸ਼ਣਾ) HTML ਸੰਸਕਰਣ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ ਜੋ ਵੈਬਪੇਜ ਵਰਤ ਰਿਹਾ ਹੈ। ਇਸਨੂੰ HTML ਫਾਈਲ ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ ਰੱਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।

2. html ਟੈਗ

html ਟੈਗ ਹਰ HTML ਫਾਈਲ ਦਾ ਮੂਲ ਤੱਤ ਹੈ। ਇਹ ਵੈਬਪੇਜ ਦੀ ਸਮੁੱਚੀ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ।

3. `head` ਟੈਗ

ਹੈੱਡ ਟੈਗ ਵਿੱਚ ਵੈਬਪੇਜ ਬਾਰੇ ਜਾਣਕਾਰੀ ਹੁੰਦੀ ਹੈ ਜੋ ਬ੍ਰਾਊਜ਼ਰ 'ਤੇ ਸਿੱਧੇ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦੀ ਹੈ। ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ ਪੰਨੇ ਦਾ ਸਿਰਲੇਖ, ਮੈਟਾ ਟੈਗ, CSS ਅਤੇ JavaScript ਫਾਈਲਾਂ ਦੇ ਲਿੰਕ, ਅਤੇ ਕਈ ਹੋਰ ਤੱਤ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤੇ ਗਏ ਹਨ।

4. `body` ਟੈਗ

ਬਾਡੀ ਟੈਗ ਵਿੱਚ ਉਹ ਸਾਰੀ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਹੁੰਦੀ ਹੈ ਜੋ ਵੈਬਪੇਜ 'ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦੀ ਹੈ। ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ ਟੈਕਸਟ, ਚਿੱਤਰ, ਵੀਡੀਓ, ਲਿੰਕ ਅਤੇ ਹੋਰ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਭਾਗਾਂ ਵਰਗੇ ਤੱਤ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤੇ ਗਏ ਹਨ।

5. ਨੇਸਟਡ ਟੈਗਸ

HTML ਓਪਨਿੰਗ ਅਤੇ ਕਲੋਜ਼ਿੰਗ ਟੈਗਸ ਦੇ ਨਾਲ ਇੱਕ ਲੜੀਵਾਰ ਢਾਂਚੇ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਚਾਈਲਡ ਟੈਗ ਪੇਰੈਂਟ ਟੈਗਸ ਦੇ ਅੰਦਰ ਰੱਖੇ ਜਾਂਦੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, 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 ਢਾਂਚੇ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਤੁਸੀਂ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਗਠਿਤ, ਪੜ੍ਹਨਯੋਗ, ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਵੈਬ ਪੇਜ ਬਣਾ ਸਕਦੇ ਹੋ।

ਪਿਛਲੀ ਪੋਸਟ

HTML ਅਤੇ ਬੇਸਿਕ ਸਿੰਟੈਕਸ ਦੀ ਜਾਣ-ਪਛਾਣ: ਇੱਕ ਸ਼ੁਰੂਆਤੀ ਗਾਈਡ

ਅਗਲੀ ਪੋਸਟ