12 KiB

Raw Blame History Unescape Escape

ایچ ٹی ایم ایل پریکٹس اسائنمنٹ: بلاگ موک اپ بنائیں

سیکھنے کے مقاصد

اپنے ایچ ٹی ایم ایل کے علم کو استعمال کرتے ہوئے ایک مکمل بلاگ ہوم پیج کا ڈھانچہ ڈیزائن اور کوڈ کریں۔ یہ عملی اسائنمنٹ آپ کے سیمینٹک ایچ ٹی ایم ایل کے تصورات، رسائی کے بہترین طریقوں، اور پیشہ ورانہ کوڈ آرگنائزیشن کی مہارتوں کو مضبوط کرے گا جو آپ اپنی ویب ڈیولپمنٹ کے سفر میں استعمال کریں گے۔

اس اسائنمنٹ کو مکمل کرنے سے آپ:

ویب سائٹ کے لے آؤٹ کو کوڈنگ سے پہلے منصوبہ بندی کرنے کی مشق کریں گے
سیمینٹک ایچ ٹی ایم ایل عناصر کو مناسب طریقے سے استعمال کریں گے
قابل رسائی، اچھی طرح سے منظم مارک اپ بنائیں گے
تبصرے اور تنظیم کے ساتھ پیشہ ورانہ کوڈنگ کی عادات کو فروغ دیں گے

پروجیکٹ کے تقاضے

حصہ 1: ڈیزائن کی منصوبہ بندی (ویژول موک اپ)

اپنے بلاگ ہوم پیج کا ایک ویژول موک اپ بنائیں جس میں شامل ہو:

ہیڈر جس میں سائٹ کا عنوان اور نیویگیشن ہو
مین مواد کا حصہ جس میں کم از کم 2-3 بلاگ پوسٹ کے پیش نظارے ہوں
سائیڈ بار جس میں اضافی معلومات (اباؤٹ سیکشن، حالیہ پوسٹس، کیٹیگریز) ہوں
فوٹر جس میں رابطے کی معلومات یا لنکس ہوں

موک اپ بنانے کے اختیارات:

ہاتھ سے بنائی گئی خاکہ: کاغذ اور پنسل استعمال کریں، پھر اپنے ڈیزائن کی تصویر یا اسکین کریں
ڈیجیٹل ٹولز: Figma، Adobe XD، Canva، PowerPoint، یا کوئی بھی ڈرائنگ ایپلیکیشن
وائر فریم ٹولز: Balsamiq، MockFlow، یا اسی طرح کے وائر فریم سافٹ ویئر

اپنے موک اپ کے حصوں کو لیبل کریں ان ایچ ٹی ایم ایل عناصر کے ساتھ جنہیں آپ استعمال کرنے کا ارادہ رکھتے ہیں (مثلاً، "ہیڈر - <header>"، "بلاگ پوسٹس - <article>")۔

حصہ 2: ایچ ٹی ایم ایل عناصر کی منصوبہ بندی

اپنے موک اپ کے ہر حصے کو مخصوص ایچ ٹی ایم ایل عناصر کے ساتھ نقشہ بنائیں:

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>

شامل کرنے کے لیے ضروری عناصر: آپ کے ایچ ٹی ایم ایل میں کم از کم 10 مختلف سیمینٹک عناصر شامل ہونے چاہئیں اس فہرست سے:

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

حصہ 3: ایچ ٹی ایم ایل کا نفاذ

اپنے بلاگ ہوم پیج کو ان معیارات کے مطابق کوڈ کریں:

دستاویز کا ڈھانچہ: مناسب DOCTYPE، html، head، اور body عناصر شامل کریں
سیمینٹک مارک اپ: ایچ ٹی ایم ایل عناصر کو ان کے مطلوبہ مقصد کے لیے استعمال کریں
رسائی: تصاویر کے لیے مناسب alt ٹیکسٹ اور معنی خیز لنک ٹیکسٹ شامل کریں
کوڈ کا معیار: مستقل انڈینٹیشن اور معنی خیز تبصرے استعمال کریں
مواد: حقیقت پسندانہ بلاگ مواد شامل کریں (آپ پلیس ہولڈر ٹیکسٹ استعمال کر سکتے ہیں)

نمونہ ایچ ٹی ایم ایل ڈھانچہ:

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

حصہ 4: عکاسی

ایک مختصر عکاسی لکھیں (3-5 جملے) جس میں شامل ہو:

کون سے ایچ ٹی ایم ایل عناصر استعمال کرنے میں آپ کو سب سے زیادہ اعتماد تھا؟
منصوبہ بندی یا کوڈنگ کے دوران آپ کو کون سے چیلنجز کا سامنا ہوا؟
سیمینٹک ایچ ٹی ایم ایل نے آپ کے مواد کو منظم کرنے میں کیسے مدد کی؟
اپنے اگلے ایچ ٹی ایم ایل پروجیکٹ میں آپ کیا مختلف کریں گے؟

جمع کرانے کی چیک لسٹ

جمع کرانے سے پہلے، یقینی بنائیں کہ آپ نے:

ویژول موک اپ جس میں ایچ ٹی ایم ایل عناصر لیبل کیے گئے ہوں
مکمل ایچ ٹی ایم ایل فائل جس میں مناسب دستاویز کا ڈھانچہ ہو
کم از کم 10 مختلف سیمینٹک ایچ ٹی ایم ایل عناصر مناسب طریقے سے استعمال کیے ہوں
اپنے کوڈ کے ڈھانچے کی وضاحت کرنے والے معنی خیز تبصرے شامل کیے ہوں
درست ایچ ٹی ایم ایل نحو (براوزر میں ٹیسٹ کریں)
عکاسی لکھی ہو جو پرامپٹ سوالات کو حل کرتی ہو

تشخیص کا معیار

معیار	مثالی (4)	ماہر (3)	ترقی پذیر (2)	ابتدائی (1)
منصوبہ بندی اور ڈیزائن	تفصیلی، اچھی طرح سے لیبل شدہ موک اپ جو لے آؤٹ اور ایچ ٹی ایم ایل سیمینٹک ڈھانچے کی واضح سمجھ ظاہر کرتا ہے	واضح موک اپ جس میں زیادہ تر حصے مناسب طریقے سے لیبل کیے گئے ہیں	بنیادی موک اپ جس میں کچھ لیبلنگ ہے، عمومی سمجھ ظاہر کرتا ہے	کم سے کم یا غیر واضح موک اپ، مناسب سیکشن کی شناخت کی کمی
سیمینٹک ایچ ٹی ایم ایل کا استعمال	10+ سیمینٹک عناصر کو مناسب طریقے سے استعمال کرتا ہے، ایچ ٹی ایم ایل ڈھانچے اور رسائی کی گہری سمجھ ظاہر کرتا ہے	8-9 سیمینٹک عناصر کو صحیح طریقے سے استعمال کرتا ہے، سیمینٹک مارک اپ کی اچھی سمجھ ظاہر کرتا ہے	6-7 سیمینٹک عناصر استعمال کرتا ہے، مناسب استعمال کے بارے میں کچھ الجھن	6 سے کم عناصر استعمال کرتا ہے یا سیمینٹک عناصر کا غلط استعمال کرتا ہے
کوڈ کا معیار اور تنظیم	غیر معمولی طور پر اچھی طرح سے منظم، مناسب انڈینٹیشن کے ساتھ کوڈ، جامع تبصرے اور کامل ایچ ٹی ایم ایل نحو	اچھی طرح سے منظم کوڈ، اچھی انڈینٹیشن، مددگار تبصرے، اور درست نحو	زیادہ تر منظم کوڈ، کچھ تبصرے، معمولی نحو کے مسائل	ناقص تنظیم، کم سے کم تبصرے، متعدد نحو کی غلطیاں
رسائی اور بہترین طریقے	بہترین رسائی کے خیالات، معنی خیز alt ٹیکسٹ، مناسب ہیڈنگ ہائیرارکی، تمام جدید ایچ ٹی ایم ایل بہترین طریقوں کی پیروی کرتا ہے	اچھی رسائی کی خصوصیات، ہیڈنگز اور alt ٹیکسٹ کا مناسب استعمال، زیادہ تر بہترین طریقوں کی پیروی کرتا ہے	کچھ رسائی کے خیالات، بنیادی alt ٹیکسٹ اور ہیڈنگ ڈھانچہ	محدود رسائی کی خصوصیات، ناقص ہیڈنگ ڈھانچہ، بہترین طریقوں کی پیروی نہیں کرتا
عکاسی اور سیکھنا	بصیرت انگیز عکاسی جو ایچ ٹی ایم ایل تصورات کی گہری سمجھ اور سیکھنے کے عمل کا سوچ سمجھ کر تجزیہ ظاہر کرتی ہے	اچھی عکاسی جو کلیدی تصورات کی سمجھ اور سیکھنے کی کچھ خود آگاہی ظاہر کرتی ہے	بنیادی عکاسی جس میں ایچ ٹی ایم ایل تصورات یا سیکھنے کے عمل کے بارے میں محدود بصیرت ہے	کم سے کم یا غائب عکاسی، سیکھے گئے تصورات کی کم سمجھ ظاہر کرتی ہے

سیکھنے کے وسائل

ضروری حوالہ جات:

MDN HTML عناصر کا حوالہ - تمام ایچ ٹی ایم ایل عناصر کے لیے مکمل گائیڈ
HTML5 سیمینٹک عناصر - سیمینٹک مارک اپ کو سمجھنا
ویب رسائی کے رہنما اصول - قابل رسائی ویب مواد بنانا
HTML Validator - اپنے ایچ ٹی ایم ایل نحو کو چیک کریں

کامیابی کے لیے پرو ٹپس:

کوڈ لکھنے سے پہلے اپنے موک اپ سے شروع کریں
اپنے ایچ ٹی ایم ایل ڈھانچے کا معائنہ کرنے کے لیے براوزر کے ڈیولپر ٹولز استعمال کریں
مختلف اسکرین سائز کے ساتھ اپنے صفحے کو ٹیسٹ کریں (یہاں تک کہ بغیر CSS کے)
اپنے ایچ ٹی ایم ایل کو بلند آواز سے پڑھیں تاکہ یہ چیک کریں کہ ڈھانچہ منطقی لگتا ہے
غور کریں کہ اسکرین ریڈر آپ کے صفحے کے ڈھانچے کو کیسے سمجھتا ہے

💡 یاد رکھیں: یہ اسائنمنٹ ایچ ٹی ایم ایل ڈھانچے اور سیمینٹکس پر مرکوز ہے۔ بصری اسٹائلنگ کے بارے میں فکر نہ کریں – یہ کام CSS کا ہے! آپ کا صفحہ سادہ نظر آ سکتا ہے، لیکن یہ اچھی طرح سے منظم اور معنی خیز ہونا چاہیے۔

اعلانِ لاتعلقی:
یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کی بھرپور کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔

12 KiB Raw Blame History Unescape Escape