# ਟੈਰੇਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 1: HTML ਦਾ ਪਰਿਚਯ ![HTML ਦਾ ਪਰਿਚਯ](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.pa.png) > ਸਕੈਚਨੋਟ [ਟੋਮੋਮੀ ਇਮੁਰਾ](https://twitter.com/girlie_mac) ਦੁਆਰਾ ## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ਼ [ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ਼](https://ff-quizzes.netlify.app/web/quiz/15) > ਵੀਡੀਓ ਵੇਖੋ > > [![Git ਅਤੇ GitHub ਬੁਨਿਆਦੀਆਂ ਵੀਡੀਓ](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ### ਪਰਿਚਯ HTML, ਜਾਂ ਹਾਈਪਰਟੈਕਸਟ ਮਾਰਕਅੱਪ ਭਾਸ਼ਾ, ਵੈੱਬ ਦਾ 'ਡਾਂਚਾ' ਹੈ। ਜੇ CSS ਤੁਹਾਡੇ HTML ਨੂੰ 'ਸਜਾਉਂਦਾ' ਹੈ ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਇਸਨੂੰ ਜ਼ਿੰਦਗੀ ਦਿੰਦਾ ਹੈ, ਤਾਂ HTML ਤੁਹਾਡੇ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਸਰੀਰ ਹੈ। HTML ਦਾ ਸਿੰਟੈਕਸ ਵੀ ਇਸ ਵਿਚਾਰ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ, ਕਿਉਂਕਿ ਇਸ ਵਿੱਚ "head", "body", ਅਤੇ "footer" ਟੈਗ ਸ਼ਾਮਲ ਹਨ। ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਆਪਣੇ ਵਰਚੁਅਲ ਟੈਰੇਰੀਅਮ ਦੇ ਇੰਟਰਫੇਸ ਦਾ 'ਡਾਂਚਾ' ਬਣਾਉਣ ਲਈ HTML ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ। ਇਸ ਵਿੱਚ ਇੱਕ ਸਿਰਲੇਖ ਅਤੇ ਤਿੰਨ ਕਾਲਮ ਹੋਣਗੇ: ਇੱਕ ਸੱਜਾ ਅਤੇ ਇੱਕ ਖੱਬਾ ਕਾਲਮ ਜਿੱਥੇ ਖਿੱਚ ਕੇ ਰੱਖਣ ਵਾਲੇ ਪੌਦੇ ਹੋਣਗੇ, ਅਤੇ ਇੱਕ ਕੇਂਦਰੀ ਖੇਤਰ ਜੋ ਅਸਲ ਵਿੱਚ ਕੱਚ ਵਰਗਾ ਟੈਰੇਰੀਅਮ ਹੋਵੇਗਾ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਕਾਲਮਾਂ ਵਿੱਚ ਪੌਦੇ ਦੇਖ ਸਕੋਗੇ, ਪਰ ਇੰਟਰਫੇਸ ਕੁਝ ਅਜੀਬ ਲੱਗੇਗਾ; ਚਿੰਤਾ ਨਾ ਕਰੋ, ਅਗਲੇ ਭਾਗ ਵਿੱਚ ਤੁਸੀਂ CSS ਸ਼ੈਲੀਆਂ ਨੂੰ ਇੰਟਰਫੇਸ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਕੇ ਇਸਨੂੰ ਵਧੀਆ ਬਣਾਉਣਗੇ। ### ਕੰਮ ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ 'terrarium' ਨਾਮਕ ਫੋਲਡਰ ਬਣਾਓ ਅਤੇ ਇਸਦੇ ਅੰਦਰ 'index.html' ਨਾਮਕ ਫਾਈਲ ਬਣਾਓ। ਤੁਸੀਂ ਇਹ ਕੰਮ Visual Studio Code ਵਿੱਚ ਕਰ ਸਕਦੇ ਹੋ, ਜਦੋਂ ਤੁਸੀਂ ਆਪਣਾ ਟੈਰੇਰੀਅਮ ਫੋਲਡਰ ਬਣਾਉਂਦੇ ਹੋ, ਨਵੀਂ VS Code ਵਿੰਡੋ ਖੋਲ੍ਹੋ, 'open folder' 'ਤੇ ਕਲਿੱਕ ਕਰੋ, ਅਤੇ ਆਪਣੇ ਨਵੇਂ ਫੋਲਡਰ ਵਿੱਚ ਜਾਓ। ਐਕਸਪਲੋਰਰ ਪੈਨ ਵਿੱਚ ਛੋਟੇ 'file' ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ: ![VS Code ਵਿੱਚ ਐਕਸਪਲੋਰਰ](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.pa.png) ਜਾਂ ਆਪਣੇ ਗਿਟ ਬੈਸ਼ 'ਤੇ ਇਹ ਕਮਾਂਡਾਂ ਵਰਤੋ: * `mkdir terrarium` * `cd terrarium` * `touch index.html` * `code index.html` ਜਾਂ `nano index.html` > index.html ਫਾਈਲਾਂ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦਰਸਾਉਂਦੀਆਂ ਹਨ ਕਿ ਇਹ ਫੋਲਡਰ ਵਿੱਚ ਡਿਫਾਲਟ ਫਾਈਲ ਹੈ; URLs ਜਿਵੇਂ ਕਿ `https://anysite.com/test` ਇੱਕ ਫੋਲਡਰ ਸਟ੍ਰਕਚਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ ਜਿਸ ਵਿੱਚ `test` ਨਾਮਕ ਫੋਲਡਰ ਅਤੇ ਇਸਦੇ ਅੰਦਰ `index.html` ਸ਼ਾਮਲ ਹੈ; `index.html` ਨੂੰ URL ਵਿੱਚ ਦਿਖਾਉਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ। --- ## ਡੌਕਟਾਈਪ ਅਤੇ html ਟੈਗ HTML ਫਾਈਲ ਦੀ ਪਹਿਲੀ ਲਾਈਨ ਇਸਦਾ ਡੌਕਟਾਈਪ ਹੁੰਦੀ ਹੈ। ਇਹ ਥੋੜ੍ਹਾ ਹੈਰਾਨੀਜਨਕ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਇਹ ਲਾਈਨ ਫਾਈਲ ਦੇ ਬਿਲਕੁਲ ਉੱਪਰ ਰੱਖਣੀ ਪੈਂਦੀ ਹੈ, ਪਰ ਇਹ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਦੱਸਦੀ ਹੈ ਕਿ ਪੇਜ ਨੂੰ ਮੌਜੂਦਾ HTML ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਅਨੁਸਾਰ ਸਟੈਂਡਰਡ ਮੋਡ ਵਿੱਚ ਰੈਂਡਰ ਕਰਨਾ ਹੈ। > ਟਿੱਪ: VS Code ਵਿੱਚ, ਤੁਸੀਂ ਕਿਸੇ ਟੈਗ 'ਤੇ ਹੋਵਰ ਕਰਕੇ ਇਸਦੇ ਵਰਤੋਂ ਦੇ ਬਾਰੇ ਜਾਣਕਾਰੀ MDN ਰੈਫਰੈਂਸ ਗਾਈਡ ਤੋਂ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ। ਦੂਜੀ ਲਾਈਨ `` ਟੈਗ ਦੀ ਖੁਲ੍ਹਣ ਵਾਲੀ ਲਾਈਨ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ, ਜਿਸਦੇ ਤੁਰੰਤ ਬਾਅਦ ਇਸਦੀ ਬੰਦ ਕਰਨ ਵਾਲੀ ਲਾਈਨ `` ਹੋਵੇਗੀ। ਇਹ ਟੈਗ ਤੁਹਾਡੇ ਇੰਟਰਫੇਸ ਦੇ ਰੂਟ ਐਲੀਮੈਂਟ ਹਨ। ### ਕੰਮ ਆਪਣੀ `index.html` ਫਾਈਲ ਦੇ ਉੱਪਰ ਇਹ ਲਾਈਨਾਂ ਸ਼ਾਮਲ ਕਰੋ: ```HTML ``` ✅ ਕੁਝ ਵੱਖ-ਵੱਖ ਮੋਡ ਹਨ ਜੋ ਡੌਕਟਾਈਪ ਨੂੰ ਇੱਕ ਕਵੈਰੀ ਸਟ੍ਰਿੰਗ ਨਾਲ ਸੈਟ ਕਰਕੇ ਨਿਰਧਾਰਤ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ: [ਕਵਿਰਕਸ ਮੋਡ ਅਤੇ ਸਟੈਂਡਰਡ ਮੋਡ](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)। ਇਹ ਮੋਡ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰਾਂ (Netscape Navigator 4 ਅਤੇ Internet Explorer 5) ਨੂੰ ਸਹਾਇਤਾ ਦੇਣ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਸਨ ਜੋ ਹੁਣ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤੇ ਨਹੀਂ ਜਾਂਦੇ। ਤੁਸੀਂ ਸਟੈਂਡਰਡ ਡੌਕਟਾਈਪ ਡਿਕਲੇਰੇਸ਼ਨ ਨਾਲ ਹੀ ਚਿਪਕੇ ਰਹੋ। --- ## ਦਸਤਾਵੇਜ਼ ਦਾ 'head' HTML ਦਸਤਾਵੇਜ਼ ਦਾ 'head' ਖੇਤਰ ਤੁਹਾਡੇ ਵੈੱਬ ਪੇਜ ਬਾਰੇ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ, ਜਿਸਨੂੰ [ਮੈਟਾਡੇਟਾ](https://developer.mozilla.org/docs/Web/HTML/Element/meta) ਕਿਹਾ ਜਾਂਦਾ ਹੈ। ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਅਸੀਂ ਵੈੱਬ ਸਰਵਰ ਨੂੰ ਦੱਸਦੇ ਹਾਂ ਜਿਸ 'ਤੇ ਇਹ ਪੇਜ ਰੈਂਡਰ ਕਰਨ ਲਈ ਭੇਜਿਆ ਜਾਵੇਗਾ, ਇਹ ਚਾਰ ਚੀਜ਼ਾਂ: - ਪੇਜ ਦਾ ਸਿਰਲੇਖ - ਪੇਜ ਮੈਟਾਡੇਟਾ ਜਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਹੈ: - 'ਕੈਰੈਕਟਰ ਸੈੱਟ', ਜੋ ਦੱਸਦਾ ਹੈ ਕਿ ਪੇਜ ਵਿੱਚ ਕਿਹੜੀ ਕੈਰੈਕਟਰ ਐਨਕੋਡਿੰਗ ਵਰਤੀ ਗਈ ਹੈ - ਬ੍ਰਾਊਜ਼ਰ ਜਾਣਕਾਰੀ, ਜਿਸ ਵਿੱਚ `x-ua-compatible` ਸ਼ਾਮਲ ਹੈ ਜੋ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ IE=edge ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਕ ਹੈ - ਜਾਣਕਾਰੀ ਕਿ ਜਦੋਂ ਪੇਜ ਲੋਡ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਵਿਊਪੋਰਟ ਕਿਵੇਂ ਵਰਤਾਰ ਕਰੇ। ਵਿਊਪੋਰਟ ਨੂੰ ਸ਼ੁਰੂਆਤੀ ਸਕੇਲ 1 'ਤੇ ਸੈਟ ਕਰਨਾ ਪੇਜ ਦੇ ਪਹਿਲੀ ਵਾਰ ਲੋਡ ਹੋਣ 'ਤੇ ਜ਼ੂਮ ਪੱਧਰ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਦਾ ਹੈ। ### ਕੰਮ ਆਪਣੇ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ `` ਟੈਗਾਂ ਦੇ ਖੁਲ੍ਹਣ ਅਤੇ ਬੰਦ ਕਰਨ ਵਾਲੇ ਟੈਗਾਂ ਦੇ ਵਿਚਕਾਰ ਇੱਕ 'head' ਬਲਾਕ ਸ਼ਾਮਲ ਕਰੋ। ```html Welcome to my Virtual Terrarium ``` ✅ ਕੀ ਹੋਵੇਗਾ ਜੇ ਤੁਸੀਂ ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੈਟ ਕਰੋ: ``? ਵਿਊਪੋਰਟ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ [ਵਿਊਪੋਰਟ](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)। --- ## ਦਸਤਾਵੇਜ਼ ਦਾ `body` ### HTML ਟੈਗ HTML ਵਿੱਚ, ਤੁਸੀਂ ਆਪਣੇ .html ਫਾਈਲ ਵਿੱਚ ਟੈਗ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋ ਤਾਂ ਜੋ ਵੈੱਬ ਪੇਜ ਦੇ ਤੱਤ ਬਣ ਸਕਣ। ਹਰ ਟੈਗ ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਖੁਲ੍ਹਣ ਵਾਲਾ ਅਤੇ ਬੰਦ ਕਰਨ ਵਾਲਾ ਟੈਗ ਰੱਖਦਾ ਹੈ, ਜਿਵੇਂ: `

hello

` ਪੈਰਾ ਦਰਸਾਉਣ ਲਈ। ਆਪਣੇ ਇੰਟਰਫੇਸ ਦਾ ਸਰੀਰ ਬਣਾਉਣ ਲਈ `` ਟੈਗਾਂ ਦੇ ਇੱਕ ਸੈੱਟ ਨੂੰ `` ਟੈਗ ਜੋੜੇ ਦੇ ਅੰਦਰ ਸ਼ਾਮਲ ਕਰੋ; ਹੁਣ ਤੁਹਾਡਾ ਮਾਰਕਅੱਪ ਇਸ ਤਰ੍ਹਾਂ ਲੱਗਦਾ ਹੈ: ### ਕੰਮ ```html Welcome to my Virtual Terrarium ``` ਹੁਣ, ਤੁਸੀਂ ਆਪਣਾ ਪੇਜ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ। ਆਮ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ ਪੇਜ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਤੱਤ ਬਣਾਉਣ ਲਈ `
` ਟੈਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ। ਅਸੀਂ `
` ਤੱਤਾਂ ਦੀ ਇੱਕ ਲੜੀ ਬਣਾਵਾਂਗੇ ਜੋ ਚਿੱਤਰਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰੇਗੀ। ### ਚਿੱਤਰ ਇੱਕ HTML ਟੈਗ ਜਿਸਨੂੰ ਬੰਦ ਕਰਨ ਵਾਲੇ ਟੈਗ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ, ਉਹ `` ਟੈਗ ਹੈ, ਕਿਉਂਕਿ ਇਸ ਵਿੱਚ ਇੱਕ `src` ਤੱਤ ਹੁੰਦਾ ਹੈ ਜੋ ਪੇਜ ਨੂੰ ਚਿੱਤਰ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਲਈ ਸਾਰੀ ਜਾਣਕਾਰੀ ਦਿੰਦਾ ਹੈ। ਆਪਣੇ ਐਪ ਵਿੱਚ ਇੱਕ ਫੋਲਡਰ ਬਣਾਓ ਜਿਸਦਾ ਨਾਮ `images` ਹੋਵੇ ਅਤੇ ਇਸ ਵਿੱਚ ਸਾਰੇ ਚਿੱਤਰ ਸ਼ਾਮਲ ਕਰੋ ਜੋ [ਸਰੋਤ ਕੋਡ ਫੋਲਡਰ](../../../../3-terrarium/solution/images) ਵਿੱਚ ਹਨ; (ਇੱਥੇ 14 ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰ ਹਨ)। ### ਕੰਮ ਉਹ ਪੌਦੇ ਦੇ ਚਿੱਤਰ `` ਟੈਗਾਂ ਦੇ ਵਿਚਕਾਰ ਦੋ ਕਾਲਮਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` > ਨੋਟ: Spans ਅਤੇ Divs। Divs ਨੂੰ 'ਬਲਾਕ' ਤੱਤ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ, ਅਤੇ Spans ਨੂੰ 'ਇਨਲਾਈਨ'। ਕੀ ਹੋਵੇਗਾ ਜੇ ਤੁਸੀਂ ਇਹ divs ਨੂੰ spans ਵਿੱਚ ਬਦਲ ਦਿੰਦੇ? ਇਸ ਮਾਰਕਅੱਪ ਨਾਲ, ਪੌਦੇ ਹੁਣ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ। ਇਹ ਬਹੁਤ ਮਾੜਾ ਲੱਗਦਾ ਹੈ, ਕਿਉਂਕਿ ਇਹਨਾਂ ਨੂੰ ਅਜੇ CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਜਾਇਆ ਨਹੀਂ ਗਿਆ ਹੈ, ਅਤੇ ਅਸੀਂ ਇਹ ਅਗਲੇ ਪਾਠ ਵਿੱਚ ਕਰਾਂਗੇ। ਹਰ ਚਿੱਤਰ ਵਿੱਚ alt ਟੈਕਸਟ ਹੁੰਦਾ ਹੈ ਜੋ ਉਸ ਸਮੇਂ ਵੀ ਦਿਖਾਈ ਦੇਵੇਗਾ ਜਦੋਂ ਤੁਸੀਂ ਚਿੱਤਰ ਨਹੀਂ ਦੇਖ ਸਕਦੇ ਜਾਂ ਰੈਂਡਰ ਨਹੀਂ ਕਰ ਸਕਦੇ। ਇਹ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਗੁਣ ਹੈ ਜੋ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਪਹੁੰਚਯੋਗਤਾ ਬਾਰੇ ਹੋਰ ਪਾਠਾਂ ਵਿੱਚ ਜ਼ਿਆਦਾ ਸਿੱਖੋ; ਇਸ ਸਮੇਂ ਲਈ, ਯਾਦ ਰੱਖੋ ਕਿ alt ਗੁਣ ਇੱਕ ਚਿੱਤਰ ਲਈ ਵਿਕਲਪਿਕ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੇਕਰ ਕਿਸੇ ਕਾਰਨ ਕਰਕੇ ਉਪਭੋਗਤਾ ਇਸਨੂੰ ਨਹੀਂ ਦੇਖ ਸਕਦਾ (ਧੀਮੀ ਕਨੈਕਸ਼ਨ, src ਗੁਣ ਵਿੱਚ ਗਲਤੀ, ਜਾਂ ਜੇ ਉਪਭੋਗਤਾ ਸਕ੍ਰੀਨ ਰੀਡਰ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ)। ✅ ਕੀ ਤੁਸੀਂ ਨੋਟ ਕੀਤਾ ਕਿ ਹਰ ਚਿੱਤਰ ਵਿੱਚ ਇੱਕੋ ਜਿਹਾ alt ਟੈਗ ਹੈ? ਕੀ ਇਹ ਚੰਗੀ ਪ੍ਰਥਾ ਹੈ? ਕਿਉਂ ਜਾਂ ਕਿਉਂ ਨਹੀਂ? ਕੀ ਤੁਸੀਂ ਇਸ ਕੋਡ ਨੂੰ ਬਿਹਤਰ ਬਣਾ ਸਕਦੇ ਹੋ? --- ## ਸੈਮਾਂਟਿਕ ਮਾਰਕਅੱਪ ਆਮ ਤੌਰ 'ਤੇ, HTML ਲਿਖਣ ਸਮੇਂ ਅਰਥਪੂਰਨ 'ਸੈਮਾਂਟਿਕਸ' ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਪਸੰਦ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਸਦਾ ਕੀ ਮਤਲਬ ਹੈ? ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ HTML ਟੈਗਾਂ ਦੀ ਵਰਤੋਂ ਉਸ ਡੇਟਾ ਜਾਂ ਇੰਟਰੈਕਸ਼ਨ ਦੀ ਕਿਸਮ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਕਰਦੇ ਹੋ ਜਿਸ ਲਈ ਉਹ ਬਣਾਏ ਗਏ ਸਨ। ਉਦਾਹਰਣ ਲਈ, ਪੇਜ ਦੇ ਮੁੱਖ ਸਿਰਲੇਖ ਟੈਕਸਟ ਨੂੰ `

` ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। ਆਪਣੇ ਖੁਲ੍ਹਣ ਵਾਲੇ `` ਟੈਗ ਦੇ ਬਿਲਕੁਲ ਹੇਠਾਂ ਇਹ ਲਾਈਨ ਸ਼ਾਮਲ ਕਰੋ: ```html

My Terrarium

``` ਸੈਮਾਂਟਿਕ ਮਾਰਕਅੱਪ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਜਿਵੇਂ ਕਿ ਸਿਰਲੇਖਾਂ ਨੂੰ `

` ਅਤੇ ਅਣਗਿਣਤ ਸੂਚੀਆਂ ਨੂੰ `
    ` ਵਜੋਂ ਰੈਂਡਰ ਕਰਨਾ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਨੂੰ ਪੇਜ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਆਮ ਤੌਰ 'ਤੇ, ਬਟਨਾਂ ਨੂੰ `

` ਟੈਗ ਤੋਂ ਉੱਪਰ ਇਹ ਮਾਰਕਅੱਪ ਸ਼ਾਮਲ ਕਰੋ: ```html
``` ✅ ਜਦੋਂ ਕਿ ਤੁਸੀਂ ਇਹ ਮਾਰਕਅੱਪ ਸਕ੍ਰੀਨ 'ਤੇ ਸ਼ਾਮਲ ਕੀਤਾ, ਤੁਸੀਂ ਕੁਝ ਵੀ ਰੈਂਡਰ ਨਹੀਂ ਹੋਇਆ ਵੇਖਦੇ। ਕਿਉਂ? --- ## 🚀ਚੁਣੌਤੀ HTML ਵਿੱਚ ਕੁਝ ਪੁਰਾਣੇ 'ਵਾਇਲਡ' ਟੈਗ ਹਨ ਜੋ ਅਜੇ ਵੀ ਖੇਡਣ ਲਈ ਮਜ਼ੇਦਾਰ ਹਨ, ਹਾਲਾਂਕਿ ਤੁਹਾਨੂੰ ਆਪਣੇ ਮਾਰਕਅੱਪ ਵਿੱਚ [ਇਹ ਪੁਰਾਣੇ ਅਤੇ ਅਪ੍ਰਯੋਗ ਟੈਗ](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰਨੀ ਚਾਹੀਦੀ। ਫਿਰ ਵੀ, ਕੀ ਤੁਸੀਂ ਪੁਰਾਣੇ `` ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ h1 ਸਿਰਲੇਖ ਨੂੰ ਹੌਲੀ-ਹੌਲੀ ਹੋਰਿਜ਼ਾਂਟਲੀ ਸਕ੍ਰੋਲ ਕਰ ਸਕਦੇ ਹੋ? (ਜੇ ਤੁਸੀਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਸਨੂੰ ਬਾਅਦ ਵਿੱਚ ਹਟਾਉਣਾ ਨਾ ਭੁੱਲੋ) ## ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵੀਜ਼ [ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵੀਜ਼](https://ff-quizzes.netlify.app/web/quiz/16) ## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ HTML 'ਪ੍ਰਮਾਣਿਤ ਅਤੇ ਸੱਚਾ' ਬਿਲਡਿੰਗ ਬਲਾਕ ਸਿਸਟਮ ਹੈ ਜਿਸਨੇ ਵੈੱਬ ਨੂੰ ਅੱਜ ਦੇ ਰੂਪ ਵਿੱਚ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕੀਤੀ ਹੈ। ਇਸਦੇ ਇਤਿਹਾਸ ਬਾਰੇ ਕੁਝ ਸਿੱਖੋ ਜਿਹੜੇ ਪੁਰਾਣੇ ਅਤੇ ਨਵੇਂ ਟੈਗਾਂ ਬਾਰੇ ਪੜ੍ਹ ਕੇ। ਕੀ ਤੁਸੀਂ ਪਤਾ ਲਗਾ ਸਕਦੇ ਹੋ ਕਿ ਕਿਉਂ ਕੁਝ ਟੈਗ ਅਪ੍ਰਯੋਗ ਹੋ ਗਏ ਅਤੇ ਕੁਝ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ? ਭਵਿੱਖ ਵਿੱਚ ਕਿਹੜੇ ਟੈਗ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ? ਵੈੱਬ ਅਤੇ ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ ਲਈ ਸਾਈਟਾਂ ਬਣਾਉਣ ਬਾਰੇ ਹੋਰ ਸਿੱਖੋ [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ। ## ਅਸਾਈਨਮੈਂਟ [ਆਪਣੀ HTML ਦਾ ਅਭਿਆਸ ਕਰੋ: ਇੱਕ ਬਲੌਗ ਮੌਕਅੱਪ ਬਣਾਓ](assignment.md) --- **ਅਸਵੀਕਾਰਨਾ**: ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।