|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
|
|
|
"translation_date": "2025-10-03T09:11:05+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
|
|
|
"language_code": "hi"
|
|
|
}
|
|
|
-->
|
|
|
# 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) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को आधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं। |
