|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
|
|
|
"translation_date": "2025-10-03T09:29:12+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
|
|
|
"language_code": "pa"
|
|
|
}
|
|
|
-->
|
|
|
# HTML ਅਭਿਆਸ ਅਸਾਈਨਮੈਂਟ: ਬਲੌਗ ਮੌਕਅੱਪ ਬਣਾਉਣਾ
|
|
|
|
|
|
## ਉਦੇਸ਼
|
|
|
|
|
|
ਨਿੱਜੀ ਬਲੌਗ ਹੋਮਪੇਜ ਲਈ HTML ਸਟ੍ਰਕਚਰ ਡਿਜ਼ਾਈਨ ਅਤੇ ਹੱਥੋਂ ਕੋਡ ਕਰਨ ਦਾ ਅਭਿਆਸ ਕਰੋ। ਇਹ ਅਭਿਆਸ ਤੁਹਾਨੂੰ ਸੈਮੈਂਟਿਕ HTML, ਲੇਆਉਟ ਪਲਾਨਿੰਗ ਅਤੇ ਕੋਡ ਆਰਗਨਾਈਜ਼ੇਸ਼ਨ ਵਿੱਚ ਮਾਹਰ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।
|
|
|
|
|
|
## ਹਦਾਇਤਾਂ
|
|
|
|
|
|
1. **ਆਪਣੇ ਬਲੌਗ ਮੌਕਅੱਪ ਨੂੰ ਡਿਜ਼ਾਈਨ ਕਰੋ**
|
|
|
- ਆਪਣੇ ਬਲੌਗ ਹੋਮਪੇਜ ਦਾ ਵਿਜ਼ੁਅਲ ਮੌਕਅੱਪ ਬਣਾਓ। ਮੁੱਖ ਸੈਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ ਜਿਵੇਂ ਕਿ ਹੈਡਰ, ਨੈਵੀਗੇਸ਼ਨ, ਮੁੱਖ ਸਮੱਗਰੀ, ਸਾਈਡਬਾਰ ਅਤੇ ਫੁੱਟਰ।
|
|
|
- ਤੁਸੀਂ ਕਾਗਜ਼ 'ਤੇ ਸਕੈਚ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਆਪਣਾ ਸਕੈਚ ਸਕੈਨ ਕਰ ਸਕਦੇ ਹੋ, ਜਾਂ ਡਿਜ਼ੀਟਲ ਟੂਲ (ਜਿਵੇਂ ਕਿ Figma, Adobe XD, Canva, ਜਾਂ PowerPoint) ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।
|
|
|
|
|
|
2. **HTML ਐਲਿਮੈਂਟਸ ਦੀ ਪਛਾਣ ਕਰੋ**
|
|
|
- ਹਰ ਸੈਕਸ਼ਨ ਲਈ ਵਰਤਣ ਵਾਲੇ HTML ਐਲਿਮੈਂਟਸ ਦੀ ਸੂਚੀ ਬਣਾਓ (ਜਿਵੇਂ `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>` ਆਦਿ)।
|
|
|
|
|
|
3. **HTML ਮਾਰਕਅੱਪ ਲਿਖੋ**
|
|
|
- ਆਪਣੇ ਮੌਕਅੱਪ ਲਈ HTML ਹੱਥੋਂ ਕੋਡ ਕਰੋ। ਸੈਮੈਂਟਿਕ ਸਟ੍ਰਕਚਰ ਅਤੇ ਬਿਹਤਰ ਪ੍ਰਥਾਵਾਂ 'ਤੇ ਧਿਆਨ ਦਿਓ।
|
|
|
- ਘੱਟੋ-ਘੱਟ 10 ਵੱਖ-ਵੱਖ HTML ਐਲਿਮੈਂਟਸ ਸ਼ਾਮਲ ਕਰੋ।
|
|
|
- ਆਪਣੇ ਚੋਣਾਂ ਅਤੇ ਸਟ੍ਰਕਚਰ ਨੂੰ ਸਮਝਾਉਣ ਲਈ ਕਮੈਂਟਸ ਸ਼ਾਮਲ ਕਰੋ।
|
|
|
|
|
|
4. **ਆਪਣਾ ਕੰਮ ਜਮ੍ਹਾਂ ਕਰੋ**
|
|
|
- ਆਪਣਾ ਸਕੈਚ/ਮੌਕਅੱਪ ਅਤੇ ਆਪਣੀ HTML ਫਾਈਲ ਅਪਲੋਡ ਕਰੋ।
|
|
|
- ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਆਪਣੇ ਡਿਜ਼ਾਈਨ ਫੈਸਲਿਆਂ 'ਤੇ 2–3 ਵਾਕਾਂ ਦੀ ਛੋਟੀ ਰਿਫਲੈਕਸ਼ਨ ਦਿਓ।
|
|
|
|
|
|
## ਰੂਬ੍ਰਿਕ
|
|
|
|
|
|
| ਮਾਪਦੰਡ | ਸ਼ਾਨਦਾਰ | ਯੋਗ | ਸੁਧਾਰ ਦੀ ਲੋੜ |
|
|
|
|------------------|--------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
|
|
|
| ਵਿਜ਼ੁਅਲ ਮੌਕਅੱਪ | ਸਪਸ਼ਟ, ਵਿਸਥਾਰਤ ਮੌਕਅੱਪ ਜਿਸ ਵਿੱਚ ਲੇਬਲ ਕੀਤੇ ਸੈਕਸ਼ਨ ਅਤੇ ਸੋਚਵਿਚਾਰ ਵਾਲਾ ਲੇਆਉਟ ਹੈ | ਬੁਨਿਆਦੀ ਮੌਕਅੱਪ ਜਿਸ ਵਿੱਚ ਕੁਝ ਲੇਬਲ ਕੀਤੇ ਸੈਕਸ਼ਨ ਹਨ | ਘੱਟੋ-ਘੱਟ ਜਾਂ ਅਸਪਸ਼ਟ ਮੌਕਅੱਪ; ਸੈਕਸ਼ਨ ਲੇਬਲ ਦੀ ਘਾਟ |
|
|
|
| HTML ਐਲਿਮੈਂਟਸ | 10+ ਸੈਮੈਂਟਿਕ HTML ਐਲਿਮੈਂਟਸ ਦੀ ਵਰਤੋਂ; ਸਟ੍ਰਕਚਰ ਅਤੇ ਬਿਹਤਰ ਪ੍ਰਥਾਵਾਂ ਦੀ ਸਮਝ ਦਿਖਾਉਂਦਾ ਹੈ | 5–9 HTML ਐਲਿਮੈਂਟਸ ਦੀ ਵਰਤੋਂ; ਕੁਝ ਸੈਮੈਂਟਿਕ ਸਟ੍ਰਕਚਰ | 5 ਤੋਂ ਘੱਟ ਐਲਿਮੈਂਟਸ ਦੀ ਵਰਤੋਂ; ਸੈਮੈਂਟਿਕ ਸਟ੍ਰਕਚਰ ਦੀ ਘਾਟ |
|
|
|
| ਕੋਡ ਗੁਣਵੱਤਾ | ਚੰਗੀ ਤਰ੍ਹਾਂ ਆਰਗਨਾਈਜ਼ ਕੀਤਾ, ਪੜ੍ਹਨਯੋਗ ਕੋਡ ਜਿਸ ਵਿੱਚ ਕਮੈਂਟਸ ਹਨ; HTML ਮਿਆਰਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ | ਜ਼ਿਆਦਾਤਰ ਆਰਗਨਾਈਜ਼ ਕੀਤਾ ਕੋਡ; ਕੁਝ ਕਮੈਂਟਸ | ਗੈਰ-ਆਰਗਨਾਈਜ਼ ਕੀਤਾ ਕੋਡ; ਕਮੈਂਟਸ ਦੀ ਘਾਟ |
|
|
|
| ਰਿਫਲੈਕਸ਼ਨ | ਡਿਜ਼ਾਈਨ ਚੋਣਾਂ ਅਤੇ ਚੁਣੌਤੀਆਂ 'ਤੇ ਸੂਝਵਾਨ ਰਿਫਲੈਕਸ਼ਨ | ਬੁਨਿਆਦੀ ਰਿਫਲੈਕਸ਼ਨ | ਕੋਈ ਰਿਫਲੈਕਸ਼ਨ ਨਹੀਂ ਜਾਂ ਸਬੰਧਿਤ ਨਹੀਂ |
|
|
|
|
|
|
## ਸੁਝਾਅ
|
|
|
|
|
|
- ਬਿਹਤਰ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ SEO ਲਈ ਸੈਮੈਂਟਿਕ HTML ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰੋ।
|
|
|
- ਆਪਣੇ ਕੋਡ ਨੂੰ ਇੰਡੈਂਟੇਸ਼ਨ ਅਤੇ ਕਮੈਂਟਸ ਨਾਲ ਆਰਗਨਾਈਜ਼ ਕਰੋ।
|
|
|
- [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) ਤੋਂ ਮਦਦ ਲਵੋ।
|
|
|
- ਸੋਚੋ ਕਿ ਤੁਹਾਡਾ ਲੇਆਉਟ ਭਵਿੱਖ ਦੇ ਅਸਾਈਨਮੈਂਟਸ ਵਿੱਚ ਕਿਵੇਂ ਵਧਾਇਆ ਜਾਂ ਸਜਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।
|
|
|
|
|
|
---
|
|
|
|
|
|
**ਅਸਵੀਕਰਤੀ**:
|
|
|
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੌਜੂਦ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਪ੍ਰਮਾਣਿਕ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੇ ਪ੍ਰਯੋਗ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। |
