کوډینګ او ویب پرمختیا

د HTML5 ټاګونو، عنصرونو (Elements) او جوړښت پوهېدل

د پوهې تخنیکي کارکوونکو لخوا جون ۲۰۲۶

د دې لوست په اوږدو کې به تاسو د دغې موضوع په اړه مفصل او عملي لارښود ترلاسه کړئ ترڅو خپل مسلکي مهارتونه لوړ کړئ.

مهم ټکي

ټاګونه (Tags) ساده متني محتوا رانغاړي او په منظمو DOM عنصرونو يې بدلوي.
مانايي جوړښتونه لکه (
،
،
،
،
) د محتوا دندې په څرګند ډول مشخصوي.
د مانايي جوړښتونو (Semantic Scaffolds) کارول د براوزر کاره‌کړنه (Performance)، لاسرسي (Accessibility)، او د لټون ماشین د کراول کولو مطابقت ښه کوي.

سریزه او ارزښت

> 📌 **د لوست خلاصه (Quick Summary):** په دغه درس کې به تاسو د د HTML5 ټاګونو، عنصرونو (Elements) او جوړښت پوهېدل بنسټیز مفاهیم، د کارولو مسلکي اوزارونه او عملي لارې زده کړئ.

د وېب پرمختیا مهارتونه د ډیجیټل دورې تر ټولو مهم او نړیوال مهارتونه دي. د کار د احصایې ادارو له مخې، د وېب پرمختیا غوښتنه تل په زیاتیدو ده. د د HTML5 ټاګونو، عنصرونو (Elements) او جوړښت پوهېدل زده کړه یوازې نظریه نه ده؛ دا په مستقیم ډول ټاکي چې ایا هغه ویب پاڼې چې تاسو یې جوړوئ د اعتبار وړ او نړیوال رقابت لرونکې دي که نه.

دا لوست یو جوړښت لرونکی او څو پوړیز چلند تعقیبوي: موږ د اساساتو او جوړښت څخه پیل کوو ترڅو یو پیاوړی ذهني ماډل جوړ کړو، بیا عملي پړاوونو ته ځو چې تاسو یې سمدستي کارولی شئ، او په پای کې د مسلکي کچې تمرینونو سره پای ته رسوو چې اصلي کاري شرایط ښيي.

د ساحې مسلکي کسان په مسلکي مرکو، فریلانس پروژو او ورځني حلونو کې همدا موضوعات د اساس په توګه پیژني. د وخت پانګونه وکړئ ترڅو نه یوازې پر 'څه' بلکې پر 'ولې' هم پوه شئ — ځکه همدا د یو مسلکي او پیل کونکي ترمنځ توپیر دی.

بنسټیز مفاهیم او جوړښت

د HTML5 ټکنالوژي د ټولې نړيوالې جال (World Wide Web) لپاره د اساسي جوړښت اډانه برابروي. د پرانیستلو او تړلو ټاګونو ترمنځ د ساده متني محتوا په رانغاړلو سره، پراختیا ورکوونکي د اسنادو د څيز په موډل (Document Object Model - DOM) کې عنصرونه رامنځته کوي. مانايي HTML5 داسې ځانګړي عنصرونه وړاندې کوي چې د رانغاړل شوې محتوا د رول او مانا په اړه معلومات ورکوي، او سرلیکونه (Headers)، د نیویګیشن برخې (Navigations)، اړخیزې بارې (Sidebars)، اصلي محتوا، برخې (Sections)، او پايليکونه (Footers) له عادي او بې مانا کنټینرونو څخه جلا کوي.

د بنسټیز جوړښت درک کول

د دې لپاره چې په ریښتیا په د HTML5 ټاګونو، عنصرونو (Elements) او جوړښت پوهېدل کې مهارت ترلاسه کړئ، دا مرسته کوي پوه شئ چې ولې دا قواعد شتون لري. دا ډیزاین نمونې د لسیزو ګډې انجینري تجربې څخه رامینځته شوي دي.

فکري موډلونه زده کړه ګړندۍ کوي: کله چې تاسو پر جوړښت پوه شئ، تاسو کولی شئ په نویو شرایطو کې د هغې د چلند اټکل وکړئ او ستونزې په اسانۍ سره حل کړئ.

مهمې اصطلاحګانې تعریف شوې

مسلکي چاپیریال ځانګړي او دقیق لغتونه لري. په درسي مسار کې خپل شخصي قاموس جوړولو ته لومړیتوب ورکړئ او د هر اصطلاح تعریف په سمه توګه زده کړئ.

دا مفهوم په مسار کې چېرته ځای لري

هیڅ مفهوم په یوازیتوب کې شتون نلري. په دې لوست کې ټول بحثونه د دې درسي مسار له نورو لوستونو سره تړلي دي. د وړاندې تګ دمخه ډاډ ترلاسه کړئ چې پر هر مهم ټکي په بشپړ ډول پوه شوي یاست.

flowchart TD A["د HTML5 ټاګونو، عنصرونو (Elements) او جوړښت پوهېدل"] --> B["Browser DOM"] B --> C["CSS Styling"] C --> D["JS Interactivity"] D --> E["Deployment Pages"] end

مسلکي اوزارونه او د پرمختیايي پروګرامونو ډګر

جدید وېب پرمختګ د ایډیټرانو، د بڼو کنټرول شبکو، د براوزر پرمختیايي وسیلو او خپرولو د پایپ لاینونو پر بنسټ ولاړ دی. په دې پوهیدل چې کوم اوزار کله وکاروئ، د مسلکي کسانو نښه ده.

Visual Studio Code — د وېب جوړونکو تر ټولو مشهور کوډ ایډیټر. د Prettier او GitLens په څېر ګټورې برخې لري چې کار خورا اسانه کوي.
Chrome DevTools — د براوزر دننه جوړه شوې وسیله چې په ژوندۍ بڼه د DOM ایډیټ کولو او د سټایلونو ډیبګ کولو اجازه ورکوي.
GitHub / GitHub Pages — د کوډونو خوندي کولو او د وړیا جامد پاڼو د خپرولو تر ټولو لویه نړیواله شبکه.
Node.js / npm — د سرور په کچه د جاواسکریپټ چلولو او د نویو کڅوړو د مدیریت تر ټولو مهم پروګرام.

د ځانګړې دندې لپاره د سم اوزار غوره کول پخپله یو مسلکي مهارت دی. د مسلک د پرمختګ سره به تاسو پوه شئ چې کله د چمتو شوي پلیټ فارمونو څخه کار واخلئ او کله خپل جوړ شوي حلونه وکاروئ. دا لوست تاسو سره د دې وسیلو په غوره تنظیم او کارولو کې مرسته کوي.

ګام په ګام د پلي کولو لارښود

نظري پوهه د عملي کار پرته نیمګړې ده. لاندې لارښود د اساساتو مفاهیم په عملي پړاوونو بدلوي. هر ګام په دقت سره تعقیب کړئ.

د یوه مانايي جوړښت د جوړولو لپاره، لومړی عمومي نیویګیشن په یوه `

` او `

` بلاک کې راونغاړئ. د پاڼې اصلي محتوا باید په یوه ځانګړي `

` عنصر کې واقع وي، او د منظمو موضوعاتو لپاره باید په جلا `

` او `

` نوډونو ووېشل شي. پاڼه د یوه `

` ټاګ سره پای ته ورسوئ ترڅو د چاپ حق خبرتیاوې، د تګلارو لېنکونه او میټاډاټا ولري. تل خپل د سرلیکونو ټاګونه (له h1 څخه تر h6 پورې) په یوه دقیق او ترتیبي جوړښت کې تنظیم کړئ ترڅو د لاسرسي مرستندویه وسيلې (Accessibility tools) د سند درجه بندي په سمه توګه درک کړي.

د غلطیو اصلي ځایونه

د ساحې مسلکي کسان پوهیږي چې ځینې کارونه د نورو په پرتله د غلطیو ډیر چانس لري. مخکې له مخکې پر هغو پوهیدل ستاسو وخت خورا سپموي:

د کاري محیط تنظیمول — ستاسو د کمپیوټر او اصلي سرور ترمنځ توپیر د غلطیو یو لوی لامل دی.
د پروژې په پیل کې د کار پېچلي کول — لومړی تر ټولو ساده نسخه جوړه کړئ او بیا یې پرمخ بوځئ.
د اسنادو یا کمنټونو نه لیکل — د کوډ کولو سره جوخت د هغې په اړه توضیحات لیکل خورا مهم دي.

پلي کول او ارزونه

عملي کار هغه وخت بشپړیږي چې پایلې یې تایید شي. د ځان څخه پوښتنه وکړئ: څنګه پوه شم چې دا په سمه توګه کار کوي؟

غوره او مسلکي کړنې

د غوره لارو چارو پوهیدل د ستونزو او خطراتو مخنیوی کوي. د هغو تر شا پر فلسفه او منطق ځان پوه کړئ.

د 'div-soup' له جوړولو ډډه وکړئ، چې په کې پاڼې يوازې له بې مانا div کنټینرونو ډکې وي، ځکه دا کار د پردې لوستونکو (Screen Readers) کارکردګي کمزورې کوي. ډاډ ترلاسه کړئ چې په هره پاڼه کې يوازې يو `

` ټاګ د پاڼې د عمومي عنوان په توګه وکاروئ، او د نورو فرعي برخو لپاره له `

` څخه تر `

` پورې ټاګونه وکاروئ. سربېره پردې، مناسب ARIA رولونه یوازې هغه وخت وکاروئ کله چې مانايي عنصرونه ونشي کولی د کسٹم عنصرونو تعاملي چلند په بشپړ ډول تشریح کړي.

د مسلکي او باکیفیته کاري ذهنیت جوړول

د غوره لارو چارو د یادولو تر ټولو غوره لار دا ده چې خپل ځان ته یو چک لیست جوړ کړئ او د کار په پای کې د هغې له مخې هر څه وڅارئ.

لکه څنګه چې ستاسو مهارتونه وده کوي، تاسو به وګورئ چې په یوه برخه کې غوره لارې چارې له نورو برخو سره مرسته کوي.

عملي او رښتیني کوډ بېلګې

لاندې کوډ بېلګه په عملي توګه د لوست اساسات ښيي. دا په غور سره وڅارئ او په خپل عملي کار کې ورڅخه ګټه واخلئ.

یو عام لامل دا دی چې کوډ له پوهېدو پرته کاپي شي. د کاپي کولو پر ځای، لومړی د کوډ په هره کرښه په غور سره فکر وکړئ او پر رول یې پوه شئ.

index.html

په سنډباکس کې خلاص کړئ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic Page Scaffold</title>
</head>
<body>
    <header>
        <h1>Poha Academy</h1>
        <nav>
            <a href="#about">About</a> | 
            <a href="#courses">Courses</a>
        </nav>
    </header>
    <main>
        <article>
            <h2>Semantic HTML5 Structure</h2>
            <p>This is the primary reading content area.</p>
        </article>
    </main>
    <footer>
        &copy; 2026 Poha Academy
    </footer>
</body>
</html>

متقابل کوډ سنډباکس

سرچینه ایډیټر (د سمون لپاره لاندې ولیکئ)

ژوندۍ تماشا پاڼه

عملي تمرینونه او ارزونه

زده کړه د عمل په واسطه پیاوړې کیږي. د دې لپاره چې ډاډ ترلاسه کړئ چې تاسو د دې لوست مفاهیم په سمه توګه درک کړي، لاندې درې عملي تمرینونه ترسره کړئ:

د HTML5 یو اساسي فایل جوړ کړئ چې یو سرلیک (Header)، د نیویګیشن بار (Navigation bar)، د دوو مقالو لرونکې اصلي محتوا (Main Content)، او یو پایلیک (Footer) ولري.
د سرلیکونو یو دقیق او پرله‌پسې جوړښت (h1, h2, h3) جوړ کړئ چې د یوه کتاب لړلیک وښيي، او دا په خپل براوزر کې وازمویئ.
د براوزر د DevTools پر مټ یوه مشهوره لېنډینګ پاڼه (Landing Page) تحلیل کړئ ترڅو وګورئ چې آیا هغوی سم مانايي نوډونه کارولي که نه.

ځانګړې ارزونه

خپله پوهه په سمدستي ډول د دې پوښتنې په ځوابولو سره وڅارئ:

کوم د HTML5 عنصر د یو سند اصلي او بې سارې محتوا ښيي؟

سرچینې او اضافي لوستل

د W3C رسمي ټیکنالوژیکي معیارونه او مشخصات (۲۰۲۶).
د ګوګل پرمختیايي اسناد: د فعالیت، سئو (SEO)، او امنیت غوره کړنې.
د موزیلا پرمختیايي شبکه (MDN Web Docs) — د ویب معیارونو اصلي سرچینه.
د پوهې اکاډمۍ درسي بورډ او د ساحې د مسلکي کسانو د بیاکتنې پینل.

وړیا تصدیق لیک

د مسار اړوند ازموینې پاس کړئ ترڅو تایید شوی تخنیکي ډیجیټل تصدیق ترلاسه کړئ.

ازموینه پیل کړئ

لارښود سره خبرې کول

د لیرې کار، کوډنګ او مصنوعي ذکاوت په اړه پوښتنې لرئ؟ د مشورې وړیا ناسته بک کړئ.

وړیا غوښتنه وسپارئ