# ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 1: HTML ਦਾ ਪਰਿਚਯ ![HTML ਦਾ ਪਰਿਚਯ](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.pa.png) > ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਵੱਲੋਂ HTML, ਜਾਂ HyperText Markup Language, ਹਰ ਵੈਬਸਾਈਟ ਦੀ ਬੁਨਿਆਦ ਹੈ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਕਦੇ ਵੀ ਵੇਖਿਆ ਹੈ। HTML ਨੂੰ ਵੈਬ ਪੇਜਾਂ ਨੂੰ ਬਣਾਉਣ ਵਾਲੇ ਢਾਂਚੇ ਵਜੋਂ ਸੋਚੋ – ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਸਮੱਗਰੀ ਕਿੱਥੇ ਜਾਂਦੀ ਹੈ, ਕਿਵੇਂ ਸੰਗਠਿਤ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਅਤੇ ਹਰ ਹਿੱਸਾ ਕੀ ਦਰਸਾਉਂਦਾ ਹੈ। ਜਦ CSS ਤੁਹਾਡੇ HTML ਨੂੰ ਰੰਗਾਂ ਅਤੇ ਲੇਆਉਟ ਨਾਲ "ਸਜਾਉਂਦਾ" ਹੈ, ਅਤੇ JavaScript ਇਸ ਨੂੰ ਇੰਟਰਐਕਟਿਵਿਟੀ ਨਾਲ "ਜੀਵੰਤ" ਕਰਦਾ ਹੈ, HTML ਉਹ ਅਹਿਮ ਢਾਂਚਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਬਾਕੀ ਸਭ ਕੁਝ ਸੰਭਵ ਬਣਾਉਂਦਾ ਹੈ। ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਵਰਚੁਅਲ ਟੈਰੀਰੀਅਮ ਇੰਟਰਫੇਸ ਲਈ HTML ਢਾਂਚਾ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹੋ। ਇਹ ਹੱਥ-ਵਰਤੋਂ ਪ੍ਰੋਜੈਕਟ ਤੁਹਾਨੂੰ ਮੁੱਢਲੇ HTML ਸੰਕਲਪ ਸਿਖਾਏਗਾ ਜਦੋਂ ਤੁਸੀਂ ਕੁਝ ਦ੍ਰਿਸ਼ਮਾਨ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਬਣਾਉਂਦੇ ਹੋ। ਤੁਸੀਂ ਸੈਮਾਂਟਿਕ ਐਲਿਮੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਮੱਗਰੀ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ, ਚਿੱਤਰਾਂ ਨਾਲ ਕੰਮ ਕਰਨ, ਅਤੇ ਇੱਕ ਇੰਟਰਐਕਟਿਵ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਬੁਨਿਆਦ ਬਣਾਉਣ ਦੇ ਤਰੀਕੇ ਸਿੱਖੋਗੇ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਕੰਮ ਕਰਨ ਵਾਲਾ HTML ਪੇਜ ਹੋਵੇਗਾ ਜੋ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰਾਂ ਨੂੰ ਸੰਗਠਿਤ ਕਾਲਮਾਂ ਵਿੱਚ ਦਿਖਾਉਂਦਾ ਹੈ, ਜੋ ਅਗਲੇ ਪਾਠ ਵਿੱਚ ਸਟਾਈਲਿੰਗ ਲਈ ਤਿਆਰ ਹੈ। ਚਿੰਤਾ ਨਾ ਕਰੋ ਜੇ ਇਹ ਸ਼ੁਰੂ ਵਿੱਚ ਬੁਨਿਆਦੀ ਲੱਗਦਾ ਹੈ – CSS ਦੇ ਵਿਜ਼ੂਅਲ ਪੋਲਿਸ਼ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ HTML ਨੂੰ ਇਹੀ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ## ਪਾਠ-ਪਹਿਲਾਂ ਕਵਿਜ਼ [ਪਾਠ-ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **ਦੇਖੋ ਅਤੇ ਸਿੱਖੋ**: ਇਸ ਮਦਦਗਾਰ ਵੀਡੀਓ ਝਲਕ ਨੂੰ ਦੇਖੋ > > [![HTML ਮੂਲਭੂਤ ਵੀਡੀਓ](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## ਆਪਣਾ ਪ੍ਰੋਜੈਕਟ ਸੈਟਅੱਪ ਕਰਨਾ HTML ਕੋਡ ਵਿੱਚ ਡੁੱਬਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇੱਕ ਸਹੀ ਵਰਕਸਪੇਸ ਸੈਟਅੱਪ ਕਰੀਏ। ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਇੱਕ ਸੰਗਠਿਤ ਫਾਈਲ ਢਾਂਚਾ ਬਣਾਉਣਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਆਦਤ ਹੈ ਜੋ ਤੁਹਾਡੇ ਵੈਬ ਵਿਕਾਸ ਯਾਤਰਾ ਦੌਰਾਨ ਤੁਹਾਡੀ ਮਦਦ ਕਰੇਗੀ। ### ਕੰਮ: ਆਪਣਾ ਪ੍ਰੋਜੈਕਟ ਢਾਂਚਾ ਬਣਾਓ ਤੁਸੀਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇੱਕ ਸਮਰਪਿਤ ਫੋਲਡਰ ਬਣਾਓਗੇ ਅਤੇ ਆਪਣੀ ਪਹਿਲੀ HTML ਫਾਈਲ ਸ਼ਾਮਲ ਕਰੋਗੇ। ਇੱਥੇ ਦੋ ਪਹੁੰਚਾਂ ਹਨ ਜੋ ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ: **ਵਿਕਲਪ 1: Visual Studio Code ਦੀ ਵਰਤੋਂ ਕਰਨਾ** 1. Visual Studio Code ਖੋਲ੍ਹੋ 2. "File" → "Open Folder" 'ਤੇ ਕਲਿਕ ਕਰੋ ਜਾਂ `Ctrl+K, Ctrl+O` (Windows/Linux) ਜਾਂ `Cmd+K, Cmd+O` (Mac) ਦੀ ਵਰਤੋਂ ਕਰੋ 3. `terrarium` ਨਾਮਕ ਇੱਕ ਨਵਾਂ ਫੋਲਡਰ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ ਚੁਣੋ 4. Explorer ਪੈਨ ਵਿੱਚ, "New File" ਆਈਕਨ 'ਤੇ ਕਲਿਕ ਕਰੋ 5. ਆਪਣੀ ਫਾਈਲ ਨੂੰ `index.html` ਨਾਮ ਦਿਓ ![VS Code Explorer ਵਿੱਚ ਨਵੀਂ ਫਾਈਲ ਬਣਾਉਣ ਦੀ ਦਿਖਾਈ](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.pa.png) **ਵਿਕਲਪ 2: ਟਰਮੀਨਲ ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਨਾ** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **ਇਹ ਕਮਾਂਡ ਕੀ ਕਰਦੀਆਂ ਹਨ:** - **ਨਵਾਂ ਡਾਇਰੈਕਟਰੀ** `terrarium` ਬਣਾਉਂਦਾ ਹੈ - **ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਜਾਂਦਾ ਹੈ** - **ਖਾਲੀ `index.html` ਫਾਈਲ** ਬਣਾਉਂਦਾ ਹੈ - **Visual Studio Code ਵਿੱਚ ਫਾਈਲ ਖੋਲ੍ਹਦਾ ਹੈ** ਸੰਪਾਦਨ ਲਈ > 💡 **ਪ੍ਰੋ ਟਿਪ**: ਫਾਈਲ ਨਾਮ `index.html` ਵੈਬ ਵਿਕਾਸ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਹੈ। ਜਦੋਂ ਕੋਈ ਵੈਬਸਾਈਟ 'ਤੇ ਜਾਂਦਾ ਹੈ, ਬ੍ਰਾਊਜ਼ਰ ਆਪਣੇ ਆਪ `index.html` ਨੂੰ ਡਿਫਾਲਟ ਪੇਜ ਵਜੋਂ ਦਿਖਾਉਣ ਲਈ ਲੱਭਦੇ ਹਨ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ `https://mysite.com/projects/` ਵਰਗਾ URL ਆਪਣੇ ਆਪ `projects` ਫੋਲਡਰ ਤੋਂ `index.html` ਫਾਈਲ ਨੂੰ ਸਰਵ ਕਰੇਗਾ ਬਿਨਾਂ URL ਵਿੱਚ ਫਾਈਲ ਨਾਮ ਦੱਸਣ ਦੀ ਲੋੜ ਹੋਣ ਦੇ। ## HTML ਦਸਤਾਵੇਜ਼ ਢਾਂਚੇ ਨੂੰ ਸਮਝਣਾ ਹਰ HTML ਦਸਤਾਵੇਜ਼ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਢਾਂਚੇ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ ਜਿਸਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸਮਝਣ ਅਤੇ ਦਿਖਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸ ਢਾਂਚੇ ਨੂੰ ਇੱਕ ਅਧਿਕਾਰਤ ਚਿੱਠੀ ਵਾਂਗ ਸੋਚੋ – ਇਸ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਕ੍ਰਮ ਵਿੱਚ ਲੋੜੀਂਦੇ ਤੱਤ ਹੁੰਦੇ ਹਨ ਜੋ ਪ੍ਰਾਪਤਕਰਤਾ (ਇਸ ਮਾਮਲੇ ਵਿੱਚ, ਬ੍ਰਾਊਜ਼ਰ) ਨੂੰ ਸਮੱਗਰੀ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਕਿਰਿਆ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ। ਆਓ ਉਹ ਅਹਿਮ ਬੁਨਿਆਦ ਸ਼ਾਮਲ ਕਰੀਏ ਜੋ ਹਰ HTML ਦਸਤਾਵੇਜ਼ ਨੂੰ ਲੋੜੀਂਦੀ ਹੁੰਦੀ ਹੈ। ### DOCTYPE ਡਿਕਲੇਰੇਸ਼ਨ ਅਤੇ ਰੂਟ ਐਲਿਮੈਂਟ ਕਿਸੇ ਵੀ HTML ਫਾਈਲ ਦੀ ਪਹਿਲੀ ਦੋ ਲਾਈਨਾਂ ਦਸਤਾਵੇਜ਼ ਦਾ "ਪ੍ਰਸਤਾਵ" ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦਿੰਦੀ ਹੈ: ```html ``` **ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:** - **ਦਸਤਾਵੇਜ਼ ਦੀ ਕਿਸਮ** ਨੂੰ HTML5 ਵਜੋਂ `` ਨਾਲ ਘੋਸ਼ਿਤ ਕਰਦਾ ਹੈ - **ਰੂਟ `` ਐਲਿਮੈਂਟ ਬਣਾਉਂਦਾ ਹੈ** ਜੋ ਸਾਰੀ ਪੇਜ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰੇਗਾ - **ਆਧੁਨਿਕ ਵੈਬ ਮਿਆਰਾਂ ਨੂੰ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ** ਸਹੀ ਬ੍ਰਾਊਜ਼ਰ ਰੇਂਡਰਿੰਗ ਲਈ - **ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਸਥਿਰ ਦਿਖਾਈ ਦੇਣ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ** > 💡 **VS Code ਟਿਪ**: VS Code ਵਿੱਚ ਕਿਸੇ ਵੀ HTML ਟੈਗ 'ਤੇ ਹਵਾਈ ਝਲਕ ਦਿਓ ਤਾਂ ਜੋ MDN Web Docs ਤੋਂ ਮਦਦਗਾਰ ਜਾਣਕਾਰੀ ਦੇਖ ਸਕੋ, ਜਿਸ ਵਿੱਚ ਵਰਤੋਂ ਦੇ ਉਦਾਹਰਨ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਵੇਰਵੇ ਸ਼ਾਮਲ ਹਨ। > 📚 **ਹੋਰ ਸਿੱਖੋ**: DOCTYPE ਡਿਕਲੇਰੇਸ਼ਨ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ "quirks mode" ਵਿੱਚ ਜਾਣ ਤੋਂ ਰੋਕਦਾ ਹੈ, ਜੋ ਬਹੁਤ ਪੁਰਾਣੀਆਂ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਸਹਾਇਤਾ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਸੀ। ਆਧੁਨਿਕ ਵੈਬ ਵਿਕਾਸ ਸਧਾਰਨ `` ਡਿਕਲੇਰੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ [ਮਿਆਰੀ-ਅਨੁਕੂਲ ਰੇਂਡਰਿੰਗ](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ। ## ਅਹਿਮ ਦਸਤਾਵੇਜ਼ ਮੈਟਾਡੇਟਾ ਸ਼ਾਮਲ ਕਰਨਾ HTML ਦਸਤਾਵੇਜ਼ ਦਾ `` ਭਾਗ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜਿਸਦੀ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਖੋਜ ਇੰਜਣਾਂ ਨੂੰ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਪਰ ਜੋ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਪੇਜ 'ਤੇ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦੀ। ਇਸਨੂੰ "ਪਿੱਛੇ-ਦ੍ਰਿਸ਼" ਜਾਣਕਾਰੀ ਵਜੋਂ ਸੋਚੋ ਜੋ ਤੁਹਾਡੇ ਵੈਬਪੇਜ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਨ ਅਤੇ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ ਅਤੇ ਪਲੇਟਫਾਰਮਾਂ 'ਤੇ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਦਿਖਾਈ ਦੇਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ। ਇਹ ਮੈਟਾਡੇਟਾ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਪੇਜ ਨੂੰ ਕਿਵੇਂ ਦਿਖਾਉਣਾ ਹੈ, ਕਿਹੜੀ ਅੱਖਰ ਕੋਡਿੰਗ ਵਰਤਣੀ ਹੈ, ਅਤੇ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਆਕਾਰਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਣਾ ਹੈ – ਪੇਸ਼ੇਵਰ, ਪਹੁੰਚਯੋਗ ਵੈਬਪੇਜ ਬਣਾਉਣ ਲਈ ਇਹ ਸਭ ਜ਼ਰੂਰੀ ਹੈ। ### ਕੰਮ: ਦਸਤਾਵੇਜ਼ ਦਾ ਹੇਡ ਸ਼ਾਮਲ ਕਰੋ ਆਪਣੇ ਖੁੱਲੇ ਅਤੇ ਬੰਦ `` ਟੈਗਾਂ ਦੇ ਵਿਚਕਾਰ ਇਹ `` ਭਾਗ ਸ਼ਾਮਲ ਕਰੋ: ```html Welcome to my Virtual Terrarium ``` **ਹਰ ਤੱਤ ਕੀ ਕਰਦਾ ਹੈ:** - **ਪੇਜ ਦਾ ਸਿਰਲੇਖ ਸੈਟ ਕਰਦਾ ਹੈ** ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬਾਂ ਅਤੇ ਖੋਜ ਨਤੀਜਿਆਂ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ - **UTF-8 ਅੱਖਰ ਕੋਡਿੰਗ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ** ਦੁਨੀਆ ਭਰ ਵਿੱਚ ਸਹੀ ਟੈਕਸਟ ਦਿਖਾਈ ਦੇਣ ਲਈ - **ਆਧੁਨਿਕ ਇੰਟਰਨੈਟ ਐਕਸਪਲੋਰ ਵਰਜਨ ਨਾਲ ਅਨੁਕੂਲਤਾ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ** - **ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਨੂੰ ਸੰਰਚਿਤ ਕਰਦਾ ਹੈ** ਡਿਵਾਈਸ ਚੌੜਾਈ ਦੇ ਨਾਲ ਵਿਊਪੋਰਟ ਸੈਟ ਕਰਕੇ - **ਸ਼ੁਰੂਆਤੀ ਜ਼ੂਮ ਲੈਵਲ ਨੂੰ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ** ਸਮੱਗਰੀ ਨੂੰ ਕੁਦਰਤੀ ਆਕਾਰ ਵਿੱਚ ਦਿਖਾਉਣ ਲਈ > 🤔 **ਇਸ ਬਾਰੇ ਸੋਚੋ**: ਜੇ ਤੁਸੀਂ ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੈਟ ਕਰੋ: ``, ਤਾਂ ਕੀ ਹੋਵੇਗਾ? ਇਹ ਪੇਜ ਨੂੰ ਹਮੇਸ਼ਾ 600 ਪਿਕਸਲ ਚੌੜਾ ਬਣਾਉਂਦਾ, ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਨੂੰ ਤੋੜਦਾ! [ਸਹੀ ਵਿਊਪੋਰਟ ਸੰਰਚਨਾ](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) ਬਾਰੇ ਹੋਰ ਜਾਣੋ। ## ਦਸਤਾਵੇਜ਼ ਬਾਡੀ ਬਣਾਉਣਾ HTML ਦੇ `` ਐਲਿਮੈਂਟ ਵਿੱਚ ਤੁਹਾਡੇ ਵੈਬਪੇਜ ਦੀ ਸਾਰੀ ਦਿੱਖਣਯੋਗ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਹੁੰਦੀ ਹੈ – ਉਹ ਸਭ ਕੁਝ ਜੋ ਉਪਭੋਗਤਾ ਵੇਖਣ ਅਤੇ ਇਸ ਨਾਲ ਇੰਟਰਐਕਟ ਕਰਨਗੇ। ਜਦ `` ਭਾਗ ਨੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਨਿਰਦੇਸ਼ ਦਿੱਤੇ, `` ਭਾਗ ਵਿੱਚ ਅਸਲ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਹੁੰਦੀ ਹੈ: ਟੈਕਸਟ, ਚਿੱਤਰ, ਬਟਨ, ਅਤੇ ਹੋਰ ਤੱਤ ਜੋ ਤੁਹਾਡਾ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਬਣਾਉਂਦੇ ਹਨ। ਆਓ ਬਾਡੀ ਢਾਂਚਾ ਸ਼ਾਮਲ ਕਰੀਏ ਅਤੇ ਸਮਝੀਏ ਕਿ HTML ਟੈਗ ਕਿਵੇਂ ਮਿਲ ਕੇ ਅਰਥਪੂਰਨ ਸਮੱਗਰੀ ਬਣਾਉਂਦੇ ਹਨ। ### HTML ਟੈਗ ਢਾਂਚੇ ਨੂੰ ਸਮਝਣਾ HTML ਜੋੜੇ ਟੈਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਤੱਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ। ਜ਼ਿਆਦਾਤਰ ਟੈਗਾਂ ਵਿੱਚ ਇੱਕ ਖੁੱਲ੍ਹਣ ਵਾਲਾ ਟੈਗ ਜਿਵੇਂ `

` ਅਤੇ ਇੱਕ ਬੰਦ ਕਰਨ ਵਾਲਾ ਟੈਗ ਜਿਵੇਂ `

` ਹੁੰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਸਮੱਗਰੀ ਵਿਚਕਾਰ ਹੁੰਦੀ ਹੈ: `

Hello, world!

`। ਇਹ ਇੱਕ ਪੈਰਾ ਤੱਤ ਬਣਾਉਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ "Hello, world!" ਟੈਕਸਟ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ। ### ਕੰਮ: ਬਾਡੀ ਐਲਿਮੈਂਟ ਸ਼ਾਮਲ ਕਰੋ ਆਪਣੀ HTML ਫਾਈਲ ਨੂੰ ਅਪਡੇਟ ਕਰੋ ਤਾਂ ਜੋ `` ਐਲਿਮੈਂਟ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕੇ: ```html Welcome to my Virtual Terrarium ``` **ਇਹ ਪੂਰਾ ਢਾਂਚਾ ਕੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:** - **ਮੁੱਢਲੀ HTML5 ਦਸਤਾਵੇਜ਼ ਫਰੇਮਵਰਕ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ** - **ਸਹੀ ਬ੍ਰਾਊਜ਼ਰ ਰੇਂਡਰਿੰਗ ਲਈ ਅਹਿਮ ਮੈਟਾਡੇਟਾ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** - **ਦਿੱਖਣਯੋਗ ਸਮੱਗਰੀ ਲਈ ਖਾਲੀ ਬਾਡੀ ਬਣਾਉਂਦਾ ਹੈ** - **ਆਧੁਨਿਕ ਵੈਬ ਵਿਕਾਸ ਦੇ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ** ਹੁਣ ਤੁਸੀਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਦੇ ਦਿੱਖਣਯੋਗ ਤੱਤ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ। ਅਸੀਂ `
` ਐਲਿਮੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਵੱਖ-ਵੱਖ ਸਮੱਗਰੀ ਦੇ ਭਾਗਾਂ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਲਈ, ਅਤੇ `` ਐਲਿਮੈਂਟਸ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰ ਦਿਖਾਉਣ ਲਈ। ### ਚਿੱਤਰਾਂ ਅਤੇ ਲੇਆਉਟ ਕੰਟੇਨਰਾਂ ਨਾਲ ਕੰਮ ਕਰਨਾ HTML ਵਿੱਚ ਚਿੱਤਰ ਵਿਸ਼ੇਸ਼ ਹੁੰਦੇ ਹਨ ਕਿਉਂਕਿ ਉਹ "ਸਵੈ-ਬੰਦ" ਟੈਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। `

` ਵਰਗੇ ਤੱਤਾਂ ਦੇ ਵਿਰੁੱਧ, ਜੋ ਸਮੱਗਰੀ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਹੁੰਦੇ ਹਨ, `` ਟੈਗ ਸਾਰੇ ਜਾਣਕਾਰੀ ਨੂੰ ਆਪਣੇ ਆਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜਿਵੇਂ `src` ਚਿੱਤਰ ਫਾਈਲ ਪਾਥ ਲਈ ਅਤੇ `alt` ਪਹੁੰਚਯੋਗਤਾ ਲਈ। ਚਿੱਤਰਾਂ ਨੂੰ ਆਪਣੇ HTML ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਤੁਹਾਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਫਾਈਲਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸੰਗਠਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ, ਇੱਕ ਚਿੱਤਰਾਂ ਦਾ ਫੋਲਡਰ ਬਣਾਉਣ ਅਤੇ ਪੌਦਿਆਂ ਦੇ ਗ੍ਰਾਫਿਕਸ ਸ਼ਾਮਲ ਕਰਨ ਦੁਆਰਾ। **ਪਹਿਲਾਂ, ਆਪਣੇ ਚਿੱਤਰ ਸੈਟਅੱਪ ਕਰੋ:** 1. ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਵਿੱਚ `images` ਨਾਮਕ ਫੋਲਡਰ ਬਣਾਓ 2. [solution folder](../../../../3-terrarium/solution/images) ਤੋਂ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰ ਡਾਊਨਲੋਡ ਕਰੋ (ਕੁੱਲ 14 ਪੌਦੇ) 3. ਸਾਰੇ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰ ਆਪਣੇ ਨਵੇਂ `images` ਫੋਲਡਰ ਵਿੱਚ ਕਾਪੀ ਕਰੋ ### ਕੰਮ: ਪੌਦੇ ਦਿਖਾਉਣ ਦਾ ਲੇਆਉਟ ਬਣਾਓ ਹੁਣ ਆਪਣੇ `` ਟੈਗਾਂ ਦੇ ਵਿਚਕਾਰ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰ ਦੋ ਕਾਲਮਾਂ ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਕੇ ਸ਼ਾਮਲ ਕਰੋ: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **ਇਸ ਕੋਡ ਵਿੱਚ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:** - **ਮੁੱਖ ਪੇਜ ਕੰਟੇਨਰ ਬਣਾਉਂਦਾ ਹੈ** `id="page"` ਨਾਲ ਜੋ ਸਾਰੀ ਸਮੱਗਰੀ ਨੂੰ ਰੱਖੇਗਾ - **ਦੋ ਕਾਲਮ ਕੰਟੇਨਰ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ**: `left-container` ਅਤੇ `right-container` - **7 ਪੌਦਿਆਂ ਨੂੰ ਖੱਬੇ ਕਾਲਮ ਵਿੱਚ ਅਤੇ 7 ਪੌਦਿਆਂ ਨੂੰ ਸੱਜੇ ਕਾਲਮ ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ** - **ਹਰ ਪੌਦੇ ਦੇ ਚਿੱਤਰ ਨੂੰ ਇੱਕ `plant-holder` div ਵਿੱਚ ਲਪੇਟਦਾ ਹੈ** ਵਿਅਕਤੀਗਤ ਸਥਿਤੀ ਲਈ - **CSS ਸਟਾਈਲਿੰਗ ਲਈ ਸਥਿਰ ਕਲਾਸ ਨਾਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ** ਅਗਲੇ ਪਾਠ ਵਿੱਚ - **JavaScript ਇੰਟਰਐਕਸ਼ਨ ਲਈ ਹਰ ਪੌਦੇ ਦੇ ਚਿੱਤਰ ਨੂੰ ਵਿਲੱਖਣ IDs ਦਿੰਦਾ ਹੈ** - **ਚਿੱਤਰਾਂ ਦੇ ਫਾਈਲ ਪਾਥਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ `images` ਫੋਲਡਰ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ** > 🤔 **ਇਸ ਬਾਰੇ ਸੋਚੋ**: ਧਿਆਨ ਦਿਓ ਕਿ ਸਾਰੇ ਚਿੱਤਰਾਂ ਵਿੱਚ ਵਰਤਮਾਨ ਵਿੱਚ ਇੱਕੋ ਜਿਹਾ alt ਟੈਕਸਟ "plant" ਹੈ। ਇਹ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਆਦਰਸ਼ ਨਹੀਂ ਹੈ। ਸਕ੍ਰੀਨ ਰੀਡਰ ਉ **ਪ੍ਰੋੰਪਟ:** ਇੱਕ ਸੈਮੈਂਟਿਕ HTML ਸੈਕਸ਼ਨ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਮੁੱਖ ਸਿਰਲੇਖ "ਪੌਦੇ ਦੀ ਦੇਖਭਾਲ ਗਾਈਡ", ਤਿੰਨ ਉਪ-ਸੈਕਸ਼ਨ "ਪਾਣੀ ਦੇਣਾ", "ਰੋਸ਼ਨੀ ਦੀਆਂ ਲੋੜਾਂ", ਅਤੇ "ਮਿੱਟੀ ਦੀ ਦੇਖਭਾਲ" ਦੇ ਸਿਰਲੇਖਾਂ ਨਾਲ ਹੋਣ, ਹਰ ਇੱਕ ਵਿੱਚ ਪੌਦੇ ਦੀ ਦੇਖਭਾਲ ਦੀ ਜਾਣਕਾਰੀ ਵਾਲਾ ਇੱਕ ਪੈਰਾ ਸ਼ਾਮਲ ਹੋਵੇ। ਸਮੁੱਚੇ ਸਮੱਗਰੀ ਨੂੰ ਢਾਂਚੇਬੱਧ ਕਰਨ ਲਈ ਠੀਕ ਸੈਮੈਂਟਿਕ HTML ਟੈਗ ਜਿਵੇਂ ਕਿ `
`, `

`, `

`, ਅਤੇ `

` ਵਰਤੋ। [Agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਜਾਣੋ। ## HTML ਇਤਿਹਾਸ ਚੈਲੈਂਜ ਦੀ ਖੋਜ ਕਰੋ **ਵੈੱਬ ਵਿਕਾਸ ਬਾਰੇ ਸਿੱਖਣਾ** HTML ਨੇ 1990 ਵਿੱਚ CERN ਵਿੱਚ Tim Berners-Lee ਦੁਆਰਾ ਪਹਿਲਾ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ ਕਾਫ਼ੀ ਤਰੱਕੀ ਕੀਤੀ ਹੈ। ਕੁਝ ਪੁਰਾਣੇ ਟੈਗ ਜਿਵੇਂ ਕਿ `` ਹੁਣ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ ਗਏ ਹਨ ਕਿਉਂਕਿ ਇਹ ਆਧੁਨਿਕ ਐਕਸੈਸਬਿਲਿਟੀ ਮਿਆਰਾਂ ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਸਿਧਾਂਤਾਂ ਨਾਲ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਨਹੀਂ ਕਰਦੇ। **ਇਹ ਤਜਰਬਾ ਕਰੋ:** 1. ਅਪਣੇ `

` ਸਿਰਲੇਖ ਨੂੰ ਅਸਥਾਈ ਤੌਰ 'ਤੇ `` ਟੈਗ ਵਿੱਚ ਲਪੇਟੋ: `

ਮੇਰਾ ਟੈਰੀਅਮ

` 2. ਆਪਣਾ ਪੰਨਾ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ ਅਤੇ ਸਕ੍ਰੋਲਿੰਗ ਪ੍ਰਭਾਵ ਨੂੰ ਦੇਖੋ 3. ਸੋਚੋ ਕਿ ਇਹ ਟੈਗ ਕਿਉਂ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤਾ ਗਿਆ ਸੀ (ਸੁਝਾਅ: ਯੂਜ਼ਰ ਅਨੁਭਵ ਅਤੇ ਐਕਸੈਸਬਿਲਿਟੀ ਬਾਰੇ ਸੋਚੋ) 4. `` ਟੈਗ ਨੂੰ ਹਟਾਓ ਅਤੇ ਸੈਮੈਂਟਿਕ ਮਾਰਕਅੱਪ 'ਤੇ ਵਾਪਸ ਜਾਓ **ਚਿੰਤਨ ਪ੍ਰਸ਼ਨ:** - ਸਕ੍ਰੋਲਿੰਗ ਸਿਰਲੇਖ ਵਿਜ਼ੂਅਲ ਅਪੰਗਤਾ ਜਾਂ ਮੋਸ਼ਨ ਸੰਵੇਦਨਸ਼ੀਲਤਾ ਵਾਲੇ ਯੂਜ਼ਰਾਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰ ਸਕਦਾ ਹੈ? - ਕਿਹੜੀਆਂ ਆਧੁਨਿਕ CSS ਤਕਨੀਕਾਂ ਇਸੇ ਜਿਹੇ ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਵਧੇਰੇ ਐਕਸੈਸਬਲ ਤਰੀਕੇ ਨਾਲ ਹਾਸਲ ਕਰ ਸਕਦੀਆਂ ਹਨ? - ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ ਤੱਤਾਂ ਦੀ ਬਜਾਏ ਮੌਜੂਦਾ ਵੈੱਬ ਮਿਆਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ? [ਪੁਰਾਣੇ ਅਤੇ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ HTML ਤੱਤਾਂ](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) ਬਾਰੇ ਹੋਰ ਖੋਜ ਕਰੋ ਤਾਂ ਜੋ ਵੈੱਬ ਮਿਆਰਾਂ ਨੂੰ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਸੁਧਾਰਨ ਲਈ ਕਿਵੇਂ ਵਿਕਸਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਇਹ ਸਮਝ ਸਕੋ। ## ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼ [ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/16) ## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ **HTML ਬਾਰੇ ਆਪਣਾ ਗਿਆਨ ਵਧਾਓ** HTML ਪਿਛਲੇ 30 ਸਾਲਾਂ ਤੋਂ ਵੈੱਬ ਦਾ ਅਧਾਰ ਰਿਹਾ ਹੈ, ਜੋ ਇੱਕ ਸਧਾਰਨ ਦਸਤਾਵੇਜ਼ ਮਾਰਕਅੱਪ ਭਾਸ਼ਾ ਤੋਂ ਇੰਟਰੈਕਟਿਵ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਇੱਕ ਉੱਚ-ਤਕਨੀਕੀ ਪਲੇਟਫਾਰਮ ਵਿੱਚ ਵਿਕਸਿਤ ਹੋਇਆ ਹੈ। ਇਸ ਵਿਕਾਸ ਨੂੰ ਸਮਝਣ ਨਾਲ ਤੁਹਾਨੂੰ ਆਧੁਨਿਕ ਵੈੱਬ ਮਿਆਰਾਂ ਦੀ ਕਦਰ ਕਰਨ ਅਤੇ ਵਧੀਆ ਵਿਕਾਸ ਫੈਸਲੇ ਕਰਨ ਵਿੱਚ ਮਦਦ ਮਿਲਦੀ ਹੈ। **ਸਿਫਾਰਸ਼ੀ ਸਿੱਖਣ ਦੇ ਰਾਹ:** 1. **HTML ਇਤਿਹਾਸ ਅਤੇ ਵਿਕਾਸ** - HTML 1.0 ਤੋਂ HTML5 ਤੱਕ ਟਾਈਮਲਾਈਨ ਦੀ ਖੋਜ ਕਰੋ - ਕਿਉਂ ਕੁਝ ਟੈਗ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ ਗਏ (ਐਕਸੈਸਬਿਲਿਟੀ, ਮੋਬਾਈਲ-ਫ੍ਰੈਂਡਲੀਨੈਸ, ਮੇਂਟੇਨਬਿਲਿਟੀ) - ਉਭਰ ਰਹੀਆਂ HTML ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਪ੍ਰਸਤਾਵਾਂ ਦੀ ਜਾਂਚ ਕਰੋ 2. **ਸੈਮੈਂਟਿਕ HTML ਦੀ ਗਹਿਰਾਈ ਵਿੱਚ ਖੋਜ** - [HTML5 ਸੈਮੈਂਟਿਕ ਤੱਤਾਂ](https://developer.mozilla.org/docs/Web/HTML/Element) ਦੀ ਪੂਰੀ ਸੂਚੀ ਦਾ ਅਧਿਐਨ ਕਰੋ - ਇਹ ਪਛਾਣਣ ਦੀ ਅਭਿਆਸ ਕਰੋ ਕਿ `
`, `
`, `