31 KiB

Raw Blame History Unescape Escape

ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 1: HTML ਦਾ ਪਰਿਚਯ

ਸਕੈਚਨੋਟ Tomomi Imura ਵੱਲੋਂ

HTML, ਜਾਂ HyperText Markup Language, ਹਰ ਵੈਬਸਾਈਟ ਦੀ ਬੁਨਿਆਦ ਹੈ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਕਦੇ ਵੀ ਵੇਖਿਆ ਹੈ। HTML ਨੂੰ ਵੈਬ ਪੇਜਾਂ ਨੂੰ ਬਣਾਉਣ ਵਾਲੇ ਢਾਂਚੇ ਵਜੋਂ ਸੋਚੋ – ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਸਮੱਗਰੀ ਕਿੱਥੇ ਜਾਂਦੀ ਹੈ, ਕਿਵੇਂ ਸੰਗਠਿਤ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਅਤੇ ਹਰ ਹਿੱਸਾ ਕੀ ਦਰਸਾਉਂਦਾ ਹੈ। ਜਦ CSS ਤੁਹਾਡੇ HTML ਨੂੰ ਰੰਗਾਂ ਅਤੇ ਲੇਆਉਟ ਨਾਲ "ਸਜਾਉਂਦਾ" ਹੈ, ਅਤੇ JavaScript ਇਸ ਨੂੰ ਇੰਟਰਐਕਟਿਵਿਟੀ ਨਾਲ "ਜੀਵੰਤ" ਕਰਦਾ ਹੈ, HTML ਉਹ ਅਹਿਮ ਢਾਂਚਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਬਾਕੀ ਸਭ ਕੁਝ ਸੰਭਵ ਬਣਾਉਂਦਾ ਹੈ।

ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਵਰਚੁਅਲ ਟੈਰੀਰੀਅਮ ਇੰਟਰਫੇਸ ਲਈ HTML ਢਾਂਚਾ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹੋ। ਇਹ ਹੱਥ-ਵਰਤੋਂ ਪ੍ਰੋਜੈਕਟ ਤੁਹਾਨੂੰ ਮੁੱਢਲੇ HTML ਸੰਕਲਪ ਸਿਖਾਏਗਾ ਜਦੋਂ ਤੁਸੀਂ ਕੁਝ ਦ੍ਰਿਸ਼ਮਾਨ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਬਣਾਉਂਦੇ ਹੋ। ਤੁਸੀਂ ਸੈਮਾਂਟਿਕ ਐਲਿਮੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਮੱਗਰੀ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ, ਚਿੱਤਰਾਂ ਨਾਲ ਕੰਮ ਕਰਨ, ਅਤੇ ਇੱਕ ਇੰਟਰਐਕਟਿਵ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਬੁਨਿਆਦ ਬਣਾਉਣ ਦੇ ਤਰੀਕੇ ਸਿੱਖੋਗੇ।

ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਕੰਮ ਕਰਨ ਵਾਲਾ HTML ਪੇਜ ਹੋਵੇਗਾ ਜੋ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰਾਂ ਨੂੰ ਸੰਗਠਿਤ ਕਾਲਮਾਂ ਵਿੱਚ ਦਿਖਾਉਂਦਾ ਹੈ, ਜੋ ਅਗਲੇ ਪਾਠ ਵਿੱਚ ਸਟਾਈਲਿੰਗ ਲਈ ਤਿਆਰ ਹੈ। ਚਿੰਤਾ ਨਾ ਕਰੋ ਜੇ ਇਹ ਸ਼ੁਰੂ ਵਿੱਚ ਬੁਨਿਆਦੀ ਲੱਗਦਾ ਹੈ – CSS ਦੇ ਵਿਜ਼ੂਅਲ ਪੋਲਿਸ਼ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ HTML ਨੂੰ ਇਹੀ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।

ਪਾਠ-ਪਹਿਲਾਂ ਕਵਿਜ਼

📺 ਦੇਖੋ ਅਤੇ ਸਿੱਖੋ: ਇਸ ਮਦਦਗਾਰ ਵੀਡੀਓ ਝਲਕ ਨੂੰ ਦੇਖੋ

ਆਪਣਾ ਪ੍ਰੋਜੈਕਟ ਸੈਟਅੱਪ ਕਰਨਾ

HTML ਕੋਡ ਵਿੱਚ ਡੁੱਬਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇੱਕ ਸਹੀ ਵਰਕਸਪੇਸ ਸੈਟਅੱਪ ਕਰੀਏ। ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਇੱਕ ਸੰਗਠਿਤ ਫਾਈਲ ਢਾਂਚਾ ਬਣਾਉਣਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਆਦਤ ਹੈ ਜੋ ਤੁਹਾਡੇ ਵੈਬ ਵਿਕਾਸ ਯਾਤਰਾ ਦੌਰਾਨ ਤੁਹਾਡੀ ਮਦਦ ਕਰੇਗੀ।

ਕੰਮ: ਆਪਣਾ ਪ੍ਰੋਜੈਕਟ ਢਾਂਚਾ ਬਣਾਓ

ਤੁਸੀਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇੱਕ ਸਮਰਪਿਤ ਫੋਲਡਰ ਬਣਾਓਗੇ ਅਤੇ ਆਪਣੀ ਪਹਿਲੀ HTML ਫਾਈਲ ਸ਼ਾਮਲ ਕਰੋਗੇ। ਇੱਥੇ ਦੋ ਪਹੁੰਚਾਂ ਹਨ ਜੋ ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ:

ਵਿਕਲਪ 1: Visual Studio Code ਦੀ ਵਰਤੋਂ ਕਰਨਾ

Visual Studio Code ਖੋਲ੍ਹੋ
"File" → "Open Folder" 'ਤੇ ਕਲਿਕ ਕਰੋ ਜਾਂ Ctrl+K, Ctrl+O (Windows/Linux) ਜਾਂ Cmd+K, Cmd+O (Mac) ਦੀ ਵਰਤੋਂ ਕਰੋ
terrarium ਨਾਮਕ ਇੱਕ ਨਵਾਂ ਫੋਲਡਰ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ ਚੁਣੋ
Explorer ਪੈਨ ਵਿੱਚ, "New File" ਆਈਕਨ 'ਤੇ ਕਲਿਕ ਕਰੋ
ਆਪਣੀ ਫਾਈਲ ਨੂੰ index.html ਨਾਮ ਦਿਓ

ਵਿਕਲਪ 2: ਟਰਮੀਨਲ ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

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 ਫਾਈਲ ਦੀ ਪਹਿਲੀ ਦੋ ਲਾਈਨਾਂ ਦਸਤਾਵੇਜ਼ ਦਾ "ਪ੍ਰਸਤਾਵ" ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦਿੰਦੀ ਹੈ:

<!DOCTYPE html>
<html></html>

ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:

ਦਸਤਾਵੇਜ਼ ਦੀ ਕਿਸਮ ਨੂੰ HTML5 ਵਜੋਂ <!DOCTYPE html> ਨਾਲ ਘੋਸ਼ਿਤ ਕਰਦਾ ਹੈ
ਰੂਟ <html> ਐਲਿਮੈਂਟ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਸਾਰੀ ਪੇਜ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰੇਗਾ
ਆਧੁਨਿਕ ਵੈਬ ਮਿਆਰਾਂ ਨੂੰ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ ਸਹੀ ਬ੍ਰਾਊਜ਼ਰ ਰੇਂਡਰਿੰਗ ਲਈ
ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਸਥਿਰ ਦਿਖਾਈ ਦੇਣ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ

💡 VS Code ਟਿਪ: VS Code ਵਿੱਚ ਕਿਸੇ ਵੀ HTML ਟੈਗ 'ਤੇ ਹਵਾਈ ਝਲਕ ਦਿਓ ਤਾਂ ਜੋ MDN Web Docs ਤੋਂ ਮਦਦਗਾਰ ਜਾਣਕਾਰੀ ਦੇਖ ਸਕੋ, ਜਿਸ ਵਿੱਚ ਵਰਤੋਂ ਦੇ ਉਦਾਹਰਨ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਵੇਰਵੇ ਸ਼ਾਮਲ ਹਨ।

📚 ਹੋਰ ਸਿੱਖੋ: DOCTYPE ਡਿਕਲੇਰੇਸ਼ਨ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ "quirks mode" ਵਿੱਚ ਜਾਣ ਤੋਂ ਰੋਕਦਾ ਹੈ, ਜੋ ਬਹੁਤ ਪੁਰਾਣੀਆਂ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਸਹਾਇਤਾ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਸੀ। ਆਧੁਨਿਕ ਵੈਬ ਵਿਕਾਸ ਸਧਾਰਨ <!DOCTYPE html> ਡਿਕਲੇਰੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਮਿਆਰੀ-ਅਨੁਕੂਲ ਰੇਂਡਰਿੰਗ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ।

ਅਹਿਮ ਦਸਤਾਵੇਜ਼ ਮੈਟਾਡੇਟਾ ਸ਼ਾਮਲ ਕਰਨਾ

HTML ਦਸਤਾਵੇਜ਼ ਦਾ <head> ਭਾਗ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜਿਸਦੀ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਖੋਜ ਇੰਜਣਾਂ ਨੂੰ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਪਰ ਜੋ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਪੇਜ 'ਤੇ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦੀ। ਇਸਨੂੰ "ਪਿੱਛੇ-ਦ੍ਰਿਸ਼" ਜਾਣਕਾਰੀ ਵਜੋਂ ਸੋਚੋ ਜੋ ਤੁਹਾਡੇ ਵੈਬਪੇਜ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਨ ਅਤੇ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ ਅਤੇ ਪਲੇਟਫਾਰਮਾਂ 'ਤੇ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਦਿਖਾਈ ਦੇਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ।

ਇਹ ਮੈਟਾਡੇਟਾ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਪੇਜ ਨੂੰ ਕਿਵੇਂ ਦਿਖਾਉਣਾ ਹੈ, ਕਿਹੜੀ ਅੱਖਰ ਕੋਡਿੰਗ ਵਰਤਣੀ ਹੈ, ਅਤੇ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਆਕਾਰਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਣਾ ਹੈ – ਪੇਸ਼ੇਵਰ, ਪਹੁੰਚਯੋਗ ਵੈਬਪੇਜ ਬਣਾਉਣ ਲਈ ਇਹ ਸਭ ਜ਼ਰੂਰੀ ਹੈ।

ਕੰਮ: ਦਸਤਾਵੇਜ਼ ਦਾ ਹੇਡ ਸ਼ਾਮਲ ਕਰੋ

ਆਪਣੇ ਖੁੱਲੇ ਅਤੇ ਬੰਦ <html> ਟੈਗਾਂ ਦੇ ਵਿਚਕਾਰ ਇਹ <head> ਭਾਗ ਸ਼ਾਮਲ ਕਰੋ:

<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

ਹਰ ਤੱਤ ਕੀ ਕਰਦਾ ਹੈ:

ਪੇਜ ਦਾ ਸਿਰਲੇਖ ਸੈਟ ਕਰਦਾ ਹੈ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬਾਂ ਅਤੇ ਖੋਜ ਨਤੀਜਿਆਂ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
UTF-8 ਅੱਖਰ ਕੋਡਿੰਗ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਦੁਨੀਆ ਭਰ ਵਿੱਚ ਸਹੀ ਟੈਕਸਟ ਦਿਖਾਈ ਦੇਣ ਲਈ
ਆਧੁਨਿਕ ਇੰਟਰਨੈਟ ਐਕਸਪਲੋਰ ਵਰਜਨ ਨਾਲ ਅਨੁਕੂਲਤਾ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ
ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਨੂੰ ਸੰਰਚਿਤ ਕਰਦਾ ਹੈ ਡਿਵਾਈਸ ਚੌੜਾਈ ਦੇ ਨਾਲ ਵਿਊਪੋਰਟ ਸੈਟ ਕਰਕੇ
ਸ਼ੁਰੂਆਤੀ ਜ਼ੂਮ ਲੈਵਲ ਨੂੰ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ ਸਮੱਗਰੀ ਨੂੰ ਕੁਦਰਤੀ ਆਕਾਰ ਵਿੱਚ ਦਿਖਾਉਣ ਲਈ

🤔 ਇਸ ਬਾਰੇ ਸੋਚੋ: ਜੇ ਤੁਸੀਂ ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੈਟ ਕਰੋ: <meta name="viewport" content="width=600">, ਤਾਂ ਕੀ ਹੋਵੇਗਾ? ਇਹ ਪੇਜ ਨੂੰ ਹਮੇਸ਼ਾ 600 ਪਿਕਸਲ ਚੌੜਾ ਬਣਾਉਂਦਾ, ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਨੂੰ ਤੋੜਦਾ! ਸਹੀ ਵਿਊਪੋਰਟ ਸੰਰਚਨਾ ਬਾਰੇ ਹੋਰ ਜਾਣੋ।

ਦਸਤਾਵੇਜ਼ ਬਾਡੀ ਬਣਾਉਣਾ

HTML ਦੇ <body> ਐਲਿਮੈਂਟ ਵਿੱਚ ਤੁਹਾਡੇ ਵੈਬਪੇਜ ਦੀ ਸਾਰੀ ਦਿੱਖਣਯੋਗ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਹੁੰਦੀ ਹੈ – ਉਹ ਸਭ ਕੁਝ ਜੋ ਉਪਭੋਗਤਾ ਵੇਖਣ ਅਤੇ ਇਸ ਨਾਲ ਇੰਟਰਐਕਟ ਕਰਨਗੇ। ਜਦ <head> ਭਾਗ ਨੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਨਿਰਦੇਸ਼ ਦਿੱਤੇ, <body> ਭਾਗ ਵਿੱਚ ਅਸਲ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਹੁੰਦੀ ਹੈ: ਟੈਕਸਟ, ਚਿੱਤਰ, ਬਟਨ, ਅਤੇ ਹੋਰ ਤੱਤ ਜੋ ਤੁਹਾਡਾ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਬਣਾਉਂਦੇ ਹਨ।

ਆਓ ਬਾਡੀ ਢਾਂਚਾ ਸ਼ਾਮਲ ਕਰੀਏ ਅਤੇ ਸਮਝੀਏ ਕਿ HTML ਟੈਗ ਕਿਵੇਂ ਮਿਲ ਕੇ ਅਰਥਪੂਰਨ ਸਮੱਗਰੀ ਬਣਾਉਂਦੇ ਹਨ।

HTML ਟੈਗ ਢਾਂਚੇ ਨੂੰ ਸਮਝਣਾ

HTML ਜੋੜੇ ਟੈਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਤੱਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ। ਜ਼ਿਆਦਾਤਰ ਟੈਗਾਂ ਵਿੱਚ ਇੱਕ ਖੁੱਲ੍ਹਣ ਵਾਲਾ ਟੈਗ ਜਿਵੇਂ <p> ਅਤੇ ਇੱਕ ਬੰਦ ਕਰਨ ਵਾਲਾ ਟੈਗ ਜਿਵੇਂ </p> ਹੁੰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਸਮੱਗਰੀ ਵਿਚਕਾਰ ਹੁੰਦੀ ਹੈ: <p>Hello, world!</p>। ਇਹ ਇੱਕ ਪੈਰਾ ਤੱਤ ਬਣਾਉਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ "Hello, world!" ਟੈਕਸਟ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ।

ਕੰਮ: ਬਾਡੀ ਐਲਿਮੈਂਟ ਸ਼ਾਮਲ ਕਰੋ

ਆਪਣੀ HTML ਫਾਈਲ ਨੂੰ ਅਪਡੇਟ ਕਰੋ ਤਾਂ ਜੋ <body> ਐਲਿਮੈਂਟ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕੇ:

<!DOCTYPE html>
<html>
	<head>
		<title>Welcome to my Virtual Terrarium</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body></body>
</html>

ਇਹ ਪੂਰਾ ਢਾਂਚਾ ਕੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:

ਮੁੱਢਲੀ HTML5 ਦਸਤਾਵੇਜ਼ ਫਰੇਮਵਰਕ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ
ਸਹੀ ਬ੍ਰਾਊਜ਼ਰ ਰੇਂਡਰਿੰਗ ਲਈ ਅਹਿਮ ਮੈਟਾਡੇਟਾ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ
ਦਿੱਖਣਯੋਗ ਸਮੱਗਰੀ ਲਈ ਖਾਲੀ ਬਾਡੀ ਬਣਾਉਂਦਾ ਹੈ
ਆਧੁਨਿਕ ਵੈਬ ਵਿਕਾਸ ਦੇ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ

ਹੁਣ ਤੁਸੀਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਦੇ ਦਿੱਖਣਯੋਗ ਤੱਤ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ। ਅਸੀਂ <div> ਐਲਿਮੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਵੱਖ-ਵੱਖ ਸਮੱਗਰੀ ਦੇ ਭਾਗਾਂ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਲਈ, ਅਤੇ <img> ਐਲਿਮੈਂਟਸ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰ ਦਿਖਾਉਣ ਲਈ।

ਚਿੱਤਰਾਂ ਅਤੇ ਲੇਆਉਟ ਕੰਟੇਨਰਾਂ ਨਾਲ ਕੰਮ ਕਰਨਾ

HTML ਵਿੱਚ ਚਿੱਤਰ ਵਿਸ਼ੇਸ਼ ਹੁੰਦੇ ਹਨ ਕਿਉਂਕਿ ਉਹ "ਸਵੈ-ਬੰਦ" ਟੈਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। <p></p> ਵਰਗੇ ਤੱਤਾਂ ਦੇ ਵਿਰੁੱਧ, ਜੋ ਸਮੱਗਰੀ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਹੁੰਦੇ ਹਨ, <img> ਟੈਗ ਸਾਰੇ ਜਾਣਕਾਰੀ ਨੂੰ ਆਪਣੇ ਆਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜਿਵੇਂ src ਚਿੱਤਰ ਫਾਈਲ ਪਾਥ ਲਈ ਅਤੇ alt ਪਹੁੰਚਯੋਗਤਾ ਲਈ।

ਚਿੱਤਰਾਂ ਨੂੰ ਆਪਣੇ HTML ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਤੁਹਾਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਫਾਈਲਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸੰਗਠਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ, ਇੱਕ ਚਿੱਤਰਾਂ ਦਾ ਫੋਲਡਰ ਬਣਾਉਣ ਅਤੇ ਪੌਦਿਆਂ ਦੇ ਗ੍ਰਾਫਿਕਸ ਸ਼ਾਮਲ ਕਰਨ ਦੁਆਰਾ।

ਪਹਿਲਾਂ, ਆਪਣੇ ਚਿੱਤਰ ਸੈਟਅੱਪ ਕਰੋ:

ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਵਿੱਚ images ਨਾਮਕ ਫੋਲਡਰ ਬਣਾਓ
solution folder ਤੋਂ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰ ਡਾਊਨਲੋਡ ਕਰੋ (ਕੁੱਲ 14 ਪੌਦੇ)
ਸਾਰੇ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰ ਆਪਣੇ ਨਵੇਂ images ਫੋਲਡਰ ਵਿੱਚ ਕਾਪੀ ਕਰੋ

ਕੰਮ: ਪੌਦੇ ਦਿਖਾਉਣ ਦਾ ਲੇਆਉਟ ਬਣਾਓ

ਹੁਣ ਆਪਣੇ <body></body> ਟੈਗਾਂ ਦੇ ਵਿਚਕਾਰ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰ ਦੋ ਕਾਲਮਾਂ ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਕੇ ਸ਼ਾਮਲ ਕਰੋ:

<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.pa.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.pa.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.pa.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.pa.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.pa.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.pa.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.pa.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.pa.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.pa.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.pa.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.pa.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.pa.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.pa.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.pa.png" />
		</div>
	</div>
</div>

ਇਸ ਕੋਡ ਵਿੱਚ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:

ਮੁੱਖ ਪੇਜ ਕੰਟੇਨਰ ਬਣਾਉਂਦਾ ਹੈ id="page" ਨਾਲ ਜੋ ਸਾਰੀ ਸਮੱਗਰੀ ਨੂੰ ਰੱਖੇਗਾ
ਦੋ ਕਾਲਮ ਕੰਟੇਨਰ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ: left-container ਅਤੇ right-container
7 ਪੌਦਿਆਂ ਨੂੰ ਖੱਬੇ ਕਾਲਮ ਵਿੱਚ ਅਤੇ 7 ਪੌਦਿਆਂ ਨੂੰ ਸੱਜੇ ਕਾਲਮ ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ
ਹਰ ਪੌਦੇ ਦੇ ਚਿੱਤਰ ਨੂੰ ਇੱਕ plant-holder div ਵਿੱਚ ਲਪੇਟਦਾ ਹੈ ਵਿਅਕਤੀਗਤ ਸਥਿਤੀ ਲਈ
CSS ਸਟਾਈਲਿੰਗ ਲਈ ਸਥਿਰ ਕਲਾਸ ਨਾਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਅਗਲੇ ਪਾਠ ਵਿੱਚ
JavaScript ਇੰਟਰਐਕਸ਼ਨ ਲਈ ਹਰ ਪੌਦੇ ਦੇ ਚਿੱਤਰ ਨੂੰ ਵਿਲੱਖਣ IDs ਦਿੰਦਾ ਹੈ
ਚਿੱਤਰਾਂ ਦੇ ਫਾਈਲ ਪਾਥਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ images ਫੋਲਡਰ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ

🤔 ਇਸ ਬਾਰੇ ਸੋਚੋ: ਧਿਆਨ ਦਿਓ ਕਿ ਸਾਰੇ ਚਿੱਤਰਾਂ ਵਿੱਚ ਵਰਤਮਾਨ ਵਿੱਚ ਇੱਕੋ ਜਿਹਾ alt ਟੈਕਸਟ "plant" ਹੈ। ਇਹ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਆਦਰਸ਼ ਨਹੀਂ ਹੈ। ਸਕ੍ਰੀਨ ਰੀਡਰ ਉ ਪ੍ਰੋੰਪਟ: ਇੱਕ ਸੈਮੈਂਟਿਕ HTML ਸੈਕਸ਼ਨ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਮੁੱਖ ਸਿਰਲੇਖ "ਪੌਦੇ ਦੀ ਦੇਖਭਾਲ ਗਾਈਡ", ਤਿੰਨ ਉਪ-ਸੈਕਸ਼ਨ "ਪਾਣੀ ਦੇਣਾ", "ਰੋਸ਼ਨੀ ਦੀਆਂ ਲੋੜਾਂ", ਅਤੇ "ਮਿੱਟੀ ਦੀ ਦੇਖਭਾਲ" ਦੇ ਸਿਰਲੇਖਾਂ ਨਾਲ ਹੋਣ, ਹਰ ਇੱਕ ਵਿੱਚ ਪੌਦੇ ਦੀ ਦੇਖਭਾਲ ਦੀ ਜਾਣਕਾਰੀ ਵਾਲਾ ਇੱਕ ਪੈਰਾ ਸ਼ਾਮਲ ਹੋਵੇ। ਸਮੁੱਚੇ ਸਮੱਗਰੀ ਨੂੰ ਢਾਂਚੇਬੱਧ ਕਰਨ ਲਈ ਠੀਕ ਸੈਮੈਂਟਿਕ HTML ਟੈਗ ਜਿਵੇਂ ਕਿ <section>, <h2>, <h3>, ਅਤੇ <p> ਵਰਤੋ।

Agent mode ਬਾਰੇ ਹੋਰ ਜਾਣੋ।

HTML ਇਤਿਹਾਸ ਚੈਲੈਂਜ ਦੀ ਖੋਜ ਕਰੋ

ਵੈੱਬ ਵਿਕਾਸ ਬਾਰੇ ਸਿੱਖਣਾ

HTML ਨੇ 1990 ਵਿੱਚ CERN ਵਿੱਚ Tim Berners-Lee ਦੁਆਰਾ ਪਹਿਲਾ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ ਕਾਫ਼ੀ ਤਰੱਕੀ ਕੀਤੀ ਹੈ। ਕੁਝ ਪੁਰਾਣੇ ਟੈਗ ਜਿਵੇਂ ਕਿ <marquee> ਹੁਣ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ ਗਏ ਹਨ ਕਿਉਂਕਿ ਇਹ ਆਧੁਨਿਕ ਐਕਸੈਸਬਿਲਿਟੀ ਮਿਆਰਾਂ ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਸਿਧਾਂਤਾਂ ਨਾਲ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਨਹੀਂ ਕਰਦੇ।

ਇਹ ਤਜਰਬਾ ਕਰੋ:

ਅਪਣੇ <h1> ਸਿਰਲੇਖ ਨੂੰ ਅਸਥਾਈ ਤੌਰ 'ਤੇ <marquee> ਟੈਗ ਵਿੱਚ ਲਪੇਟੋ: <marquee><h1>ਮੇਰਾ ਟੈਰੀਅਮ</h1></marquee>
ਆਪਣਾ ਪੰਨਾ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ ਅਤੇ ਸਕ੍ਰੋਲਿੰਗ ਪ੍ਰਭਾਵ ਨੂੰ ਦੇਖੋ
ਸੋਚੋ ਕਿ ਇਹ ਟੈਗ ਕਿਉਂ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤਾ ਗਿਆ ਸੀ (ਸੁਝਾਅ: ਯੂਜ਼ਰ ਅਨੁਭਵ ਅਤੇ ਐਕਸੈਸਬਿਲਿਟੀ ਬਾਰੇ ਸੋਚੋ)
<marquee> ਟੈਗ ਨੂੰ ਹਟਾਓ ਅਤੇ ਸੈਮੈਂਟਿਕ ਮਾਰਕਅੱਪ 'ਤੇ ਵਾਪਸ ਜਾਓ

ਚਿੰਤਨ ਪ੍ਰਸ਼ਨ:

ਸਕ੍ਰੋਲਿੰਗ ਸਿਰਲੇਖ ਵਿਜ਼ੂਅਲ ਅਪੰਗਤਾ ਜਾਂ ਮੋਸ਼ਨ ਸੰਵੇਦਨਸ਼ੀਲਤਾ ਵਾਲੇ ਯੂਜ਼ਰਾਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰ ਸਕਦਾ ਹੈ?
ਕਿਹੜੀਆਂ ਆਧੁਨਿਕ CSS ਤਕਨੀਕਾਂ ਇਸੇ ਜਿਹੇ ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਵਧੇਰੇ ਐਕਸੈਸਬਲ ਤਰੀਕੇ ਨਾਲ ਹਾਸਲ ਕਰ ਸਕਦੀਆਂ ਹਨ?
ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ ਤੱਤਾਂ ਦੀ ਬਜਾਏ ਮੌਜੂਦਾ ਵੈੱਬ ਮਿਆਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ?

ਪੁਰਾਣੇ ਅਤੇ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ HTML ਤੱਤਾਂ ਬਾਰੇ ਹੋਰ ਖੋਜ ਕਰੋ ਤਾਂ ਜੋ ਵੈੱਬ ਮਿਆਰਾਂ ਨੂੰ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਸੁਧਾਰਨ ਲਈ ਕਿਵੇਂ ਵਿਕਸਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਇਹ ਸਮਝ ਸਕੋ।

ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼

ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ

HTML ਬਾਰੇ ਆਪਣਾ ਗਿਆਨ ਵਧਾਓ

HTML ਪਿਛਲੇ 30 ਸਾਲਾਂ ਤੋਂ ਵੈੱਬ ਦਾ ਅਧਾਰ ਰਿਹਾ ਹੈ, ਜੋ ਇੱਕ ਸਧਾਰਨ ਦਸਤਾਵੇਜ਼ ਮਾਰਕਅੱਪ ਭਾਸ਼ਾ ਤੋਂ ਇੰਟਰੈਕਟਿਵ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਇੱਕ ਉੱਚ-ਤਕਨੀਕੀ ਪਲੇਟਫਾਰਮ ਵਿੱਚ ਵਿਕਸਿਤ ਹੋਇਆ ਹੈ। ਇਸ ਵਿਕਾਸ ਨੂੰ ਸਮਝਣ ਨਾਲ ਤੁਹਾਨੂੰ ਆਧੁਨਿਕ ਵੈੱਬ ਮਿਆਰਾਂ ਦੀ ਕਦਰ ਕਰਨ ਅਤੇ ਵਧੀਆ ਵਿਕਾਸ ਫੈਸਲੇ ਕਰਨ ਵਿੱਚ ਮਦਦ ਮਿਲਦੀ ਹੈ।

ਸਿਫਾਰਸ਼ੀ ਸਿੱਖਣ ਦੇ ਰਾਹ:

HTML ਇਤਿਹਾਸ ਅਤੇ ਵਿਕਾਸ
- HTML 1.0 ਤੋਂ HTML5 ਤੱਕ ਟਾਈਮਲਾਈਨ ਦੀ ਖੋਜ ਕਰੋ
- ਕਿਉਂ ਕੁਝ ਟੈਗ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ ਗਏ (ਐਕਸੈਸਬਿਲਿਟੀ, ਮੋਬਾਈਲ-ਫ੍ਰੈਂਡਲੀਨੈਸ, ਮੇਂਟੇਨਬਿਲਿਟੀ)
- ਉਭਰ ਰਹੀਆਂ HTML ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਪ੍ਰਸਤਾਵਾਂ ਦੀ ਜਾਂਚ ਕਰੋ
ਸੈਮੈਂਟਿਕ HTML ਦੀ ਗਹਿਰਾਈ ਵਿੱਚ ਖੋਜ
- HTML5 ਸੈਮੈਂਟਿਕ ਤੱਤਾਂ ਦੀ ਪੂਰੀ ਸੂਚੀ ਦਾ ਅਧਿਐਨ ਕਰੋ
- ਇਹ ਪਛਾਣਣ ਦੀ ਅਭਿਆਸ ਕਰੋ ਕਿ <article>, <section>, <aside>, ਅਤੇ <main> ਕਦੋਂ ਵਰਤਣਾ ਹੈ
- ਵਧੇਰੇ ਐਕਸੈਸਬਿਲਿਟੀ ਲਈ ARIA ਗੁਣਾਂ ਬਾਰੇ ਸਿੱਖੋ
ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ
- ਰਿਸਪਾਂਸਿਵ ਵੈੱਬਸਾਈਟ ਬਣਾਉਣਾ Microsoft Learn 'ਤੇ ਖੋਜੋ
- ਸਮਝੋ ਕਿ HTML CSS ਅਤੇ JavaScript ਨਾਲ ਕਿਵੇਂ ਇੰਟਿਗ੍ਰੇਟ ਹੁੰਦਾ ਹੈ
- ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ SEO ਬਿਹਤਰ ਅਭਿਆਸਾਂ ਬਾਰੇ ਸਿੱਖੋ