17 KiB

Raw Blame History Unescape Escape

HTML अभ्यास असाइनमेन्ट: ब्लग मोकअप बनाउनुहोस्

सिकाइ उद्देश्यहरू

HTML ज्ञानलाई प्रयोग गरेर ब्लगको सम्पूर्ण होमपेज संरचना डिजाइन र कोडिङ गर्नुहोस्। यो व्यावहारिक असाइनमेन्टले सेम्यान्टिक HTML अवधारणाहरू, पहुँचयोग्यता उत्कृष्ट अभ्यासहरू, र व्यावसायिक कोड संगठन सीपहरूलाई बलियो बनाउनेछ, जुन तपाईंले वेब विकास यात्रामा प्रयोग गर्नुहुनेछ।

यो असाइनमेन्ट पूरा गरेर, तपाईं:

वेबसाइट लेआउट योजना बनाउने अभ्यास गर्नुहुनेछ
सेम्यान्टिक HTML तत्वहरू उपयुक्त रूपमा प्रयोग गर्नुहुनेछ
पहुँचयोग्य, राम्रो संरचित मार्कअप सिर्जना गर्नुहुनेछ
टिप्पणीहरू र संगठनको साथ व्यावसायिक कोडिङ बानीहरू विकास गर्नुहुनेछ

परियोजना आवश्यकताहरू

भाग १: डिजाइन योजना (भिजुअल मोकअप)

तपाईंको ब्लग होमपेजको भिजुअल मोकअप बनाउनुहोस् जसमा समावेश छ:

साइट शीर्षक र नेभिगेसन भएको हेडर
मुख्य सामग्री क्षेत्र जसमा कम्तीमा २-३ ब्लग पोस्ट प्रिभ्यूहरू छन्
साइडबारमा थप जानकारी (अबाउट सेक्सन, हालका पोस्टहरू, श्रेणीहरू)
सम्पर्क जानकारी वा लिंकहरू भएको फुटर

मोकअप सिर्जना गर्ने विकल्पहरू:

हातले बनाइएको स्केच: कागज र पेन्सिल प्रयोग गर्नुहोस्, त्यसपछि तपाईंको डिजाइनको फोटो खिच्नुहोस् वा स्क्यान गर्नुहोस्
डिजिटल उपकरणहरू: Figma, Adobe XD, Canva, PowerPoint, वा कुनै पनि ड्रइङ एप्लिकेसन
वायरफ्रेम उपकरणहरू: Balsamiq, MockFlow, वा यस्तै वायरफ्रेमिङ सफ्टवेयर

तपाईंले प्रयोग गर्ने HTML तत्वहरू सहित मोकअप सेक्सनहरू लेबल गर्नुहोस् (जस्तै, "हेडर - <header>", "ब्लग पोस्टहरू - <article>")।

भाग २: HTML तत्व योजना

तपाईंको मोकअपको प्रत्येक सेक्सनलाई विशिष्ट HTML तत्वहरूसँग मिलाउने सूची बनाउनुहोस्:

Example:
- Site Header → <header>
- Main Navigation → <nav> with <ul> and <li>
- Blog Post → <article> with <h2>, <p>, <time>
- Sidebar → <aside> with <section> elements
- Page Footer → <footer>

समावेश गर्नुपर्ने आवश्यक तत्वहरू: तपाईंको HTML मा तलको सूचीबाट कम्तीमा १० विभिन्न सेम्यान्टिक तत्वहरू समावेश हुनुपर्छ:

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
<h1>, <h2>, <h3>, <p>, <ul>, <li>, <a>
<img>, <time>, <blockquote>, <strong>, <em>

भाग ३: HTML कार्यान्वयन

तलका मापदण्डहरू पालना गर्दै तपाईंको ब्लग होमपेज कोड गर्नुहोस्:

डकुमेन्ट संरचना: सही DOCTYPE, html, head, र body तत्वहरू समावेश गर्नुहोस्
सेम्यान्टिक मार्कअप: HTML तत्वहरूलाई उनीहरूको उद्देश्य अनुसार प्रयोग गर्नुहोस्
पहुंचयोग्यता: छविहरूको लागि सही alt टेक्स्ट र अर्थपूर्ण लिंक टेक्स्ट समावेश गर्नुहोस्
कोड गुणस्तर: समान इन्डेन्टेशन र अर्थपूर्ण टिप्पणीहरू प्रयोग गर्नुहोस्
सामग्री: यथार्थपरक ब्लग सामग्री समावेश गर्नुहोस् (तपाईं प्लेसहोल्डर टेक्स्ट प्रयोग गर्न सक्नुहुन्छ)

नमूना HTML संरचना:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Personal Blog</title>
</head>
<body>
    <!-- Main site header -->
    <header>
        <h1>My Blog Title</h1>
        <nav>
            <!-- Navigation menu -->
        </nav>
    </header>
    
    <!-- Main content area -->
    <main>
        <!-- Blog posts go here -->
    </main>
    
    <!-- Sidebar content -->
    <aside>
        <!-- Additional information -->
    </aside>
    
    <!-- Site footer -->
    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

भाग ४: प्रतिबिम्ब

३-५ वाक्यको छोटो प्रतिबिम्ब लेख्नुहोस् जसमा समावेश छ:

कुन HTML तत्वहरू प्रयोग गर्न तपाईंलाई सबैभन्दा आत्मविश्वास थियो?
योजना बनाउँदा वा कोडिङ गर्दा तपाईंले के चुनौतीहरू सामना गर्नुभयो?
सेम्यान्टिक HTML ले तपाईंको सामग्रीलाई कसरी व्यवस्थित गर्न मद्दत गर्‍यो?
तपाईंको अर्को HTML परियोजनामा के फरक गर्नुहुन्छ?

सबमिशन चेकलिस्ट

सबमिट गर्नु अघि, सुनिश्चित गर्नुहोस् कि तपाईंले:

HTML तत्वहरू लेबल गरिएको भिजुअल मोकअप
सही डकुमेन्ट संरचनासहित पूर्ण HTML फाइल
उपयुक्त रूपमा प्रयोग गरिएका कम्तीमा १० विभिन्न सेम्यान्टिक HTML तत्वहरू
तपाईंको कोड संरचना व्याख्या गर्ने अर्थपूर्ण टिप्पणीहरू
मान्य HTML सिन्ट्याक्स (ब्राउजरमा परीक्षण गर्नुहोस्)
प्रॉम्प्ट प्रश्नहरूको उत्तर दिने लिखित प्रतिबिम्ब

मूल्याङ्कन मापदण्ड

मापदण्ड	उत्कृष्ट (४)	दक्ष (३)	विकासशील (२)	प्रारम्भिक (१)
योजना र डिजाइन	लेआउट र HTML सेम्यान्टिक संरचनाको स्पष्ट बुझाइ देखाउने विस्तृत, राम्रोसँग लेबल गरिएको मोकअप	स्पष्ट मोकअप जसमा अधिकांश सेक्सनहरू उपयुक्त रूपमा लेबल गरिएको छ	आधारभूत मोकअप जसमा केही लेबलिङ छ, सामान्य बुझाइ देखाउँछ	न्यूनतम वा अस्पष्ट मोकअप, उचित सेक्सन पहिचानको अभाव
सेम्यान्टिक HTML प्रयोग	१०+ सेम्यान्टिक तत्वहरू उपयुक्त रूपमा प्रयोग गरिएको छ, HTML संरचना र पहुँचयोग्यताको गहिरो बुझाइ देखाउँछ	८-९ सेम्यान्टिक तत्वहरू सही रूपमा प्रयोग गरिएको छ, सेम्यान्टिक मार्कअपको राम्रो बुझाइ देखाउँछ	६-७ सेम्यान्टिक तत्वहरू प्रयोग गरिएको छ, उपयुक्त प्रयोगमा केही भ्रम छ	६ भन्दा कम तत्वहरू प्रयोग गरिएको छ वा सेम्यान्टिक तत्वहरूको गलत प्रयोग गरिएको छ
कोड गुणस्तर र संगठन	असाधारण रूपमा राम्रोसँग व्यवस्थित, सही इन्डेन्ट गरिएको कोड, व्यापक टिप्पणीहरू र पूर्ण HTML सिन्ट्याक्स	राम्रोसँग व्यवस्थित कोड, राम्रो इन्डेन्टेशन, उपयोगी टिप्पणीहरू, र मान्य सिन्ट्याक्स	प्रायः व्यवस्थित कोड, केही टिप्पणीहरू, साना सिन्ट्याक्स समस्याहरू	खराब संगठन, न्यूनतम टिप्पणीहरू, धेरै सिन्ट्याक्स त्रुटिहरू
पहुंचयोग्यता र उत्कृष्ट अभ्यासहरू	उत्कृष्ट पहुँचयोग्यता विचारहरू, अर्थपूर्ण alt टेक्स्ट, सही हेडिङ संरचना, सबै आधुनिक HTML उत्कृष्ट अभ्यासहरू पालना गरिएको छ	राम्रो पहुँचयोग्यता सुविधाहरू, हेडिङ र alt टेक्स्टको उपयुक्त प्रयोग, अधिकांश उत्कृष्ट अभ्यासहरू पालना गरिएको छ	केही पहुँचयोग्यता विचारहरू, आधारभूत alt टेक्स्ट र हेडिङ संरचना	सीमित पहुँचयोग्यता सुविधाहरू, खराब हेडिङ संरचना, उत्कृष्ट अभ्यासहरू पालना गरिएको छैन
प्रतिबिम्ब र सिकाइ	HTML अवधारणाहरूको गहिरो बुझाइ र सिकाइ प्रक्रियाको विचारशील विश्लेषण देखाउने अन्तर्दृष्टिपूर्ण प्रतिबिम्ब	प्रमुख अवधारणाहरूको बुझाइ देखाउने राम्रो प्रतिबिम्ब र केही आत्म-जागरूकता	HTML अवधारणाहरू वा सिकाइ प्रक्रियामा सीमित अन्तर्दृष्टि भएको आधारभूत प्रतिबिम्ब	न्यूनतम वा हराएको प्रतिबिम्ब, सिकाइ अवधारणाहरूको थोरै बुझाइ देखाउँछ

सिकाइ स्रोतहरू

आवश्यक सन्दर्भहरू:

MDN HTML तत्वहरूको सन्दर्भ - सबै HTML तत्वहरूको पूर्ण मार्गदर्शन
HTML5 सेम्यान्टिक तत्वहरू - सेम्यान्टिक मार्कअप बुझ्दै
वेब पहुँचयोग्यता दिशानिर्देशहरू - पहुँचयोग्य वेब सामग्री सिर्जना गर्दै
HTML मान्यकर्ता - तपाईंको HTML सिन्ट्याक्स जाँच गर्नुहोस्

सफलताको लागि प्रो टिप्स:

कोड लेख्न सुरु गर्नु अघि तपाईंको मोकअप तयार गर्नुहोस्
ब्राउजरको डेभलपर टूल्स प्रयोग गरेर तपाईंको HTML संरचना निरीक्षण गर्नुहोस्
विभिन्न स्क्रिन साइजहरूमा तपाईंको पेज परीक्षण गर्नुहोस् (CSS बिना पनि)
तपाईंको HTMLलाई ठूलो स्वरमा पढ्नुहोस् ताकि संरचना तार्किक लाग्छ कि जाँच गर्न सकियोस्
स्क्रिन रिडरले तपाईंको पेज संरचनालाई कसरी व्याख्या गर्नेछ भनेर विचार गर्नुहोस्

💡 स्मरण गर्नुहोस्: यो असाइनमेन्ट HTML संरचना र सेम्यान्टिक्समा केन्द्रित छ। दृश्य शैलीको चिन्ता नगर्नुहोस् – CSS त्यसका लागि हो! तपाईंको पेज साधारण देखिन सक्छ, तर यो राम्रोसँग संरचित र अर्थपूर्ण हुनुपर्छ।

अस्वीकरण:
यो दस्तावेज़ AI अनुवाद सेवा Co-op Translator प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।

17 KiB Raw Blame History Unescape Escape