22 KiB

Raw Permalink Blame History

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

ਸਕੈਚਨੋਟ ਟੋਮੋਮੀ ਇਮੁਰਾ ਦੁਆਰਾ

ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ਼

ਵੀਡੀਓ ਵੇਖੋ

ਪਰਿਚਯ

HTML, ਜਾਂ ਹਾਈਪਰਟੈਕਸਟ ਮਾਰਕਅੱਪ ਭਾਸ਼ਾ, ਵੈੱਬ ਦਾ 'ਡਾਂਚਾ' ਹੈ। ਜੇ CSS ਤੁਹਾਡੇ HTML ਨੂੰ 'ਸਜਾਉਂਦਾ' ਹੈ ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਇਸਨੂੰ ਜ਼ਿੰਦਗੀ ਦਿੰਦਾ ਹੈ, ਤਾਂ HTML ਤੁਹਾਡੇ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਸਰੀਰ ਹੈ। HTML ਦਾ ਸਿੰਟੈਕਸ ਵੀ ਇਸ ਵਿਚਾਰ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ, ਕਿਉਂਕਿ ਇਸ ਵਿੱਚ "head", "body", ਅਤੇ "footer" ਟੈਗ ਸ਼ਾਮਲ ਹਨ।

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

ਕੰਮ

ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ 'terrarium' ਨਾਮਕ ਫੋਲਡਰ ਬਣਾਓ ਅਤੇ ਇਸਦੇ ਅੰਦਰ 'index.html' ਨਾਮਕ ਫਾਈਲ ਬਣਾਓ। ਤੁਸੀਂ ਇਹ ਕੰਮ Visual Studio Code ਵਿੱਚ ਕਰ ਸਕਦੇ ਹੋ, ਜਦੋਂ ਤੁਸੀਂ ਆਪਣਾ ਟੈਰੇਰੀਅਮ ਫੋਲਡਰ ਬਣਾਉਂਦੇ ਹੋ, ਨਵੀਂ VS Code ਵਿੰਡੋ ਖੋਲ੍ਹੋ, 'open folder' 'ਤੇ ਕਲਿੱਕ ਕਰੋ, ਅਤੇ ਆਪਣੇ ਨਵੇਂ ਫੋਲਡਰ ਵਿੱਚ ਜਾਓ। ਐਕਸਪਲੋਰਰ ਪੈਨ ਵਿੱਚ ਛੋਟੇ 'file' ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ:

ਜਾਂ

ਆਪਣੇ ਗਿਟ ਬੈਸ਼ 'ਤੇ ਇਹ ਕਮਾਂਡਾਂ ਵਰਤੋ:

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 ਰੈਫਰੈਂਸ ਗਾਈਡ ਤੋਂ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ।

ਦੂਜੀ ਲਾਈਨ <html> ਟੈਗ ਦੀ ਖੁਲ੍ਹਣ ਵਾਲੀ ਲਾਈਨ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ, ਜਿਸਦੇ ਤੁਰੰਤ ਬਾਅਦ ਇਸਦੀ ਬੰਦ ਕਰਨ ਵਾਲੀ ਲਾਈਨ </html> ਹੋਵੇਗੀ। ਇਹ ਟੈਗ ਤੁਹਾਡੇ ਇੰਟਰਫੇਸ ਦੇ ਰੂਟ ਐਲੀਮੈਂਟ ਹਨ।

ਕੰਮ

ਆਪਣੀ index.html ਫਾਈਲ ਦੇ ਉੱਪਰ ਇਹ ਲਾਈਨਾਂ ਸ਼ਾਮਲ ਕਰੋ:

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

✅ ਕੁਝ ਵੱਖ-ਵੱਖ ਮੋਡ ਹਨ ਜੋ ਡੌਕਟਾਈਪ ਨੂੰ ਇੱਕ ਕਵੈਰੀ ਸਟ੍ਰਿੰਗ ਨਾਲ ਸੈਟ ਕਰਕੇ ਨਿਰਧਾਰਤ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ: ਕਵਿਰਕਸ ਮੋਡ ਅਤੇ ਸਟੈਂਡਰਡ ਮੋਡ। ਇਹ ਮੋਡ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰਾਂ (Netscape Navigator 4 ਅਤੇ Internet Explorer 5) ਨੂੰ ਸਹਾਇਤਾ ਦੇਣ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਸਨ ਜੋ ਹੁਣ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤੇ ਨਹੀਂ ਜਾਂਦੇ। ਤੁਸੀਂ ਸਟੈਂਡਰਡ ਡੌਕਟਾਈਪ ਡਿਕਲੇਰੇਸ਼ਨ ਨਾਲ ਹੀ ਚਿਪਕੇ ਰਹੋ।

ਦਸਤਾਵੇਜ਼ ਦਾ 'head'

HTML ਦਸਤਾਵੇਜ਼ ਦਾ 'head' ਖੇਤਰ ਤੁਹਾਡੇ ਵੈੱਬ ਪੇਜ ਬਾਰੇ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ, ਜਿਸਨੂੰ ਮੈਟਾਡੇਟਾ ਕਿਹਾ ਜਾਂਦਾ ਹੈ। ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਅਸੀਂ ਵੈੱਬ ਸਰਵਰ ਨੂੰ ਦੱਸਦੇ ਹਾਂ ਜਿਸ 'ਤੇ ਇਹ ਪੇਜ ਰੈਂਡਰ ਕਰਨ ਲਈ ਭੇਜਿਆ ਜਾਵੇਗਾ, ਇਹ ਚਾਰ ਚੀਜ਼ਾਂ:

ਪੇਜ ਦਾ ਸਿਰਲੇਖ
ਪੇਜ ਮੈਟਾਡੇਟਾ ਜਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਹੈ:
- 'ਕੈਰੈਕਟਰ ਸੈੱਟ', ਜੋ ਦੱਸਦਾ ਹੈ ਕਿ ਪੇਜ ਵਿੱਚ ਕਿਹੜੀ ਕੈਰੈਕਟਰ ਐਨਕੋਡਿੰਗ ਵਰਤੀ ਗਈ ਹੈ
- ਬ੍ਰਾਊਜ਼ਰ ਜਾਣਕਾਰੀ, ਜਿਸ ਵਿੱਚ x-ua-compatible ਸ਼ਾਮਲ ਹੈ ਜੋ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ IE=edge ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਕ ਹੈ
- ਜਾਣਕਾਰੀ ਕਿ ਜਦੋਂ ਪੇਜ ਲੋਡ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਵਿਊਪੋਰਟ ਕਿਵੇਂ ਵਰਤਾਰ ਕਰੇ। ਵਿਊਪੋਰਟ ਨੂੰ ਸ਼ੁਰੂਆਤੀ ਸਕੇਲ 1 'ਤੇ ਸੈਟ ਕਰਨਾ ਪੇਜ ਦੇ ਪਹਿਲੀ ਵਾਰ ਲੋਡ ਹੋਣ 'ਤੇ ਜ਼ੂਮ ਪੱਧਰ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਦਾ ਹੈ।

ਕੰਮ

ਆਪਣੇ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ <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>

✅ ਕੀ ਹੋਵੇਗਾ ਜੇ ਤੁਸੀਂ ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੈਟ ਕਰੋ: <meta name="viewport" content="width=600">? ਵਿਊਪੋਰਟ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ ਵਿਊਪੋਰਟ।

ਦਸਤਾਵੇਜ਼ ਦਾ `body`

HTML ਟੈਗ

HTML ਵਿੱਚ, ਤੁਸੀਂ ਆਪਣੇ .html ਫਾਈਲ ਵਿੱਚ ਟੈਗ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋ ਤਾਂ ਜੋ ਵੈੱਬ ਪੇਜ ਦੇ ਤੱਤ ਬਣ ਸਕਣ। ਹਰ ਟੈਗ ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਖੁਲ੍ਹਣ ਵਾਲਾ ਅਤੇ ਬੰਦ ਕਰਨ ਵਾਲਾ ਟੈਗ ਰੱਖਦਾ ਹੈ, ਜਿਵੇਂ: <p>hello</p> ਪੈਰਾ ਦਰਸਾਉਣ ਲਈ। ਆਪਣੇ ਇੰਟਰਫੇਸ ਦਾ ਸਰੀਰ ਬਣਾਉਣ ਲਈ <body> ਟੈਗਾਂ ਦੇ ਇੱਕ ਸੈੱਟ ਨੂੰ <html> ਟੈਗ ਜੋੜੇ ਦੇ ਅੰਦਰ ਸ਼ਾਮਲ ਕਰੋ; ਹੁਣ ਤੁਹਾਡਾ ਮਾਰਕਅੱਪ ਇਸ ਤਰ੍ਹਾਂ ਲੱਗਦਾ ਹੈ:

ਕੰਮ

<!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>

ਹੁਣ, ਤੁਸੀਂ ਆਪਣਾ ਪੇਜ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ। ਆਮ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ ਪੇਜ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਤੱਤ ਬਣਾਉਣ ਲਈ <div> ਟੈਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ। ਅਸੀਂ <div> ਤੱਤਾਂ ਦੀ ਇੱਕ ਲੜੀ ਬਣਾਵਾਂਗੇ ਜੋ ਚਿੱਤਰਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰੇਗੀ।

ਚਿੱਤਰ

ਇੱਕ HTML ਟੈਗ ਜਿਸਨੂੰ ਬੰਦ ਕਰਨ ਵਾਲੇ ਟੈਗ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ, ਉਹ <img> ਟੈਗ ਹੈ, ਕਿਉਂਕਿ ਇਸ ਵਿੱਚ ਇੱਕ src ਤੱਤ ਹੁੰਦਾ ਹੈ ਜੋ ਪੇਜ ਨੂੰ ਚਿੱਤਰ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਲਈ ਸਾਰੀ ਜਾਣਕਾਰੀ ਦਿੰਦਾ ਹੈ।

ਆਪਣੇ ਐਪ ਵਿੱਚ ਇੱਕ ਫੋਲਡਰ ਬਣਾਓ ਜਿਸਦਾ ਨਾਮ images ਹੋਵੇ ਅਤੇ ਇਸ ਵਿੱਚ ਸਾਰੇ ਚਿੱਤਰ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਸਰੋਤ ਕੋਡ ਫੋਲਡਰ ਵਿੱਚ ਹਨ; (ਇੱਥੇ 14 ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰ ਹਨ)।

ਕੰਮ

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

<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
		</div>
	</div>
</div>

ਨੋਟ: Spans ਅਤੇ Divs। Divs ਨੂੰ 'ਬਲਾਕ' ਤੱਤ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ, ਅਤੇ Spans ਨੂੰ 'ਇਨਲਾਈਨ'। ਕੀ ਹੋਵੇਗਾ ਜੇ ਤੁਸੀਂ ਇਹ divs ਨੂੰ spans ਵਿੱਚ ਬਦਲ ਦਿੰਦੇ?

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

ਹਰ ਚਿੱਤਰ ਵਿੱਚ alt ਟੈਕਸਟ ਹੁੰਦਾ ਹੈ ਜੋ ਉਸ ਸਮੇਂ ਵੀ ਦਿਖਾਈ ਦੇਵੇਗਾ ਜਦੋਂ ਤੁਸੀਂ ਚਿੱਤਰ ਨਹੀਂ ਦੇਖ ਸਕਦੇ ਜਾਂ ਰੈਂਡਰ ਨਹੀਂ ਕਰ ਸਕਦੇ। ਇਹ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਗੁਣ ਹੈ ਜੋ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਪਹੁੰਚਯੋਗਤਾ ਬਾਰੇ ਹੋਰ ਪਾਠਾਂ ਵਿੱਚ ਜ਼ਿਆਦਾ ਸਿੱਖੋ; ਇਸ ਸਮੇਂ ਲਈ, ਯਾਦ ਰੱਖੋ ਕਿ alt ਗੁਣ ਇੱਕ ਚਿੱਤਰ ਲਈ ਵਿਕਲਪਿਕ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੇਕਰ ਕਿਸੇ ਕਾਰਨ ਕਰਕੇ ਉਪਭੋਗਤਾ ਇਸਨੂੰ ਨਹੀਂ ਦੇਖ ਸਕਦਾ (ਧੀਮੀ ਕਨੈਕਸ਼ਨ, src ਗੁਣ ਵਿੱਚ ਗਲਤੀ, ਜਾਂ ਜੇ ਉਪਭੋਗਤਾ ਸਕ੍ਰੀਨ ਰੀਡਰ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ)।

✅ ਕੀ ਤੁਸੀਂ ਨੋਟ ਕੀਤਾ ਕਿ ਹਰ ਚਿੱਤਰ ਵਿੱਚ ਇੱਕੋ ਜਿਹਾ alt ਟੈਗ ਹੈ? ਕੀ ਇਹ ਚੰਗੀ ਪ੍ਰਥਾ ਹੈ? ਕਿਉਂ ਜਾਂ ਕਿਉਂ ਨਹੀਂ? ਕੀ ਤੁਸੀਂ ਇਸ ਕੋਡ ਨੂੰ ਬਿਹਤਰ ਬਣਾ ਸਕਦੇ ਹੋ?

ਸੈਮਾਂਟਿਕ ਮਾਰਕਅੱਪ

ਆਮ ਤੌਰ 'ਤੇ, HTML ਲਿਖਣ ਸਮੇਂ ਅਰਥਪੂਰਨ 'ਸੈਮਾਂਟਿਕਸ' ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਪਸੰਦ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਸਦਾ ਕੀ ਮਤਲਬ ਹੈ? ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ HTML ਟੈਗਾਂ ਦੀ ਵਰਤੋਂ ਉਸ ਡੇਟਾ ਜਾਂ ਇੰਟਰੈਕਸ਼ਨ ਦੀ ਕਿਸਮ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਕਰਦੇ ਹੋ ਜਿਸ ਲਈ ਉਹ ਬਣਾਏ ਗਏ ਸਨ। ਉਦਾਹਰਣ ਲਈ, ਪੇਜ ਦੇ ਮੁੱਖ ਸਿਰਲੇਖ ਟੈਕਸਟ ਨੂੰ <h1> ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।

ਆਪਣੇ ਖੁਲ੍ਹਣ ਵਾਲੇ <body> ਟੈਗ ਦੇ ਬਿਲਕੁਲ ਹੇਠਾਂ ਇਹ ਲਾਈਨ ਸ਼ਾਮਲ ਕਰੋ:

<h1>My Terrarium</h1>

ਸੈਮਾਂਟਿਕ ਮਾਰਕਅੱਪ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਜਿਵੇਂ ਕਿ ਸਿਰਲੇਖਾਂ ਨੂੰ <h1> ਅਤੇ ਅਣਗਿਣਤ ਸੂਚੀਆਂ ਨੂੰ <ul> ਵਜੋਂ ਰੈਂਡਰ ਕਰਨਾ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਨੂੰ ਪੇਜ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਆਮ ਤੌਰ 'ਤੇ, ਬਟਨਾਂ ਨੂੰ <button> ਵਜੋਂ ਲਿਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਸੂਚੀਆਂ ਨੂੰ <li> ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਜਦੋਂ ਕਿ ਇਹ ਸੰਭਵ ਹੈ ਕਿ ਖਾਸ ਤੌਰ 'ਤੇ ਸਜਾਏ ਗਏ <span> ਤੱਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਟਨਾਂ ਦੀ ਨਕਲ ਕੀਤੀ ਜਾਵੇ, ਇਹ ਬਿਹਤਰ ਹੈ ਕਿ ਅਯੋਗ ਉਪਭੋਗਤਾ ਤਕਨਾਲੋਜੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪੇਜ 'ਤੇ ਬਟਨ ਦਾ ਪਤਾ ਲਗਾ ਸਕਣ, ਅਤੇ ਇਸ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨ, ਜੇਕਰ ਤੱਤ ਬਟਨ ਵਜੋਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ਇਸ ਕਾਰਨ ਕਰਕੇ, ਸੰਭਵ ਹੋਣ 'ਤੇ ਸੈਮਾਂਟਿਕ ਮਾਰਕਅੱਪ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।

✅ ਇੱਕ ਸਕ੍ਰੀਨ ਰੀਡਰ ਨੂੰ ਵੇਖੋ ਅਤੇ ਇਹ ਕਿਵੇਂ ਵੈੱਬ ਪੇਜ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਦਾ ਹੈ। ਕੀ ਤੁਸੀਂ ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ ਗੈਰ-ਸੈਮਾਂਟਿਕ ਮਾਰਕਅੱਪ ਉਪਭੋਗਤਾ ਨੂੰ ਕਿਵੇਂ ਨਿਰਾਸ਼ ਕਰ ਸਕਦਾ ਹੈ?

ਟੈਰੇਰੀਅਮ

ਇਸ ਇੰਟਰਫੇਸ ਦਾ ਆਖਰੀ ਭਾਗ ਮਾਰਕਅੱਪ ਬਣਾਉਣ ਵਿੱਚ ਸ਼ਾਮਲ ਹੈ ਜਿਸਨੂੰ ਸਜਾਇਆ ਜਾਵੇਗਾ ਤਾਂ ਜੋ ਇੱਕ ਟੈਰੇਰੀਅਮ ਬਣ ਸਕੇ।

ਕੰਮ:

ਆਖਰੀ </div> ਟੈਗ ਤੋਂ ਉੱਪਰ ਇਹ ਮਾਰਕਅੱਪ ਸ਼ਾਮਲ ਕਰੋ:

<div id="terrarium">
	<div class="jar-top"></div>
	<div class="jar-walls">
		<div class="jar-glossy-long"></div>
		<div class="jar-glossy-short"></div>
	</div>
	<div class="dirt"></div>
	<div class="jar-bottom"></div>
</div>

✅ ਜਦੋਂ ਕਿ ਤੁਸੀਂ ਇਹ ਮਾਰਕਅੱਪ ਸਕ੍ਰੀਨ 'ਤੇ ਸ਼ਾਮਲ ਕੀਤਾ, ਤੁਸੀਂ ਕੁਝ ਵੀ ਰੈਂਡਰ ਨਹੀਂ ਹੋਇਆ ਵੇਖਦੇ। ਕਿਉਂ?

🚀ਚੁਣੌਤੀ

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

ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵੀਜ਼

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

HTML 'ਪ੍ਰਮਾਣਿਤ ਅਤੇ ਸੱਚਾ' ਬਿਲਡਿੰਗ ਬਲਾਕ ਸਿਸਟਮ ਹੈ ਜਿਸਨੇ ਵੈੱਬ ਨੂੰ ਅੱਜ ਦੇ ਰੂਪ ਵਿੱਚ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕੀਤੀ ਹੈ। ਇਸਦੇ ਇਤਿਹਾਸ ਬਾਰੇ ਕੁਝ ਸਿੱਖੋ ਜਿਹੜੇ ਪੁਰਾਣੇ ਅਤੇ ਨਵੇਂ ਟੈਗਾਂ ਬਾਰੇ ਪੜ੍ਹ ਕੇ। ਕੀ ਤੁਸੀਂ ਪਤਾ ਲਗਾ ਸਕਦੇ ਹੋ ਕਿ ਕਿਉਂ ਕੁਝ ਟੈਗ ਅਪ੍ਰਯੋਗ ਹੋ ਗਏ ਅਤੇ ਕੁਝ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ? ਭਵਿੱਖ ਵਿੱਚ ਕਿਹੜੇ ਟੈਗ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ?

ਵੈੱਬ ਅਤੇ ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ ਲਈ ਸਾਈਟਾਂ ਬਣਾਉਣ ਬਾਰੇ ਹੋਰ ਸਿੱਖੋ Microsoft Learn 'ਤੇ।

ਅਸਾਈਨਮੈਂਟ

ਆਪਣੀ HTML ਦਾ ਅਭਿਆਸ ਕਰੋ: ਇੱਕ ਬਲੌਗ ਮੌਕਅੱਪ ਬਣਾਓ

ਅਸਵੀਕਾਰਨਾ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।

22 KiB Raw Permalink Blame History